test_selectormatcheselement.html

Enable keyboard shortcuts

<!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>