tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

clicking-noninteractive-unlabelable-content.html (3951B)

      1 <!DOCTYPE html>
      2 <meta charset=utf-8>
      3 <title>Label event handling when a descendant noninteractive and unlabelable content is clicked</title>
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <body>
      7 <label id=label></label>
      8 <template id=noninteractive-unlabelable-content>
      9  <div></div>
     10  <svg></svg>
     11 
     12  <!-- These are "almost interactive": they could become interactive with the
     13  addition/removal of a non-tabindex attribute. -->
     14  <a></a>
     15  <audio></audio>
     16  <img>
     17  <input type=hidden>
     18  <video></video>
     19 
     20  <!-- These are considered interactive content for the purpose of <label> in a
     21  previous version of the HTML Standard, but no longer. -->
     22  <a tabindex=""></a>
     23  <audio tabindex=""></audio>
     24  <div tabindex=""></div>
     25  <img tabindex="">
     26  <input type=hidden tabindex="">
     27  <object></object>
     28  <object tabindex=""></object>
     29  <object usemap=""></object>
     30  <video tabindex=""></video>
     31 </template>
     32 
     33 <script>
     34 "use strict";
     35 
     36 const template = document.getElementById("noninteractive-unlabelable-content");
     37 {
     38  const details = document.createElementNS("http://www.w3.org/2000/svg", "details");
     39  template.content.appendChild(details);
     40 }
     41 
     42 const elements = Array.from(template.content.children);
     43 const label = document.getElementById("label");
     44 
     45 for (const srcElement of elements) {
     46  test(t => {
     47    t.add_cleanup(() => {
     48      label.innerHTML = "";
     49    });
     50 
     51    const element = srcElement.cloneNode();
     52    label.appendChild(element);
     53 
     54    let clicked = 0;
     55    element.addEventListener("click", () => {
     56      clicked++;
     57    });
     58    element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     59    assert_equals(clicked, 1, "clicking interactive content");
     60 
     61    clicked = 0;
     62    const span = document.createElement("span");
     63    element.appendChild(span);
     64    span.click();
     65    assert_equals(clicked, 1, "clicking descendant of interactive content");
     66  }, `noninteractive unlabelable content ${srcElement.outerHTML} as first child of <label>`);
     67 
     68  test(t => {
     69    t.add_cleanup(() => {
     70      label.innerHTML = "";
     71    });
     72 
     73    const element = srcElement.cloneNode();
     74    const div = document.createElement("div");
     75    div.appendChild(element);
     76    label.appendChild(div);
     77 
     78    let clicked = 0;
     79    element.addEventListener("click", () => {
     80      clicked++;
     81    });
     82    element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     83    assert_equals(clicked, 1, "clicking nested interactive content");
     84 
     85    clicked = 0;
     86    const span = document.createElement("span");
     87    element.appendChild(span);
     88    span.click();
     89    assert_equals(clicked, 1, "clicking descendant of nested interactive content");
     90  }, `noninteractive unlabelable content ${srcElement.outerHTML} deeply nested under <label>`);
     91 
     92  test(t => {
     93    t.add_cleanup(() => {
     94      label.innerHTML = "";
     95    });
     96 
     97    const button = document.createElement("button");
     98    label.appendChild(button);
     99 
    100    const element = srcElement.cloneNode();
    101    label.appendChild(element);
    102 
    103    let buttonClicked = 0;
    104    button.addEventListener("click", () => {
    105      buttonClicked++;
    106    });
    107 
    108    let clicked = 0;
    109    element.addEventListener("click", () => {
    110      clicked++;
    111    });
    112    element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    113    assert_equals(clicked, 1, "clicking noninteractive unlabelable content");
    114    assert_equals(buttonClicked, 1, "clicking noninteractive unlabelable content should click button");
    115 
    116    buttonClicked = 0;
    117    clicked = 0;
    118    const span = document.createElement("span");
    119    element.appendChild(span);
    120    span.click();
    121    assert_equals(clicked, 1, "clicking descendant of nested noninteractive unlabelable content");
    122    assert_equals(
    123      buttonClicked, 1,
    124      "clicking descendant of nested noninteractive unlabelable content should click button"
    125    );
    126  }, `noninteractive unlabelable content ${srcElement.outerHTML} as second child under <label>`);
    127 }
    128 
    129 </script>
    130 </body>