clip-path-animation-fixed-position.html (1170B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta name=fuzzy content="0-60;0-350"> 4 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> 5 <link rel="match" href="clip-path-animation-fixed-position-ref.html"> 6 <!-- 7 Test that clip paths on elements with position: fixed draw correctly, 8 including clipping children that are out of bounds. 9 --> 10 <style> 11 .container { 12 width: 100px; 13 height: 100px; 14 position: fixed; 15 top: 100px; 16 left: 100px; 17 background-color: green; 18 animation: clippath 20s steps(2, jump-end) -9.999s; 19 } 20 21 .big { 22 position: absolute; 23 top: 100px; 24 width: 500px; 25 height: 500px; 26 background-color: blue; 27 } 28 29 @keyframes clippath { 30 0% { 31 clip-path: circle(50% at 50% 50%); 32 } 33 34 100% { 35 clip-path: circle(350% at 20% 20%); 36 } 37 } 38 </style> 39 <script src="/common/reftest-wait.js"></script> 40 <script src="../../../../web-animations/resources/timing-utils.js"></script> 41 42 <body> 43 <div class="container"> 44 <div class="big"></div> 45 </div> 46 47 <script> 48 waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); 49 </script> 50 </body> 51 52 </html>