Auto merge of #14712 - KiChjang:css-keyframe-rule-style, r=Manishearth

Implement CSSKeyframeRule.style

Fixes #14636.

r? @Manishearth

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/14712)
<!-- Reviewable:end -->

components/script/dom/csskeyframerule.rs

@@ -2,11 +2,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-use dom::bindings::codegen::Bindings::CSSKeyframeRuleBinding;
+use dom::bindings::codegen::Bindings::CSSKeyframeRuleBinding::{self, CSSKeyframeRuleMethods};
-use dom::bindings::js::Root;
+use dom::bindings::js::{JS, MutNullableJS, Root};
-use dom::bindings::reflector::reflect_dom_object;
+use dom::bindings::reflector::{DomObject, reflect_dom_object};
 use dom::bindings::str::DOMString;
 use dom::cssrule::{CSSRule, SpecificCSSRule};
+use dom::cssstyledeclaration::{CSSModificationAccess, CSSStyleDeclaration, CSSStyleOwner};
 use dom::cssstylesheet::CSSStyleSheet;
 use dom::window::Window;
 use parking_lot::RwLock;
@@ -19,6 +20,7 @@ pub struct CSSKeyframeRule {
     cssrule: CSSRule,
     #[ignore_heap_size_of = "Arc"]
     keyframerule: Arc<RwLock<Keyframe>>,
+    style_decl: MutNullableJS<CSSStyleDeclaration>,
 }
 
 impl CSSKeyframeRule {
@@ -27,6 +29,7 @@ impl CSSKeyframeRule {
         CSSKeyframeRule {
             cssrule: CSSRule::new_inherited(parent_stylesheet),
             keyframerule: keyframerule,
+            style_decl: Default::default(),
         }
     }
 
@@ -39,6 +42,19 @@ impl CSSKeyframeRule {
     }
 }
 
+impl CSSKeyframeRuleMethods for CSSKeyframeRule {
+    // https://drafts.csswg.org/css-animations/#dom-csskeyframerule-style
+    fn Style(&self) -> Root<CSSStyleDeclaration> {
+        self.style_decl.or_init(|| {
+            CSSStyleDeclaration::new(self.global().as_window(),
+                                     CSSStyleOwner::CSSRule(JS::from_ref(self.global().as_window()),
+                                                                 self.keyframerule.read().block.clone()),
+                                     None,
+                                     CSSModificationAccess::ReadWrite)
+        })
+    }
+}
+
 impl SpecificCSSRule for CSSKeyframeRule {
     fn ty(&self) -> u16 {
         use dom::bindings::codegen::Bindings::CSSRuleBinding::CSSRuleConstants;

components/script/dom/cssstyledeclaration.rs

@@ -34,7 +34,7 @@ pub struct CSSStyleDeclaration {
 #[must_root]
 pub enum CSSStyleOwner {
     Element(JS<Element>),
-    CSSStyleRule(JS<Window>,
+    CSSRule(JS<Window>,
             #[ignore_heap_size_of = "Arc"]
             Arc<RwLock<PropertyDeclarationBlock>>),
 }
@@ -49,7 +49,7 @@ impl CSSStyleOwner {
                     None
                 }
             }
-            CSSStyleOwner::CSSStyleRule(_, ref pdb) => {
+            CSSStyleOwner::CSSRule(_, ref pdb) => {
                 Some(pdb.clone())
             }
         }
@@ -58,7 +58,7 @@ impl CSSStyleOwner {
     fn window(&self) -> Root<Window> {
         match *self {
             CSSStyleOwner::Element(ref el) => window_from_node(&**el),
-            CSSStyleOwner::CSSStyleRule(ref window, _) => Root::from_ref(&**window),
+            CSSStyleOwner::CSSRule(ref window, _) => Root::from_ref(&**window),
         }
     }
 
@@ -72,7 +72,7 @@ impl CSSStyleOwner {
         match *self {
             CSSStyleOwner::Element(ref el) =>
                 el.upcast::<Node>().dirty(NodeDamage::NodeStyleDamaged),
-            CSSStyleOwner::CSSStyleRule(ref window, _) =>
+            CSSStyleOwner::CSSRule(ref window, _) =>
                 window.Document().invalidate_stylesheets(),
         }
     }
@@ -126,8 +126,8 @@ impl CSSStyleDeclaration {
 
     fn get_computed_style(&self, property: PropertyId) -> DOMString {
         match self.owner {
-            CSSStyleOwner::CSSStyleRule(..) =>
+            CSSStyleOwner::CSSRule(..) =>
-                panic!("get_computed_style called on CSSStyleDeclaration with a CSSStyleRule owner"),
+                panic!("get_computed_style called on CSSStyleDeclaration with a CSSRule owner"),
             CSSStyleOwner::Element(ref el) => {
                 let node = el.upcast::<Node>();
                 if !node.is_in_doc() {

components/script/dom/cssstylerule.rs

@@ -58,7 +58,7 @@ impl CSSStyleRuleMethods for CSSStyleRule {
     fn Style(&self) -> Root<CSSStyleDeclaration> {
         self.style_decl.or_init(|| {
             CSSStyleDeclaration::new(self.global().as_window(),
-                                     CSSStyleOwner::CSSStyleRule(JS::from_ref(self.global().as_window()),
+                                     CSSStyleOwner::CSSRule(JS::from_ref(self.global().as_window()),
                                                                  self.stylerule.read().block.clone()),
                                      None,
                                      CSSModificationAccess::ReadWrite)

components/script/dom/webidls/CSSKeyframeRule.webidl

@@ -6,5 +6,5 @@
 [Exposed=Window]
 interface CSSKeyframeRule : CSSRule {
   //          attribute DOMString           keyText;
-  // readonly attribute CSSStyleDeclaration style;
+  readonly attribute CSSStyleDeclaration style;
 };

tests/wpt/metadata/MANIFEST.json

@@ -45847,6 +45847,12 @@
     "deleted_reftests": {},
     "items": {
       "testharness": {
+        "cssom/CSSKeyframeRule.html": [
+          {
+            "path": "cssom/CSSKeyframeRule.html",
+            "url": "/cssom/CSSKeyframeRule.html"
+          }
+        ],
         "cssom/overflow-serialization.html": [
           {
             "path": "cssom/overflow-serialization.html",

tests/wpt/web-platform-tests/cssom/CSSKeyframeRule.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<meta charset="utf-8">
+<title></title>
+<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");
+</script>