From 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 03:47:29 +0200
Subject: Adding upstream version 115.8.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../delegatesFocus-highlight-sibling.html          | 126 ++++++++
 ...-navigation-slot-fallback-default-tabindex.html |  74 +++++
 .../focus-navigation-slot-fallback.html            |  71 ++++
 .../focus-navigation-slot-nested-2levels.html      |  63 ++++
 ...ocus-navigation-slot-nested-delegatesFocus.html |  51 +++
 .../focus-navigation-slot-nested-fallback.html     |  71 ++++
 .../focus-navigation-slot-nested.html              |  51 +++
 .../focus-navigation-slot-shadow-in-fallback.html  |  48 +++
 .../focus-navigation-slot-shadow-in-slot.html      |  47 +++
 .../focus-navigation-slot-with-tabindex.html       |  65 ++++
 .../focus-navigation-slots-in-slot.html            |  71 ++++
 .../focus-navigation/focus-navigation-slots.html   |  67 ++++
 .../focus-navigation-web-component-radio.html      |  70 ++++
 .../focus-navigation-with-delegatesFocus.html      | 358 +++++++++++++++++++++
 .../focus-navigation/focus-navigation.html         |  73 +++++
 .../focus-navigation/focus-nested-slots.html       |  52 +++
 .../focus-reverse-unassignable-slot.html           |  35 ++
 .../focus-reverse-unassigned-slot.html             |  39 +++
 .../focus-navigation/focus-unassignable-slot.html  |  28 ++
 .../focus-with-negative-index.html                 |  92 ++++++
 .../focus-navigation/resources/focus-utils.js      | 153 +++++++++
 .../focus-navigation/resources/shadow-dom.js       | 165 ++++++++++
 22 files changed, 1870 insertions(+)
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback-default-tabindex.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-fallback.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-fallback.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-slot.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-with-tabindex.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-web-component-radio.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-nested-slots.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-reverse-unassignable-slot.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-reverse-unassigned-slot.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-unassignable-slot.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/focus-with-negative-index.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js
 create mode 100644 testing/web-platform/tests/shadow-dom/focus-navigation/resources/shadow-dom.js

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

diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html b/testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html
new file mode 100644
index 0000000000..dde18128ad
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<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>
+<!-- Adapted from http://jsbin.com/dexinu/6/edit for layout test -->
+
+<template id='XMenuTemplate'>
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      background-color: #aaa;
+    }
+    :host(:focus) {
+      background-color: #ccc;
+    }
+    li {
+      display: inline-block;
+      position: relative;
+      background-color: #eee;
+    }
+    li:focus {
+      background-color: #fff;
+    }
+  </style>
+  <li tabindex='0'>Item One</li>
+  <li tabindex='0'>Item Two</li>
+  <li tabindex='0'>Item Three</li>
+</template>
+
+<section>
+  <x-menu id='XMenu1' tabindex='0'></x-menu>
+</section>
+<section>
+  <x-menu id='XMenu2' tabindex='0' delegatesFocus></x-menu>
+  <x-menu id='XMenu3' tabindex='0' delegatesFocus></x-menu>
+</section>
+<section>
+  <x-menu id='XMenu4' tabindex='0' delegatesFocus></x-menu>
+</section>
+
+<script>
+'use strict';
+
+const template = document.querySelector('#XMenuTemplate');
+
+customElements.define('x-menu', class extends HTMLElement {
+    connectedCallback() {
+        const delegatesFocus = this.hasAttribute('delegatesFocus');
+        this.attachShadow({mode: 'open', delegatesFocus: delegatesFocus})
+            .appendChild(document.importNode(template.content, true));
+    }
+});
+
+promise_test(async () => {
+    let xmenu1 = document.getElementById('XMenu1');
+
+    xmenu1.focus();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    assert_equals(document.activeElement.id, 'XMenu1');
+    assert_background_color('XMenu1', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusForward();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    assert_equals(document.activeElement.id, 'XMenu2');
+    await assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    await assert_background_color('XMenu2', 'rgb(204, 204, 204)');
+    await assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    await assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusForward();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    assert_equals(document.activeElement.id, 'XMenu3');
+    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusForward();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    assert_equals(document.activeElement.id, 'XMenu4');
+    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu4', 'rgb(204, 204, 204)');
+
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    assert_equals(document.activeElement.id, 'XMenu3');
+    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    assert_equals(document.activeElement.id, 'XMenu2');
+    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu2', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    assert_equals(document.activeElement.id, 'XMenu1');
+    assert_background_color('XMenu1', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+}, 'crbug/474687 :focus style should properly be applied to shadow hosts.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback-default-tabindex.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback-default-tabindex.html
new file mode 100644
index 0000000000..e8e0293e77
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback-default-tabindex.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<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>
+<p>Tests for moving focus by pressing tab key across shadow boundaries.<br>
+To manually test, press tab key six times then shift+tab seven times.<br>
+It should traverse focusable elements in the increasing numerical order and then in the reverse order.</p>
+
+<div id='host'>
+  <div slot='slot5' id='i2' tabindex=4>2. Assigned to slot5 whose tabindex is 2.</div>
+  <template data-mode='open'>
+    <slot name='slot1'>
+      x. The default tabindex for a slot node is set to 0.
+      <div id='i5' tabindex=0>5. The parent slot node's tabindex is 0. Second.</div>
+      <div id='i4' tabindex=2>4. The parent slot node's tabindex is 0. First.</div>
+    </slot>
+
+    <slot name='slot2' id='x1' tabindex=3>
+      x. The tabindex is 3. The slot node should be ignored.
+      <div id='i3' tabindex=10>3. The parent slot node's tabindex is 3. The slot node's tabindex matters. This element's tabindex comes after.</div>
+    </slot>
+
+    <slot name='slot3' id='x2' tabindex=0>
+      x. The tabindex is 0. The slot node should be ignored. If there is another slot node in same tabindex, the younger child comes first.
+      <div id='i6' tabindex=1>6. The parent slot node's tabindex is 0. First.</div>
+      <div id='i7' tabindex=1>7. The parent slot node's tabindex is 0. Second.</div>
+    </slot>
+
+    <slot name='slot4' id='x3' tabindex=1>
+      x. The tabindex is 1. The slot node should be ignored.
+      <div id='i1' tabindex=5>1. The slot node tabindex is 1.</div>
+    </slot>
+
+    <slot name='slot5' id='x5' tabindex=2>
+      x. The tabindex is 2. The slot node should be ignored. The host child is assigned to this slot node.
+      <div id='-' tabindex=1>-. The host child is assigned to the parent slot node. This text shouldn't apeare.</div>
+    </slot>
+
+    <slot name='slot6' id='x6' tabindex=5>
+      x. The tabindex is 5. The slot node should be ignored.
+      <div id='x6' tabindex=-1>x. tabindex is -1. Should be skipped.</div>
+    </slot>
+
+    <slot name='slot7' id='x7' tabindex=-1>
+      x. tabindex is -1. Should be skipped.
+      <div id='x8' tabindex=1>x. The parent slot node is skipped.</div>
+    </slot>
+  </template>
+</div>
+<script>
+
+promise_test(async () => {
+  convertTemplatesToShadowRootsWithin(host);
+
+  let elements = [
+    'host/i1',
+    'i2',
+    'host/i3',
+    'host/i4',
+    'host/i5',
+    'host/i6',
+    'host/i7'
+  ];
+
+  await assert_focus_navigation_forward(elements);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements);
+}, 'Default tabindex for a slot node should be 0.');
+
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback.html
new file mode 100644
index 0000000000..8b29558b50
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<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>
+<div id='log'></div>
+<p>
+  document tree: [i0 -> [x-foo]]<br>
+  x-foo's shadow tree: [j1 -> j2 -> [s1]]<br>
+  <b>slot #s1: [k1 -> [x-bar] -> k0 -> [s2] -> [s3]]</b><br>
+  x-bar's shadow tree: [m1 -> m2]<br>
+  slot #s2: [i1 -> i2]<br>
+  <b>slot #s3: [l1]<b><br><br>
+  <b>v1 ideal nav forward:  [i0 -> j1 -> j2 -> k1 -> x-bar -> m1 -> m2 -> k0 -> i1 -> i2 -> l1]</b><br>
+</p>
+
+<input id='i0' tabindex=0 value='i0'>
+<div id='x-foo'>
+  <input id='i2' slot='s2' tabindex=2 value='i2'>
+  <input id='i1' slot='s2' tabindex=1 value='i1'>
+  <template data-mode='open'>
+    <input id='j1' tabindex=1 value='j1'>
+    <slot id='s1' name='s1'> <!-- This slot does not have any assigned elements -->
+      <input id='k0' tabindex=0 value='k0'>
+      <input id='k1' tabindex=1 value='k1'>
+      <slot id='s2' name='s2'>
+        <input id='should-be-ignored'>
+      </slot>
+      <slot id='s3' name='s3'> <!-- This slot does not have any assigned elements -->
+        <input id='l1' value='l1'>
+      </slot>
+      <div id='x-bar' tabindex=2>
+        <template data-mode='open'>
+          <input id='m2' value='m2' tabindex=2>
+          <input id='m1' value='m1' tabindex=1>
+        </template>
+      </div>
+    </slot>
+    <input id='j2' tabindex=2 value='j2'>
+  </template>
+</div>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  let xfoo = document.getElementById('x-foo');
+  convertTemplatesToShadowRootsWithin(xfoo);
+
+  let elements = [
+      'i0',
+      'x-foo/j1',
+      'x-foo/j2',
+      'x-foo/k1',
+      'x-foo/x-bar',
+      'x-foo/x-bar/m1',
+      'x-foo/x-bar/m2',
+      'x-foo/k0',
+      'i1',
+      'i2',
+      'x-foo/l1'
+    ];
+
+    await assert_focus_navigation_forward(elements);
+    elements.reverse();
+    await assert_focus_navigation_backward(elements);
+}, 'Focus should jump to fallback elements when a slot does not have any assigned nodes.');
+</script>
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
new file mode 100644
index 0000000000..54def5ce7e
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<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>
+<div id="log"></div>
+
+<input id='i0'>
+<div id='outer'>
+  <template data-mode='open'>
+    <input id='outer-before'>
+    <slot></slot>
+    <input id='outer-after'>
+  </template>
+  <div id='dummy1'></div>
+  <div id='nested1'>
+    <template data-mode='open'>
+      <input id='inner-before'>
+      <div id='inner-div' tabindex='0'><slot></slot></div>
+      <input id='inner-after'>
+    </template>
+    <div id='dummy2'></div>
+    <div id='nested2'>
+      <template data-mode='open'>
+        <input id='innermost-before'>
+        <slot></slot>
+        <input id='innermost-after'>
+      </template>
+      <input id='innermost1'>
+      <input id='innermost2'>
+    </div>
+    <span>button</span>
+  </div>
+</div>
+<input id='i1'>
+
+<script>
+promise_test(async () => {
+  var outer = document.querySelector('#outer');
+  convertTemplatesToShadowRootsWithin(outer);
+
+  var elements = [
+    'i0',
+    'outer/outer-before',
+    'nested1/inner-before',
+    'nested1/inner-div',
+    'nested2/innermost-before',
+    'innermost1',
+    'innermost2',
+    'nested2/innermost-after',
+    'nested1/inner-after',
+    'outer/outer-after',
+    'i1'
+  ];
+
+  await assert_focus_navigation_forward(elements);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements);
+}, 'Focus controller should treat each slot as a focus scope.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-delegatesFocus.html
new file mode 100644
index 0000000000..94d8ce8e1f
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-delegatesFocus.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<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>
+<div id="log"></div>
+<!--
+This test case is based on the crbug.com/618587 reproduction case:
+http://jsbin.com/bonudiwagu/1/edit?html,output
+-->
+<input id='i0'>
+<div id='x-foo'>
+  <template data-mode='open' data-delegatesFocus>
+    <input id='inner-before'>
+    <slot></slot>
+    <input id='inner-after'>
+  </template>
+  <div id='nested'>
+    <template data-mode='open' data-delegatesFocus>
+      <input id='nested-x'>
+      <slot></slot>
+      <input id='nested-y'>
+    </template>
+    <input id='light'>
+  </div>
+</div>
+<input id='i1'>
+
+<script>
+promise_test(async () => {
+  var xFoo = document.querySelector('#x-foo');
+  convertTemplatesToShadowRootsWithin(xFoo);
+
+  var elements = [
+    'i0',
+    'x-foo/inner-before',
+    'nested/nested-x',
+    'light',
+    'nested/nested-y',
+    'x-foo/inner-after',
+    'i1'
+  ];
+
+  await assert_focus_navigation_forward(elements);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements);
+}, 'Focus controller should treat each slot as a focus scope.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-fallback.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-fallback.html
new file mode 100644
index 0000000000..93a6240fe3
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-fallback.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<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>
+<p>Tests for moving focus by pressing tab key across shadow boundaries.<br>
+To manually test, press tab key six times then shift+tab six times.<br>
+It should traverse focusable elements in the increasing numerical order and then in the reverse order.</p>
+<div id='host'>
+  <template data-mode='open'>
+    <slot name='slot1'>Slot shouldn't be focused.
+      <slot name='slot2'>Slot shouldn't be focused.
+        <div id='non1' tabindex=0>This text shouldn't appear.</div>
+      </slot>
+      <slot name='slot3'>Slot shouldn't be focused.
+        <div id='second' tabindex=0>2. No host child is assigned to slot3.</div>
+      </slot>
+    </slot>
+
+    <div id='third' tabindex=0>3. Inner Shadow Host.
+      <template data-mode='open'>
+        <slot name='slot4'>Slot shouldn't be focused.
+          <slot name='slot5'>Slot shouldn't be focused.
+            <div id='non2' tabindex=0>This text shouldn't appear.</div>
+          </slot>
+        </slot>
+      </template>
+      <div id='fourth' slot='slot4' tabindex=0>4. Assigned to slot4.</div>
+      <div id='non3' slot='slot5' tabindex=0>
+        This text shouldn't appear. slot5 is in the fallback content of slot4 which has assigned nodes.</div>
+    </div>
+
+    <div id='fifth' tabindex=0>5. Inner Shadow Host.
+      <template data-mode='open'>
+        <slot name='slot6'>Slot shouldn't be focused.
+          <div id='non4' tabindex=0>This text shouldn't appear.</div>
+        </slot>
+      </template>
+      <slot name='slot7' slot='slot6'>Slot shouldn't be focused. Assigned to slot6.
+        <div id='non5' tabindex=0>This text shouldn't appear.</div>
+      </slot>
+    </div>
+  </template>
+  <div id='first' slot='slot2' tabindex=0>1. Assigned to slot2.</div>
+  <div id='sixth' slot='slot7' tabindex=0>6. Assigned to slot7 which is assigned to slot6.</div>
+</div>
+<script>
+'use strict';
+
+promise_test(async () => {
+  let host = document.getElementById('host');
+  convertTemplatesToShadowRootsWithin(host);
+
+  let elements = [
+       'first',
+       'host/second',
+       'host/third',
+       'host/fourth',
+       'host/fifth',
+       'sixth'
+  ];
+
+  await assert_focus_navigation_forward(elements);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements);
+}, 'Focus should cover assigned elements of an assigned slot espacially there are fallback contents.');
+
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested.html
new file mode 100644
index 0000000000..7bfe5dc784
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<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>
+<div id="log"></div>
+<!--
+This test case is based on the crbug.com/618587 reproduction case:
+http://jsbin.com/bonudiwagu/1/edit?html,output
+-->
+<input id='i0'>
+<div id='x-foo'>
+  <template data-mode='open'>
+    <input id='inner-before'>
+    <slot></slot>
+    <input id='inner-after'>
+  </template>
+  <div id='nested'>
+    <template data-mode='open'>
+      <input id='nested-x'>
+      <slot></slot>
+      <input id='nested-y'>
+    </template>
+    <input id='light'>
+  </div>
+</div>
+<input id='i1'>
+
+<script>
+promise_test(async () => {
+  var xFoo = document.querySelector('#x-foo');
+  convertTemplatesToShadowRootsWithin(xFoo);
+
+  var elements = [
+    'i0',
+    'x-foo/inner-before',
+    'nested/nested-x',
+    'light',
+    'nested/nested-y',
+    'x-foo/inner-after',
+    'i1'
+  ];
+
+  await assert_focus_navigation_forward(elements);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements);
+}, 'Focus controller should treat each slot as a focus scope.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-fallback.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-fallback.html
new file mode 100644
index 0000000000..7192a42584
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-fallback.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<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>
+<div id="log"></div>
+
+<input id="i0" tabindex=0 value="i0">
+<div id="fallback">
+  <template data-mode="open">
+    <slot id="s0" name="s0">
+      <div id="x-foo">
+        <template data-mode="open">
+          <input id="a2" tabindex=3 value="a2">
+          <slot id="s1" name="s1" tabindex=2>
+            <slot id="s2" name="s2">
+              <input id="a1" slot="s2" value="a1">
+            </slot>
+          </slot>
+          <input id="a0" tabindex=1 value="a0">
+        </template>
+      </div>
+    </slot>
+  </template>
+</div>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+    let fallback = document.getElementById('fallback');
+    convertTemplatesToShadowRootsWithin(fallback);
+
+    let elements = [
+        'i0',
+        'fallback/x-foo/a0',
+        'fallback/x-foo/a1',
+        'fallback/x-foo/a2'
+    ];
+
+    await assert_focus_navigation_forward(elements);
+    elements.reverse();
+    await assert_focus_navigation_backward(elements);
+}, 'Focus should cover assigned elements of an assigned slot, as well as elements that are directly assigned to a slot.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-slot.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-slot.html
new file mode 100644
index 0000000000..4f320574ed
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-shadow-in-slot.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<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>
+<div id="log"></div>
+
+<input id="i0" tabindex=0 value="i0">
+<div id="assigned">
+  <template data-mode="open">
+    <slot id="s0" name="s0">
+      <div id="x-foo">
+        <input id="a1" slot="s2" value="a1">
+        <template data-mode="open">
+          <input id="a2" tabindex=3 value="a2">
+          <slot id="s1" name="s1" tabindex=2>
+            <slot id="s2" name="s2"></slot>
+          </slot>
+          <input id="a0" tabindex=1 value="a0">
+        </template>
+      </div>
+    </slot>
+  </template>
+</div>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+    let assigned = document.getElementById('assigned');
+    convertTemplatesToShadowRootsWithin(assigned);
+
+    let elements = [
+        'i0',
+        'assigned/x-foo/a0',
+        'assigned/a1',
+        'assigned/x-foo/a2'
+    ];
+
+    await assert_focus_navigation_forward(elements);
+    elements.reverse();
+    await assert_focus_navigation_backward(elements);
+}, 'Focus should cover assigned elements of an assigned slot, as well as elements that are directly assigned to a slot.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-with-tabindex.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-with-tabindex.html
new file mode 100644
index 0000000000..880fb83130
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-with-tabindex.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<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>
+<div id='log'></div>
+<p>
+  document tree: [i0 -> [x-foo]]<br>
+  x-foo's shadow tree: [j1 -> [s1] -> [s2] -> j2 ->[x-bar]]<br>
+  x-bar's shadow tree: [[s3] -> k1]<br>
+  slot #s1: [i1 -> i2]<br>
+  slot #s2: [i3]<br>
+  slot #s3: [l1 -> l2]<br><br>
+  <b>v1 ideal nav forward:  [i0 -> j1 -> i1 -> i2 -> i3 -> j2 -> x-bar -> l1 -> l2 -> k1]</b><br>
+</p>
+
+<input id='i0' tabindex=0 value='i0'>
+<div id='x-foo'>
+  <input id='i2' slot='s1' tabindex=2 value='i2'>
+  <input id='i1' slot='s1' tabindex=1 value='i1'>
+  <input id='i3' slot='s2' tabindex=3 value='i3'>
+  <template data-mode='open'>
+    <div id='x-bar' tabindex=5>
+      <input id='l2' slot='s3' tabindex=2 value='l2'>
+      <input id='l1' slot='s3' tabindex=1 value='l1'>
+      <template data-mode='open'>
+        <slot id='s3' name='s3' tabindex=1></slot>
+        <input id='k1' tabindex=2 value='k1'>
+      </template>
+    </div>
+    <input id='j1' tabindex=1 value='j1'>
+    <slot id='s2' name='s2' tabindex=3></slot>
+    <slot id='s1' name='s1' tabindex=2></slot>
+    <input id='j2' tabindex=4 value='j2'>
+  </template>
+</div>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+    let xfoo = document.getElementById('x-foo');
+    convertTemplatesToShadowRootsWithin(xfoo);
+
+    let elements = [
+        'i0',
+        'x-foo/j1',
+        'i1',
+        'i2',
+        'i3',
+        'x-foo/j2',
+        'x-foo/x-bar',
+        'x-foo/l1',
+        'x-foo/l2',
+        'x-foo/x-bar/k1',
+    ];
+
+    await assert_focus_navigation_forward(elements);
+    elements.reverse();
+    await assert_focus_navigation_backward(elements);
+}, 'Slots tabindex should be considred in focus navigation.');
+</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
new file mode 100644
index 0000000000..5cc8abbf01
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<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>
+<p>Tests for moving focus by pressing tab key across nodes in slot scope.<br>
+
+<div id="b1" tabindex="0">outside</div>
+<div id='host'>
+  <template data-mode='open'>
+    <slot></slot>
+  </template>
+  <slot>
+    <div id="1A" tabindex="0">single nested slot</div>
+    <div id="1B" tabindex="0">single nested slot</div>
+  </slot>
+  <slot>
+    <div id="1C" tabindex="0">single nested slot</div>
+  </slot>
+  <slot>
+    <slot>
+      <div id="2A" tabindex="0">double nested slot</div>
+      <div id="2B" tabindex="0">double nested slot</div>
+    </slot>
+  </slot>
+  <slot>
+    <div id="3A" tabindex="0">single nested slot</div>
+    <slot>
+      <div id="3B" tabindex="0">double nested slot</div>
+      <slot>
+        <div id="3C" tabindex="0">Triple nested slot</div>
+        <div id="3D" tabindex="0">Triple nested slot</div>
+      </slot>
+      <div id="3E" tabindex="0">double nested slot</div>
+    </slot>
+    <div id="3F" tabindex="0">single nested slot</div>
+  </slot>
+</div>
+<div id="b2" tabindex="0">outside</div>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  convertTemplatesToShadowRootsWithin(host);
+
+  let elements = [
+    'b1',
+    '1A',
+    '1B',
+    '1C',
+    '2A',
+    '2B',
+    '3A',
+    '3B',
+    '3C',
+    '3D',
+    '3E',
+    '3F',
+    'b2',
+  ];
+
+  await assert_focus_navigation_forward(elements);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements);
+}, 'Focus should cover assigned nodes of slot, especially for nested slots in slot scope.');
+
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots.html
new file mode 100644
index 0000000000..f2de50f6eb
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<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>
+<div id="log"></div>
+<p>
+  document tree: [i0 -> [x-foo]]<br>
+  x-foo's shadow tree: [j1 -> [s1] -> [s2] -> j2 ->[x-bar]]<br>
+  x-bar's shadow tree: [k1 -> [s3]]<br>
+  slot #s1: [i1 -> i2]<br>
+  slot #s2: [i3]<br>
+  slot #s3: [[s4]]<br>
+  slot #s4: [i4 -> i5]<br><br>
+  <b>v1 ideal nav forward:  [i0 -> j1 -> i1 -> i2 -> i3 -> j2 -> x-bar -> k1 -> i4 -> i5]</b><br>
+</p>
+
+<input id="i0" tabindex=0 value="i0">
+<div id="x-foo">
+  <input id="i2" slot="s1" tabindex=2 value="i2">
+  <input id="i1" slot="s1" tabindex=1 value="i1">
+  <input id="i3" slot="s2" tabindex=3 value="i3">
+  <input id="i4" slot="s4" tabindex=4 value="i4">
+  <input id="i5" slot="s4" tabindex=5 value="i5">
+  <template data-mode="open">
+    <div id="x-bar" tabindex=5>
+      <slot id="s4" name="s4" slot="s3"></slot>
+      <template data-mode="open">
+        <slot id="s3" name="s3" tabindex=2></slot>
+        <input id="k1" tabindex=1 value="k1">
+      </template>
+    </div>
+    <input id="j1" tabindex=1 value="j1">
+    <slot id="s2" name="s2" tabindex=3></slot>
+    <slot id="s1" name="s1" tabindex=2></slot>
+    <input id="j2" tabindex=4 value="j2">
+  </template>
+</div>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+    let xfoo = document.getElementById('x-foo');
+    convertTemplatesToShadowRootsWithin(xfoo);
+
+    let elements = [
+        'i0',
+        'x-foo/j1',
+        'i1',
+        'i2',
+        'i3',
+        'x-foo/j2',
+        'x-foo/x-bar',
+        'x-foo/x-bar/k1',
+        'i4',
+        'i5'
+    ];
+
+    await assert_focus_navigation_forward(elements);
+    elements.reverse();
+    await assert_focus_navigation_backward(elements);
+}, 'Focus should cover assigned elements of an assigned slot, as well as elements that are directly assigned to a slot.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-web-component-radio.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-web-component-radio.html
new file mode 100644
index 0000000000..9304cc2ce1
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-web-component-radio.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<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>
+
+<template id="custom-radio">
+  <span aria-role="radio" tabindex="0">&#x1F518;</span>
+  <slot></slot>
+</template>
+
+<div tabindex="0" id="start">OUT</div>
+<form>
+  <custom-radio name="radio" id="A">A</x-radio>
+  <custom-radio name="radio" id="B">B</x-radio>
+</form>
+<form>
+  <custom-radio name="radio" id="C">C</x-radio>
+  <custom-radio name="radio" id="D">D</x-radio>
+</form>
+<div tabindex="0" id="end">OUT</div>
+
+<script>
+const template = document.querySelector('#custom-radio');
+
+class CustomRadio extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true }).appendChild(
+        template.content.cloneNode(true),
+    );
+  }
+}
+customElements.define('custom-radio', CustomRadio);
+
+async function assert_web_component_focus_navigation_forward(elements) {
+  let start = document.getElementById(elements[0]);
+  start.focus();
+  for (let i = 1; i < elements.length; i++) {
+    await navigateFocusForward();
+    assert_equals(document.activeElement.id, elements[i]);
+  }
+}
+
+async function assert_web_component_focus_navigation_backward(elements) {
+  let end = document.getElementById(elements[elements.length - 1]);
+  end.focus();
+  for (let i = elements.length - 2; i >= 0; i--) {
+    await navigateFocusBackward();
+    assert_equals(document.activeElement.id, elements[i]);
+  }
+}
+
+promise_test(async () => {
+  let elements = [
+    'start',
+    'A',
+    'B',
+    'C',
+    'D',
+    'end'
+  ];
+
+  await assert_web_component_focus_navigation_forward(elements);
+  await assert_web_component_focus_navigation_backward(elements);
+}, 'Focus for web component input type elements should be bound by <form> inside shadow DOM');
+</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
new file mode 100644
index 0000000000..e097261526
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html
@@ -0,0 +1,358 @@
+<!DOCTYPE html>
+<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>
+
+<p>This tests TAB focus navigation with delegatesFocus flag on shadow hosts</p>
+<pre id="console"></pre>
+<div id="sandbox"></div>
+<script>
+
+function prepareDOMTree(parent, mode, tabindex, delegatesFocus) {
+    parent.innerHTML = `
+      <div id="testform">
+        <input id="input-before">
+        <div id="host-div">
+          <input id="inner-input">
+        </div>
+        <input id="input-after">
+      </div>
+    `;
+    const hostDiv = document.getElementById('host-div');
+    const shadowRoot = hostDiv.attachShadow({ mode, delegatesFocus });
+
+    const inputBefore = document.getElementById('input-before');
+    const innerInput = document.getElementById('inner-input');
+    const inputAfter = document.getElementById('input-after');
+    shadowRoot.appendChild(innerInput);
+
+    if (tabindex !== null)
+      hostDiv.tabIndex = tabindex;
+
+    return {
+      hostDiv,
+      shadowRoot,
+      inputBefore,
+      innerInput,
+      inputAfter,
+    };
+
+}
+
+promise_test(async () => {
+  const { shadowRoot, hostDiv } = prepareDOMTree(sandbox, 'open', null, false);
+  assert_false(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, -1);
+
+  const elements = [
+    'input-before',
+    'host-div/inner-input',
+    'input-after',
+  ];
+
+  await assert_focus_navigation_forward(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements, false);
+}, 'Testing tab navigation order with mode open, no tabindex and delegatesFocus=false.');
+
+promise_test(async () => {
+  const { shadowRoot, hostDiv } = prepareDOMTree(sandbox, 'open', null, true);
+  assert_true(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, -1);
+
+  const elements = [
+    'input-before',
+    'host-div/inner-input',
+    'input-after',
+  ];
+
+  await assert_focus_navigation_forward(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements, false);
+}, 'Testing tab navigation order with mode open, no tabindex and delegatesFocus=true.');
+
+promise_test(async () => {
+  const { shadowRoot, hostDiv } = prepareDOMTree(sandbox, 'open', 0, false);
+  assert_false(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, 0);
+
+  const elements = [
+    'input-before',
+    'host-div',
+    'host-div/inner-input',
+    'input-after',
+  ];
+
+  await assert_focus_navigation_forward(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements, false);
+}, 'Testing tab navigation order with mode open, tabindex=0 and delegatesFocus=false.');
+
+promise_test(async () => {
+  const { shadowRoot, hostDiv } = prepareDOMTree(sandbox, 'open', 0, true);
+  assert_true(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, 0);
+
+  const elements = [
+    'input-before',
+    // 'host-div', // should skip host when delegatesFocus=true
+    'host-div/inner-input',
+    'input-after',
+  ];
+
+  await assert_focus_navigation_forward(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements, false);
+}, 'Testing tab navigation order with mode open, tabindex=0 and delegatesFocus=true.');
+
+promise_test(async () => {
+  const { shadowRoot, hostDiv } = prepareDOMTree(sandbox, 'open', -1, false);
+  assert_false(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, -1);
+
+  const elements = [
+    'input-before',
+    'input-after',
+  ];
+
+  await assert_focus_navigation_forward(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements, false);
+}, 'Testing tab navigation order with mode open, tabindex=-1 and delegatesFocus=false.');
+
+promise_test(async () => {
+  const { shadowRoot, hostDiv } = prepareDOMTree(sandbox, 'open', -1, true);
+  assert_true(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, -1);
+
+  const elements = [
+    'input-before',
+    // 'host-div/inner-input', // The whole shadow tree should be skipped
+    'input-after',
+  ];
+
+  await assert_focus_navigation_forward(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements, false);
+}, 'Testing tab navigation order with mode open, tabindex=-1 and delegatesFocus=true.');
+
+promise_test(async () => {
+  const { shadowRoot, hostDiv } = prepareDOMTree(sandbox, 'open', 1, false);
+  assert_false(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, 1);
+
+  const elements = [
+    'host-div',
+    'host-div/inner-input',
+    'input-before',
+    'input-after',
+  ];
+
+  await assert_focus_navigation_forward(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements, false);
+}, 'Testing tab navigation order with mode open, tabindex=1 and delegatesFocus=false.');
+
+promise_test(async () => {
+  const { shadowRoot, hostDiv } = prepareDOMTree(sandbox, 'open', 1, true);
+  assert_true(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, 1);
+
+  const elements = [
+    // 'host-div', // should skip host when delegatesFocus=true
+    'host-div/inner-input',
+    'input-before',
+    'input-after',
+  ];
+
+  await assert_focus_navigation_forward(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements, false);
+}, 'Testing tab navigation order with mode open, tabindex=1 and delegatesFocus=true.');
+
+
+promise_test(async () => {
+  const {
+    hostDiv,
+    shadowRoot,
+    inputBefore,
+    innerInput,
+    inputAfter,
+  } = prepareDOMTree(sandbox, 'closed', null, false);
+  assert_false(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, -1);
+
+  const elements = [
+    [inputBefore],
+    [innerInput, shadowRoot],
+    [inputAfter],
+  ];
+
+  await assert_focus_navigation_forward_with_shadow_root(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward_with_shadow_root(elements, false);
+}, 'Testing tab navigation order with mode closed, no tabindex and delegatesFocus=false.');
+
+promise_test(async () => {
+  const {
+    hostDiv,
+    shadowRoot,
+    inputBefore,
+    innerInput,
+    inputAfter,
+  } = prepareDOMTree(sandbox, 'closed', null, true);
+  assert_true(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, -1);
+
+  const elements = [
+    [inputBefore],
+    [innerInput, shadowRoot],
+    [inputAfter],
+  ];
+
+  await assert_focus_navigation_forward_with_shadow_root(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward_with_shadow_root(elements, false);
+}, 'Testing tab navigation order with mode closed, no tabindex and delegatesFocus=true.');
+
+promise_test(async () => {
+  const {
+    hostDiv,
+    shadowRoot,
+    inputBefore,
+    innerInput,
+    inputAfter,
+  } = prepareDOMTree(sandbox, 'closed', 0, false);
+  assert_false(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, 0);
+
+  const elements = [
+    [inputBefore],
+    [hostDiv],
+    [innerInput, shadowRoot],
+    [inputAfter],
+  ];
+
+  await assert_focus_navigation_forward_with_shadow_root(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward_with_shadow_root(elements, false);
+}, 'Testing tab navigation order with mode closed, tabindex=0 and delegatesFocus=false.');
+
+promise_test(async () => {
+  const {
+    hostDiv,
+    shadowRoot,
+    inputBefore,
+    innerInput,
+    inputAfter,
+  } = prepareDOMTree(sandbox, 'closed', 0, true);
+  assert_true(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, 0);
+
+  const elements = [
+    [inputBefore],
+    // [hostDiv], // should skip host when delegatesFocus=true
+    [innerInput, shadowRoot],
+    [inputAfter],
+  ];
+
+  await assert_focus_navigation_forward_with_shadow_root(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward_with_shadow_root(elements, false);
+}, 'Testing tab navigation order with mode closed, tabindex=0 and delegatesFocus=true.');
+
+promise_test(async () => {
+  const {
+    hostDiv,
+    shadowRoot,
+    inputBefore,
+    innerInput,
+    inputAfter,
+  } = prepareDOMTree(sandbox, 'closed', -1, false);
+  assert_false(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, -1);
+
+  const elements = [
+    [inputBefore],
+    [inputAfter],
+  ];
+
+  await assert_focus_navigation_forward_with_shadow_root(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward_with_shadow_root(elements, false);
+}, 'Testing tab navigation order with mode closed, tabindex=-1 and delegatesFocus=false.');
+
+promise_test(async () => {
+  const {
+    hostDiv,
+    shadowRoot,
+    inputBefore,
+    innerInput,
+    inputAfter,
+  } = prepareDOMTree(sandbox, 'closed', -1, true);
+  assert_true(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, -1);
+
+  const elements = [
+    [inputBefore],
+    // [innerInput, shadowRoot], // The whole shadow tree should be skipped
+    [inputAfter],
+  ];
+
+  await assert_focus_navigation_forward_with_shadow_root(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward_with_shadow_root(elements, false);
+}, 'Testing tab navigation order with mode closed, tabindex=-1 and delegatesFocus=true.');
+
+promise_test(async () => {
+  const {
+    hostDiv,
+    shadowRoot,
+    inputBefore,
+    innerInput,
+    inputAfter,
+  } = prepareDOMTree(sandbox, 'closed', 1, false);
+  assert_false(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, 1);
+
+  const elements = [
+    [hostDiv],
+    [innerInput, shadowRoot],
+    [inputBefore],
+    [inputAfter],
+  ];
+
+  await assert_focus_navigation_forward_with_shadow_root(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward_with_shadow_root(elements, false);
+}, 'Testing tab navigation order with mode closed, tabindex=1 and delegatesFocus=false.');
+
+promise_test(async () => {
+  const {
+    hostDiv,
+    shadowRoot,
+    inputBefore,
+    innerInput,
+    inputAfter,
+  } = prepareDOMTree(sandbox, 'closed', 1, true);
+  assert_true(shadowRoot.delegatesFocus);
+  assert_equals(hostDiv.tabIndex, 1);
+
+  const elements = [
+    // [hostDiv], // should skip host when delegatesFocus=true
+    [innerInput, shadowRoot],
+    [inputBefore],
+    [inputAfter],
+  ];
+
+  await assert_focus_navigation_forward_with_shadow_root(elements, false);
+  elements.reverse();
+  await assert_focus_navigation_backward_with_shadow_root(elements, false);
+}, 'Testing tab navigation order with mode closed, tabindex=1 and delegatesFocus=true.');
+
+
+</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
new file mode 100644
index 0000000000..fabcf88170
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<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>
+<div id="log"></div>
+<p>
+  document tree: [i0 -> [x-foo]]<br>
+  x-foo's shadow tree: [j5 -> [x-bar] -> j6]<br>
+  x-bar's shadow tree: [k1 -> k0 -> [s2]]<br>
+  slot #s2: [j1 -> j2 -> j3 -> j4 -> [s1] -> j0]<br><br>
+  slot #s1: [i1 -> i2]<br>
+  <b>v1 ideal nav forward:  [i0 -> j5 -> xbar -> k1 -> k0 -> j1 -> j2 -> j3 -> j4 -> i1 -> i2 -> j0 -> j6]</b><br>
+</p>
+
+<input id="i0" tabindex=0 value="i0">
+<div id="x-foo">
+  <input id="i2" slot="s1" tabindex=2 value="i2">
+  <input id="i1" slot="s1" tabindex=1 value="i1">
+  <template data-mode="open">
+    <div id="x-bar" tabindex=4>
+      <input id="j1" slot="s2" tabindex=1 value="j1">
+      <slot id="s1" name="s1" slot="s2"></slot>
+      <input id="j0" slot="s2" tabindex=0 value="j0">
+      <input id="j3" slot="s2" tabindex=2 value="j3">
+      <div id="j4" slot="s2" tabindex=3>
+        <input id="j2" tabindex=1 value="j2">
+      </div>
+      <template data-mode="open">
+        <input id="k0" tabindex=0 value="k0">
+        <slot id="s2" name="s2"></slot>
+        <input id="k1" tabindex=1 value="k1">
+      </template>
+    </div>
+    <input id="j6" tabindex=4 value="j6">
+    <input id="j5" tabindex=3 value="j5">
+  </template>
+</div>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+    let xfoo = document.getElementById('x-foo');
+    convertTemplatesToShadowRootsWithin(xfoo);
+    let sr = xfoo.shadowRoot;
+    let xbar = sr.querySelector('div');
+    convertTemplatesToShadowRootsWithin(xbar);
+
+    let elements = [
+        'i0',
+        'x-foo/j5',
+        'x-foo/x-bar',
+        'x-foo/x-bar/k1',
+        'x-foo/x-bar/k0',
+        'x-foo/j1',
+        'x-foo/j2',
+        'x-foo/j3',
+        'x-foo/j4',
+        'i1',
+        'i2',
+        'x-foo/j0',
+        'x-foo/j6'
+    ];
+
+    await assert_focus_navigation_forward(elements);
+    elements.reverse();
+    await assert_focus_navigation_backward(elements);
+}, 'Focus controller should treat slots as a focus scope.');
+</script>
diff --git 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
new file mode 100644
index 0000000000..8c7c1d1a80
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-nested-slots.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1209217">
+<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/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 shadowrootmode=open>
+    <slot name=myslot></slot>
+  </template>
+  <slot slot=myslot>
+    <div id=div2 tabindex=0>two</div>
+    <div id=div3 tabindex=0>three</div>
+    <div id=div4 tabindex=0>four</div>
+  </slot>
+</span>
+<div id=div5 tabindex=0>five</div>
+
+<script>
+
+promise_test(async () => {
+  polyfill_declarative_shadow_dom(document);
+  div1.focus();
+  assert_equals(document.activeElement, div1);
+
+  await navigateFocusForward();
+  assert_equals(document.activeElement, div2);
+  await navigateFocusForward();
+  assert_equals(document.activeElement, div3);
+  await navigateFocusForward();
+  assert_equals(document.activeElement, div4);
+  await navigateFocusForward();
+  assert_equals(document.activeElement, div5);
+  await navigateFocusBackward();
+  assert_equals(document.activeElement, div4);
+  await navigateFocusBackward();
+  assert_equals(document.activeElement, div3);
+  await navigateFocusBackward();
+  assert_equals(document.activeElement, div2);
+  await navigateFocusBackward();
+  assert_equals(document.activeElement, div1);
+}, `Verifies that focus order goes in flat tree order with buttons inside nested slots which have a mixture of assigned and unassigned states.`);
+
+</script>
diff --git 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
new file mode 100644
index 0000000000..2eec3acc88
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-reverse-unassignable-slot.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1014868">
+<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/declarative-shadow-dom-polyfill.js"></script>
+<script src="resources/shadow-dom.js"></script>
+<script src="resources/focus-utils.js"></script>
+
+<div>
+  <template shadowrootmode=open>
+    <slot />
+  </template>
+  <slot>
+    <input id=input1>
+  </slot>
+  <slot>
+    <input id=input2>
+  </slot>
+</div>
+
+<script>
+promise_test(async () => {
+  polyfill_declarative_shadow_dom(document);
+  input2.focus();
+  assert_equals(document.activeElement, input2);
+
+  await navigateFocusBackward();
+  assert_equals(document.activeElement, input1);
+}, `Verifies that focusing backwards from an input inside a slot which has no shadow root goes to the previous focusable element in light DOM.`);
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-reverse-unassigned-slot.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-reverse-unassigned-slot.html
new file mode 100644
index 0000000000..e19ea44288
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-reverse-unassigned-slot.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<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>
+<div id="log"></div>
+
+<input id=i0 value=i0>
+<div id=outer>
+  <template data-mode=open>
+    <div id=inner>
+      <template data-mode=open>
+        <div>
+          <slot name=inside></slot>
+        </div>
+      </template>
+      <slot name=inside slot=inside>
+        <input id=i1 value=i1>
+      </slot>
+    </div>
+  </template>
+</div>
+<input id=i2 value=i2>
+
+<script>
+promise_test(async () => {
+  convertTemplatesToShadowRootsWithin(document.getElementById('outer'));
+
+  const elements = [
+    'i2',
+    'outer/i1',
+    'i0'
+  ];
+  await assert_focus_navigation_backward(elements);
+}, `Verifies that focusing backwards from a button inside a slot which has no assigned nodes goes to the previous focusable element.`);
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-unassignable-slot.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-unassignable-slot.html
new file mode 100644
index 0000000000..135569d94c
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-unassignable-slot.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1209217">
+<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>
+
+<slot>
+  <input id=input1>
+</slot>
+<slot>
+  <input id=input2>
+</slot>
+
+<script>
+promise_test(async () => {
+  input1.focus();
+  assert_equals(document.activeElement, input1);
+
+  await navigateFocusForward();
+  assert_equals(document.activeElement, input2);
+}, `Verifies that focusing forwards from an input inside a slot which has no shadow root goes to the next focusable element in light DOM.`);
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-with-negative-index.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-with-negative-index.html
new file mode 100644
index 0000000000..95dc98fc02
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-with-negative-index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<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>
+<div id='log'></div>
+<p>
+  document tree: [i0 -> [x-foo]]<br>
+  x-foo's shadow tree: [j5 -> [x-bar] -> j6]<br>
+  x-bar's shadow tree: [k1 -> k0 -> [s2]]<br>
+  slot #s2: [j1 -> j2 -> j3 -> j4 -> [s1] -> j0]<br><br>
+  slot #s1: [i1 -> i2]<br>
+  <b>v1 ideal nav forward:  [i0 -> j5 -> xbar -> k1 -> k0 -> j6]</b><br>
+</p>
+
+  <input id='i0' tabindex=0 value='i0'>
+  <div id='x-foo'>
+    <input id='i2' slot='s1' tabindex=2 value='i2'>
+    <input id='i1' slot='s1' tabindex=1 value='i1'>
+    <template data-mode='open'>
+      <div id='x-bar' tabindex=4>
+        <input id='j1' slot='s2' tabindex=1 value='j1'>
+        <slot id='s1' name='s1' slot='s2'></slot>
+        <input id='j0' slot='s2' tabindex=0 value='j0'>
+        <input id='j3' slot='s2' tabindex=2 value='j3'>
+        <div id='j4' slot='s2' tabindex=3>
+          <input id='j2' tabindex=1 value='j2'>
+        </div>
+        <template data-mode='open'>
+          <input id='k0' tabindex=0 value='k0'>
+          <slot id='s2' name='s2' tabindex=-1></slot>
+          <input id='k1' tabindex=1 value='k1'>
+        </template>
+      </div>
+      <div id='to-be-ignored-host' tabindex=-1>
+        <template data-mode='open'>
+          <input id='ignored-input-in-shadow-host1' tabindex=1 value='ignored'>
+          <input id='ignored-input-in-shadow-host2' tabindex=2 value='ignored'>
+        </template>
+      </div>
+      <input id='j6' tabindex=4 value='j6'>
+      <input id='j5' tabindex=3 value='j5'>
+    </template>
+  </div>
+</div>
+
+<script>
+'use strict';
+
+let xfoo = document.getElementById('x-foo');
+convertTemplatesToShadowRootsWithin(xfoo);
+let sr = xfoo.shadowRoot;
+
+promise_test(async () => {
+    let elements = [
+        'i0',
+        'x-foo/j5',
+        'x-foo/x-bar',
+        'x-foo/x-bar/k1',
+        'x-foo/x-bar/k0',
+        'x-foo/j6'
+    ];
+
+    await assert_focus_navigation_forward(elements);
+    elements.reverse();
+    await assert_focus_navigation_backward(elements);
+}, 'Focus controller should treat slots as a focus scope.');
+
+promise_test(async () => {
+    let ignoredHost = sr.getElementById('to-be-ignored-host');
+    let ignoredInput1 = ignoredHost.shadowRoot.querySelector('input');
+    let ignoredInput2 = ignoredInput1.nextElementSibling;
+
+    let elements = [
+        'x-foo/to-be-ignored-host/ignored-input-in-shadow-host1',
+        'x-foo/to-be-ignored-host/ignored-input-in-shadow-host2',
+        'x-foo/j6'
+    ];
+
+    await assert_focus_navigation_forward(elements);
+
+    let elementsBackward = [
+        'x-foo/to-be-ignored-host/ignored-input-in-shadow-host2',
+        'x-foo/to-be-ignored-host/ignored-input-in-shadow-host1',
+        'x-foo/x-bar/k0'
+    ];
+    await assert_focus_navigation_backward(elementsBackward);
+}, 'This is a regression test: After focusing negative tabindex-ed elements, focus moves in tree order.');
+</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
new file mode 100644
index 0000000000..c23581a15e
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js
@@ -0,0 +1,153 @@
+'use strict';
+
+async function navigateFocusForward() {
+  return new test_driver.Actions()
+    .keyDown('\uE004')
+    .keyUp('\uE004')
+    .send();
+}
+
+async function navigateFocusBackward() {
+  return new test_driver.Actions()
+    .keyDown('\uE050')
+    .keyDown('\uE004')
+    .keyUp('\uE004')
+    .keyUp('\uE050')
+    .send();
+}
+
+// If shadow root is open, can find element using element path
+// If shadow root is open, can find the shadowRoot from the element
+
+function innermostActiveElement(element) {
+  element = element || document.activeElement;
+  if (isIFrameElement(element)) {
+    if (element.contentDocument.activeElement)
+      return innermostActiveElement(element.contentDocument.activeElement);
+    return element;
+  }
+  if (isShadowHost(element)) {
+    let shadowRoot = element.shadowRoot;
+    if (shadowRoot) {
+      if (shadowRoot.activeElement)
+        return innermostActiveElement(shadowRoot.activeElement);
+    }
+  }
+  return element;
+}
+
+function isInnermostActiveElement(path) {
+  const element = getNodeInComposedTree(path);
+  if (!element)
+    return false;
+  return element === innermostActiveElement();
+}
+
+async function shouldNavigateFocus(fromElement, direction) {
+  if (!fromElement)
+    return false;
+
+  fromElement.focus();
+  if (fromElement !== innermostActiveElement())
+    return false;
+
+  if (direction == 'forward')
+    await navigateFocusForward();
+  else
+    await navigateFocusBackward();
+
+  return true;
+}
+
+async function assert_focus_navigation_element(fromPath, toPath, direction) {
+  const fromElement = getNodeInComposedTree(fromPath);
+  const result = await shouldNavigateFocus(fromElement, direction);
+  assert_true(result, 'Failed to focus ' + fromPath);
+
+  const message =
+    `Focus should move ${direction} from ${fromPath} to ${toPath}`;
+  const toElement = getNodeInComposedTree(toPath);
+  assert_equals(innermostActiveElement(), toElement, message);
+}
+
+async function assert_focus_navigation_elements(elements, direction) {
+  assert_true(
+    elements.length >= 2,
+    'length of elements should be greater than or equal to 2.');
+  for (var i = 0; i + 1 < elements.length; ++i)
+    await assert_focus_navigation_element(elements[i], elements[i + 1], direction);
+
+}
+
+async function assert_focus_navigation_forward(elements) {
+  return assert_focus_navigation_elements(elements, 'forward');
+}
+
+async function assert_focus_navigation_backward(elements) {
+  return assert_focus_navigation_elements(elements, 'backward');
+}
+
+
+// If shadow root is closed, need to pass shadowRoot and element to find
+// innermost active element
+
+function isShadowHostOfRoot(shadowRoot, node) {
+  return shadowRoot && shadowRoot.host.isEqualNode(node);
+}
+
+function innermostActiveElementWithShadowRoot(shadowRoot, element) {
+  element = element || document.activeElement;
+  if (isIFrameElement(element)) {
+    if (element.contentDocument.activeElement)
+      return innermostActiveElementWithShadowRoot(shadowRoot, element.contentDocument.activeElement);
+    return element;
+  }
+  if (isShadowHostOfRoot(shadowRoot, element)) {
+    if (shadowRoot.activeElement)
+      return innermostActiveElementWithShadowRoot(shadowRoot, shadowRoot.activeElement);
+  }
+  return element;
+}
+
+async function shouldNavigateFocusWithShadowRoot(from, direction) {
+  const [fromElement, shadowRoot] = from;
+  if (!fromElement)
+    return false;
+
+  fromElement.focus();
+  if (fromElement !== innermostActiveElementWithShadowRoot(shadowRoot))
+    return false;
+
+  if (direction == 'forward')
+    await navigateFocusForward();
+  else
+    await navigateFocusBackward();
+
+  return true;
+}
+
+async function assert_focus_navigation_element_with_shadow_root(from, to, direction) {
+  const result = await shouldNavigateFocusWithShadowRoot(from, direction);
+  const [fromElement] = from;
+  const [toElement, toShadowRoot] = to;
+  assert_true(result, 'Failed to focus ' + fromElement.id);
+  const message =
+    `Focus should move ${direction} from ${fromElement.id} to ${toElement.id}`;
+  assert_equals(innermostActiveElementWithShadowRoot(toShadowRoot), toElement, message);
+}
+
+async function assert_focus_navigation_elements_with_shadow_root(elements, direction) {
+  assert_true(
+    elements.length >= 2,
+    'length of elements should be greater than or equal to 2.');
+  for (var i = 0; i + 1 < elements.length; ++i)
+    await assert_focus_navigation_element_with_shadow_root(elements[i], elements[i + 1], direction);
+}
+
+async function assert_focus_navigation_forward_with_shadow_root(elements) {
+  return assert_focus_navigation_elements_with_shadow_root(elements, 'forward');
+}
+
+async function assert_focus_navigation_backward_with_shadow_root(elements) {
+  return assert_focus_navigation_elements_with_shadow_root(elements, 'backward');
+}
\ No newline at end of file
diff --git 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
new file mode 100644
index 0000000000..2789f05850
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus-navigation/resources/shadow-dom.js
@@ -0,0 +1,165 @@
+function removeWhiteSpaceOnlyTextNodes(node) {
+  for (var i = 0; i < node.childNodes.length; i++) {
+    var child = node.childNodes[i];
+    if (child.nodeType === Node.TEXT_NODE &&
+      child.nodeValue.trim().length == 0) {
+      node.removeChild(child);
+      i--;
+    } else if (
+      child.nodeType === Node.ELEMENT_NODE ||
+      child.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      removeWhiteSpaceOnlyTextNodes(child);
+    }
+  }
+  if (node.shadowRoot) {
+    removeWhiteSpaceOnlyTextNodes(node.shadowRoot);
+  }
+}
+
+function convertTemplatesToShadowRootsWithin(node) {
+  var nodes = node.querySelectorAll('template');
+  for (var i = 0; i < nodes.length; ++i) {
+    var template = nodes[i];
+    var mode = template.getAttribute('data-mode');
+    var delegatesFocus = template.hasAttribute('data-delegatesFocus');
+    var parent = template.parentNode;
+    parent.removeChild(template);
+    var shadowRoot;
+    if (!mode) {
+      shadowRoot = parent.attachShadow({ mode: 'open' });
+    } else {
+      shadowRoot =
+        parent.attachShadow({ 'mode': mode, 'delegatesFocus': delegatesFocus });
+    }
+    var expose = template.getAttribute('data-expose-as');
+    if (expose)
+      window[expose] = shadowRoot;
+    if (template.id)
+      shadowRoot.id = template.id;
+    var fragments = document.importNode(template.content, true);
+    shadowRoot.appendChild(fragments);
+
+    convertTemplatesToShadowRootsWithin(shadowRoot);
+  }
+}
+
+function isShadowHost(node) {
+  return node && node.nodeType == Node.ELEMENT_NODE && node.shadowRoot;
+}
+
+function isIFrameElement(element) {
+  return element && element.nodeName == 'IFRAME';
+}
+
+// Returns node from shadow/iframe tree "path".
+function getNodeInComposedTree(path) {
+  var ids = path.split('/');
+  var node = document.getElementById(ids[0]);
+  for (var i = 1; node != null && i < ids.length; ++i) {
+    if (isIFrameElement(node))
+      node = node.contentDocument.getElementById(ids[i]);
+    else if (isShadowHost(node))
+      node = node.shadowRoot.getElementById(ids[i]);
+    else
+      return null;
+  }
+  return node;
+}
+
+function createTestTree(node) {
+  let ids = {};
+
+  function attachShadowFromTemplate(template) {
+    let parent = template.parentNode;
+    parent.removeChild(template);
+    let shadowRoot;
+    if (template.getAttribute('data-slot-assignment') === 'manual') {
+      shadowRoot =
+        parent.attachShadow({
+          mode: template.getAttribute('data-mode'),
+          slotAssignment: 'manual'
+        });
+    } else {
+      shadowRoot =
+        parent.attachShadow({ mode: template.getAttribute('data-mode') });
+    }
+    let id = template.id;
+    if (id) {
+      shadowRoot.id = id;
+      ids[id] = shadowRoot;
+    }
+    shadowRoot.appendChild(document.importNode(template.content, true));
+    return shadowRoot;
+  }
+
+  function walk(root) {
+    if (root.id) {
+      ids[root.id] = root;
+    }
+    for (let e of Array.from(root.querySelectorAll('[id]'))) {
+      ids[e.id] = e;
+    }
+    for (let e of Array.from(root.querySelectorAll('template'))) {
+      walk(attachShadowFromTemplate(e));
+    }
+  }
+
+  walk(node.cloneNode(true));
+  return ids;
+}
+
+function dispatchEventWithLog(nodes, target, event) {
+  function labelFor(e) {
+    return e.id || e.tagName;
+  }
+
+  let log = [];
+  let attachedNodes = [];
+  for (let label in nodes) {
+    let startingNode = nodes[label];
+    for (let node = startingNode; node; node = node.parentNode) {
+      if (attachedNodes.indexOf(node) >= 0)
+        continue;
+      let id = node.id;
+      if (!id)
+        continue;
+      attachedNodes.push(node);
+      node.addEventListener(event.type, (e) => {
+        // Record [currentTarget, target, relatedTarget, composedPath()]
+        log.push([
+          id, labelFor(e.target),
+          e.relatedTarget ? labelFor(e.relatedTarget) : null,
+          e.composedPath().map((n) => {
+            return labelFor(n);
+          })
+        ]);
+      });
+    }
+  }
+  target.dispatchEvent(event);
+  return log;
+}
+
+// This function assumes that testharness.js is available.
+function assert_event_path_equals(actual, expected) {
+  assert_equals(actual.length, expected.length);
+  for (let i = 0; i < actual.length; ++i) {
+    assert_equals(
+      actual[i][0], expected[i][0],
+      'currentTarget at ' + i + ' should be same');
+    assert_equals(
+      actual[i][1], expected[i][1], 'target at ' + i + ' should be same');
+    assert_equals(
+      actual[i][2], expected[i][2],
+      'relatedTarget at ' + i + ' should be same');
+    assert_array_equals(
+      actual[i][3], expected[i][3],
+      'composedPath at ' + i + ' should be same');
+  }
+}
+
+function assert_background_color(path, color) {
+  assert_equals(
+    window.getComputedStyle(getNodeInComposedTree(path)).backgroundColor,
+    color, 'backgroundColor for ' + path + ' should be ' + color);
+}
-- 
cgit v1.2.3