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