diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
| commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
| tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/css-cascade/scope-invalidation.html | |
| parent | Initial commit. (diff) | |
| download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip | |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-cascade/scope-invalidation.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-cascade/scope-invalidation.html | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/scope-invalidation.html b/testing/web-platform/tests/css/css-cascade/scope-invalidation.html new file mode 100644 index 0000000000..62212f7921 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/scope-invalidation.html @@ -0,0 +1,170 @@ +<!DOCTYPE html> +<title>@scope - invalidation</title> +<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + +function test_scope_invalidation(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(element) { + assert_equals(getComputedStyle(element).backgroundColor, 'rgb(0, 128, 0)'); +} +function assert_not_green(element) { + assert_equals(getComputedStyle(element).backgroundColor, 'rgb(0, 0, 0)'); +} +</script> +<style> + main * { + background-color: black; + } +</style> +<main id=main> +</main> + +<!-- Tests follow --> + +<template> + <style> + @scope (.a) { + span { background-color: green; } + } + </style> + <div> + <span></span> + </div> +</template> +<script> +test_scope_invalidation(document.currentScript, () => { + let div = main.querySelector('div'); + let span = main.querySelector('div > span'); + assert_not_green(span); + div.classList.add('a'); + assert_green(span); + div.classList.remove('a'); + assert_not_green(span); +}, 'Element becoming scope root'); +</script> + + +<template> + <style> + @scope (.a) { + :scope { background-color: green; } + } + </style> + <div class=b></div> +</template> +<script> +test_scope_invalidation(document.currentScript, () => { + let b = main.querySelector('.b'); + assert_not_green(b); + b.classList.add('a'); + assert_green(b); + b.classList.remove('a'); + assert_not_green(b); +}, 'Element becoming scope root, with inner :scope rule'); +</script> + +<template> + <style> + @scope (.a) to (.b) { + span { background-color: green; } + } + </style> + <div class=a> + <div> + <span></span> + </div> + </div> +</template> +<script> +test_scope_invalidation(document.currentScript, () => { + let inner_div = main.querySelector('.a > div'); + let span = main.querySelector('.a > div > span'); + assert_green(span); + inner_div.classList.add('b'); + assert_not_green(span); + inner_div.classList.remove('b'); + assert_green(span); +}, 'Element becoming scope limit'); +</script> + + +<template> + <style> + @scope (.a) { + @scope (.b) { + span { background-color: green; } + } + } + </style> + <div> + <div> + <span></span> + </div> + </div> +</template> +<script> +test_scope_invalidation(document.currentScript, () => { + let outer_div = main.querySelector(':scope > div'); + let inner_div = main.querySelector(':scope > div > div'); + let span = main.querySelector('div > div > span'); + + assert_not_green(span); + + outer_div.classList.add('a'); + assert_not_green(span); + + inner_div.classList.add('b'); + assert_green(span); + + // Toggle .b while .a remains. + inner_div.classList.remove('b'); + assert_not_green(span); + inner_div.classList.add('b'); + assert_green(span); + + // Toggle .a while .b remains. + outer_div.classList.remove('a'); + assert_not_green(span); + outer_div.classList.add('a'); + assert_green(span); +}, 'Toggling inner/outer scope roots'); +</script> + + +<template> + <style> + @scope (.a) { + :scope { background-color:green; } + } + </style> + <div></div> +</template> +<script> +test_scope_invalidation(document.currentScript, () => { + let div = main.querySelector('main > div'); + assert_not_green(div); + div.classList.add('a'); + assert_green(div); + div.classList.remove('a'); + assert_not_green(div); +}, 'Element becoming root, with :scope in subject'); +</script> |