testing/web-platform/tests/animation-worklet/worklet-animation-with-scroll-timeline-and-display-none.https.html

   1 <html class="reftest-wait">
   2 <title>Scroll timeline with WorkletAnimation and transition from display:none to display:block</title>
   3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
   4 <meta name="assert" content="Scroll timeline should properly handle going from display:none to display:block">
   5 <link rel="match" href="worklet-animation-with-scroll-timeline-ref.html">
   6
   7 <script src="/web-animations/testcommon.js"></script>
   8 <script src="/common/reftest-wait.js"></script>
   9 <script src="common.js"></script>
  10
  11 <style>
  12   #box {
  13     width: 100px;
  14     height: 100px;
  15     background-color: green;
  16   }
  17
  18   #covered {
  19     width: 100px;
  20     height: 100px;
  21     background-color: red;
  22   }
  23
  24   /* Hide scrollbars to avoid unnecessary visual issues related to them */
  25   #scroller::-webkit-scrollbar {
  26     display: none;
  27   }
  28
  29   #scroller {
  30     scrollbar-width: none;
  31     overflow: auto;
  32     height: 100px;
  33     width: 100px;
  34     will-change: transform; /* force compositing */
  35   }
  36
  37   .removed {
  38     display: none;
  39   }
  40
  41   #contents {
  42     height: 1000px;
  43     width: 100%;
  44   }
  45 </style>
  46
  47 <div id="box"></div>
  48 <div id="covered"></div>
  49 <div id="scroller">
  50   <div id="contents"></div>
  51 </div>
  52
  53 <script>
  54   registerPassthroughAnimator().then(()=>{
  55     const box = document.getElementById('box');
  56     const effect = new KeyframeEffect(box,
  57       [
  58       { transform: 'translateY(0)', opacity: 1 },
  59       { transform: 'translateY(200px)', opacity: 0 }
  60       ], {
  61         duration: 1000,
  62       }
  63     );
  64
  65     const scroller = document.getElementById('scroller');
  66     scroller.classList.add('removed');
  67     const timeline = new ScrollTimeline({ scrollSource: scroller, timeRange: 1000, orientation: 'block' });
  68     const animation = new WorkletAnimation('passthrough', effect, timeline);
  69     animation.play();
  70
  71     // Ensure that the WorkletAnimation will have been started on the compositor.
  72     waitForAsyncAnimationFrames(1).then(_ => {
  73       // Now return the scroller to the world, which will cause it to be composited
  74       // and the animation should update on the compositor side.
  75       scroller.classList.remove('removed');
  76       const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  77       scroller.scrollTop = 0.5 * maxScroll;
  78
  79       waitForAsyncAnimationFrames(1).then(_ => {
  80         takeScreenshot();
  81       });
  82     });
  83   });
  84 </script>