tests/rustdoc-gui/settings.goml

   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"
   9 wait-for: "#settings"
  10 assert-css: ("#settings", {"display": "block"})
  11
  12 // Store the line margin to compare with the settings.html later.
  13 store-css: (setting_line_margin, ".setting-line", "margin")
  14
  15 // Let's close it by clicking on the same button.
  16 click: "#settings-menu"
  17 wait-for-css: ("#settings", {"display": "none"})
  18
  19 // Let's check that pressing "ESCAPE" is closing it.
  20 click: "#settings-menu"
  21 wait-for-css: ("#settings", {"display": "block"})
  22 press-key: "Escape"
  23 wait-for-css: ("#settings", {"display": "none"})
  24
  25 // Let's click on it when the search results are displayed.
  26 focus: ".search-input"
  27 write: "test"
  28 // To be SURE that the search will be run.
  29 press-key: 'Enter'
  30 wait-for: "#alternative-display #search"
  31 click: "#settings-menu"
  32 wait-for-css: ("#settings", {"display": "block"})
  33 // Ensure that the search is still displayed.
  34 wait-for: "#alternative-display #search"
  35 assert: "#main-content.hidden"
  36
  37 // Now let's check the content of the settings menu.
  38 local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
  39 reload:
  40 click: "#settings-menu"
  41 wait-for: "#settings"
  42
  43 // We check that the "Use system theme" is disabled.
  44 assert-property: ("#theme-system-preference", {"checked": "false"})
  45 // Meaning that only the "theme" menu is showing up.
  46 assert: "#theme.setting-line:not(.hidden)"
  47 assert: "#preferred-dark-theme.setting-line.hidden"
  48 assert: "#preferred-light-theme.setting-line.hidden"
  49
  50 // We check that the correct theme is selected.
  51 assert-property: ("#theme .setting-radio-choices #theme-dark", {"checked": "true"})
  52
  53 // Some style checks...
  54 move-cursor-to: "#settings-menu > a"
  55 // First we check the "default" display for radio buttons.
  56 assert-css: (
  57     "#theme-dark",
  58     {
  59         "border-color": "rgb(221, 221, 221)",
  60         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  61     },
  62 )
  63 assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
  64 // Let's start with the hover for radio buttons.
  65 move-cursor-to: "#theme-dark"
  66 assert-css: (
  67     "#theme-dark",
  68     {
  69         "border-color": "rgb(33, 150, 243)",
  70         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  71     },
  72 )
  73 move-cursor-to: "#theme-light"
  74 assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
  75 move-cursor-to: "#theme-ayu"
  76 // Let's now check with the focus for radio buttons.
  77 focus: "#theme-dark"
  78 assert-css: (
  79     "#theme-dark",
  80     {
  81         "border-color": "rgb(221, 221, 221)",
  82         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
  83     },
  84 )
  85 focus: "#theme-light"
  86 assert-css: (
  87     "#theme-light",
  88     {
  89         "border-color": "rgb(221, 221, 221)",
  90         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
  91     },
  92 )
  93 // Now we check we both focus and hover for radio buttons.
  94 move-cursor-to: "#theme-dark"
  95 focus: "#theme-dark"
  96 assert-css: (
  97     "#theme-dark",
  98     {
  99         "border-color": "rgb(33, 150, 243)",
 100         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
 101     },
 102 )
 103 move-cursor-to: "#theme-light"
 104 focus: "#theme-light"
 105 assert-css: (
 106     "#theme-light",
 107     {
 108         "border-color": "rgb(33, 150, 243)",
 109         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 110     },
 111 )
 112 // Now we check the setting-radio-name is on a different line than the label.
 113 compare-elements-position-near: (
 114     "#theme .setting-radio-name",
 115     "#theme .setting-radio-choices",
 116     {"x": 1}
 117 )
 118 compare-elements-position-near-false: (
 119     "#theme .setting-radio-name",
 120     "#theme .setting-radio-choices",
 121     {"y": 1}
 122 )
 123 // Now we check that the label positions are all on the same line.
 124 compare-elements-position-near: (
 125     "#theme .setting-radio-choices #theme-light",
 126     "#theme .setting-radio-choices #theme-dark",
 127     {"y": 1}
 128 )
 129 compare-elements-position-near: (
 130     "#theme .setting-radio-choices #theme-dark",
 131     "#theme .setting-radio-choices #theme-ayu",
 132     {"y": 1}
 133 )
 134 compare-elements-position-near: (
 135     "#theme .setting-radio-choices #theme-ayu",
 136     "#theme .setting-radio-choices #theme-system-preference",
 137     {"y": 1}
 138 )
 139
 140 // First we check the "default" display for toggles.
 141 assert-css: (
 142     "#auto-hide-large-items",
 143     {
 144         "background-color": "rgb(33, 150, 243)",
 145         "border-color": "rgb(221, 221, 221)",
 146     },
 147 )
 148 // Let's start with the hover for toggles.
 149 move-cursor-to: "#auto-hide-large-items"
 150 assert-css: (
 151     "#auto-hide-large-items",
 152     {
 153         "background-color": "rgb(33, 150, 243)",
 154         "border-color": "rgb(33, 150, 243)",
 155     },
 156 )
 157 move-cursor-to: "#settings-menu > a"
 158 // Let's now check with the focus for toggles.
 159 focus: "#auto-hide-large-items"
 160 assert-css: (
 161     "#auto-hide-large-items",
 162     {
 163         "background-color": "rgb(33, 150, 243)",
 164         "border-color": "rgb(221, 221, 221)",
 165         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 166     },
 167 )
 168 // Now we check we both focus and hover for toggles.
 169 move-cursor-to: "#auto-hide-large-items"
 170 focus: "#auto-hide-large-items"
 171 assert-css: (
 172     "#auto-hide-large-items",
 173     {
 174         "background-color": "rgb(33, 150, 243)",
 175         "border-color": "rgb(33, 150, 243)",
 176         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 177     },
 178 )
 179
 180 // We now switch the display.
 181 click: "#theme-system-preference"
 182 // Wait for the hidden element to show up.
 183 wait-for: "#preferred-dark-theme.setting-line:not(.hidden)"
 184 assert: "#preferred-light-theme.setting-line:not(.hidden)"
 185
 186 // We check their text as well.
 187 assert-text: ("#preferred-dark-theme .setting-radio-name", "Preferred dark theme")
 188 assert-text: ("#preferred-light-theme .setting-radio-name", "Preferred light theme")
 189
 190 // We now check that clicking on the toggles' text is like clicking on the checkbox.
 191 // To test it, we use the "Disable keyboard shortcuts".
 192 local-storage: {"rustdoc-disable-shortcuts": "false"}
 193 click: ".setting-line:last-child .setting-check span"
 194 assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
 195
 196 // Make sure that "Disable keyboard shortcuts" actually took effect.
 197 press-key: "Escape"
 198 press-key: "?"
 199 assert-false: "#help-button .popover"
 200 wait-for-css: ("#settings-menu .popover", {"display": "block"})
 201
 202 // Now turn keyboard shortcuts back on, and see if they work.
 203 click: ".setting-line:last-child .setting-check span"
 204 assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
 205 press-key: "Escape"
 206 press-key: "?"
 207 wait-for-css: ("#help-button .popover", {"display": "block"})
 208 assert-css: ("#settings-menu .popover", {"display": "none"})
 209
 210 // Now switch back to the settings popover, and make sure the keyboard
 211 // shortcut works when a check box is selected.
 212 click: "#settings-menu > a"
 213 wait-for-css: ("#settings-menu .popover", {"display": "block"})
 214 focus: "#auto-hide-large-items"
 215 press-key: "?"
 216 wait-for-css: ("#settings-menu .popover", {"display": "none"})
 217 wait-for-css: ("#help-button .popover", {"display": "block"})
 218
 219 // Now switch back to the settings popover, and make sure the keyboard
 220 // shortcut works when a check box is selected.
 221 click: "#settings-menu > a"
 222 wait-for-css: ("#settings-menu .popover", {"display": "block"})
 223 wait-for-css: ("#help-button .popover", {"display": "none"})
 224 focus: "#theme-system-preference"
 225 press-key: "?"
 226 wait-for-css: ("#settings-menu .popover", {"display": "none"})
 227 wait-for-css: ("#help-button .popover", {"display": "block"})
 228
 229 // Now we go to the settings page to check that the CSS is loaded as expected.
 230 goto: "file://" + |DOC_PATH| + "/settings.html"
 231 wait-for: "#settings"
 232 assert-css: (".setting-line", {"position": "relative"})
 233
 234 assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
 235 compare-elements-position: (".sub form", "#settings", ("x"))
 236
 237 // Check that setting-line has the same margin in this mode as in the popover.
 238 assert-css: (".setting-line", {"margin": |setting_line_margin|})
 239
 240 // We now check the display with JS disabled.
 241 assert-false: "noscript section"
 242 javascript: false
 243 reload:
 244 assert-css: ("noscript section", {"display": "block"})
 245 javascript: true
 246
 247 // Check for the display on small screen
 248 show-text: true
 249 reload:
 250 size: (300, 1000)
 251 click: "#settings-menu"
 252 wait-for: "#settings"
 253 assert-css: (".setting-line", {"position": "relative"})