| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 #box { | 5 #box { |
| 6 position: absolute; | 6 position: absolute; |
| 7 height: 100px; | 7 height: 100px; |
| 8 width: 100px; | 8 width: 100px; |
| 9 background-color: green; | 9 background-color: green; |
| 10 -webkit-animation: anim1 0.1s ease 0s forwards; | 10 animation: anim1 0.1s ease 0s forwards; |
| 11 } | 11 } |
| 12 | 12 |
| 13 #correctposition { | 13 #correctposition { |
| 14 position: absolute; | 14 position: absolute; |
| 15 height: 100px; | 15 height: 100px; |
| 16 width: 100px; | 16 width: 100px; |
| 17 background-color: red; | 17 background-color: red; |
| 18 transform: translate3d(50px, 200px, 0); | 18 transform: translate3d(50px, 200px, 0); |
| 19 } | 19 } |
| 20 | 20 |
| 21 @-webkit-keyframes anim1 { | 21 @keyframes anim1 { |
| 22 from { | 22 from { |
| 23 transform: translate3d(100px, 0, 0); | 23 transform: translate3d(100px, 0, 0); |
| 24 } | 24 } |
| 25 to { | 25 to { |
| 26 transform: translate3d(200px, 0, 0); | 26 transform: translate3d(200px, 0, 0); |
| 27 } | 27 } |
| 28 } | 28 } |
| 29 | 29 |
| 30 @-webkit-keyframes anim2 { | 30 @keyframes anim2 { |
| 31 from { | 31 from { |
| 32 transform: translate3d(50px, 0, 0); | 32 transform: translate3d(50px, 0, 0); |
| 33 } | 33 } |
| 34 to { | 34 to { |
| 35 transform: translate3d(50px, 200px, 0); | 35 transform: translate3d(50px, 200px, 0); |
| 36 } | 36 } |
| 37 } | 37 } |
| 38 </style> | 38 </style> |
| 39 <script> | 39 <script> |
| 40 | 40 |
| 41 var box; | 41 var box; |
| 42 var expectedValue = "matrix(1, 0, 0, 1, 50, 200)"; | 42 var expectedValue = "matrix(1, 0, 0, 1, 50, 200)"; |
| 43 | 43 |
| 44 function testState() | 44 function testState() |
| 45 { | 45 { |
| 46 var result = document.getElementById("result"); | 46 var result = document.getElementById("result"); |
| 47 var computedValue = window.getComputedStyle(box).webkitTransform; | 47 var computedValue = window.getComputedStyle(box).transform; |
| 48 | 48 |
| 49 if (computedValue == expectedValue) | 49 if (computedValue == expectedValue) |
| 50 result.innerHTML = "PASS - final state was " + expectedValue; | 50 result.innerHTML = "PASS - final state was " + expectedValue; |
| 51 else | 51 else |
| 52 result.innerHTML = "FAIL - final state was " + computedValue + "
expected " + expectedValue; | 52 result.innerHTML = "FAIL - final state was " + computedValue + "
expected " + expectedValue; |
| 53 | 53 |
| 54 if (window.testRunner) | 54 if (window.testRunner) |
| 55 testRunner.notifyDone(); | 55 testRunner.notifyDone(); |
| 56 } | 56 } |
| 57 | 57 |
| 58 function swapAnim() | 58 function swapAnim() |
| 59 { | 59 { |
| 60 // remove this listener | 60 // remove this listener |
| 61 box.removeEventListener("webkitAnimationEnd", swapAnim); | 61 box.removeEventListener("animationend", swapAnim); |
| 62 // add the test listener | 62 // add the test listener |
| 63 box.addEventListener("webkitAnimationEnd", testState, false); | 63 box.addEventListener("animationend", testState, false); |
| 64 // change the animation | 64 // change the animation |
| 65 box.style.webkitAnimation = "anim2 0.1s ease 0s forwards"; | 65 box.style.animation = "anim2 0.1s ease 0s forwards"; |
| 66 } | 66 } |
| 67 | 67 |
| 68 function setup() | 68 function setup() |
| 69 { | 69 { |
| 70 box = document.getElementById("box"); | 70 box = document.getElementById("box"); |
| 71 document.addEventListener("webkitAnimationEnd", swapAnim, false); | 71 document.addEventListener("animationend", swapAnim, false); |
| 72 } | 72 } |
| 73 | 73 |
| 74 if (window.testRunner) { | 74 if (window.testRunner) { |
| 75 testRunner.waitUntilDone(); | 75 testRunner.waitUntilDone(); |
| 76 } | 76 } |
| 77 | 77 |
| 78 window.addEventListener("load", setup, false); | 78 window.addEventListener("load", setup, false); |
| 79 | 79 |
| 80 </script> | 80 </script> |
| 81 </head> | 81 </head> |
| 82 <body> | 82 <body> |
| 83 <!-- | 83 <!-- |
| 84 This sets up two animations. It runs the first and then triggers the 2nd. The fi
rst fills | 84 This sets up two animations. It runs the first and then triggers the 2nd. The fi
rst fills |
| 85 forwards, but should still be replaced by the second. The first is a horizontal
animation, the second is | 85 forwards, but should still be replaced by the second. The first is a horizontal
animation, the second is |
| 86 vertical, so the box should end up translated vertically down the page. | 86 vertical, so the box should end up translated vertically down the page. |
| 87 --> | 87 --> |
| 88 <div id="correctposition"> | 88 <div id="correctposition"> |
| 89 </div> | 89 </div> |
| 90 <div id="box"> | 90 <div id="box"> |
| 91 </div> | 91 </div> |
| 92 <div id="result"> | 92 <div id="result"> |
| 93 </div> | 93 </div> |
| 94 </body> | 94 </body> |
| 95 </html> | 95 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2527583002:
CSS Animations: Remove unnecessary webkit prefixes from layout tests (Closed)
