wpt / css / css-gaps / animation / rule-width-interpolation-conversion-001.html

Status: FAIL | Duration: 39ms | Subtests: 0/1 | Open test on wpt.live | wpt.fyi

TestTest Source

/css/css-gaps/animation/rule-width-interpolation-conversion-001.html

<html>
<head>
  <meta charset="utf-8">
  <title>CSS gap width change computed value to non compatible value mid-animation</title>
  <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-width">
  <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/web-animations/testcommon.js"></script>
  <style>
    #target {
      column-rule-width: 10px;
      column-rule-style: solid;
      animation: width-anim 2s linear paused;
    }
    @keyframes width-anim {
      from { column-rule-width: 0px; }
    }
  </style>
</head>
<body>
  <div id="target">Dynamic Gap-Width Test</div>

  <script>
    promise_test(async () => {
      const el = document.getElementById('target');
      const anim = el.getAnimations()[0];

      assert_equals(getComputedStyle(el).columnRuleWidth, '0px');

      // Jump to 50% of the animation.
      anim.currentTime = anim.effect.getComputedTiming().duration / 2;

      const intermediate = getComputedStyle(el).columnRuleWidth;
      assert_equals(
        intermediate,
        '5px' // The width at 50% of the animation.
      );

      el.style.columnRuleWidth = 'repeat(auto, 10px)';

      const snapped = getComputedStyle(el).columnRuleWidth;
      assert_equals(
        snapped,
        'repeat(auto, 10px)'
      );
    });
  </script>
</body>
</html>