image-compositing-large-scale-change.html (1044B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Composited images correctly display under large scale transform changes</title> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 6 <link rel="match" href="image-compositing-large-scale-change-ref.html"/> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-img-element"> 8 <style> 9 html { overflow: hidden; } 10 #change { 11 will-change:transform; 12 width:1000px; 13 height:1000px; 14 position:absolute; 15 top: calc(50% - 5px); 16 left: calc(50% - 5px); 17 } 18 </style> 19 <img id="change" src="image.png"></img> 20 <div id="placeholder" style="position:relative"></div> 21 <script> 22 window.onload = () => { 23 requestAnimationFrame(() => { 24 requestAnimationFrame(() => { 25 let image = document.querySelector('#change'); 26 image.style.transform = 'scale(20)'; 27 placeholder.innerText = "div"; 28 29 requestAnimationFrame(() => { 30 document.documentElement.classList.remove("reftest-wait"); 31 }); 32 }); 33 }); 34 } 35 </script>