1 files changed, 101 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..b996b241c8
--- /dev/null
+++ b/layout/inspector/tests/test_selectormatcheselement.html
@@ -0,0 +1,101 @@
+<!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 {
+      div& {
+        outline: 1px solid gold;
+      }
+    }
+
+    #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 multiSelectorRule = elementRules[2];
+  is(multiSelectorRule.selectorText, `#foo, #bar, #foo::before`, "Got expected multi-selector rule");
+  is (multiSelectorRule.selectorMatchesElement(0, element), true,
+    "Matches #foo");
+  is (multiSelectorRule.selectorMatchesElement(1, element), false,
+    "Doesn't match #bar");
+  is (multiSelectorRule.selectorMatchesElement(0, element, ":bogus"), false,
+    "Doesn't match #foo with a bogus pseudo");
+  is (multiSelectorRule.selectorMatchesElement(2, element, ":bogus"), false,
+    "Doesn't match #foo::before with bogus pseudo");
+  is (multiSelectorRule.selectorMatchesElement(0, element, ":after"), false,
+    "Does match #foo::before with the :after pseudo");
+
+  var nestedRule = elementRules[4];
+  is(nestedRule.selectorText, `div&`, "Got expected nested rule");
+  is (nestedRule.selectorMatchesElement(0, element), true, "Matches div&");
+
+  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 (rule.selectorMatchesElement(0, element), false,
+      "Doesn't match without " + pseudo);
+    is (rule.selectorMatchesElement(1, element), false,
+      "Doesn't match without " + pseudo);
+
+    is (rule.selectorMatchesElement(0, element, pseudo), true,
+      "Matches on #foo" + pseudo);
+    is (rule.selectorMatchesElement(1, element, pseudo), false,
+      "Doesn't match on #bar" + pseudo);
+  }
+}
+
+SimpleTest.waitForExplicitFinish();
+addLoadEvent(do_test);
+
+</script>
+</pre>
+</body>
+</html>