Import WPT tests for CSS Shadow Parts
authorantti@apple.com <antti@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 1 Oct 2019 15:24:59 +0000 (15:24 +0000)
committerantti@apple.com <antti@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 1 Oct 2019 15:24:59 +0000 (15:24 +0000)
https://bugs.webkit.org/show_bug.cgi?id=202393

Reviewed by Antoine Quint.

LayoutTests/imported/w3c:

From https://github.com/web-platform-tests/wpt/tree/master/css/css-shadow-parts

* resources/import-expectations.json:
* web-platform-tests/css/css-shadow-parts/META.yml: Added.
* web-platform-tests/css/css-shadow-parts/all-hosts-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/all-hosts.html: Added.
* web-platform-tests/css/css-shadow-parts/chaining-invalid-selector-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/chaining-invalid-selector.html: Added.
* web-platform-tests/css/css-shadow-parts/complex-matching-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/complex-matching.html: Added.
* web-platform-tests/css/css-shadow-parts/complex-non-matching-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/complex-non-matching.html: Added.
* web-platform-tests/css/css-shadow-parts/different-host-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/different-host.html: Added.
* web-platform-tests/css/css-shadow-parts/double-forward-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/double-forward.html: Added.
* web-platform-tests/css/css-shadow-parts/host-stylesheet-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/host-stylesheet.html: Added.
* web-platform-tests/css/css-shadow-parts/inner-host-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/inner-host.html: Added.
* web-platform-tests/css/css-shadow-parts/interaction-with-placeholder-expected.html: Added.
* web-platform-tests/css/css-shadow-parts/interaction-with-placeholder.html: Added.
* web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements.html: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward.html: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-change-part-name.html: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward.html: Added.
* web-platform-tests/css/css-shadow-parts/invalidation-complex-selector.html: Added.
* web-platform-tests/css/css-shadow-parts/multiple-parts-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/multiple-parts.html: Added.
* web-platform-tests/css/css-shadow-parts/part-name-idl-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/part-name-idl.html: Added.
* web-platform-tests/css/css-shadow-parts/precedence-part-vs-part-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/precedence-part-vs-part.html: Added.
* web-platform-tests/css/css-shadow-parts/simple-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/simple-forward-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/simple-forward-shorthand-expected.txt: Added.
* web-platform-tests/css/css-shadow-parts/simple-forward-shorthand.html: Added.
* web-platform-tests/css/css-shadow-parts/simple-forward.html: Added.
* web-platform-tests/css/css-shadow-parts/simple.html: Added.
* web-platform-tests/css/css-shadow-parts/support/shadow-helper.js: Added.
(getElementByShadowIds):
(ceClass.):
(installCustomElement):
* web-platform-tests/css/css-shadow-parts/support/w3c-import.log: Added.
* web-platform-tests/css/css-shadow-parts/w3c-import.log: Added.

LayoutTests:

* TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@250555 268f45cc-cd09-0410-ab3c-d52691b4dbfc

54 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/resources/import-expectations.json
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/META.yml [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/all-hosts-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/all-hosts.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/chaining-invalid-selector-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/chaining-invalid-selector.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-matching-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-matching.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-non-matching-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-non-matching.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/different-host-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/different-host.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/double-forward-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/double-forward.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/host-stylesheet-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/host-stylesheet.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/inner-host-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/inner-host.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-placeholder-expected.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-placeholder.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/multiple-parts-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/multiple-parts.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/part-name-idl-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/part-name-idl.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/precedence-part-vs-part-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/precedence-part-vs-part.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-shorthand-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-shorthand.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/support/shadow-helper.js [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/support/w3c-import.log [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/w3c-import.log [new file with mode: 0644]

index 311f2b9..aaefb7b 100644 (file)
@@ -1,3 +1,12 @@
+2019-10-01  Antti Koivisto  <antti@apple.com>
+
+        Import WPT tests for CSS Shadow Parts
+        https://bugs.webkit.org/show_bug.cgi?id=202393
+
+        Reviewed by Antoine Quint.
+
+        * TestExpectations:
+
 2019-10-01  Joonghun Park  <jh718.park@samsung.com>
 
         Make table's clientWidth/Height include its border sizes.
index 2401e84..b7f89aa 100644 (file)
@@ -3824,3 +3824,6 @@ fast/text/design-system-ui-16.html [ ImageOnlyFailure ]
 
 webkit.org/b/196698 imported/w3c/web-platform-tests/loading/lazyload/image-loading-lazy.tentative.html
 webkit.org/b/196698 imported/w3c/web-platform-tests/loading/lazyload/iframe-loading-lazy.tentative.html
+
+# CSS Shadow Parts
+webkit.org/b/149443 imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-placeholder.html [ ImageOnlyFailure ]
index 5094fc1..408e6ec 100644 (file)
@@ -1,3 +1,67 @@
+2019-10-01  Antti Koivisto  <antti@apple.com>
+
+        Import WPT tests for CSS Shadow Parts
+        https://bugs.webkit.org/show_bug.cgi?id=202393
+
+        Reviewed by Antoine Quint.
+
+        From https://github.com/web-platform-tests/wpt/tree/master/css/css-shadow-parts
+
+        * resources/import-expectations.json:
+        * web-platform-tests/css/css-shadow-parts/META.yml: Added.
+        * web-platform-tests/css/css-shadow-parts/all-hosts-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/all-hosts.html: Added.
+        * web-platform-tests/css/css-shadow-parts/chaining-invalid-selector-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/chaining-invalid-selector.html: Added.
+        * web-platform-tests/css/css-shadow-parts/complex-matching-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/complex-matching.html: Added.
+        * web-platform-tests/css/css-shadow-parts/complex-non-matching-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/complex-non-matching.html: Added.
+        * web-platform-tests/css/css-shadow-parts/different-host-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/different-host.html: Added.
+        * web-platform-tests/css/css-shadow-parts/double-forward-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/double-forward.html: Added.
+        * web-platform-tests/css/css-shadow-parts/host-stylesheet-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/host-stylesheet.html: Added.
+        * web-platform-tests/css/css-shadow-parts/inner-host-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/inner-host.html: Added.
+        * web-platform-tests/css/css-shadow-parts/interaction-with-placeholder-expected.html: Added.
+        * web-platform-tests/css/css-shadow-parts/interaction-with-placeholder.html: Added.
+        * web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements.html: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward.html: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-change-part-name.html: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward.html: Added.
+        * web-platform-tests/css/css-shadow-parts/invalidation-complex-selector.html: Added.
+        * web-platform-tests/css/css-shadow-parts/multiple-parts-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/multiple-parts.html: Added.
+        * web-platform-tests/css/css-shadow-parts/part-name-idl-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/part-name-idl.html: Added.
+        * web-platform-tests/css/css-shadow-parts/precedence-part-vs-part-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/precedence-part-vs-part.html: Added.
+        * web-platform-tests/css/css-shadow-parts/simple-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/simple-forward-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/simple-forward-shorthand-expected.txt: Added.
+        * web-platform-tests/css/css-shadow-parts/simple-forward-shorthand.html: Added.
+        * web-platform-tests/css/css-shadow-parts/simple-forward.html: Added.
+        * web-platform-tests/css/css-shadow-parts/simple.html: Added.
+        * web-platform-tests/css/css-shadow-parts/support/shadow-helper.js: Added.
+        (getElementByShadowIds):
+        (ceClass.):
+        (installCustomElement):
+        * web-platform-tests/css/css-shadow-parts/support/w3c-import.log: Added.
+        * web-platform-tests/css/css-shadow-parts/w3c-import.log: Added.
+
 2019-10-01  Joonghun Park  <jh718.park@samsung.com>
 
         Make table's clientWidth/Height include its border sizes.
index 5da3356..c88d54e 100644 (file)
@@ -77,6 +77,7 @@
     "web-platform-tests/css/css-properties-values-api": "import", 
     "web-platform-tests/css/css-pseudo": "import", 
     "web-platform-tests/css/css-scoping": "import", 
+    "web-platform-tests/css/css-shadow-parts": "import", 
     "web-platform-tests/css/css-shapes": "import", 
     "web-platform-tests/css/css-shapes/test-plan/index.html": "skip", 
     "web-platform-tests/css/css-text": "import", 
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/META.yml b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/META.yml
new file mode 100644 (file)
index 0000000..6cce426
--- /dev/null
@@ -0,0 +1,3 @@
+spec: https://drafts.csswg.org/css-shadow-parts/
+suggested_reviewers:
+  - tabatkins
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/all-hosts-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/all-hosts-expected.txt
new file mode 100644 (file)
index 0000000..cb85e79
--- /dev/null
@@ -0,0 +1,5 @@
+The following text should be green: The following text should be green: 
+
+FAIL ::part with host selector styles in first host assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL ::part with host selector styles in second host assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/all-hosts.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/all-hosts.html
new file mode 100644 (file)
index 0000000..218535d
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/chaining-invalid-selector-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/chaining-invalid-selector-expected.txt
new file mode 100644 (file)
index 0000000..c3a3964
--- /dev/null
@@ -0,0 +1,5 @@
+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.
+
+PASS ::part cannot be chained to reach elements in the inner host 
+PASS Chained ::part selectors are dropped 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/chaining-invalid-selector.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/chaining-invalid-selector.html
new file mode 100644 (file)
index 0000000..cb34a7b
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-matching-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-matching-expected.txt
new file mode 100644 (file)
index 0000000..901947c
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green:
+
+FAIL Complex selector for host works assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-matching.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-matching.html
new file mode 100644 (file)
index 0000000..f8f063d
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-non-matching-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-non-matching-expected.txt
new file mode 100644 (file)
index 0000000..b585ec1
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green:
+
+PASS Non-matching complex selector for host does not style 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-non-matching.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-non-matching.html
new file mode 100644 (file)
index 0000000..6e5bc69
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/different-host-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/different-host-expected.txt
new file mode 100644 (file)
index 0000000..dcb26a5
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green: 
+
+PASS Part is not styled when host is not selected 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/different-host.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/different-host.html
new file mode 100644 (file)
index 0000000..7fe9744
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/double-forward-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/double-forward-expected.txt
new file mode 100644 (file)
index 0000000..f3692c0
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green: 
+
+FAIL Part in inner host is forwarded through the middle host for styling by document style sheet assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/double-forward.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/double-forward.html
new file mode 100644 (file)
index 0000000..d23ec77
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/host-stylesheet-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/host-stylesheet-expected.txt
new file mode 100644 (file)
index 0000000..72f5d07
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green: 
+
+PASS Part in selected host is not styled by ::part in a stylesheet inside the host 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/host-stylesheet.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/host-stylesheet.html
new file mode 100644 (file)
index 0000000..2e65c4b
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/inner-host-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/inner-host-expected.txt
new file mode 100644 (file)
index 0000000..0fd2da4
--- /dev/null
@@ -0,0 +1,5 @@
+The following text should be green: 
+
+FAIL Part in outer host is styled by document style sheet assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+PASS Part in inner host is not styled by document style sheet 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/inner-host.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/inner-host.html
new file mode 100644 (file)
index 0000000..2dfd4b0
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-placeholder-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-placeholder-expected.html
new file mode 100644 (file)
index 0000000..11943c2
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-placeholder.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-placeholder.html
new file mode 100644 (file)
index 0000000..a064789
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements-expected.txt
new file mode 100644 (file)
index 0000000..c379999
--- /dev/null
@@ -0,0 +1,8 @@
+
+FAIL ::before in selected host is styled assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL ::after in selected host is styled assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL ::placeholder in selected host is styled assert_equals: expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL ::selection in selected host is styled assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL ::first-line in selected host is styled assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL ::first-letter in selected host is styled assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements.html
new file mode 100644 (file)
index 0000000..776ab2e
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward-expected.txt
new file mode 100644 (file)
index 0000000..2284f2b
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green: 
+
+FAIL Part in selected host changed color assert_not_equals: got disallowed value "rgb(0, 128, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html
new file mode 100644 (file)
index 0000000..1e319de
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-expected.txt
new file mode 100644 (file)
index 0000000..2a64d71
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green:
+
+FAIL Part in selected host changed color assert_not_equals: got disallowed value "rgb(0, 128, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward-expected.txt
new file mode 100644 (file)
index 0000000..2284f2b
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green: 
+
+FAIL Part in selected host changed color assert_not_equals: got disallowed value "rgb(0, 128, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward.html
new file mode 100644 (file)
index 0000000..f8da6d1
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist-expected.txt
new file mode 100644 (file)
index 0000000..65a0721
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green:
+
+FAIL Part in selected host changed color via part IDL DOMTokenList attribute. undefined is not an object (evaluating 'el.part.remove')
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html
new file mode 100644 (file)
index 0000000..2f9fffb
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter-expected.txt
new file mode 100644 (file)
index 0000000..ab5a080
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green:
+
+FAIL Part in selected host changed color via part IDL attribute setter. assert_equals: expected "rgb(0, 128, 0)" but got "rgb(0, 0, 255)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html
new file mode 100644 (file)
index 0000000..0ed46f5
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name.html
new file mode 100644 (file)
index 0000000..47630d9
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-expected.txt
new file mode 100644 (file)
index 0000000..2a64d71
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green:
+
+FAIL Part in selected host changed color assert_not_equals: got disallowed value "rgb(0, 128, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward-expected.txt
new file mode 100644 (file)
index 0000000..2a64d71
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green:
+
+FAIL Part in selected host changed color assert_not_equals: got disallowed value "rgb(0, 128, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward.html
new file mode 100644 (file)
index 0000000..7c732b9
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector.html
new file mode 100644 (file)
index 0000000..5b1fd80
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/multiple-parts-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/multiple-parts-expected.txt
new file mode 100644 (file)
index 0000000..ac1629c
--- /dev/null
@@ -0,0 +1,6 @@
+The following text should match its stated colour: 
+
+FAIL Double-part in selected host is styled assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+PASS Single-part-1 in selected host is not styled 
+PASS Single-part-2 in selected host is not styled 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/multiple-parts.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/multiple-parts.html
new file mode 100644 (file)
index 0000000..de02a26
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/part-name-idl-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/part-name-idl-expected.txt
new file mode 100644 (file)
index 0000000..fab896b
--- /dev/null
@@ -0,0 +1,6 @@
+
+FAIL Access to .part returns an empty DOMTokenList. undefined is not an object (evaluating 'parts.length')
+FAIL Multiple names give a DOMTokenList with multiple entries. undefined is not an object (evaluating 'parts.length')
+FAIL DOMTokenList created by access is persisted. undefined is not an object (evaluating 'parts.length')
+FAIL Changes in DOMTokenList are refected in attribute. undefined is not an object (evaluating 'parts.length')
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/part-name-idl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/part-name-idl.html
new file mode 100644 (file)
index 0000000..fc3282a
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/precedence-part-vs-part-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/precedence-part-vs-part-expected.txt
new file mode 100644 (file)
index 0000000..7eeeb44
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green: 
+
+FAIL Style from document overrides style from outer CE assert_equals: expected "rgb(0, 128, 0)" but got "rgb(0, 0, 255)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/precedence-part-vs-part.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/precedence-part-vs-part.html
new file mode 100644 (file)
index 0000000..9905cf8
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-expected.txt
new file mode 100644 (file)
index 0000000..f9704a7
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green: 
+
+FAIL Part in selected host is styled assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-expected.txt
new file mode 100644 (file)
index 0000000..31f09a6
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green: 
+
+FAIL Part in inner host is forwarded for styling by document style sheet assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-shorthand-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-shorthand-expected.txt
new file mode 100644 (file)
index 0000000..bf30427
--- /dev/null
@@ -0,0 +1,4 @@
+The following text should be green: 
+
+FAIL Part in inner host is forwarded, under the same name, for styling by document style sheet assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-shorthand.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-shorthand.html
new file mode 100644 (file)
index 0000000..0142967
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward.html
new file mode 100644 (file)
index 0000000..a1a19ae
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple.html
new file mode 100644 (file)
index 0000000..a7f17d9
--- /dev/null
@@ -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/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/support/shadow-helper.js b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/support/shadow-helper.js
new file mode 100644 (file)
index 0000000..94accd6
--- /dev/null
@@ -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);
+}
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/support/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/support/w3c-import.log
new file mode 100644 (file)
index 0000000..653338f
--- /dev/null
@@ -0,0 +1,17 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+       https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/support/shadow-helper.js
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/w3c-import.log
new file mode 100644 (file)
index 0000000..e49e915
--- /dev/null
@@ -0,0 +1,41 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+       https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/META.yml
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/all-hosts.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/chaining-invalid-selector.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-matching.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/complex-non-matching.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/different-host.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/double-forward.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/host-stylesheet.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/inner-host.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-placeholder-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-placeholder.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/interaction-with-pseudo-elements.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-exportparts-forward.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-forward.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector-forward.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/multiple-parts.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/part-name-idl.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/precedence-part-vs-part.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward-shorthand.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple-forward.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-shadow-parts/simple.html