[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / compositing / transitions / scale-transition-no-start.html
1 <!DOCTYPE><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5   <title>Scale without initial value.</title>
6   <style type="text/css" media="screen">
7     .box {
8       height: 200px;
9       width: 200px;
10       border: 1px solid #EEE;
11     }
12     
13     .indicator {
14       position: absolute;
15       height: 150px;
16       width: 150px;
17       margin: 25px;
18       -webkit-box-sizing: border-box;
19       border: 1px solid black;
20     }
21     
22     .inner {
23       height: 100px;
24       width: 100px;
25       margin: 50px;
26       background-color: green;
27       opacity: 0.7;
28       -webkit-transition: -webkit-transform 1s linear;
29     }
30
31     .box.final #inner1 {
32       -webkit-transform: scale(2);
33     }
34
35     .box.final #inner2 {
36       -webkit-transform: scaleX(2);
37     }
38   </style>
39   
40   <script src="../../transitions/resources/transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
41   <script type="text/javascript" charset="utf-8">
42
43     const expectedValues = [
44       // [time, element-id, property, expected-value, tolerance]
45       [0.5, 'inner1', '-webkit-transform.0', 1.5, 0.1],
46       [0.5, 'inner2', '-webkit-transform.0', 1.5, 0.1],
47     ];
48
49     function setupTest()
50     {
51       var boxes = document.querySelectorAll('.box');
52       boxes[0].className = 'box final';
53       boxes[1].className = 'box final';
54     }
55     runTransitionTest(expectedValues, setupTest, true, true /* pixel test */);
56   </script>
57 </head>
58 <body>
59   <p>In the pixel result, the green boxes should be coincident with the black outline.</p>
60   <div class="box" id="box1">
61     <div class="indicator"></div>
62     <div class="inner" id="inner1"></div>
63   </div>
64
65   <div class="box" id="box2">
66     <div class="indicator"></div>
67     <div class="inner" id="inner2"></div>
68   </div>
69
70   <div id="result"></div>
71 </body>
72 </html>