clip-path-animation-unset.html (1207B)
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-none-ref.html"> 5 <!-- 6 This test verifies that 7 1) clip-path: unset in an animation does not cause a crash 8 2) that clip-path: unset displays correctly for an animation 9 --> 10 <style> 11 @keyframes clippath { 12 0% { 13 clip-path: inset(25% 25%); 14 } 15 16 100% { 17 clip-path: unset; 18 } 19 } 20 21 .target { 22 animation: clippath 20s steps(2, jump-end) -9.999s; 23 background-color: blue; 24 width: 100px; 25 height: 100px; 26 } 27 28 /* 29 * Ensure that clip-path: none is truly none, and not a rectangle that 30 * encompasses area of the parent 31 */ 32 .outofbounds { 33 position: absolute; 34 top: 200px; 35 left: 200px; 36 height: 10px; 37 width: 10px; 38 background-color: blue 39 } 40 </style> 41 <script src="/common/reftest-wait.js"></script> 42 <script src="../../../../web-animations/resources/timing-utils.js"></script> 43 44 <body> 45 <div class="target"> 46 <div class="outofbounds"></div> 47 </div> 48 <script> 49 waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); 50 </script> 51 </body> 52 53 </html>