image-with-rotation.html (1833B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: image with rotation.</title> 4 <head> 5 <style> 6 body { 7 margin: 0px; 8 } 9 .my_div { 10 width: 100px; 11 height: 50px; 12 transform: rotate(45deg); 13 transform-origin: top left; 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 checkNaturalSize(entry, 100, 50); 33 const rect = entry.intersectionRect; 34 // The div rotates with respect to the origin, so part of it will be invisible. 35 // The width of the visible part will be 100 / sqrt(2) and the height will be 36 // 100 / sqrt(2) + 50 / sqrt(2). 37 assert_equals(rect.left, 0); 38 // Checking precision only to the nearest integer. 39 assert_equals(Math.round(rect.right), 71); 40 assert_equals(rect.top, 0); 41 assert_equals(Math.round(rect.bottom), 106); 42 }) 43 ); 44 observer.observe({entryTypes: ['element']}); 45 }, 'Image intersectionRect is affected by rotation, but not its intrinsic size.'); 46 </script> 47 <div class="my_div" id="div_id"> 48 <img src="/images/black-rectangle.png" elementtiming="rectangle" id="rect_id"/> 49 </div> 50 </body>