9220e3fafa9c1a81d251979dc46bfa6aabbd35cd
[WebKit-https.git] / LayoutTests / compositing / animation / computed-style-during-delay.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2
3 <html>
4 <head>
5     <style type="text/css" media="screen">
6         .box {
7             height: 100px;
8             width: 100px;
9             margin: 20px;
10             background-color: blue;
11             -webkit-transform: translate3d(0, 0, 0);
12         }
13
14         #movers.moved > .box {
15             -webkit-animation: move 1s 1s linear; /* Note 1 sec delay */
16         }
17
18         /* Test that we fetch the current style, not the one snapshotted when the animation started */
19         #movers.moved > #changedbox {
20             -webkit-transform: translate3d(50px, 0, 0);
21         }
22
23         /* Test that fill-mode: backwards works */
24         #movers.moved > #filledbox {
25             -webkit-animation: move 1s 1s linear backwards;
26         }
27         
28         @-webkit-keyframes move {
29             from { -webkit-transform: translateX(100px);   }
30             to   { -webkit-transform: translateX(400px); }
31         }
32     </style>
33     <script src="../../transitions/resources/transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
34     <script type="text/javascript" charset="utf-8">
35
36         const expectedValues = [
37           // [time, element-id, property, expected-value, tolerance]
38           [0.1, 'testbox', '-webkit-transform.4', 0, 0],
39           [0.1, 'changedbox', '-webkit-transform.4', 50, 0],
40           [0.1, 'filledbox', '-webkit-transform.4', 100, 0],
41         ];
42
43         function setupTest()
44         {
45           document.getElementById('movers').className = 'moved';
46         }
47
48         runTransitionTest(expectedValues, setupTest, false /* use pause API */);
49     </script>
50 </head>
51 <body>
52     <p>Test computed style during the delay phase of an accelerated animation.</p>
53     <div id="movers">
54         <div id="testbox" class="box"></div>
55         <div id="changedbox" class="box"></div>
56         <div id="filledbox" class="box"></div>
57     </div>
58     <div id="result">
59     </div>
60 </body>
61 </html>