190 lines
6.8 KiB
HTML
190 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
|
|
<title>input and change events for detached checkbox and radio elements</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<body>
|
|
<script>
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'checkbox';
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.click();
|
|
assert_false(inputEventFired);
|
|
assert_false(changeEventFired);
|
|
}, 'detached checkbox should not emit input or change events on click().');
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'radio';
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.click();
|
|
assert_false(inputEventFired);
|
|
assert_false(changeEventFired);
|
|
}, 'detached radio should not emit input or change events on click().');
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'checkbox';
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.dispatchEvent(new MouseEvent('click'));
|
|
assert_false(inputEventFired);
|
|
assert_false(changeEventFired);
|
|
}, `detached checkbox should not emit input or change events on dispatchEvent(new MouseEvent('click')).`);
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'radio';
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.dispatchEvent(new MouseEvent('click'));
|
|
assert_false(inputEventFired);
|
|
assert_false(changeEventFired);
|
|
}, `detached radio should not emit input or change events on dispatchEvent(new MouseEvent('click')).`);
|
|
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'checkbox';
|
|
document.body.appendChild(input);
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.click();
|
|
assert_true(inputEventFired);
|
|
assert_true(changeEventFired);
|
|
}, 'attached checkbox should emit input and change events on click().');
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'radio';
|
|
document.body.appendChild(input);
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.click();
|
|
assert_true(inputEventFired);
|
|
assert_true(changeEventFired);
|
|
}, 'attached radio should emit input and change events on click().');
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'checkbox';
|
|
document.body.appendChild(input);
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.dispatchEvent(new MouseEvent('click'));
|
|
assert_true(inputEventFired);
|
|
assert_true(changeEventFired);
|
|
}, `attached checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`);
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'radio';
|
|
document.body.appendChild(input);
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.dispatchEvent(new MouseEvent('click'));
|
|
assert_true(inputEventFired);
|
|
assert_true(changeEventFired);
|
|
}, `attached radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`);
|
|
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'checkbox';
|
|
const shadowHost = document.createElement('div');
|
|
document.body.appendChild(shadowHost);
|
|
const shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
|
shadowRoot.appendChild(input);
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.click();
|
|
assert_true(inputEventFired);
|
|
assert_true(changeEventFired);
|
|
}, 'attached to shadow dom checkbox should emit input and change events on click().');
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'radio';
|
|
const shadowHost = document.createElement('div');
|
|
document.body.appendChild(shadowHost);
|
|
const shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
|
shadowRoot.appendChild(input);
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.click();
|
|
assert_true(inputEventFired);
|
|
assert_true(changeEventFired);
|
|
}, 'attached to shadow dom radio should emit input and change events on click().');
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'checkbox';
|
|
const shadowHost = document.createElement('div');
|
|
document.body.appendChild(shadowHost);
|
|
const shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
|
shadowRoot.appendChild(input);
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.dispatchEvent(new MouseEvent('click'));
|
|
assert_true(inputEventFired);
|
|
assert_true(changeEventFired);
|
|
}, `attached to shadow dom checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`);
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'radio';
|
|
const shadowHost = document.createElement('div');
|
|
document.body.appendChild(shadowHost);
|
|
const shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
|
shadowRoot.appendChild(input);
|
|
|
|
let inputEventFired = false;
|
|
input.addEventListener('input', () => inputEventFired = true);
|
|
let changeEventFired = false;
|
|
input.addEventListener('change', () => changeEventFired = true);
|
|
input.dispatchEvent(new MouseEvent('click'));
|
|
assert_true(inputEventFired);
|
|
assert_true(changeEventFired);
|
|
}, `attached to shadow dom radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`);
|
|
|
|
</script>
|
|
</body>
|