diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-noninteractive-labelable-content.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-noninteractive-labelable-content.html | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-noninteractive-labelable-content.html b/testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-noninteractive-labelable-content.html new file mode 100644 index 0000000000..5563ef1e3c --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-noninteractive-labelable-content.html @@ -0,0 +1,112 @@ +<!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> |