inert-label-focus.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /inert/inert-label-focus.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>inert with label/for</title>

    <link rel="author" title="Alice Boxhall" href="aboxhall@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>

  </head>

  <body>

    <label inert id="for-submit" for="submit">Label for Submit</label>

    <input id="text" type="text">

    <input id="submit" type="submit">

    <label id="for-input-in-inert-subtree"

           for="input-in-inert-subtree">Label for input in inert subtree</label>

    <div inert>

      <input id="input-in-inert-subtree"></input>

    </div>

    <script>

      test(() => {

        label = document.querySelector('#for-submit');

        label.focus();

        assert_equals(document.activeElement, document.querySelector('#submit'));

      }, 'Calling focus() on an inert label should still send focus to its target.');

      promise_test(async () => {

        text = document.querySelector('#text');

        text.focus();

        label = document.querySelector('#for-submit');

        try {

          await test_driver.click(label);

          assert_equals(document.activeElement, document.body);

        } catch (e) {

          // test driver detects inert elements as unclickable

          // and throws an error

      }, 'Clicking on an inert label should send focus to document.body.');

      test(() => {

        text = document.querySelector('#text');

        text.focus();

        label = document.querySelector('#for-input-in-inert-subtree');

        label.focus();

        assert_equals(document.activeElement, text);

      }, 'Calling focus() on a label for a control which is in an inert subtree ' +

         'should have no effect.');

</script>

</html>