tor-browser

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

clicking-noninteractive-labelable-content.html (3449B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>Label event handling when a descendant labelable but not interactive element 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=labelable-not-interactive-content>
      9  <meter></meter>
     10  <output></output>
     11  <progress></progress>
     12 </template>
     13 
     14 <script>
     15 "use strict";
     16 
     17 const template = document.getElementById("labelable-not-interactive-content");
     18 const labelableNotInteractiveElements = Array.from(template.content.children);
     19 const label = document.getElementById("label");
     20 
     21 // This part may be subject to platform-dependent operations in the spec, so we
     22 // only check for obvious errors. (Clicking once should register at least one
     23 // click, but less than 30 clicks.) See
     24 // https://github.com/whatwg/html/issues/5415 for possibly tightening this up.
     25 function checkClickCount(clicked, description) {
     26  assert_greater_than(clicked, 0, description);
     27  assert_less_than(clicked, 30, description);
     28 }
     29 
     30 for (const srcElement of labelableNotInteractiveElements) {
     31  test(t => {
     32    t.add_cleanup(() => {
     33      label.innerHTML = "";
     34    });
     35 
     36    const element = srcElement.cloneNode();
     37    label.appendChild(element);
     38 
     39    let clicked = 0;
     40    element.addEventListener("click", () => {
     41      clicked++;
     42    });
     43    element.click();
     44    checkClickCount(clicked, "clicking labelable content");
     45 
     46    clicked = 0;
     47    const span = document.createElement("span");
     48    element.appendChild(span);
     49    span.click();
     50    checkClickCount(clicked, "clicking descendant of labelable content");
     51  }, `labelable element ${srcElement.outerHTML} as first child of <label>`);
     52 
     53  test(t => {
     54    t.add_cleanup(() => {
     55      label.innerHTML = "";
     56    });
     57 
     58    const element = srcElement.cloneNode();
     59    const div = document.createElement("div");
     60    div.appendChild(element);
     61    label.appendChild(div);
     62 
     63    let clicked = 0;
     64    element.addEventListener("click", () => {
     65      clicked++;
     66    });
     67    element.click();
     68    checkClickCount(clicked, "clicking nested labelable content");
     69 
     70    clicked = 0;
     71    const span = document.createElement("span");
     72    element.appendChild(span);
     73    span.click();
     74    checkClickCount(clicked, "clicking descendant of nested labelable content");
     75  }, `labelable element ${srcElement.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 element = srcElement.cloneNode();
     86    label.appendChild(element);
     87 
     88    let buttonClicked = 0;
     89    button.addEventListener("click", () => {
     90      buttonClicked++;
     91    });
     92 
     93    let clicked = 0;
     94    element.addEventListener("click", () => {
     95      clicked++;
     96    });
     97    element.click();
     98    assert_equals(clicked, 1, "clicking nested labelable content");
     99    assert_equals(buttonClicked, 1, "clicking nested labelable content should click button");
    100 
    101    buttonClicked = 0;
    102    clicked = 0;
    103    const span = document.createElement("span");
    104    element.appendChild(span);
    105    span.click();
    106    assert_equals(clicked, 1, "clicking descendant of nested labelable content");
    107    assert_equals(buttonClicked, 1, "clicking descendant of nested labelable content should not click button");
    108  }, `labelable element ${srcElement.outerHTML} as second child under <label>`);
    109 }
    110 
    111 </script>
    112 </body>