Update WPT for Shadow DOM and update declarative Shadow DOM implement…

…ation https://bugs.webkit.org/show_bug.cgi?id=249211 Reviewed by Chris Dumez. Update the web platform tests for shadow DOM and WebKit's declarative Shadow DOM implementation. Rename shadowroot content attribute to shadowrootmode and enable streaming by default. * LayoutTests/imported/w3c/resources/resource-files.json: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/crashtests/move-to-new-tree-1343016.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/crashtests/w3c-import.log: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-after-attachshadow.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-parser-interaction.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-attachment.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-opt-in.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-with-disabled-shadow.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/getinnerhtml.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/innerhtml-before-closing-tag.tentative-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/innerhtml-before-closing-tag.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/innerhtml-on-ordinary-template.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/move-template-before-closing-tag.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/script-access.tentative-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/script-access.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/support/declarative-child-frame.html: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback-default-tabindex-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback-default-tabindex.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-delegatesFocus-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-delegatesFocus.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-fallback-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-fallback.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-nested.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-fallback-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-fallback.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-slot-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-slot.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-with-tabindex-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slot-with-tabindex.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slots-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slots.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-web-component-input-type-radio-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-web-component-input-type-radio.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-nested-slots-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-nested-slots.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-reverse-unassignable-slot-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-reverse-unassignable-slot.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-reverse-unassigned-slot-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-reverse-unassigned-slot.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-unassignable-slot-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-unassignable-slot.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-with-negative-index-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-with-negative-index.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/resources/focus-utils.js: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/resources/shadow-dom.js: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/resources/w3c-import.log: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/w3c-import.log: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus/focus-method-with-delegatesFocus-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus/focus-method-with-delegatesFocus.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus/focus-shadowhost-display-none-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus/focus-shadowhost-display-none.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/focus/w3c-import.log: * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/invalidate-shadow-dom-crash.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/invalidate-sibling-different-slots-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/invalidate-sibling-different-slots-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/invalidate-sibling-different-slots.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/offsetTop-offsetLeft-across-shadow-boundaries-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/offsetTop-offsetLeft-across-shadow-boundaries.html: Added. * LayoutTests/imported/w3c/web-platform-tests/shadow-dom/w3c-import.log: * LayoutTests/platform/gtk/imported/w3c/web-platform-tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot-expected.txt: Added. * Source/WTF/Scripts/Preferences/WebPreferencesInternal.yaml: * Source/WebCore/html/HTMLAttributeNames.in: * Source/WebCore/html/HTMLTemplateElement.cpp: (WebCore::HTMLTemplateElement::attachAsDeclarativeShadowRootIfNeeded): * Source/WebCore/html/parser/HTMLConstructionSite.cpp: (WebCore::HTMLConstructionSite::insertHTMLTemplateElement): Canonical link: https://commits.webkit.org/257820@main
WebKit · Dec 14, 2022 · 27b0521 · 27b0521
1 parent 14dcf9a
commit 27b0521
Show file tree

Hide file tree

Showing 79 changed files with 2,664 additions and 134 deletions.
diff --git a/LayoutTests/imported/w3c/resources/resource-files.json b/LayoutTests/imported/w3c/resources/resource-files.json
@@ -522,10 +522,12 @@
         "html/syntax/xmldecl/support/zero-around-label.htm",
         "intersection-observer/observer-in-iframe.html",
         "permissions/feature-policy-permissions-query.html",
+        "shadow-dom/crashtests/move-to-new-tree-1343016.html",
         "shadow-dom/declarative/support/declarative-child-frame.html",
         "shadow-dom/directionality-001-ref.html",
         "shadow-dom/directionality-002-ref.html",
         "shadow-dom/imperative-slot-layout-invalidation-001-ref.html",
+        "shadow-dom/invalidate-sibling-different-slots-ref.html",
         "shadow-dom/shadow-style-invalidation-vw-units-ref.html",
         "shadow-dom/slot-fallback-content-001-ref.html",
         "shadow-dom/slot-fallback-content-002-ref.html",

diff --git a/...Tests/imported/w3c/web-platform-tests/shadow-dom/crashtests/move-to-new-tree-1343016.html b/...Tests/imported/w3c/web-platform-tests/shadow-dom/crashtests/move-to-new-tree-1343016.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<head>
+<title>Shadow DOM: Move to new tree without crashing</title>
+<meta name="author" title="Frank Liberato" href="mailto:liberato@google.com">
+<script src="/resources/testdriver.js"></script>
+<script src='/resources/testdriver-vendor.js'></script>
+</head>
+
+<body>
+<video controls id="video"></video>
+
+<script>
+
+async function crash() {
+  await test_driver.bless('open popup window', () => {
+    let w = window.open("", "", "popup");
+    w.document.body.appendChild(document.getElementById("video"));
+  });
+  document.documentElement.removeAttribute("class");
+}
+
+crash();
+
+</script>
+</body>
+</html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/crashtests/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/crashtests/w3c-import.log
@@ -0,0 +1,17 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+	https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/crashtests/move-to-new-tree-1343016.html
diff --git a/...c/web-platform-tests/shadow-dom/declarative/declarative-after-attachshadow.tentative.html b/...c/web-platform-tests/shadow-dom/declarative/declarative-after-attachshadow.tentative.html
@@ -25,9 +25,11 @@
 </script>
 
 <div id=host>
-  <script></script> <!-- Make sure MutationObserver gets to run -->
-  <template shadowroot=open>
-    <slot></slot>
+  <!-- Ensure observer runs at this point (https://github.com/web-platform-tests/wpt/issues/35393) -->
+  <script> // some content, which shouldn't be necessary </script>
+  <template shadowrootmode=open>
+    Content
+    <slot>Fallback</slot>
   </template>
 </div>
 

diff --git a/...c/web-platform-tests/shadow-dom/declarative/declarative-parser-interaction.tentative.html b/...c/web-platform-tests/shadow-dom/declarative/declarative-parser-interaction.tentative.html
@@ -11,7 +11,7 @@
 
 This test should not crash, and there should be two lines of text visible below.
 <x-1>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <style>
             @import 'non-existent.css';
         </style>
@@ -21,7 +21,7 @@
 </x-1>
 
 <x-2>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot></slot>
     </template>
     <p>Line 2</p>
@@ -36,4 +36,4 @@
       assert_true(!!x2);
     }, 'Declarative Shadow DOM: Test for crashes and improper parsing');
   }
-</script>
+</script>
diff --git a/...eb-platform-tests/shadow-dom/declarative/declarative-shadow-dom-attachment.tentative.html b/...eb-platform-tests/shadow-dom/declarative/declarative-shadow-dom-attachment.tentative.html
@@ -11,7 +11,7 @@
 const shadowContent = '<span>Shadow tree</span><slot></slot>';
 function getDeclarativeContent(mode, delegatesFocus) {
   const delegatesFocusText = delegatesFocus ? ' shadowrootdelegatesfocus' : '';
-  return `<template shadowroot=${mode}${delegatesFocusText}>${shadowContent}</template>`;
+  return `<template shadowrootmode=${mode}${delegatesFocusText}>${shadowContent}</template>`;
 }
 
 const lightDomTextContent = 'Light DOM';
@@ -61,9 +61,9 @@
     } else {
       if (!nochildren) {
         // Invalid elements should retain a <template> element child with a shadowroot attribute.
-        const template = nodes.wrapper.querySelector('template[shadowroot]');
+        const template = nodes.wrapper.querySelector('template[shadowrootmode]');
         assert_true(!!template);
-        assert_equals(template.getAttribute('shadowroot'), mode, `Template with shadowroot=${mode} should be left over`);
+        assert_equals(template.getAttribute('shadowrootmode'), mode, `Template with shadowrootmode=${mode} should be left over`);
         const span = nodes.wrapper.querySelector('span.lightdom');
         assert_true(!!span);
         assert_equals(span.textContent, lightDomTextContent);

diff --git a/...platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative-expected.txt b/...platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative-expected.txt
@@ -1,6 +1,7 @@
 
 PASS Declarative Shadow DOM: Basic test
 FAIL Declarative Shadow DOM: Feature detection assert_true: Unable to feature detect expected true got false
+FAIL Shadowrootmode reflection assert_equals: The shadowRootMode IDL should reflect the content attribute expected (string) "open" but got (undefined) undefined
 PASS Declarative Shadow DOM: Fragment parser basic test
 PASS Declarative Shadow DOM: Invalid shadow root attribute
 PASS Declarative Shadow DOM: Closed shadow root attribute

diff --git a/...w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html b/...w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html
@@ -8,7 +8,7 @@
 <script src="support/helpers.js"></script>
 
 <div id="host" style="display:none">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <slot id="s1" name="slot1"></slot>
   </template>
   <div id="c1" slot="slot1"></div>
@@ -28,14 +28,28 @@
 }, 'Declarative Shadow DOM: Basic test');
 
 test(() => {
-  assert_true(HTMLTemplateElement.prototype.hasOwnProperty("shadowRoot"),'Unable to feature detect');
+  assert_true(HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode"),'Unable to feature detect');
 }, 'Declarative Shadow DOM: Feature detection');
 
+test(() => {
+  const t = document.createElement('template');
+  t.setAttribute('shadowrootmode','open');
+  assert_equals(t.shadowRootMode,'open','The shadowRootMode IDL should reflect the content attribute');
+  t.setAttribute('shadowrootmode','closed');
+  assert_equals(t.shadowRootMode,'closed','"open" and "closed" should both be valid values');
+  t.setAttribute('shadowrootmode','OpEn');
+  assert_equals(t.shadowRootMode,'open','Case insensitive');
+  t.setAttribute('shadowrootmode','INVALID');
+  assert_equals(t.shadowRootMode,null,'Invalid values map to null');
+  t.removeAttribute('shadowrootmode');
+  assert_equals(t.shadowRootMode,null,'No shadowrootmode attribute maps to null');
+}, 'Shadowrootmode reflection');
+
 test(() => {
   const div = document.createElement('div');
   setInnerHTML(div,`
     <div id="host">
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         <slot id="s1" name="slot1"></slot>
       </template>
       <div id="c1" slot="slot1"></div>
@@ -56,23 +70,23 @@
   const div = document.createElement('div');
   setInnerHTML(div,`
     <div id="host">
-      <template shadowroot="invalid">
+      <template shadowrootmode="invalid">
       </template>
     </div>
     `);
   const host = div.querySelector('#host');
   assert_equals(host.shadowRoot, null, "Shadow root was found");
   const tmpl = host.querySelector('template');
   assert_true(!!tmpl,"Template should still be present");
-  const shadowrootAttr = tmpl.getAttribute('shadowroot');
-  assert_equals(shadowrootAttr,"invalid","'shadowroot' attribute should still be present");
+  const shadowrootAttr = tmpl.getAttribute('shadowrootmode');
+  assert_equals(shadowrootAttr,"invalid","'shadowrootmode' attribute should still be present");
 }, 'Declarative Shadow DOM: Invalid shadow root attribute');
 
 test(() => {
   const div = document.createElement('div');
   setInnerHTML(div,`
     <div id="host">
-      <template shadowroot="closed">
+      <template shadowrootmode="closed">
       </template>
     </div>
     `);
@@ -85,7 +99,7 @@
   const div = document.createElement('div');
   setInnerHTML(div,`
     <div id="host">
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         <slot id="s1" name="slot1"></slot>
     </div>
     `);
@@ -101,7 +115,7 @@
   const div = document.createElement('div');
   setInnerHTML(div,`
     <div id="host">
-      <template shadowroot="open" shadowrootdelegatesfocus>
+      <template shadowrootmode="open" shadowrootdelegatesfocus>
       </template>
     </div>
     `);
@@ -110,7 +124,7 @@
   assert_true(host.shadowRoot.delegatesFocus,"delegatesFocus should be true");
   setInnerHTML(div,`
     <div id="host">
-      <template shadowroot="open">
+      <template shadowrootmode="open">
       </template>
     </div>
     `);
@@ -121,10 +135,10 @@
 </script>
 
 <div id="multi-host" style="display:none">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <span>root 1</span>
   </template>
-  <template shadowroot="closed">
+  <template shadowrootmode="closed">
     <span>root 2</span>
   </template>
 </div>
@@ -141,38 +155,50 @@
 
 <template id="template-containing-shadow">
   <div class="innerdiv">
-    <template shadowroot=open>Content</template>
+    <template shadowrootmode=open>Content</template>
   </div>
 </template>
 <script>
 test(() => {
   const template = document.querySelector('#template-containing-shadow');
-  const host1 = document.createElement('div');
-  host1.style.display = 'none';
-  document.body.appendChild(host1);
-  host1.appendChild(template.content.cloneNode(true));
-  let innerDiv = host1.querySelector('div.innerdiv');
+  const container1 = document.createElement('div');
+  container1.style.display = 'none';
+  document.body.appendChild(container1);
+  container1.appendChild(template.content.cloneNode(true));
+  let innerDiv = container1.querySelector('div.innerdiv');
   const shadowRoot1 = innerDiv.shadowRoot;
   assert_true(!!shadowRoot1,"Inner div should have a shadow root");
   assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");
 
-  const host2 = document.createElement('div');
-  host2.style.display = 'none';
-  document.body.appendChild(host2);
-  host2.appendChild(template.content.cloneNode(true));
-  innerDiv = host2.querySelector('div.innerdiv');
+  const container2 = document.createElement('div');
+  container2.style.display = 'none';
+  document.body.appendChild(container2);
+  container2.appendChild(template.content.cloneNode(true));
+  innerDiv = container2.querySelector('div.innerdiv');
   const shadowRoot2 = innerDiv.shadowRoot;
   assert_true(!!shadowRoot2,"Inner div should have a shadow root");
   assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");
 
   assert_not_equals(shadowRoot1,shadowRoot2,'Should not get back the same shadow root');
+
+  // Make sure importNode also works.
+  const container3 = document.createElement('div');
+  container3.style.display = 'none';
+  document.body.appendChild(container3);
+  container3.appendChild(document.importNode(template.content,true));
+  innerDiv = container3.querySelector('div.innerdiv');
+  const shadowRoot3 = innerDiv.shadowRoot;
+  assert_true(!!shadowRoot3,"Inner div should have a shadow root");
+  assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");
+  assert_not_equals(shadowRoot1,shadowRoot3,'Should not get back the same shadow root');
+
 }, 'Declarative Shadow DOM: template containing declarative shadow root');
 </script>
 
 <template id="template-containing-deep-shadow">
   <div><div><div><div><div>
     <div class="innerdiv">
-      <template shadowroot=open>Content</template>
+      <template shadowrootmode=open>Content</template>
     </div>
   </div></div></div></div></div>
 </template>
@@ -191,7 +217,7 @@
   <div>
     <template id="inner-template">
       <div class="innerdiv">
-        <template shadowroot=open>Content</template>
+        <template shadowrootmode=open>Content</template>
       </div>
     </template>
   </div>
@@ -210,7 +236,7 @@
 
 <template id="template-containing-ua-shadow">
   <div class="innerdiv">
-    <template shadowroot=open>
+    <template shadowrootmode=open>
       <video></video> <!--Assumed to have UA shadow root-->
     </template>
   </div>
@@ -234,7 +260,7 @@
 
 <template id="template-containing-ua-shadow-closed">
   <div class="innerdiv">
-    <template shadowroot=closed>
+    <template shadowrootmode=closed>
       <video></video> <!--Assumed to have UA shadow root-->
     </template>
   </div>
@@ -252,7 +278,7 @@
 </script>
 
 <template id="root-element-shadow">
-    <template shadowroot=open>Content</template>
+    <template shadowrootmode=open>Content</template>
 </template>
 <script>
 test(() => {
@@ -263,6 +289,6 @@
   assert_equals(host.shadowRoot, null, "Shadow root should not be present");
   const tmpl = host.querySelector('template');
   assert_true(!!tmpl,"Template should still be present");
-  assert_equals(tmpl.getAttribute('shadowroot'),"open","'shadowroot' attribute should still be present");
+  assert_equals(tmpl.getAttribute('shadowrootmode'),"open","'shadowrootmode' attribute should still be present");
 }, 'Declarative Shadow DOM: template root element');
 </script>
diff --git a/...3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-opt-in.tentative.html b/...3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-opt-in.tentative.html
@@ -17,7 +17,7 @@
 <div id=mainpage style="display:none">
   <div class=wrapper>
     <div class=host>
-      <template shadowroot=open>
+      <template shadowrootmode=open>
         <span class=content>Content</span>
       </template>
     </div>
@@ -29,7 +29,7 @@
   <html><body>
   <div class=wrapper>
     <div class=host>
-      <template shadowroot=open>
+      <template shadowrootmode=open>
         <span class=content>Content</span>
       </template>
     </div>
@@ -49,7 +49,7 @@
     assert_true(!host.shadowRoot, 'Shadow root FOUND - none should be present.');
     const tmpl = host.querySelector('template');
     assert_true(!!tmpl, 'The template should be left as a <template> element');
-    assert_equals(tmpl.getAttribute('shadowroot'),'open','The shadowroot attribute should still be present');
+    assert_equals(tmpl.getAttribute('shadowrootmode'),'open','The shadowrootmode attribute should still be present');
     assert_true(!!tmpl.content.querySelector('.content'),'Unable to locate content');
   }
 }

diff --git a/...web-platform-tests/shadow-dom/declarative/declarative-with-disabled-shadow.tentative.html b/...web-platform-tests/shadow-dom/declarative/declarative-with-disabled-shadow.tentative.html
@@ -16,7 +16,7 @@
 </script>
 
 <shadow-disabled>
-  <template shadowroot="open"><span id=inside/></template>
+  <template shadowrootmode="open"><span id=inside/></template>
 </shadow-disabled>
 
 <script>

diff --git a/...tTests/imported/w3c/web-platform-tests/shadow-dom/declarative/getinnerhtml.tentative.html b/...tTests/imported/w3c/web-platform-tests/shadow-dom/declarative/getinnerhtml.tentative.html
@@ -29,7 +29,7 @@
     const isOpen = mode === 'open';
     if (allowsShadowDom) {
       const delegatesAttr = delegatesFocus ? ' shadowrootdelegatesfocus=""' : '';
-      const correctShadowHtml = `<template shadowroot="${mode}"${delegatesAttr}><slot></slot></template>`;
+      const correctShadowHtml = `<template shadowrootmode="${mode}"${delegatesAttr}><slot></slot></template>`;
       const correctHtml = `<${elementType}>${correctShadowHtml}</${elementType}>`;
       const shadowRoot = element.attachShadow({mode: mode, delegatesFocus: delegatesFocus});
       shadowRoot.appendChild(document.createElement('slot'));

diff --git a/...platform-tests/shadow-dom/declarative/innerhtml-before-closing-tag.tentative-expected.txt b/...platform-tests/shadow-dom/declarative/innerhtml-before-closing-tag.tentative-expected.txt
@@ -1,3 +1,3 @@
 
-PASS Declarative Shadow DOM: innerHTML should work while parsing declarative shadow root <template>
+PASS Declarative Shadow DOM: innerHTML should work while parsing STREAMING declarative shadow root <template>