blob: 198da374d0d59600a88e22fd1603c7da599d3eb2 [file] [log] [blame]
timothy_horton@apple.comc24eb7a2015-09-21 18:00:20 +00001<!-- webkit-test-runner [ useThreadedScrolling=false ] -->
simon.fraser@apple.comcdd758c2013-04-23 22:01:05 +00002<!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 {
drousso@apple.comc817e642019-04-16 19:48:37 +000028 position: sticky;
simon.fraser@apple.comcdd758c2013-04-23 22:01:05 +000029 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>