background-image-multiple-elements.html (3024B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: background image affecting multiple elements</title> 4 <body> 5 <style> 6 body { 7 margin: 0; 8 } 9 .my_div { 10 background-image: url('resources/square100.png'); 11 } 12 #div1 { 13 width: 100px; 14 height: 100px; 15 } 16 #div2 { 17 width: 200px; 18 height: 100px; 19 } 20 </style> 21 <script src="/resources/testharness.js"></script> 22 <script src="/resources/testharnessreport.js"></script> 23 <script src="resources/element-timing-helpers.js"></script> 24 <script> 25 async_test(function (t) { 26 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 27 let beforeRender = performance.now(); 28 let numObservedElements = 0; 29 let observedDiv1 = false; 30 let observedDiv2Img = false; 31 let observedDiv2Txt = false; 32 const pathname = window.location.origin + '/element-timing/resources/square100.png'; 33 const observer = new PerformanceObserver( 34 t.step_func(function(entryList) { 35 entryList.getEntries().forEach(entry => { 36 numObservedElements++; 37 if (entry.id == 'div1') { 38 observedDiv1 = true; 39 checkElement(entry, pathname, 'et1', 'div1', beforeRender, 40 document.getElementById('div1')); 41 // Div is in the top left corner. 42 checkRect(entry, [0, 100, 0, 100]); 43 checkNaturalSize(entry, 100, 100); 44 } 45 else if (entry.id == 'div2') { 46 // Check image entry. 47 if (entry.name !== 'text-paint') { 48 observedDiv2Img = true; 49 checkElement(entry, pathname, 'et2', 'div2', beforeRender, 50 document.getElementById('div2')); 51 // Div is below div1, on the left. 52 checkRect(entry, [0, 200, 100, 200]); 53 checkNaturalSize(entry, 100, 100); 54 } 55 // Check the text entry. 56 else { 57 observedDiv2Txt = true; 58 checkTextElement(entry, 'et2', 'div2', beforeRender, 59 document.getElementById('div2')); 60 assert_greater_than_equal(entry.intersectionRect.right - entry.intersectionRect.left, 50); 61 assert_greater_than_equal(entry.intersectionRect.bottom - entry.intersectionRect.top, 10); 62 } 63 } 64 else { 65 assert_unreached("Should not observe other elements!"); 66 } 67 if (numObservedElements === 3) { 68 assert_true(observedDiv1); 69 assert_true(observedDiv2Img); 70 assert_true(observedDiv2Txt); 71 t.done(); 72 } 73 }); 74 }) 75 ); 76 observer.observe({entryTypes: ['element']}); 77 }, 'Background image affecting various elements is observed.'); 78 </script> 79 <div id="div1" class="my_div" elementtiming="et1"> 80 <img width=50 height=50 src='resources/circle.svg'/> 81 </div> 82 <div width=200 height=100 id="div2" class="my_div" elementtiming="et2"> 83 Sample text inside div. 84 </div> 85 <div id="div3"> 86 I am a div that should not be observed! 87 </div> 88 </body>