Bug 1819452 [wpt PR 38750] - Update WPT declarative shadow DOM polyfill, a=testonly

Automatic update from web-platform-tests Update WPT declarative shadow DOM polyfill The polyfill wasn't updated when the behavior was changed in [1]. And there were actually two competing polyfills, so this CL removes one of them and points the rest to the survivor. [1] https://chromium-review.googlesource.com/c/chromium/src/+/4194055 Bug: 1379513 Change-Id: Ia95e08231aec0249b24dc3d251d4faeb02fab375 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4295761 Commit-Queue: Joey Arhar <jarhar@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1112066} -- wpt-commits: ed273221b9cfcfd597f015fa42fb6274bc8b70e2 wpt-pr: 38750
2024-12-01 00:32:11 +00:00 · 2023-03-06 13:58:39 +00:00 · 2023-03-06 13:58:39 +00:00 · 519348f2ad
commit 519348f2ad
parent 819f253922
35 changed files with 82 additions and 82 deletions
--- a/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-invalidation-shadow-dom.html
+++ b/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-invalidation-shadow-dom.html
@ -9,7 +9,7 @@
 </style>

 <div id="host">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
    <style>
      ::slotted(#slotted), :host {
        position-fallback: --pf;
--- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-tree-scoped.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-fallback-tree-scoped.html
@ -26,7 +26,7 @@
 <div id="doc_pf_outer" class="abs"></div>
 <div id="doc_pf_inner" class="abs"></div>
 <div id="outer_host">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
    <style>
      @position-fallback --outer {
        @try {
@ -44,7 +44,7 @@
    <div id="outer_pf_outer" class="abs"></div>
    <div id="outer_pf_inner" class="abs"></div>
    <div id="inner_host">
-      <template shadowroot="open">
+      <template shadowrootmode="open">
        <style>
          @position-fallback --inner {
            @try {
@ -78,7 +78,7 @@
  }
 </style>
 <div id="host_slotted_part">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
    <style>
      @position-fallback --host-slot-part {
        @try {
--- a/testing/web-platform/tests/css/css-cascade/scope-shadow.html
+++ b/testing/web-platform/tests/css/css-cascade/scope-shadow.html
@ -6,7 +6,7 @@
 <script src="/resources/declarative-shadow-dom-polyfill.js"></script>

 <div id=host_plain>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <style>
      @scope (:host) {
        .a {
@ -30,7 +30,7 @@
 </script>

 <div id=host_functional>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <style>
      @scope (:host(div)) {
        .a {
--- a/testing/web-platform/tests/css/css-contain/container-queries/container-for-shadow-dom.html
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-for-shadow-dom.html
@ -25,7 +25,7 @@

 <div id="inclusive-ancestor-across-root">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        @container (width = 400px) {
          #t1 { color: green; }
@ -38,7 +38,7 @@

 <div id="inclusive-ancestor-skip-slotting">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        div {
          width: 200px;
@ -60,7 +60,7 @@

 <div id="inclusive-ancestor-slotted">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        slot {
          display: block;
@ -79,7 +79,7 @@

 <div id="inclusive-ancestor-host">
  <div id="t4">
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        @container (width = 400px) {
          :host(#t4) { color: green; }
@ -91,7 +91,7 @@

 <div id="inclusive-ancestor-part">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        div {
          width: 200px;
@ -112,7 +112,7 @@

 <div id="inclusive-ancestor-slotted-before">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        slot {
          display: block;
@ -140,7 +140,7 @@

 <div id="inclusive-ancestor-host-before">
  <div id="t7">
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        :host {
          width: 200px;
@ -167,7 +167,7 @@
    }
  </style>
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        div {
          width: 200px;
@ -188,7 +188,7 @@
    }
  </style>
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        div {
          width: 200px;
@ -196,7 +196,7 @@
        }
      </style>
      <div exportparts="inner-part">
-        <template shadowroot="open">
+        <template shadowrootmode="open">
          <style>
            div {
              width: 200px;
@ -213,7 +213,7 @@
 </div>

 <div id="inclusive-ancestor-slot-fallback">
-  <div><template shadowroot="open">
+  <div><template shadowrootmode="open">
    <style>
      div {
        width: 200px;
@ -231,7 +231,7 @@

 <div id="no-container-for-part">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        div {
          width: 200px;
@ -253,7 +253,7 @@

 <div id="inner-scope-host-part">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        div {
          width: 200px;
--- a/testing/web-platform/tests/css/css-contain/container-queries/container-name-tree-scoped.html
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-name-tree-scoped.html
@ -10,7 +10,7 @@

 <div id="container-name-host">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        :host { container-name: foo; }
      </style>
@ -31,7 +31,7 @@

 <div id="container-name-slotted">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        ::slotted(div) {
          container-name: foo;
--- a/testing/web-platform/tests/css/css-contain/container-queries/container-size-shadow-invalidation.html
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-size-shadow-invalidation.html
@ -16,7 +16,7 @@
  }
 </style>
 <div id="host_container" class="container">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
    <div class="container">
      <slot></slot>
    </div>
@ -25,7 +25,7 @@
 </div>
 <div id="non_host_container" class="container">
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <div class="container">
        <slot></slot>
      </div>
--- a/testing/web-platform/tests/css/css-contain/container-queries/container-units-shadow.html
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-shadow.html
@ -25,7 +25,7 @@
 </style>
 <div id=outer>
  <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
      <style>
        #inner {
          container-type: size;
--- a/testing/web-platform/tests/css/css-contain/content-visibility/contentvisibility-nestedslot-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/contentvisibility-nestedslot-crash.html
@ -6,7 +6,7 @@
 <div style="content-visibility:hidden">hidden</div>

 <div id=host>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <div>nested slots:</div>
    <slot name=parent>
      <slot name=child></slot>
--- a/testing/web-platform/tests/css/css-contain/content-visibility/resources/slot-content-visibility.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/resources/slot-content-visibility.html
@ -2,7 +2,7 @@

 >
 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
  a
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-1-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-1-crash.html
@ -4,7 +4,7 @@

 >
 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
  a
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-10-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-10-crash.html
@ -4,7 +4,7 @@

 >
 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
  a
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-11-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-11-crash.html
@ -4,7 +4,7 @@

 >
 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
  <div style="content-visibility: hidden">a</div>
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-12-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-12-crash.html
@ -3,21 +3,21 @@
 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221036">

 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
  a
 </div>
 <iframe src="resources/slot-content-visibility.html"></iframe>
 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
  a
 </div>
 <iframe src="resources/slot-content-visibility.html"></iframe>
 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
  a
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-14-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-14-crash.html
@ -10,11 +10,11 @@ window.onload = () => {
 </script>

 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility:hidden; display:block"></slot>
  </template>
  <div id='id6'>
-    <template shadowroot=open>
+    <template shadowrootmode=open>
      <slot></slot>
    </template>
  </div>
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-15-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-15-crash.html
@ -6,7 +6,7 @@ window.onload = () => {
 </script>

 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility:hidden; display:block"></slot>
  </template>
  <meter></meter>
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-16-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-16-crash.html
@ -3,7 +3,7 @@
 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1251931">

 <div>
-  <template shadowroot=open></template>
+  <template shadowrootmode=open></template>
  <span id="outside"></span>
 </div>
 <div style="content-visibility:hidden"></div>
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-2-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-2-crash.html
@ -3,7 +3,7 @@
 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221821">

 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
 <link rel=stylesheet href="/fonts/ahem.css">
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-3-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-3-crash.html
@ -3,7 +3,7 @@
 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221821">

 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
 <span autofocus>
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-4-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-4-crash.html
@ -3,7 +3,7 @@
 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221767">

 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
 a
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-5-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-5-crash.html
@ -9,7 +9,7 @@
 <style>
 </style>
 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
 <embed id="I7" class= accesskey="h">
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-6-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-6-crash.html
@ -4,7 +4,7 @@

 <a autofocus="autofocus">
 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
 </a>
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-7-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-7-crash.html
@ -10,7 +10,7 @@ function showmodal() {

 <body onload=showmodal()>
  <div>
-    <template shadowroot=open>
+    <template shadowrootmode=open>
      <slot style="content-visibility: hidden; display:block"></slot>
    </template>
    <dialog id=dialog></dialog>
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-8-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-8-crash.html
@ -3,7 +3,7 @@
 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1222408">

 <div id=details>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
 </div>
--- a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-9-crash.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-9-crash.html
@ -4,7 +4,7 @@

 >
 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot style="content-visibility: hidden; display: block"></slot>
  </template>
  a
--- a/testing/web-platform/tests/css/selectors/invalidation/nth-child-in-shadow-root.html
+++ b/testing/web-platform/tests/css/selectors/invalidation/nth-child-in-shadow-root.html
@ -5,7 +5,7 @@
 <link rel="help" href="https://w3c.github.io/csswg-drafts/selectors-4/#child-index">
 <script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <div id="host">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
    <style>
      div:nth-child(even of .foo) {
        color: green;
--- a/testing/web-platform/tests/css/selectors/invalidation/nth-last-child-in-shadow-root.html
+++ b/testing/web-platform/tests/css/selectors/invalidation/nth-last-child-in-shadow-root.html
@ -7,7 +7,7 @@
 <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 shadowroot="open">
+  <template shadowrootmode="open">
    <style>
      div:nth-last-child(even of .foo) {
        color: green;
--- a/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss.html
+++ b/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss.html
@ -332,7 +332,7 @@
 </script>

 <my-element id="myElement">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
    <button id=b7 onclick='showPopover7()'>Popover7</button>
    <div popover id=p7 anchor=b7 style="top: 100px;">
      <p>Popover content.</p>
--- a/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.html
+++ b/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.html
@ -45,7 +45,7 @@
 <div id=test1>
  <button onclick='showTestPopover("test1",0)'>Test1 Popover</button>
  <my-element>
-    <template shadowroot=open>
+    <template shadowrootmode=open>
      <div popover>
        <p>This should show, even though it is inside shadow DOM.</p>
      </div>
@ -71,7 +71,7 @@
    <button id=t2b2 onclick='showTestPopover("test2",1)'>Test 2 Popover 2</button>
  </div>
  <my-element>
-    <template shadowroot=open>
+    <template shadowrootmode=open>
      <div popover anchor=t2b2 style="top: 400px;">
        <p>Hiding this popover will hide *all* open popovers,</p>
        <p>because t2b2 doesn't exist in this context.</p>
@ -98,7 +98,7 @@

 <div id=test3>
  <my-element>
-    <template shadowroot=open>
+    <template shadowrootmode=open>
      <button id=t3b1 onclick='showTestPopover("test3",0)'>Test 3 Popover 1</button>
      <div popover anchor=t3b1>
        <p>This popover will stay open when popover2 shows.</p>
@ -138,7 +138,7 @@
  <div popover anchor=t4b1>
    <p>This should not get hidden when popover2 opens.</p>
    <my-element>
-      <template shadowroot=open>
+      <template shadowrootmode=open>
        <button id=t4b2 onclick='showTestPopover("test4",1)'>Test 4 Popover 2</button>
        <div popover anchor=t4b2>
          <p>This should not hide popover1.</p>
--- a/testing/web-platform/tests/resources/declarative-shadow-dom-polyfill.js
+++ b/testing/web-platform/tests/resources/declarative-shadow-dom-polyfill.js
@ -1,13 +1,21 @@
 /*
- * Polyfill for attaching shadow trees for declarative Shadow DOM for implementations that do not support
- * declarative Shadow DOM.
+ * Polyfill for attaching shadow trees for declarative Shadow DOM for
+ * implementations that do not support declarative Shadow DOM.
+ *
+ * Note: this polyfill will feature-detect the native feature, and do nothing
+ *       if supported.
+ *
+ * See: https://github.com/whatwg/html/pull/5465
+ *
+ * root: The root of the subtree in which to upgrade shadow roots
 *
- * root: The root of the subtree to perform the attachments in
 */

 function polyfill_declarative_shadow_dom(root) {
-  root.querySelectorAll("template[shadowroot]").forEach(template => {
-    const mode = template.getAttribute("shadowroot");
+  if (HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode'))
+    return;
+  root.querySelectorAll("template[shadowrootmode]").forEach(template => {
+    const mode = template.getAttribute("shadowrootmode");
    const shadowRoot = template.parentNode.attachShadow({ mode });
    shadowRoot.appendChild(template.content);
    template.remove();
--- a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-shadow.html
+++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-shadow.html
@ -39,7 +39,7 @@
  </style>
  <div class=scroller>
    <div class=scroller>
-      <template shadowroot=open>
+      <template shadowrootmode=open>
        <style>
          :host {
            scroll-timeline: timeline vertical;
@ -76,7 +76,7 @@
    }
  </style>
  <div class=host>
-    <template shadowroot=open>
+    <template shadowrootmode=open>
      <style>
        ::slotted(.scroller) {
          scroll-timeline: timeline vertical;
@ -113,7 +113,7 @@
    }
  </style>
  <div class=host>
-    <template shadowroot=open>
+    <template shadowrootmode=open>
      <style>
          /* Not using 'anim' at document scope, due to https://crbug.com/1334534 */
          @keyframes anim2 {
@ -157,7 +157,7 @@
  </style>
  <div class=scroller>
    <div class=host>
-      <template shadowroot=open>
+      <template shadowrootmode=open>
        <style>
          div {
            scroll-timeline: timeline vertical;
--- a/testing/web-platform/tests/scroll-animations/css/view-timeline-name-shadow.html
+++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-name-shadow.html
@ -41,7 +41,7 @@
  <div class=scroller>
    <div>
      <div class=target>
-        <template shadowroot=open>
+        <template shadowrootmode=open>
          <style>
            :host {
              view-timeline: timeline vertical;
@ -78,7 +78,7 @@
  </style>
  <div class=scroller>
    <div class=host>
-      <template shadowroot=open>
+      <template shadowrootmode=open>
        <style>
          ::slotted(.target) {
            view-timeline: timeline vertical;
@ -114,7 +114,7 @@
    }
  </style>
  <div class=host>
-    <template shadowroot=open>
+    <template shadowrootmode=open>
      <style>
          /* Not using 'anim' at document scope, due to https://crbug.com/1334534 */
          @keyframes anim2 {
@ -158,7 +158,7 @@
  </style>
  <div class=scroller>
    <div class=host>
-      <template shadowroot=open>
+      <template shadowrootmode=open>
        <style>
          div {
            view-timeline: timeline vertical;
--- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-nested-slots.html
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-nested-slots.html
@ -7,12 +7,13 @@
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <script src="resources/shadow-dom.js"></script>
 <script src="resources/focus-utils.js"></script>

 <div id=div1 tabindex=0>one</div>
 <span>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot name=myslot></slot>
  </template>
  <slot slot=myslot>
@ -26,7 +27,7 @@
 <script>

 promise_test(async () => {
-  convertDeclarativeTemplatesToShadowRootsWithin(document);
+  polyfill_declarative_shadow_dom(document);
  div1.focus();
  assert_equals(document.activeElement, div1);

--- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-reverse-unassignable-slot.html
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-reverse-unassignable-slot.html
@ -7,11 +7,12 @@
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 <script src="resources/shadow-dom.js"></script>
 <script src="resources/focus-utils.js"></script>

 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <slot />
  </template>
  <slot>
@ -24,7 +25,7 @@

 <script>
 promise_test(async () => {
-  convertDeclarativeTemplatesToShadowRootsWithin(document);
+  polyfill_declarative_shadow_dom(document);
  input2.focus();
  assert_equals(document.activeElement, input2);

--- a/testing/web-platform/tests/shadow-dom/focus-navigation/resources/shadow-dom.js
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/resources/shadow-dom.js
@ -43,16 +43,6 @@ function convertTemplatesToShadowRootsWithin(node) {
  }
 }

-function convertDeclarativeTemplatesToShadowRootsWithin(root) {
-  root.querySelectorAll("template[shadowroot]").forEach(template => {
-    const mode = template.getAttribute("shadowroot");
-    const shadowRoot = template.parentNode.attachShadow({ mode });
-    shadowRoot.appendChild(template.content);
-    template.remove();
-    convertDeclarativeTemplatesToShadowRootsWithin(shadowRoot);
-  });
-}
-
 function isShadowHost(node) {
  return node && node.nodeType == Node.ELEMENT_NODE && node.shadowRoot;
 }
--- a/testing/web-platform/tests/shadow-dom/offsetTop-offsetLeft-across-shadow-boundaries.html
+++ b/testing/web-platform/tests/shadow-dom/offsetTop-offsetLeft-across-shadow-boundaries.html
@ -11,7 +11,7 @@
 </style>

 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <style>
    .box {
      width: 10px;
@ -29,7 +29,7 @@
 </div>

 <span>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <style>
    .box {
      width: 10px;
@ -47,7 +47,7 @@
 </span>

 <div>
-  <template shadowroot=open>
+  <template shadowrootmode=open>
    <style>
    .box {
      width: 10px;
@ -58,7 +58,7 @@
    <div style="position: relative">
      <div class=box></div>
      <div>
-        <template shadowroot=open>
+        <template shadowrootmode=open>
          <style>
          .box {
            width: 10px;