Attachment 341646 Details for Bug 170784 – Another testcase

Another testcase

set-animation-play-state-to-paused-001.html (text/html), 2.65 KB, created by Frédéric Wang (:fredw) on 2018-05-31 00:04:09 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Frédéric Wang (:fredw)

Created: 2018-05-31 00:04:09 PDT

Size: 2.65 KB

patch

obsolete

><!DOCTYPE html>
><html class="reftest-wait">
>  <head>
>    <meta charset="utf-8">
>    <title>Dynamically set animation-play-state to paused</title>
>    <link rel="author" title="Igalia S.L." href="https://www.igalia.com/">
>    <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state">
>    <meta name="assert" content="Visually check that transform animations stop
>                                 when animation-play-state is set to paused">
>    <link rel="match" href="set-animation-play-state-to-paused-001-ref.html">
>    <style>
>      #container {
>        position: absolute;
>        left: 0;
>        top: 3em;
>      }
>      #squareLinear, #squareSteps  {
>        width: 100px;
>        height: 100px;
>        background: red;
>        position: absolute;
>        left: -50px;
>      }
>      #squareLinear {
>        top: 0px;
>        animation: move 1s linear;
>      }
>      #squareSteps {
>        top: 150px;
>        animation: move 1s steps(1000, end);
>      }
>      #coveringRect {
>        position: absolute;
>        background: lightgreen;
>        width: 150px;
>        height: 250px;
>        left: -75px;
>        top: 0px;
>        transform: translate(150px);
>      }
>      .pause {
>        opacity: 0.6;
>        animation-play-state: paused !important;
>      }
>      @keyframes move
>      {
>        100% {
>          transform: translate(500px);
>        }
>      }
>    </style>
>    <script>
>      var start = null;
>      var animationDuration = 1000;
>      var coveringRectShift = 150;
>      var rectFinalShift = 500;
>      function step(timestamp) {
>        if (!start) start = timestamp;
>        var progress = timestamp - start;
>        // Pause the animations when the squares pass under the covering rect.
>        var targetProgress = animationDuration * coveringRectShift / rectFinalShift;
>        if (progress > targetProgress) {
>          document.getElementById("squareLinear").classList.add("pause");
>          document.getElementById("squareSteps").classList.add("pause");
>        }
>
>        // Wait a bit so that the squares pass the covering rect if the
>        // animation fails to be paused.
>        var delta = 200;
>        if (progress < targetProgress + delta)
>          window.requestAnimationFrame(step)
>        else
>          document.documentElement.classList.remove("reftest-wait");
>      }
>      function runTest() {
>        window.requestAnimationFrame(step);
>      }
>    </script>
>  </head>
>  <body onload="runTest()">
>    <p>This test passes if you see a green rectangle and no red.</p>
>    <div id="container">
>      <div id="squareLinear"></div>
>      <div id="squareSteps"></div>
>      <div id="coveringRect"></div>
>    </div>
>  </body>
></html>

<!DOCTYPE html>
<html class="reftest-wait">
  <head>
    <meta charset="utf-8">
    <title>Dynamically set animation-play-state to paused</title>
    <link rel="author" title="Igalia S.L." href="https://www.igalia.com/">
    <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state">
    <meta name="assert" content="Visually check that transform animations stop
                                 when animation-play-state is set to paused">
    <link rel="match" href="set-animation-play-state-to-paused-001-ref.html">
    <style>
      #container {
        position: absolute;
        left: 0;
        top: 3em;
      }
      #squareLinear, #squareSteps  {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: -50px;
      }
      #squareLinear {
        top: 0px;
        animation: move 1s linear;
      }
      #squareSteps {
        top: 150px;
        animation: move 1s steps(1000, end);
      }
      #coveringRect {
        position: absolute;
        background: lightgreen;
        width: 150px;
        height: 250px;
        left: -75px;
        top: 0px;
        transform: translate(150px);
      }
      .pause {
        opacity: 0.6;
        animation-play-state: paused !important;
      }
      @keyframes move
      {
        100% {
          transform: translate(500px);
        }
      }
    </style>
    <script>
      var start = null;
      var animationDuration = 1000;
      var coveringRectShift = 150;
      var rectFinalShift = 500;
      function step(timestamp) {
        if (!start) start = timestamp;
        var progress = timestamp - start;
        // Pause the animations when the squares pass under the covering rect.
        var targetProgress = animationDuration * coveringRectShift / rectFinalShift;
        if (progress > targetProgress) {
          document.getElementById("squareLinear").classList.add("pause");
          document.getElementById("squareSteps").classList.add("pause");
        }

        // Wait a bit so that the squares pass the covering rect if the
        // animation fails to be paused.
        var delta = 200;
        if (progress < targetProgress + delta)
          window.requestAnimationFrame(step)
        else
          document.documentElement.classList.remove("reftest-wait");
      }
      function runTest() {
        window.requestAnimationFrame(step);
      }
    </script>
  </head>
  <body onload="runTest()">
    <p>This test passes if you see a green rectangle and no red.</p>
    <div id="container">
      <div id="squareLinear"></div>
      <div id="squareSteps"></div>
      <div id="coveringRect"></div>
    </div>
  </body>
</html>

Actions: View

Attachments on bug 170784: 340559 | 340560 | 341453 | 341454 | 341646 | 341650 | 342245 | 342414 | 342422 | 344170