diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-cascade')
4 files changed, 149 insertions, 2 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 index 38aaee3021..5d0f726ab5 100644 --- a/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml +++ b/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml @@ -2,3 +2,7 @@ features: - name: cascade-layers files: - layer-* +- name: scope + files: + - at-scope-* + - scope-* diff --git a/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html b/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html index 868267b285..3a1d621d17 100644 --- a/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html +++ b/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html @@ -15,8 +15,6 @@ alt: "a"; animation-composition: add; animation-delay: 123s; - animation-delay-start: 123s; - animation-delay-end: 456s; animation-direction: reverse; animation-duration: 123s; animation-fill-mode: both; diff --git a/testing/web-platform/tests/css/css-cascade/scope-pseudo-element-ref.html b/testing/web-platform/tests/css/css-cascade/scope-pseudo-element-ref.html new file mode 100644 index 0000000000..2ad6a0995a --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/scope-pseudo-element-ref.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>@scope - pseudo-elements (ref)</title> +<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#link"> + +<!-- Cosmetic --> +<style> + body > div { + display: inline-block; + width: 100px; + height: 100px; + border: 1px solid black; + vertical-align:top; + } +</style> + +<!-- ::before --> +<style> + #before_test > main { + background-color: skyblue; + } + #before_test > main::before { + content: "B"; + width: 20px; + height: 20px; + display: inline-block; + background-color: tomato; + } +</style> +<div id=before_test> + <main> + Foo + </main> +</div> + +<!-- ::after --> +<style> + #after_test > main { + background-color: skyblue; + } + #after_test > main::after { + content: "A"; + width: 20px; + height: 20px; + display: inline-block; + background-color: tomato; + } +</style> +<div id=after_test> + <main> + Foo + </main> +</div> + +<!-- ::marker --> +<style> + #marker_test li { + background-color: skyblue; + } + #marker_test li::marker { + content: "M"; + } +</style> +<div id=marker_test> + <ul> + <li>One</li> + <li>Two</li> + </ul> +</div> diff --git a/testing/web-platform/tests/css/css-cascade/scope-pseudo-element.html b/testing/web-platform/tests/css/css-cascade/scope-pseudo-element.html new file mode 100644 index 0000000000..29c4469060 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/scope-pseudo-element.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<title>@scope - pseudo-elements</title> +<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#link"> +<link rel="match" href="scope-pseudo-element-ref.html"> + +<!-- Cosmetic --> +<style> + body > div { + display: inline-block; + width: 100px; + height: 100px; + border: 1px solid black; + vertical-align:top; + } +</style> + +<!-- ::before --> +<style> + @scope (#before_test > main) { + :scope { + background-color: skyblue; + } + :scope::before { + content: "B"; + width: 20px; + height: 20px; + display: inline-block; + background-color: tomato; + } + } +</style> +<div id=before_test> + <main> + Foo + </main> +</div> + +<!-- ::after --> +<style> + @scope (#after_test > main) { + :scope { + background-color: skyblue; + } + :scope::after { + content: "A"; + width: 20px; + height: 20px; + display: inline-block; + background-color: tomato; + } + } +</style> +<div id=after_test> + <main> + Foo + </main> +</div> + +<!-- ::marker --> +<style> + @scope (#marker_test li) { + :scope { + background-color: skyblue; + } + :scope::marker { + content: "M"; + } + } +</style> +<div id=marker_test> + <ul> + <li>One</li> + <li>Two</li> + </ul> +</div> |