[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / stacking-context-unchanged-while-running.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <title>Tests that an element with an animation whose keyframes affect stacking context creates stacking context throughout the animation.</title>
6     <style>
7         .box {
8             position: absolute;
9             top: 0;
10             left: 0;
11             height: 100px;
12             width: 100px;
13         }
14
15         #animating {
16             animation: move 2s 1;
17             background-color: orange;
18         }
19
20         @keyframes move {
21             from { z-index: 1; }
22             10%  { z-index: auto; }
23             90%  { z-index: auto; }
24             to   { z-index: 2; }
25         }
26
27         .behind {
28             background-color: blue;
29             top: 25px;
30             left: 50px;
31             z-index: 1;
32         }
33
34         .front {
35             top: 50px;
36             left: 25px;
37             background-color: green;
38             z-index: 2;
39         }
40         
41         #result {
42             opacity: 0;
43         }
44     </style>
45     <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
46     <script type="text/javascript">
47         const expectedValues = [
48             // [animation-name, time, element-id, property, expected-value, tolerance]
49             ["move", 0.5, "animating", "z-index", 0, 0],
50         ];
51
52         var doPixelTest = true;
53         var disablePauseAPI = false;
54         runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
55     </script>
56 </head>
57 <body>
58
59 <div class="behind box"></div>
60 <div id="animating" class="box">
61     <div class="front box"></div>
62 </div>
63 <div id="result"></div>
64 </body>
65 </html>