Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add tests for input and change event properties #24995

Merged
merged 4 commits into from
Aug 14, 2020
Merged

Add tests for input and change event properties #24995

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4639b08
Add tests for input and change event properties
domenic Aug 13, 2020
42117f3
Try to make it work on macs
domenic Aug 14, 2020
fb5415e
Keep fiddling
domenic Aug 14, 2020
095e285
Update comment
domenic Aug 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions html/semantics/forms/input-change-event-properties.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test the properties of input and change events</title>
<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>

<fieldset id="clickable">
<input type="checkbox">
<input type="radio">
</fieldset>

<fieldset id="typeable">
<input type="text">
<input type="search">
<input type="tel">
<input type="url">
<input type="email">
<input type="password">
<input type="number">
<textarea></textarea>
</fieldset>

<select>
<option>1</option>
<option>2</option>
</select>

<!-- Not going to test the more complicated input types like date or color for now... -->

<button id="click-me-to-unfocus-other-things">Clickable</button>

<script>
"use strict";
const clickMeToUnfocusOtherThings = document.querySelector("#click-me-to-unfocus-other-things");

for (const el of document.querySelector("#clickable").children) {
test(() => {
let inputEvent, changeEvent;
el.oninput = e => inputEvent = e;
el.onchange = e => changeEvent = e;

el.click();

assert_event(inputEvent, { bubbles: true, cancelable: false, composed: true });
assert_event(changeEvent, { bubbles: true, cancelable: false, composed: false });
}, `${el.outerHTML} click()`);
}

for (const el of document.querySelector("#typeable").children) {
promise_test(async () => {
let inputEvent, changeEvent;
el.oninput = e => inputEvent = e;
el.onchange = e => changeEvent = e;

await test_driver.send_keys(el, "1"); // has to be a number so <input type=number> works
await test_driver.click(clickMeToUnfocusOtherThings);

assert_event(inputEvent, { bubbles: true, cancelable: false, composed: true });
assert_event(changeEvent, { bubbles: true, cancelable: false, composed: false });
}, `${el.outerHTML} typing`);
}

promise_test(async () => {
const el = document.querySelector("select");

let inputEvent, changeEvent;
el.oninput = e => inputEvent = e;
el.onchange = e => changeEvent = e;

// TODO: this doesn't seem to work in Safari/on Macs. Or maybe Safari is legitimately failing.
// Someone with a Mac should investigate.
await test_driver.send_keys(el, "\uE015"); // down arrow key
await test_driver.click(clickMeToUnfocusOtherThings);

assert_event(inputEvent, { bubbles: true, cancelable: false, composed: true });
assert_event(changeEvent, { bubbles: true, cancelable: false, composed: false });
}, `<select> pressing down arrow`);

function assert_event(e, { bubbles, cancelable, composed }) {
assert_equals(e.bubbles, bubbles, `${e.type} bubbles`);
assert_equals(e.cancelable, cancelable, `${e.type} cancelable`);
assert_equals(e.composed, composed, `${e.type} composed`);
}
</script>