testing/web-platform/tests/web-animations/timing-model/animations/infinite-duration-animation.html

   1
   2 <!DOCTYPE html>
   3 <html class="reftest-wait">
   4 <meta charset="UTF-8">
   5 <title>Infinite duration animation</title>
   6 <link rel="match" href="infinite-duration-animation-ref.html">
   7 <script src="/common/reftest-wait.js"></script>
   8 <script src="../../testcommon.js"></script>
   9 <style>
  10   #box-1, #box-2 {
  11     border: 1px solid white;
  12     height: 40px;
  13     position: absolute;
  14     top: 40px;
  15     width: 40px;
  16   }
  17   #box-1 {
  18     background: blue;
  19     z-index: 1;
  20   }
  21   #box-2 {
  22     background: white;
  23     z-index: 2;
  24   }
  25   #notes {
  26     position: absolute;
  27     left: 0px;
  28     top: 100px;
  29   }
  30   body {
  31     background: white;
  32   }
  33 </style>
  34
  35 <body>
  36   <div id="box-1"></div>
  37   <div id="box-2"></div>
  38   <p id="notes">
  39     This test creates an infinite duration animations, which should be stuck at
  40     a progress of 0. If any blue pixels appear in the screenshot, the test
  41     fails.
  42   </p>
  43 </body>
  44 <script>
  45   onload = async function() {
  46     // Double rAF to ensure that we are not bogged down during initialization
  47     // and the compositor is ready.
  48     waitForAnimationFrames(2).then(() => {
  49       const elem = document.getElementById('box-1');
  50       const keyframes = [
  51         { transform: 'translateX(0px)' },
  52         { transform: 'translateX(100px)' }
  53       ];
  54       const effect =
  55           new KeyframeEffect(elem, keyframes,
  56                              {iterations: 3, duration: Infinity});
  57       const animation = new Animation(effect);
  58       animation.play();
  59       animation.ready.then(() => {
  60         takeScreenshotDelayed(100);
  61       });
  62     });
  63   };
  64 </script>