5cefe75436
This code was added in9dc5dfb975and704050da23because the browser- native checkbox was `display: none`, breaking native keyboard accessibility. The native checkbox is now merely `appearance: none`, which does not turn off [behavior semantics], so JavaScript to reimplement it isn't needed any more. [behavior semantics]: https://w3c.github.io/csswg-drafts/css-ui/#appearance-semantics
326 lines
10 KiB
Plaintext
326 lines
10 KiB
Plaintext
// This test ensures that the settings menu display is working as expected and that
|
|
// the settings page is also rendered as expected.
|
|
go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
|
|
show-text: true // needed when we check for colors below.
|
|
// First, we check that the settings page doesn't exist.
|
|
assert-false: "#settings"
|
|
// We now click on the settings button.
|
|
click: "#settings-menu"
|
|
wait-for: "#settings"
|
|
assert-css: ("#settings", {"display": "block"})
|
|
|
|
// Store the line margin to compare with the settings.html later.
|
|
store-css: (setting_line_margin, ".setting-line", "margin")
|
|
|
|
// Let's close it by clicking on the same button.
|
|
click: "#settings-menu"
|
|
wait-for-css: ("#settings", {"display": "none"})
|
|
|
|
// Let's check that pressing "ESCAPE" is closing it.
|
|
click: "#settings-menu"
|
|
wait-for-css: ("#settings", {"display": "block"})
|
|
press-key: "Escape"
|
|
wait-for-css: ("#settings", {"display": "none"})
|
|
|
|
// Let's click on it when the search results are displayed.
|
|
focus: ".search-input"
|
|
write: "test"
|
|
// To be SURE that the search will be run.
|
|
press-key: 'Enter'
|
|
wait-for: "#alternative-display #search"
|
|
click: "#settings-menu"
|
|
wait-for-css: ("#settings", {"display": "block"})
|
|
// Ensure that the search is still displayed.
|
|
wait-for: "#alternative-display #search"
|
|
assert: "#main-content.hidden"
|
|
|
|
// Now let's check the content of the settings menu.
|
|
set-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
|
|
reload:
|
|
click: "#settings-menu"
|
|
wait-for: "#settings"
|
|
|
|
// We check that the "Use system theme" is disabled.
|
|
assert-property: ("#theme-system-preference", {"checked": "false"})
|
|
// Meaning that only the "theme" menu is showing up.
|
|
assert: "#theme.setting-line:not(.hidden)"
|
|
assert: "#preferred-dark-theme.setting-line.hidden"
|
|
assert: "#preferred-light-theme.setting-line.hidden"
|
|
|
|
// We check that the correct theme is selected.
|
|
assert-property: ("#theme .setting-radio-choices #theme-dark", {"checked": "true"})
|
|
|
|
// Some style checks...
|
|
move-cursor-to: "#settings-menu > a"
|
|
// First we check the "default" display for radio buttons.
|
|
assert-css: (
|
|
"#theme-dark",
|
|
{
|
|
"border-color": "rgb(153, 153, 153)",
|
|
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
assert-css: ("#theme-light", {"border-color": "rgb(153, 153, 153)", "box-shadow": "none"})
|
|
// Let's start with the hover for radio buttons.
|
|
move-cursor-to: "#theme-dark"
|
|
assert-css: (
|
|
"#theme-dark",
|
|
{
|
|
"border-color": "rgb(33, 150, 243)",
|
|
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
move-cursor-to: "#theme-light"
|
|
assert-css: (
|
|
"#theme-light",
|
|
{
|
|
"border-color": "rgb(33, 150, 243)",
|
|
"box-shadow": "none",
|
|
"border-width": "2px",
|
|
}
|
|
)
|
|
move-cursor-to: "#theme-ayu"
|
|
// Let's now check with the focus for radio buttons.
|
|
focus: "#theme-dark"
|
|
assert-css: (
|
|
"#theme-dark",
|
|
{
|
|
"border-color": "rgb(153, 153, 153)",
|
|
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
focus: "#theme-light"
|
|
assert-css: (
|
|
"#theme-light",
|
|
{
|
|
"border-color": "rgb(153, 153, 153)",
|
|
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
// Now we check we both focus and hover for radio buttons.
|
|
move-cursor-to: "#theme-dark"
|
|
focus: "#theme-dark"
|
|
assert-css: (
|
|
"#theme-dark",
|
|
{
|
|
"border-color": "rgb(33, 150, 243)",
|
|
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
move-cursor-to: "#theme-light"
|
|
focus: "#theme-light"
|
|
assert-css: (
|
|
"#theme-light",
|
|
{
|
|
"border-color": "rgb(33, 150, 243)",
|
|
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
// Now we check the setting-radio-name is on a different line than the label.
|
|
compare-elements-position-near: (
|
|
"#theme .setting-radio-name",
|
|
"#theme .setting-radio-choices",
|
|
{"x": 1}
|
|
)
|
|
compare-elements-position-near-false: (
|
|
"#theme .setting-radio-name",
|
|
"#theme .setting-radio-choices",
|
|
{"y": 1}
|
|
)
|
|
// Now we check that the label positions are all on the same line.
|
|
compare-elements-position-near: (
|
|
"#theme .setting-radio-choices #theme-light",
|
|
"#theme .setting-radio-choices #theme-dark",
|
|
{"y": 1}
|
|
)
|
|
compare-elements-position-near: (
|
|
"#theme .setting-radio-choices #theme-dark",
|
|
"#theme .setting-radio-choices #theme-ayu",
|
|
{"y": 1}
|
|
)
|
|
compare-elements-position-near: (
|
|
"#theme .setting-radio-choices #theme-ayu",
|
|
"#theme .setting-radio-choices #theme-system-preference",
|
|
{"y": 1}
|
|
)
|
|
|
|
// First we check the "default" display for toggles.
|
|
assert-css: (
|
|
"#auto-hide-large-items",
|
|
{
|
|
"background-color": "rgb(33, 150, 243)",
|
|
"border-color": "rgb(153, 153, 153)",
|
|
// 1px border when checked
|
|
"border-width": "1px",
|
|
},
|
|
)
|
|
assert-css: (
|
|
"#auto-hide-method-docs",
|
|
{
|
|
"background-color": "rgba(0, 0, 0, 0)",
|
|
"border-color": "rgb(153, 153, 153)",
|
|
// 2px border when unchecked
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
// Let's start with the hover for toggles.
|
|
move-cursor-to: "#auto-hide-large-items"
|
|
assert-css: (
|
|
"#auto-hide-large-items",
|
|
{
|
|
"background-color": "rgb(33, 150, 243)",
|
|
"border-color": "rgb(33, 150, 243)",
|
|
// 1px border when checked
|
|
"border-width": "1px",
|
|
},
|
|
)
|
|
move-cursor-to: "#auto-hide-method-docs"
|
|
assert-css: (
|
|
"#auto-hide-method-docs",
|
|
{
|
|
"background-color": "rgba(0, 0, 0, 0)",
|
|
"border-color": "rgb(33, 150, 243)",
|
|
// 2px border when unchecked
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
move-cursor-to: "#settings-menu > a"
|
|
// Let's now check with the focus for toggles.
|
|
focus: "#auto-hide-large-items"
|
|
assert-css: (
|
|
"#auto-hide-large-items",
|
|
{
|
|
"background-color": "rgb(33, 150, 243)",
|
|
"border-color": "rgb(153, 153, 153)",
|
|
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
|
|
// 1px border when checked
|
|
"border-width": "1px",
|
|
},
|
|
)
|
|
focus: "#auto-hide-method-docs"
|
|
assert-css: (
|
|
"#auto-hide-method-docs",
|
|
{
|
|
"background-color": "rgba(0, 0, 0, 0)",
|
|
"border-color": "rgb(153, 153, 153)",
|
|
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
|
|
// 2px border when unchecked
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
// Now we check we both focus and hover for toggles.
|
|
move-cursor-to: "#auto-hide-large-items"
|
|
focus: "#auto-hide-large-items"
|
|
assert-css: (
|
|
"#auto-hide-large-items",
|
|
{
|
|
"background-color": "rgb(33, 150, 243)",
|
|
"border-color": "rgb(33, 150, 243)",
|
|
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
|
|
// 1px border when checked
|
|
"border-width": "1px",
|
|
},
|
|
)
|
|
move-cursor-to: "#auto-hide-method-docs"
|
|
focus: "#auto-hide-method-docs"
|
|
assert-css: (
|
|
"#auto-hide-method-docs",
|
|
{
|
|
"background-color": "rgba(0, 0, 0, 0)",
|
|
"border-color": "rgb(33, 150, 243)",
|
|
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
|
|
// 2px border when unchecked
|
|
"border-width": "2px",
|
|
},
|
|
)
|
|
|
|
// We now switch the display.
|
|
click: "#theme-system-preference"
|
|
// Wait for the hidden element to show up.
|
|
wait-for: "#preferred-dark-theme.setting-line:not(.hidden)"
|
|
assert: "#preferred-light-theme.setting-line:not(.hidden)"
|
|
|
|
// We check their text as well.
|
|
assert-text: ("#preferred-dark-theme .setting-radio-name", "Preferred dark theme")
|
|
assert-text: ("#preferred-light-theme .setting-radio-name", "Preferred light theme")
|
|
|
|
// We now check that clicking on the toggles' text is like clicking on the checkbox.
|
|
// To test it, we use the "Disable keyboard shortcuts".
|
|
set-local-storage: {"rustdoc-disable-shortcuts": "false"}
|
|
click: ".setting-line:last-child .setting-check span"
|
|
assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
|
|
|
|
// We now check that focusing a toggle and pressing Space is like clicking on it.
|
|
assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
|
|
focus: ".setting-line:last-child .setting-check input"
|
|
press-key: "Space"
|
|
assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
|
|
focus: ".setting-line:last-child .setting-check input"
|
|
press-key: "Space"
|
|
assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
|
|
|
|
// Make sure that "Disable keyboard shortcuts" actually took effect.
|
|
press-key: "Escape"
|
|
press-key: "?"
|
|
assert-false: "#help-button .popover"
|
|
wait-for-css: ("#settings-menu .popover", {"display": "block"})
|
|
|
|
// Now turn keyboard shortcuts back on, and see if they work.
|
|
click: ".setting-line:last-child .setting-check span"
|
|
assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
|
|
press-key: "Escape"
|
|
press-key: "?"
|
|
wait-for-css: ("#help-button .popover", {"display": "block"})
|
|
assert-css: ("#settings-menu .popover", {"display": "none"})
|
|
|
|
// Now switch back to the settings popover, and make sure the keyboard
|
|
// shortcut works when a check box is selected.
|
|
click: "#settings-menu > a"
|
|
wait-for-css: ("#settings-menu .popover", {"display": "block"})
|
|
focus: "#auto-hide-large-items"
|
|
press-key: "?"
|
|
wait-for-css: ("#settings-menu .popover", {"display": "none"})
|
|
wait-for-css: ("#help-button .popover", {"display": "block"})
|
|
|
|
// Now switch back to the settings popover, and make sure the keyboard
|
|
// shortcut works when a check box is selected.
|
|
click: "#settings-menu > a"
|
|
wait-for-css: ("#settings-menu .popover", {"display": "block"})
|
|
wait-for-css: ("#help-button .popover", {"display": "none"})
|
|
focus: "#theme-system-preference"
|
|
press-key: "?"
|
|
wait-for-css: ("#settings-menu .popover", {"display": "none"})
|
|
wait-for-css: ("#help-button .popover", {"display": "block"})
|
|
|
|
// Now we go to the settings page to check that the CSS is loaded as expected.
|
|
go-to: "file://" + |DOC_PATH| + "/settings.html"
|
|
wait-for: "#settings"
|
|
assert-css: (".setting-line", {"position": "relative"})
|
|
|
|
assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
|
|
compare-elements-position: (".sub form", "#settings", ("x"))
|
|
|
|
// Check that setting-line has the same margin in this mode as in the popover.
|
|
assert-css: (".setting-line", {"margin": |setting_line_margin|})
|
|
|
|
// We now check the display with JS disabled.
|
|
assert-false: "noscript section"
|
|
javascript: false
|
|
reload:
|
|
assert-css: ("noscript section", {"display": "block"})
|
|
javascript: true
|
|
|
|
// Check for the display on small screen
|
|
show-text: true
|
|
reload:
|
|
set-window-size: (300, 1000)
|
|
click: "#settings-menu"
|
|
wait-for: "#settings"
|
|
assert-css: (".setting-line", {"position": "relative"})
|