summaryrefslogtreecommitdiffstats
path: root/layout/inspector/tests/chrome/test_visited_style.html
blob: 619e739959d539890f1f007955e8f1ed84bfa2da (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
<!DOCTYPE html>
<html>
<head>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<style>
#target:visited, div {
  color: lime;
}

#target:link, div {
  color: pink;
}
</style>
</head>
<body>
  <a href="test" id="target">test-target</a>

  <script>
  const VISITED_SELECTOR = "#target:visited";
  const LINK_SELECTOR = "#target:link";

  const TEST_DATA = [
    {
      description: "Test for visited style",
      isVisitedTest: true,
      validSelector: VISITED_SELECTOR,
      invalidSelector: LINK_SELECTOR,
    },
    {
      description: "Test for unvisited style",
      isVisitedTest: false,
      validSelector: LINK_SELECTOR,
      invalidSelector: VISITED_SELECTOR,
    },
  ];

  function start() {
    const target = document.getElementById("target");

    for (const { description, isVisitedTest,
                 validSelector, invalidSelector } of TEST_DATA) {
      info(description);

      const rules =
        InspectorUtils.getCSSStyleRules(target, undefined, isVisitedTest);
      ok(getRule(rules, validSelector),
         `Rule of ${validSelector} is in rules`);
      ok(!getRule(rules, invalidSelector),
         `Rule of ${invalidSelector} is not in rules`);

      const targetRule = getRule(rules, validSelector);
      const isTargetSelectorMatched = InspectorUtils.selectorMatchesElement(
        target, targetRule, 0, undefined, isVisitedTest
      );
      const isDivSelectorMatched = InspectorUtils.selectorMatchesElement(
        target, targetRule, 1, undefined, isVisitedTest
      );
      ok(isTargetSelectorMatched,
         `${validSelector} selector is matched for the rule`);
      ok(!isDivSelectorMatched,
         "div selector is not matched for the rule");
    }

    SimpleTest.finish();
  }

  function getRule(rules, selector) {
    for (const rule of rules) {
      if (rule.selectorText.startsWith(selector)) {
        return rule;
      }
    }
    return null;
  }

  SimpleTest.waitForExplicitFinish();
  document.addEventListener('DOMContentLoaded', start);
  </script>
</body>
</html>