| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <html> | 3 <html> |
| 4 <head> | 4 <head> |
| 5 <style> | 5 <style> |
| 6 .container { | 6 .container { |
| 7 width: 120px; | 7 width: 120px; |
| 8 position: relative; | 8 position: relative; |
| 9 left: 50px; | 9 left: 50px; |
| 10 z-index: 0; /* create stacking context */ | 10 z-index: 0; /* create stacking context */ |
| (...skipping 24 matching lines...) Expand all Loading... |
| 35 .gray { | 35 .gray { |
| 36 background-color: gray; | 36 background-color: gray; |
| 37 } | 37 } |
| 38 | 38 |
| 39 .green { | 39 .green { |
| 40 background-color: green; | 40 background-color: green; |
| 41 outline: 1px solid black; | 41 outline: 1px solid black; |
| 42 } | 42 } |
| 43 | 43 |
| 44 .animating1 { | 44 .animating1 { |
| 45 -webkit-animation: translate1 2s linear infinite alternate; | 45 animation: translate1 2s linear infinite alternate; |
| 46 } | 46 } |
| 47 | 47 |
| 48 @-webkit-keyframes translate1 { | 48 @keyframes translate1 { |
| 49 from { transform: translate(0px, -110px); } | 49 from { transform: translate(0px, -110px); } |
| 50 to { transform: translate(0px, 700px); } | 50 to { transform: translate(0px, 700px); } |
| 51 } | 51 } |
| 52 </style> | 52 </style> |
| 53 <script> | 53 <script> |
| 54 if (window.testRunner) { | 54 if (window.testRunner) { |
| 55 testRunner.dumpAsText(); | 55 testRunner.dumpAsText(); |
| 56 testRunner.waitUntilDone(); | 56 testRunner.waitUntilDone(); |
| 57 } | 57 } |
| 58 | 58 |
| 59 function queueBoxForAnimation(elementId, animationClass, callback) { | 59 function queueBoxForAnimation(elementId, animationClass, callback) { |
| 60 var box = document.getElementById(elementId); | 60 var box = document.getElementById(elementId); |
| 61 box.addEventListener('webkitAnimationStart', callback, false); | 61 box.addEventListener('animationstart', callback, false); |
| 62 box.classList.add(animationClass); | 62 box.classList.add(animationClass); |
| 63 } | 63 } |
| 64 | 64 |
| 65 function runTest() | 65 function runTest() |
| 66 { | 66 { |
| 67 queueBoxForAnimation("to-animate1", "animating1", animationStarted); | 67 queueBoxForAnimation("to-animate1", "animating1", animationStarted); |
| 68 } | 68 } |
| 69 | 69 |
| 70 function animationStarted() | 70 function animationStarted() |
| 71 { | 71 { |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 115 <!-- This following have no reason to get a layer, as the parent will get on
e. --> | 115 <!-- This following have no reason to get a layer, as the parent will get on
e. --> |
| 116 <div id="first-green-box" class="box green"></div> | 116 <div id="first-green-box" class="box green"></div> |
| 117 <div class="box green rotate-45deg"></div> | 117 <div class="box green rotate-45deg"></div> |
| 118 <div class="box green"></div> | 118 <div class="box green"></div> |
| 119 </div> | 119 </div> |
| 120 <!-- This div will also get a layer --> | 120 <!-- This div will also get a layer --> |
| 121 <div class="box yellow"></div> | 121 <div class="box yellow"></div> |
| 122 <pre id="layers">Layer tree goes here in DRT</pre> | 122 <pre id="layers">Layer tree goes here in DRT</pre> |
| 123 </body> | 123 </body> |
| 124 </html> | 124 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2518273002:
Remove unnecessary webkit prefixes from animation layout tests (Closed)
