1 // This test ensures that the settings menu display is working as expected and that
2 // the settings page is also rendered as expected.
3 goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
4 show-text: true // needed when we check for colors below.
5 // First, we check that the settings page doesn't exist.
6 assert-false: "#settings"
7 // We now click on the settings button.
8 click: "#settings-menu"
10 assert-css: ("#settings", {"display": "block"})
11 // Let's close it by clicking on the same button.
12 click: "#settings-menu"
13 wait-for-css: ("#settings", {"display": "none"})
15 // Let's check that pressing "ESCAPE" is closing it.
16 click: "#settings-menu"
17 wait-for-css: ("#settings", {"display": "block"})
19 wait-for-css: ("#settings", {"display": "none"})
21 // Let's click on it when the search results are displayed.
22 focus: ".search-input"
24 // To be SURE that the search will be run.
26 wait-for: "#alternative-display #search"
27 click: "#settings-menu"
28 wait-for-css: ("#settings", {"display": "block"})
29 // Ensure that the search is still displayed.
30 wait-for: "#alternative-display #search"
31 assert: "#main-content.hidden"
33 // Now let's check the content of the settings menu.
34 local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
36 click: "#settings-menu"
39 // We check that the "Use system theme" is disabled.
40 assert-property: ("#use-system-theme", {"checked": "false"})
41 assert: "//*[@class='setting-line']//span[text()='Use system theme']"
42 // Meaning that only the "theme" menu is showing up.
43 assert: ".setting-line:not(.hidden) #theme"
44 assert: ".setting-line.hidden #preferred-dark-theme"
45 assert: ".setting-line.hidden #preferred-light-theme"
47 // We check that the correct theme is selected.
48 assert-property: ("#theme .choices #theme-dark", {"checked": "true"})
50 // Some style checks...
51 move-cursor-to: "#settings-menu > a"
52 // First we check the "default" display for radio buttons.
56 "border-color": "rgb(221, 221, 221)",
57 "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
60 assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
61 // Let's start with the hover for radio buttons.
62 move-cursor-to: "#theme-dark"
66 "border-color": "rgb(33, 150, 243)",
67 "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
70 move-cursor-to: "#theme-light"
71 assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
72 move-cursor-to: "#theme-ayu"
73 // Let's now check with the focus for radio buttons.
78 "border-color": "rgb(221, 221, 221)",
79 "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
86 "border-color": "rgb(221, 221, 221)",
87 "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
90 // Now we check we both focus and hover for radio buttons.
91 move-cursor-to: "#theme-dark"
96 "border-color": "rgb(33, 150, 243)",
97 "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
100 move-cursor-to: "#theme-light"
101 focus: "#theme-light"
105 "border-color": "rgb(33, 150, 243)",
106 "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
110 // First we check the "default" display for toggles.
112 "#auto-hide-large-items",
114 "background-color": "rgb(33, 150, 243)",
115 "border-color": "rgb(221, 221, 221)",
121 "background-color": "rgba(0, 0, 0, 0)",
122 "border-color": "rgb(221, 221, 221)",
125 // Let's start with the hover for toggles.
126 move-cursor-to: "#auto-hide-large-items"
128 "#auto-hide-large-items",
130 "background-color": "rgb(33, 150, 243)",
131 "border-color": "rgb(33, 150, 243)",
134 move-cursor-to: "#use-system-theme"
138 "background-color": "rgba(0, 0, 0, 0)",
139 "border-color": "rgb(33, 150, 243)",
142 move-cursor-to: "#settings-menu > a"
143 // Let's now check with the focus for toggles.
144 focus: "#auto-hide-large-items"
146 "#auto-hide-large-items",
148 "background-color": "rgb(33, 150, 243)",
149 "border-color": "rgb(221, 221, 221)",
150 "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
153 focus: "#use-system-theme"
157 "background-color": "rgba(0, 0, 0, 0)",
158 "border-color": "rgb(221, 221, 221)",
159 "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
162 // Now we check we both focus and hover for toggles.
163 move-cursor-to: "#auto-hide-large-items"
164 focus: "#auto-hide-large-items"
166 "#auto-hide-large-items",
168 "background-color": "rgb(33, 150, 243)",
169 "border-color": "rgb(33, 150, 243)",
170 "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
173 move-cursor-to: "#use-system-theme"
174 focus: "#use-system-theme"
178 "background-color": "rgba(0, 0, 0, 0)",
179 "border-color": "rgb(33, 150, 243)",
180 "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
184 // We now switch the display.
185 click: "#use-system-theme"
186 // Wait for the hidden element to show up.
187 wait-for: ".setting-line:not(.hidden) #preferred-dark-theme"
188 assert: ".setting-line:not(.hidden) #preferred-light-theme"
189 // Check that the theme picking is hidden.
190 assert: ".setting-line.hidden #theme"
192 // We check their text as well.
193 assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
194 assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme")
196 // We now check that clicking on the toggles' text is like clicking on the checkbox.
197 // To test it, we use the "Disable keyboard shortcuts".
198 local-storage: {"rustdoc-disable-shortcuts": "false"}
199 click: ".setting-line:last-child .toggle .label"
200 assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
202 // Make sure that "Disable keyboard shortcuts" actually took effect.
205 assert-false: "#help-button .popover"
206 wait-for-css: ("#settings-menu .popover", {"display": "block"})
208 // Now turn keyboard shortcuts back on, and see if they work.
209 click: ".setting-line:last-child .toggle .label"
210 assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
213 wait-for-css: ("#help-button .popover", {"display": "block"})
214 assert-css: ("#settings-menu .popover", {"display": "none"})
216 // Now we go to the settings page to check that the CSS is loaded as expected.
217 goto: "file://" + |DOC_PATH| + "/settings.html"
218 wait-for: "#settings"
219 assert-css: (".setting-line", {"position": "relative"})
221 assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
222 compare-elements-position: (".sub form", "#settings", ("x"))
224 // We now check the display with JS disabled.
225 assert-false: "noscript section"
228 assert-css: ("noscript section", {"display": "block"})
231 // Check for the display on small screen
235 click: "#settings-menu"
236 wait-for: "#settings"
237 assert-css: (".setting-line", {"position": "relative"})