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: "#sidebar-toggle"
6 // For some reason, we need to wait a bit here because it seems like the transition on opacity
7 // is being applied whereas it can't be reproduced in a browser...
8 wait-for-css: (".sidebar > *", {"visibility": "hidden", "opacity": 0})
10 // Let's retry with javascript enabled.
13 wait-for: "#sidebar-toggle"
14 assert-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
15 assert-css: (".sidebar > *:not(#sidebar-toggle)", {"visibility": "hidden", "opacity": 0})
16 // Let's expand the sidebar now.
17 click: "#sidebar-toggle"
18 // Because of the transition CSS, we check by using `wait-for-css` instead of `assert-css`.
19 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
21 // We now check that opening the sidebar and clicking a link will leave it open.
22 // The behavior here on desktop is different than the behavior on mobile,
23 // but since the sidebar doesn't fill the entire screen here, it makes sense to have the
24 // sidebar stay resident.
25 wait-for-css: (".sidebar", {"width": "300px"})
26 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
27 click: ".sidebar a.selected"
28 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
29 wait-for-css: (".sidebar", {"width": "300px"})
30 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
32 // Now we check the display of the sidebar items.
35 // First we start with the light theme.
36 local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
38 // Waiting for the sidebar to be displayed...
39 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
41 "#source-sidebar details[open] > .files a.selected",
42 {"color": "rgb(0, 0, 0)", "background-color": "rgb(255, 255, 255)"},
44 // Without hover or focus.
45 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
47 focus: "#sidebar-toggle > button"
48 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"})
49 focus: ".search-input"
51 move-cursor-to: "#sidebar-toggle > button"
52 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"})
55 "#source-sidebar details[open] > .files a:not(.selected)",
56 {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
59 focus: "#source-sidebar details[open] > .files a:not(.selected)"
61 "#source-sidebar details[open] > .files a:not(.selected)",
62 {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
64 focus: ".search-input"
66 move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
68 "#source-sidebar details[open] > .files a:not(.selected)",
69 {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
73 "#source-sidebar details[open] > .folders > details > summary",
74 {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
77 focus: "#source-sidebar details[open] > .folders > details > summary"
79 "#source-sidebar details[open] > .folders > details > summary",
80 {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
82 focus: ".search-input"
84 move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
86 "#source-sidebar details[open] > .folders > details > summary",
87 {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
90 // Now with the dark theme.
91 local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
93 // Waiting for the sidebar to be displayed...
94 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
96 "#source-sidebar details[open] > .files > a.selected",
97 {"color": "rgb(221, 221, 221)", "background-color": "rgb(51, 51, 51)"},
99 // Without hover or focus.
100 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
102 focus: "#sidebar-toggle > button"
103 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"})
104 focus: ".search-input"
106 move-cursor-to: "#sidebar-toggle > button"
107 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"})
110 "#source-sidebar details[open] > .files > a:not(.selected)",
111 {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
114 focus: "#source-sidebar details[open] > .files a:not(.selected)"
116 "#source-sidebar details[open] > .files a:not(.selected)",
117 {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
119 focus: ".search-input"
121 move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
123 "#source-sidebar details[open] > .files a:not(.selected)",
124 {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
128 "#source-sidebar details[open] > .folders > details > summary",
129 {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
132 focus: "#source-sidebar details[open] > .folders > details > summary"
134 "#source-sidebar details[open] > .folders > details > summary",
135 {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
137 focus: ".search-input"
139 move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
141 "#source-sidebar details[open] > .folders > details > summary",
142 {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
145 // And finally with the ayu theme.
146 local-storage: {"rustdoc-theme": "ayu", "rustdoc-use-system-theme": "false"}
148 // Waiting for the sidebar to be displayed...
149 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
151 "#source-sidebar details[open] > .files a.selected",
152 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
154 // Without hover or focus.
155 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
157 focus: "#sidebar-toggle > button"
158 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"})
159 focus: ".search-input"
161 move-cursor-to: "#sidebar-toggle > button"
162 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"})
165 "#source-sidebar details[open] > .files a:not(.selected)",
166 {"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
169 focus: "#source-sidebar details[open] > .files a:not(.selected)"
171 "#source-sidebar details[open] > .files a:not(.selected)",
172 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
174 focus: ".search-input"
176 move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
178 "#source-sidebar details[open] > .files a:not(.selected)",
179 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
183 "#source-sidebar details[open] > .folders > details > summary",
184 {"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
187 focus: "#source-sidebar details[open] > .folders > details > summary"
189 "#source-sidebar details[open] > .folders > details > summary",
190 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
192 focus: ".search-input"
194 move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
196 "#source-sidebar details[open] > .folders > details > summary",
197 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
200 // Now checking on mobile devices.
203 // Waiting for the sidebar to be displayed...
204 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
206 // We now check it takes the full size of the display.
207 assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
208 assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
210 // We now check the display of the toggle once the sidebar is expanded.
211 assert-property: ("#sidebar-toggle", {"clientWidth": "500", "clientHeight": "39"})
215 "border-top-width": "0px",
216 "border-right-width": "0px",
217 "border-left-width": "0px",
218 "border-bottom-width": "1px",
222 // We now check that the scroll position is kept when opening the sidebar.
223 click: "#sidebar-toggle"
224 wait-for-css: (".sidebar", {"width": "0px"})
225 // We scroll to line 117 to change the scroll position.
226 scroll-to: '//*[@id="117"]'
227 assert-window-property: {"pageYOffset": "2542"}
228 // Expanding the sidebar...
229 click: "#sidebar-toggle"
230 wait-for-css: (".sidebar", {"width": "500px"})
231 click: "#sidebar-toggle"
232 wait-for-css: (".sidebar", {"width": "0px"})
233 // The "scrollTop" property should be the same.
234 assert-window-property: {"pageYOffset": "2542"}
236 // We now check that the scroll position is restored if the window is resized.
238 click: "#sidebar-toggle"
239 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
240 assert-window-property: {"pageYOffset": "0"}
242 assert-window-property: {"pageYOffset": "2542"}
244 click: "#sidebar-toggle"
245 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
247 // We now check that opening the sidebar and clicking a link will close it.
248 // The behavior here on mobile is different than the behavior on desktop,
249 // but common sense dictates that if you have a list of files that fills the entire screen, and
250 // you click one of them, you probably want to actually see the file's contents, and not just
251 // make it the current selection.
252 click: "#sidebar-toggle"
253 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
254 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
255 click: ".sidebar a.selected"
256 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
257 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
258 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
259 // Resize back to desktop size, to check that the sidebar doesn't spontaneously open.
261 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
262 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
263 click: "#sidebar-toggle"
264 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
265 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}