[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / transitions / mismatched-shadow-styles.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5   <style>
6     .box {
7       display: inline-block;
8       height: 100px;
9       width: 100px;
10       margin: 20px;
11       border: 3px solid blue;
12       -webkit-transition-duration: 0.5s;
13       -webkit-transition-timing-function: linear;
14       -webkit-transition-property: box-shadow;
15     }
16     
17     .final #none-to-normal {
18       box-shadow: 20px 20px 10px black;
19     }
20
21     .final #none-to-inset {
22       box-shadow: 20px 20px 10px black inset;
23     }
24
25     #inset-to-normal {
26       box-shadow: 20px 20px 10px black inset;
27     }
28
29     .final #inset-to-normal {
30       box-shadow: 20px 20px 10px black;
31     }
32
33     #normal-to-inset {
34       box-shadow: 20px 20px 10px black;
35     }
36
37     .final #normal-to-inset {
38       box-shadow: 20px 20px 10px black inset;
39     }
40
41   </style>
42   <script src="resources/transition-test-helpers.js"></script>
43   <script type="text/javascript">
44
45     const expectedValues = [
46       // [time, element-id, property, expected-value, tolerance]
47       // For box-shadow, we test shadow-x and shadow-y to see if it's animating.
48       [0.25, 'none-to-normal', 'box-shadow', [10, 10], 1],
49       [0.25, 'none-to-inset', 'box-shadow', [10, 10], 1],
50       [0.25, 'inset-to-normal', 'box-shadow', [20, 20], 1],
51       [0.25, 'normal-to-inset', 'box-shadow', [20, 20], 1],
52     ];
53   
54     function setupTest()
55     {
56       document.body.className = 'final';
57     }
58   
59     runTransitionTest(expectedValues, setupTest, usePauseAPI);
60   </script>
61 </head>
62 <body>
63
64   <div id="none-to-normal" class="box"></div>
65   <div id="none-to-inset" class="box"></div>
66   <div id="inset-to-normal" class="box"></div>
67   <div id="normal-to-inset" class="box"></div>
68
69   <div id="result">
70   </div>
71
72 </body>
73 </html>