diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/style/test/test_hover_quirk.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/style/test/test_hover_quirk.html')
| -rw-r--r-- | layout/style/test/test_hover_quirk.html | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/layout/style/test/test_hover_quirk.html b/layout/style/test/test_hover_quirk.html new file mode 100644 index 0000000000..61e19f2a60 --- /dev/null +++ b/layout/style/test/test_hover_quirk.html @@ -0,0 +1,118 @@ +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=783213 +--> +<head> + <meta charset="utf-8"> + <title>Test for the :active and :hover quirk</title> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> + <style type="text/css"> + /* Should apply to all elements: */ + #content :hover:first-of-type { + color: rgb(255, 0, 0); + } + #content :-moz-any(:hover) { + text-transform: lowercase; + } + #content :hover::after { + content: "any element"; + } + + #content :hover:first-of-type .child::after { + content: "any child"; + } + + #content .parent .child::after { + content: "wrong" !important; + } + + #content .parent:hover .child::after { + content: "any child" !important; + } + + /* Should apply only to links: */ + #content :hover { + color: rgb(0, 255, 0) !important; + text-transform: uppercase !important; + } + #content :hover .child::after { + content: "link child" !important; + } + + #dynamic-test { + width: 100px; + height: 100px; + background: green; + } + + #dynamic-test > * { + width: 100%; + height: 100%; + background: red; + } + + #dynamic-test:hover > * { + background: rgb(0, 255, 0); + } + </style> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <script src="/tests/SimpleTest/EventUtils.js"></script> + <script type="application/javascript"> + /** Test for the :active and :hover quirk **/ + function test(element, isLink) { + if (!isLink) + var styles = {color: "rgb(255, 0, 0)", textTransform: "lowercase", + childContent: '"any child"'}; + else + var styles = {color: "rgb(0, 255, 0)", textTransform: "uppercase", + childContent: '"link child"'}; + + // Trigger the :hover pseudo-class. + synthesizeMouseAtCenter(element, {type: "mousemove"}); + + var computedStyle = getComputedStyle(element); + is(computedStyle.color, styles.color, "Unexpected color value"); + is(computedStyle.textTransform, styles.textTransform, + "Unexpected text-transform value"); + + computedStyle = getComputedStyle(element, "::after"); + is(computedStyle.content, '"any element"', + "Unexpected pseudo-element content"); + + computedStyle = getComputedStyle( + element.getElementsByClassName("child")[0], "::after"); + is(computedStyle.content, styles.childContent, + "Unexpected pseudo-element content for child"); + } + + SimpleTest.waitForExplicitFinish(); + SimpleTest.waitForFocus(function() { + test(document.getElementById("span"), false); + test(document.getElementById("label"), false); + test(document.getElementById("link"), true); + test(document.getElementById("div"), false); + // Dynamic change test. + // Trigger the :hover pseudo-class. + synthesizeMouseAtCenter(document.getElementById('dynamic-test'), {type: "mousemove"}); + is(getComputedStyle(document.getElementById('should-be-green-on-hover')).backgroundColor, + "rgb(0, 255, 0)", + "Dynamic change should invalidate properly"); + SimpleTest.finish(); + }); + </script> +</head> +<body> + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783213">Mozilla Bug 783213</a> + <p id="display"></p> + <div id="dynamic-test"> + <div id="should-be-green-on-hover"></div> + </div> + <div id="content"> + <span id="span">Span<span class="child"></span></span><br> + <label id="label">Label<span class="child"></span></label><br> + <a id="link" href="#">Link<span class="child"></span></a><br> + <div id="div" class="parent">Div <span><span class="child"></span></span></div><br> + </div> + <pre id="test"></pre> +</body> +</html> |