first-input-shadow-dom.html (1605B)
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 9 <body> 10 <div id='container'> 11 <custom-button id='custom_button'></custom-button> 12 </div> 13 <script> 14 promise_test(t => { 15 assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.'); 16 let innerButtonClicked = false; 17 customElements.define('custom-button', class extends HTMLElement { 18 connectedCallback() { 19 this.attachShadow({mode: 'open'}); 20 this.shadowRoot.innerHTML = `<button id='inner_button_id'>Click me</button>`; 21 this.shadowRoot.getElementById('inner_button_id').onpointerdown = () => { 22 innerButtonClicked = true; 23 }; 24 } 25 }); 26 const observerPromise = new Promise(resolve => { 27 new PerformanceObserver(t.step_func(entryList => { 28 // There must only be one first-input entry. 29 assert_equals(entryList.getEntries().length, 1); 30 // entry.target must be the shadow host due to retargetting. 31 assert_equals(entryList.getEntries()[0].target, 32 document.getElementById('custom_button')); 33 assert_true(innerButtonClicked, 'Did not reach the shadow DOM event listener!'); 34 resolve(); 35 })).observe({entryTypes: ['first-input']}); 36 }); 37 const clickPromise = test_driver.click(document.getElementById('custom_button')); 38 return Promise.all([observerPromise, clickPromise]); 39 }, "Event Timing: test first input on shadow DOM."); 40 </script> 41 </body> 42 </html>