Have fixedPositionCreatesStackingContext be on by default everywhere
[WebKit-https.git] / LayoutTests / compositing / layer-creation / fixed-overlap-extent-rtl.html
1 <!DOCTYPE html>
2
3 <html dir="rtl">
4 <head>
5     <style>
6         body {
7             width: 1100px;
8             height: 1000px;
9         }
10         .fixed {
11             position: fixed;
12             top: 120px;
13             left: 60px;
14             width: 200px;
15             height: 150px;
16             background-color: rgba(0, 0, 0, 0.5);
17             padding: 20px;
18             box-sizing: border-box;
19             color: white;
20             box-shadow: 0 0 10px black;
21         }
22         
23         #container {
24             position: relative;
25         }
26         
27         .dot {
28             position: absolute;
29             width: 10px;
30             height: 10px;
31             background-color: orange;
32         }
33     </style>
34     <script>
35         if (window.testRunner)
36             testRunner.dumpAsText();
37
38         if (window.internals)
39             internals.settings.setAcceleratedCompositingForFixedPositionEnabled(true);
40
41         function doTest()
42         {
43             setupDots();
44             dumpLayers();
45         }
46
47         function setupDots()
48         {
49             var across = 40;
50             var down = 50;
51             var spacing = 20;
52             var container = document.getElementById('container');
53             
54             for (var col = 0; col < across; ++col) {
55                 for (var row = 0; row < down; ++row) {
56                     var div = document.createElement('div');
57                     div.className = 'dot';
58                     div.style.left = (col * spacing) + 'px';
59                     div.style.top = (row * spacing) + 'px';
60                     
61                     container.appendChild(div);
62                 }
63             }
64         }
65
66         function dumpLayers()
67         {
68             if (window.testRunner) {
69                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
70             }
71         }
72         
73         window.addEventListener('load', doTest, false);
74     </script>
75 </head>
76 <body>
77     <div class="fixed">
78         Fixed layer.
79     </div>
80     <div id="container"></div>
81 <pre id="layers"></pre>
82 </body>
83 </html>