Kill suspendAnimation(), resumeAnimation() and numberOfActiveAnimations() from DRT...
[WebKit-https.git] / LayoutTests / transitions / multiple-shadow-transitions.html
1 <!DOCTYPE>
2
3 <html>
4 <head>
5   <style>
6     .box {
7       height: 100px;
8       width: 100px;
9       margin: 50px;
10       border: 1px solid black;
11       text-align: center;
12       padding: 20px;
13       background-repeat: no-repeat;
14       -webkit-transition-duration: 1s;
15       -webkit-transition-timing-function: linear;
16       -webkit-transition-property: -webkit-box-shadow, text-shadow;
17     }
18     
19     #box {
20       -webkit-box-shadow: 0 -20px 10px red, 0 20px 10px blue;
21       text-shadow: 0 -20px 10px red, 0 20px 10px blue;
22     }
23     
24     #box.final {
25       -webkit-box-shadow: 0 20px 10px red, 0 -20px 10px blue;
26       text-shadow: 0 20px 10px red, 0 -20px 10px blue;
27     }
28
29     /* Mismatched layers */
30     #box2 {
31       -webkit-box-shadow: 0 -20px 10px red, 0 20px 10px blue;
32       text-shadow: 0 -20px 10px red, 0 20px 10px blue;
33     }
34     
35     #box2.final {
36       -webkit-box-shadow: 0 -20px 10px red;
37       text-shadow: 0 -20px 10px red;
38     }
39
40     #box3 {
41       -webkit-box-shadow: 0 20px 10px blue;
42       text-shadow: 0 20px 10px blue;
43     }
44     
45     #box3.final {
46       -webkit-box-shadow: 0 -20px 10px red, 0 20px 10px blue;
47       text-shadow: 0 -20px 10px red, 0 20px 10px blue;
48     }
49
50   </style>
51   <script src="resources/transition-test-helpers.js"></script>
52   <script type="text/javascript">
53
54     const expectedValues = [
55       // [time, element-id, property, expected-value, tolerance]
56       [0.5, 'box', '-webkit-box-shadow', [0, 0, 0, 0], 4],
57       [0.5, 'box2', '-webkit-box-shadow', [0, -20, 0, 10], 4],
58       [0.5, 'box3', '-webkit-box-shadow', [0, 0, 0, 10], 4],
59     ];
60   
61     function setupTest()
62     {
63       document.getElementById('box').className = 'box final';
64       document.getElementById('box2').className = 'box final';
65       document.getElementById('box3').className = 'box final';
66     }
67   
68     runTransitionTest(expectedValues, setupTest, usePauseAPI);
69   </script>
70 </head>
71 <body>
72
73   <div id="box" class="box">BOX</div>
74   <div id="box2" class="box">BOX</div>
75   <div id="box3" class="box">BOX</div>
76
77   <div id="result">
78   </div>
79
80 </body>
81 </html>