1 files changed, 89 insertions, 0 deletions
diff --git a/layout/inspector/tests/test_selectormatcheselement.html b/layout/inspector/tests/test_selectormatcheselement.html
new file mode 100644
index 0000000000..31c36918dc
--- /dev/null
+++ b/layout/inspector/tests/test_selectormatcheselement.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1037519
+-->
+<head>
+  <title>Test for nsIDOMUtils::selectorMatchesElement</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+    #foo,
+    #bar,
+    #foo::before {
+      color: red;
+    }
+    #foo::before,
+    #bar::before {
+      content: 'foo-before';
+      color: green;
+    }
+    #foo::after,
+    #bar::after {
+      content: 'foo-after';
+      color: blue;
+    }
+    #foo::first-line,
+    #bar::first-line {
+      text-decoration: underline;
+    }
+    #foo::first-letter,
+    #bar::first-letter {
+      font-variant: small-caps;
+    }
+  </style>
+</head>
+<body>
+<div id="foo">foo content</div>
+<pre id="test">
+<script type="application/javascript">
+
+const InspectorUtils = SpecialPowers.InspectorUtils;
+
+function do_test() {
+  var element = document.querySelector("#foo");
+
+  var elementRules = InspectorUtils.getCSSStyleRules(element);
+  var elementRule = elementRules[elementRules.length - 1];
+
+  is (InspectorUtils.selectorMatchesElement(element, elementRule, 0), true,
+    "Matches #foo");
+  is (InspectorUtils.selectorMatchesElement(element, elementRule, 1), false,
+    "Doesn't match #bar");
+  is (InspectorUtils.selectorMatchesElement(element, elementRule, 0, ":bogus"), false,
+    "Doesn't match #foo with a bogus pseudo");
+  is (InspectorUtils.selectorMatchesElement(element, elementRule, 2, ":bogus"), false,
+    "Doesn't match #foo::before with bogus pseudo");
+  is (InspectorUtils.selectorMatchesElement(element, elementRule, 0, ":after"), false,
+    "Does match #foo::before with the :after pseudo");
+
+  checkPseudo(":before");
+  checkPseudo(":after");
+  checkPseudo(":first-letter");
+  checkPseudo(":first-line");
+
+  SimpleTest.finish();
+
+  function checkPseudo(pseudo) {
+    var rules = InspectorUtils.getCSSStyleRules(element, pseudo);
+    var rule = rules[rules.length - 1];
+
+    is (InspectorUtils.selectorMatchesElement(element, rule, 0), false,
+      "Doesn't match without " + pseudo);
+    is (InspectorUtils.selectorMatchesElement(element, rule, 1), false,
+      "Doesn't match without " + pseudo);
+
+    is (InspectorUtils.selectorMatchesElement(element, rule, 0, pseudo), true,
+      "Matches on #foo" + pseudo);
+    is (InspectorUtils.selectorMatchesElement(element, rule, 1, pseudo), false,
+      "Doesn't match on #bar" + pseudo);
+  }
+}
+
+SimpleTest.waitForExplicitFinish();
+addLoadEvent(do_test);
+
+</script>
+</pre>
+</body>
+</html>