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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that nodes are marked as displayed and not-displayed dynamically, when
// their display changes
const TEST_URL = URL_ROOT + "doc_markup_not_displayed.html";
const TEST_DATA = [
{
desc: "Hiding a node by creating a new stylesheet",
selector: "#normal-div",
before: true,
changeStyle: () => {
const div = content.document.createElement("div");
div.id = "new-style";
div.innerHTML = "<style>#normal-div {display:none;}</style>";
content.document.body.appendChild(div);
},
after: false,
},
{
desc: "Showing a node by deleting an existing stylesheet",
selector: "#normal-div",
before: false,
changeStyle: () => content.document.getElementById("new-style").remove(),
after: true,
},
{
desc: "Hiding a node by changing its style property",
selector: "#display-none",
before: false,
changeStyle: () => {
const node = content.document.querySelector("#display-none");
node.style.display = "block";
},
after: true,
},
{
desc: "Showing a node by removing its hidden attribute",
selector: "#hidden-true",
before: false,
changeStyle: () =>
content.document.querySelector("#hidden-true").removeAttribute("hidden"),
after: true,
},
{
desc: "Hiding a node by adding a hidden attribute",
selector: "#hidden-true",
before: true,
changeStyle: () =>
content.document
.querySelector("#hidden-true")
.setAttribute("hidden", true),
after: false,
},
{
desc: "Showing a node by changin a stylesheet's rule",
selector: "#hidden-via-stylesheet",
before: false,
changeStyle: () => {
content.document.styleSheets[0].cssRules[0].style.setProperty(
"display",
"inline"
);
},
after: true,
},
{
desc: "Hiding a node by adding a new rule to a stylesheet",
selector: "#hidden-via-stylesheet",
before: true,
changeStyle: () => {
content.document.styleSheets[0].insertRule(
"#hidden-via-stylesheet {display: none;}",
1
);
},
after: false,
},
{
desc: "Hiding a node by adding a class that matches an existing rule",
selector: "#normal-div",
before: true,
changeStyle: () => {
content.document.styleSheets[0].insertRule(
".a-new-class {display: none;}",
2
);
content.document
.querySelector("#normal-div")
.classList.add("a-new-class");
},
after: false,
},
];
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
for (const data of TEST_DATA) {
info("Running test case: " + data.desc);
await runTestData(inspector, data);
}
});
async function runTestData(
inspector,
{ selector, before, changeStyle, after }
) {
info("Getting the " + selector + " test node");
const nodeFront = await getNodeFront(selector, inspector);
const container = getContainerForNodeFront(nodeFront, inspector);
is(
!container.elt.classList.contains("not-displayed"),
before,
"The container is marked as " + (before ? "shown" : "hidden")
);
info("Listening for the display-change event");
const onDisplayChanged = new Promise(resolve => {
inspector.markup.walker.once("display-change", resolve);
});
info("Making style changes");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], changeStyle);
const nodes = await onDisplayChanged;
info("Verifying that the list of changed nodes include our container");
ok(nodes.length, "The display-change event was received with a nodes");
let foundContainer = false;
for (const node of nodes) {
if (getContainerForNodeFront(node, inspector) === container) {
foundContainer = true;
break;
}
}
ok(foundContainer, "Container is part of the list of changed nodes");
is(
!container.elt.classList.contains("not-displayed"),
after,
"The container is marked as " + (after ? "shown" : "hidden")
);
}
|
