<!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>
