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