rust/tests/rustdoc-gui/scrape-examples-layout.goml

// Check that the line number column has the correct layout.
go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"

set-window-size: (1000, 1000)

// Check that it's not zero.
assert-property-false: (
    ".more-scraped-examples .scraped-example .src-line-numbers",
    {"clientWidth": "0"}
)

// Check that examples with very long lines have the same width as ones that don't.
store-property: (
    ".more-scraped-examples .scraped-example:nth-child(2) .src-line-numbers",
    {"clientWidth": clientWidth},
)

assert-property: (
    ".more-scraped-examples .scraped-example:nth-child(3) .src-line-numbers",
    {"clientWidth": |clientWidth|}
)

assert-property: (
    ".more-scraped-examples .scraped-example:nth-child(4) .src-line-numbers",
    {"clientWidth": |clientWidth|}
)

assert-property: (
    ".more-scraped-examples .scraped-example:nth-child(5) .src-line-numbers",
    {"clientWidth": |clientWidth|}
)

assert-property: (
    ".more-scraped-examples .scraped-example:nth-child(6) .src-line-numbers",
    {"clientWidth": |clientWidth|}
)

// The "title" should be located at the right bottom corner of the code example.
store-position: (".example-wrap.scraped-example", {"x": x, "y": y})
store-size: (".example-wrap.scraped-example", {"width": width, "height": height})
store-size: (".example-wrap.scraped-example .scraped-example-title", {
    "width": title_width,
    "height": title_height,
})
assert-position: (".example-wrap.scraped-example .scraped-example-title", {
    "x": |x| + |width| - |title_width| - 5,
    "y": |y| + |height| - |title_height| - 8,
})

// Check that for both mobile and desktop sizes, the buttons in scraped examples are displayed
// correctly.

store-value: (offset_y, 4)

// First with desktop
assert-position: (".scraped-example", {"y": 226})
assert-position: (".scraped-example .prev", {"y": 226 + |offset_y|})

// Gradient background should be at the top of the code block.
assert-css: (".scraped-example::before", {"top": "0px"})
assert-css: (".scraped-example::after", {"bottom": "0px"})

// Then with mobile
set-window-size: (600, 600)
store-size: (".example-wrap.scraped-example .scraped-example-title", {"height": title_height})
assert-position: (".scraped-example", {"y": 284})
assert-position: (".scraped-example .prev", {"y": 284 + |offset_y| + |title_height|})

// Gradient background should be at the top of the code block, which is now below the "title".
assert-css: (".scraped-example::before", {"top": |title_height| + "px"})
assert-css: (".scraped-example::after", {"bottom": "0px"})

define-function: (
    "check_title_and_code_position",
    [],
    block {
        // Title should be above the code.
        store-position: (".example-wrap.scraped-example .src-line-numbers", {"x": x, "y": y})
        store-size: (".example-wrap.scraped-example .scraped-example-title", { "height": title_height })

        assert-position: (".example-wrap.scraped-example .scraped-example-title", {
            "x": |x|, // same X position.
            "y": |y| - |title_height|,
        })

        // Line numbers should be right beside the code.
        compare-elements-position: (
            ".example-wrap.scraped-example .src-line-numbers",
            ".example-wrap.scraped-example .rust",
            ["y"],
        )
    }
)

// Check that the title is now above the code.
call-function: ("check_title_and_code_position", {})

// Then with small mobile
set-window-size: (300, 300)
call-function: ("check_title_and_code_position", {})