Auto merge of #7288 - mdibaiee:computedstyle-element, r=Ms2ger

Fix #7268 - getComputedStyle should take `Element`, not `HTMLElement`

This is my first patch, I hope I'm doing it right.

About the test, do you think this is enough and reliable?

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7288)
<!-- Reviewable:end -->

components/script/dom/cssstyledeclaration.rs

@@ -9,8 +9,7 @@ use dom::bindings::global::GlobalRef;
 use dom::bindings::js::{JS, Root};
 use dom::bindings::utils::{Reflector, reflect_dom_object};
 use dom::document::DocumentHelpers;
-use dom::element::{ElementHelpers, StylePriority};
+use dom::element::{ElementHelpers, StylePriority, Element};
-use dom::htmlelement::HTMLElement;
 use dom::node::{window_from_node, document_from_node, NodeDamage, NodeHelpers};
 use dom::window::{Window, WindowHelpers};
 use selectors::parser::PseudoElement;
@@ -28,7 +27,7 @@ use std::cell::Ref;
 #[derive(HeapSizeOf)]
 pub struct CSSStyleDeclaration {
     reflector_: Reflector,
-    owner: JS<HTMLElement>,
+    owner: JS<Element>,
     readonly: bool,
     pseudo: Option<PseudoElement>,
 }
@@ -59,7 +58,7 @@ fn serialize_list(list: &[Ref<PropertyDeclaration>]) -> DOMString {
 }
 
 impl CSSStyleDeclaration {
-    pub fn new_inherited(owner: &HTMLElement,
+    pub fn new_inherited(owner: &Element,
                          pseudo: Option<PseudoElement>,
                          modification_access: CSSModificationAccess) -> CSSStyleDeclaration {
         CSSStyleDeclaration {
@@ -70,7 +69,7 @@ impl CSSStyleDeclaration {
         }
     }
 
-    pub fn new(global: &Window, owner: &HTMLElement,
+    pub fn new(global: &Window, owner: &Element,
                pseudo: Option<PseudoElement>,
                modification_access: CSSModificationAccess) -> Root<CSSStyleDeclaration> {
         reflect_dom_object(box CSSStyleDeclaration::new_inherited(owner, pseudo, modification_access),
@@ -84,7 +83,7 @@ trait PrivateCSSStyleDeclarationHelpers {
     fn get_important_declaration(&self, property: &Atom) -> Option<Ref<PropertyDeclaration>>;
 }
 
-impl PrivateCSSStyleDeclarationHelpers for HTMLElement {
+impl PrivateCSSStyleDeclarationHelpers for Element {
     fn get_declaration(&self, property: &Atom) -> Option<Ref<PropertyDeclaration>> {
         let element = ElementCast::from_ref(self);
         element.get_inline_style_declaration(property)

components/script/dom/htmlelement.rs

@@ -136,7 +136,7 @@ impl<'a> HTMLElementMethods for &'a HTMLElement {
     fn Style(self) -> Root<CSSStyleDeclaration> {
         self.style_decl.or_init(|| {
             let global = window_from_node(self);
-            CSSStyleDeclaration::new(global.r(), self, None, CSSModificationAccess::ReadWrite)
+            CSSStyleDeclaration::new(global.r(), ElementCast::from_ref(self), None, CSSModificationAccess::ReadWrite)
         })
     }
 
@@ -458,4 +458,3 @@ impl PartialEq for HTMLElementTypeId {
         }
     }
 }
-

components/script/dom/webidls/Window.webidl

@@ -95,9 +95,8 @@ partial interface Window {
 
 // https://drafts.csswg.org/cssom/#extensions-to-the-window-interface
 partial interface Window {
-   //CSSStyleDeclaration getComputedStyle(Element elt, optional DOMString? pseudoElt);
    [NewObject]
-   CSSStyleDeclaration getComputedStyle(HTMLElement elt, optional DOMString pseudoElt);
+   CSSStyleDeclaration getComputedStyle(Element elt, optional DOMString pseudoElt);
 };
 
 // http://dev.w3.org/csswg/cssom-view/#extensions-to-the-window-interface

components/script/dom/window.rs

@@ -24,7 +24,6 @@ use dom::cssstyledeclaration::{CSSModificationAccess, CSSStyleDeclaration};
 use dom::document::{Document, DocumentHelpers};
 use dom::element::Element;
 use dom::eventtarget::{EventTarget, EventTargetHelpers, EventTargetTypeId};
-use dom::htmlelement::HTMLElement;
 use dom::location::Location;
 use dom::navigator::Navigator;
 use dom::node::{window_from_node, TrustedNodeAddress, NodeHelpers, from_untrusted_node_address};
@@ -576,7 +575,7 @@ impl<'a> WindowMethods for &'a Window {
 
     // https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle
     fn GetComputedStyle(self,
-                        element: &HTMLElement,
+                        element: &Element,
                         pseudo: Option<DOMString>) -> Root<CSSStyleDeclaration> {
         // Steps 1-4.
         let pseudo = match pseudo.map(|s| s.to_ascii_lowercase()) {

tests/wpt/metadata/MANIFEST.json

@@ -29097,7 +29097,14 @@
     ]
   },
   "local_changes": {
-    "deleted": [],
+    "deleted": [
+      "shadow-dom/shadow-trees/hosting-multiple-shadow-trees-002.html",
+      "shadow-dom/shadow-trees/hosting-multiple-shadow-trees-006.html",
+      "shadow-dom/shadow-trees/hosting-multiple-shadow-trees-004.html",
+      "shadow-dom/shadow-trees/hosting-multiple-shadow-trees-003.html",
+      "2dcontext/transformations/canvas_transformations_reset_001.htm",
+      "shadow-dom/shadow-trees/hosting-multiple-shadow-trees-005.html"
+    ],
     "items": {},
     "reftest_nodes": {}
   },

tests/wpt/mozilla/meta/MANIFEST.json

@@ -485,6 +485,12 @@
             "url": "/_mozilla/mozilla/element_className.html"
           }
         ],
+        "mozilla/element_getcomputedstyle.html": [
+          {
+            "path": "mozilla/element_getcomputedstyle.html",
+            "url": "/_mozilla/mozilla/element_getcomputedstyle.html"
+          }
+        ],
         "mozilla/element_matches.html": [
           {
             "path": "mozilla/element_matches.html",

tests/wpt/mozilla/tests/mozilla/element_getcomputedstyle.html

@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <script>
+      // Issue #7268 - getComputedStyle should work on non-HTML elements, too
+      test(function() {
+        var el = document.createElementNS("http://example.com", "a");
+        document.body.appendChild(el);
+        var style = window.getComputedStyle(el);
+
+        assert_equals(style.opacity, "1");
+      }, "getComputedStyle should work on non-HTML elements");
+    </script>
+  </body>
+</html>