change-scale-property.html (761B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Change scale property</title> 4 <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> 5 <link rel="help" href="https://crbug.com/1365255"> 6 <link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> 7 <style> 8 #target { 9 will-change: transform; 10 scale: 0.5; 11 width: 100px; 12 height: 100px; 13 background: green; 14 } 15 #container { 16 width: 100px; 17 height: 100px; 18 background: red; 19 } 20 </style> 21 <p>Test passes if there is a filled green square.</p> 22 <div id="container"> 23 <div id="target"></div> 24 </div> 25 <script> 26 requestAnimationFrame(() => { 27 requestAnimationFrame(() => { 28 target.style.scale = '1'; 29 document.documentElement.removeAttribute('class'); 30 }); 31 }); 32 </script>