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 wait-for-css: (".sidebar > *", {"visibility": "hidden"})
8 // Let's retry with javascript enabled.
11 wait-for: "#sidebar-toggle"
12 assert-css: ("#sidebar-toggle", {"visibility": "visible"})
13 assert-css: (".sidebar > *:not(#sidebar-toggle)", {"visibility": "hidden"})
14 // Let's expand the sidebar now.
15 click: "#sidebar-toggle"
16 wait-for-css: ("#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.
32 // First we start with the light theme.
33 local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
35 // Waiting for the sidebar to be displayed...
36 wait-for-css: ("#sidebar-toggle", {"visibility": "visible"})
38 "#source-sidebar details[open] > .files a.selected",
39 {"color": "rgb(0, 0, 0)", "background-color": "rgb(255, 255, 255)"},
41 // Without hover or focus.
42 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
44 focus: "#sidebar-toggle > button"
45 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"})
46 focus: ".search-input"
48 move-cursor-to: "#sidebar-toggle > button"
49 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"})
52 "#source-sidebar details[open] > .files a:not(.selected)",
53 {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
56 focus: "#source-sidebar details[open] > .files a:not(.selected)"
58 "#source-sidebar details[open] > .files a:not(.selected)",
59 {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
61 focus: ".search-input"
63 move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
65 "#source-sidebar details[open] > .files a:not(.selected)",
66 {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
70 "#source-sidebar details[open] > .folders > details > summary",
71 {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
74 focus: "#source-sidebar details[open] > .folders > details > summary"
76 "#source-sidebar details[open] > .folders > details > summary",
77 {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
79 focus: ".search-input"
81 move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
83 "#source-sidebar details[open] > .folders > details > summary",
84 {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
87 // Now with the dark theme.
88 local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
90 // Waiting for the sidebar to be displayed...
91 wait-for-css: ("#sidebar-toggle", {"visibility": "visible"})
93 "#source-sidebar details[open] > .files > a.selected",
94 {"color": "rgb(221, 221, 221)", "background-color": "rgb(51, 51, 51)"},
96 // Without hover or focus.
97 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
99 focus: "#sidebar-toggle > button"
100 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"})
101 focus: ".search-input"
103 move-cursor-to: "#sidebar-toggle > button"
104 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"})
107 "#source-sidebar details[open] > .files > a:not(.selected)",
108 {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
111 focus: "#source-sidebar details[open] > .files a:not(.selected)"
113 "#source-sidebar details[open] > .files a:not(.selected)",
114 {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
116 focus: ".search-input"
118 move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
120 "#source-sidebar details[open] > .files a:not(.selected)",
121 {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
125 "#source-sidebar details[open] > .folders > details > summary",
126 {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
129 focus: "#source-sidebar details[open] > .folders > details > summary"
131 "#source-sidebar details[open] > .folders > details > summary",
132 {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
134 focus: ".search-input"
136 move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
138 "#source-sidebar details[open] > .folders > details > summary",
139 {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
142 // And finally with the ayu theme.
143 local-storage: {"rustdoc-theme": "ayu", "rustdoc-use-system-theme": "false"}
145 // Waiting for the sidebar to be displayed...
146 wait-for-css: ("#sidebar-toggle", {"visibility": "visible"})
148 "#source-sidebar details[open] > .files a.selected",
149 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
151 // Without hover or focus.
152 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
154 focus: "#sidebar-toggle > button"
155 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"})
156 focus: ".search-input"
158 move-cursor-to: "#sidebar-toggle > button"
159 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"})
162 "#source-sidebar details[open] > .files a:not(.selected)",
163 {"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
166 focus: "#source-sidebar details[open] > .files a:not(.selected)"
168 "#source-sidebar details[open] > .files a:not(.selected)",
169 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
171 focus: ".search-input"
173 move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
175 "#source-sidebar details[open] > .files a:not(.selected)",
176 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
180 "#source-sidebar details[open] > .folders > details > summary",
181 {"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
184 focus: "#source-sidebar details[open] > .folders > details > summary"
186 "#source-sidebar details[open] > .folders > details > summary",
187 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
189 focus: ".search-input"
191 move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
193 "#source-sidebar details[open] > .folders > details > summary",
194 {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
197 // Now checking on mobile devices.
200 // Waiting for the sidebar to be displayed...
201 wait-for-css: ("#sidebar-toggle", {"visibility": "visible"})
203 // We now check it takes the full size of the display.
204 assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
205 assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
207 // We now check the display of the toggle once the sidebar is expanded.
208 assert-property: ("#sidebar-toggle", {"clientWidth": "500", "clientHeight": "39"})
212 "border-top-width": "0px",
213 "border-right-width": "0px",
214 "border-left-width": "0px",
215 "border-bottom-width": "1px",
219 // We now check that the scroll position is kept when opening the sidebar.
220 click: "#sidebar-toggle"
221 wait-for-css: (".sidebar", {"width": "0px"})
222 // We scroll to line 117 to change the scroll position.
223 scroll-to: '//*[@id="117"]'
224 assert-window-property: {"pageYOffset": "2542"}
225 // Expanding the sidebar...
226 click: "#sidebar-toggle"
227 wait-for-css: (".sidebar", {"width": "500px"})
228 click: "#sidebar-toggle"
229 wait-for-css: (".sidebar", {"width": "0px"})
230 // The "scrollTop" property should be the same.
231 assert-window-property: {"pageYOffset": "2542"}
233 // We now check that the scroll position is restored if the window is resized.
235 click: "#sidebar-toggle"
236 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
237 assert-window-property: {"pageYOffset": "0"}
239 assert-window-property: {"pageYOffset": "2542"}
241 click: "#sidebar-toggle"
242 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
244 // We now check that opening the sidebar and clicking a link will close it.
245 // The behavior here on mobile is different than the behavior on desktop,
246 // but common sense dictates that if you have a list of files that fills the entire screen, and
247 // you click one of them, you probably want to actually see the file's contents, and not just
248 // make it the current selection.
249 click: "#sidebar-toggle"
250 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
251 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
252 click: ".sidebar a.selected"
253 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
254 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
255 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
256 // Resize back to desktop size, to check that the sidebar doesn't spontaneously open.
258 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
259 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
260 click: "#sidebar-toggle"
261 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
262 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}