3 <title>Test of -webkit-animation-play-state</title>
8 -webkit-animation-duration: 40ms;
9 -webkit-animation-timing-function: linear;
12 background-color: blue;
13 -webkit-animation-name: move1;
15 @-webkit-keyframes move1 {
16 from { transform: translateX(100px); }
17 to { transform: translateX(200px); }
21 background-color: red;
22 -webkit-animation-name: move2;
24 @-webkit-keyframes move2 {
29 -webkit-animation-play-state: paused;
32 <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
33 <script type="text/javascript">
34 if (window.testRunner) {
35 testRunner.dumpAsText();
36 testRunner.waitUntilDone();
39 function log(message) {
40 var div = document.createElement('div');
41 div.textContent = message;
42 document.body.appendChild(div);
45 function logPassFail(expected, actual, id, description) {
46 var didPass = expected === actual;
47 log((didPass ? 'PASS' : 'FAIL') + ': Element \'' + id + '\' had ' + (didPass ? 'correct' : 'incorrect') + ' style ' + description);
50 function togglePaused() {
51 var targets = document.getElementsByClassName('target');
52 for (var i = 0; i < targets.length; ++i) {
53 targets[i].classList.toggle('paused');
57 var start = function() {
58 document.removeEventListener('webkitAnimationStart', start, false);
59 setTimeout(pause, 20);
66 transform = getComputedStyle(document.getElementById('translate')).webkitTransform;
67 left = getComputedStyle(document.getElementById('left')).left;
68 setTimeout(resume, 20);
72 logPassFail(transform, getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'when paused');
73 logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused');
79 logPassFail('none', getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'at end');
80 logPassFail('auto', getComputedStyle(document.getElementById('left')).left, 'left', 'at end');
81 if (window.testRunner) {
82 testRunner.notifyDone();
86 document.addEventListener('webkitAnimationStart', start, false);
91 This tests the operation of -webkit-animation-play-state. We test style
92 while the animations are paused and once unpaused.
94 <div class="target" id="translate">transform</div>
95 <div class="target" id="left">left</div>