dom-mutation.html - mozsearch

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /shadow-dom/reference-target/tentative/dom-mutation.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<html>

<head>

  <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="/wai-aria/scripts/aria-utils.js"></script>

</head>

<body>

<div id="test-container"></div>

<script>

async function setup_test() {

  const test_container = document.querySelector("#test-container");

  test_container.setHTMLUnsafe(`

    <div id="host1">

      <template shadowrootmode="open" shadowrootreferencetarget="label1">

        <span>Outside the label</span>

        <label id="label1">Label 1</label>

        <label id="label2">Label 2</label>

      </template>

    </div>

    <input id="input1" aria-labelledby="host1">`);

  const input1 = test_container.querySelector("#input1");

  assert_equals(await test_driver.get_computed_label(input1), "Label 1");

  return test_container

promise_test(async t => {

  const test_container = await setup_test();

  const host1 = test_container.querySelector("#host1");

  const label1 = host1.shadowRoot.querySelector("#label1");

  label1.id = "changed";

  assert_equals(await test_driver.get_computed_label(input1), "Outside the label Label 1 Label 2");

}, "Changing the ID of the referenced element updates the computed label");

promise_test(async t => {

  const test_container = await setup_test();

  const host1 = test_container.querySelector("#host1");

  const label1 = host1.shadowRoot.querySelector("#label1");

  label1.remove();

  assert_equals(await test_driver.get_computed_label(input1), "Outside the label Label 2");

}, "Removing the referenced element updates the computed label");

promise_test(async t => {

  const test_container = await setup_test();

  const host1 = test_container.querySelector("#host1");

  const new_label = document.createElement("label");

  new_label.id = "label1";

  new_label.textContent = "New label";

  host1.shadowRoot.prepend(new_label);

  assert_equals(await test_driver.get_computed_label(input1), "New label");

}, "New referenced element prepended to the shadow supercedes the existing label");

promise_test(async t => {

  const test_container = await setup_test();

  const host1 = test_container.querySelector("#host1");

  host1.shadowRoot.referenceTarget = "label2";

  assert_equals(await test_driver.get_computed_label(input1), "Label 2");

}, "Changing the reference target ID updates the computed label");

</script>

</body>

</html>