| OLD | NEW |
|---|
| (Empty) |
| 1 <!doctype html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>Test simple fill mode on transform</title> | |
| 5 <style> | |
| 6 .box { | |
| 7 position: relative; | |
| 8 left: 10px; | |
| 9 top: 10px; | |
| 10 height: 100px; | |
| 11 width: 100px; | |
| 12 transform: translate3d(100px, 0, 0); | |
| 13 animation-delay: 0.1s; | |
| 14 animation-duration: 0.1s; | |
| 15 animation-timing-function: linear; | |
| 16 animation-name: anim; | |
| 17 } | |
| 18 @keyframes anim { | |
| 19 from { transform: translate3d(200px, 0, 0); } | |
| 20 to { transform: translate3d(300px, 0, 0); } | |
| 21 } | |
| 22 #a { | |
| 23 background-color: #f99; | |
| 24 animation-fill-mode: both; | |
| 25 animation-iteration-count: 2; | |
| 26 animation-direction: reverse; | |
| 27 } | |
| 28 #b { | |
| 29 background-color: #999; | |
| 30 animation-fill-mode: both; | |
| 31 animation-iteration-count: 2; | |
| 32 animation-direction: alternate-reverse; | |
| 33 } | |
| 34 </style> | |
| 35 <script src="resources/animation-test-helpers.js"></script> | |
| 36 <script> | |
| 37 const numAnims = 1; | |
| 38 var animsFinished = 0; | |
| 39 const allowance = 5; | |
| 40 const expectedValues = [ | |
| 41 {id: "a", start: 300, end: 200}, | |
| 42 {id: "b", start: 300, end: 300} | |
| 43 ]; | |
| 44 var result = ""; | |
| 45 | |
| 46 if (window.testRunner) { | |
| 47 testRunner.dumpAsText(); | |
| 48 testRunner.waitUntilDone(); | |
| 49 } | |
| 50 | |
| 51 function animationEnded(event) { | |
| 52 if (++animsFinished == numAnims) { | |
| 53 setTimeout(endTest, 0); // This call to setTimeout should be ok in t
he test environment | |
| 54 // since we're just giving style a chance to
resolve. | |
| 55 } | |
| 56 }; | |
| 57 | |
| 58 function endTest() { | |
| 59 | |
| 60 for (var i = 0; i < expectedValues.length; i++) { | |
| 61 var realValue = getPropertyValue("transform", expectedValues[i].id); | |
| 62 var expectedValue = expectedValues[i].end; | |
| 63 if (comparePropertyValue(realValue, expectedValue, allowance, 4)) | |
| 64 result += "PASS"; | |
| 65 else | |
| 66 result += "FAIL"; | |
| 67 result += " - end of animation - id: " + expectedValues[i].id + " ex
pected: " + expectedValue + " actual: " + realValue + "<br>"; | |
| 68 } | |
| 69 document.getElementById('result').innerHTML = result; | |
| 70 | |
| 71 if (window.testRunner) | |
| 72 testRunner.notifyDone(); | |
| 73 } | |
| 74 | |
| 75 window.onload = function () { | |
| 76 for (var i = 0; i < expectedValues.length; i++) { | |
| 77 var realValue = getPropertyValue("transform", expectedValues[i].id); | |
| 78 var expectedValue = expectedValues[i].start; | |
| 79 if (comparePropertyValue(realValue, expectedValue, allowance, 4)) | |
| 80 result += "PASS"; | |
| 81 else | |
| 82 result += "FAIL"; | |
| 83 result += " - start of animation - id: " + expectedValues[i].id + " ex
pected: " + expectedValue + " actual: " + realValue + "<br>"; | |
| 84 } | |
| 85 document.addEventListener("animationend", animationEnded, false); | |
| 86 }; | |
| 87 | |
| 88 </script> | |
| 89 </head> | |
| 90 <body> | |
| 91 This test performs an animation of the transform property with different | |
| 92 fill modes. It animates over 0.1 second with a 0.1 second delay. | |
| 93 It takes snapshots at document load and the end of the animations. | |
| 94 <div id="a" class="box"> | |
| 95 Both Iterate - Reverse | |
| 96 </div> | |
| 97 <div id="b" class="box"> | |
| 98 Both Iterate - Alternate Reverse | |
| 99 </div> | |
| 100 <div id="result"> | |
| 101 </div> | |
| 102 </body> | |
| 103 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2975723002:
Move direction and fill tests to subdirectory (Closed)
