summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-cascade/scope-pseudo-element.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-cascade/scope-pseudo-element.html')
-rw-r--r--testing/web-platform/tests/css/css-cascade/scope-pseudo-element.html76
1 files changed, 76 insertions, 0 deletions
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>