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