pointerdown-pointerup-no-overlap.html (2792B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8 /> 4 <title>Event Timing: pointerdown and pointerup should not overlap when there is a paint in between</title> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <script src=/resources/testdriver.js></script> 8 <script src=/resources/testdriver-vendor.js></script> 9 <script src=/resources/testdriver-actions.js></script> 10 <script src=resources/event-timing-test-utils.js></script> 11 <button id='button'>Click me.</button> 12 <script> 13 promise_test(async t => { 14 assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.'); 15 const button = document.getElementById('button'); 16 const observedEntries = []; 17 button.addEventListener('click', () => { 18 mainThreadBusy(150); 19 }); 20 21 const observerPromise = new Promise(resolve => { 22 new PerformanceObserver(entryList => { 23 observedEntries.push(...entryList.getEntries().filter(entry => 24 entry.name === 'pointerdown' || entry.name === 'pointerup' || entry.name === 'click' 25 )); 26 27 // We expect pointerdown, pointerup, and click. 28 if (observedEntries.length >= 3) { 29 resolve(); 30 } 31 }).observe({entryTypes: ['event', 'first-input'], buffered: true}); 32 }); 33 34 const actions1 = new test_driver.Actions(); 35 await actions1 36 .addPointer("testPointer", "mouse") 37 .pointerMove(0, 0, { origin: button }) 38 .pointerDown({ button: actions1.ButtonType.LEFT }) 39 .pause(50) 40 .send(); 41 42 // Wait for a paint to occur 43 await afterNextPaint(); 44 45 // Perform pointerup 46 const actions2 = new test_driver.Actions(); 47 await actions2 48 .addPointer("testPointer", "mouse") 49 .pointerMove(0, 0, { origin: button }) 50 .pointerUp({ button: actions2.ButtonType.LEFT }) 51 .send(); 52 53 await observerPromise; 54 55 const pointerdownEntry = observedEntries.find(e => e.name === 'pointerdown'); 56 const pointerupEntry = observedEntries.find(e => e.name === 'pointerup'); 57 const clickEntry = observedEntries.find(e => e.name === 'click'); 58 59 assert_true(!!pointerdownEntry, 'Should have pointerdown entry'); 60 assert_true(!!pointerupEntry, 'Should have pointerup entry'); 61 assert_true(!!clickEntry, 'Should have click entry'); 62 63 // Calculate end times: startTime + duration. 64 const pointerdownEndTime = pointerdownEntry.startTime + pointerdownEntry.duration; 65 const pointerupStartTime = pointerupEntry.startTime; 66 67 // pointerdown should complete BEFORE pointerup starts. 68 assert_less_than_equal(pointerdownEndTime, pointerupStartTime, 69 'pointerdown should end before or when pointerup starts (no overlap)'); 70 }, 'pointerdown and pointerup should not overlap when there is no pointerdown handler'); 71 </script> 72 </html>