clip-path-animation-fixed-position-rounding-error.html (1003B)
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-fixed-position-rounding-error-ref.html"> 5 <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-400"> 6 <!-- 7 Test that clip paths on elements with position: fixed draw correctly, 8 even in scenarios that involve partial pixels 9 --> 10 <style> 11 .container { 12 background-color: green; 13 animation: clippath 20s steps(2, jump-end) -9.999s; 14 position: fixed; 15 width: 70px; 16 height: 126px; 17 } 18 19 @keyframes clippath { 20 0% { 21 clip-path: inset(0% 0%); 22 } 23 24 100% { 25 clip-path: inset(10% 10%); 26 } 27 } 28 </style> 29 <script src="/common/reftest-wait.js"></script> 30 <script src="../../../../web-animations/resources/timing-utils.js"></script> 31 32 <body> 33 <div class="container"></div> 34 <script> 35 waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); 36 </script> 37 </body> 38 39 </html>