// Checks that the interactions with the source code pages are working as expected. go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html" show-text: true // Check that we can click on the line number. click: ".src-line-numbers > a:nth-child(4)" // This is the anchor for line 4. // Ensure that the page URL was updated. assert-document-property: ({"URL": "lib.rs.html#4"}, ENDS_WITH) assert-attribute: ("//*[@id='4']", {"class": "line-highlighted"}) // Ensure that the default style, with the right border, isn't used. assert-css: ("//*[@id='4']", {"border-right-width": "0px"}) reload: assert-attribute: ("//*[@id='4']", {"class": "line-highlighted"}) assert-css: ("//*[@id='4']", {"border-right-width": "0px"}) // We now check that the good anchors are highlighted go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#4-6" assert-attribute-false: (".src-line-numbers > a:nth-child(3)", {"class": "line-highlighted"}) assert-attribute: (".src-line-numbers > a:nth-child(4)", {"class": "line-highlighted"}) assert-attribute: (".src-line-numbers > a:nth-child(5)", {"class": "line-highlighted"}) assert-attribute: (".src-line-numbers > a:nth-child(6)", {"class": "line-highlighted"}) assert-attribute-false: (".src-line-numbers > a:nth-child(7)", {"class": "line-highlighted"}) define-function: ( "check-colors", (theme, color, background_color, highlight_color, highlight_background_color), block { set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"} reload: assert-css: ( ".src-line-numbers > a:not(.line-highlighted)", {"color": |color|, "background-color": |background_color|}, ALL, ) assert-css: ( ".src-line-numbers > a.line-highlighted", {"color": |highlight_color|, "background-color": |highlight_background_color|}, ALL, ) }, ) call-function: ("check-colors", { "theme": "ayu", "color": "rgb(92, 103, 115)", "background_color": "rgba(0, 0, 0, 0)", "highlight_color": "rgb(112, 128, 144)", "highlight_background_color": "rgba(255, 236, 164, 0.06)", }) call-function: ("check-colors", { "theme": "dark", "color": "rgb(59, 145, 226)", "background_color": "rgba(0, 0, 0, 0)", "highlight_color": "rgb(59, 145, 226)", "highlight_background_color": "rgb(10, 4, 47)", }) call-function: ("check-colors", { "theme": "light", "color": "rgb(198, 126, 45)", "background_color": "rgba(0, 0, 0, 0)", "highlight_color": "rgb(198, 126, 45)", "highlight_background_color": "rgb(253, 255, 211)", }) // This is to ensure that the content is correctly align with the line numbers. compare-elements-position: ("//*[@id='1']", ".rust > code > span", ("y")) // Check the `href` property so that users can treat anchors as links. assert-property: (".src-line-numbers > a:nth-child(1)", { "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#1" }) assert-property: (".src-line-numbers > a:nth-child(2)", { "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#2" }) assert-property: (".src-line-numbers > a:nth-child(3)", { "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#3" }) assert-property: (".src-line-numbers > a:nth-child(4)", { "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#4" }) assert-property: (".src-line-numbers > a:nth-child(5)", { "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#5" }) assert-property: (".src-line-numbers > a:nth-child(6)", { "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#6" }) // Assert that the line numbers text is aligned to the right. assert-css: (".src-line-numbers", {"text-align": "right"}) // Now let's check that clicking on something else than the line number doesn't // do anything (and certainly not add a `#NaN` to the URL!). go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html" // We use this assert-position to know where we will click. assert-position: ("//*[@id='1']", {"x": 88, "y": 112}) // We click on the left of the "1" anchor but still in the "src-line-number" `
`.
click: (87, 103)
assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)

// Checking the source code sidebar.

// First we "open" it.
click: "#src-sidebar-toggle"
assert: ".source-sidebar-expanded"

// We check that the first entry of the sidebar is collapsed
assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
assert-text: ("#source-sidebar details:first-of-type > summary", "extend_css")
// We now click on it.
click: "#source-sidebar details:first-of-type > summary"
assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})

// And now we collapse it again.
click: "#source-sidebar details:first-of-type > summary"
assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})

// And open it again, since it'll be the reference we use to check positions.
click: "#source-sidebar details:first-of-type > summary"
assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})

// Check the sidebar directory entries have a marker and spacing (desktop).
store-property: (
    link_height,
    "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
    "offsetHeight"
)
define-function: (
    "check-sidebar-dir-entry",
    (x, y),
    block {
        assert: "details:first-of-type.dir-entry[open] > summary::marker"
        assert-css: ("#source-sidebar > details:first-of-type.dir-entry", {"padding-left": "4px"})
        // This check ensures that the summary is only one line.
        assert-property: (
            "#source-sidebar > details:first-of-type.dir-entry[open] > summary",
            {"offsetHeight": |link_height|}
        )
        assert-position: (
            "#source-sidebar > details:first-of-type.dir-entry[open] > summary",
            {"x": |x|, "y": |y|}
        )
        assert-property: (
            "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
            {"offsetHeight": |link_height|}
        )
        assert-position: (
            "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
            // left margin
            {"x": |x| + 27, "y": |y| + |link_height|}
        )
    }
)
store-property: (
    source_sidebar_title_height,
    "#source-sidebar > .title",
    "offsetHeight"
)
store-property: (
    source_sidebar_title_y,
    "#source-sidebar > .title",
    "offsetTop"
)
call-function: ("check-sidebar-dir-entry", {
    "x": 0,
    // border + margin = 6
    "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
})

// Check the search form
assert-css: ("nav.sub", {"flex-direction": "row"})
// The goal of this test is to ensure the search input is perfectly centered
// between the top of the page and the top of the gray code block.
// To check this, we maintain the invariant:
//
// offsetTop[nav.sub form] = offsetTop[#main-content] - offsetHeight[nav.sub form] - offsetTop[nav.sub form]
assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34})
assert-property: ("#main-content", {"offsetTop": 90})
// 28 = 90 - 34 - 28

// Now do the same check on moderately-sized, tablet mobile.
set-window-size: (700, 700)
assert-css: ("nav.sub", {"flex-direction": "row"})
assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34})
assert-property: ("#main-content", {"offsetTop": 76})
// 21 = 76 - 34 - 21

// Check the sidebar directory entries have a marker and spacing (tablet).
store-property: (
    source_sidebar_title_height,
    "#source-sidebar > .title",
    "offsetHeight"
)
store-property: (
    source_sidebar_title_y,
    "#source-sidebar > .title",
    "offsetTop"
)
call-function: ("check-sidebar-dir-entry", {
    "x": 0,
    "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
})

// Tiny, phone mobile gets a different display where the logo is stacked on top.
set-window-size: (450, 700)
assert-css: ("nav.sub", {"flex-direction": "column"})

// Check the sidebar directory entries have a marker and spacing (phone).
store-property: (
    source_sidebar_title_height,
    "#source-sidebar > .title",
    "offsetHeight"
)
store-property: (
    source_sidebar_title_y,
    "#source-sidebar > .title",
    "offsetTop"
)
call-function: ("check-sidebar-dir-entry", {
    "x": 0,
    "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
})

// Now we check that the logo has a bottom margin so it's not stuck to the search input.
assert-css: (".sub-logo-container > img", {"margin-bottom": "8px"})
store-property: (logo_height, ".sub-logo-container", "clientHeight")
assert-position: (".search-form", {"y": |logo_height| + 8})