160 lines
6.0 KiB
Plaintext
160 lines
6.0 KiB
Plaintext
// Checking the colors of the search tab headers.
|
||
include: "utils.goml"
|
||
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html?search=foo"
|
||
show-text: true
|
||
|
||
define-function: (
|
||
"check-colors",
|
||
[theme, background, background_selected, background_hover, border_bottom,
|
||
border_bottom_selected, border_bottom_hover, border_top, border_top_selected,
|
||
border_top_hover],
|
||
block {
|
||
call-function: ("switch-theme", {"theme": |theme|})
|
||
|
||
// These two commands are used to be sure the search will be run.
|
||
focus: ".search-input"
|
||
press-key: "Enter"
|
||
|
||
wait-for: "#search-tabs"
|
||
assert-css: ("#search-tabs > button:not(.selected)", {
|
||
"background-color": |background|,
|
||
"border-bottom": |border_bottom|,
|
||
"border-top": |border_top|,
|
||
})
|
||
assert-css: ("#search-tabs > button.selected", {
|
||
"background-color": |background_selected|,
|
||
"border-bottom": |border_bottom_selected|,
|
||
"border-top": |border_top_selected|,
|
||
})
|
||
move-cursor-to: "#search-tabs > button:not(.selected)"
|
||
assert-css: ("#search-tabs > button:not(.selected):hover", {
|
||
"background-color": |background_hover|,
|
||
"border-bottom": |border_bottom_hover|,
|
||
"border-top": |border_top_hover|,
|
||
})
|
||
// To prevent disrupting next run of this function.
|
||
move-cursor-to: ".search-input"
|
||
},
|
||
)
|
||
|
||
call-function: ("check-colors", {
|
||
"theme": "ayu",
|
||
"background": "transparent",
|
||
"background_selected": "#141920",
|
||
"background_hover": "transparent",
|
||
"border_bottom": "0px none #c5c5c5",
|
||
"border_bottom_selected": "1px solid #ffb44c",
|
||
"border_bottom_hover": "1px solid rgba(242, 151, 24, 0.3)",
|
||
"border_top": "0px none #c5c5c5",
|
||
"border_top_selected": "0px none #c5c5c5",
|
||
"border_top_hover": "0px none #c5c5c5",
|
||
})
|
||
call-function: ("check-colors", {
|
||
"theme": "dark",
|
||
"background": "#252525",
|
||
"background_selected": "#353535",
|
||
"background_hover": "#353535",
|
||
"border_bottom": "0px none #ddd",
|
||
"border_bottom_selected": "0px none #ddd",
|
||
"border_bottom_hover": "0px none #ddd",
|
||
"border_top": "2px solid #252525",
|
||
"border_top_selected": "2px solid #0089ff",
|
||
"border_top_hover": "2px solid #0089ff",
|
||
})
|
||
call-function: ("check-colors", {
|
||
"theme": "light",
|
||
"background": "#e6e6e6",
|
||
"background_selected": "#fff",
|
||
"background_hover": "#fff",
|
||
"border_bottom": "0px none #000",
|
||
"border_bottom_selected": "0px none #000",
|
||
"border_bottom_hover": "0px none #000",
|
||
"border_top": "2px solid #e6e6e6",
|
||
"border_top_selected": "2px solid #0089ff",
|
||
"border_top_hover": "2px solid #0089ff",
|
||
})
|
||
|
||
// set size wide enough that the text is in a single row
|
||
set-window-size: (851, 600)
|
||
|
||
// Check the size and count in tabs
|
||
assert-text: ("#search-tabs > button:nth-child(1) > .count", " (25) ")
|
||
assert-text: ("#search-tabs > button:nth-child(2) > .count", " (6) ")
|
||
assert-text: ("#search-tabs > button:nth-child(3) > .count", " (0) ")
|
||
store-property: ("#search-tabs > button:nth-child(1)", {"offsetWidth": buttonWidth})
|
||
assert-property: ("#search-tabs > button:nth-child(2)", {"offsetWidth": |buttonWidth|})
|
||
assert-property: ("#search-tabs > button:nth-child(3)", {"offsetWidth": |buttonWidth|})
|
||
store-property: ("#search-tabs > button:nth-child(1) > .count", {"offsetWidth": countWidth})
|
||
assert-property: ("#search-tabs > button:nth-child(2) > .count", {"offsetWidth": |countWidth|})
|
||
assert-property: ("#search-tabs > button:nth-child(3) > .count", {"offsetWidth": |countWidth|})
|
||
|
||
// Check that counts are in a row with each other
|
||
compare-elements-position: (
|
||
"#search-tabs > button:nth-child(1) > .count",
|
||
"#search-tabs > button:nth-child(2) > .count",
|
||
["y"]
|
||
)
|
||
compare-elements-position: (
|
||
"#search-tabs > button:nth-child(2) > .count",
|
||
"#search-tabs > button:nth-child(3) > .count",
|
||
["y"]
|
||
)
|
||
// Check that counts are beside the titles and haven't wrapped
|
||
compare-elements-position-near: (
|
||
"#search-tabs > button:nth-child(1)",
|
||
"#search-tabs > button:nth-child(1) > .count",
|
||
{"y": 8}
|
||
)
|
||
compare-elements-position-near: (
|
||
"#search-tabs > button:nth-child(2)",
|
||
"#search-tabs > button:nth-child(2) > .count",
|
||
{"y": 8}
|
||
)
|
||
compare-elements-position-near: (
|
||
"#search-tabs > button:nth-child(2)",
|
||
"#search-tabs > button:nth-child(2) > .count",
|
||
{"y": 8}
|
||
)
|
||
|
||
// Set size narrow enough that they wrap.
|
||
// When I tested it, it wrapped at 811px, but I added some fudge factor to ensure it
|
||
// doesn't prematurely wrap with slightly different font kerning or whatever, with a
|
||
// @media query
|
||
set-window-size: (850, 600)
|
||
|
||
// all counts and buttons still have same size
|
||
store-property: ("#search-tabs > button:nth-child(1)", {"offsetWidth": buttonWidth})
|
||
assert-property: ("#search-tabs > button:nth-child(2)", {"offsetWidth": |buttonWidth|})
|
||
assert-property: ("#search-tabs > button:nth-child(3)", {"offsetWidth": |buttonWidth|})
|
||
store-property: ("#search-tabs > button:nth-child(1) > .count", {"offsetWidth": countWidth})
|
||
assert-property: ("#search-tabs > button:nth-child(2) > .count", {"offsetWidth": |countWidth|})
|
||
assert-property: ("#search-tabs > button:nth-child(3) > .count", {"offsetWidth": |countWidth|})
|
||
|
||
// Check that counts are still in a row with each other
|
||
compare-elements-position: (
|
||
"#search-tabs > button:nth-child(1) > .count",
|
||
"#search-tabs > button:nth-child(2) > .count",
|
||
["y"]
|
||
)
|
||
compare-elements-position: (
|
||
"#search-tabs > button:nth-child(2) > .count",
|
||
"#search-tabs > button:nth-child(3) > .count",
|
||
["y"]
|
||
)
|
||
// Check that counts are NOT beside the titles; now they have wrapped
|
||
compare-elements-position-near-false: (
|
||
"#search-tabs > button:nth-child(1)",
|
||
"#search-tabs > button:nth-child(1) > .count",
|
||
{"y": 8}
|
||
)
|
||
compare-elements-position-near-false: (
|
||
"#search-tabs > button:nth-child(2)",
|
||
"#search-tabs > button:nth-child(2) > .count",
|
||
{"y": 8}
|
||
)
|
||
compare-elements-position-near-false: (
|
||
"#search-tabs > button:nth-child(2)",
|
||
"#search-tabs > button:nth-child(2) > .count",
|
||
{"y": 8}
|
||
)
|