[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / compositing / transitions / singular-scale-transition.html
1 <!DOCTYPE>
2
3 <html>
4 <head>
5   <title>Singular scale</title>
6   <style type="text/css" media="screen">
7     #box {
8       height: 200px;
9       width: 200px;
10       border: 1px solid black;
11     }
12     
13     #inner {
14       height: 200px;
15       width: 200px;
16       background-color: gray;
17       -webkit-transform: scale(0);
18       -webkit-transition: -webkit-transform 1s linear;
19     }
20
21     #box.final #inner {
22       -webkit-transform: scale(1);
23     }
24     
25     #box:hover #inner {
26       -webkit-transform: scale(1);
27     }
28   </style>
29   
30   <script src="../../transitions/resources/transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
31   <script type="text/javascript" charset="utf-8">
32
33     const expectedValues = [
34       // [time, element-id, property, expected-value, tolerance]
35       [0.5, 'inner', '-webkit-transform.0', 0.5, 0.1],
36     ];
37
38     function setupTest()
39     {
40       var box = document.getElementById('box');
41       box.className = 'final';
42     }
43     runTransitionTest(expectedValues, setupTest, true, true /* pixel test */);
44   </script>
45 </head>
46 <body>
47   <p>Check the pixel result to make sure that the gray square is half way through the scale animation.</p>
48   <div id="box">
49     <div id="inner">
50     </div>
51   </div>
52
53   <div id="result"></div>
54 </body>
55 </html>