// This test ensures that the image zoom-in/zoom-out works as expected.

define-function: (
    "check-image-not-zoomed-in",
    [],
    block {
        // The "zoomed in" image should not be displayed.
        assert-css: (".checkbox-label > .img-wrapper", {"display": "none"})
        // The cursor for the image should be "zoom-in".
        assert-css: (".checkbox-label > img", {"cursor": "zoom-in"})
    },
)

define-function: (
    "check-image-zoomed-in",
    [],
    block {
        // The image wrapper should now be displayed and have a "zoom-out" cursor.
        assert-css: (".checkbox-label > .img-wrapper", {"display": "flex", "cursor": "zoom-out"})
        // Same for the image it contains.
        assert-css: (
            ".checkbox-label > .img-wrapper img",
            {"display": "block", "cursor": "zoom-out"},
        )
    },
)

go-to: |DOC_PATH| + "basic/index.html"
show-text: true
call-function: ("check-image-not-zoomed-in", {})

// We click on the image to "zoom in".
click: ".checkbox-label > img"
call-function: ("check-image-zoomed-in", {})

// We click on the wrapper to "zoom out".
click: ".checkbox-label > img"
// We check that everything is back to the previous state.
call-function: ("check-image-not-zoomed-in", {})

// We test that the "escape" key also hides the "zoomed in" image.
// We click on the image to "zoom in".
click: ".checkbox-label > img"
call-function: ("check-image-zoomed-in", {})
press-key: "Escape"
// We check that everything is back to the previous state.
call-function: ("check-image-not-zoomed-in", {})

// We test that we can zoom in and out using only the keyboard.
// First we focus on the link just before the image we want to zoom in.
focus: "a[href='a']"
assert: "a[href='a']:focus"
press-key: "Tab"
// We check that the checkbox to "zoom in" is focused.
assert: ".checkbox-img:focus"
// We check that the image about to be zoomed in has the outline.
store-css: (".checkbox-img:focus", {"outline": outline})
// Because we're using "auto" to match the system outline, we cannot check the whole value directly
// so instead we check if "auto" is present.
assert-variable: (outline, "auto", CONTAINS)
// We zoom in.
press-key: "Space"
call-function: ("check-image-zoomed-in", {})
// We press the key again to zoom out.
press-key: "Space"
call-function: ("check-image-not-zoomed-in", {})
// We now check it works with the "Escape" key as well.
press-key: "Space"
call-function: ("check-image-zoomed-in", {})
press-key: "Escape"
call-function: ("check-image-not-zoomed-in", {})

// Now we check that images in links (in `<a>` elements) don't get the "zoom-in" feature enabled.
// There is only one zoomable image.
assert-count: ("main .checkbox-img", 1)
// We should have 5 images: 4 "normal" ones visible in the rendered book and one hidden which is
// used only for the "zoom-in" feature.
assert-count: ("main img", 5)
// We check exact paths to ensure the 5 `<img>` are different.
assert: ("main > p > label.checkbox-label > img:nth-of-type(1)")
assert: ("main > p > label.checkbox-label > span.img-wrapper > img")
assert: ("main > p:nth-of-type(1) > a:nth-of-type(1) > img")
assert: ("main > p:nth-of-type(1) > a:nth-of-type(2) > img")
assert: ("main > p:not(:nth-of-type(2)) > a > img")

// The cursor for the image in link should not have "zoom-in".
assert-css: ("main > p > a > img", {"cursor": "pointer"})
