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
|
/* vim: set ts=2 et sw=2 tw=80: */
/* 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: function* (testActor) {
yield testActor.eval(`
let 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: function* (testActor) {
yield testActor.eval(`
content.document.getElementById("new-style").remove();
`);
},
after: true
},
{
desc: "Hiding a node by changing its style property",
selector: "#display-none",
before: false,
changeStyle: function* (testActor) {
yield testActor.eval(`
let 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: function* (testActor) {
yield testActor.eval(`
content.document.querySelector("#hidden-true")
.removeAttribute("hidden");
`);
},
after: true
},
{
desc: "Hiding a node by adding a hidden attribute",
selector: "#hidden-true",
before: true,
changeStyle: function* (testActor) {
yield testActor.setAttribute("#hidden-true", "hidden", "true");
},
after: false
},
{
desc: "Showing a node by changin a stylesheet's rule",
selector: "#hidden-via-stylesheet",
before: false,
changeStyle: function* (testActor) {
yield testActor.eval(`
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: function* (testActor) {
yield testActor.eval(`
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: function* (testActor) {
yield testActor.eval(`
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(function* () {
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
for (let data of TEST_DATA) {
info("Running test case: " + data.desc);
yield runTestData(inspector, testActor, data);
}
});
function* runTestData(inspector, testActor,
{selector, before, changeStyle, after}) {
info("Getting the " + selector + " test node");
let nodeFront = yield getNodeFront(selector, inspector);
let 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");
let onDisplayChanged = defer();
inspector.markup.walker.once("display-change", onDisplayChanged.resolve);
info("Making style changes");
yield changeStyle(testActor);
let nodes = yield onDisplayChanged.promise;
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 (let 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"));
}
|
