clicking-noninteractive-labelable-content.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-label-element/clicking-noninteractive-labelable-content.html - WPT Dashboard Interop Dashboard

<!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>