From e978f11c9fec1dee43b2d1d3fc86c1161ef81ebe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= <canaltinova@gmail.com>
Date: Mon, 5 Dec 2016 23:05:38 +0300
Subject: [PATCH 1/2] Fix Keyframe selector serialization

---
 components/style/keyframes.rs | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/style/keyframes.rs b/components/style/keyframes.rs
index 831627d42c3..474e4c8b539 100644
--- a/components/style/keyframes.rs
+++ b/components/style/keyframes.rs
@@ -14,7 +14,7 @@ use std::sync::Arc;
 use style_traits::ToCss;
 use stylesheets::{MemoryHoleReporter, Stylesheet};
 
-/// A number from 1 to 100, indicating the percentage of the animation where
+/// A number from 0 to 1, indicating the percentage of the animation where
 /// this keyframe should run.
 #[derive(Debug, Copy, Clone, PartialEq, PartialOrd)]
 #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
@@ -30,6 +30,12 @@ impl ::std::cmp::Ord for KeyframePercentage {
 
 impl ::std::cmp::Eq for KeyframePercentage { }
 
+impl ToCss for KeyframePercentage {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        write!(dest, "{}%", self.0 * 100.0)
+    }
+}
+
 impl KeyframePercentage {
     #[inline]
     pub fn new(value: f32) -> KeyframePercentage {
@@ -93,10 +99,10 @@ pub struct Keyframe {
 impl ToCss for Keyframe {
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
         let mut iter = self.selector.percentages().iter();
-        try!(write!(dest, "{}%", iter.next().unwrap().0));
+        try!(iter.next().unwrap().to_css(dest));
         for percentage in iter {
             try!(write!(dest, ", "));
-            try!(write!(dest, "{}%", percentage.0));
+            try!(percentage.to_css(dest));
         }
         try!(dest.write_str(" { "));
         try!(self.block.read().to_css(dest));

From 3b1de577f9bf54a83a7f598637dbd3b3d9b7b805 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= <canaltinova@gmail.com>
Date: Tue, 6 Dec 2016 01:08:16 +0300
Subject: [PATCH 2/2] Write tests for CSSOM Interfaces

---
 tests/wpt/metadata/MANIFEST.json              | 30 ++++++++++
 .../cssom/CSSKeyframesRule.html               | 58 +++++++++++++++++++
 .../cssom/CSSNamespaceRule.html               | 31 ++++++++++
 .../web-platform-tests/cssom/CSSRuleList.html | 26 +++++++++
 .../cssom/CSSStyleSheet.html                  | 43 ++++++++++++++
 .../cssom/StyleSheetList.html                 | 33 +++++++++++
 6 files changed, 221 insertions(+)
 create mode 100644 tests/wpt/web-platform-tests/cssom/CSSKeyframesRule.html
 create mode 100644 tests/wpt/web-platform-tests/cssom/CSSNamespaceRule.html
 create mode 100644 tests/wpt/web-platform-tests/cssom/CSSRuleList.html
 create mode 100644 tests/wpt/web-platform-tests/cssom/CSSStyleSheet.html
 create mode 100644 tests/wpt/web-platform-tests/cssom/StyleSheetList.html

diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
index 2176f9ef317..3e6746c6922 100644
--- a/tests/wpt/metadata/MANIFEST.json
+++ b/tests/wpt/metadata/MANIFEST.json
@@ -39677,12 +39677,42 @@
     "deleted_reftests": {},
     "items": {
       "testharness": {
+        "cssom/CSSKeyframesRule.html": [
+          {
+            "path": "cssom/CSSKeyframesRule.html",
+            "url": "/cssom/CSSKeyframesRule.html"
+          }
+        ],
+        "cssom/CSSNamespaceRule.html": [
+          {
+            "path": "cssom/CSSNamespaceRule.html",
+            "url": "/cssom/CSSNamespaceRule.html"
+          }
+        ],
+        "cssom/CSSRuleList.html": [
+          {
+            "path": "cssom/CSSRuleList.html",
+            "url": "/cssom/CSSRuleList.html"
+          }
+        ],
+        "cssom/CSSStyleSheet.html": [
+          {
+            "path": "cssom/CSSStyleSheet.html",
+            "url": "/cssom/CSSStyleSheet.html"
+          }
+        ],
         "cssom/MediaList.html": [
           {
             "path": "cssom/MediaList.html",
             "url": "/cssom/MediaList.html"
           }
         ],
+        "cssom/StyleSheetList.html": [
+          {
+            "path": "cssom/StyleSheetList.html",
+            "url": "/cssom/StyleSheetList.html"
+          }
+        ],
         "cssom/shorthand-serialization.html": [
           {
             "path": "cssom/shorthand-serialization.html",
diff --git a/tests/wpt/web-platform-tests/cssom/CSSKeyframesRule.html b/tests/wpt/web-platform-tests/cssom/CSSKeyframesRule.html
new file mode 100644
index 00000000000..b97d988c9ac
--- /dev/null
+++ b/tests/wpt/web-platform-tests/cssom/CSSKeyframesRule.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSSOM -  CSSKeyframesRule interface</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+        @keyframes foo {
+            0% { top: 0px; }
+            100% { top: 200px; }
+        }
+    </style>
+
+    <script>
+    test(function () {
+        var keyframe = document.styleSheets[0].cssRules[0];
+        assert_equals(keyframe.cssRules.length, 2, "CSSKeyframesRule cssRule length attribute");
+        assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute");
+        assert_equals(keyframe.cssRules[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule cssRule cssText attribute");
+
+        keyframe.appendRule("50% { top: 100px; }");
+        assert_equals(keyframe.cssRules.length, 3, "CSSKeyframesRule prefix attribute after appendRule function");
+        assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
+        assert_equals(keyframe.cssRules[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
+        assert_equals(keyframe.cssRules[2].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
+
+        keyframe.appendRule("0% { top: 50px; }");
+        assert_equals(keyframe.cssRules.length, 4, "CSSKeyframesRule prefix attribute after appendRule function");
+        assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
+        assert_equals(keyframe.cssRules[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
+        assert_equals(keyframe.cssRules[2].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
+        assert_equals(keyframe.cssRules[3].cssText, "0% { top: 50px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
+
+        var find1 = keyframe.findRule("50%");
+        assert_equals(find1.cssText, "50% { top: 100px; }", "CSSKeyframesRule findRule function");
+        var find2 = keyframe.findRule("0%");
+        assert_equals(find2.cssText, "0% { top: 50px; }", "CSSKeyframesRule findRule function");
+        var find3 = keyframe.findRule("70%");
+        assert_equals(find3, null, "CSSKeyframesRule findRule function");
+
+        keyframe.deleteRule("100%");
+        assert_equals(keyframe.cssRules.length, 3, "CSSKeyframesRule prefix attribute after deleteRule function");
+        assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
+        assert_equals(keyframe.cssRules[1].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
+        assert_equals(keyframe.cssRules[2].cssText, "0% { top: 50px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
+        assert_equals(keyframe.cssRules[3], undefined, "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
+
+        keyframe.deleteRule("80%");
+        assert_equals(keyframe.cssRules.length, 3, "CSSKeyframesRule prefix attribute after deleteRule function");
+        assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
+        assert_equals(keyframe.cssRules[1].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
+        assert_equals(keyframe.cssRules[2].cssText, "0% { top: 50px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
+        assert_equals(keyframe.cssRules[3], undefined, "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
+    });
+    </script>
+</head>
+</html>
diff --git a/tests/wpt/web-platform-tests/cssom/CSSNamespaceRule.html b/tests/wpt/web-platform-tests/cssom/CSSNamespaceRule.html
new file mode 100644
index 00000000000..64ed94b6e7f
--- /dev/null
+++ b/tests/wpt/web-platform-tests/cssom/CSSNamespaceRule.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSSOM - CSSNamespaceRule interface</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+        @namespace svg url(http://servo);
+        @namespace url(http://servo1);
+        @namespace svg url("http://servo2");
+    </style>
+
+    <script>
+    test(function () {
+        var rules = document.styleSheets[0].cssRules;
+        assert_equals(rules[0].prefix, "svg", "CSSNamespaceRule prefix attribute");
+        assert_equals(rules[0].namespaceURI, "http://servo", "CSSNamespaceRule namespaceURI attribute");
+        assert_equals(rules[0].cssText, "@namespace svg url(\"http://servo\");", "CSSNamespaceRule cssText attribute");
+
+        assert_equals(rules[1].prefix, "", "CSSNamespaceRule prefix attribute");
+        assert_equals(rules[1].namespaceURI, "http://servo1", "CSSNamespaceRule namespaceURI attribute");
+        assert_equals(rules[1].cssText, "@namespace url(\"http://servo1\");", "CSSNamespaceRule cssText attribute");
+
+        assert_equals(rules[2].prefix, "svg", "CSSNamespaceRule prefix attribute");
+        assert_equals(rules[2].namespaceURI, "http://servo2", "CSSNamespaceRule namespaceURI attribute");
+        assert_equals(rules[2].cssText, "@namespace svg url(\"http://servo2\");", "CSSNamespaceRule cssText attribute");
+    });
+    </script>
+</head>
+</html>
diff --git a/tests/wpt/web-platform-tests/cssom/CSSRuleList.html b/tests/wpt/web-platform-tests/cssom/CSSRuleList.html
new file mode 100644
index 00000000000..a394779617d
--- /dev/null
+++ b/tests/wpt/web-platform-tests/cssom/CSSRuleList.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSSOM - CSSRuleList interface</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+        body { width: 50%; }
+        #foo { height: 100px; }
+    </style>
+
+    <script>
+    test(function () {
+        var ruleList = document.styleSheets[0].cssRules;
+        assert_equals(ruleList.length, 2, "CSSRuleList length attribute");
+        assert_equals(ruleList[0].cssText, "body { width: 50%; }", "CSSRuleList indexed getter");
+        assert_equals(ruleList[1].cssText, "#foo { height: 100px; }", "CSSRuleList indexed getter");
+        assert_equals(ruleList[2], undefined, "CSSRuleList indexed getter");
+        assert_equals(ruleList.item(0).cssText, "body { width: 50%; }", "CSSRuleList item function");
+        assert_equals(ruleList.item(1).cssText, "#foo { height: 100px; }", "CSSRuleList item function");
+        assert_equals(ruleList.item(2), null, "CSSRuleList item function");
+    });
+    </script>
+</head>
+</html>
diff --git a/tests/wpt/web-platform-tests/cssom/CSSStyleSheet.html b/tests/wpt/web-platform-tests/cssom/CSSStyleSheet.html
new file mode 100644
index 00000000000..62ad133d5f6
--- /dev/null
+++ b/tests/wpt/web-platform-tests/cssom/CSSStyleSheet.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSSOM - CSSStyleSheet interface</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style id="my-stylesheet">
+        body { width: 50%; }
+        #foo { height: 100px; }
+    </style>
+
+    <script>
+    test(function () {
+        var styleSheet = document.styleSheets[0];
+        styleSheet.cssRules[0].randomProperty = 1;
+        styleSheet.cssRules[1].randomProperty = 2;
+
+        assert_equals(styleSheet, document.getElementById("my-stylesheet").sheet, "CSSStyleSheet and LinkStyle's sheet attribute");
+        assert_equals(styleSheet.cssRules.length, 2, "CSSStyleSheet cssRules attribute");
+        assert_equals(styleSheet.cssRules[0].cssText, "body { width: 50%; }", "CSSStyleSheet cssRules attribute");
+        assert_equals(styleSheet.cssRules[1].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute");
+        assert_equals(styleSheet.cssRules[2], undefined, "CSSStyleSheet cssRules attribute");
+
+        styleSheet.insertRule("#bar { margin: 10px; }", 1);
+        assert_equals(styleSheet.cssRules.length, 3, "CSSStyleSheet cssRules attribute after insertRule function");
+        assert_equals(styleSheet.cssRules[0].cssText, "body { width: 50%; }", "CSSStyleSheet cssRules attribute");
+        assert_equals(styleSheet.cssRules[1].cssText, "#bar { margin: 10px; }", "CSSStyleSheet cssRules attribute after insertRule function");
+        assert_equals(styleSheet.cssRules[2].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute after insertRule function");
+        assert_equals(styleSheet.cssRules[0].randomProperty, 1, "[SameObject] cssRules attribute after insertRule function");
+        assert_equals(styleSheet.cssRules[2].randomProperty, 2, "[SameObject] cssRules attribute after insertRule function");
+
+        styleSheet.deleteRule(1);
+        assert_equals(styleSheet.cssRules.length, 2, "CSSStyleSheet cssRules attribute after deleteRule function");
+        assert_equals(styleSheet.cssRules[0].cssText, "body { width: 50%; }", "CSSStyleSheet cssRules attribute after deleteRule function");
+        assert_equals(styleSheet.cssRules[1].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute after deleteRule function");
+        assert_equals(styleSheet.cssRules[2], undefined, "CSSStyleSheet cssRules attribute after deleteRule function");
+        assert_equals(styleSheet.cssRules[0].randomProperty, 1, "[SameObject] cssRules attribute after deleteRule function");
+        assert_equals(styleSheet.cssRules[1].randomProperty, 2, "[SameObject] cssRules attribute after deleteRule function");
+    });
+    </script>
+</head>
+</html>
diff --git a/tests/wpt/web-platform-tests/cssom/StyleSheetList.html b/tests/wpt/web-platform-tests/cssom/StyleSheetList.html
new file mode 100644
index 00000000000..358264009a4
--- /dev/null
+++ b/tests/wpt/web-platform-tests/cssom/StyleSheetList.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSSOM - StyleSheetList interface</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+        body { width: 50%; }
+    </style>
+    <style>
+        #foo { width: 10%; }
+        #bar { height: 100px; }
+    </style>
+    <script>
+    test(function () {
+        var styleSheets = document.styleSheets;
+        assert_equals(styleSheets.length, 2, "StyleSheetList length attribute");
+        assert_equals(styleSheets[0].cssRules.length, 1, "StyleSheetList indexed getter length attribute");
+        assert_equals(styleSheets[1].cssRules.length, 2, "StyleSheetList indexed getter length attribute");
+        assert_equals(styleSheets[2], undefined, "StyleSheetList indexed getter length attribute");
+        assert_equals(styleSheets.item(0).cssRules.length, 1, "StyleSheetList item function length attribute");
+        assert_equals(styleSheets.item(1).cssRules.length, 2, "StyleSheetList item function length attribute");
+        assert_equals(styleSheets.item(2), null, "StyleSheetList item function length attribute");
+
+        styleSheets[0].randomProperty = 1;
+        var style = document.createElement("style");
+        document.head.appendChild(style);
+        assert_equals(styleSheets[0].randomProperty, 1, "[SameObject] StyleSheetList");
+    });
+    </script>
+</head>
+</html>