shadow-dom-null-target.html (2194B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8 /> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <script src=/resources/testdriver.js></script> 7 <script src=/resources/testdriver-vendor.js></script> 8 <script src=/resources/testdriver-actions.js></script> 9 <script src=resources/event-timing-test-utils.js></script> 10 <body> 11 <div id='host'> 12 </div> 13 <script> 14 promise_test(async t => { 15 assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.'); 16 17 const host = document.getElementById('host'); 18 const shadowRoot = host.attachShadow({mode: "closed"}); 19 20 const durationThreshold = 16; 21 22 const innerSpan1 = document.createElement("span"); 23 innerSpan1.textContent = "Span1"; 24 const innerSpan2 = document.createElement("span"); 25 innerSpan2.textContent = "Span2"; 26 27 shadowRoot.append(innerSpan1); 28 shadowRoot.append(innerSpan2); 29 30 innerSpan2.addEventListener("mouseover", function(e) { 31 // To make this is a slow event 32 mainThreadBusy(durationThreshold + 4); 33 }); 34 35 const span1Rect = innerSpan1.getBoundingClientRect(); 36 const span2Rect = innerSpan2.getBoundingClientRect(); 37 38 const actions = new test_driver.Actions(); 39 // Move the pointer to innerSpan1 40 await actions.pointerMove( 41 Math.ceil(span1Rect.x + span1Rect.width / 2), 42 Math.ceil(span1Rect.y + span1Rect.height / 2) 43 ).send(); 44 45 await afterNextPaint(); 46 47 const observerPromise = new Promise(resolve => { 48 new PerformanceObserver(t.step_func(entryList => { 49 let mouseOverEntries = entryList.getEntriesByName("mouseover"); 50 assert_equals(mouseOverEntries.length, 1); 51 assert_equals(mouseOverEntries[0].target, null); 52 resolve(); 53 })).observe({type: 'event', durationThreshold: durationThreshold}); 54 }); 55 56 // Move the pointer to innerSpan2 57 // Here we move the pointer within the shadow DOM 58 await actions.pointerMove( 59 Math.ceil(span2Rect.x + span2Rect.width / 2), 60 Math.ceil(span2Rect.y + span2Rect.height / 2) 61 ).send(); 62 63 await afterNextPaint(); 64 65 await observerPromise; 66 }, "Event Timing: Move pointer within shadow DOM should create event-timing entry with null target."); 67 </script> 68 </body> 69 </html>