131 lines
3.7 KiB
HTML
131 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta name="variant" content="?document">
|
|
<meta name="variant" content="?window">
|
|
<meta name="variant" content="?element">
|
|
<link rel="help"
|
|
href="https://dom.spec.whatwg.org/#add-an-event-listener">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-actions.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<style>
|
|
#target {
|
|
background-color: green;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
@keyframes fade-out {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
#target.animate {
|
|
animation: fade-out 300ms ease-in;
|
|
}
|
|
</style>
|
|
<!-- Tests handlers with various means of set up and tear down -->
|
|
<body>
|
|
<div id="target"></div>
|
|
</body>
|
|
<script>
|
|
let eventTally = 0;
|
|
let nextListenerId = 0;
|
|
|
|
function createEventTallyListener() {
|
|
return (event) => {
|
|
eventTally++;
|
|
}
|
|
}
|
|
|
|
function resetAndRecordEvents() {
|
|
const target = document.getElementById('target');
|
|
eventTally = 0;
|
|
const ready = new Promise(async resolve => {
|
|
target.addEventListener('click', () => {
|
|
requestAnimationFrame(resolve);
|
|
}, { once: true });
|
|
await new test_driver.Actions()
|
|
.pointerMove(0, 0, {origin: target})
|
|
.pointerDown()
|
|
.pointerUp()
|
|
.send();
|
|
});
|
|
return ready;
|
|
}
|
|
|
|
const variant = location.search.substring(1) || 'window';
|
|
let source = undefined;
|
|
switch(variant) {
|
|
case 'document':
|
|
source = document;
|
|
break;
|
|
|
|
case 'window':
|
|
source = window;
|
|
break;
|
|
|
|
case 'element':
|
|
source = document.getElementById('target');
|
|
break;
|
|
|
|
default:
|
|
source = window;
|
|
}
|
|
|
|
promise_test(async t => {
|
|
// Add listeners
|
|
const first = createEventTallyListener();
|
|
source.addEventListener('click', first, true);
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 1, 'After adding first listener');
|
|
const second = createEventTallyListener();
|
|
source.addEventListener('click', second, false);
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 2, 'After adding second listener');
|
|
|
|
// Duplicate listener is discarded.
|
|
source.addEventListener('click', second, false);
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 2,
|
|
'After adding third listener with matching useCapture');
|
|
|
|
// Remove first listener
|
|
source.removeEventListener('click', first, true);
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 1, 'After removing first listener');
|
|
|
|
// Try to remove again.
|
|
source.removeEventListener('click', first, true);
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 1, 'Cannot remove a second time');
|
|
|
|
// Try to remove second, but with mismatched capture
|
|
source.removeEventListener('click', second, true);
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 1, 'Capture argument must match');
|
|
|
|
// Remove second listener.
|
|
source.removeEventListener('click', second, false);
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 0, 'After removal of second listener');
|
|
}, `Test addEventListener/removeEventListener on the ${variant}.`);
|
|
|
|
promise_test(async t => {
|
|
// Add listener
|
|
source.onclick = createEventTallyListener();
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 1, 'After adding listener');
|
|
|
|
// Replace listener.
|
|
source.onclick = createEventTallyListener();
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 1, 'After replacing listener');
|
|
|
|
// Remove listener
|
|
source.onclick = null;
|
|
await resetAndRecordEvents();
|
|
assert_equals(eventTally, 0, 'After removing listener');
|
|
}, `Test setting onanimationstart handler on the ${variant}.`);
|
|
|
|
</script>
|
|
</body>
|