[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / transitions / multiple-background-size-transitions.html
1 <!DOCTYPE><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5   <style>
6     .box {
7       height: 100px;
8       width: 100px;
9       margin: 10px;
10       border: 1px solid black;
11       background-repeat: no-repeat;
12       -webkit-mask-repeat: no-repeat;
13       -webkit-transition-duration: 1s;
14       -webkit-transition-timing-function: linear;
15       -webkit-transition-property: -webkit-background-size, -webkit-mask-size;
16     }
17     
18     #box {
19       background-image: url('../fast/backgrounds/repeat/resources/gradient.gif'), url('../fast/backgrounds/repeat/resources/gradient.gif');
20       background-position: 0 0, 50px 50px;
21       -webkit-background-size: 0% 0%, 50% 50%;
22     }
23     
24     #box.final {
25       -webkit-background-size: 50% 50%, 0% 0%;
26     }
27     
28     #box1 {
29       background-color: gray;
30       -webkit-mask-image: url('../fast/backgrounds/repeat/resources/gradient.gif'), url('../fast/backgrounds/repeat/resources/gradient.gif');
31       -webkit-mask-position: 0 0, 50px 50px;
32       -webkit-mask-size: 0% 0%, 50% 50%;
33     }
34
35     #box1.final {
36       -webkit-mask-size: 50% 50%, 0% 0%;
37     }
38
39   </style>
40   <script src="resources/transition-test-helpers.js"></script>
41   <script type="text/javascript">
42
43     const expectedValues = [
44       // [time, element-id, property, expected-value, tolerance]
45       [0.5, 'box', '-webkit-background-size', [25, 25], 4],
46       [0.5, 'box1', '-webkit-mask-size', [25, 25], 4],
47     ];
48   
49     function setupTest()
50     {
51       document.getElementById('box').className = 'box final';
52       document.getElementById('box1').className = 'box final';
53     }
54   
55     runTransitionTest(expectedValues, setupTest, usePauseAPI);
56   </script>
57 </head>
58 <body>
59
60   <div id="box" class="box"></div>
61   <div id="box1" class="box"></div>
62
63   <div id="result">
64   </div>
65
66 </body>
67 </html>