os-rust/src/test/rustdoc-gui/sidebar-source-code-display.goml

// 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"
wait-for-css: (".sidebar", {"display": "none"})

// Let's retry with javascript enabled.
javascript: true
reload:
wait-for: "#sidebar-toggle"
assert-css: ("#sidebar-toggle", {"visibility": "visible"})
assert-css: (".sidebar > *:not(#sidebar-toggle)", {"visibility": "hidden"})
// Let's expand the sidebar now.
click: "#sidebar-toggle"
wait-for-css: ("#sidebar-toggle", {"visibility": "visible"})

// 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"})
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"})
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"})
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"})

// 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": "2542"}
// 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": "2542"}

// 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": "2542"}
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"}