66e6069fc97749a7162b96d53d35abf4d7de40b9
[WebKit-https.git] / LayoutTests / platform / mac-wk2 / tiled-drawing / scrolling / sticky / sticky-layers.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     body {
7       width: 2000px;
8     }
9     
10     .container {
11       position: relative;
12       height: 450px;
13       width: 800px;
14       margin: 20px auto;
15       background-color: #eee;
16       border: 1px solid black;
17     }
18     
19     .left {
20       float: left;
21       width: 200px;
22       height: 100%;
23       background-color: #ddd;
24     }
25     
26     .sticky {
27       position: -webkit-sticky;
28       display: inline-block;
29       background: silver;
30       margin: 4px;
31       height: 60px;
32       width: 300px;
33     }
34     
35     .box {
36       display: none;
37       width: 100px;
38       height: 100px;
39       background-color: blue;
40     }
41   </style>
42   <script>
43     if (window.testRunner) {
44       testRunner.waitUntilDone();
45       testRunner.dumpAsText();
46     }
47
48     function doScroll()
49     {
50       window.setTimeout(function() {
51         window.scrollTo(800, 0);
52         if (window.testRunner) {
53           document.getElementById('results').innerText = window.internals.layerTreeAsText(document);
54           testRunner.notifyDone();
55         }
56       }, 10);
57     }
58     
59     window.addEventListener('load', doScroll, false);
60   </script>
61 </head>
62 <body>
63   <div class="container">
64     <div class="left"></div>
65     <div class="horizontal sticky" style="left: 20px">Left sticky <div class="composited box"></div></div>
66     <div class="horizontal sticky" style="right: 20px">Right sticky <div class="composited box"></div></div>
67     <div class="horizontal sticky" style="left: 20%">Left % sticky <div class="composited box"></div></div>
68     <div class="horizontal sticky" style="right: 20%">Right % sticky <div class="composited box"></div></div>
69
70     <div class="horizontal sticky" style="left: 20px; right: 20px">Left and Right <div class="composited box"></div></div>
71     <div class="horizontal sticky" style="left: 20%; right: 20%">Left and Right %<div class="composited box"></div></div>
72   </div>
73 <pre id="results"></pre>
74 </body>
75 </html>