summaryrefslogtreecommitdiffstats
path: root/dom/base/test/test_bug564863-2.xhtml
blob: c860a7f6d77805c7ebaa3ebfa394e56584544df5 (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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=564863
-->
<head>
  <title>Test for Bug 564863</title>
  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
<style>
* {
  color: rgb(0, 0, 0);
}
#xul_id {
  color: rgb(30, 30, 30);
}
</style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=564863">Mozilla Bug 564863</a>

<!-- DOM to muck around with for tests -->
<p id="root">
<xul:button id="xul_id" />
</p>

<pre id="test">
<script type="application/javascript">
<![CDATA[
SimpleTest.waitForExplicitFinish();

(async function runTests() {
  root = $('root');
  xul = root.children[0];

  var xul_cs = getComputedStyle(xul, "");

  function checkHasId(test) {
    // Check computed style first to avoid flushes from hiding problems
    checkHasIdNoGEBI(test);

    is($("xul_id"), xul, "xul getElementById " + test);
  }

  function checkHasIdNoGEBI(test) {
    const connected = test != "removed node";
    is(xul_cs.color, connected ? "rgb(30, 30, 30)" : "", "xul color " + test);

    is(xul.id, "xul_id", "xul id " + test);
  }

  function checkHasNoId(removed, test) {
    // XXX This fails for some reason when this is run as a Mochitest chrome, but
    // not when run as a Mochitest plain.
    //is(xul_cs.color, "rgb(0, 0, 0)", "xul color " + test);

    let attrValue = removed ? null : "";

    is(xul.id, "", "xul id " + test);

    is(xul.getAttribute("id"), attrValue, "xul getAttribute " + test);

    is($("xul_id"), null, "xul getElementById " + test);
  }

  // Check that dynamic modifications of attribute work

  checkHasId("in markup");

  xul.id = "";

  checkHasNoId(false, "set to empty");

  xul.id = "xul_id";

  checkHasId("set using .id");

  xul.setAttribute("id", "");

  checkHasNoId(false, "setAttribute to empty");

  xul.id = "xul_id";

  checkHasId("set again using .id");

  xul.removeAttribute("id");

  checkHasNoId(true, "removed attribute");

  xul.setAttribute("id", "xul_id");

  checkHasId("set using setAttribute");

  t3 = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "button");
  t3.id = "xul_id";

  // Check that inserting elements before/after existing work

  function insertAfter(newChild, existing) {
    existing.parentNode.insertBefore(newChild, existing.nextSibling);
  }
  function insertBefore(newChild, existing) {
    existing.parentNode.insertBefore(newChild, existing);
  }
  function removeNode(child) {
    child.remove();
  }

  insertAfter(t3, xul);

  checkHasId("inserted after");

  insertBefore(t3, xul);

  checkHasIdNoGEBI("inserted before");
  is($("xul_id"), t3, "xul getElementById inserted before");

  t3.removeAttribute("id");

  checkHasId("removed tx attribute");

  t3.setAttribute("id", "xul_id");

  checkHasIdNoGEBI("setAttribute before");
  is($("xul_id"), t3, "xul getElementById setAttribute before");

  removeNode(t3);

  checkHasId("removed temporaries");

  removeNode(xul);

  checkHasIdNoGEBI("removed node");

  // Re-add the id inside a mutation event on a XUL element
  is($("xul_id"), null, "no xul");
  xul = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "button");
  xul.id = "xul_id";
  root.appendChild(xul);
  is($("xul_id"), xul, "new xul is set up");
  let mutation;
  const observer = new MutationObserver((aMutationList, aObserver) => {
    mutation = aMutationList[0];
    aObserver.disconnect();
  });
  observer.observe(xul, { attributes: true });
  xul.removeAttribute("id");
  await new Promise(SimpleTest.executeSoon);
  if (mutation) {
    is(mutation.target, xul, "target is xul");
    is(xul.getAttribute("id"), null, "xul no longer has id attr");
    is(xul.id, "", "xul no longer has id");
    xul.id = "other_xul_id";
  } else {
    observer.disconnect();
    ok(false, "mutation should've occurred");
  }
  is($("xul_id"), null, "xul_id was removed from table");
  is($("other_xul_id"), xul, "other_xul_id was added");
  removeNode(xul);
  is($("other_xul_id"), null, "other_xul_id was removed");

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