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 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_true(!!entry.targetSelector, "targetSelector should not be empty");
// The new format is a path (e.g. "BODY > DIV:nth-child(1)").
// It should be a valid querySelector that includes our target.
const matchingElements = document.querySelectorAll(entry.targetSelector);
assert_true(Array.from(matchingElements).includes(target),
`Selector "${entry.targetSelector}" should match the target element`);
});
}
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);
// The new format is a path, but it should still end with or contain the ID.
const selector = entry.targetSelector;
assert_true(selector.includes('BUTTON#temp-target'),
`Selector "${selector}" should contain BUTTON#temp-target`);
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, selector);
}, "Test with disconnected target");
</script>
</html>