Blitz - WPT: rule-width-interpolation-conversion-002.html

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

Enable JavaScript in test iframe

/css/css-gaps/animation/rule-width-interpolation-conversion-002.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, 10px;
      column-rule-style: solid;
      animation: width-anim 2s linear paused;
    }
    @keyframes width-anim {
      from { column-rule-width: 0px, repeat(auto, 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, repeat(auto, 0px)');

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

      const snapped = getComputedStyle(el).columnRuleWidth;
      assert_equals(
        snapped,
        '10px, 10px'
      );

      el.style.columnRuleWidth = '10px, repeat(auto, 10px)';
      const intermediate = getComputedStyle(el).columnRuleWidth;
      assert_equals(
        intermediate,
        '5px, repeat(auto, 5px)'
      );

    });
  </script>
</body>
</html>