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/css-variables/variable-pseudo-element.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/css-variables/variable-pseudo-element.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-variables/variable-pseudo-element.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-variables/variable-pseudo-element.html b/testing/web-platform/tests/css/css-variables/variable-pseudo-element.html new file mode 100644 index 0000000000..ee61cbf394 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-pseudo-element.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>Variables work in ::before/::after pseudos</title> + + <meta rel="author" title="Kevin Babbitt"> + <meta rel="author" title="Greg Whitworth"> + <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> + <link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/"> + <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> + + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + + <style> + :root { + --color: green; + --color2: red; + } + div::before { + content: '[before]'; + } + div::after { + content: '[after]'; + } + + #div1 { + color: red; + } + #div1::before, #div1::after { + color: var(--color2); + --color2: green; + } + + #div2 { + color: var(--color2); + } + #div2::before, #div2::after { + color: var(--color); + } + + #div3 { + color: var(--color); + } + #div3::before, #div3::after { + --color: red; + } + </style> + + <div id="div1">div1</div> + <div id="div2">div2</div> + <div id="div3">div3</div> + <span id="control" style="color: green;"></span> + +<script> + "use strict"; + + [...document.querySelectorAll("div")].forEach(function (div) { + test( function () { + const expectedColor = getComputedStyle(document.querySelector("#control")).color; + var actualBeforeColor = window.getComputedStyle(div, ':before').getPropertyValue('color'); + var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('color'); + assert_equals(actualBeforeColor, expectedColor); + assert_equals(actualAfterColor, expectedColor); + }, div.getAttribute("id")); + }); +</script> + +</body> +</html> |