From f6639dafbea0e52e8fdf6a146a1931b04d023cfd Mon Sep 17 00:00:00 2001 From: James Graham <james@hoppipolla.co.uk> Date: Fri, 14 Jan 2022 11:36:47 +0000 Subject: [PATCH] Add test for event propagation on disabled form controls --- .../forms/event-propagate-disabled.html | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 html/semantics/forms/event-propagate-disabled.html diff --git a/html/semantics/forms/event-propagate-disabled.html b/html/semantics/forms/event-propagate-disabled.html new file mode 100644 index 00000000000000..859f0b274f17f6 --- /dev/null +++ b/html/semantics/forms/event-propagate-disabled.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<title>Event propagation on disabled form elements</title> +<meta charset=utf8> +<meta name=timeout content=long> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<div id=cases> +<input data-expected="mousedown,mouseup,click"> <!-- Santity check with non-disabled control --> +<select disabled="disabled" data-expected=""></select> +<select disabled="disabled" data-expected=""><option selected="selected">foo</option></select> +<fieldset disabled="" data-expected="">Text</fieldset> +<fieldset disabled="" data-expected=""><span>Span</span></fieldset> +<button disabled="disabled" data-expected="mousedown,mouseup,click">Text</button> +<button disabled="disabled" data-expected="mousedown,mouseup,click"><span>Span</span></button> +<textarea disabled="disabled" data-expected="mousedown,mouseup,click"></textarea> +<input disabled="disabled" type="button" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="checkbox" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="color" value="#000000" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="date" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="datetime-local" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="email" data-expected="mousedown,mouseup,click"> +<!-- <input disabled="disabled" type="file"> --> +<!-- <input disabled="disabled" type="hidden"> --> +<input disabled="disabled" type="image" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="month" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="number" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="password" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="radio" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="range" value="50" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="reset" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="search" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="submit" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="tel" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="text" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="time" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="url" data-expected="mousedown,mouseup,click"> +<input disabled="disabled" type="week" data-expected="mousedown,mouseup,click"> +</div> + +<script> +const elements = document.getElementById("cases").children; +for (let element of elements) { + promise_test(async t => { + const events = ["mousedown", "mouseup", "click"]; + + const setupListener = (target) => { + const gotEvents = []; + const listenerFn = t.step_func(event => { + gotEvents.push(event.type); + }); + events.every(async event => target.addEventListener(event, listenerFn, {once: true})); + t.add_cleanup(async () => events.every(event => target.removeEventListener(event, listenerFn))); + return gotEvents; + }; + + const gotElementEvents = setupListener(element); + const gotBodyEvents = setupListener(document.body); + + let expectedBody = element.getAttribute("data-expected"); + expectedBody = expectedBody !== null ? expectedBody.split(",") : []; + + await test_driver.click(element); + await new Promise(resolve => t.step_timeout(resolve, 0)); + + assert_array_equals(gotElementEvents, events, "Events on the form element"); + assert_array_equals(gotBodyEvents, expectedBody, "Events propagated to <body>"); + + }, `Click on ${element.outerHTML}`); +} +</script>