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-cascade/scope-proximity.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-cascade/scope-proximity.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-cascade/scope-proximity.html | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/scope-proximity.html b/testing/web-platform/tests/css/css-cascade/scope-proximity.html new file mode 100644 index 0000000000..c133a71e9a --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/scope-proximity.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<title>@scope - proximity to root</title> +<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-proximity"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + +function test_scope(script_element, callback_fn, description) { + test((t) => { + // The provided <script> element must be an immedate subsequent sibling of + // a <template> element. + let template_element = script_element.previousElementSibling; + assert_equals(template_element.tagName, 'TEMPLATE'); + + t.add_cleanup(() => { + while (main.firstChild) + main.firstChild.remove() + }); + + main.append(template_element.content.cloneNode(true)); + + callback_fn(); + }, description); +} + +function assert_green(selector) { + assert_equals(getComputedStyle(main.querySelector(selector)).backgroundColor, 'rgb(0, 128, 0)'); +} +function assert_not_green(selector) { + assert_equals(getComputedStyle(main.querySelector(selector)).backgroundColor, 'rgb(0, 0, 0)'); +} +</script> +<style> + main * { + background-color: black; + } +</style> +<main id=main> +</main> + +<template> + <style> + .item { + padding: 0px; + border: 5px solid red; + } + + @scope (.light) { + [id] { border-color: rgb(100, 100, 100); } + } + + @scope (.dark) { + [id] { border-color: rgb(200, 200, 200); } + } + </style> + <div class=light> + <div id=item1> + <div class=dark> + <div id=item2> + <div class=light> + <div id=item3> + <div class=dark> + <div id=item4></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</template> +<script> +test_scope(document.currentScript, () => { + assert_equals(getComputedStyle(item1).borderColor, 'rgb(100, 100, 100)'); + assert_equals(getComputedStyle(item2).borderColor, 'rgb(200, 200, 200)'); + assert_equals(getComputedStyle(item3).borderColor, 'rgb(100, 100, 100)'); + assert_equals(getComputedStyle(item4).borderColor, 'rgb(200, 200, 200)'); +}, 'Alternating light/dark'); +</script> + + +<template> + <style> + @scope (.b) { + [id] { border-color:green; } + } + @scope (.a) { + [id] { border-color:red; } + } + </style> + <div class=a> + <div class=b> + <span id=item></span> + </div> + </div> +</template> +<script> +test_scope(document.currentScript, () => { + assert_equals(getComputedStyle(item).borderColor, 'rgb(0, 128, 0)'); +}, 'Proximity wins over order of appearance'); +</script> + + +<template> + <style> + @scope (.a) { + span[id] { border-color:green; } + } + @scope (.b) { + [id] { border-color:red; } + } + </style> + <div class=a> + <div class=b> + <span id=item></span> + </div> + </div> +</template> +<script> +test_scope(document.currentScript, () => { + assert_equals(getComputedStyle(item).borderColor, 'rgb(0, 128, 0)'); +}, 'Specificity wins over proximity'); +</script> |