<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../resources/shadow-dom.js'></script>
<script src='../resources/focus-utils.js'></script>
<body>
  <input id="input-before">
  <div id="host" tabindex="0">
    <template>
      <span>x-element</span>
      <slot tabindex="1"></slot>
    </template>                                                                  </div>
  <input id="input-after">
</body>
<script>
'use strict';

test(() => {
  let host = document.querySelector('#host');
  convertTemplatesToShadowRootsWithin(host);
  let elements = [
    'input-before',
    'host',
    'input-after'
  ];
  assert_focus_navigation_forward(elements);
  elements.reverse();
  assert_focus_navigation_backward(elements);
}, 'Focus navigation should not get stuck.');
</script>