focus-with-negative-index.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /shadow-dom/focus-navigation/focus-with-negative-index.html - WPT Dashboard Interop Dashboard

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