| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <html lang="en"> | 3 <html lang="en"> |
| 4 <head> | 4 <head> |
| 5 <title>Test simple animation with fill modes and non integer iteration count</
title> | 5 <title>Test simple animation with fill modes and non integer iteration count</
title> |
| 6 <style type="text/css" media="screen"> | 6 <style type="text/css" media="screen"> |
| 7 .box { | 7 .box { |
| 8 position: relative; | 8 position: relative; |
| 9 left: 100px; | 9 left: 100px; |
| 10 height: 100px; | 10 height: 100px; |
| 11 width: 100px; | 11 width: 100px; |
| 12 -webkit-animation-delay: 0.1s; | 12 animation-delay: 0.1s; |
| 13 -webkit-animation-duration: 0.1s; | 13 animation-duration: 0.1s; |
| 14 -webkit-animation-timing-function: linear; | 14 animation-timing-function: linear; |
| 15 -webkit-animation-name: anim; | 15 animation-name: anim; |
| 16 } | 16 } |
| 17 @-webkit-keyframes anim { | 17 @keyframes anim { |
| 18 from { left: 200px; } | 18 from { left: 200px; } |
| 19 to { left: 300px; } | 19 to { left: 300px; } |
| 20 } | 20 } |
| 21 #none { | 21 #none { |
| 22 background-color: blue; | 22 background-color: blue; |
| 23 -webkit-animation-fill-mode: none; | 23 animation-fill-mode: none; |
| 24 -webkit-animation-iteration-count: 1.4; | 24 animation-iteration-count: 1.4; |
| 25 } | 25 } |
| 26 #backwards { | 26 #backwards { |
| 27 background-color: red; | 27 background-color: red; |
| 28 -webkit-animation-fill-mode: backwards; | 28 animation-fill-mode: backwards; |
| 29 -webkit-animation-iteration-count: 0.4; | 29 animation-iteration-count: 0.4; |
| 30 } | 30 } |
| 31 #forwards { | 31 #forwards { |
| 32 background-color: green; | 32 background-color: green; |
| 33 -webkit-animation-fill-mode: forwards; | 33 animation-fill-mode: forwards; |
| 34 -webkit-animation-iteration-count: 1.4; | 34 animation-iteration-count: 1.4; |
| 35 } | 35 } |
| 36 #both { | 36 #both { |
| 37 background-color: yellow; | 37 background-color: yellow; |
| 38 -webkit-animation-fill-mode: both; | 38 animation-fill-mode: both; |
| 39 -webkit-animation-iteration-count: 1.4; | 39 animation-iteration-count: 1.4; |
| 40 } | 40 } |
| 41 #both_iterating { | 41 #both_iterating { |
| 42 background-color: cyan; | 42 background-color: cyan; |
| 43 -webkit-animation-fill-mode: both; | 43 animation-fill-mode: both; |
| 44 -webkit-animation-iteration-count: 2.4; | 44 animation-iteration-count: 2.4; |
| 45 -webkit-animation-direction: alternate; | 45 animation-direction: alternate; |
| 46 } | 46 } |
| 47 #both_iterating_reverse { | 47 #both_iterating_reverse { |
| 48 background-color: #999; | 48 background-color: #999; |
| 49 -webkit-animation-fill-mode: both; | 49 animation-fill-mode: both; |
| 50 -webkit-animation-iteration-count: 2.4; | 50 animation-iteration-count: 2.4; |
| 51 -webkit-animation-direction: alternate-reverse; | 51 animation-direction: alternate-reverse; |
| 52 } | 52 } |
| 53 </style> | 53 </style> |
| 54 <script type="text/javascript" charset="utf-8"> | 54 <script type="text/javascript" charset="utf-8"> |
| 55 const numAnims = 6; | 55 const numAnims = 6; |
| 56 var animsFinished = 0; | 56 var animsFinished = 0; |
| 57 const expectedValues = [ | 57 const expectedValues = [ |
| 58 {id: "none", start: 100, end: 100}, | 58 {id: "none", start: 100, end: 100}, |
| 59 {id: "backwards", start: 200, end: 100}, | 59 {id: "backwards", start: 200, end: 100}, |
| 60 {id: "forwards", start: 100, end: 240}, | 60 {id: "forwards", start: 100, end: 240}, |
| 61 {id: "both", start: 200, end: 240}, | 61 {id: "both", start: 200, end: 240}, |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 99 testRunner.notifyDone(); | 99 testRunner.notifyDone(); |
| 100 } | 100 } |
| 101 | 101 |
| 102 window.onload = function () { | 102 window.onload = function () { |
| 103 for (var i=0; i < expectedValues.length; i++) { | 103 for (var i=0; i < expectedValues.length; i++) { |
| 104 var el = document.getElementById(expectedValues[i].id); | 104 var el = document.getElementById(expectedValues[i].id); |
| 105 var expectedValue = expectedValues[i].start; | 105 var expectedValue = expectedValues[i].start; |
| 106 var realValue = parseFloat(window.getComputedStyle(el).left); | 106 var realValue = parseFloat(window.getComputedStyle(el).left); |
| 107 log(expectedValue, realValue, true, expectedValues[i].id); | 107 log(expectedValue, realValue, true, expectedValues[i].id); |
| 108 } | 108 } |
| 109 document.addEventListener("webkitAnimationEnd", animationEnded, false); | 109 document.addEventListener("animationend", animationEnded, false); |
| 110 }; | 110 }; |
| 111 </script> | 111 </script> |
| 112 </head> | 112 </head> |
| 113 <body> | 113 <body> |
| 114 <div> | 114 <div> |
| 115 This test performs an animation of the left property with four different | 115 This test performs an animation of the left property with four different |
| 116 fill modes. It animates over 0.1 seconds with a 0.1 second delay. It takes | 116 fill modes. It animates over 0.1 seconds with a 0.1 second delay. It takes |
| 117 snapshots at document load and the end of the animation. | 117 snapshots at document load and the end of the animation. |
| 118 </div> | 118 </div> |
| 119 <div id="none" class="box"> | 119 <div id="none" class="box"> |
| (...skipping 11 matching lines...) Expand all Loading... |
| 131 <div id="both_iterating" class="box"> | 131 <div id="both_iterating" class="box"> |
| 132 Both iterating | 132 Both iterating |
| 133 </div> | 133 </div> |
| 134 <div id="both_iterating_reverse" class="box"> | 134 <div id="both_iterating_reverse" class="box"> |
| 135 Both iterating reverse | 135 Both iterating reverse |
| 136 </div> | 136 </div> |
| 137 <div id="result"> | 137 <div id="result"> |
| 138 </div> | 138 </div> |
| 139 </body> | 139 </body> |
| 140 </html> | 140 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2523543004:
CSS Animations: Remove unnecessary webkit prefixes from layout tests (Closed)
