diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-cascade')
6 files changed, 134 insertions, 5 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml new file mode 100644 index 0000000000..38aaee3021 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: cascade-layers + files: + - layer-* diff --git a/testing/web-platform/tests/css/css-cascade/at-scope-parsing.html b/testing/web-platform/tests/css/css-cascade/at-scope-parsing.html index 88e28fe4ff..8390738dd8 100644 --- a/testing/web-platform/tests/css/css-cascade/at-scope-parsing.html +++ b/testing/web-platform/tests/css/css-cascade/at-scope-parsing.html @@ -42,9 +42,9 @@ test_valid('@scope to (.a)'); test_valid('@scope (.a) to (&)'); test_valid('@scope (.a) to (& > &)'); - test_valid('@scope (.a) to (> .b)'); - test_valid('@scope (.a) to (+ .b)'); - test_valid('@scope (.a) to (~ .b)'); + test_valid('@scope (.a) to (> .b)', '@scope (.a) to (:scope > .b)'); + test_valid('@scope (.a) to (+ .b)', '@scope (.a) to (:scope + .b)'); + test_valid('@scope (.a) to (~ .b)', '@scope (.a) to (:scope ~ .b)'); test_valid('@scope ()', '@scope'); test_valid('@scope to ()', '@scope'); test_valid('@scope () to ()', '@scope'); @@ -75,4 +75,5 @@ test_invalid('@scope (.a'); test_invalid('@scope (.a to (.b)'); test_invalid('@scope ( to (.b)'); + test_invalid('@scope (.a) from (.c)'); </script> diff --git a/testing/web-platform/tests/css/css-cascade/at-scope-relative-syntax.html b/testing/web-platform/tests/css/css-cascade/at-scope-relative-syntax.html new file mode 100644 index 0000000000..274d9afbeb --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/at-scope-relative-syntax.html @@ -0,0 +1,68 @@ +<!doctype html> +<title>@scope and Nesting: Parsing inner style rules with relative selector syntax</title> +<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-rules"> +<link rel="help" href="https://drafts.csswg.org/css-nesting/#nesting"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<main id=main></main> +<script> + function create_rule_string(prelude, inner) { + if (prelude.length === 0) { + return `${inner} {}`; + } + let outermost = prelude[0]; + let rest = create_rule_string(prelude.slice(1), inner); + return `${outermost} { ${rest} }`; + } + + function create_rule_by_string(style, prelude, inner) { + style.textContent = create_rule_string(prelude, inner); + } + + function create_rule_by_insertion(style, prelude, inner) { + let current = style.sheet; + for (const p of prelude) { + let idx = current.insertRule(`${p} {}`); + current = current.cssRules[idx]; + } + current.insertRule(`${inner} {}`); + } + + function innermost_selector(depth, rules) { + let r = rules; + let d = depth + 1; + while (d != 0) { + assert_equals(r.cssRules.length, 1); + r = r.cssRules[0]; + d--; + } + return r.selectorText; + } + + const create_method = { + "string": create_rule_by_string, + "insertRule": create_rule_by_insertion, + }; + + function test_inner(prelude, method, actual, expected) { + if (expected === undefined) { + expected = actual; + } + test(t => { + t.add_cleanup(() => main.replaceChildren()); + const style = document.createElement('style'); + main.append(style); + create_method[method](style, prelude, actual); + const innerSelector = innermost_selector(prelude.length, style.sheet); + assert_equals(innerSelector, expected); + }, `${actual} in ${prelude} created by ${method} valid`); + } + + for (const method of Object.keys(create_method)) { + test_inner(['@scope' , '.nest'], method, '> .foo', '& > .foo'); + test_inner(['.nest', '@scope'], method, '> .foo', ':scope > .foo'); + + test_inner(['@scope' , '.nest', '@media screen'], method, '> .foo', '& > .foo'); + test_inner(['.nest', '@scope', '@media screen'], method, '> .foo', ':scope > .foo'); + } +</script> diff --git a/testing/web-platform/tests/css/css-cascade/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-cascade/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..56f7e89b85 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/parsing/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: cascade-layers + files: + - layer.html diff --git a/testing/web-platform/tests/css/css-cascade/scope-evaluation.html b/testing/web-platform/tests/css/css-cascade/scope-evaluation.html index f181048115..c6ea13c862 100644 --- a/testing/web-platform/tests/css/css-cascade/scope-evaluation.html +++ b/testing/web-platform/tests/css/css-cascade/scope-evaluation.html @@ -512,7 +512,6 @@ test_scope(document.currentScript, () => { }, ':scope in two different compounds'); </script> - <template> <style> @scope (.a:has(.c)) { @@ -545,3 +544,24 @@ test_scope(document.currentScript, () => { assert_not_green('.second .d'); }, 'Scope root with :has()'); </script> + +<template> + <style> + @scope (.a) to (.b, .c) { + * { background-color:green; } + } + </style> + <div class=a> + <span id="in"></span> + <div class=b> + <span id="out"</span> + <div class=c></div> + </div> + </div> +</template> +<script> +test_scope(document.currentScript, () => { + assert_green('#in'); + assert_not_green('#out'); +}, 'Any scope limit makes the element out of scope'); +</script> diff --git a/testing/web-platform/tests/css/css-cascade/scope-implicit.html b/testing/web-platform/tests/css/css-cascade/scope-implicit.html index 9add25fc9a..a1c6d1c626 100644 --- a/testing/web-platform/tests/css/css-cascade/scope-implicit.html +++ b/testing/web-platform/tests/css/css-cascade/scope-implicit.html @@ -196,4 +196,36 @@ test((t) => { assert_equals(getComputedStyle(outer).zIndex, 'auto'); assert_equals(getComputedStyle(outside_limit).zIndex, 'auto'); }, 'Implicit @scope with limit'); -</script>
\ No newline at end of file +</script> + +<template id=test_concurrent_scope_proximity> +<style> +@scope { + * { z-index: 1;} +} +</style> + <div> + <style> + @scope { + * { z-index:2; } + } + </style> + <div id=inner> + </div> + </div> + <div id=outer></div> +<style> +@scope { + * { z-index: 3;} +} +</style> +</template> +<script> +test((t) => { + t.add_cleanup(() => main.replaceChildren()); + main.append(test_concurrent_scope_proximity.content.cloneNode(true)); + + assert_equals(getComputedStyle(inner).zIndex, '2'); + assert_equals(getComputedStyle(outer).zIndex, '3'); +}, 'Proximity calculation of multiple implicit @scope'); +</script> |