From 8dd16259287f58f9273002717ec4d27e97127719 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Wed, 12 Jun 2024 07:43:14 +0200
Subject: Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../tests/shadow-dom/declarative/WEB_FEATURES.yml  |   3 +
 .../tests/shadow-dom/declarative/gethtml.html      |  31 ++--
 .../focus-navigation-slot-nested-2levels.html      |   1 +
 .../focus-navigation-slots-in-slot.html            |   1 +
 .../focus-navigation-with-delegatesFocus.html      |   1 +
 .../focus-navigation/focus-navigation.html         |   1 +
 .../tentative/grid-order-on-shadow-host.html       |  43 ++++++
 .../tentative/grid-order-with-iframe.html          |  33 +++++
 .../tentative/grid-order-with-nested-grids.html    |  72 +++++++++
 .../tentative/grid-order-with-popover.html         |  64 ++++++++
 .../tentative/grid-order-with-slots.html           | 164 +++++++++++++++++++++
 .../reading-order/tentative/grid-order.html        |  89 +++++++++++
 .../focus-navigation/resources/focus-utils.js      |  41 +++++-
 13 files changed, 514 insertions(+), 30 deletions(-)
 create mode 100644 testing/web-platform/tests/shadow-dom/declarative/WEB_FEATURES.yml
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order.html

(limited to 'testing/web-platform/tests/shadow-dom')

diff --git a/testing/web-platform/tests/shadow-dom/declarative/WEB_FEATURES.yml b/testing/web-platform/tests/shadow-dom/declarative/WEB_FEATURES.yml
new file mode 100644
index 0000000000..4e31ed4962
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/declarative/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: declarative-shadow-dom
+  files: "**"
diff --git a/testing/web-platform/tests/shadow-dom/declarative/gethtml.html b/testing/web-platform/tests/shadow-dom/declarative/gethtml.html
index d950ca7734..ff70653477 100644
--- a/testing/web-platform/tests/shadow-dom/declarative/gethtml.html
+++ b/testing/web-platform/tests/shadow-dom/declarative/gethtml.html
@@ -29,7 +29,6 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot,
     }
 
     let shadowRoot;
-    const isOpen = mode === 'open';
     let initDict = {mode: mode, delegatesFocus: delegatesFocus, clonable};
     let expectedSerializable = null;
     switch (serializable) {
@@ -47,12 +46,8 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot,
           `shadowrootmode=${mode}${delegatesAttr}${serializableAttr}` +
           `${clonableAttr}>`;
       wrapper.setHTMLUnsafe(html);
-      if (isOpen) {
-        shadowRoot = wrapper.firstElementChild.shadowRoot;
-      } else {
-        // For closed shadow root, we rely on the behavior of attachShadow to return it to us
-        shadowRoot = wrapper.firstElementChild.attachShadow(initDict);
-      }
+      // Get hold of the declarative shadow root in a way that works when its mode is "closed"
+      shadowRoot = wrapper.firstElementChild.attachShadow(initDict);
     } else {
       // Imperative shadow dom
       const element = document.createElement(elementType);
@@ -78,22 +73,14 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot,
       assert_equals(shadowRoot.clonable,clonable);
       shadowRoot.appendChild(document.createElement('slot'));
       const emptyElement = `<${elementType}>${lightDOMContent}</${elementType}>`;
-      if (isOpen) {
-        if (expectedSerializable) {
-          assert_equals(wrapper.getHTML({serializableShadowRoots: true}),
-              correctHtml);
-          assert_equals(wrapper.firstElementChild.getHTML({
-              serializableShadowRoots: true}),
-              `${correctShadowHtml}${lightDOMContent}`);
-        } else {
-          assert_equals(wrapper.getHTML({serializableShadowRoots: true}), emptyElement);
-        }
-      } else {
-        // Closed shadow roots should not be returned unless shadowRoots specifically contains the shadow root:
+      if (expectedSerializable) {
         assert_equals(wrapper.getHTML({serializableShadowRoots: true}),
-            emptyElement);
-        assert_equals(wrapper.getHTML({serializableShadowRoots: true,
-            shadowRoots: []}), emptyElement);
+            correctHtml);
+        assert_equals(wrapper.firstElementChild.getHTML({
+            serializableShadowRoots: true}),
+            `${correctShadowHtml}${lightDOMContent}`);
+      } else {
+        assert_equals(wrapper.getHTML({serializableShadowRoots: true}), emptyElement);
       }
       // If we provide the shadow root, serialize it, regardless of serializableShadowRoots.
       assert_equals(wrapper.getHTML({serializableShadowRoots: true, shadowRoots:
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html
index 7d733ea7c2..1b867cc2a9 100644
--- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<meta name="timeout" content="long">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/testdriver.js"></script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html
index 39b0806603..3c929de727 100644
--- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<meta name="timeout" content="long">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/testdriver.js"></script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html
index 64942a109e..e37accbc8e 100644
--- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<meta name="timeout" content="long">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/testdriver.js"></script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html
index 9e593eb100..faf3c34cdb 100644
--- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<meta name="timeout" content="long">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/testdriver.js"></script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html
new file mode 100644
index 0000000000..a48eda1b57
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Display: reading-order-items with value grid-order on shadow host</title>
+<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src='../../resources/shadow-dom.js'></script>
+<script src="../../resources/focus-utils.js"></script>
+
+<style>
+.wrapper {
+  display: grid;
+  reading-order-items: grid-order;
+}
+</style>
+
+<div class="test-case" data-expect="root/B,root/A"
+      data-description="Grid items in shadow host with delegatesFocus">
+  <div id="root" class="wrapper" tabindex="0">
+    <template shadowrootmode="open" shadowrootdelegatesfocus>
+      <button id="A" style="order: 2">A</button>
+      <button id="B" style="order: 1">B</button>
+    </template>
+  </div>
+</div>
+
+<div class="test-case" data-expect="root2,root2/B,root2/A"
+      data-description="Grid items in shadow host without delegatesFocus">
+  <div id="root2" class="wrapper" tabindex="0">
+    <template shadowrootmode="open">
+      <button id="A" style="order: 2">A</button>
+      <button id="B" style="order: 1">B</button>
+    </template>
+  </div>
+</div>
+
+<script>
+runFocusTestCases();
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html
new file mode 100644
index 0000000000..87b9e0a83d
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Display: reading-order-items with value grid-order on iframe</title>
+<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src='../../resources/shadow-dom.js'></script>
+<script src="../../resources/focus-utils.js"></script>
+
+<style>
+.wrapper {
+  display: grid;
+  reading-order-items: grid-order;
+}
+</style>
+
+<div class="test-case" data-expect="start,frame2/B,frame1/A,end"
+      data-description="Grid items are iframes.">
+  <button id="start">Item Start</button>
+  <div class="wrapper">
+    <iframe id="frame1" style="order: 2" srcdoc="<button id=A>A</button>"></iframe>
+    <iframe id="frame2" style="order: 1" srcdoc="<button id=B>B</button>"></iframe>
+  </div>
+  <button id="end">Item End</button>
+</div>
+
+<script>
+window.onload = runFocusTestCases;
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html
new file mode 100644
index 0000000000..d3da6682a3
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Display: reading-order-items with value grid-order in nested grids</title>
+<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src='../../resources/shadow-dom.js'></script>
+<script src="../../resources/focus-utils.js"></script>
+
+<style>
+.box {
+  display: grid;
+  reading-order-items: grid-order;
+  border-radius: 5px;
+  padding: 20px;
+  border-style: dashed;
+}
+
+</style>
+
+<div class="test-case" data-expect="w,d3,b3a,b3b,d2,b2,d1,b1a,b1b"
+      data-description="Grid items are not grid containers.">
+  <div class="box" id="w" tabindex="0">
+    <div style="order: 2" id="d1" tabindex="0">Div 1
+      <button id="b1a" style="order: 3">Button 1A</button>
+      <button id="b1b">Button 1B</button>
+    </div>
+    <div id="d2" tabindex="0">Div 2
+      <button id="b2">Button 2</button>
+    </div>
+    <div id="d3" style="order: -1" tabindex="0">Div 3
+      <button id="b3a" style="order: 2">Button 3A</button>
+      <button id="b3b">Button 3B</button>
+    </div>
+  </div>
+</div>
+
+<div class="test-case"
+      data-expect="wrapper,div3,button3b,button3a,div2,button2,div1,button1b,button1a"
+      data-description="Grid items are grid containers.">
+  <div class="box" id="wrapper" tabindex="0">
+    <div class="box" style="order: 2" id="div1" tabindex="0">Div 1
+      <button id="button1a" style="order: 3">Button 1A</button>
+      <button id="button1b">Button 1B</button>
+    </div>
+    <div class="box" id="div2" tabindex="0">Div 2
+      <button id="button2">Button 2</button>
+    </div>
+    <div class="box" id="div3" style="order: -1" tabindex="0">Div 3
+      <button id="button3a" style="order: 2">Button 3A</button>
+      <button id="button3b">Button 3B</button>
+    </div>
+  </div>
+</div>
+
+<div class="test-case" data-expect="a,b,d,c"
+      data-description="Only has grid containers.">
+  <div class="box" id="a" tabindex="0">A
+    <div class="box" id="b" tabindex="0">B
+      <div class="box" id="c" tabindex="0" style="order: 2">C</div>
+      <div class="box" id="d" tabindex="0">D</div>
+    </div>
+  </div>
+</div>
+
+<script>
+runFocusTestCases();
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html
new file mode 100644
index 0000000000..2e98c04157
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Display: reading-order-items with value grid-order</title>
+<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src='../../resources/shadow-dom.js'></script>
+<script src="../../resources/focus-utils.js"></script>
+
+<style>
+.wrapper {
+  display: grid;
+  reading-order-items: grid-order;
+}
+.popover {
+  inset:auto;
+  top:200px;
+  left:200px;
+}
+</style>
+
+<div class="wrapper">
+  <button id=a style="order: 4">A</button>
+  <button id=invoker style="order: 2" popovertarget=P>Invoker</button>
+  <button id=c style="order: 1">C</button>
+</div>
+<div popover id=P class="popover">
+  <button id=b1 style="order: 3">Popover button B1</button>
+  <button id=b2 style="order: 1">Popover button B2</button>
+  <button id=b3 style="order: 2">Popover button B3</button>
+</div>
+
+<script>
+document.querySelector('[popovertarget]').click();
+
+promise_test(async () => {
+  let elements = [
+    'c',
+    'invoker',
+    'b1',
+    'b2',
+    'b3',
+    'a',
+  ];
+  await assert_focus_navigation_forward(elements);
+}, `Popover in reading-order-items: grid-order container.`);
+
+promise_test(async () => {
+  P.classList.add("wrapper");
+  let elements = [
+    'c',
+    'invoker',
+    'b2',
+    'b3',
+    'b1',
+    'a',
+  ];
+  await assert_focus_navigation_forward(elements);
+}, `Popover in container and itself with reading-order-items: grid-order.`);
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html
new file mode 100644
index 0000000000..3045001e1d
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Display: reading-order-items with value grid-order in Shadow DOM</title>
+<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src='../../resources/shadow-dom.js'></script>
+<script src="../../resources/focus-utils.js"></script>
+
+<style>
+.wrapper {
+  display: grid;
+  reading-order-items: grid-order;
+}
+</style>
+
+<span id="root1" class="test-case" data-expect="b1,a1,c1"
+      data-description="Slot assigned element is a grid with reading-order-items.">
+  <template shadowrootmode="open">
+    <style>
+    .wrapper {
+      display: grid;
+      reading-order-items: grid-order;
+    }
+    </style>
+    <slot></slot>
+  </template>
+  <div class="wrapper">
+    <button style="order: 2" id="a1">Item A</button>
+    <button style="order: 1" id="b1">Item B</button>
+    <button style="order: 3" id="c1">Item C</button>
+  </div>
+</span>
+<br>
+
+<span id="root2" class="test-case" data-expect="b2,a2,c2"
+      data-description="Slot is a grid with reading-order-items.">
+  <template shadowrootmode="open">
+    <style>
+    .wrapper {
+      display: grid;
+      reading-order-items: grid-order;
+    }
+    </style>
+    <slot class="wrapper"></slot>
+  </template>
+  <button style="order: 2" id="a2">Item A</button>
+  <button style="order: 1" id="b2">Item B</button>
+  <button style="order: 3" id="c2">Item C</button>
+</span>
+<br>
+
+<span id="root3" class="test-case" data-expect="root3/o2,root3/o4,o1,o3,o5"
+      data-description="Slot is inside a grid container with reading-order-items.">
+  <template shadowrootmode="open">
+    <style>
+    .wrapper {
+      display: grid;
+      reading-order-items: grid-order;
+    }
+    </style>
+    <div class="wrapper">
+      <button style="order: 4" id="o4">Order 4</button>
+      <slot style="order: 10"></slot>
+      <button style="order: 2" id="o2">Order 2</button>
+    </div>
+  </template>
+  <button style="order: 5" id="o5">Order 5</button>
+  <button style="order: 1" id="o1">Order 1</button>
+  <button style="order: 3" id="o3">Order 3</button>
+</span>
+<br>
+
+<span id="root4" class="test-case"
+      data-expect="root4/after,root4/before,b4,a4,d42,d41,d43,c4"
+      data-description="Slot is a grid with reading-order-items inside a grid container with reading-order-items.">
+  <template shadowrootmode="open">
+    <style>
+    .wrapper {
+      display: grid;
+      reading-order-items: grid-order;
+    }
+    </style>
+    <div class="wrapper">
+      <button style="order: 4" id="before">Before</button>
+      <slot style="order: 10"></slot>
+      <button style="order: 2" id="after">After</button>
+    </div>
+  </template>
+  <button style="order: 3" id="a4">Item A</button>
+  <button style="order: 1" id="b4">Item B</button>
+  <button style="order: 6" id="c4">Item C</button>
+  <div style="order: 5" class="wrapper">
+    <button style="order: 2" id="d41">Item D1</button>
+    <button style="order: 1" id="d42">Item D2</button>
+    <button style="order: 3" id="d43">Item D3</button>
+  </div>
+</span>
+<br>
+
+<span id="root5" class="test-case" data-expect="b51,a51,c51,b52,a52,c52"
+      data-description="Slot is not inside a shadow root.">
+  <div class="wrapper">
+    <slot name=slot1>
+      <button style="order: 2" id="a51">Item A</button>
+      <button style="order: 1" id="b51">Item B</button>
+      <button style="order: 3" id="c51">Item C</button>
+    </slot>
+  </div>
+  <slot class="wrapper" name=slot2>
+    <button style="order: 2" id="a52">Item A</button>
+    <button style="order: 1" id="b52">Item B</button>
+    <button style="order: 3" id="c52">Item C</button>
+  </slot>
+</span>
+<br>
+
+<span id="root6" class="test-case" data-expect="root6/after,root6/before,b6,a6"
+      data-description="Slot is a display contents inside a grid container.">
+  <template shadowrootmode="open">
+    <style>
+    .wrapper {
+      display: grid;
+      reading-order-items: grid-order;
+    }
+    </style>
+    <div class="wrapper">
+      <button style="order: 4" id="before">Before</button>
+      <slot style="display: contents" style="order: 4"></slot>
+      <button style="order: 3" id="after">After</button>
+    </div>
+  </template>
+  <button id="a6" style="order: 7">A</button>
+  <button id="b6" style="order: 2">B</button>
+</span>
+<br>
+
+<span id="root7" class="test-case" data-expect="a7,b7,root7/after,root7/before"
+      data-description="Slot is a display block inside a grid container.">
+  <template shadowrootmode="open">
+    <style>
+    .wrapper {
+      display: grid;
+      reading-order-items: grid-order;
+    }
+    </style>
+    <div class="wrapper">
+      <button style="order: 4" id="before">Before</button>
+      <slot style="display: block" style="order: 4"></slot>
+      <button style="order: 3" id="after">After</button>
+    </div>
+  </template>
+  <button id="a7" style="order: 7">A</button>
+  <button id="b7" style="order: 2">B</button>
+</span>
+<br>
+
+<script>
+runFocusTestCases();
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order.html
new file mode 100644
index 0000000000..1b86ab0b25
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Display: reading-order-items with value grid-order</title>
+<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src='../../resources/shadow-dom.js'></script>
+<script src="../../resources/focus-utils.js"></script>
+
+<style>
+.wrapper {
+  display: grid;
+  reading-order-items: grid-order;
+}
+</style>
+
+<div class="test-case" data-expect="a1,b1,c1,d1,e1"
+      data-description="Grid items without `order` property">
+  <div class="wrapper">
+    <button id="a1">Item A</button>
+    <button id="b1">Item B</button>
+    <button id="c1">Item C</button>
+  </div>
+  <div class="wrapper">
+    <button id="d1">Item D</button>
+    <button id="e1">Item E</button>
+  </div>
+</div>
+
+<div class="test-case" data-expect="b2,c2,a2,e2,d2"
+      data-description="Grid items with `order` property">
+  <div class="wrapper">
+    <button id="a2" style="order: 2">Item A</button>
+    <button id="b2">Item B</button>
+    <button id="c2">Item C</button>
+  </div>
+  <div class="wrapper">
+    <button id="d2">Item D</button>
+    <button id="e2" style="order: -1">Item E</button>
+  </div>
+</div>
+
+<div class="test-case" data-expect="c3,a3,b3,d3,f3,e3"
+      data-description="Grid items with `order` property and tabindex">
+  <div class="wrapper">
+    <button id="a3" style="order: -1">Item A</button>
+    <button id="b3" style="order: 0">Item B</button>
+    <button id="c3" tabindex="1" style="order: -1">Item C</button>
+  </div>
+  <div class="wrapper">
+    <button id="d3" tabindex="1" style="order: 1">Item D</button>
+    <button id="e3" tabindex="2" style="order: 0">Item E</button>
+    <button id="f3" tabindex="2" style="order: -1">Item F</button>
+  </div>
+</div>
+
+<div class="test-case" data-expect="order1,order2,order3,order4"
+     data-description="Items in display contents are sorted in same grid container.">
+  <div class="wrapper">
+    <div style="display: contents">
+      <button id="order3" style="order: 3">Order 3</button>
+      <button id="order1" style="order: 1">Order 1</button>
+      <div style="display: contents">
+        <button id="order4" style="order: 4">Order 4</button>
+        <button id="order2" style="order: 2">Order 2</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="test-case" data-expect="d4,b4,c4,a4"
+      data-description="Items in display block are not in parent grid container.">
+  <div class="wrapper">
+    <button id="a4" style="order: 3">A</button>
+    <div style="order: 1" style="display: block">
+      <button id="b4" style="order: 2">B</button>
+      <button id="c4" style="order: -1">C</button>
+    </div>
+    <button id="d4">D</button>
+  </div>
+</div>
+
+<script>
+runFocusTestCases();
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js b/testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js
index f593267cc3..f4056dc168 100644
--- a/testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js
@@ -1,17 +1,27 @@
 'use strict';
 
-function navigateFocusForward() {
-  // TAB = '\ue004'
-  return test_driver.send_keys(document.body, "\ue004");
+function waitForRender() {
+  return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+}
+
+async function navigateFocusForward() {
+  await waitForRender();
+  const kTab = '\uE004';
+  await new test_driver.send_keys(document.documentElement,kTab);
+  await waitForRender();
 }
 
 async function navigateFocusBackward() {
-  return new test_driver.Actions()
-    .keyDown('\uE050')
-    .keyDown('\uE004')
-    .keyUp('\uE004')
-    .keyUp('\uE050')
+  await waitForRender();
+  const kShift = '\uE008';
+  const kTab = '\uE004';
+  await new test_driver.Actions()
+    .keyDown(kShift)
+    .keyDown(kTab)
+    .keyUp(kTab)
+    .keyUp(kShift)
     .send();
+  await waitForRender();
 }
 
 // If shadow root is open, can find element using element path
@@ -162,3 +172,18 @@ async function assert_focus_navigation_bidirectional_with_shadow_root(elements)
   await assert_focus_navigation_backward_with_shadow_root(elements);
 }
 
+// This Promise will run each test case that is:
+// 1. Wrapped in an element with class name "test-case".
+// 2. Has data-expect attribute be an ordered list of elements to focus.
+// 3. Has data-description attribute be a string explaining the test.
+// e.g <div class="test-case" data-expect="b,a,c"
+//          data-description="Focus navigation">
+async function runFocusTestCases() {
+  const testCases = Array.from(document.querySelectorAll('.test-case'));
+  for (let testCase of testCases) {
+    promise_test(async () => {
+      const expected = testCase.dataset.expect.split(',');
+      await assert_focus_navigation_forward(expected);
+    }, testCase.dataset.description);
+  }
+}
-- 
cgit v1.2.3