Have fixedPositionCreatesStackingContext be on by default everywhere
[WebKit-https.git] / LayoutTests / compositing / layer-creation / overlap-animation-container.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     .container {
7       width: 120px;
8       position: relative;
9       left: 50px;
10       z-index: 0; /* create stacking context */
11       border: 1px solid black;
12       background-color: white;
13     }
14     
15     .box {
16       position: relative;
17       width: 100px;
18       height: 100px;
19       margin: 10px;
20       background-color: blue;
21     }
22
23     .force-layer {
24       -webkit-transform: translateZ(-1px);
25     }
26
27     .rotate-45deg {
28       -webkit-transform: rotate(45deg);
29     }
30
31     .yellow {
32       background-color: yellow;
33     }
34
35     .gray {
36       background-color: gray;
37     }
38
39     .green {
40       background-color: green;
41       outline: 1px solid black;
42     }
43     
44     .animating1 {
45       -webkit-animation: translate1 2s linear infinite alternate;
46     }
47    
48     @-webkit-keyframes translate1 {
49       from { -webkit-transform: translate(0px, -110px); }
50       to   { -webkit-transform: translate(0px, 700px); }
51     }
52   </style>
53   <script>
54     if (window.testRunner) {
55       testRunner.dumpAsText();
56       testRunner.waitUntilDone();
57     }
58
59     function queueBoxForAnimation(elementId, animationClass, callback) {
60       var box = document.getElementById(elementId);
61       box.addEventListener('webkitAnimationStart', callback, false);
62       box.classList.add(animationClass);
63     }
64       
65     function runTest()
66     {
67       queueBoxForAnimation("to-animate1", "animating1", animationStarted);
68     }
69     
70     function animationStarted()
71     {
72       var layerTrees = "";
73
74       if (window.testRunner) {
75         var layersElement = document.getElementById('layers');
76         // Make sure we don't include the #layers element in the tree. The text size
77         // might differ between platforms.
78         layersElement.style.display = "none";
79         layerTrees = "Before:\n" + window.internals.layerTreeAsText(document);
80       }
81
82       // Rotate the first green box, so that it overlaps the first gray box in the container.
83       // That should force the creation of composited layers for all the other green boxes.
84       document.getElementById("first-green-box").classList.add("rotate-45deg");
85
86       if (window.testRunner) {
87         layerTrees += "\nAfter:\n" + window.internals.layerTreeAsText(document);
88         layersElement.style.display = "block";
89         layersElement.innerText = layerTrees;
90         testRunner.notifyDone();
91       }
92     }
93     window.addEventListener('load', runTest, false);
94   </script>
95 </head>
96 <body>
97   <!-- Testing that compositor doesn't create unnecessary composited layers when they could be drawn in parents backing texture. 
98        The green boxes should not have composited layers.
99   -->
100   <!-- This div will not get a layer -->
101   <div class="box gray"></div>
102   <div id="to-animate1" class="box"></div>
103   <div class="container">
104     <!-- Force a composited box inside the container. The fact that there's an animation going behind the parent container, 
105     should not force the remaining children of this element create their own composited layers. -->
106     <div class="box gray force-layer"></div>
107     <!-- This following have no reason to get a layer, as the parent will get one. -->
108     <div id="first-green-box" class="box green"></div>
109     <div class="box green rotate-45deg"></div>
110     <div class="box green"></div>
111   </div>
112   <!-- This div will also get a layer -->
113   <div class="box yellow"></div>
114   <pre id="layers">Layer tree goes here in DRT</pre>
115 </body>
116 </html>