clip-path-animation-mixed-calc.html (1102B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> 4 <link rel="match" href="clip-path-animation-mixed-calc-ref.html"> 5 <!-- 6 This test PASSES if a running clip path animation with a mixed-unit 7 calc changes in response to changes in font size and element size. 8 --> 9 <style> 10 #animated { 11 width: 100px; 12 height: 100px; 13 font-size: 10px; 14 background-color: green; 15 animation: clippath 20s steps(2, jump-end) -10.05s; 16 } 17 18 #animated.override { 19 width: 150px; 20 height: 150px; 21 font-size: 15px; 22 } 23 24 @keyframes clippath { 25 0% { clip-path: circle(10px at 50% 50%); } 26 100% { clip-path: circle(calc(20% + 2em) at 50% 50%); } 27 } 28 </style> 29 <script src="/common/reftest-wait.js"></script> 30 <script src="/web-animations/resources/timing-utils.js"></script> 31 <body> 32 <div id="animated"></div> 33 <script> 34 let element = document.getElementById("animated"); 35 let animation = document.getAnimations()[0]; 36 animation.ready.then(() => { 37 element.className = "override"; 38 requestAnimationFrame(takeScreenshot); 39 }) 40 </script> 41 </body> 42 </html>