transform-percent-with-width-and-height.html (911B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Animating the "transform" property with percent values while also animating "width" and "height"</title> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms/"> 6 <link rel="match" href="transform-percent-with-width-and-height-ref.html"> 7 <script src="../../../common/reftest-wait.js"></script> 8 <style> 9 10 div { 11 width: 10px; 12 height: 10px; 13 background-color: black; 14 animation: anim 10s linear forwards; 15 } 16 17 @keyframes anim { 18 0.000000001%, to { 19 width: 200px; 20 height: 200px; 21 transform: translate(50%, 50%); 22 } 23 } 24 25 </style> 26 </head> 27 <body> 28 <div></div> 29 <script> 30 (async function() { 31 await Promise.all(document.getAnimations().map(animation => animation.ready)); 32 await new Promise(requestAnimationFrame); 33 await new Promise(requestAnimationFrame); 34 takeScreenshot(); 35 })(); 36 </script> 37 </body> 38 </html>