clicking-noninteractive-labelable-content.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Label event handling when a descendant labelable but not interactive element is clicked</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<label id=label></label>
<template id=labelable-not-interactive-content>
  <meter></meter>
  <output></output>
  <progress></progress>
</template>

<script>
"use strict";

const template = document.getElementById("labelable-not-interactive-content");
const labelableNotInteractiveElements = Array.from(template.content.children);
const label = document.getElementById("label");

// This part may be subject to platform-dependent operations in the spec, so we
// only check for obvious errors. (Clicking once should register at least one
// click, but less than 30 clicks.) See
// https://github.com/whatwg/html/issues/5415 for possibly tightening this up.
function checkClickCount(clicked, description) {
  assert_greater_than(clicked, 0, description);
  assert_less_than(clicked, 30, description);
}

for (const srcElement of labelableNotInteractiveElements) {
  test(t => {
    t.add_cleanup(() => {
      label.innerHTML = "";
    });

    const element = srcElement.cloneNode();
    label.appendChild(element);

    let clicked = 0;
    element.addEventListener("click", () => {
      clicked++;
    });
    element.click();
    checkClickCount(clicked, "clicking labelable content");

    clicked = 0;
    const span = document.createElement("span");
    element.appendChild(span);
    span.click();
    checkClickCount(clicked, "clicking descendant of labelable content");
  }, `labelable element ${srcElement.outerHTML} as first child of <label>`);

  test(t => {
    t.add_cleanup(() => {
      label.innerHTML = "";
    });

    const element = srcElement.cloneNode();
    const div = document.createElement("div");
    div.appendChild(element);
    label.appendChild(div);

    let clicked = 0;
    element.addEventListener("click", () => {
      clicked++;
    });
    element.click();
    checkClickCount(clicked, "clicking nested labelable content");

    clicked = 0;
    const span = document.createElement("span");
    element.appendChild(span);
    span.click();
    checkClickCount(clicked, "clicking descendant of nested labelable content");
  }, `labelable element ${srcElement.outerHTML} deeply nested under <label>`);

  test(t => {
    t.add_cleanup(() => {
      label.innerHTML = "";
    });

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

    const element = srcElement.cloneNode();
    label.appendChild(element);

    let buttonClicked = 0;
    button.addEventListener("click", () => {
      buttonClicked++;
    });

    let clicked = 0;
    element.addEventListener("click", () => {
      clicked++;
    });
    element.click();
    assert_equals(clicked, 1, "clicking nested labelable content");
    assert_equals(buttonClicked, 1, "clicking nested labelable content should click button");

    buttonClicked = 0;
    clicked = 0;
    const span = document.createElement("span");
    element.appendChild(span);
    span.click();
    assert_equals(clicked, 1, "clicking descendant of nested labelable content");
    assert_equals(buttonClicked, 1, "clicking descendant of nested labelable content should not click button");
  }, `labelable element ${srcElement.outerHTML} as second child under <label>`);
}

</script>
</body>
chromium/third_party/blink/web_tests/external/wpt/html/semantics/forms/the-label-element/clicking-noninteractive-labelable-content.html
