Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 5 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /event-timing/target-selector.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<meta charset=utf-8 />
<meta name="timeout" content="long">
<title>Event Timing targetSelector.</title>
<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>
<script src=resources/event-timing-test-utils.js></script>
<div id='div-with-id'>Target with ID</div>
<div>Target without ID</div>
<img id='img-with-id-and-src' src='/images/blue.png'>
<img src='/images/green.png'>
<script>
function computeExpectedTargetSelector(target) {
let selector = target.tagName;
if (target.id) {
selector += '#' + target.id;
} else if (target.hasAttribute('src')) {
selector += '[src="' + target.getAttribute('src') + '"]';
}
return selector;
}
function runTest(t, eventType, target) {
let entry;
const callback = (entryList) => {
const entries = entryList.getEntriesByName(eventType);
if (entries.length > 0) {
entry = entries[0];
}
};
const readyToResolve = () => !!entry;
const observerPromise = createPerformanceObserverPromise(['event'], callback, readyToResolve);
return interactAndObserve(eventType, target, observerPromise)
.then(() => {
assert_equals(entry.name, eventType);
assert_equals(entry.entryType, 'event');
assert_equals(entry.target, target);
assert_equals(entry.targetSelector, computeExpectedTargetSelector(entry.target));
const matchingElements = document.querySelectorAll(entry.targetSelector);
assert_true(Array.from(matchingElements).includes(target));
});
}
promise_test(async t => {
// Element with tagName and id.
return runTest(t, 'click', document.getElementById('div-with-id'));
}, "Test with target that has an ID");
promise_test(async t => {
// Element with tagName only.
return runTest(t, 'click', document.querySelector('div:not([id])'));
}, "Test with simple target (no id)");
promise_test(async t => {
// Element with tagName, id, and src.
return runTest(t, 'click', document.getElementById('img-with-id-and-src'));
}, "Test with image target with id and src");
promise_test(async t => {
// Element with tagName and src.
return runTest(t, 'click', document.querySelector('img:not([id])'));
}, "Test with image target with src only");
promise_test(async t => {
let entry;
const callback = (entryList) => {
const entries = entryList.getEntriesByName('click');
if (entries.length > 0) {
entry = entries[0];
}
};
const readyToResolve = () => !!entry;
const observerPromise = createPerformanceObserverPromise(['event'], callback, readyToResolve);
const parent = document.body;
const target = document.createElement('button');
target.id = 'temp-target';
target.textContent = 'Click Me';
parent.appendChild(target);
await interactAndObserve('click', target, observerPromise);
const expectedIdentifier = target.tagName + '#' + target.id;
parent.removeChild(target);
// The garbage collector might need some time to collect |target|.
await new Promise(r => t.step_timeout(r, 0));
assert_equals(entry.target, null);
assert_equals(entry.targetSelector, expectedIdentifier);
}, "Test with disconnected target");
</script>
</html>