sticky-pos-scrollable-1.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html reftest-async-scroll>

<body>

  <div style="width:400px; height:300px; overflow:scroll; scrollbar-width:none; 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>