| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style type="text/css"> | |
| 5 .target { | |
| 6 position: relative; | |
| 7 height: 100px; | |
| 8 width: 100px; | |
| 9 background-color: red; | |
| 10 margin-bottom: 10px; | |
| 11 } | |
| 12 .animated { | |
| 13 animation: test 10ms linear forwards; | |
| 14 animation-play-state: paused; | |
| 15 animation: test 10ms linear forwards; | |
| 16 animation-play-state: paused; | |
| 17 } | |
| 18 .running { | |
| 19 animation-play-state: running; | |
| 20 animation-play-state: running; | |
| 21 } | |
| 22 #animation1 { | |
| 23 animation-delay: -10ms; | |
| 24 animation-delay: -10ms; | |
| 25 } | |
| 26 #animation2 { | |
| 27 animation-delay: 0ms; | |
| 28 animation-delay: 0ms; | |
| 29 } | |
| 30 #animation3 { | |
| 31 animation-delay: 10ms; | |
| 32 animation-delay: 10ms; | |
| 33 } | |
| 34 @keyframes test { | |
| 35 from { left: 100px; } | |
| 36 to { left: 300px; } | |
| 37 } | |
| 38 @keyframes test { | |
| 39 from { left: 100px; } | |
| 40 to { left: 300px; } | |
| 41 } | |
| 42 </style> | |
| 43 <script type="text/javascript"> | |
| 44 if (window.testRunner) { | |
| 45 testRunner.dumpAsText(); | |
| 46 testRunner.waitUntilDone(); | |
| 47 } | |
| 48 | |
| 49 function log(message) { | |
| 50 var div = document.createElement('div'); | |
| 51 div.textContent = message; | |
| 52 document.body.appendChild(div); | |
| 53 } | |
| 54 | |
| 55 function startNextAnimation(currentId) { | |
| 56 // Running animations serially avoids flakiness due to overlap. | |
| 57 if (currentId === 'animation1') { | |
| 58 start(document.getElementById('animation2'), true); | |
| 59 } else if (currentId === 'animation2') { | |
| 60 start(document.getElementById('animation3'), false); | |
| 61 } else if (currentId === 'animation3' && window.testRunner) { | |
| 62 testRunner.notifyDone(); | |
| 63 } | |
| 64 } | |
| 65 | |
| 66 function onStartEventFired(expectStartEventFirst, e) { | |
| 67 var id = e.target.id; | |
| 68 if (expectStartEventFirst) { | |
| 69 log('PASS: ' + id + ': Start event fired without setting play state to r
unning'); | |
| 70 } else { | |
| 71 log((isRunning ? 'PASS' : 'FAIL') + ': ' + id + ': Start event fired ' +
(isRunning ? 'after' : 'before') + ' play state was set to running'); | |
| 72 } | |
| 73 startNextAnimation(id); | |
| 74 } | |
| 75 | |
| 76 var isRunning; | |
| 77 function run(element) { | |
| 78 element.classList.add('running'); | |
| 79 isRunning = true; | |
| 80 } | |
| 81 | |
| 82 function start(target, expectImmediateStartEvent) { | |
| 83 isRunning = false; | |
| 84 var startEventHandler = onStartEventFired.bind(null, expectImmediateStartE
vent); | |
| 85 target.addEventListener('animationstart', startEventHandler); | |
| 86 target.addEventListener('animationstart', startEventHandler); | |
| 87 target.classList.add('animated'); | |
| 88 if (!expectImmediateStartEvent) { | |
| 89 setTimeout(run.bind(null, target), 100); | |
| 90 } | |
| 91 } | |
| 92 | |
| 93 function go() { | |
| 94 start(document.getElementById('animation1'), true); | |
| 95 } | |
| 96 </script> | |
| 97 </head> | |
| 98 <body onload="go()"> | |
| 99 <p>Tests that an animation which is initially paused fires its start event as
soon as its delay expires, not when it transitions to the running state.</p> | |
| 100 <div class="target" id="animation1"></div> | |
| 101 <div class="target" id="animation2"></div> | |
| 102 <div class="target" id="animation3"></div> | |
| 103 <div id="result"></div> | |
| 104 </body> | |
| 105 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2976603002:
Move animation event tests to subdirectory (Closed)
