keyframes-style-declaration-updates-animation.html

<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
    0% { left: 0px; }
    50% { left: 500px; }
    100% { left: 100px; }
  }

  #target1 {
    animation: anim 10s -3s linear paused;
    background-color: rgb(0, 0, 0);
    left: 0px;
  }

  #target2 {
    animation: anim 10s -6s linear paused;
    background-color: rgb(0, 0, 0);
    left: 100px;
  }
</style>
<div id="target1"></div>
<div id="target2"></div>
<script>
  test(function() {
    assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');

    var sheet = document.styleSheets[0];
    var rules = sheet.rules;
    var keyframes = rules[0];

    assert_equals(keyframes.cssRules.length, 3);
    var keyframe = keyframes[1];
    assert_equals(keyframe.keyText, '50%');
    keyframe.style.setProperty('background-color', 'rgb(200, 100, 50)');
    assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(120, 60, 30)');
    assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(160, 80, 40)');

    keyframe.style.removeProperty('background-color');
    assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(0, 0, 0)');
    assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(0, 0, 0)');

    keyframe.style.left = '200px';
    assert_equals(parseInt(getComputedStyle(target1).left), 120, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 180, 'left offset');

    keyframe.keyText = '20%';
    assert_equals(parseInt(getComputedStyle(target1).left), 187, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 150, 'left offset');

  }, "Check that changes to keyframe style declarations update the animation accordingly");
</script>
chromium/third_party/blink/web_tests/animations/keyframes-style-declaration-updates-animation.html
