| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Dynamically set animation-play-state to paused</title> |
| <link rel="author" title="Igalia S.L." href="https://www.igalia.com/"> |
| <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state"> |
| <meta name="assert" content="Visually check that transform animations stop |
| when animation-play-state is set to paused"> |
| <link rel="match" href="set-animation-play-state-to-paused-001-ref.html"> |
| <style> |
| #container { |
| position: absolute; |
| left: 0; |
| top: 3em; |
| } |
| #squareLinear, #squareSteps { |
| width: 100px; |
| height: 100px; |
| background: red; |
| position: absolute; |
| left: -50px; |
| } |
| #squareLinear { |
| top: 25px; |
| animation: move 2s linear; |
| } |
| #squareSteps { |
| top: 175px; |
| animation: move 2s steps(1000, end); |
| } |
| #coveringRect { |
| position: absolute; |
| background: lightgreen; |
| width: 150px; |
| height: 300px; |
| left: -75px; |
| top: 0px; |
| transform: translate(150px); |
| } |
| .pause { |
| opacity: 0.6; |
| animation-play-state: paused !important; |
| } |
| @keyframes move |
| { |
| 100% { |
| transform: translate(500px); |
| } |
| } |
| </style> |
| <script> |
| var start = null; |
| var animationDuration = 2000; |
| function halfWidth(id) |
| { |
| return document.getElementById(id).scrollWidth / 2; |
| } |
| function shift(id) |
| { |
| var transform = window.getComputedStyle(document.getElementById(id)).transform; |
| if (transform === "none") |
| return 0; |
| // See https://drafts.csswg.org/css-transforms-2/#serialization-of-the-computed-value |
| return parseFloat(transform.split(/,\s*/)[4]); |
| } |
| function step(timestamp) { |
| // For each square, pause the animation as soon as it passes under the covering rect. |
| ["squareLinear", "squareSteps"].forEach((id) => { |
| if (Math.abs(shift("coveringRect") - shift(id)) < halfWidth("coveringRect") - halfWidth(id)) |
| document.getElementById(id).classList.add("pause"); |
| }); |
| |
| // Stop the reftest after the time when the animations would have stop. |
| // If pausing failed for some reason, the squares will be visible. |
| if (!start) start = timestamp; |
| if (timestamp - start < animationDuration) |
| window.requestAnimationFrame(step); |
| else if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| function runTest() { |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| window.requestAnimationFrame(step); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>This test passes if you see a green rectangle and no red.</p> |
| <div id="container"> |
| <div id="squareLinear"></div> |
| <div id="squareSteps"></div> |
| <div id="coveringRect"></div> |
| </div> |
| </body> |
| </html> |
