summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_bug1203766.html
blob: 5d8152440bfa56c31ef61e366c4ee0a74555d439 (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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<meta charset=utf-8>
<title>Test for bug 1203766</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
<style>
.x { color: red; }
body > .x { color: green; }
.y { color: green; }
body > .y { display: none; color: red; }
div > .z { color: red; }
.z { color: green; }
.a { color: red; }
body > .a { display: none; color: green; }
.b { display: none; }
.c { color: red; }
.b > .c { color: green; }
.e { color: red; }
.d > .e { color: green; }
.f { color: red; }
.g { color: green; }
.h > .i { color: red; }
.j > .i { color: green; }
</style>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1203766">Mozilla Bug 1203766</a>
<p id="display"></p>
<div class=y></div>
<div class=b></div>
<pre id="test">
<script class="testbody">
SimpleTest.waitForExplicitFinish();

addLoadEvent(function() {

  // Element that goes from being out of the document to in the document.
  var e = document.createElement("div");
  e.className = "x";
  var cs = getComputedStyle(e);
  is(cs.color, "rgb(255, 0, 0)");
  document.body.appendChild(e);
  is(cs.color, "rgb(0, 128, 0)");

  // Element that goes from in the document (and display:none) to out of
  // the document.
  e = document.querySelector(".y");
  cs = getComputedStyle(e);
  is(cs.color, "rgb(255, 0, 0)");
  e.remove();
  is(cs.color, "rgb(0, 128, 0)");

  // Element that is removed from an out-of-document tree.
  e = document.createElement("div");
  f = document.createElement("span");
  f.className = "z";
  e.appendChild(f);
  cs = getComputedStyle(f);
  is(cs.color, "rgb(255, 0, 0)");
  f.remove();
  is(cs.color, "rgb(0, 128, 0)");

  // Element going from not in document to in document and display:none.
  e = document.createElement("div");
  e.className = "a";
  cs = getComputedStyle(e);
  is(cs.color, "rgb(255, 0, 0)");
  document.body.appendChild(e);
  is(cs.color, "rgb(0, 128, 0)");

  // Element going from not in document to in document and child of
  // display:none element.
  e = document.createElement("div");
  e.className = "c";
  cs = getComputedStyle(e);
  is(cs.color, "rgb(255, 0, 0)");
  document.querySelector(".b").appendChild(e);
  is(cs.color, "rgb(0, 128, 0)");

  // Element that is added to an out-of-document tree.
  e = document.createElement("div");
  e.className = "d";
  f = document.createElement("span");
  f.className = "e";
  cs = getComputedStyle(f);
  is(cs.color, "rgb(255, 0, 0)");
  e.appendChild(f);
  is(cs.color, "rgb(0, 128, 0)");

  // Element that is outside the document when an attribute is modified to
  // cause a different rule to match.
  e = document.createElement("div");
  e.className = "f";
  cs = getComputedStyle(e);
  is(cs.color, "rgb(255, 0, 0)");
  e.className = "g";
  is(cs.color, "rgb(0, 128, 0)");

  // Element that is outside the document when an ancestor is modified to
  // cause a different rule to match.
  e = document.createElement("div");
  e.className = "h";
  f = document.createElement("span");
  f.className = "i";
  e.appendChild(f);
  cs = getComputedStyle(f);
  is(cs.color, "rgb(255, 0, 0)");
  e.className = "j";
  is(cs.color, "rgb(0, 128, 0)");

  SimpleTest.finish();
});
</script>
</pre>