user0/rust
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rust/src/test/rustdoc-gui/sidebar-source-code-display.goml
Michael Howell 6b60bc6408 rustdoc: improve scroll locking in the rustdoc mobile sidebars 
This commit ports the scroll locking behavior from the source sidebar to the
regular sidebar, and also fixes some bad behavior where opening a "mobile"
sidebar, and growing the viewport so that the "desktop" mode without scroll
locking is activated, could potentially leave the page stuck.

This does not affect the behavior on larger screens. Only small ones, where
the sidebar covers up the main content.
2022-07-05 11:12:18 -07:00

265 lines
11 KiB
Text
Raw Blame History

// This test ensures that the elements in the sidebar are displayed correctly.
javascript: false
goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
// Since the javascript is disabled, there shouldn't be a toggle.
assert-false: "#sidebar-toggle"
// For some reason, we need to wait a bit here because it seems like the transition on opacity
// is being applied whereas it can't be reproduced in a browser...
wait-for-css: (".sidebar > *", {"visibility": "hidden", "opacity": 0})
// Let's retry with javascript enabled.
javascript: true
reload:
wait-for: "#sidebar-toggle"
assert-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
assert-css: (".sidebar > *:not(#sidebar-toggle)", {"visibility": "hidden", "opacity": 0})
// Let's expand the sidebar now.
click: "#sidebar-toggle"
// Because of the transition CSS, we check by using `wait-for-css` instead of `assert-css`.
wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
// We now check that opening the sidebar and clicking a link will leave it open.
// The behavior here on desktop is different than the behavior on mobile,
// but since the sidebar doesn't fill the entire screen here, it makes sense to have the
// sidebar stay resident.
wait-for-css: (".sidebar", {"width": "300px"})
assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
click: ".sidebar a.selected"
goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
wait-for-css: (".sidebar", {"width": "300px"})
assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
// Now we check the display of the sidebar items.
show-text: true
// First we start with the light theme.
local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
reload:
// Waiting for the sidebar to be displayed...
wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
assert-css: (
"#source-sidebar details[open] > .files a.selected",
{"color": "rgb(0, 0, 0)", "background-color": "rgb(255, 255, 255)"},
)
// Without hover or focus.
assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
// With focus.
focus: "#sidebar-toggle > button"
assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"})
focus: ".search-input"
// With hover.
move-cursor-to: "#sidebar-toggle > button"
assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"})
// Without hover.
assert-css: (
"#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
)
// With focus.
focus: "#source-sidebar details[open] > .files a:not(.selected)"
wait-for-css: (
"#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
)
focus: ".search-input"
// With hover.
move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
assert-css: (
"#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
)
// Without hover.
assert-css: (
"#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
)
// With focus.
focus: "#source-sidebar details[open] > .folders > details > summary"
wait-for-css: (
"#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
)
focus: ".search-input"
// With hover.
move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
assert-css: (
"#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
)
// Now with the dark theme.
local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
reload:
// Waiting for the sidebar to be displayed...
wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
assert-css: (
"#source-sidebar details[open] > .files > a.selected",
{"color": "rgb(221, 221, 221)", "background-color": "rgb(51, 51, 51)"},
)
// Without hover or focus.
assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
// With focus.
focus: "#sidebar-toggle > button"
assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"})
focus: ".search-input"
// With hover.
move-cursor-to: "#sidebar-toggle > button"
assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"})
// Without hover.
assert-css: (
"#source-sidebar details[open] > .files > a:not(.selected)",
{"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
)
// With focus.
focus: "#source-sidebar details[open] > .files a:not(.selected)"
wait-for-css: (
"#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
)
focus: ".search-input"
// With hover.
move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
assert-css: (
"#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
)
// Without hover.
assert-css: (
"#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
)
// With focus.
focus: "#source-sidebar details[open] > .folders > details > summary"
wait-for-css: (
"#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
)
focus: ".search-input"
// With hover.
move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
assert-css: (
"#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
)
// And finally with the ayu theme.
local-storage: {"rustdoc-theme": "ayu", "rustdoc-use-system-theme": "false"}
reload:
// Waiting for the sidebar to be displayed...
wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
assert-css: (
"#source-sidebar details[open] > .files a.selected",
{"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
)
// Without hover or focus.
assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
// With focus.
focus: "#sidebar-toggle > button"
assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"})
focus: ".search-input"
// With hover.
move-cursor-to: "#sidebar-toggle > button"
assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"})
// Without hover.
assert-css: (
"#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
)
// With focus.
focus: "#source-sidebar details[open] > .files a:not(.selected)"
wait-for-css: (
"#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
)
focus: ".search-input"
// With hover.
move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
assert-css: (
"#source-sidebar details[open] > .files a:not(.selected)",
{"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
)
// Without hover.
assert-css: (
"#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
)
// With focus.
focus: "#source-sidebar details[open] > .folders > details > summary"
wait-for-css: (
"#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
)
focus: ".search-input"
// With hover.
move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
assert-css: (
"#source-sidebar details[open] > .folders > details > summary",
{"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
)
// Now checking on mobile devices.
size: (500, 700)
reload:
// Waiting for the sidebar to be displayed...
wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
// We now check it takes the full size of the display.
assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
// We now check the display of the toggle once the sidebar is expanded.
assert-property: ("#sidebar-toggle", {"clientWidth": "500", "clientHeight": "39"})
assert-css: (
"#sidebar-toggle",
{
"border-top-width": "0px",
"border-right-width": "0px",
"border-left-width": "0px",
"border-bottom-width": "1px",
},
)
// We now check that the scroll position is kept when opening the sidebar.
click: "#sidebar-toggle"
wait-for-css: (".sidebar", {"width": "0px"})
// We scroll to line 117 to change the scroll position.
scroll-to: '//*[@id="117"]'
assert-window-property: {"pageYOffset": "2519"}
// Expanding the sidebar...
click: "#sidebar-toggle"
wait-for-css: (".sidebar", {"width": "500px"})
click: "#sidebar-toggle"
wait-for-css: (".sidebar", {"width": "0px"})
// The "scrollTop" property should be the same.
assert-window-property: {"pageYOffset": "2519"}
// We now check that the scroll position is restored if the window is resized.
size: (500, 700)
click: "#sidebar-toggle"
wait-for-css: ("#source-sidebar", {"visibility": "visible"})
assert-window-property: {"pageYOffset": "0"}
size: (900, 900)
assert-window-property: {"pageYOffset": "2519"}
size: (500, 700)
click: "#sidebar-toggle"
wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
// We now check that opening the sidebar and clicking a link will close it.
// The behavior here on mobile is different than the behavior on desktop,
// but common sense dictates that if you have a list of files that fills the entire screen, and
// you click one of them, you probably want to actually see the file's contents, and not just
// make it the current selection.
click: "#sidebar-toggle"
wait-for-css: ("#source-sidebar", {"visibility": "visible"})
assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
click: ".sidebar a.selected"
goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
// Resize back to desktop size, to check that the sidebar doesn't spontaneously open.
size: (1000, 1000)
wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
click: "#sidebar-toggle"
wait-for-css: ("#source-sidebar", {"visibility": "visible"})
assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
Reference in a new issue View git blame Copy permalink