| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style type="text/css"> | 4 <style type="text/css"> |
| 5 .target { | 5 .target { |
| 6 position: relative; | 6 position: relative; |
| 7 height: 100px; | 7 height: 100px; |
| 8 width: 100px; | 8 width: 100px; |
| 9 background-color: red; | 9 background-color: red; |
| 10 margin-bottom: 10px; | 10 margin-bottom: 10px; |
| 11 } | 11 } |
| 12 .animated { | 12 .animated { |
| 13 -webkit-animation: test 10ms linear forwards; | 13 animation: test 10ms linear forwards; |
| 14 -webkit-animation-play-state: paused; | 14 animation-play-state: paused; |
| 15 animation: test 10ms linear forwards; | 15 animation: test 10ms linear forwards; |
| 16 animation-play-state: paused; | 16 animation-play-state: paused; |
| 17 } | 17 } |
| 18 .running { | 18 .running { |
| 19 -webkit-animation-play-state: running; | 19 animation-play-state: running; |
| 20 animation-play-state: running; | 20 animation-play-state: running; |
| 21 } | 21 } |
| 22 #animation1 { | 22 #animation1 { |
| 23 -webkit-animation-delay: -10ms; | 23 animation-delay: -10ms; |
| 24 animation-delay: -10ms; | 24 animation-delay: -10ms; |
| 25 } | 25 } |
| 26 #animation2 { | 26 #animation2 { |
| 27 -webkit-animation-delay: 0ms; | 27 animation-delay: 0ms; |
| 28 animation-delay: 0ms; | 28 animation-delay: 0ms; |
| 29 } | 29 } |
| 30 #animation3 { | 30 #animation3 { |
| 31 -webkit-animation-delay: 10ms; | 31 animation-delay: 10ms; |
| 32 animation-delay: 10ms; | 32 animation-delay: 10ms; |
| 33 } | 33 } |
| 34 @-webkit-keyframes test { | 34 @keyframes test { |
| 35 from { left: 100px; } | 35 from { left: 100px; } |
| 36 to { left: 300px; } | 36 to { left: 300px; } |
| 37 } | 37 } |
| 38 @keyframes test { | 38 @keyframes test { |
| 39 from { left: 100px; } | 39 from { left: 100px; } |
| 40 to { left: 300px; } | 40 to { left: 300px; } |
| 41 } | 41 } |
| 42 </style> | 42 </style> |
| 43 <script type="text/javascript"> | 43 <script type="text/javascript"> |
| 44 if (window.testRunner) { | 44 if (window.testRunner) { |
| (...skipping 30 matching lines...) Expand all Loading... |
| 75 | 75 |
| 76 var isRunning; | 76 var isRunning; |
| 77 function run(element) { | 77 function run(element) { |
| 78 element.classList.add('running'); | 78 element.classList.add('running'); |
| 79 isRunning = true; | 79 isRunning = true; |
| 80 } | 80 } |
| 81 | 81 |
| 82 function start(target, expectImmediateStartEvent) { | 82 function start(target, expectImmediateStartEvent) { |
| 83 isRunning = false; | 83 isRunning = false; |
| 84 var startEventHandler = onStartEventFired.bind(null, expectImmediateStartE
vent); | 84 var startEventHandler = onStartEventFired.bind(null, expectImmediateStartE
vent); |
| 85 target.addEventListener('webkitAnimationStart', startEventHandler); | 85 target.addEventListener('animationstart', startEventHandler); |
| 86 target.addEventListener('animationstart', startEventHandler); | 86 target.addEventListener('animationstart', startEventHandler); |
| 87 target.classList.add('animated'); | 87 target.classList.add('animated'); |
| 88 if (!expectImmediateStartEvent) { | 88 if (!expectImmediateStartEvent) { |
| 89 setTimeout(run.bind(null, target), 100); | 89 setTimeout(run.bind(null, target), 100); |
| 90 } | 90 } |
| 91 } | 91 } |
| 92 | 92 |
| 93 function go() { | 93 function go() { |
| 94 start(document.getElementById('animation1'), true); | 94 start(document.getElementById('animation1'), true); |
| 95 } | 95 } |
| 96 </script> | 96 </script> |
| 97 </head> | 97 </head> |
| 98 <body onload="go()"> | 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> | 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> | 100 <div class="target" id="animation1"></div> |
| 101 <div class="target" id="animation2"></div> | 101 <div class="target" id="animation2"></div> |
| 102 <div class="target" id="animation3"></div> | 102 <div class="target" id="animation3"></div> |
| 103 <div id="result"></div> | 103 <div id="result"></div> |
| 104 </body> | 104 </body> |
| 105 </html> | 105 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2518273002:
Remove unnecessary webkit prefixes from animation layout tests (Closed)
