layout/inspector/tests/test_selectormatcheselement.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1037519
   5 -->
   6 <head>
   7   <title>Test for nsIDOMUtils::selectorMatchesElement</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  10   <style type="text/css">
  11     #foo,
  12     #bar,
  13     #foo::before {
  14       color: red;
  15     }
  16
  17     #foo {
  18       div& {
  19         outline: 1px solid gold;
  20       }
  21     }
  22
  23     #foo::before,
  24     #bar::before {
  25       content: 'foo-before';
  26       color: green;
  27     }
  28     #foo::after,
  29     #bar::after {
  30       content: 'foo-after';
  31       color: blue;
  32     }
  33     #foo::first-line,
  34     #bar::first-line {
  35       text-decoration: underline;
  36     }
  37     #foo::first-letter,
  38     #bar::first-letter {
  39       font-variant: small-caps;
  40     }
  41   </style>
  42 </head>
  43 <body>
  44 <div id="foo">foo content</div>
  45 <pre id="test">
  46 <script type="application/javascript">
  47
  48 const InspectorUtils = SpecialPowers.InspectorUtils;
  49
  50 function do_test() {
  51   var element = document.querySelector("#foo");
  52
  53   var elementRules = InspectorUtils.getMatchingCSSRules(element);
  54
  55   var multiSelectorRule = elementRules[2];
  56   is(multiSelectorRule.selectorText, `#foo, #bar, #foo::before`, "Got expected multi-selector rule");
  57   is (multiSelectorRule.selectorMatchesElement(0, element), true,
  58     "Matches #foo");
  59   is (multiSelectorRule.selectorMatchesElement(1, element), false,
  60     "Doesn't match #bar");
  61   is (multiSelectorRule.selectorMatchesElement(0, element, ":bogus"), false,
  62     "Doesn't match #foo with a bogus pseudo");
  63   is (multiSelectorRule.selectorMatchesElement(2, element, ":bogus"), false,
  64     "Doesn't match #foo::before with bogus pseudo");
  65   is (multiSelectorRule.selectorMatchesElement(0, element, ":after"), false,
  66     "Does match #foo::before with the :after pseudo");
  67
  68   var nestedRule = elementRules[4];
  69   is(nestedRule.selectorText, `div&`, "Got expected nested rule");
  70   is (nestedRule.selectorMatchesElement(0, element), true, "Matches div&");
  71
  72   checkPseudo(":before");
  73   checkPseudo(":after");
  74   checkPseudo(":first-letter");
  75   checkPseudo(":first-line");
  76
  77   SimpleTest.finish();
  78
  79   function checkPseudo(pseudo) {
  80     var rules = InspectorUtils.getMatchingCSSRules(element, pseudo);
  81     var rule = rules[rules.length - 1];
  82
  83     is (rule.selectorMatchesElement(0, element), false,
  84       "Doesn't match without " + pseudo);
  85     is (rule.selectorMatchesElement(1, element), false,
  86       "Doesn't match without " + pseudo);
  87
  88     is (rule.selectorMatchesElement(0, element, pseudo), true,
  89       "Matches on #foo" + pseudo);
  90     is (rule.selectorMatchesElement(1, element, pseudo), false,
  91       "Doesn't match on #bar" + pseudo);
  92   }
  93 }
  94
  95 SimpleTest.waitForExplicitFinish();
  96 addLoadEvent(do_test);
  97
  98 </script>
  99 </pre>
 100 </body>
 101 </html>