CSSKeyframeRule.html | Explore in Territory

<!doctype html>
<meta charset="utf-8">
<title></title>
<link rel="help" href="https://drafts.csswg.org/css-animations/#interface-csskeyframerule">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css" id="styleElement">
  div { animation: 3s slidein; }
  @keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%;
    }

    to {
      margin-left: 0%;
      width: 100%;
    }
  }
</style>
<script>
  var styleSheet = document.getElementById("styleElement").sheet;
  var keyframesRule = styleSheet.cssRules[1];
  var fromRule = keyframesRule.cssRules[0];
  var toRule = keyframesRule.cssRules[1];

  test(function() {
    assert_equals(keyframesRule.name, "slidein");
    assert_equals(typeof fromRule.style, "object");
    assert_equals(fromRule.style.marginLeft, "100%");
    assert_equals(fromRule.style.width, "300%");

    assert_equals(typeof toRule.style, "object");
    assert_equals(toRule.style.marginLeft, "0%");
    assert_equals(toRule.style.width, "100%");

    toRule.style.marginLeft = "-5%";
    toRule.style.width = "50%";

    assert_equals(fromRule.style.marginLeft, "100%");
    assert_equals(fromRule.style.width, "300%");
    assert_equals(toRule.style.marginLeft, "-5%");
    assert_equals(toRule.style.width, "50%");
  }, "CSSKeyframeRule: style property");

  test(function() {
    fromRule.style = "margin-left: 50%; width: 100%;";

    assert_equals(fromRule.style.marginLeft, "50%", "margin-left");
    assert_equals(fromRule.style.width, "100%", "width");
  }, "CSSKeyframeRule: style property has [PutForwards]");
</script>
chromium/third_party/blink/web_tests/external/wpt/css/cssom/CSSKeyframeRule.html
