diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-cascade/scope-specificity.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-cascade/scope-specificity.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-cascade/scope-specificity.html | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/scope-specificity.html b/testing/web-platform/tests/css/css-cascade/scope-specificity.html new file mode 100644 index 0000000000..0f48c605a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/scope-specificity.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<title>@scope - specificty</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> +<style id=style> +</style> +<main id=main> + <div id=a class=a> + <div id=b class=b> + </div> + </div> +</main> +<script> + +// Format a scoped style rule using the selector at scoped_selector's last element, +// with each preceding array item representing an enclosing @scope rule. +// +// Example: +// +// scoped_selector=['@scope (foo)', '@scope (bar)', 'div'] +// declarations='z-index:42' +// => '@scope (foo) { @scope (bar) { div { z-index:42 } } }' +function format_scoped_rule(scoped_selector, declarations) { + if (scoped_selector.length < 2) { + throw "Fail"; + } + let scope_prelude = scoped_selector[0]; + let remainder = scoped_selector.slice(1); + let content = remainder.length == 1 + ? `${remainder[0]} { ${declarations} }` + : format_scoped_rule(remainder, declarations); + return `${scope_prelude} { ${content} }`; +} + +// Verify that the specificity of 'scoped_selector' is the same +// as the specificity of 'ref_selector'. Both selectors must select +// an element within #main. +function test_scope_specificity(scoped_selector, ref_selector) { + test(() => { + let element = main.querySelector(ref_selector); + assert_not_equals(element, null); + + let scoped_rule = format_scoped_rule(scoped_selector, 'z-index:1'); + let ref_rule = `:is(${ref_selector}) { z-index:2 }`; + + style.textContent = `${scoped_rule}`; + assert_equals(getComputedStyle(element).zIndex, '1', 'scoped rule'); + + style.textContent = `${ref_rule}`; + assert_equals(getComputedStyle(element).zIndex, '2', 'unscoped rule'); + + // The scoped rule should win due to proximity. + style.textContent = `${scoped_rule} ${ref_rule}`; + assert_equals(getComputedStyle(element).zIndex, '1', 'scoped + unscoped'); + + // The scoped rule should win due to proximity (reverse). + style.textContent = `${ref_rule} ${scoped_rule}`; + assert_equals(getComputedStyle(element).zIndex, '1', 'unscoped + scoped'); + + // Add one (1) to the specificty of the unscoped rule. This should + // cause the unscoped rule to win instead. + style.textContent = `div${ref_rule} ${scoped_rule}`; + assert_equals(getComputedStyle(element).zIndex, '2', 'unscoped + scoped'); + }, format_scoped_rule(scoped_selector, '')); +} + +test_scope_specificity(['@scope (#main)', '.b'], '.b'); +test_scope_specificity(['@scope (#main) to (.b)', '.a'], '.a'); +test_scope_specificity(['@scope (#main, .foo, .bar)', '#a'], '#a'); +test_scope_specificity(['@scope (#main)', 'div.b'], 'div.b'); +test_scope_specificity(['@scope (#main)', ':scope .b'], '.a .b'); +test_scope_specificity(['@scope (#main)', '& .b'], '#main .b'); +test_scope_specificity(['@scope (#main)', 'div .b'], 'div .b'); +test_scope_specificity(['@scope (#main)', '@scope (.a)', '.b'], '.b'); + +</script> |