third_party/WebKit/LayoutTests/animations/keyframe-timing-functions3.html

   1 <!DOCTYPE html>
   2 <style>
   3 .box {
   4   position: absolute;
   5   height: 100px;
   6   width: 100px;
   7   background-color: blue;
   8   animation-duration: 1s;
   9 }
  10 #multipleUsesFirst {
  11   animation-name: multipleUsesFirst;
  12 }
  13 #inheritUsesParent {
  14   animation-name: inheritUsesParent;
  15   animation-timing-function: linear;
  16   top: 110px;
  17 }
  18 #parent {
  19   animation-timing-function: step-end;
  20 }
  21 @keyframes multipleUsesFirst {
  22   0% {
  23     left: 0px;
  24     animation-timing-function: step-end, ease;
  25   }
  26   100% { left: 400px; }
  27 }
  28 @keyframes inheritUsesParent {
  29   0% {
  30     left: 0px;
  31     animation-timing-function: inherit;
  32   }
  33   100% { left: 400px; }
  34 }
  35 </style>
  36 <script src="resources/animation-test-helpers.js"></script>
  37 <script>
  38   const expectedValues = [
  39     // [time, element-id, property, expected-value, tolerance]
  40     [0.2, "multipleUsesFirst", "left", 0, 0],
  41     [0.2, "inheritUsesParent", "left", 0, 0],
  42   ];
  43   runAnimationTest(expectedValues);
  44 </script>
  45 Tests whether timing functions inside keyframes are respected.
  46 <div class="box" id="multipleUsesFirst"></div>
  47 <div id="parent">
  48   <div class="box" id="inheritUsesParent"></div>
  49 </div>
  50 <div id="result"></div>