6 files changed, 50 insertions, 14 deletions
diff --git a/src/components/script/dom/bindings/codegen/Bindings.conf b/src/components/script/dom/bindings/codegen/Bindings.conf
index a002e893823..06d37863dbd 100644
--- a/src/components/script/dom/bindings/codegen/Bindings.conf
+++ b/src/components/script/dom/bindings/codegen/Bindings.conf
@@ -52,6 +52,7 @@ DOMInterfaces = {
 'Element': {
     'needsAbstract': [
         'attributes',
+        'className',
         'getBoundingClientRect',
         'getClientRects',
         'getElementsByClassName',
diff --git a/src/components/script/dom/element.rs b/src/components/script/dom/element.rs
index df9ecb20430..55cec200304 100644
--- a/src/components/script/dom/element.rs
+++ b/src/components/script/dom/element.rs
@@ -430,6 +430,16 @@ impl Element {
         self.set_string_attribute(abstract_self, "id", id);
     }
 
+    // http://dom.spec.whatwg.org/#dom-element-classname
+    pub fn ClassName(&self, _abstract_self: &JS<Element>) -> DOMString {
+        self.get_string_attribute("class")
+    }
+
+    // http://dom.spec.whatwg.org/#dom-element-classname
+    pub fn SetClassName(&mut self, abstract_self: &JS<Element>, class: DOMString) {
+        self.set_string_attribute(abstract_self, "class", class);
+    }
+
     // http://dom.spec.whatwg.org/#dom-element-attributes
     pub fn Attributes(&mut self, abstract_self: &JS<Element>) -> JS<AttrList> {
         match self.attr_list {
diff --git a/src/components/script/dom/htmlelement.rs b/src/components/script/dom/htmlelement.rs
index 8464d23aec0..f8a1cd96a9b 100644
--- a/src/components/script/dom/htmlelement.rs
+++ b/src/components/script/dom/htmlelement.rs
@@ -140,13 +140,6 @@ impl HTMLElement {
         Ok(())
     }
 
-    pub fn ClassName(&self) -> DOMString {
-        ~""
-    }
-
-    pub fn SetClassName(&self, _class: DOMString) {
-    }
-
     pub fn GetOffsetParent(&self) -> Option<JS<Element>> {
         None
     }
diff --git a/src/components/script/dom/webidls/Element.webidl b/src/components/script/dom/webidls/Element.webidl
index e26c9415d4a..2211fd5c887 100644
--- a/src/components/script/dom/webidls/Element.webidl
+++ b/src/components/script/dom/webidls/Element.webidl
@@ -28,10 +28,8 @@ interface Element : Node {
 
   [Pure]
            attribute DOMString id;
-/*
-  FIXME Bug 810677 Move className from HTMLElement to Element
+  [Pure]
            attribute DOMString className;
-*/
   /*[Constant]
     readonly attribute DOMTokenList? classList;*/
 
diff --git a/src/components/script/dom/webidls/HTMLElement.webidl b/src/components/script/dom/webidls/HTMLElement.webidl
index e0ce18aaff9..8f1315d011d 100644
--- a/src/components/script/dom/webidls/HTMLElement.webidl
+++ b/src/components/script/dom/webidls/HTMLElement.webidl
@@ -43,10 +43,6 @@ interface HTMLElement : Element {
   readonly attribute boolean isContentEditable;
   [SetterThrows, Pure]
            attribute boolean spellcheck;
-
-  // Mozilla specific stuff
-  // FIXME Bug 810677 Move className from HTMLElement to Element
-           attribute DOMString className;
 };
 
 // http://dev.w3.org/csswg/cssom-view/#extensions-to-the-htmlelement-interface
diff --git a/src/test/content/test_element_className.html b/src/test/content/test_element_className.html
new file mode 100644
index 00000000000..041b7af2576
--- /dev/null
+++ b/src/test/content/test_element_className.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="harness.js"></script>
+        <script>
+            let foo1 = document.getElementById("foo-1");
+            let foo2 = document.getElementById("foo-2");
+
+            foo1.className += " bar";
+            is(foo1.className, "foo bar");
+
+            let foo3 = document.createElement("div");
+            foo3.id = "foo-3";
+            foo3.className = "foo";
+            document.body.appendChild(foo3);
+            is(foo3, document.getElementById("foo-3"));
+
+            let collection = document.getElementsByClassName("foo");
+            is(collection.length, 2);
+            is(collection[0].id, foo1.id);
+            is(collection[1].id, foo3.id);
+
+            collection = document.getElementsByClassName("bar");
+            is(collection.length, 1);
+            is(collection[0].id, foo1.id);
+
+            collection = document.getElementsByClassName("baz");
+            is(collection.length, 1);
+            is(collection[0].id, foo2.id);
+
+            finish();
+        </script>
+    </head>
+    <body>
+        <div id="foo-1" class="foo"></div>
+        <div id="foo-2" class="baz"></div>
+    </body>
+</html>