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