CSSKeyframeRule.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/CSSKeyframeRule.html - WPT Dashboard Interop Dashboard

<!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>