Implement <hr> 'color' attribute

components/script/dom/element.rs

@@ -40,6 +40,7 @@ use dom::htmlbodyelement::HTMLBodyElement;
 use dom::htmlcollection::HTMLCollection;
 use dom::htmlfieldsetelement::HTMLFieldSetElement;
 use dom::htmlfontelement::HTMLFontElement;
+use dom::htmlhrelement::{HTMLHRElement, HTMLHRLayoutHelpers};
 use dom::htmliframeelement::HTMLIFrameElement;
 use dom::htmlinputelement::{HTMLInputElement, LayoutHTMLInputElementHelpers};
 use dom::htmllabelelement::HTMLLabelElement;
@@ -309,6 +310,9 @@ impl LayoutElementHelpers for LayoutJS<Element> {
         } else if let Some(this) = self.downcast::<HTMLBodyElement>() {
             // https://html.spec.whatwg.org/multipage/#the-page:the-body-element-20
             (*this.unsafe_get()).get_color()
+        } else if let Some(this) = self.downcast::<HTMLHRElement>() {
+            // https://html.spec.whatwg.org/multipage/#the-hr-element-2:presentational-hints-5
+            this.get_color()
         } else {
             None
         };

components/script/dom/htmlhrelement.rs

@@ -2,11 +2,17 @@
  * 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::HTMLHRElementBinding;
+use cssparser::RGBA;
-use dom::bindings::js::Root;
+use dom::attr::AttrValue;
+use dom::bindings::codegen::Bindings::HTMLHRElementBinding::{self, HTMLHRElementMethods};
+use dom::bindings::inheritance::Castable;
+use dom::bindings::js::{LayoutJS, Root};
 use dom::document::Document;
+use dom::element::{Element, RawLayoutElementHelpers};
 use dom::htmlelement::HTMLElement;
 use dom::node::Node;
+use dom::virtualmethods::VirtualMethods;
+use string_cache::Atom;
 use util::str::DOMString;
 
 #[dom_struct]
@@ -29,3 +35,44 @@ impl HTMLHRElement {
         Node::reflect_node(box element, document, HTMLHRElementBinding::Wrap)
     }
 }
+
+impl HTMLHRElementMethods for HTMLHRElement {
+    // https://html.spec.whatwg.org/multipage/#dom-hr-color
+    make_getter!(Color);
+
+    // https://html.spec.whatwg.org/multipage/#dom-hr-color
+    fn SetColor(&self, value: DOMString) {
+        self.upcast::<Element>()
+            .set_attribute(&atom!("color"), AttrValue::from_legacy_color(value));
+    }
+}
+
+pub trait HTMLHRLayoutHelpers {
+    fn get_color(&self) -> Option<RGBA>;
+}
+
+impl HTMLHRLayoutHelpers for LayoutJS<HTMLHRElement> {
+    #[allow(unsafe_code)]
+    fn get_color(&self) -> Option<RGBA> {
+        unsafe {
+            (&*self.upcast::<Element>().unsafe_get())
+                .get_attr_for_layout(&ns!(""), &atom!("color"))
+                .and_then(AttrValue::as_color)
+                .cloned()
+        }
+    }
+}
+
+
+impl VirtualMethods for HTMLHRElement {
+    fn super_type(&self) -> Option<&VirtualMethods> {
+        Some(self.upcast::<HTMLElement>() as &VirtualMethods)
+    }
+
+    fn parse_plain_attribute(&self, name: &Atom, value: DOMString) -> AttrValue {
+        match name {
+            &atom!("color") => AttrValue::from_legacy_color(value),
+            _ => self.super_type().unwrap().parse_plain_attribute(name, value),
+        }
+    }
+}

components/script/dom/virtualmethods.rs

@@ -22,6 +22,7 @@ use dom::htmlfieldsetelement::HTMLFieldSetElement;
 use dom::htmlfontelement::HTMLFontElement;
 use dom::htmlformelement::HTMLFormElement;
 use dom::htmlheadelement::HTMLHeadElement;
+use dom::htmlhrelement::HTMLHRElement;
 use dom::htmliframeelement::HTMLIFrameElement;
 use dom::htmlimageelement::HTMLImageElement;
 use dom::htmlinputelement::HTMLInputElement;
@@ -156,6 +157,9 @@ pub fn vtable_for(node: &Node) -> &VirtualMethods {
         NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLHeadElement)) => {
             node.downcast::<HTMLHeadElement>().unwrap() as &VirtualMethods
         }
+        NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLHRElement)) => {
+            node.downcast::<HTMLHRElement>().unwrap() as &VirtualMethods
+        }
         NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLImageElement)) => {
             node.downcast::<HTMLImageElement>().unwrap() as &VirtualMethods
         }

components/script/dom/webidls/HTMLHRElement.webidl

@@ -11,7 +11,7 @@ interface HTMLHRElement : HTMLElement {
 // https://html.spec.whatwg.org/multipage/#HTMLHRElement-partial
 partial interface HTMLHRElement {
   //         attribute DOMString align;
-  //         attribute DOMString color;
+  attribute DOMString color;
   //         attribute boolean noShade;
   //         attribute DOMString size;
   //         attribute DOMString width;

tests/wpt/metadata/MANIFEST.json

@@ -4485,6 +4485,16 @@
         ],
         "url": "/html/rendering/non-replaced-elements/the-fieldset-element-0/min-width-not-important.html"
       },
+      {
+        "path": "html/rendering/non-replaced-elements/the-hr-element-0/color.html",
+        "references": [
+          [
+            "html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html",
+            "=="
+          ]
+        ],
+        "url": "/html/rendering/non-replaced-elements/the-hr-element-0/color.html"
+      },
       {
         "path": "html/rendering/non-replaced-elements/the-page/body_text_00ffff.xhtml",
         "references": [

tests/wpt/metadata/html/dom/interfaces.html.ini

@@ -2316,9 +2316,6 @@
   [HTMLHRElement interface: attribute align]
     expected: FAIL
 
-  [HTMLHRElement interface: attribute color]
-    expected: FAIL
-
   [HTMLHRElement interface: attribute noShade]
     expected: FAIL
 
@@ -2331,9 +2328,6 @@
   [HTMLHRElement interface: document.createElement("hr") must inherit property "align" with the proper type (0)]
     expected: FAIL
 
-  [HTMLHRElement interface: document.createElement("hr") must inherit property "color" with the proper type (1)]
-    expected: FAIL
-
   [HTMLHRElement interface: document.createElement("hr") must inherit property "noShade" with the proper type (2)]
     expected: FAIL
 

tests/wpt/metadata/html/dom/reflection-grouping.html.ini

@@ -1449,135 +1449,6 @@
   [hr.align: IDL set to object "test-valueOf" followed by IDL get]
     expected: FAIL
 
-  [hr.color: typeof IDL attribute]
-    expected: FAIL
-
-  [hr.color: IDL get with DOM attribute unset]
-    expected: FAIL
-
-  [hr.color: setAttribute() to "" followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to " \\0\\x01\\x02\\x03\\x04\\x05\\x06\\x07 \\b\\t\\n\\v\\f\\r\\x0e\\x0f \\x10\\x11\\x12\\x13\\x14\\x15\\x16\\x17 \\x18\\x19\\x1a\\x1b\\x1c\\x1d\\x1e\\x1f  foo " followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to undefined followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to 7 followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to 1.5 followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to true followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to false followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to object "[object Object\]" followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to NaN followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to Infinity followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to -Infinity followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to "\\0" followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to null followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to object "test-toString" followed by IDL get]
-    expected: FAIL
-
-  [hr.color: setAttribute() to object "test-valueOf" followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to "" followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to " \\0\\x01\\x02\\x03\\x04\\x05\\x06\\x07 \\b\\t\\n\\v\\f\\r\\x0e\\x0f \\x10\\x11\\x12\\x13\\x14\\x15\\x16\\x17 \\x18\\x19\\x1a\\x1b\\x1c\\x1d\\x1e\\x1f  foo " followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to undefined followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to undefined followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to 7 followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to 7 followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to 1.5 followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to 1.5 followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to true followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to true followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to false followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to false followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to object "[object Object\]" followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to object "[object Object\]" followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to NaN followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to NaN followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to Infinity followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to Infinity followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to -Infinity followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to -Infinity followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to "\\0" followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to null followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to null followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to object "test-toString" followed by getAttribute()]
-    expected: FAIL
-
-  [hr.color: IDL set to object "test-toString" followed by IDL get]
-    expected: FAIL
-
-  [hr.color: IDL set to object "test-valueOf" followed by IDL get]
-    expected: FAIL
-
   [hr.noShade: typeof IDL attribute]
     expected: FAIL
 

tests/wpt/web-platform-tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.hr {
+  color: gray;
+  border-style: inset;
+  border-width: 1px;
+  margin: 0.5em auto;
+}
+
+.green {
+  color: green;
+}
+
+.no-inset {
+  border-style: solid;
+}
+</style>
+<div class='hr'></div>
+<div class='hr no-inset'></div>
+<div class='hr no-inset'></div>
+<div class='hr green no-inset'></div>

tests/wpt/web-platform-tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html

@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<link rel=match href="color-ref.html">
+<hr>
+<hr color="">
+<hr color=transparent>
+<hr color=green>