1 // This test ensures that the elements in the sidebar are displayed correctly.
3 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
4 // Since the javascript is disabled, there shouldn't be a toggle.
5 assert-false: "#src-sidebar-toggle"
6 wait-for-css: (".sidebar", {"display": "none"})
8 // Let's retry with javascript enabled.
11 wait-for: "#src-sidebar-toggle"
12 assert-css: ("#src-sidebar-toggle", {"visibility": "visible"})
13 assert-css: (".sidebar > *:not(#src-sidebar-toggle)", {"visibility": "hidden"})
14 // Let's expand the sidebar now.
15 click: "#src-sidebar-toggle"
16 wait-for-css: ("#src-sidebar-toggle", {"visibility": "visible"})
18 // We now check that opening the sidebar and clicking a link will leave it open.
19 // The behavior here on desktop is different than the behavior on mobile,
20 // but since the sidebar doesn't fill the entire screen here, it makes sense to have the
21 // sidebar stay resident.
22 wait-for-css: (".sidebar", {"width": "300px"})
23 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
24 click: ".sidebar a.selected"
25 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
26 wait-for-css: (".sidebar", {"width": "300px"})
27 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
29 // Now we check the display of the sidebar items.
35 theme, color, color_hover, background, background_hover, background_toggle,
36 background_toggle_hover,
39 ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
41 ("wait-for-css", ("#src-sidebar-toggle", {"visibility": "visible"})),
43 "#source-sidebar details[open] > .files a.selected",
44 {"color": |color_hover|, "background-color": |background|},
47 // Without hover or focus.
48 ("assert-css", ("#src-sidebar-toggle > button", {"background-color": |background_toggle|})),
50 ("focus", "#src-sidebar-toggle > button"),
52 "#src-sidebar-toggle > button:focus",
53 {"background-color": |background_toggle_hover|},
55 ("focus", ".search-input"),
57 ("move-cursor-to", "#src-sidebar-toggle > button"),
59 "#src-sidebar-toggle > button:hover",
60 {"background-color": |background_toggle_hover|},
63 // Without hover or focus.
65 "#source-sidebar details[open] > .files a:not(.selected)",
66 {"color": |color|, "background-color": |background_toggle|},
69 ("focus", "#source-sidebar details[open] > .files a:not(.selected)"),
71 "#source-sidebar details[open] > .files a:not(.selected):focus",
72 {"color": |color_hover|, "background-color": |background_hover|},
74 ("focus", ".search-input"),
76 ("move-cursor-to", "#source-sidebar details[open] > .files a:not(.selected)"),
78 "#source-sidebar details[open] > .files a:not(.selected):hover",
79 {"color": |color_hover|, "background-color": |background_hover|},
82 // Without hover or focus.
84 "#source-sidebar .dir-entry summary",
85 {"color": |color|, "background-color": |background_toggle|},
88 ("focus", "#source-sidebar .dir-entry summary"),
90 "#source-sidebar .dir-entry summary:focus",
91 {"color": |color_hover|, "background-color": |background_hover|},
93 ("focus", ".search-input"),
95 ("move-cursor-to", "#source-sidebar .dir-entry summary"),
97 "#source-sidebar .dir-entry summary:hover",
98 {"color": |color_hover|, "background-color": |background_hover|},
101 // Without hover or focus.
103 "#source-sidebar details[open] > .folders > details > summary",
104 {"color": |color|, "background-color": |background_toggle|},
107 ("focus", "#source-sidebar details[open] > .folders > details > summary"),
109 "#source-sidebar details[open] > .folders > details > summary:focus",
110 {"color": |color_hover|, "background-color": |background_hover|},
112 ("focus", ".search-input"),
114 ("move-cursor-to", "#source-sidebar details[open] > .folders > details > summary"),
116 "#source-sidebar details[open] > .folders > details > summary:hover",
117 {"color": |color_hover|, "background-color": |background_hover|},
122 call-function: ("check-colors", {
124 "color": "rgb(0, 0, 0)",
125 "color_hover": "rgb(0, 0, 0)",
126 "background": "rgb(255, 255, 255)",
127 "background_hover": "rgb(224, 224, 224)",
128 "background_toggle": "rgba(0, 0, 0, 0)",
129 "background_toggle_hover": "rgb(224, 224, 224)",
131 call-function: ("check-colors", {
133 "color": "rgb(221, 221, 221)",
134 "color_hover": "rgb(221, 221, 221)",
135 "background": "rgb(51, 51, 51)",
136 "background_hover": "rgb(68, 68, 68)",
137 "background_toggle": "rgba(0, 0, 0, 0)",
138 "background_toggle_hover": "rgb(103, 103, 103)",
140 call-function: ("check-colors", {
142 "color": "rgb(197, 197, 197)",
143 "color_hover": "rgb(255, 180, 76)",
144 "background": "rgb(20, 25, 31)",
145 "background_hover": "rgb(20, 25, 31)",
146 "background_toggle": "rgba(0, 0, 0, 0)",
147 "background_toggle_hover": "rgba(70, 70, 70, 0.33)",
150 // Now checking on mobile devices.
153 // Waiting for the sidebar to be displayed...
154 wait-for-css: ("#src-sidebar-toggle", {"visibility": "visible"})
156 // We now check it takes the full size of the display.
157 assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
158 assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
160 // We now check the display of the toggle once the sidebar is expanded.
161 assert-property: ("#src-sidebar-toggle", {"clientWidth": "500", "clientHeight": "39"})
163 "#src-sidebar-toggle",
165 "border-top-width": "0px",
166 "border-right-width": "0px",
167 "border-left-width": "0px",
168 "border-bottom-width": "1px",
172 // We now check that the scroll position is kept when opening the sidebar.
173 click: "#src-sidebar-toggle"
174 wait-for-css: (".sidebar", {"width": "0px"})
175 // We scroll to line 117 to change the scroll position.
176 scroll-to: '//*[@id="117"]'
177 assert-window-property: {"pageYOffset": "2542"}
178 // Expanding the sidebar...
179 click: "#src-sidebar-toggle"
180 wait-for-css: (".sidebar", {"width": "500px"})
181 click: "#src-sidebar-toggle"
182 wait-for-css: (".sidebar", {"width": "0px"})
183 // The "scrollTop" property should be the same.
184 assert-window-property: {"pageYOffset": "2542"}
186 // We now check that the scroll position is restored if the window is resized.
188 click: "#src-sidebar-toggle"
189 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
190 assert-window-property: {"pageYOffset": "0"}
192 assert-window-property: {"pageYOffset": "2542"}
194 click: "#src-sidebar-toggle"
195 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
197 // We now check that opening the sidebar and clicking a link will close it.
198 // The behavior here on mobile is different than the behavior on desktop,
199 // but common sense dictates that if you have a list of files that fills the entire screen, and
200 // you click one of them, you probably want to actually see the file's contents, and not just
201 // make it the current selection.
202 click: "#src-sidebar-toggle"
203 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
204 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
205 click: ".sidebar a.selected"
206 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
207 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
208 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
209 // Resize back to desktop size, to check that the sidebar doesn't spontaneously open.
211 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
212 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
213 click: "#src-sidebar-toggle"
214 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
215 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}