2024-07-29 11:58:33 +00:00
|
|
|
// This test ensures that code blocks buttons are displayed on hover and when you click on them.
|
|
|
|
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
|
2024-07-30 13:24:05 +00:00
|
|
|
include: "utils.goml"
|
2024-07-29 11:58:33 +00:00
|
|
|
|
|
|
|
// First we check we "hover".
|
|
|
|
move-cursor-to: ".example-wrap"
|
|
|
|
assert-css: (".example-wrap .copy-button", { "visibility": "visible" })
|
|
|
|
move-cursor-to: ".search-input"
|
|
|
|
assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
|
|
|
|
|
|
|
|
// Now we check the click.
|
|
|
|
assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
|
|
|
|
click: ".example-wrap"
|
|
|
|
move-cursor-to: ".search-input"
|
|
|
|
// It should have a new class and be visible.
|
|
|
|
wait-for-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 1)
|
|
|
|
wait-for-css: (".example-wrap:not(:hover) .button-holder.keep-visible", { "visibility": "visible" })
|
|
|
|
// Clicking again will remove the class.
|
|
|
|
click: ".example-wrap"
|
|
|
|
move-cursor-to: ".search-input"
|
|
|
|
assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
|
|
|
|
assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
|
2024-07-30 13:24:05 +00:00
|
|
|
|
2024-07-30 18:58:09 +00:00
|
|
|
// Clicking on the "copy code" button shouldn't make the buttons stick.
|
|
|
|
click: ".example-wrap .copy-button"
|
|
|
|
move-cursor-to: ".search-input"
|
|
|
|
assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
|
|
|
|
assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
|
|
|
|
|
2024-07-30 13:24:05 +00:00
|
|
|
define-function: (
|
|
|
|
"check-buttons",
|
|
|
|
[theme, background, filter, filter_hover],
|
|
|
|
block {
|
|
|
|
call-function: ("switch-theme", {"theme": |theme|})
|
|
|
|
|
|
|
|
assert-css: (".example-wrap .test-arrow", {"visibility": "hidden"})
|
|
|
|
assert-css: (".example-wrap .copy-button", {"visibility": "hidden"})
|
|
|
|
|
|
|
|
move-cursor-to: ".example-wrap"
|
|
|
|
assert-css: (".example-wrap .test-arrow", {
|
|
|
|
"visibility": "visible",
|
|
|
|
"background-color": |background|,
|
|
|
|
"border-radius": "2px",
|
|
|
|
})
|
|
|
|
assert-css: (".example-wrap .test-arrow::before", {
|
|
|
|
"filter": |filter|,
|
|
|
|
})
|
|
|
|
assert-css: (".example-wrap .copy-button", {
|
|
|
|
"visibility": "visible",
|
|
|
|
"background-color": |background|,
|
|
|
|
"border-radius": "2px",
|
|
|
|
})
|
|
|
|
assert-css: (".example-wrap .copy-button::before", {
|
|
|
|
"filter": |filter|,
|
|
|
|
})
|
|
|
|
|
|
|
|
move-cursor-to: ".example-wrap .test-arrow"
|
|
|
|
assert-css: (".example-wrap .test-arrow:hover", {
|
|
|
|
"visibility": "visible",
|
|
|
|
"background-color": |background|,
|
|
|
|
"border-radius": "2px",
|
|
|
|
})
|
|
|
|
assert-css: (".example-wrap .test-arrow:hover::before", {
|
|
|
|
"filter": |filter_hover|,
|
|
|
|
})
|
|
|
|
|
|
|
|
move-cursor-to: ".example-wrap .copy-button"
|
|
|
|
assert-css: (".example-wrap .copy-button:hover", {
|
|
|
|
"visibility": "visible",
|
|
|
|
"background-color": |background|,
|
|
|
|
"border-radius": "2px",
|
|
|
|
})
|
|
|
|
assert-css: (".example-wrap .copy-button:hover::before", {
|
|
|
|
"filter": |filter_hover|,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
)
|
|
|
|
|
|
|
|
call-function: ("check-buttons",{
|
|
|
|
"theme": "ayu",
|
|
|
|
"background": "#0f1419",
|
|
|
|
"filter": "invert(0.7)",
|
|
|
|
"filter_hover": "invert(1)",
|
|
|
|
})
|
|
|
|
call-function: ("check-buttons",{
|
|
|
|
"theme": "dark",
|
|
|
|
"background": "#353535",
|
|
|
|
"filter": "invert(0.5)",
|
|
|
|
"filter_hover": "invert(0.65)",
|
|
|
|
})
|
|
|
|
call-function: ("check-buttons",{
|
|
|
|
"theme": "light",
|
|
|
|
"background": "#fff",
|
|
|
|
"filter": "invert(0.5)",
|
|
|
|
"filter_hover": "invert(0.35)",
|
|
|
|
})
|
2024-09-01 21:43:27 +00:00
|
|
|
|
|
|
|
define-function: (
|
|
|
|
"check-buttons-position",
|
|
|
|
[pre_selector],
|
|
|
|
block {
|
|
|
|
move-cursor-to: |pre_selector| + " .rust:not(.item-decl)"
|
|
|
|
store-position: (|pre_selector| + " .rust:not(.item-decl)", {"x": x, "y": y})
|
|
|
|
assert-position: (|pre_selector| + " .rust:not(.item-decl) + .button-holder", {
|
|
|
|
"y": |y| + 4,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
)
|
|
|
|
|
|
|
|
call-function: ("check-buttons-position", {"pre_selector": ".example-wrap"})
|
|
|
|
|
|
|
|
go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
|
|
|
|
// We should work as well for scraped examples.
|
|
|
|
call-function: ("check-buttons-position", {"pre_selector": ".example-wrap.scraped-example"})
|
|
|
|
// And also when the scraped example "title" goes above.
|
|
|
|
set-window-size: (600, 600)
|
|
|
|
call-function: ("check-buttons-position", {"pre_selector": ".example-wrap.scraped-example"})
|