| 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 1s linear; | |
| 14 animation: test 1s linear; | |
| 15 } | |
| 16 #negative-delay { | |
| 17 animation-delay: -500ms; | |
| 18 animation-delay: -500ms; | |
| 19 } | |
| 20 #zero-delay { | |
| 21 animation-delay: 0ms; | |
| 22 animation-delay: 0ms; | |
| 23 } | |
| 24 #positive-delay { | |
| 25 animation-delay: 500ms; | |
| 26 animation-delay: 500ms; | |
| 27 } | |
| 28 @keyframes test { | |
| 29 from { left: 100px; } | |
| 30 to { left: 300px; } | |
| 31 } | |
| 32 @keyframes test { | |
| 33 from { left: 100px; } | |
| 34 to { left: 300px; } | |
| 35 } | |
| 36 </style> | |
| 37 <script type="text/javascript"> | |
| 38 if (window.testRunner) { | |
| 39 testRunner.dumpAsText(); | |
| 40 testRunner.waitUntilDone(); | |
| 41 } | |
| 42 | |
| 43 var immediate = true; | |
| 44 onload = function() { | |
| 45 requestAnimationFrame(function(t) { | |
| 46 ['negative-delay', 'zero-delay', 'positive-delay'].forEach(function(id)
{ | |
| 47 var target = document.getElementById(id); | |
| 48 target.addEventListener('animationstart', onStartEventFired); | |
| 49 target.classList.add('animated'); | |
| 50 }); | |
| 51 requestAnimationFrame(function() { | |
| 52 immediate = false; | |
| 53 }); | |
| 54 }); | |
| 55 }; | |
| 56 | |
| 57 function log(message) { | |
| 58 var div = document.createElement('div'); | |
| 59 div.textContent = message; | |
| 60 document.body.appendChild(div); | |
| 61 } | |
| 62 | |
| 63 function onStartEventFired(e) { | |
| 64 var id = e.target.id; | |
| 65 var pass = immediate || id == 'positive-delay'; | |
| 66 log((pass ? 'PASS' : 'FAIL') + ': ' + id + ': Start event ' + (immediate ?
'fired' : 'did not fire') + ' immediately'); | |
| 67 if (id === 'positive-delay' && window.testRunner) { | |
| 68 testRunner.notifyDone(); | |
| 69 } | |
| 70 } | |
| 71 </script> | |
| 72 </head> | |
| 73 <body> | |
| 74 <p>Tests that the start event is fired at the correct time with different star
t delays.</p> | |
| 75 <div class="target" id="negative-delay"></div> | |
| 76 <div class="target" id="zero-delay"></div> | |
| 77 <div class="target" id="positive-delay"></div> | |
| 78 <div id="result"></div> | |
| 79 </body> | |
| 80 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2976603002:
Move animation event tests to subdirectory (Closed)
