transform-non-invertible-discrete-interpolation.html (874B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Animating the "transform" property with a non-invertible matrix should not yield an animation</title> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms/"> 6 <link rel="match" href="transform-non-invertible-discrete-interpolation-ref.html"> 7 <script src="../../../common/reftest-wait.js"></script> 8 <style> 9 10 div { 11 width: 100px; 12 height: 100px; 13 background-color: black; 14 animation: anim 100s linear forwards; 15 } 16 17 @keyframes anim { 18 from { transform: matrix3d(2,0,0,0, 0,2,0,0, 0,0,0,0, 0,0,0,1) } 19 } 20 21 </style> 22 </head> 23 <body> 24 <div></div> 25 <script> 26 (async function() { 27 await Promise.all(document.getAnimations().map(animation => animation.ready)); 28 await new Promise(requestAnimationFrame); 29 await new Promise(requestAnimationFrame); 30 takeScreenshot(); 31 })(); 32 </script> 33 </body> 34 </html>