gap-decorations-outset-neutral-keyframe-001.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-gaps/animation/gap-decorations-outset-neutral-keyframe-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>gap decorations row-rule-inset properties neutral keyframe</title>

    <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">

    <meta name="assert" content="gap decorations row-rule-inset value list supports neutral keyframe.">

    <script src="/resources/testharness.js"></script>

    <script src="/resources/testharnessreport.js"></script>

    <script src="/css/support/interpolation-testcommon.js"></script>

  </head>

  <body>

    <div id="target"></div>

    <script>

      test(() => {

        target.style.rowRuleStyle = 'solid';

        target.style.rowRuleEdgeStartInset = '1px';

        target.style.rowRuleEdgeEndInset = '1px';

        target.style.rowRuleInteriorStartInset = '1px';

        target.style.rowRuleInteriorEndInset = '1px';

        var animation = target.animate([{}, {rowRuleEdgeStartInset: '11px'}], 1000);

        animation.pause();

        animation.currentTime = 500;

        assert_equals(getComputedStyle(target).rowRuleEdgeStartInset, '6px');

        var animation2 = target.animate([{}, {rowRuleEdgeEndInset: '11px'}], 1000);

        animation2.pause();

        animation2.currentTime = 500;

        assert_equals(getComputedStyle(target).rowRuleEdgeEndInset, '6px');

        var animation3 = target.animate([{}, {rowRuleInteriorStartInset: '11px'}], 1000);

        animation3.pause();

        animation3.currentTime = 500;

        assert_equals(getComputedStyle(target).rowRuleInteriorStartInset, '6px');

        var animation4 = target.animate([{}, {rowRuleInteriorEndInset: '11px'}], 1000);

        animation4.pause();

        animation4.currentTime = 500;

        assert_equals(getComputedStyle(target).rowRuleInteriorEndInset, '6px');

      }, 'gap decorations row-rule-inset properties support neutral keyframe.');

    </script>

  </body>

</html>