4 <title>Test simple fill mode on transform</title>
12 -webkit-transform: translate3d(100px, 0, 0);
13 -webkit-animation-delay: 0.1s;
14 -webkit-animation-duration: 0.1s;
15 -webkit-animation-timing-function: linear;
16 -webkit-animation-name: anim;
18 @-webkit-keyframes anim {
19 from { -webkit-transform: translate3d(200px, 0, 0); }
20 to { -webkit-transform: translate3d(300px, 0, 0); }
23 background-color: #f99;
24 -webkit-animation-fill-mode: both;
25 -webkit-animation-iteration-count: 2;
26 -webkit-animation-direction: reverse;
29 background-color: #999;
30 -webkit-animation-fill-mode: both;
31 -webkit-animation-iteration-count: 2;
32 -webkit-animation-direction: alternate-reverse;
35 <script src="resources/animation-test-helpers.js"></script>
38 var animsFinished = 0;
40 const expectedValues = [
41 {id: "a", start: 300, end: 200},
42 {id: "b", start: 300, end: 300}
46 if (window.layoutTestController) {
47 layoutTestController.dumpAsText();
48 layoutTestController.waitUntilDone();
51 function animationEnded(event) {
52 if (++animsFinished == numAnims) {
53 setTimeout(endTest, 0); // This call to setTimeout should be ok in the test environment
54 // since we're just giving style a chance to resolve.
60 for (var i = 0; i < expectedValues.length; i++) {
61 var realValue = getPropertyValue("webkitTransform.4", expectedValues[i].id);
62 var expectedValue = expectedValues[i].end;
63 if (comparePropertyValue("webkitTransform.4", realValue, expectedValue, allowance))
67 result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
69 document.getElementById('result').innerHTML = result;
71 if (window.layoutTestController)
72 layoutTestController.notifyDone();
75 window.onload = function () {
76 for (var i = 0; i < expectedValues.length; i++) {
77 var realValue = getPropertyValue("webkitTransform.4", expectedValues[i].id);
78 var expectedValue = expectedValues[i].start;
79 if (comparePropertyValue("webkitTransform.4", realValue, expectedValue, allowance))
83 result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
85 document.addEventListener("webkitAnimationEnd", animationEnded, false);
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
97 <div id="b" class="box">
98 Both Iterate - Alternate Reverse