image-with-css-scale.html (1429B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: image with scaling.</title> 4 <head> 5 <style> 6 /* The margin of 50px allows the rect to be fully shown when the div is scaled. */ 7 body { 8 margin: 50px; 9 } 10 .my_div { 11 width: 100px; 12 height: 50px; 13 transform: scale(2); 14 } 15 </style> 16 </head> 17 <body> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script src="resources/element-timing-helpers.js"></script> 21 <script> 22 const beforeRender = performance.now(); 23 async_test(function (t) { 24 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 25 const observer = new PerformanceObserver( 26 t.step_func_done(function(entryList) { 27 assert_equals(entryList.getEntries().length, 1); 28 const entry = entryList.getEntries()[0]; 29 const pathname = window.location.origin + '/images/black-rectangle.png'; 30 checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender, 31 document.getElementById('rect_id')); 32 checkRect(entry, [0, 200, 25, 125]); 33 checkNaturalSize(entry, 100, 50); 34 }) 35 ); 36 observer.observe({entryTypes: ['element']}); 37 }, 'Image intersectionRect is affected by scaling, but not its intrinsic size.'); 38 </script> 39 <div class="my_div" id='div_id'> 40 <img src="/images/black-rectangle.png" elementtiming="rectangle" id='rect_id'/> 41 </div> 42 </body>