summaryrefslogtreecommitdiffstats
path: root/layout/inspector/tests/test_selectormatcheselement.html
blob: 31c36918dcda3cec0db976fc5ca2934add8aa835 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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>