wpt / css / css-easing / step-jump-start.html

Status: PASS | Duration: 1ms | Subtests: 7/7 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (7/7)

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

SubtestStatusMessage
.test 1PASS
.test 2PASS
.test 3PASS
.test 4PASS
.test 5PASS
.test 6PASS
.test 7PASS

/css/css-easing/step-jump-start.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function steps(3, jump-start)</title>
<link rel="author" title="Euclid Ye" href="mailto:yezhizhenjiakang@gmail.com">
<link rel="help" href="https://github.com/servo/servo/issues/43060">
<link rel="help" href="https://drafts.csswg.org/css-easing/#typedef-step-position">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>

<style>
  @keyframes step-anim {
    0% {
      width: 0px;
    }
    100% {
      width: 90px;
    }
  }

  .test {
    width: 10px;
    height: 20px;
    background: green;
    margin-bottom: 5px;
    animation: step-anim 3s steps(3, jump-start) paused;
    animation-delay: calc(var(--at) * -1s);
  }
</style>

<div class="test" style="--at: 0.0" data-expected-width="30"></div>
<div class="test" style="--at: 0.9" data-expected-width="30"></div>

<div class="test" style="--at: 1.0" data-expected-width="60"></div>
<div class="test" style="--at: 1.9" data-expected-width="60"></div>

<div class="test" style="--at: 2.0" data-expected-width="90"></div>
<div class="test" style="--at: 2.9" data-expected-width="90"></div>

<div class="test" style="--at: 3.0" data-expected-width="10"></div>

<script>
  checkLayout(".test");
</script>