| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | |
| 3 | |
| 4 <html lang="en"> | |
| 5 <head> | |
| 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| 7 <title>Test simple animation with fill modes</title> | |
| 8 <style type="text/css" media="screen"> | |
| 9 .box { | |
| 10 position: relative; | |
| 11 left: 100px; | |
| 12 top: 10px; | |
| 13 height: 30px; | |
| 14 width: 200px; | |
| 15 animation-delay: 0.1s; | |
| 16 animation-duration: 0.1s; | |
| 17 animation-timing-function: linear; | |
| 18 } | |
| 19 | |
| 20 .running .two-keyframes { | |
| 21 animation-name: anim1; | |
| 22 } | |
| 23 | |
| 24 .running .three-keyframes { | |
| 25 animation-name: anim2; | |
| 26 } | |
| 27 | |
| 28 @keyframes anim1 { | |
| 29 from { left: 200px; } | |
| 30 to { left: 300px; } | |
| 31 } | |
| 32 @keyframes anim2 { | |
| 33 from { left: 200px; } | |
| 34 50% { left: 250px; } | |
| 35 to { left: 300px; } | |
| 36 } | |
| 37 | |
| 38 #a, #f { | |
| 39 background-color: blue; | |
| 40 animation-fill-mode: none; | |
| 41 } | |
| 42 #b, #g { | |
| 43 background-color: red; | |
| 44 animation-fill-mode: backwards; | |
| 45 } | |
| 46 #c, #h { | |
| 47 background-color: green; | |
| 48 animation-fill-mode: forwards; | |
| 49 } | |
| 50 #d, #i { | |
| 51 background-color: yellow; | |
| 52 animation-fill-mode: both; | |
| 53 } | |
| 54 #e, #j { | |
| 55 background-color: #999; | |
| 56 animation-fill-mode: both; | |
| 57 animation-iteration-count: 2; | |
| 58 animation-direction: alternate; | |
| 59 } | |
| 60 </style> | |
| 61 <script type="text/javascript" charset="utf-8"> | |
| 62 const numAnims = 10; | |
| 63 var animsFinished = 0; | |
| 64 const allowance = 5; | |
| 65 const expectedValues = [ | |
| 66 {id: "a", start: 100, end: 100}, | |
| 67 {id: "b", start: 200, end: 100}, | |
| 68 {id: "c", start: 100, end: 300}, | |
| 69 {id: "d", start: 200, end: 300}, | |
| 70 {id: "e", start: 200, end: 200}, | |
| 71 {id: "f", start: 100, end: 100}, | |
| 72 {id: "g", start: 200, end: 100}, | |
| 73 {id: "h", start: 100, end: 300}, | |
| 74 {id: "i", start: 200, end: 300}, | |
| 75 {id: "j", start: 200, end: 200} | |
| 76 ]; | |
| 77 var result = ""; | |
| 78 | |
| 79 if (window.testRunner) { | |
| 80 testRunner.dumpAsText(); | |
| 81 testRunner.waitUntilDone(); | |
| 82 } | |
| 83 | |
| 84 function animationEnded(event) { | |
| 85 if (++animsFinished == numAnims) { | |
| 86 requestAnimationFrame(endTest); | |
| 87 } | |
| 88 }; | |
| 89 | |
| 90 function endTest() { | |
| 91 | |
| 92 for (var i=0; i < expectedValues.length; i++) { | |
| 93 var el = document.getElementById(expectedValues[i].id); | |
| 94 var expectedValue = expectedValues[i].end; | |
| 95 var realValue = parseFloat(window.getComputedStyle(el).left); | |
| 96 if (Math.abs(expectedValue - realValue) < allowance) { | |
| 97 result += "PASS"; | |
| 98 } else { | |
| 99 result += "FAIL"; | |
| 100 } | |
| 101 result += " - end of animation - id: " + expectedValues[i].id + " ex
pected: " + expectedValue + " actual: " + realValue + "<br>"; | |
| 102 } | |
| 103 document.getElementById('result').innerHTML = result; | |
| 104 | |
| 105 if (window.testRunner) | |
| 106 testRunner.notifyDone(); | |
| 107 } | |
| 108 | |
| 109 window.onload = function () { | |
| 110 document.addEventListener("animationend", animationEnded, false); | |
| 111 document.body.classList.add("running"); | |
| 112 for (var i=0; i < expectedValues.length; i++) { | |
| 113 var el = document.getElementById(expectedValues[i].id); | |
| 114 var expectedValue = expectedValues[i].start; | |
| 115 var realValue = parseFloat(window.getComputedStyle(el).left); | |
| 116 if (Math.abs(expectedValue - realValue) < allowance) { | |
| 117 result += "PASS"; | |
| 118 } else { | |
| 119 result += "FAIL"; | |
| 120 } | |
| 121 result += " - start of animation - id: " + expectedValues[i].id + "
expected: " + expectedValue + " actual: " + realValue + "<br>"; | |
| 122 } | |
| 123 }; | |
| 124 | |
| 125 </script> | |
| 126 </head> | |
| 127 <body> | |
| 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 | |
| 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. | |
| 132 It takes snapshots at document load and the end of the animation. | |
| 133 | |
| 134 <div id="a" class="box two-keyframes"> | |
| 135 None - 2 keyframes | |
| 136 </div> | |
| 137 <div id="b" class="box two-keyframes"> | |
| 138 Backwards - 2 keyframes | |
| 139 </div> | |
| 140 <div id="c" class="box two-keyframes"> | |
| 141 Forwards - 2 keyframes | |
| 142 </div> | |
| 143 <div id="d" class="box two-keyframes"> | |
| 144 Both - 2 keyframes | |
| 145 </div> | |
| 146 <div id="e" class="box two-keyframes"> | |
| 147 Both iterating - 2 keyframes | |
| 148 </div> | |
| 149 | |
| 150 <div id="f" class="box three-keyframes"> | |
| 151 None - 3 keyframes | |
| 152 </div> | |
| 153 <div id="g" class="box three-keyframes"> | |
| 154 Backwards - 3 keyframes | |
| 155 </div> | |
| 156 <div id="h" class="box three-keyframes"> | |
| 157 Forwards - 3 keyframes | |
| 158 </div> | |
| 159 <div id="i" class="box three-keyframes"> | |
| 160 Both - 3 keyframes | |
| 161 </div> | |
| 162 <div id="j" class="box three-keyframes"> | |
| 163 Both iterating - 3 keyframes | |
| 164 </div> | |
| 165 | |
| 166 <div id="result"> | |
| 167 </div> | |
| 168 </body> | |
| 169 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2975723002:
Move direction and fill tests to subdirectory (Closed)
