keyframe-timing-functions3.html | Explore in Territory

<!DOCTYPE html>
<style>
.box {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: blue;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
#multipleUsesFirst {
  animation-name: multipleUsesFirst;
}
#inheritUsesParent {
  animation-name: inheritUsesParent;
  animation-timing-function: linear;
  top: 110px;
}
#parent {
  animation-timing-function: step-end;
}
@keyframes multipleUsesFirst {
  0% {
    left: 0px;
    animation-timing-function: step-end, ease;
  }
  100% { left: 400px; }
}
@keyframes inheritUsesParent {
  0% {
    left: 0px;
    animation-timing-function: inherit;
  }
  100% { left: 400px; }
}
</style>
<script src="../resources/animation-test-helpers.js"></script>
<script>
  const expectedValues = [
    // [time, element-id, property, expected-value, tolerance]
    [0.2, "multipleUsesFirst", "left", 0, 0],
    [0.2, "inheritUsesParent", "left", 0, 0],
  ];
  runAnimationTest(expectedValues);
</script>
Tests whether timing functions inside keyframes are respected.
<div class="box" id="multipleUsesFirst"></div>
<div id="parent">
  <div class="box" id="inheritUsesParent"></div>
</div>
<div id="result"></div>

chromium/third_party/blink/web_tests/animations/timing/keyframe-timing-functions3.html