invisible-images.html (2947B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: invisible images are not observable</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #opacity0 { 8 opacity: 0; 9 } 10 #visibilityHidden { 11 visibility: hidden; 12 } 13 #displayNone { 14 display: none; 15 } 16 </style> 17 <script> 18 async_test(function (t) { 19 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 20 const observer = new PerformanceObserver( 21 t.step_func_done((entries) => { 22 // The image should not have caused an entry, so fail test. 23 assert_unreached('Should not have received an entry! Received one with identifier ' 24 + entries.getEntries()[0].identifier); 25 }) 26 ); 27 observer.observe({entryTypes: ['element']}); 28 // We add the images during onload to be sure that the observer is registered 29 // in time for it to observe the element timing. 30 window.onload = () => { 31 const img = document.createElement('img'); 32 img.src = 'resources/square100.png'; 33 img.setAttribute('elementtiming', 'my_image'); 34 img.setAttribute('id', 'opacity0'); 35 document.body.appendChild(img); 36 37 const img2 = document.createElement('img'); 38 img2.src = 'resources/square20.png'; 39 img2.setAttribute('elementtiming', 'my_image2'); 40 img2.setAttribute('id', 'visibilityHidden'); 41 document.body.appendChild(img2); 42 43 const img3 = document.createElement('img'); 44 img3.src = 'resources/circle.svg'; 45 img3.setAttribute('elementtiming', 'my_image3'); 46 img3.setAttribute('id', 'displayNone'); 47 document.body.appendChild(img3); 48 49 const div = document.createElement('div'); 50 div.setAttribute('id', 'opacity0'); 51 const img4 = document.createElement('img'); 52 img4.src = '/images/blue.png'; 53 img4.setAttribute('elementtiming', 'my_image4'); 54 div.appendChild(img4); 55 document.body.appendChild(div); 56 57 const div2 = document.createElement('div'); 58 div2.setAttribute('id', 'visibilityHidden'); 59 const img5 = document.createElement('img'); 60 img5.src = '/images/blue.png'; 61 img5.setAttribute('elementtiming', 'my_image5'); 62 div.appendChild(img5); 63 document.body.appendChild(div2); 64 65 const div3 = document.createElement('div'); 66 div3.setAttribute('id', 'displayNone'); 67 const img6 = document.createElement('img'); 68 img6.src = '/images/blue.png'; 69 img6.setAttribute('elementtiming', 'my_image6'); 70 div.appendChild(img6); 71 document.body.appendChild(div3); 72 // Images have been added but should not cause entries to be dispatched. 73 // Wait for 500ms and end test, ensuring no entry was created. 74 t.step_timeout(() => { 75 t.done(); 76 }, 500); 77 }; 78 }, 'Images with opacity: 0, visibility: hidden, or display: none are not observable.'); 79 </script>