interestelement-interface.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 6 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/the-button-element/interest-target/interestelement-interface.tentative.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset="utf-8" />

<link rel="author" title="Keith Cirkel" href="mailto:keithamus@github.com" >

<link rel="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com" >

<link rel="help" href="https://open-ui.org/components/interest-invokers.explainer/" />

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<button id="buttonInvoker" interesttarget="interestee"></button>

<a id="aInvoker" interesttarget="interestee"></a>

<div id="interestee"></div>

<script>

  test(function () {

    assert_equals(buttonInvoker.interestTargetElement, interestee);

    assert_equals(aInvoker.interestTargetElement, interestee);

  }, "interestTargetElement reflects interestee HTML element");

  test(function () {

    const div = document.body.appendChild(document.createElement("div"));

    buttonInvoker.interestTargetElement = div;

    aInvoker.interestTargetElement = div;

    assert_equals(buttonInvoker.interestTargetElement, div);

    assert_equals(buttonInvoker.getAttribute("interesttarget"), "");

    assert_equals(aInvoker.interestTargetElement, div);

    assert_equals(aInvoker.getAttribute("interesttarget"), "");

  }, "interestTargetElement reflects set value");

  test(function () {

    const host = document.body.appendChild(document.createElement("div"));

    const shadow = host.attachShadow({ mode: "open" });

    const button = shadow.appendChild(document.createElement("button"));

    button.interestTargetElement = interestee;

    assert_equals(button.interestTargetElement, interestee);

    assert_equals(buttonInvoker.getAttribute("interesttarget"), "");

  }, "interestTargetElement reflects set value across shadow root into light dom");

  test(function () {

    const host = document.body.appendChild(document.createElement("div"));

    const shadow = host.attachShadow({ mode: "open" });

    const div = shadow.appendChild(document.createElement("div"));

    buttonInvoker.interestTargetElement = div;

    assert_equals(buttonInvoker.interestTargetElement, null);

    assert_equals(buttonInvoker.getAttribute("interesttarget"), "");

  }, "interestTargetElement does not reflect set value inside shadowroot");

  test(function () {

    buttonInvoker.setAttribute('interesttarget', 'invalid');

    assert_equals(buttonInvoker.interestTargetElement, null);

    assert_equals(buttonInvoker.getAttribute("interesttarget"), "invalid");

    aInvoker.setAttribute('interesttarget', 'invalid');

    assert_equals(aInvoker.interestTargetElement, null);

    assert_equals(aInvoker.getAttribute("interesttarget"), "invalid");

  }, "interestTargetElement does not reflect invalid value");

  test(function () {

    assert_throws_js(

      TypeError,

      function () {

        buttonInvoker.interestTargetElement = {};

},

      "interestTargetElement attribute value must be an instance of Element",

);

    assert_throws_js(

      TypeError,

      function () {

        aInvoker.interestTargetElement = {};

},

      "interestTargetElement attribute value must be an instance of Element",

);

  }, "interestTargetElement throws error on assignment of non Element");

</script>