diff -r 000000000000 -r 6474c204b198 browser/devtools/styleinspector/test/browser_ruleview_content.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/devtools/styleinspector/test/browser_ruleview_content.js	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,43 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the rule-view content
+
+let test = asyncTest(function*() {
+  yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js");
+  let {toolbox, inspector, view} = yield openRuleView();
+
+  info("Creating the test document");
+  let style = "" +
+    "#testid {" +
+    "  background-color: blue;" +
+    "}" +
+    ".testclass, .unmatched {" +
+    "  background-color: green;" +
+    "}";
+  let styleNode = addStyle(content.document, style);
+  content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" +
+                                    "<div id='testid2'>Styled Node</div>";
+
+  yield testContentAfterNodeSelection(inspector, view);
+});
+
+function* testContentAfterNodeSelection(inspector, ruleView) {
+  yield selectNode("#testid", inspector);
+  is(ruleView.element.querySelectorAll("#noResults").length, 0,
+    "After a highlight, no longer has a no-results element.");
+
+  yield clearCurrentNodeSelection(inspector)
+  is(ruleView.element.querySelectorAll("#noResults").length, 1,
+    "After highlighting null, has a no-results element again.");
+
+  yield selectNode("#testid", inspector);
+  let classEditor = ruleView.element.children[2]._ruleEditor;
+  is(classEditor.selectorText.querySelector(".ruleview-selector-matched").textContent,
+    ".testclass", ".textclass should be matched.");
+  is(classEditor.selectorText.querySelector(".ruleview-selector-unmatched").textContent,
+    ".unmatched", ".unmatched should not be matched.");
+}