sticky-pos-scrollable-1.html (1008B)
1 <!DOCTYPE HTML> 2 <html reftest-async-scroll> 3 <body> 4 <div style="width:400px; height:300px; overflow:scroll; scrollbar-width:none; border:2px solid black" 5 reftest-displayport-x="0" reftest-displayport-y="0" 6 reftest-displayport-w="800" reftest-displayport-h="2000" 7 reftest-async-scroll-x="0" reftest-async-scroll-y="100"> 8 <!-- In this test the position:sticky element gets its own layer, and also has scrollable metrics 9 because it shares the same animated geometry root as the other elements. This tests that 10 layers with both sticky info and scroll info are transformed correctly in the face of an async 11 scroll transform. --> 12 <div style="height:100px; width:200px; float:left; background:purple"></div> 13 <div style="left:200px; top:0; height:300px; width:200px; float:left; background:yellow; position:sticky; z-index:1;"></div> 14 <div style="height:300px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div> 15 </div>