Tests: Import some ::part() tests

Author: https://github.com/AtkinsSJ Commit: https://github.com/LadybirdBrowser/ladybird/commit/53609c49cec Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/7077
2026-05-01 12:07:14 +02:00 · 2025-12-09 14:08:02 +00:00 · 2025-12-15 14:14:19 +00:00
parent f9f4c36f20
commit 53609c49ce
56 changed files with 1339 additions and 0 deletions
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-shadow-parts/grouping-with-checked.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-shadow-parts/grouping-with-checked.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<title>::part():disabled grouping</title>
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
+<style>
+  my-element::part(checkbox) {
+    font-family: fantasy;
+    background-color: #ff0000;
+  }
+  #grouped {
+    color: #ff0000;
+  }
+  my-element::part(checkbox):checked {
+    background-color: #00ff00;
+  }
+  my-element::part(checkbox):checked,
+  #grouped {
+    color: #00ff00;
+  }
+  my-element::part(not-a-part):checked,
+  #grouped {
+    font-family: monospace;
+  }
+</style>
+<body>
+  <my-element id="subject"></my-element>
+  <p id="grouped">Text</p>
+  <script src="../../resources/testharness.js"></script>
+  <script src="../../resources/testharnessreport.js"></script>
+  <script>
+    const RED = "rgb(255, 0, 0)";
+    const GREEN = "rgb(0, 255, 0)";
+    customElements.define(
+      "my-element",
+      class MyElement extends HTMLElement {
+        connectedCallback() {
+          this.attachShadow({
+            mode: "open",
+          }).innerHTML = `
+              <input part="checkbox" type="checkbox" checked />
+            `;
+          this.elementInternals = this.attachInternals();
+        }
+
+        get inner() {
+          return this.shadowRoot.querySelector("[part=checkbox]");
+        }
+      },
+    );
+
+    test(() => {
+        assert_equals(getComputedStyle(subject.inner).fontFamily, 'fantasy');
+    }, "Styles applied to ::part(...)");
+
+    test(() => {
+        assert_equals(getComputedStyle(subject.inner).backgroundColor, GREEN);
+    }, "Styles applied to ::part(...):checked");
+
+    test(() => {
+        assert_equals(getComputedStyle(subject.inner).color, GREEN);
+        assert_equals(getComputedStyle(grouped).color, GREEN);
+    }, "Styles applied via grouped selector including matched ::part(...):checked");
+
+    test(() => {
+        assert_equals(getComputedStyle(grouped).fontFamily, 'monospace');
+    }, "Styles applied via grouped selector including unmatched ::part(...):checked");
+  </script>
+</body>