Remove declarative shadow DOM polyfill

Declarative shadow DOM is standard [1] and implemented in all modern browsers. This removes a polyfill that isn't needed in WPT any longer. [1] https://html.spec.whatwg.org/multipage/scripting.html#attr-template-shadowrootmode Bug: N/A Change-Id: Ie9bfdf24f75901cf9a476844a76065e5a18a6815 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5263643 Auto-Submit: Mason Freed <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Commit-Queue: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1257013}
web-platform-tests · Feb 6, 2024 · 5eb84ee · 5eb84ee
1 parent 803ab2a
commit 5eb84ee
Show file tree

Hide file tree

Showing 28 changed files with 2 additions and 102 deletions.
diff --git a/css/css-anchor-position/at-position-fallback-invalidation-shadow-dom.html b/css/css-anchor-position/at-position-fallback-invalidation-shadow-dom.html
@@ -3,7 +3,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <style>
   body { margin: 0; }
 </style>
@@ -22,10 +21,6 @@
 </div>
 
 <script>
-  setup(() => {
-    polyfill_declarative_shadow_dom(host);
-  });
-
   test(() => {
     assert_equals(host.offsetLeft, 0);
   }, "#host is initially left:auto");

diff --git a/css/css-anchor-position/position-fallback-tree-scoped.html b/css/css-anchor-position/position-fallback-tree-scoped.html
@@ -4,7 +4,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 
 <style>
   body { margin: 0; }
@@ -101,11 +100,6 @@
 
 
 <script>
-  setup(() => {
-    polyfill_declarative_shadow_dom(outer_host);
-    polyfill_declarative_shadow_dom(host_slotted_part);
-  });
-
   test(() => {
     assert_equals(doc_pf_doc.offsetLeft, 100);
   }, "Document position-fallback matches @position-fallback in document scope");

diff --git a/css/css-cascade/scope-shadow.tentative.html b/css/css-cascade/scope-shadow.tentative.html
@@ -4,7 +4,6 @@
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9025">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 
 <div id=host_plain>
   <template shadowrootmode=open>
@@ -21,7 +20,6 @@
 </div>
 <script>
   test(() => {
-    polyfill_declarative_shadow_dom(host_plain);
     let a = host_plain.shadowRoot.querySelector('.a');
     assert_equals(getComputedStyle(a).zIndex, '1');
   }, '@scope can match :host');
@@ -48,7 +46,6 @@
 </div>
 <script>
   test(() => {
-    polyfill_declarative_shadow_dom(host_functional);
     let a = host_functional.shadowRoot.querySelector('.a');
     assert_equals(getComputedStyle(a).zIndex, '1');
   }, '@scope can match :host(...)');
@@ -69,7 +66,6 @@
 </div>
 <script>
   test(() => {
-    polyfill_declarative_shadow_dom(host_scope_subject);
     assert_equals(getComputedStyle(host_scope_subject).zIndex, '1');
   }, ':scope matches host via the scoping root');
 </script>
@@ -98,7 +94,6 @@
 </div>
 <script>
   test(() => {
-    polyfill_declarative_shadow_dom(host_scope_subject_is);
     let host = host_scope_subject_is.querySelector('.host');
     assert_equals(getComputedStyle(host).zIndex, '1');
     let a = host.shadowRoot.querySelector('.a');
@@ -131,7 +126,6 @@
 </div>
 <script>
   test(() => {
-    polyfill_declarative_shadow_dom(implicit_scope_shadow_parent);
     let host = implicit_scope_shadow_parent.querySelector('.host');
     let a = host.shadowRoot.querySelector('.a');
     assert_equals(getComputedStyle(host).zIndex, '1');
@@ -150,7 +144,6 @@
 </div>
 <script>
   test(() => {
-    polyfill_declarative_shadow_dom(implicit_scope_constructed);
     let host = implicit_scope_constructed.querySelector('.host');
     let sheet = new CSSStyleSheet();
     sheet.replaceSync(`

diff --git a/css/css-cascade/scope-visited.html b/css/css-cascade/scope-visited.html
@@ -3,7 +3,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#link">
 <link rel="match" href="scope-visited-ref.html">
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 
 <!-- Sub-tests use ShadowDOM to stay isolated from eachother. -->
 
@@ -205,8 +204,6 @@
 
 <script>
   window.onload = () => {
-    polyfill_declarative_shadow_dom(document);
-
     // Insert the inner :visited link with JS, since the parser
     // can't produce this.
     let outer_a = visited_in_visited.shadowRoot.querySelector('main > a');
@@ -215,4 +212,4 @@
     inner_a.textContent = 'Visited2';
     outer_a.append(inner_a);
   }
-</script>
+</script>
diff --git a/css/css-contain/container-queries/container-for-shadow-dom.html b/css/css-contain/container-queries/container-for-shadow-dom.html
@@ -4,7 +4,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <script src="support/cq-testcommon.js"></script>
 <style>
   #inclusive-ancestor-across-root,
@@ -275,7 +274,6 @@
 <script>
   setup(() => {
     assert_implements_container_queries();
-    polyfill_declarative_shadow_dom(document);
   });
 
   const green = "rgb(0, 128, 0)";

diff --git a/css/css-contain/container-queries/container-name-tree-scoped.html b/css/css-contain/container-queries/container-name-tree-scoped.html
@@ -5,7 +5,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <script src="support/cq-testcommon.js"></script>
 
 <div id="container-name-host">
@@ -90,7 +89,6 @@
 <script>
   setup(() => {
     assert_implements_container_queries();
-    polyfill_declarative_shadow_dom(document);
   });
 
   const green = "rgb(0, 128, 0)";

diff --git a/css/css-contain/container-queries/container-size-shadow-invalidation.html b/css/css-contain/container-queries/container-size-shadow-invalidation.html
@@ -4,7 +4,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <script src="support/cq-testcommon.js"></script>
 <style>
   .container {
@@ -36,7 +35,6 @@
 <script>
   setup(() => {
     assert_implements_container_queries();
-    polyfill_declarative_shadow_dom(document);
   });
 
   const green = "rgb(0, 128, 0)";

diff --git a/css/css-contain/container-queries/container-units-shadow.html b/css/css-contain/container-queries/container-units-shadow.html
@@ -4,7 +4,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <script src="support/cq-testcommon.js"></script>
 <style>
   #outer {
@@ -48,7 +47,6 @@
 <script>
   setup(() => {
     assert_implements_container_queries();
-    polyfill_declarative_shadow_dom(document);
   });
 
   test(() => {

diff --git a/css/css-contain/container-queries/style-container-for-shadow-dom.html b/css/css-contain/container-queries/style-container-for-shadow-dom.html
@@ -4,7 +4,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <script src="support/cq-testcommon.js"></script>
 
 <div id="inclusive-ancestor-across-root">
@@ -195,7 +194,6 @@
 <script>
   setup(() => {
     assert_implements_container_queries();
-    polyfill_declarative_shadow_dom(document);
   });
 
   const green = "rgb(0, 128, 0)";

diff --git a/css/css-position/backdrop-tree-abiding-slotted.html b/css/css-position/backdrop-tree-abiding-slotted.html
@@ -6,7 +6,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <div>
   <template shadowrootmode="open">
     <style>

diff --git a/css/selectors/invalidation/nth-child-in-shadow-root.html b/css/selectors/invalidation/nth-child-in-shadow-root.html
@@ -4,7 +4,6 @@
 <link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1480746">
 <link rel="author" title="Zach Hoffman" href="mailto:[email protected]">
 <link rel="match" href="nth-child-in-shadow-root-ref.html">
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <div id="host">
     <template shadowrootmode="open">
         <div id="firstChild">Should be red</div>
@@ -19,7 +18,6 @@
     </template>
 </div>
 <script>
-polyfill_declarative_shadow_dom(host);
 host.offsetTop;
 let div = document.createElement("div");
 div.appendChild(document.createTextNode("Should be green"));

diff --git a/css/selectors/invalidation/nth-child-of-in-shadow-root.html b/css/selectors/invalidation/nth-child-of-in-shadow-root.html
@@ -3,7 +3,6 @@
 <link rel="author" title="Steinar H. Gunderson" href="[email protected]">
 <link rel="match" href="nth-child-of-in-shadow-root-ref.html">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <div id="host">
   <template shadowrootmode="open">
     <style>
@@ -17,7 +16,6 @@
   </template>
 </div>
 <script>
-  polyfill_declarative_shadow_dom(host);
   host.offsetTop;
   host.shadowRoot.getElementById('toggler').classList.toggle('foo');
 </script>
diff --git a/css/selectors/invalidation/nth-last-child-in-shadow-root.html b/css/selectors/invalidation/nth-last-child-in-shadow-root.html
@@ -4,7 +4,6 @@
 <link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1480746">
 <link rel="author" title="Zach Hoffman" href="mailto:[email protected]">
 <link rel="match" href="nth-last-child-in-shadow-root-ref.html">
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <div id="host">
     <template shadowrootmode="open">
         <div id="firstChild">Should be red</div>
@@ -19,7 +18,6 @@
     </template>
 </div>
 <script>
-polyfill_declarative_shadow_dom(host);
 host.offsetTop;
 let div = document.createElement("div");
 div.appendChild(document.createTextNode("Should be green"));

diff --git a/css/selectors/invalidation/nth-last-child-of-in-shadow-root.html b/css/selectors/invalidation/nth-last-child-of-in-shadow-root.html
@@ -5,7 +5,6 @@
 <link rel="author" title="Steinar H. Gunderson" href="mailto:[email protected]">
 <link rel="match" href="nth-last-child-of-in-shadow-root-ref.html">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <div id="host">
   <template shadowrootmode="open">
     <style>
@@ -19,7 +18,6 @@
   </template>
 </div>
 <script>
-  polyfill_declarative_shadow_dom(host);
   host.offsetTop;
   host.shadowRoot.getElementById("toggler").classList.toggle("foo");
 </script>
diff --git a/css/selectors/invalidation/part-pseudo.html b/css/selectors/invalidation/part-pseudo.html
@@ -6,8 +6,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
   <link rel="match" href="part-pseudo-ref.html">
   <style id="sheet">#host::part(green) { color: red; }</style>
-  <script src="/resources/declarative-shadow-dom-polyfill.js"></script>
-</head>
+  </head>
 <body>
   <div id="host">
     <template shadowrootmode="open">

diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-focus-previous-outside.html b/html/semantics/interactive-elements/the-dialog-element/dialog-focus-previous-outside.html
@@ -3,7 +3,6 @@
 <link rel=help href="https://github.com/whatwg/html/issues/8904">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 
 <button id=b1>button 1</button>
 <button id=b2>button 2</button>
@@ -33,8 +32,6 @@
 <dialog id=mydialog2>hello world</dialog>
 
 <script>
-polyfill_declarative_shadow_dom(document);
-
 test(() => {
   b1.focus();
   mydialog.show();

diff --git a/html/semantics/popovers/popover-light-dismiss-flat-tree-nested.html b/html/semantics/popovers/popover-light-dismiss-flat-tree-nested.html
@@ -27,11 +27,9 @@
     <script src="/resources/testdriver.js"></script>
     <script src="/resources/testdriver-actions.js"></script>
     <script src="/resources/testdriver-vendor.js"></script>
-    <script src="/resources/declarative-shadow-dom-polyfill.js"></script>
     <script src="resources/popover-utils.js"></script>
     <script>
         promise_test(async () => {
-            polyfill_declarative_shadow_dom(outerPopover);
             const innerPopoverToggle = outerPopover.shadowRoot.querySelector("#innerPopoverToggle");
             const innerContainer = outerPopover.shadowRoot.querySelector('#innerContainer');
             const innerPopover = innerContainer.shadowRoot.querySelector("#innerPopover");

diff --git a/html/semantics/popovers/popover-light-dismiss-flat-tree.html b/html/semantics/popovers/popover-light-dismiss-flat-tree.html
@@ -22,11 +22,9 @@
     <script src="/resources/testdriver.js"></script>
     <script src="/resources/testdriver-actions.js"></script>
     <script src="/resources/testdriver-vendor.js"></script>
-    <script src="/resources/declarative-shadow-dom-polyfill.js"></script>
     <script src="resources/popover-utils.js"></script>
     <script>
         promise_test(async () => {
-            polyfill_declarative_shadow_dom(outerPopover);
             const innerPopoverToggle = outerPopover.shadowRoot.querySelector("#innerPopoverToggle");
             const innerPopover = outerPopover.shadowRoot.querySelector("#innerPopover");
 

diff --git a/html/semantics/popovers/popover-light-dismiss.html b/html/semantics/popovers/popover-light-dismiss.html
@@ -9,7 +9,6 @@
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <script src="resources/popover-utils.js"></script>
 
 <button id=b1t popovertarget='p1'>Popover 1</button>
@@ -333,7 +332,6 @@
   </template>
 </my-element>
 <script>
-  polyfill_declarative_shadow_dom(document.querySelector('#myElement'));
   const button7 = document.querySelector('#myElement').shadowRoot.querySelector('#b7');
   const popover7 = document.querySelector('#myElement').shadowRoot.querySelector('#p7');
   const inside7 = document.querySelector('#myElement').shadowRoot.querySelector('#inside7');

diff --git a/html/semantics/popovers/popover-shadow-dom.html b/html/semantics/popovers/popover-shadow-dom.html
@@ -5,7 +5,6 @@
 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <script src="resources/popover-utils.js"></script>
 
 <script>
@@ -184,7 +183,6 @@
 </div>
 <script>
   promise_test(async function() {
-    polyfill_declarative_shadow_dom(test5);
     const [popover1,popover2] = getPopoverReferences('test5');
     popover1.showPopover();
     popover1.querySelector('button').click(); // Use invoker to keep 2 visible

diff --git a/html/semantics/popovers/popover-shadowhost-focus.html b/html/semantics/popovers/popover-shadowhost-focus.html
@@ -3,7 +3,6 @@
 <link rel=help href="https://github.com/whatwg/html/issues/8994">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 
 <div popover=auto tabindex=0 data-test="autofocus=true, delegatesfocus=false" autofocus class=should-be-focused>
   <template shadowrootmode=open>
@@ -32,8 +31,6 @@
 </div>
 
 <script>
-polyfill_declarative_shadow_dom(document);
-
 document.querySelectorAll('body > [popover]').forEach(popover => {
   promise_test(async () => {
     const expectedFocusedElement = (popover.matches('.should-be-focused') ? popover : null)

diff --git a/resources/declarative-shadow-dom-polyfill.js b/resources/declarative-shadow-dom-polyfill.js