summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-shadow-parts
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-shadow-parts
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-shadow-parts')
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/META.yml3
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/all-hosts.html36
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/both-part-and-exportparts.html32
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/chaining-invalid-selector.html41
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/complex-matching.html30
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/complex-non-matching.html30
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/different-host.html30
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/double-forward.html34
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/exportparts-multiple.html76
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/host-part-001.html43
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/host-stylesheet.html32
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/idlharness.html21
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/inner-host.html42
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class-ref.html2
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/interaction-with-nested-pseudo-class.html23
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder-ref.html18
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/interaction-with-placeholder.html29
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/interaction-with-pseudo-elements.html86
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html34
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-forward.html34
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html33
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html32
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name.html32
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector-forward.html34
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/invalidation-complex-selector.html32
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html50
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/multiple-parts.html44
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/part-name-idl.html53
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/part-nested-pseudo.html17
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/precedence-part-vs-part.html35
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/serialization.html29
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/simple-forward-shorthand.html32
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/simple-forward.html32
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/simple-important-important.html30
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/simple-important-inline.html29
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/simple-important.html30
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/simple-inline.html29
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/simple.html30
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/style-sharing.html23
-rw-r--r--testing/web-platform/tests/css/css-shadow-parts/support/shadow-helper.js33
41 files changed, 1344 insertions, 0 deletions
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-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);
+}