diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/cssom/getComputedStyle-pseudo.html | |
parent | Initial commit. (diff) | |
download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/cssom/getComputedStyle-pseudo.html')
-rw-r--r-- | testing/web-platform/tests/css/cssom/getComputedStyle-pseudo.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom/getComputedStyle-pseudo.html b/testing/web-platform/tests/css/cssom/getComputedStyle-pseudo.html new file mode 100644 index 0000000000..40af5b0818 --- /dev/null +++ b/testing/web-platform/tests/css/cssom/getComputedStyle-pseudo.html @@ -0,0 +1,153 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSSOM: Correct resolution of resolved value for display-affected pseudo-elements</title> +<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle"> +<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#test { width: 100px; } + +#contents { + display: contents; + border: 10px solid red; +} + +#test::before, +#test::after, +#contents::before, +#contents::after, +#flex::before, +#flex::after { + content: " "; + width: 50%; + height: 10px; + display: block; +} +#none { + display: none; +} +#none::before, +#none::after { + content: "Foo"; +} +#flex { + display: flex; +} +#flex-no-pseudo { + display: flex; +} +#contents-pseudos::before, +#contents-pseudos::after { + display: contents; + content: "foo"; + position: absolute; +} +#contents-pseudos-dynamic::before, +#contents-pseudos-dynamic::after { + display: block; + content: "foo"; + position: absolute; +} +#contents-pseudos-dynamic.contents::before, +#contents-pseudos-dynamic.contents::after { + display: contents; +} +</style> +<div id="test"> + <div id="contents"></div> + <div id="none"></div> + <div id="flex"></div> + <div id="flex-no-pseudo"></div> + <div id="contents-pseudos"></div> + <div id="contents-pseudos-dynamic"></div> +</div> +<script> +test(function() { + var div = document.getElementById('test'); + [":before", ":after"].forEach(function(pseudo) { + assert_equals(getComputedStyle(div, pseudo).width, "50px"); + }); +}, "Resolution of width is correct for ::before and ::after pseudo-elements"); +test(function() { + var contents = document.getElementById('contents'); + [":before", ":after"].forEach(function(pseudo) { + assert_equals(getComputedStyle(contents, pseudo).width, "50px"); + }); +}, "Resolution of width is correct for ::before and ::after pseudo-elements of display: contents elements"); +test(function() { + var has_no_pseudos = document.body; + has_no_pseudos.style.position = "relative"; + [":before", ":after"].forEach(function(pseudo) { + assert_equals(getComputedStyle(has_no_pseudos, pseudo).position, "static", + "Nonexistent " + pseudo + " pseudo-element shouldn't claim to have " + + "the same style as the originating element"); + assert_equals(getComputedStyle(has_no_pseudos, pseudo).width, "auto", + "Nonexistent " + pseudo + " pseudo-element shouldn't claim to have " + + "definite size"); + }); +}, "Resolution of nonexistent pseudo-element styles"); +test(function() { + var none = document.getElementById('none'); + [":before", ":after"].forEach(function(pseudo) { + assert_equals(getComputedStyle(none, pseudo).content, "\"Foo\"", + "Pseudo-styles of display: none elements should be correct"); + }); +}, "Resolution of pseudo-element styles in display: none elements"); +test(function() { + var flex = document.getElementById('flex'); + [":before", ":after"].forEach(function(pseudo) { + assert_equals(getComputedStyle(flex, pseudo).display, "block", + "Pseudo-styles of display: flex elements should get blockified"); + }); +}, "Item-based blockification of pseudo-elements"); +test(function() { + var flexNoPseudo = document.getElementById('flex-no-pseudo'); + [":before", ":after"].forEach(function(pseudo) { + assert_equals(getComputedStyle(flexNoPseudo, pseudo).display, "block", + "Pseudo-styles of display: flex elements should get blockified"); + }); +}, "Item-based blockification of nonexistent pseudo-elements"); +test(function() { + var contentsPseudos = document.getElementById('contents-pseudos'); + [":before", ":after"].forEach(function(pseudo) { + assert_equals(getComputedStyle(contentsPseudos, pseudo).display, "contents", + "display: contents in " + pseudo + " should get reflected on CSSOM"); + assert_equals(getComputedStyle(contentsPseudos, pseudo).width, "auto", + pseudo + " with display: contents should have no box"); + assert_equals(getComputedStyle(contentsPseudos, pseudo).position, "absolute", + "display: contents in " + pseudo + " should reflect other non-inherited properties in CSSOM"); + }); +}, "display: contents on pseudo-elements"); +test(function() { + var contentsPseudosDynamic = document.getElementById('contents-pseudos-dynamic'); + [":before", ":after"].forEach(function(pseudo) { + assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).display, "block", + "Check that display for " + pseudo + " is block before change"); + }); + contentsPseudosDynamic.className = "contents"; + [":before", ":after"].forEach(function(pseudo) { + assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).display, "contents", + "display: contents in " + pseudo + " should get reflected on CSSOM"); + assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).width, "auto", + pseudo + " with display: contents should have no box"); + assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).position, "absolute", + "display: contents in " + pseudo + " should reflect other non-inherited properties in CSSOM"); + }); +}, "Dynamically change to display: contents on pseudo-elements"); +test(function() { + var div = document.getElementById('test'); + // Note that these assertions deliberately avoid assert_[not_]equals to + // avoid gCS().length in the failure output. + assert_true( + getComputedStyle(div, "totallynotapseudo").length != 0, + "Should return the element's style for unknown pseudo-elements that don't start with a colon"); + assert_true( + getComputedStyle(div, "::totallynotapseudo").length == 0, + "Should return an empty style for unknown pseudo-elements starting with double-colon"); + assert_true( + getComputedStyle(div, ":totallynotapseudo").length == 0, + "Should return an empty style for unknown pseudo-elements starting with colon"); +}, "Unknown pseudo-elements"); +</script> |