observe-shadow-image.html (1456B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: do not observe image in shadow tree</title> 4 <style> 5 body { 6 margin: 0; 7 } 8 </style> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="resources/element-timing-helpers.js"></script> 12 <div id='target'></div> 13 <script> 14 async_test(function (t) { 15 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 16 const observer = new PerformanceObserver( 17 t.step_func_done(function(entryList) { 18 assert_unreached('Should not observe elements in shadow trees!'); 19 }) 20 ); 21 observer.observe({entryTypes: ['element']}); 22 // We add the image during onload to be sure that the observer is registered 23 // in time for it to observe the element timing. 24 window.onload = () => { 25 // Add image of width equal to 100 and height equal to 100. 26 const img = document.createElement('img'); 27 img.src = 'resources/square100.png'; 28 img.setAttribute('elementtiming', 'my_image'); 29 img.setAttribute('id', 'my_id'); 30 const shadowRoot = document.getElementById('target').attachShadow({mode: 'open'}); 31 shadowRoot.appendChild(img); 32 t.step_timeout(() => { 33 // Assume entry was not dispatched, so test passes. 34 t.done(); 35 }, 500); 36 }; 37 }, 'Image in shadow tree with elementtiming attribute is not observable.'); 38 </script>