third_party/WebKit/LayoutTests/animations/sample-on-last-keyframe.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     #test {
   6       animation-name: test;
   7       animation-direction: reverse;
   8       /*
   9       A non-reversed iteration runs in the range [0, <duration>), so to sample
  10       on the last keyframe we have to sample at the start of a reversed
  11       iteration.
  12       */
  13       animation-duration: 1s;
  14     }
  15     @keyframes test {
  16         from {
  17           opacity: 0;
  18         }
  19         to {
  20           opacity: 1;
  21         }
  22     }
  23   </style>
  24   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  25   <script type="text/javascript" charset="utf-8">
  26
  27     const expectedValues = [
  28       // [time, element-id, property, expected-value, tolerance]
  29       [0, "test", "opacity", 1.0, 0.1],
  30     ];
  31
  32     runAnimationTest(expectedValues);
  33   </script>
  34 </head>
  35 <body>
  36 <p>Tests sampling a keyframe animation on the last keyframe.</p>
  37 <div id="test"></div>
  38 <div id="result">
  39 </div>
  40 </body>
  41 </html>