gecko-dev/layout/reftests/async-scrolling/sticky-pos-scrollable-1.html

16 строки
986 B
HTML

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