| OLD | NEW |
|---|
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
| 3 | 3 |
| 4 <html lang="en"> | 4 <html lang="en"> |
| 5 <head> | 5 <head> |
| 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| 7 <title>Test simple animation with fill modes</title> | 7 <title>Test simple animation with fill modes</title> |
| 8 <style type="text/css" media="screen"> | 8 <style type="text/css" media="screen"> |
| 9 .box { | 9 .box { |
| 10 position: relative; | 10 position: relative; |
| 11 left: 100px; | 11 left: 100px; |
| 12 top: 10px; | 12 top: 10px; |
| 13 height: 30px; | 13 height: 30px; |
| 14 width: 200px; | 14 width: 200px; |
| 15 -webkit-animation-delay: 0.1s; | 15 animation-delay: 0.1s; |
| 16 -webkit-animation-duration: 0.1s; | 16 animation-duration: 0.1s; |
| 17 -webkit-animation-timing-function: linear; | 17 animation-timing-function: linear; |
| 18 } | 18 } |
| 19 | 19 |
| 20 .two-keyframes { | 20 .two-keyframes { |
| 21 -webkit-animation-name: anim1; | 21 animation-name: anim1; |
| 22 } | 22 } |
| 23 | 23 |
| 24 .three-keyframes { | 24 .three-keyframes { |
| 25 -webkit-animation-name: anim2; | 25 animation-name: anim2; |
| 26 } | 26 } |
| 27 | 27 |
| 28 @-webkit-keyframes anim1 { | 28 @keyframes anim1 { |
| 29 from { left: 200px; } | 29 from { left: 200px; } |
| 30 to { left: 300px; } | 30 to { left: 300px; } |
| 31 } | 31 } |
| 32 @-webkit-keyframes anim2 { | 32 @keyframes anim2 { |
| 33 from { left: 200px; } | 33 from { left: 200px; } |
| 34 50% { left: 250px; } | 34 50% { left: 250px; } |
| 35 to { left: 300px; } | 35 to { left: 300px; } |
| 36 } | 36 } |
| 37 | 37 |
| 38 #a, #f { | 38 #a, #f { |
| 39 background-color: blue; | 39 background-color: blue; |
| 40 -webkit-animation-fill-mode: none; | 40 animation-fill-mode: none; |
| 41 } | 41 } |
| 42 #b, #g { | 42 #b, #g { |
| 43 background-color: red; | 43 background-color: red; |
| 44 -webkit-animation-fill-mode: backwards; | 44 animation-fill-mode: backwards; |
| 45 } | 45 } |
| 46 #c, #h { | 46 #c, #h { |
| 47 background-color: green; | 47 background-color: green; |
| 48 -webkit-animation-fill-mode: forwards; | 48 animation-fill-mode: forwards; |
| 49 } | 49 } |
| 50 #d, #i { | 50 #d, #i { |
| 51 background-color: yellow; | 51 background-color: yellow; |
| 52 -webkit-animation-fill-mode: both; | 52 animation-fill-mode: both; |
| 53 } | 53 } |
| 54 #e, #j { | 54 #e, #j { |
| 55 background-color: #999; | 55 background-color: #999; |
| 56 -webkit-animation-fill-mode: both; | 56 animation-fill-mode: both; |
| 57 -webkit-animation-iteration-count: 2; | 57 animation-iteration-count: 2; |
| 58 -webkit-animation-direction: alternate; | 58 animation-direction: alternate; |
| 59 } | 59 } |
| 60 </style> | 60 </style> |
| 61 <script type="text/javascript" charset="utf-8"> | 61 <script type="text/javascript" charset="utf-8"> |
| 62 const numAnims = 10; | 62 const numAnims = 10; |
| 63 var animsFinished = 0; | 63 var animsFinished = 0; |
| 64 const allowance = 5; | 64 const allowance = 5; |
| 65 const expectedValues = [ | 65 const expectedValues = [ |
| 66 {id: "a", start: 100, end: 100}, | 66 {id: "a", start: 100, end: 100}, |
| 67 {id: "b", start: 200, end: 100}, | 67 {id: "b", start: 200, end: 100}, |
| 68 {id: "c", start: 100, end: 300}, | 68 {id: "c", start: 100, end: 300}, |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 112 var el = document.getElementById(expectedValues[i].id); | 112 var el = document.getElementById(expectedValues[i].id); |
| 113 var expectedValue = expectedValues[i].start; | 113 var expectedValue = expectedValues[i].start; |
| 114 var realValue = parseFloat(window.getComputedStyle(el).left); | 114 var realValue = parseFloat(window.getComputedStyle(el).left); |
| 115 if (Math.abs(expectedValue - realValue) < allowance) { | 115 if (Math.abs(expectedValue - realValue) < allowance) { |
| 116 result += "PASS"; | 116 result += "PASS"; |
| 117 } else { | 117 } else { |
| 118 result += "FAIL"; | 118 result += "FAIL"; |
| 119 } | 119 } |
| 120 result += " - start of animation - id: " + expectedValues[i].id + "
expected: " + expectedValue + " actual: " + realValue + "<br>"; | 120 result += " - start of animation - id: " + expectedValues[i].id + "
expected: " + expectedValue + " actual: " + realValue + "<br>"; |
| 121 } | 121 } |
| 122 document.addEventListener("webkitAnimationEnd", animationEnded, false); | 122 document.addEventListener("animationend", animationEnded, false); |
| 123 }; | 123 }; |
| 124 | 124 |
| 125 </script> | 125 </script> |
| 126 </head> | 126 </head> |
| 127 <body> | 127 <body> |
| 128 This test performs an animation of the left property with four different | 128 This test performs an animation of the left property with four different |
| 129 fill modes on two sets of objects. The first set has animations with | 129 fill modes on two sets of objects. The first set has animations with |
| 130 only from and to keyframes. The second set has animations with from, to and | 130 only from and to keyframes. The second set has animations with from, to and |
| 131 a third keyframe at 50%. It animates over 0.1 second with a 0.1 second delay. | 131 a third keyframe at 50%. It animates over 0.1 second with a 0.1 second delay. |
| 132 It takes snapshots at document load and the end of the animation. | 132 It takes snapshots at document load and the end of the animation. |
| (...skipping 27 matching lines...) Expand all Loading... |
| 160 Both - 3 keyframes | 160 Both - 3 keyframes |
| 161 </div> | 161 </div> |
| 162 <div id="j" class="box three-keyframes"> | 162 <div id="j" class="box three-keyframes"> |
| 163 Both iterating - 3 keyframes | 163 Both iterating - 3 keyframes |
| 164 </div> | 164 </div> |
| 165 | 165 |
| 166 <div id="result"> | 166 <div id="result"> |
| 167 </div> | 167 </div> |
| 168 </body> | 168 </body> |
| 169 </html> | 169 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2523543004:
CSS Animations: Remove unnecessary webkit prefixes from layout tests (Closed)
