revert-rule-keyframes-dynamic.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-animations/revert-rule-keyframes-dynamic.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS Animations: revert-rule in keyframes, dynamic</title>

<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#revert-rule-keyword">

<link rel="help" href="https://drafts.csswg.org/css-animations/">

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

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

<style>

  @property --x {

    syntax: "<length>";

    inherits: false;

    initial-value: 0px;

  @keyframes anim {

    from { width: revert-rule; }

    to { width: 200px; }

  @keyframes anim-custom {

    from { --x: revert-rule; }

    to { --x: 200px; }

  #target {

    width: 100px;

    --x: 100px;

    animation: anim 3600s steps(2, start),

               anim-custom 3600s steps(2, start);

</style>

  <div id=target></div>

<script>

  test((t) => {

    t.add_cleanup(() => { target.style = ''; });

    assert_true(CSS.supports('color', 'revert-rule'));

    assert_equals(getComputedStyle(target).width, '150px');

    target.style.setProperty('width', '120px');

    assert_equals(getComputedStyle(target).width, '160px');

  }, 'revert-rule in keyframes, reverted-to value changing (standard property)');

  test((t) => {

    t.add_cleanup(() => { target.style = ''; });

    assert_true(CSS.supports('color', 'revert-rule'));

    assert_equals(getComputedStyle(target).getPropertyValue('--x'), '150px');

    target.style.setProperty('--x', '120px');

    assert_equals(getComputedStyle(target).getPropertyValue('--x'), '160px');

  }, 'revert-rule in keyframes, reverted-to value changing (custom property)');

</script>