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