| <!DOCTYPE html> |
| <head> |
| <title>Test of animation-play-state</title> |
| <style> |
| .target { |
| height: 100px; |
| width: 100px; |
| animation-duration: 1000ms; |
| animation-timing-function: linear; |
| } |
| #translate { |
| background-color: blue; |
| } |
| #translate.started { |
| animation-name: move1; |
| } |
| @keyframes move1 { |
| from { transform: translateX(100px); } |
| to { transform: translateX(200px); } |
| } |
| #left { |
| position: relative; |
| background-color: red; |
| } |
| #left.started { |
| animation-name: move2; |
| } |
| @keyframes move2 { |
| from { left: 100px; } |
| to { left: 200px; } |
| } |
| .paused { |
| animation-play-state: paused; |
| } |
| .quick { |
| animation-duration: 100ms; |
| } |
| </style> |
| <script src="resources/animation-test-helpers.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function log(message) { |
| var div = document.createElement('div'); |
| div.textContent = message; |
| document.body.appendChild(div); |
| } |
| |
| function logPassFail(expected, actual, id, description) { |
| var didPass = expected === actual; |
| log((didPass ? 'PASS' : 'FAIL') + ': Element \'' + id + '\' had ' + (didPass ? 'correct' : 'incorrect') + ' style ' + description); |
| } |
| |
| function toggleClass(className) { |
| var targets = document.getElementsByClassName('target'); |
| for (var i = 0; i < targets.length; ++i) { |
| targets[i].classList.toggle(className); |
| } |
| } |
| |
| function start() { |
| document.removeEventListener('animationstart', start, false); |
| requestAnimationFrame(pause); |
| } |
| |
| var transform; |
| var left; |
| var paused = false; |
| function pause() { |
| paused = true; |
| toggleClass('paused'); |
| // Transitioning the play state from running to paused is asynchronous. |
| // The animation is paused once the user agent signals that the animation |
| // is ready. |
| requestAnimationFrame(() => { |
| transform = getComputedStyle(document.getElementById('translate')).transform; |
| left = getComputedStyle(document.getElementById('left')).left; |
| requestAnimationFrame(resume); |
| }); |
| } |
| |
| function resume() { |
| logPassFail(transform, getComputedStyle(document.getElementById('translate')).transform, 'translate', 'when paused'); |
| logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused'); |
| toggleClass('paused'); |
| toggleClass('quick'); |
| } |
| |
| function end() { |
| document.removeEventListener('animationend', end, false); |
| if (!paused) |
| log('Missed frame in which to pause animation'); |
| logPassFail('none', getComputedStyle(document.getElementById('translate')).transform, 'translate', 'at end'); |
| logPassFail('0px', getComputedStyle(document.getElementById('left')).left, 'left', 'at end'); |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| |
| // Wait until the page has loaded and painted to start the animations to |
| // ensure we will have enough main frames to pause the animation. |
| requestAnimationFrame(function() { |
| requestAnimationFrame(function() { |
| document.addEventListener('animationstart', start, false); |
| document.addEventListener('animationend', end, false); |
| toggleClass('started'); |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <p> |
| This tests the operation of animation-play-state. We test style |
| while the animations are paused and once unpaused. |
| </p> |
| <div class="target" id="translate">transform</div> |
| <div class="target" id="left">left</div> |
| </body> |
| </html> |
