target-selector.tentative.html (3467B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8 /> 4 <meta name="timeout" content="long"> 5 <title>Event Timing targetSelector.</title> 6 <script src=/resources/testharness.js></script> 7 <script src=/resources/testharnessreport.js></script> 8 <script src=/resources/testdriver.js></script> 9 <script src=/resources/testdriver-actions.js></script> 10 <script src=/resources/testdriver-vendor.js></script> 11 <script src=resources/event-timing-test-utils.js></script> 12 <div id='div-with-id'>Target with ID</div> 13 <div>Target without ID</div> 14 <img id='img-with-id-and-src' src='/images/blue.png'> 15 <img src='/images/green.png'> 16 <script> 17 function computeExpectedTargetSelector(target) { 18 let selector = target.tagName; 19 if (target.id) { 20 selector += '#' + target.id; 21 } else if (target.hasAttribute('src')) { 22 selector += '[src="' + target.getAttribute('src') + '"]'; 23 } 24 return selector; 25 } 26 27 function runTest(t, eventType, target) { 28 let entry; 29 const callback = (entryList) => { 30 const entries = entryList.getEntriesByName(eventType); 31 if (entries.length > 0) { 32 entry = entries[0]; 33 } 34 }; 35 const readyToResolve = () => !!entry; 36 const observerPromise = createPerformanceObserverPromise(['event'], callback, readyToResolve); 37 return interactAndObserve(eventType, target, observerPromise) 38 .then(() => { 39 assert_equals(entry.name, eventType); 40 assert_equals(entry.entryType, 'event'); 41 assert_equals(entry.target, target); 42 assert_equals(entry.targetSelector, computeExpectedTargetSelector(entry.target)); 43 const matchingElements = document.querySelectorAll(entry.targetSelector); 44 assert_true(Array.from(matchingElements).includes(target)); 45 }); 46 } 47 48 promise_test(async t => { 49 // Element with tagName and id. 50 return runTest(t, 'click', document.getElementById('div-with-id')); 51 }, "Test with target that has an ID"); 52 53 promise_test(async t => { 54 // Element with tagName only. 55 return runTest(t, 'click', document.querySelector('div:not([id])')); 56 }, "Test with simple target (no id)"); 57 58 promise_test(async t => { 59 // Element with tagName, id, and src. 60 return runTest(t, 'click', document.getElementById('img-with-id-and-src')); 61 }, "Test with image target with id and src"); 62 63 promise_test(async t => { 64 // Element with tagName and src. 65 return runTest(t, 'click', document.querySelector('img:not([id])')); 66 }, "Test with image target with src only"); 67 68 promise_test(async t => { 69 let entry; 70 const callback = (entryList) => { 71 const entries = entryList.getEntriesByName('click'); 72 if (entries.length > 0) { 73 entry = entries[0]; 74 } 75 }; 76 const readyToResolve = () => !!entry; 77 const observerPromise = createPerformanceObserverPromise(['event'], callback, readyToResolve); 78 const parent = document.body; 79 const target = document.createElement('button'); 80 target.id = 'temp-target'; 81 target.textContent = 'Click Me'; 82 parent.appendChild(target); 83 await interactAndObserve('click', target, observerPromise); 84 const expectedIdentifier = target.tagName + '#' + target.id; 85 parent.removeChild(target); 86 // The garbage collector might need some time to collect |target|. 87 await new Promise(r => t.step_timeout(r, 0)); 88 assert_equals(entry.target, null); 89 assert_equals(entry.targetSelector, expectedIdentifier); 90 }, "Test with disconnected target"); 91 </script> 92 </html>