From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../tests/css/css-shadow-parts/META.yml            |  3 +
 .../tests/css/css-shadow-parts/all-hosts.html      | 36 +++++++++
 .../both-part-and-exportparts.html                 | 32 ++++++++
 .../chaining-invalid-selector.html                 | 41 +++++++++++
 .../css/css-shadow-parts/complex-matching.html     | 30 ++++++++
 .../css/css-shadow-parts/complex-non-matching.html | 30 ++++++++
 .../tests/css/css-shadow-parts/different-host.html | 30 ++++++++
 .../tests/css/css-shadow-parts/double-forward.html | 34 +++++++++
 .../css/css-shadow-parts/exportparts-multiple.html | 76 +++++++++++++++++++
 .../tests/css/css-shadow-parts/host-part-001.html  | 43 +++++++++++
 .../css/css-shadow-parts/host-stylesheet.html      | 32 ++++++++
 .../tests/css/css-shadow-parts/idlharness.html     | 21 ++++++
 .../tests/css/css-shadow-parts/inner-host.html     | 42 +++++++++++
 .../interaction-with-nested-pseudo-class-ref.html  |  2 +
 .../interaction-with-nested-pseudo-class.html      | 23 ++++++
 .../interaction-with-placeholder-ref.html          | 18 +++++
 .../interaction-with-placeholder.html              | 29 ++++++++
 .../interaction-with-pseudo-elements.html          | 86 ++++++++++++++++++++++
 .../invalidation-change-exportparts-forward.html   | 34 +++++++++
 .../invalidation-change-part-name-forward.html     | 34 +++++++++
 ...lidation-change-part-name-idl-domtokenlist.html | 33 +++++++++
 .../invalidation-change-part-name-idl-setter.html  | 32 ++++++++
 .../invalidation-change-part-name.html             | 32 ++++++++
 .../invalidation-complex-selector-forward.html     | 34 +++++++++
 .../invalidation-complex-selector.html             | 32 ++++++++
 .../css-shadow-parts/invalidation-part-pseudo.html | 50 +++++++++++++
 .../tests/css/css-shadow-parts/multiple-parts.html | 44 +++++++++++
 .../css/css-shadow-parts/part-mutation-pseudo.html | 27 +++++++
 .../tests/css/css-shadow-parts/part-name-idl.html  | 53 +++++++++++++
 .../css-shadow-parts/part-nested-pseudo-ref.html   |  9 +++
 .../css/css-shadow-parts/part-nested-pseudo.html   | 17 +++++
 .../css-shadow-parts/precedence-part-vs-part.html  | 35 +++++++++
 .../tests/css/css-shadow-parts/serialization.html  | 29 ++++++++
 .../css-shadow-parts/simple-forward-shorthand.html | 32 ++++++++
 .../tests/css/css-shadow-parts/simple-forward.html | 32 ++++++++
 .../simple-important-important.html                | 30 ++++++++
 .../css-shadow-parts/simple-important-inline.html  | 29 ++++++++
 .../css/css-shadow-parts/simple-important.html     | 30 ++++++++
 .../tests/css/css-shadow-parts/simple-inline.html  | 29 ++++++++
 .../tests/css/css-shadow-parts/simple.html         | 30 ++++++++
 .../tests/css/css-shadow-parts/style-sharing.html  | 23 ++++++
 .../css/css-shadow-parts/support/shadow-helper.js  | 33 +++++++++
 42 files changed, 1371 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/META.yml
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/all-hosts.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/both-part-and-exportparts.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/chaining-invalid-selector.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/complex-matching.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/complex-non-matching.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/different-host.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/double-forward.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/exportparts-multiple.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/host-part-001.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/host-stylesheet.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/idlharness.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/inner-host.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class-ref.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder-ref.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/interaction-with-pseudo-elements.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-forward.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector-forward.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/multiple-parts.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/part-mutation-pseudo.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/part-name-idl.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo-ref.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/precedence-part-vs-part.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/serialization.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/simple-forward-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/simple-forward.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/simple-important-important.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/simple-important-inline.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/simple-important.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/simple-inline.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/simple.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/style-sharing.html
 create mode 100644 testing/web-platform/tests/css/css-shadow-parts/support/shadow-helper.js

(limited to 'testing/web-platform/tests/css/css-shadow-parts')

diff --git a/testing/web-platform/tests/css/css-shadow-parts/META.yml b/testing/web-platform/tests/css/css-shadow-parts/META.yml
new file mode 100644
index 0000000000..6cce42664a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/META.yml
@@ -0,0 +1,3 @@
+spec: https://drafts.csswg.org/css-shadow-parts/
+suggested_reviewers:
+  - tabatkins
diff --git a/testing/web-platform/tests/css/css-shadow-parts/all-hosts.html b/testing/web-platform/tests/css/css-shadow-parts/all-hosts.html
new file mode 100644
index 0000000000..218535dcba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/all-hosts.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - All Hosts</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>::part(partp) { color: green; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: red; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <custom-element id="c-e-1"></custom-element>
+    The following text should be green:
+    <custom-element id="c-e-2"></custom-element>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e-1", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "::part with host selector styles in first host");
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e-2", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "::part with host selector styles in second host");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/both-part-and-exportparts.html b/testing/web-platform/tests/css/css-shadow-parts/both-part-and-exportparts.html
new file mode 100644
index 0000000000..6cd945c6c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/both-part-and-exportparts.html
@@ -0,0 +1,32 @@
+<!doctype html><meta charset="utf-8">
+<title>CSS Shadow Parts - ::part() rules when element has both @part and @exportparts</title>
+<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1347634">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  ::part(bar) {
+    color: green;
+  }
+  ::part(baz) {
+    background: lime;
+  }
+</style>
+<div id="foo"></div>
+<script>
+test(function() {
+  const foo = document.getElementById("foo");
+  foo.attachShadow({ mode: "open" }).innerHTML = `<div id="outer" part="bar" exportparts="baz"></div>`;
+  const outer = foo.shadowRoot.getElementById("outer");
+  outer.attachShadow({ mode: "open" }).innerHTML = `<div id="inner" part="baz">x</div>`;
+  const inner = outer.shadowRoot.getElementById("inner");
+
+  // outer should still match ::part(bar) rule, despite having @exportparts
+  assert_equals(getComputedStyle(outer).color, "rgb(0, 128, 0)",
+                "outer matches ::part(bar) rule");
+
+  // inner should match ::part(baz) rule, because of @exportparts in outer
+  assert_equals(getComputedStyle(inner).backgroundColor, "rgb(0, 255, 0)",
+                "inner matches ::part(baz) rule");
+}, "::part() rules match elements having both @part and @exportparts");
+</script>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/chaining-invalid-selector.html b/testing/web-platform/tests/css/css-shadow-parts/chaining-invalid-selector.html
new file mode 100644
index 0000000000..cb34a7b460
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/chaining-invalid-selector.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Chaining Invalid Selector</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e-outer::part(c-e-part)::part(partp) { color: red; }</style>
+    <div>
+      It's invalid to use 2 pseudoelements in a selector but if somehow it becomes valid,
+      it should not expose the internal structure of the shadow tree.
+    </div>
+    <script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
+    <template id="custom-element-inner-template">
+      <style>span { color: green; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    <script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
+    <template id="custom-element-outer-template">
+      The following text should be green:
+      <custom-element-inner id="c-e-inner" part="c-e-part"></custom-element-inner>
+    </template>
+    <custom-element-outer id="c-e-outer"></custom-element-outer>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "::part cannot be chained to reach elements in the inner host");
+      test(function() {
+        assert_equals(document.getElementsByTagName("body")[0].style.length, 0);
+      }, "Chained ::part selectors are dropped");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/complex-matching.html b/testing/web-platform/tests/css/css-shadow-parts/complex-matching.html
new file mode 100644
index 0000000000..f8f063d850
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/complex-matching.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Complex Matching</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>div #c-e::part(partp) { color: green; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: red; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <div><custom-element id="c-e"></custom-element></div>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Complex selector for host works");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/complex-non-matching.html b/testing/web-platform/tests/css/css-shadow-parts/complex-non-matching.html
new file mode 100644
index 0000000000..6e5bc69c5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/complex-non-matching.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Complex Non-matching</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>div #c-e::part(partp) { color: red; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: green; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <pre><custom-element id="c-e"></custom-element></pre>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Non-matching complex selector for host does not style");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/different-host.html b/testing/web-platform/tests/css/css-shadow-parts/different-host.html
new file mode 100644
index 0000000000..7fe9744af9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/different-host.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Different Host</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e-other::part(partp) { color: red; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: green; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <custom-element id="c-e"></custom-element>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part is not styled when host is not selected");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/double-forward.html b/testing/web-platform/tests/css/css-shadow-parts/double-forward.html
new file mode 100644
index 0000000000..d23ec775ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/double-forward.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Double forward</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e-outer::part(part-forwarded2) { color: green; }</style>
+    <script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
+    <template id="custom-element-inner-template">
+      <style>span { color: red; }</style>
+      <span id="green_part" part="partp">This text</span>
+    </template>
+    <script>installCustomElement("custom-element-middle", "custom-element-middle-template");</script>
+    <template id="custom-element-middle-template"><custom-element-inner id="c-e-inner" exportparts="partp: part-forwarded1"></custom-element-inner></template>
+    <script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
+    <template id="custom-element-outer-template"><custom-element-middle id="c-e-middle" exportparts="part-forwarded1: part-forwarded2"></custom-element-middle></template>
+    The following text should be green:
+    <custom-element-outer id="c-e-outer"></custom-element-outer>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-middle", "c-e-inner", "green_part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in inner host is forwarded through the middle host for styling by document style sheet");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/exportparts-multiple.html b/testing/web-platform/tests/css/css-shadow-parts/exportparts-multiple.html
new file mode 100644
index 0000000000..a6773a8fb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/exportparts-multiple.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<title>CSS Shadow Parts - Exporting multiple shadow parts</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1618509">
+<style>
+::part(inner-part) {
+  color: red;
+  background: blue;
+  width: 100px;
+  height: 100px;
+}
+::part(inner-part-alias) {
+  color: green;
+}
+.change-1::part(inner-part) {
+  background: green;
+}
+
+.change-2::part(inner-part-alias) {
+  color: blue;
+}
+</style>
+<div id="outer"></div>
+<script>
+test(function() {
+  let outer = document.getElementById("outer");
+  outer.attachShadow({ mode: "open" }).innerHTML = `
+    <div exportparts="inner-part, inner-part: inner-part-alias"></div>
+  `;
+
+  let inner = outer.shadowRoot.querySelector("div");
+  inner.attachShadow({ mode: "open" }).innerHTML = `
+    <div part="inner-part"></div>
+  `;
+
+  let innerPart = inner.shadowRoot.querySelector("div");
+  assert_equals(
+    getComputedStyle(innerPart).color,
+    "rgb(0, 128, 0)",
+    "color should be green from ::part(inner-part-alias) rule"
+  );
+  assert_equals(
+    getComputedStyle(innerPart).backgroundColor,
+    "rgb(0, 0, 255)",
+    "background should be blue from ::part(inner-part) rule"
+  );
+
+  outer.classList.add("change-1");
+  assert_equals(
+    getComputedStyle(innerPart).color,
+    "rgb(0, 128, 0)",
+    "color should be green from ::part(inner-part-alias) rule"
+  );
+  assert_equals(
+    getComputedStyle(innerPart).backgroundColor,
+    "rgb(0, 128, 0)",
+    "background should be green from .change-1::part(inner-part) rule"
+  );
+
+  outer.classList.add("change-2");
+  assert_equals(
+    getComputedStyle(innerPart).color,
+    "rgb(0, 0, 255)",
+    "color should be blue from .change-2::part(inner-part-alias) rule"
+  );
+  assert_equals(
+    getComputedStyle(innerPart).backgroundColor,
+    "rgb(0, 128, 0)",
+    "background should be green from .change-1::part(inner-part) rule"
+  );
+}, "Forwarding part under multiple names should work");
+</script>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/host-part-001.html b/testing/web-platform/tests/css/css-shadow-parts/host-part-001.html
new file mode 100644
index 0000000000..9004141534
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/host-part-001.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<title>CSS Shadow Parts - :host::part()</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/#part">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1624968">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=980506">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="host"></div>
+<script>
+test(function() {
+  let host = document.getElementById("host");
+  host.attachShadow({ mode: "open" }).innerHTML = `
+    <style>
+      :host::part(mypart) {
+        color: lime;
+      }
+      :host(.tweak)::part(mypart) {
+        color: blue;
+      }
+    </style>
+    <div part="mypart"></div>
+  `;
+
+  let part = host.shadowRoot.querySelector("[part]");
+
+  assert_equals(
+    window.getComputedStyle(part).color,
+    "rgb(0, 255, 0)",
+    ":host::part() works",
+  );
+
+  host.classList.add("tweak");
+
+  assert_equals(
+    window.getComputedStyle(part).color,
+    "rgb(0, 0, 255)",
+    ":host::part() invalidation works properly",
+  );
+}, ":host::part works");
+</script>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/host-stylesheet.html b/testing/web-platform/tests/css/css-shadow-parts/host-stylesheet.html
new file mode 100644
index 0000000000..2e65c4b1b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/host-stylesheet.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Host Stylesheet</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>
+        ::part(partp) { color: red; }
+        span { color: green; }
+      </style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <custom-element id="c-e"></custom-element>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in selected host is not styled by ::part in a stylesheet inside the host");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/idlharness.html b/testing/web-platform/tests/css/css-shadow-parts/idlharness.html
new file mode 100644
index 0000000000..182943ac69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/idlharness.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>CSS Shadow Parts IDL tests</title>
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/#idl">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/WebIDLParser.js"></script>
+<script src="/resources/idlharness.js"></script>
+<script>
+idl_test(
+  ['css-shadow-parts'],
+  ['dom'],
+  idl_array => {
+    self.element = document.createElementNS('ns', 'e');
+    self.htmlElement = document.createElement('html');
+    self.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    idl_array.add_objects({
+      Element: ['element', 'htmlElement', 'svgElement'],
+    });
+  }
+);
+</script>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/inner-host.html b/testing/web-platform/tests/css/css-shadow-parts/inner-host.html
new file mode 100644
index 0000000000..2dfd4b0510
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/inner-host.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Inner Host</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e-outer::part(partp) { color: green; }</style>
+    <script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
+    <template id="custom-element-inner-template">
+      <style>span { color: blue; }</style>
+      <span id="blue_part" part="partp">This text</span>
+    </template>
+    <script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
+    <template id="custom-element-outer-template">
+      <style>span { color: red; }</style>
+      <span id="green_part" part="partp">This text</span>
+      The following text should be blue:
+      <custom-element-inner id="c-e-inner"></custom-element-inner>
+    </template>
+    The following text should be green:
+    <custom-element-outer id="c-e-outer"></custom-element-outer>
+    <script>
+      "use strict";
+      const colorBlue = "rgb(0, 0, 255)";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e-outer", "green_part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in outer host is styled by document style sheet");
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "blue_part"]);
+        assert_equals(window.getComputedStyle(el).color, colorBlue);
+      }, "Part in inner host is not styled by document style sheet");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class-ref.html b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class-ref.html
new file mode 100644
index 0000000000..e3b99d43a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<button style="color:green">Should be green on focus</button>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class.html b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class.html
new file mode 100644
index 0000000000..1061e4b0e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>CSS Shadow Parts - Nested Pseudo Classes</title>
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts" >
+<link rel="help" href="https://drafts.csswg.org/selectors/#matches">
+<link href="https://drafts.csswg.org/selectors/#matches" rel="help">
+<link rel="match" href="interaction-with-nested-pseudo-class-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+  :root { color: red; }
+  ::part(test):is(:focus) { color: green; }
+</style>
+<div id=host></div>
+<script>
+  const root = host.attachShadow({mode: 'closed'});
+  root.innerHTML = '<button part=test>Should be green on focus</button>';
+  const button = root.querySelector('button');
+  button.addEventListener('focus', takeScreenshot);
+  test_driver.bless('focus button', () => button.focus());
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder-ref.html b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder-ref.html
new file mode 100644
index 0000000000..11943c229a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Interaction with placeholder</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+  </head>
+  <body>
+    <style>
+      #placeholder-i::placeholder { color: green; }
+    </style>
+    <div>
+      The following text should be green:
+      <input id="placeholder-i" part="placeholder-p" placeholder="this text"></input>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder.html b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder.html
new file mode 100644
index 0000000000..a064789f06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Interaction with placeholder</title>
+    <!-- This reftest exists because getComputedStyle for
+      ::placeholder is not implemented everywhere --!>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <link href="interaction-with-placeholder-ref.html" rel="match">
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>
+      #c-e::part(placeholder-p)::placeholder { color: green; }
+    </style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>
+        #placeholder-i::placeholder { color: red; }
+      </style>
+      <div>
+        The following text should be green:
+        <input id="placeholder-i" part="placeholder-p" placeholder="this text"></input>
+      </div>
+    </template>
+    <custom-element id="c-e"></custom-element>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/interaction-with-pseudo-elements.html b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-pseudo-elements.html
new file mode 100644
index 0000000000..776ab2eb69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/interaction-with-pseudo-elements.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Interaction with pseudo-elements</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>
+      #c-e::part(before-p)::before { color: green; }
+      #c-e::part(after-p)::after { color: green; }
+      #c-e::part(placeholder-p)::placeholder { color: green; }
+      #c-e::part(selection-p)::selection { color: green; }
+      #c-e::part(first-line-p)::first-line { color: green; }
+      #c-e::part(first-letter-p)::first-letter { color: green; }
+    </style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>
+        #before-i::before { content: "this text"; color: red; }
+        #after-i::after { content: "this text"; color: red; }
+        #placeholder-i::placeholder { color: red; }
+        #selection-i::selection { color: red; }
+        #first-line-i::first-line { color: red; }
+        #first-letter-i::first-letter { color: red; }
+      </style>
+      <div>
+        The following text should be green:
+        <span id="before-i" part="before-p"></span>
+      </div>
+      <div>
+        The following text should be green:
+        <span id="after-i" part="after-p"></span>
+      </div>
+      <div>
+        The following text should be green:
+        <input id="placeholder-i" part="placeholder-p" placeholder="this text"></input>
+      </div>
+      <div>
+        The selected text should be green:
+        <div id="selection-i" part="selection-p">select some text</div>
+      </div>
+      <div>
+        The following text should be green:
+        <div id="first-line-i" part="first-line-p">this text<br>Not this</div>
+      </div>
+      <div>
+        The first letter should be green:
+        <div id="first-letter-i" part="first-letter-p"><p>this text</p></div>
+      </div>
+    </template>
+    <custom-element id="c-e"></custom-element>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "before-i"]);
+        assert_equals(window.getComputedStyle(el, '::before').color, colorGreen);
+      }, "::before in selected host is styled");
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "after-i"]);
+        assert_equals(window.getComputedStyle(el, '::after').color, colorGreen);
+      }, "::after in selected host is styled");
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "placeholder-i"]);
+        assert_equals(window.getComputedStyle(el, '::placeholder').color, colorGreen);
+      }, "::placeholder in selected host is styled");
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "selection-i"]);
+        assert_equals(window.getComputedStyle(el, '::selection').color, colorGreen);
+      }, "::selection in selected host is styled");
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "first-line-i"]);
+        assert_equals(window.getComputedStyle(el, '::first-line').color, colorGreen);
+      }, "::first-line in selected host is styled");
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "first-letter-i"]);
+        assert_equals(window.getComputedStyle(el, '::first-letter').color, colorGreen);
+      }, "::first-letter in selected host is styled");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html
new file mode 100644
index 0000000000..1e319deb63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Invalidation change exportparts forward</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e-outer::part(part-forwarded) { color: red; }</style>
+    <script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
+    <template id="custom-element-inner-template">
+      <style>span { color: green; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    <script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
+    <template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp: part-forwarded"></custom-element-inner></template>
+    The following text should be green:
+    <custom-element-outer id="c-e-outer"></custom-element-outer>
+    <script>
+      "use strict";
+      test(function() {
+        const part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
+        const before = window.getComputedStyle(part).color;
+        getElementByShadowIds(document, ["c-e-outer", "c-e-inner"]).setAttribute("exportparts", "new-exportparts");
+        const after = window.getComputedStyle(part).color;
+        assert_not_equals(before, after);
+      }, "Part in selected host changed color");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-forward.html b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-forward.html
new file mode 100644
index 0000000000..f8da6d1f54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-forward.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Invalidation change part name forward</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e-outer::part(part-forwarded) { color: red; }</style>
+    <script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
+    <template id="custom-element-inner-template">
+      <style>span { color: green; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    <script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
+    <template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp: part-forwarded"></custom-element-inner></template>
+    The following text should be green:
+    <custom-element-outer id="c-e-outer"></custom-element-outer>
+    <script>
+      "use strict";
+      test(function() {
+        const part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
+        const before = window.getComputedStyle(part).color;
+        part.setAttribute("part", "new-partp");
+        const after = window.getComputedStyle(part).color;
+        assert_not_equals(before, after);
+      }, "Part in selected host changed color");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html
new file mode 100644
index 0000000000..2f9fffb86e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Invalidation Change Part Name IDL DOMTokenList</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e::part(partp) { color: red; }</style>
+    <style>#c-e::part(new-partp) { color: green; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: blue; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <div><custom-element id="c-e"></custom-element></div>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        el.part.remove("partp");
+        el.part.add("new-partp");
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in selected host changed color via part IDL DOMTokenList attribute.");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html
new file mode 100644
index 0000000000..0ed46f53bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Invalidation Change Part Name IDL Setter</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e::part(partp) { color: red; }</style>
+    <style>#c-e::part(new-partp) { color: green; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: blue; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <div><custom-element id="c-e"></custom-element></div>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        el.part = "new-partp"
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in selected host changed color via part IDL attribute setter.");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name.html b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name.html
new file mode 100644
index 0000000000..47630d956f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Invalidation Change Part Name</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e::part(partp) { color: red; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: green; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <div><custom-element id="c-e"></custom-element></div>
+    <script>
+      "use strict";
+      test(function() {
+        const part = getElementByShadowIds(document, ["c-e", "part"]);
+        const before = window.getComputedStyle(part).color;
+        part.setAttribute("part", "new-partp");
+        const after = window.getComputedStyle(part).color;
+        assert_not_equals(before, after);
+      }, "Part in selected host changed color");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector-forward.html b/testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector-forward.html
new file mode 100644
index 0000000000..7c732b9bdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector-forward.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Invalidation complex selector forward</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#elem #c-e-outer::part(part-forwarded) { color: red; }</style>
+    <script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
+    <template id="custom-element-inner-template">
+      <style>span { color: green; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    <script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
+    <template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp: part-forwarded"></custom-element-inner></template>
+    The following text should be green:
+    <div id="elem"><custom-element-outer id="c-e-outer"></custom-element-outer></div>
+    <script>
+      "use strict";
+      test(function() {
+        const part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
+        const before = window.getComputedStyle(part).color;
+        document.getElementById("elem").setAttribute("id", "new-elem");
+        const after = window.getComputedStyle(part).color;
+        assert_not_equals(before, after);
+      }, "Part in selected host changed color");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector.html b/testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector.html
new file mode 100644
index 0000000000..5b1fd80079
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Invalidation Complex Selector</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#elem #c-e::part(partp) { color: red; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: green; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <div id="elem"><custom-element id="c-e"></custom-element></div>
+    <script>
+      "use strict";
+      test(function() {
+        const part = getElementByShadowIds(document, ["c-e", "part"]);
+        const before = window.getComputedStyle(part).color;
+        document.getElementById("elem").setAttribute("id", "new-elem");
+        const after = window.getComputedStyle(part).color;
+        assert_not_equals(before, after);
+      }, "Part in selected host changed color");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html b/testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html
new file mode 100644
index 0000000000..fca4a964dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<title>CSS Shadow Parts - Pseudo class and exported parts</title>
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts" >
+<link rel="help" href="https://drafts.csswg.org/selectors/#matches">
+<link href="https://drafts.csswg.org/selectors/#matches" rel="help">
+<link rel="match" href="interaction-with-nested-pseudo-class-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+/* NOTE: Even though it might be tempting to use :focus instead, because we
+   can more easily add that state programmatically, that'd defeat the point
+   of the test, since :focus / :focus-visible has default styles which
+   invalidate the element's style anyways */
+#host::part(a):hover {
+  background: blue;
+}
+</style>
+<div id="host"></div>
+<script>
+let host = document.querySelector('#host')
+host.attachShadow({mode: 'open'}).innerHTML = `<div part="b" exportparts="a"></div>`;
+
+let innerHost = host.shadowRoot.querySelector('div');
+innerHost.attachShadow({mode: 'open'}).innerHTML = `
+  <style>
+    div {
+      width: 100px;
+      height: 100px;
+      background: black;
+      color: white;
+    }
+  </style>
+  <div part="a">hover, the background should be blue</div>
+`;
+
+let part = innerHost.shadowRoot.querySelector("div");
+let t = async_test("Invalidation of nested part on hover");
+part.addEventListener("mouseover", t.step_func_done(function() {
+  assert_true(part.matches(":hover"), "Element should be hovered");
+  assert_equals(getComputedStyle(part).backgroundColor, "rgb(0, 0, 255)", "Hover style should apply");
+}));
+
+new test_driver.Actions()
+    .pointerMove(0, 0)
+    .pointerMove(50, 50)
+    .send();
+</script>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/multiple-parts.html b/testing/web-platform/tests/css/css-shadow-parts/multiple-parts.html
new file mode 100644
index 0000000000..de02a26e16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/multiple-parts.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Multiple parts</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e::part(partp1 partp2) { color: green; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>
+        .red { color: red; }
+        .blue { color: blue; }
+      </style>
+      <span id="greenpart" class="red" part="partp1 partp2">green</span>
+      <span id="bluepart1" class="blue" part="partp1">blue</span>
+      <span id="bluepart2" class="blue" part="partp2">blue</span>
+    </template>
+    The following text should match its stated colour:
+    <custom-element id="c-e"></custom-element>
+    <script>
+      "use strict";
+      const colorBlue = "rgb(0, 0, 255)";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "greenpart"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Double-part in selected host is styled");
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "bluepart1"]);
+        assert_equals(window.getComputedStyle(el).color, colorBlue);
+      }, "Single-part-1 in selected host is not styled");
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "bluepart2"]);
+        assert_equals(window.getComputedStyle(el).color, colorBlue);
+      }, "Single-part-2 in selected host is not styled");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/part-mutation-pseudo.html b/testing/web-platform/tests/css/css-shadow-parts/part-mutation-pseudo.html
new file mode 100644
index 0000000000..d0e0072d51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/part-mutation-pseudo.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Shadow Parts - Invalidation Change Part Name on pseudo</title>
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/shadow-helper.js"></script>
+<style>#c-e::part(partp)::before { color: red; }</style>
+<script>installCustomElement("custom-element", "custom-element-template");</script>
+<template id="custom-element-template">
+  <style>span::before { content: ""; color: green; }</style>
+  <span id="part" part="partp">This text</span>
+</template>
+The following text should be green:
+<div><custom-element id="c-e"></custom-element></div>
+<script>
+  "use strict";
+  test(function() {
+    const part = getElementByShadowIds(document, ["c-e", "part"]);
+    const before = getComputedStyle(part, "::before").color;
+    part.setAttribute("part", "somethingelse");
+    const after = getComputedStyle(part, "::before").color;
+    assert_not_equals(before, after);
+  }, "Part in selected host changed color");
+</script>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/part-name-idl.html b/testing/web-platform/tests/css/css-shadow-parts/part-name-idl.html
new file mode 100644
index 0000000000..fc3282a6e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/part-name-idl.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Part Name IDL</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <span id="s_no_part"></span>
+    <span id="s_part" part="part1"></span>
+    <span id="s_2_parts" part="part1 part2"></span>
+    <script>
+      "use strict";
+      test(function() {
+        const parts = s_no_part.part;
+        assert_equals(parts.length, 0);
+        assert_equals(parts.value, "");
+      }, "Access to .part returns an empty DOMTokenList.");
+      test(function() {
+        const parts = s_2_parts.part;
+        assert_equals(parts.length, 2);
+        assert_equals(parts[0], "part1");
+        assert_equals(parts[1], "part2");
+        assert_equals(parts.value, "part1 part2");
+      }, "Multiple names give a DOMTokenList with multiple entries.");
+      test(function() {
+        const parts = s_no_part.part;
+        assert_equals(parts.length, 0);
+        assert_equals(parts.value, "");
+        parts.add("part1");
+        assert_equals(parts.length, 1);
+        assert_equals(parts.value, "part1");
+      }, "DOMTokenList created by access is persisted.");
+      test(function() {
+        const parts = s_part.part;
+        assert_equals(parts.length, 1);
+        assert_equals(parts.value, "part1");
+        parts.add("part2");
+        assert_equals(parts.length, 2);
+        assert_equals(parts.value, "part1 part2");
+        assert_equals(s_part.getAttribute("part"), parts.value);
+        parts.remove("part1");
+        assert_equals(parts.length, 1);
+        assert_equals(parts.value, "part2");
+        assert_equals(s_part.getAttribute("part"), parts.value);
+      }, "Changes in DOMTokenList are refected in attribute.");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo-ref.html b/testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo-ref.html
new file mode 100644
index 0000000000..8eee65a270
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+input {
+  border: 1px solid green;
+}
+</style>
+<input type=file part=input>
+<input type=text part=input placeholder=Foobar>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo.html b/testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo.html
new file mode 100644
index 0000000000..f1753de775
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<title>::part() doesn't incorrectly match pseudo-elements of the part</title>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=978105">
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
+<link rel="match" href="part-nested-pseudo-ref.html">
+<style>
+#host::part(input) {
+  border: 1px solid green;
+}
+</style>
+<div id="host"></div>
+<script>
+  document.getElementById("host").attachShadow({ mode: "open" }).innerHTML = `
+    <input type=file part=input>
+    <input type=text part=input placeholder=Foobar>
+  `;
+</script>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/precedence-part-vs-part.html b/testing/web-platform/tests/css/css-shadow-parts/precedence-part-vs-part.html
new file mode 100644
index 0000000000..9905cf8b5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/precedence-part-vs-part.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Precedence part vs part</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e-outer::part(part-forwarded) { color: green; }</style>
+    <script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
+    <template id="custom-element-inner-template">
+      <style>span { color: blue; }</style>
+      <span id="green_part" part="partp">This text</span>
+    </template>
+    <script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
+    <template id="custom-element-outer-template">
+      <style>#c-e-inner::part(partp) { color: red; }</style>
+      <custom-element-inner id="c-e-inner" exportparts="partp: part-forwarded"></custom-element-inner>
+    </template>
+    The following text should be green:
+    <custom-element-outer id="c-e-outer"></custom-element-outer>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "green_part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Style from document overrides style from outer CE");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/serialization.html b/testing/web-platform/tests/css/css-shadow-parts/serialization.html
new file mode 100644
index 0000000000..50ad3df53a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/serialization.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Serialization</title>
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <style id="styleElement">
+      ::part(\(foo) {}
+      ::part(   bar\    ) {}
+      ::part( -foo  bar    ) {}
+    </style>
+    <script>
+      "use strict";
+      const rules = styleElement.sheet.cssRules;
+      test(function() {
+        assert_equals(rules[0].selectorText, "::part(\\(foo)");
+      }, "Escape start parenthesis in ::part name.");
+      test(function() {
+        assert_equals(rules[1].selectorText, "::part(bar\\ )");
+      }, "Escape start space in ::part name.");
+      test(function() {
+        assert_equals(rules[2].selectorText, "::part(-foo bar)");
+      }, "Collapse spaces in ::part names list.");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/simple-forward-shorthand.html b/testing/web-platform/tests/css/css-shadow-parts/simple-forward-shorthand.html
new file mode 100644
index 0000000000..0142967dfd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/simple-forward-shorthand.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Simple forward shorthand</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e-outer::part(partp) { color: green; }</style>
+    <script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
+    <template id="custom-element-inner-template">
+      <style>span { color: red; }</style>
+      <span id="green_part" part="partp">This text</span>
+    </template>
+    <script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
+    <template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp"></custom-element-inner></template>
+    The following text should be green:
+    <custom-element-outer id="c-e-outer"></custom-element-outer>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "green_part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in inner host is forwarded, under the same name, for styling by document style sheet");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/simple-forward.html b/testing/web-platform/tests/css/css-shadow-parts/simple-forward.html
new file mode 100644
index 0000000000..a1a19aee4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/simple-forward.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Simple forward</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e-outer::part(part-forwarded) { color: green; }</style>
+    <script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
+    <template id="custom-element-inner-template">
+      <style>span { color: red; }</style>
+      <span id="green_part" part="partp">This text</span>
+    </template>
+    <script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
+    <template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp: part-forwarded"></custom-element-inner></template>
+    The following text should be green:
+    <custom-element-outer id="c-e-outer"></custom-element-outer>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "green_part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in inner host is forwarded for styling by document style sheet");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/simple-important-important.html b/testing/web-platform/tests/css/css-shadow-parts/simple-important-important.html
new file mode 100644
index 0000000000..43ec1bbae3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/simple-important-important.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Simple Important Important</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e::part(partp) { color: green !important; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: red !important; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <custom-element id="c-e"></custom-element>
+    <script>
+      "use strict";
+      const colorRed = "rgb(255, 0, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorRed);
+      }, "Part in selected host is styled");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/simple-important-inline.html b/testing/web-platform/tests/css/css-shadow-parts/simple-important-inline.html
new file mode 100644
index 0000000000..61b83dd4be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/simple-important-inline.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Simple Important Inline</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e::part(partp) { color: red; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <span id="part" part="partp" style="color: green !important">This text</span>
+    </template>
+    The following text should be red:
+    <custom-element id="c-e"></custom-element>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in selected host is not styled");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/simple-important.html b/testing/web-platform/tests/css/css-shadow-parts/simple-important.html
new file mode 100644
index 0000000000..e3240bd390
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/simple-important.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Simple Important</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e::part(partp) { color: red; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: green !important; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <custom-element id="c-e"></custom-element>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in selected host is styled");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/simple-inline.html b/testing/web-platform/tests/css/css-shadow-parts/simple-inline.html
new file mode 100644
index 0000000000..f2c3638d1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/simple-inline.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Simple Inline</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e::part(partp) { color: green; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <span id="part" part="partp" style="color: red">This text</span>
+    </template>
+    The following text should be green:
+    <custom-element id="c-e"></custom-element>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in selected host is styled");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/simple.html b/testing/web-platform/tests/css/css-shadow-parts/simple.html
new file mode 100644
index 0000000000..a7f17d9670
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/simple.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Shadow Parts - Simple</title>
+    <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+    <link href="http://www.google.com/" rel="author" title="Google">
+    <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="support/shadow-helper.js"></script>
+  </head>
+  <body>
+    <style>#c-e::part(partp) { color: green; }</style>
+    <script>installCustomElement("custom-element", "custom-element-template");</script>
+    <template id="custom-element-template">
+      <style>span { color: red; }</style>
+      <span id="part" part="partp">This text</span>
+    </template>
+    The following text should be green:
+    <custom-element id="c-e"></custom-element>
+    <script>
+      "use strict";
+      const colorGreen = "rgb(0, 128, 0)";
+      test(function() {
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
+        assert_equals(window.getComputedStyle(el).color, colorGreen);
+      }, "Part in selected host is styled");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/style-sharing.html b/testing/web-platform/tests/css/css-shadow-parts/style-sharing.html
new file mode 100644
index 0000000000..4af1260b5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/style-sharing.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>CSS Shadow Parts test: Parts don't incorrectly share style with other elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org/" title="Mozilla">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>::part(part1) { color: green; }</style>
+<div id="host"></div>
+<script>
+"use strict";
+test(function() {
+  host.attachShadow({ mode: "open" }).innerHTML = `
+    <div></div>
+    <div part="part1"></div>
+  `;
+  assert_equals(
+    getComputedStyle(host.shadowRoot.querySelector("[part]")).color,
+    "rgb(0, 128, 0)",
+    "Part should be green",
+  );
+}, "Part in selected host does not incorrectly share style with non-part");
+</script>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/support/shadow-helper.js b/testing/web-platform/tests/css/css-shadow-parts/support/shadow-helper.js
new file mode 100644
index 0000000000..94accd6b1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/support/shadow-helper.js
@@ -0,0 +1,33 @@
+// Takes a root element and a list of ids of shadow host elements. Each id refers to a shadow host
+// inside the previous id's shadow tree.
+function getElementByShadowIds(root, ids) {
+  for (var i = 0; ;i++) {
+    var host = root.getElementById(ids[i]);
+    if (host == null) {
+      throw "No element found: i=" + i + " id=" + ids[i] + ". Root was " + root;
+    }
+    if (i == ids.length - 1) {
+      return host;
+    }
+    root = host.shadowRoot;
+    if (root == null) {
+      throw "No shadowRoot found: i=" + i + " id=" + ids[i] + ". Host was " + host;
+    }
+  }
+}
+
+// Installs a mininal custom element based on this template.
+function installCustomElement(element_name, template_id) {
+  ceClass = class extends HTMLElement {
+    constructor() {
+      super();
+      var template = document
+        .getElementById(template_id)
+        .content;
+      this
+        .attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+    }
+  };
+  window.customElements.define(element_name, ceClass);
+}
-- 
cgit v1.2.3