4 <style type=
"text/css" media=
"screen">
14 background-color: green;
22 background-color: red;
33 -webkit-animation: move-left
2s linear;
37 transform: translateX(
200px);
38 -webkit-animation: move-transform
2s linear;
41 @-webkit-keyframes move-left {
58 @-webkit-keyframes move-transform {
60 transform: translateX(
0);
64 transform: translateX(
0);
75 <script src=
"resources/animation-test-helpers.js" type=
"text/javascript"></script>
76 <script type=
"text/javascript">
78 const expectedValues
= [
79 // [time, element-id, property, expected-value, tolerance]
80 [1.5, "box1", "left", 100, 15],
81 [1.5, "box2", "webkitTransform.4", 100, 15],
84 var doPixelTest
= true;
85 var disablePauseAPI
= false;
86 runAnimationTest(expectedValues
, null, undefined, disablePauseAPI
, doPixelTest
);
90 <!-- In the pixel result, you should see two vertically adjacent green squares. There should be no red.
91 Test is only reliable when run in DRT. -->
92 <div class=
"indicator" id=
"indicator1"></div>
93 <div class=
"indicator" id=
"indicator2"></div>
95 <div class=
"box" id=
"box1"></div>
96 <div class=
"box" id=
"box2"></div>
98 <div id=
"result"></div>