tor-browser

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

clicking-interactive-content.html (3446B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>Label event handling when a descendant interactive 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=interactive-content>
      9  <a href="about:blank" onclick="event.preventDefault()"></a>
     10  <audio controls></audio>
     11  <button></button>
     12  <details></details>
     13  <embed>
     14  <iframe></iframe>
     15  <img usemap="">
     16  <input>
     17  <label>label</label>
     18  <select></select>
     19  <textarea></textarea>
     20  <video controls></video>
     21 </template>
     22 
     23 <script>
     24 "use strict";
     25 
     26 const interactiveContent = document.getElementById("interactive-content");
     27 const interactiveElements = Array.from(interactiveContent.content.children);
     28 const label = document.getElementById("label");
     29 
     30 for (const srcInteractiveElement of interactiveElements) {
     31  test(t => {
     32    t.add_cleanup(() => {
     33      label.innerHTML = "";
     34    });
     35 
     36    const interactiveElement = srcInteractiveElement.cloneNode();
     37    label.appendChild(interactiveElement);
     38 
     39    let clicked = 0;
     40    interactiveElement.addEventListener("click", () => {
     41      clicked++;
     42    });
     43    interactiveElement.click();
     44    assert_equals(clicked, 1, "clicking interactive content");
     45 
     46    clicked = 0;
     47    const span = document.createElement("span");
     48    interactiveElement.appendChild(span);
     49    span.click();
     50    assert_equals(clicked, 1, "clicking descendant of interactive content");
     51  }, `interactive content ${srcInteractiveElement.outerHTML} as first child of <label>`);
     52 
     53  test(t => {
     54    t.add_cleanup(() => {
     55      label.innerHTML = "";
     56    });
     57 
     58    const interactiveElement = srcInteractiveElement.cloneNode();
     59    const div = document.createElement("div");
     60    div.appendChild(interactiveElement);
     61    label.appendChild(div);
     62 
     63    let clicked = 0;
     64    interactiveElement.addEventListener("click", () => {
     65      clicked++;
     66    });
     67    interactiveElement.click();
     68    assert_equals(clicked, 1, "clicking nested interactive content");
     69 
     70    clicked = 0;
     71    const span = document.createElement("span");
     72    interactiveElement.appendChild(span);
     73    span.click();
     74    assert_equals(clicked, 1, "clicking descendant of nested interactive content");
     75  }, `interactive content ${srcInteractiveElement.outerHTML} deeply nested under <label>`);
     76 
     77  test(t => {
     78    t.add_cleanup(() => {
     79      label.innerHTML = "";
     80    });
     81 
     82    const button = document.createElement("button");
     83    label.appendChild(button);
     84 
     85    const interactiveElement = srcInteractiveElement.cloneNode();
     86    label.appendChild(interactiveElement);
     87 
     88    let buttonClicked = 0;
     89    button.addEventListener("click", () => {
     90      buttonClicked++;
     91    });
     92 
     93    let clicked = 0;
     94    interactiveElement.addEventListener("click", () => {
     95      clicked++;
     96    });
     97    interactiveElement.click();
     98    assert_equals(clicked, 1, "clicking nested interactive content");
     99    assert_equals(buttonClicked, 0, "clicking nested interactive content should not click button");
    100 
    101    clicked = 0;
    102    const span = document.createElement("span");
    103    interactiveElement.appendChild(span);
    104    span.click();
    105    assert_equals(clicked, 1, "clicking descendant of nested interactive content");
    106    assert_equals(buttonClicked, 0, "clicking descendant of nested interactive content should not click button");
    107  }, `interactive content ${srcInteractiveElement.outerHTML} as second child under <label>`);
    108 }
    109 
    110 </script>
    111 </body>