Attachment 342666 Details for Bug 186127 – Another testcase

Another testcase

testcase.html (text/html), 2.75 KB, created by Frédéric Wang (:fredw) on 2018-06-13 09:51:04 PDT

(hide)

Description:

Filename:

MIME Type:

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

Created: 2018-06-13 09:51:04 PDT

Size: 2.75 KB

patch

obsolete

><!DOCTYPE html>
><html>
>  <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 complex animations stop
>                                 when animation-play-state is set to paused">
>    <link rel="match" href="set-animation-play-state-to-paused-002-ref.html">
>    <style>
>      #containerLinear, #containerSteps {
>        position: absolute;
>        left: 100px;
>      }
>      #containerLinear {
>        top: 100px;
>      }
>      #lineLinear  {
>        position: absolute;
>        background: red;
>        left: -1px;
>        width: 2px;
>        top: -40px;
>        height: 80px;
>      }
>      #coveringRectLinear {
>		opacity: .5;
>        position: absolute;
>        background: lightgreen;
>        left: -20px;
>        width: 40px;
>        top: -50px;
>        height: 100px;
>        transform: translate(45px, 0) rotate(90deg);
>      }
>      #lineLinear {
>        animation: rotate 5s linear;
>      }
>      .pause {
>        opacity: 0.6;
>        animation-play-state: paused !important;
>      }
>      @keyframes rotate
>      {
>        100% {
>          transform: translate(90px, 0) rotate(180deg);
>        }
>      }
>    </style>
>    <script>
>      var start = null;
>      var animationDuration = 5000;
>      function shift(id)
>      {
>        var transform = window.getComputedStyle(document.getElementById(id)).transform;
>        if (transform === "none")
>          return 0;
>        // See https://drafts.csswg.org/css-transforms-2/#serialization-of-the-computed-value
>        return parseFloat(transform.split(/,\s*/)[4]);
>      }
>      function step(timestamp) {
>        // For each line, pause the animation as soon as it passes under the covering rect.
>        var timeError = 100;
>        var maxShift = 180;
>        var epsilon = maxShift * timeError / animationDuration;
>        ["Linear"].forEach((id) => {
>          if (Math.abs(shift(`coveringRect${id}`) - shift(`line${id}`)) < epsilon)
>            document.getElementById(`line${id}`).classList.add("pause");
>        });
>
>        // Stop the reftest after the time when the animations would have stop.
>        // If pausing failed for some reason, the lines will be visible.
>        if (!start) start = timestamp;
>        if (timestamp - start < animationDuration)
>          window.requestAnimationFrame(step);
>      }
>      function runTest() {
>        window.requestAnimationFrame(step);
>      }
>    </script>
>  </head>
>  <body onload="runTest()">
>    <div id="containerLinear">
>      <div id="lineLinear"></div>
>      <div id="coveringRectLinear"></div>
>    </div>
>  </body>
></html>

<!DOCTYPE html>
<html>
  <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 complex animations stop
                                 when animation-play-state is set to paused">
    <link rel="match" href="set-animation-play-state-to-paused-002-ref.html">
    <style>
      #containerLinear, #containerSteps {
        position: absolute;
        left: 100px;
      }
      #containerLinear {
        top: 100px;
      }
      #lineLinear  {
        position: absolute;
        background: red;
        left: -1px;
        width: 2px;
        top: -40px;
        height: 80px;
      }
      #coveringRectLinear {
		opacity: .5;
        position: absolute;
        background: lightgreen;
        left: -20px;
        width: 40px;
        top: -50px;
        height: 100px;
        transform: translate(45px, 0) rotate(90deg);
      }
      #lineLinear {
        animation: rotate 5s linear;
      }
      .pause {
        opacity: 0.6;
        animation-play-state: paused !important;
      }
      @keyframes rotate
      {
        100% {
          transform: translate(90px, 0) rotate(180deg);
        }
      }
    </style>
    <script>
      var start = null;
      var animationDuration = 5000;
      function shift(id)
      {
        var transform = window.getComputedStyle(document.getElementById(id)).transform;
        if (transform === "none")
          return 0;
        // See https://drafts.csswg.org/css-transforms-2/#serialization-of-the-computed-value
        return parseFloat(transform.split(/,\s*/)[4]);
      }
      function step(timestamp) {
        // For each line, pause the animation as soon as it passes under the covering rect.
        var timeError = 100;
        var maxShift = 180;
        var epsilon = maxShift * timeError / animationDuration;
        ["Linear"].forEach((id) => {
          if (Math.abs(shift(`coveringRect${id}`) - shift(`line${id}`)) < epsilon)
            document.getElementById(`line${id}`).classList.add("pause");
        });

        // Stop the reftest after the time when the animations would have stop.
        // If pausing failed for some reason, the lines will be visible.
        if (!start) start = timestamp;
        if (timestamp - start < animationDuration)
          window.requestAnimationFrame(step);
      }
      function runTest() {
        window.requestAnimationFrame(step);
      }
    </script>
  </head>
  <body onload="runTest()">
    <div id="containerLinear">
      <div id="lineLinear"></div>
      <div id="coveringRectLinear"></div>
    </div>
  </body>
</html>

Actions: View

Attachments on bug 186127: 341645 | 341659 | 342247 | 342666