testing/web-platform/tests/animation-worklet/worklet-animation-with-scroll-timeline-and-overflow-hidden-ref.html

   1 <!DOCTYPE html>
   2 <title>Scroll timeline with WorkletAnimation using a scroller with overflow hidden</title>
   3 <style>
   4   #box {
   5     width: 100px;
   6     height: 100px;
   7     background-color: green;
   8     transform: translate(0, 100px);
   9     opacity: 0.5;
  10     will-change: transform; /* force compositing */
  11   }
  12
  13   #covered {
  14     width: 100px;
  15     height: 100px;
  16     background-color: red;
  17   }
  18
  19   #scroller {
  20     overflow: hidden;
  21     height: 100px;
  22     width: 100px;
  23     will-change: transform; /* force compositing */
  24   }
  25
  26   #contents {
  27     height: 1000px;
  28     width: 100%;
  29   }
  30 </style>
  31
  32 <div id="box"></div>
  33 <div id="covered"></div>
  34 <div id="scroller">
  35   <div id="contents"></div>
  36 </div>
  37
  38 <script>
  39   window.addEventListener('load', function() {
  40     // Move the scroller to halfway.
  41     const scroller = document.getElementById("scroller");
  42     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  43     scroller.scrollTop = 0.5 * maxScroll;
  44   });
  45 </script>