testing/web-platform/tests/animation-worklet/resources/animator-iframe.html

   1 <!DOCTYPE html>
   2 <style>
   3 .greenbox {
   4   width: 100px;
   5   height: 100px;
   6   background-color: #00ff00;
   7 }
   8 </style>
   9 <script src="../common.js"></script>
  10
  11 <script id="iframe_worklet" type="text/worklet">
  12 registerAnimator("iframe_animator", class {
  13   animate(currentTime, effect) {
  14     effect.localTime = 600;
  15   }
  16 });
  17 registerAnimator("duplicate_animator", class {
  18   animate(currentTime, effect) {
  19     effect.localTime = 800;
  20   }
  21 });
  22 </script>
  23
  24 <div id="iframe_target" class="greenbox"></div>
  25
  26 <script>
  27 runInAnimationWorklet(
  28   document.getElementById('iframe_worklet').textContent
  29 ).then(_ => {
  30   const target = document.getElementById('iframe_target');
  31   // Only create an animation for iframe_animator.
  32   const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
  33   const animation = new WorkletAnimation('iframe_animator', effect);
  34   animation.play();
  35   waitTwoAnimationFrames( _ => {
  36     window.parent.postMessage(getComputedStyle(target).opacity, '*');
  37   });
  38  });
  39 </script>