wpt / css / css-borders / corner-shape / corner-shape-noop-keyframe.html

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

TestRefTest SourceRef Source

/css/css-borders/corner-shape/corner-shape-noop-keyframe.html

<!DOCTYPE html>
<meta charset="UTF-8" />
<title>corner-shape interpolation - noop</title>
<link rel="match" href="corner-shape-noop-keyframe-ref.html" />
<link
  rel="help"
  href="https://drafts.csswg.org/css-borders-4/#corner-shape-interpolation"
/>
<style>
  @keyframes noop {
    from {
      corner-shape: round;
    }
  }
  .target {
    width: 100px;
    height: 100px;
    background: green;
    border-radius: 50px;
    animation: noop 1s steps(1, start) paused;
  }
</style>
<div class="target"></div>

/css/css-borders/corner-shape/corner-shape-noop-keyframe-ref.html

<!DOCTYPE html>
<meta charset="UTF-8" />
<title>corner-shape interpolation - noop</title>
<link
  rel="help"
  href="https://drafts.csswg.org/css-borders-4/#corner-shape-interpolation"
/>
<style>
  div {
    width: 100px;
    height: 100px;
    background: green;
    border-radius: 50px;
  }
</style>
<div></div>