// Checks that the documentation toggles have the correct position, style and work as expected.
include: "utils.goml"
go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
assert-attribute: ("#main-content > details.top-doc", {"open": ""})
assert-text: ("#toggle-all-docs", "Summary")
click: "#toggle-all-docs"
wait-for: 50
// This is now collapsed so there shouldn't be the "open" attribute on details.
assert-attribute-false: ("#main-content > details.top-doc", {"open": ""})
assert-text: ("#toggle-all-docs", "Show all")
assert-css: (
    "#main-content > details.top-doc > summary",
    {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
)
click: "#toggle-all-docs"
// Not collapsed anymore so the "open" attribute should be back.
wait-for-attribute: ("#main-content > details.top-doc", {"open": ""})
assert-text: ("#toggle-all-docs", "Summary")

// Check that it works on non-module pages as well.
go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
// We first check that everything is visible.
assert-text: ("#toggle-all-docs", "Summary")
assert-attribute: ("#implementations-list details.toggle", {"open": ""}, ALL)
assert-attribute: ("#trait-implementations-list details.toggle", {"open": ""}, ALL)
assert-attribute-false: (
    "#blanket-implementations-list > details.toggle",
    {"open": ""},
    ALL,
)

// We collapse them all.
click: "#toggle-all-docs"
wait-for-text: ("#toggle-all-docs", "Show all")
// We check that all <details> are collapsed (except for the impl block ones).
assert-attribute-false: ("details.toggle:not(.implementors-toggle)", {"open": ""}, ALL)
assert-attribute: ("#implementations-list > details.implementors-toggle", {"open": ""})
// We now check that the other impl blocks are collapsed.
assert-attribute-false: (
    "#blanket-implementations-list > details.toggle.implementors-toggle",
    {"open": ""},
    ALL,
)
// We open them all again.
click: "#toggle-all-docs"
wait-for-text: ("#toggle-all-docs", "Summary")
assert-attribute: ("details.toggle", {"open": ""}, ALL)

// Checking the toggles style.
show-text: true
define-function: (
    "check-color",
    [theme, filter],
    block {
        call-function: ("switch-theme", {"theme": |theme|})

        assert-css: ("details.toggle > summary::before", {
            "opacity": "0.5",
            "filter": |filter|,
        }, ALL)
        move-cursor-to: "details.toggle summary"
        assert-css: ("details.toggle > summary:hover::before", {
            "opacity": "1",
            "filter": |filter|,
        })
        // moving the cursor somewhere else to not mess with next function calls.
        move-cursor-to: "#search-button"
    },
)

call-function: ("check-color", {"theme": "ayu", "filter": "invert(1)"})
call-function: ("check-color", {"theme": "dark", "filter": "invert(1)"})
call-function: ("check-color", {"theme": "light", "filter": "none"})