Tests: Import all WPT css/css-nesting tests

A few are skipped for now: - A few ref tests fail - Crash tests are not supported by our runner and time out - top-level-is-scope.html crashes and needs further investigation
AtkinsSJ · Nov 7, 2024 · 0494bf3 · 0494bf3
1 parent 7a958ec
commit 0494bf3
Show file tree

Hide file tree

Showing 62 changed files with 2,098 additions and 0 deletions.
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/conditional-properties-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/conditional-properties-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Properties in nested conditional rules</title>
+<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<style>
+  .test {
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    display: grid;
+  }
+
+  @media (min-width: 50px) {
+    .test-5 > div {
+      background-color: green;
+    }
+  }
+
+  @supports (display: grid) {
+    .test-10 {
+      background-color: green;
+    }
+  }
+
+  body * + * {
+    margin-top: 8px;
+  }
+</style>
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test test-5"><div></div></div>
+  <div class="test test-10"><div></div></div>
+</body>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/conditional-rules-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/conditional-rules-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<title>Conditional rules with nesting</title>
+<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<style>
+  .test {
+    background-color: red;
+    width: 30px;
+    height: 30px;
+    display: grid;
+  }
+
+  @media (min-width: 10px) {
+    .test-5 > div {
+      background-color: green;
+    }
+  }
+
+  @media (min-width: 10px) {
+    .test-6 > div {
+      background-color: green;
+    }
+  }
+
+  @supports (display: grid) {
+    .test-10 {
+      background-color: green;
+    }
+  }
+
+  @layer {
+    .test-11 {
+      background-color: green !important;
+    }
+  }
+
+  @scope (.test-12) {
+    :scope {
+      background-color: green;
+    }
+  }
+
+  div {
+    container-type: inline-size;
+  }
+  @container (width >= 0px) {
+    .test-13 {
+      background-color: green;
+    }
+  }
+
+  body * + * {
+    margin-top: 8px;
+  }
+</style>
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test test-5"><div></div></div>
+  <div class="test test-6"><div></div></div>
+  <div class="test test-10"><div></div></div>
+  <div class="test test-11"><div></div></div>
+  <div class="test"><div class="test-12"></div></div>
+  <div class="test"><div class="test-13"></div></div>
+</body>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/has-nesting-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/has-nesting-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>Nested has shouldn't match</title>
+<style>
+ul { background: green }
+</style>
+<ul>
+  <li>Bar</li>
+</ul>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/implicit-nesting-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/implicit-nesting-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Implicit nesting</title>
+<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<style>
+  .test {
+    background-color: green;
+    width: 30px;
+    height: 30px;
+    display: grid;
+  }
+
+  body * + * {
+    margin-top: 8px;
+  }
+</style>
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test"></div>
+  <div class="test"></div>
+  <div class="test"></div>
+  <div class="test"></div>
+  <div class="test"></div>
+  <div class="test"></div>
+  <div class="test"></div>
+  <div class="test"></div>
+</body>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/nest-containing-forgiving-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/nest-containing-forgiving-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Nest-containing in forgiving parsing</title>
+<style>
+  .test {
+    background-color: green;
+    width: 100px;
+    height: 100px;
+    display: grid;
+  }
+
+  body * + * {
+    margin-top: 8px;
+  }
+</style>
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test"></div>
+  <div class="test"></div>
+</body>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/supports-is-consistent-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/supports-is-consistent-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<title>@supports needs to be consistent with actual nesting support</title>
+<body>
+  <p>Test passes if this text is not red</p>
+</body>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/supports-rule-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-nesting/supports-rule-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>@supports with nesting</title>
+<link rel="author" title="Matthieu Dubet" href="mailto:m_dubet@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<style>
+  .test {
+    background-color: green;
+    width: 100px;
+    height: 100px;
+    display: grid;
+  }
+
+  body * + * {
+    margin-top: 8px;
+  }
+</style>
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test"></div>
+  <div class="test"></div>
+  <div class="test"></div>
+  <div class="test"></div>
+</body>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/reference/ref-filled-green-100px-square-only.html b/Tests/LibWeb/Ref/expected/wpt-import/css/reference/ref-filled-green-100px-square-only.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<p>Test passes if there is a filled green square.</p>
+<div style="width:100px; height:100px; background:green;"></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/conditional-properties.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/conditional-properties.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Properties in nested conditional rules</title>
+<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/conditional-properties-ref.html">
+<style>
+  .test {
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    display: grid;
+  }
+
+  .test-5 {
+    @media (min-width: 50px) {
+      background-color: green;
+    }
+  }
+
+  .test-10 {
+    @supports (display: grid) {
+      background-color: green;
+    }
+  }
+
+  body * + * {
+    margin-top: 8px;
+  }
+</style>
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test test-5"><div></div></div>
+  <div class="test test-10"><div></div></div>
+</body>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/conditional-rules.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/conditional-rules.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<title>Conditional rules with nesting</title>
+<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/conditional-rules-ref.html">
+<style>
+  .test {
+    background-color: red;
+    width: 30px;
+    height: 30px;
+    display: grid;
+  }
+
+  .test-5 {
+    @media (min-width: 10px) {
+      & {
+        background-color: green;
+      }
+    }
+  }
+
+  .test-6 {
+    @media (min-width: 10px) {
+      background-color: green;
+    }
+  }
+
+  .test-10 {
+    @supports (display: grid) {
+      & {
+        background-color: green;
+      }
+    }
+  }
+
+  .test-11 {
+    @layer {
+      & {
+        background-color: green !important;
+      }
+    }
+  }
+
+  .test-12 {
+    @scope (&) {
+      :scope {
+        background-color: green;
+      }
+    }
+  }
+
+  div {
+    container-type: inline-size;
+  }
+  .test-13 {
+    @container (width >= 0px) {
+      & {
+        background-color: green;
+      }
+    }
+  }
+
+  body * + * {
+    margin-top: 8px;
+  }
+</style>
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test test-5"></div>
+  <div class="test test-6"></div>
+  <div class="test test-10"></div>
+  <div class="test test-11"></div>
+  <div class="test test-12"><div class="test-12"></div></div>
+  <div class="test"><div class="test-13"></div></div>
+</body>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/has-nesting.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/has-nesting.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<title>Nested has shouldn't match</title>
+<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1864647">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9600">
+<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/has-nesting-ref.html">
+<style>
+ul { background: green }
+
+li:has(strong) {
+  display: none;
+
+  :has(> &) {
+    background: red;
+  }
+}
+</style>
+<ul>
+  <li><strong>Foo</strong></li>
+  <li>Bar</li>
+</ul>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/host-nesting-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/host-nesting-001.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and nesting (basic) </title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
+<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :host {
+        .nested {
+          width: 100px;
+          height: 100px;
+          background-color: green;
+        }
+      }
+    </style>
+    <div class="nested"></div>
+  `;
+</script>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/host-nesting-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/host-nesting-002.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and nesting (bare declarations)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
+<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :host {
+        @media (width >= 0) {
+          width: 100px;
+          height: 100px;
+          background-color: green;
+        }
+      }
+    </style>
+  `;
+</script>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/host-nesting-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-nesting/host-nesting-003.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and nesting (combined with something else)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
+<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      .nested {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+      }
+      :host(#not-host), #host {
+        .nested {
+          background-color: red;
+        }
+      }
+    </style>
+    <div class="nested"></div>
+  `;
+</script>