9b4bc098b1d41fa1b37d9c972a0741d060b594af
[WebKit-https.git] / LayoutTests / scrollingcoordinator / scrolling-tree / resources / doc-with-sticky.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3 <head>
4     <style>
5         .box {
6             height: 100px;
7             width: 100px;
8             background-color: blue;
9         }
10         
11         .scrolling {
12             position: relative;
13             z-index: 0;
14             height: 300px;
15             width: 400px;
16             overflow: scroll;
17             border: 2px solid black;
18         }
19         
20         .spacer {
21             height: 400px;
22             margin: 10px;
23             background-color: silver;
24         }
25         .sticky {
26             position: sticky;
27             top: 10px;
28             bottom: 10px;
29         }
30         
31         .composited {
32             -webkit-transform: translateZ(0);
33         }
34     </style>
35 </head>
36 <body>
37     <div class="composited scrolling">
38         <div class="spacer"></div>
39         <div class="spacer"></div>
40         <div class="sticky box"></div>
41         <div class="spacer"></div>
42         <div class="spacer"></div>
43     </div>
44     <div class="sticky box"></div>
45
46 </body>
47 </html>