| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 | |
| 6 #result { | |
| 7 opacity: 0; /* hide from pixel test */ | |
| 8 } | |
| 9 | |
| 10 #box { | 5 #box { |
| 11 position: absolute; | 6 position: absolute; |
| 12 height: 100px; | 7 height: 100px; |
| 13 width: 100px; | 8 width: 100px; |
| 14 background-color: green; | 9 background-color: green; |
| 15 -webkit-animation: anim1 0.1s ease 0s forwards; | 10 -webkit-animation: anim1 0.1s ease 0s forwards; |
| 16 } | 11 } |
| 17 | 12 |
| 18 #correctposition { | 13 #correctposition { |
| 19 position: absolute; | 14 position: absolute; |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 70 box.style.webkitAnimation = "anim2 0.1s ease 0s forwards"; | 65 box.style.webkitAnimation = "anim2 0.1s ease 0s forwards"; |
| 71 } | 66 } |
| 72 | 67 |
| 73 function setup() | 68 function setup() |
| 74 { | 69 { |
| 75 box = document.getElementById("box"); | 70 box = document.getElementById("box"); |
| 76 document.addEventListener("webkitAnimationEnd", swapAnim, false); | 71 document.addEventListener("webkitAnimationEnd", swapAnim, false); |
| 77 } | 72 } |
| 78 | 73 |
| 79 if (window.testRunner) { | 74 if (window.testRunner) { |
| 80 testRunner.dumpAsText(true); | |
| 81 testRunner.waitUntilDone(); | 75 testRunner.waitUntilDone(); |
| 82 } | 76 } |
| 83 | 77 |
| 84 window.addEventListener("load", setup, false); | 78 window.addEventListener("load", setup, false); |
| 85 | 79 |
| 86 </script> | 80 </script> |
| 87 </head> | 81 </head> |
| 88 <body> | 82 <body> |
| 89 <!-- | 83 <!-- |
| 90 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 |
| 91 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 |
| 92 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. |
| 93 --> | 87 --> |
| 94 <div id="correctposition"> | 88 <div id="correctposition"> |
| 95 </div> | 89 </div> |
| 96 <div id="box"> | 90 <div id="box"> |
| 97 </div> | 91 </div> |
| 98 <div id="result"> | 92 <div id="result"> |
| 99 </div> | 93 </div> |
| 100 </body> | 94 </body> |
| 101 </html> | 95 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 14329028:
Convert replace-filling-transform to ref-test (Closed)
Base URL: svn://svn.chromium.org/blink/trunk