diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-interactive-content.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-interactive-content.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-interactive-content.html b/testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-interactive-content.html new file mode 100644 index 0000000000..300d09cdda --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-label-element/clicking-interactive-content.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Label event handling when a descendant interactive content is clicked</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<label id=label></label> +<template id=interactive-content> + <a href="about:blank" onclick="event.preventDefault()"></a> + <audio controls></audio> + <button></button> + <details></details> + <embed> + <iframe></iframe> + <img usemap=""> + <input> + <label>label</label> + <select></select> + <textarea></textarea> + <video controls></video> +</template> + +<script> +"use strict"; + +const interactiveContent = document.getElementById("interactive-content"); +const interactiveElements = Array.from(interactiveContent.content.children); +const label = document.getElementById("label"); + +for (const srcInteractiveElement of interactiveElements) { + test(t => { + t.add_cleanup(() => { + label.innerHTML = ""; + }); + + const interactiveElement = srcInteractiveElement.cloneNode(); + label.appendChild(interactiveElement); + + let clicked = 0; + interactiveElement.addEventListener("click", () => { + clicked++; + }); + interactiveElement.click(); + assert_equals(clicked, 1, "clicking interactive content"); + + clicked = 0; + const span = document.createElement("span"); + interactiveElement.appendChild(span); + span.click(); + assert_equals(clicked, 1, "clicking descendant of interactive content"); + }, `interactive content ${srcInteractiveElement.outerHTML} as first child of <label>`); + + test(t => { + t.add_cleanup(() => { + label.innerHTML = ""; + }); + + const interactiveElement = srcInteractiveElement.cloneNode(); + const div = document.createElement("div"); + div.appendChild(interactiveElement); + label.appendChild(div); + + let clicked = 0; + interactiveElement.addEventListener("click", () => { + clicked++; + }); + interactiveElement.click(); + assert_equals(clicked, 1, "clicking nested interactive content"); + + clicked = 0; + const span = document.createElement("span"); + interactiveElement.appendChild(span); + span.click(); + assert_equals(clicked, 1, "clicking descendant of nested interactive content"); + }, `interactive content ${srcInteractiveElement.outerHTML} deeply nested under <label>`); + + test(t => { + t.add_cleanup(() => { + label.innerHTML = ""; + }); + + const button = document.createElement("button"); + label.appendChild(button); + + const interactiveElement = srcInteractiveElement.cloneNode(); + label.appendChild(interactiveElement); + + let buttonClicked = 0; + button.addEventListener("click", () => { + buttonClicked++; + }); + + let clicked = 0; + interactiveElement.addEventListener("click", () => { + clicked++; + }); + interactiveElement.click(); + assert_equals(clicked, 1, "clicking nested interactive content"); + assert_equals(buttonClicked, 0, "clicking nested interactive content should not click button"); + + clicked = 0; + const span = document.createElement("span"); + interactiveElement.appendChild(span); + span.click(); + assert_equals(clicked, 1, "clicking descendant of nested interactive content"); + assert_equals(buttonClicked, 0, "clicking descendant of nested interactive content should not click button"); + }, `interactive content ${srcInteractiveElement.outerHTML} as second child under <label>`); +} + +</script> +</body> |