| <!DOCTYPE html> |
| <head> |
| <title>Test of -webkit-animation-play-state</title> |
| <style> |
| .target { |
| height: 100px; |
| width: 100px; |
| -webkit-animation-duration: 40ms; |
| -webkit-animation-timing-function: linear; |
| } |
| #translate { |
| background-color: blue; |
| -webkit-animation-name: move1; |
| } |
| @-webkit-keyframes move1 { |
| from { transform: translateX(100px); } |
| to { transform: translateX(200px); } |
| } |
| #left { |
| position: relative; |
| background-color: red; |
| -webkit-animation-name: move2; |
| } |
| @-webkit-keyframes move2 { |
| from { left: 100px; } |
| to { left: 200px; } |
| } |
| .paused { |
| -webkit-animation-play-state: paused; |
| } |
| </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 togglePaused() { |
| var targets = document.getElementsByClassName('target'); |
| for (var i = 0; i < targets.length; ++i) { |
| targets[i].classList.toggle('paused'); |
| } |
| } |
| |
| var start = function() { |
| document.removeEventListener('webkitAnimationStart', start, false); |
| setTimeout(pause, 20); |
| } |
| |
| var transform; |
| var left; |
| function pause() { |
| togglePaused(); |
| transform = getComputedStyle(document.getElementById('translate')).webkitTransform; |
| left = getComputedStyle(document.getElementById('left')).left; |
| setTimeout(resume, 20); |
| } |
| |
| function resume() { |
| logPassFail(transform, getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'when paused'); |
| logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused'); |
| togglePaused(); |
| setTimeout(end, 100); |
| } |
| |
| function end() { |
| logPassFail('none', getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'at end'); |
| logPassFail('auto', getComputedStyle(document.getElementById('left')).left, 'left', 'at end'); |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| |
| document.addEventListener('webkitAnimationStart', start, false); |
| </script> |
| </head> |
| <body> |
| <p> |
| This tests the operation of -webkit-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> |
