nested-containertiming-child-img.html (2238B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Container Timing: two nested containertiming nodes, with a child img inside of the inner</title> 4 <body> 5 <style> 6 body { 7 margin: 0; 8 } 9 </style> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/container-timing/resources/container-timing-helpers.js"></script> 13 <script src="/element-timing/resources/element-timing-helpers.js"></script> 14 <script> 15 let beforeRender; 16 async_test(function (t) { 17 assert_implements(window.PerformanceContainerTiming, "PerformanceContainerTiming is not implemented"); 18 const observer = new PerformanceObserver( 19 t.step_func_done(function(entryList) { 20 assert_equals(entryList.getEntries().length, 2, 'two entries expected for the image, one for each containertiming'); 21 const entries = entryList.getEntries(); 22 23 const entry_div1 = entries.find(e => e.identifier == 'div1_ct'); 24 checkContainerEntry(entry_div1, 'div1_ct', 'img_id', beforeRender) 25 checkRect(entry_div1, [0, 100, 0, 100]) 26 checkContainerSize(entry_div1, 10000); 27 28 const entry_div2 = entries.find(e => e.identifier == 'div2_ct'); 29 checkContainerEntry(entry_div2, 'div2_ct', 'img_id', beforeRender) 30 checkRect(entry_div2, [0, 100, 0, 100]) 31 checkContainerSize(entry_div2, 10000); 32 }) 33 ); 34 observer.observe({entryTypes: ['container']}); 35 36 // Add a div that is the container timing root 37 const div1 = document.createElement('div'); 38 div1.setAttribute('containertiming', 'div1_ct'); 39 document.body.appendChild(div1); 40 41 // Add another div, child of the first, that is also a container root 42 const div2 = document.createElement('div'); 43 div2.setAttribute('containertiming', 'div2_ct'); 44 div1.appendChild(div2); 45 46 // Add image of width equal to 100 and height equal to 100. 47 img = document.createElement('img'); 48 img.src = '/container-timing/resources/square100.png'; 49 img.setAttribute('id', 'img_id'); 50 div2.appendChild(img); 51 52 beforeRender = performance.now(); 53 }, 'A parent containertiming root with default nesting policy does not get paints from children containertiming roots.'); 54 </script> 55 56 </body>