| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> |
| <link rel="match" href="two-clip-path-animation-diff-length1-ref.html"> |
| <style> |
| #container { |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| animation: clippath2 10s step-end; |
| } |
| |
| @keyframes clippath2 { |
| 0% { |
| clip-path: inset(10px 10px); |
| } |
| |
| 100% { |
| clip-path: inset(11px 11px); |
| } |
| } |
| </style> |
| <script src="/common/reftest-wait.js"></script> |
| <script src="../../../../web-animations/testcommon.js"></script> |
| |
| <body> |
| <div id="container"></div> |
| |
| <script> |
| // This test ensures that if we have two different-length animations, when |
| // the one with higher compositing order finishes, the other one would still |
| // run normally. |
| document.getAnimations()[0].ready.then(() => { |
| document.getElementById("container").animate( |
| [ |
| { clipPath: "circle(10% at 50% 50%)" }, |
| { clipPath: "circle(50% at 50% 50%)" }, |
| ], |
| 100, |
| ).finished.then(takeScreenshot); |
| }); |
| </script> |
| </body> |
| |
| </html> |