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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the list of grids does refresh when targets are added or removed (e.g. when
// there's a navigation and iframe are added or removed)
add_task(async function () {
await addTab(getDocumentBuilderUrl("example.com", "top-level-com-grid"));
const { gridInspector } = await openLayoutView();
const { document: doc } = gridInspector;
const checkGridList = (expected, assertionMessage) =>
checkGridListItems(doc, expected, assertionMessage);
checkGridList(
["div#top-level-com-grid"],
"One grid item is displayed at first"
);
info(
"Check that adding same-origin iframe with a grid will update the grid list"
);
const sameOriginIframeBrowsingContext = await SpecialPowers.spawn(
gBrowser.selectedBrowser,
[getDocumentBuilderUrl("example.com", "iframe-com-grid")],
src => {
const iframe = content.document.createElement("iframe");
iframe.id = "same-origin";
iframe.src = src;
content.document.body.append(iframe);
return iframe.browsingContext;
}
);
await waitFor(() => getGridListItems(doc).length == 2);
checkGridList(
["div#top-level-com-grid", "div#iframe-com-grid"],
"The same-origin iframe grid is displayed"
);
info("Check that adding remote iframe with a grid will update the grid list");
const remoteIframeBrowsingContext = await SpecialPowers.spawn(
gBrowser.selectedBrowser,
[getDocumentBuilderUrl("example.org", "iframe-org-grid")],
src => {
const iframe = content.document.createElement("iframe");
iframe.id = "remote";
iframe.src = src;
content.document.body.append(iframe);
return iframe.browsingContext;
}
);
await waitFor(() => getGridListItems(doc).length == 3);
checkGridList(
["div#top-level-com-grid", "div#iframe-com-grid", "div#iframe-org-grid"],
"The remote iframe grid is displayed"
);
info("Check that adding new grids in iframes does update the grid list");
SpecialPowers.spawn(sameOriginIframeBrowsingContext, [], () => {
const section = content.document.createElement("section");
section.id = "com-added-grid-container";
section.style = "display: grid;";
content.document.body.append(section);
});
await waitFor(() => getGridListItems(doc).length == 4);
checkGridList(
[
"div#top-level-com-grid",
"div#iframe-com-grid",
"section#com-added-grid-container",
"div#iframe-org-grid",
],
"The new grid in the same origin iframe is displayed"
);
SpecialPowers.spawn(remoteIframeBrowsingContext, [], () => {
const section = content.document.createElement("section");
section.id = "org-added-grid-container";
section.style = "display: grid;";
content.document.body.append(section);
});
await waitFor(() => getGridListItems(doc).length == 5);
checkGridList(
[
"div#top-level-com-grid",
"div#iframe-com-grid",
"section#com-added-grid-container",
"div#iframe-org-grid",
"section#org-added-grid-container",
],
"The new grid in the same origin iframe is displayed"
);
info("Check that removing iframes will update the grid list");
SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
content.document.querySelector("iframe#same-origin").remove();
});
await waitFor(() => getGridListItems(doc).length == 3);
checkGridList(
[
"div#top-level-com-grid",
"div#iframe-org-grid",
"section#org-added-grid-container",
],
"The same-origin iframe grids were removed from the list"
);
SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
content.document.querySelector("iframe#remote").remove();
});
await waitFor(() => getGridListItems(doc).length == 1);
checkGridList(
["div#top-level-com-grid"],
"The remote iframe grids were removed as well"
);
info("Navigate to a new origin");
await navigateTo(getDocumentBuilderUrl("example.org", "top-level-org-grid"));
await waitFor(() => {
const listItems = getGridListItems(doc);
return (
listItems.length == 1 &&
listItems[0].textContent.includes("#top-level-org-grid")
);
});
checkGridList(
["div#top-level-org-grid"],
"The grid from the new origin document is displayed"
);
info("Check that adding remote iframe will still update the grid list");
SpecialPowers.spawn(
gBrowser.selectedBrowser,
[getDocumentBuilderUrl("example.com", "iframe-com-grid-remote")],
src => {
const iframe = content.document.createElement("iframe");
iframe.id = "remote";
iframe.src = src;
content.document.body.append(iframe);
}
);
await waitFor(() => getGridListItems(doc).length == 2);
checkGridList(
["div#top-level-org-grid", "div#iframe-com-grid-remote"],
"The grid from the new origin document is displayed"
);
info(
"Check that adding same-origin iframe with a grid will update the grid list"
);
SpecialPowers.spawn(
gBrowser.selectedBrowser,
[getDocumentBuilderUrl("example.org", "iframe-org-grid-same-origin")],
src => {
const iframe = content.document.createElement("iframe");
iframe.id = "same-origin";
iframe.src = src;
content.document.body.append(iframe);
}
);
await waitFor(() => getGridListItems(doc).length == 3);
checkGridList(
[
"div#top-level-org-grid",
"div#iframe-com-grid-remote",
"div#iframe-org-grid-same-origin",
],
"The grid from the new same-origin iframe is displayed"
);
});
function getDocumentBuilderUrl(origin, gridContainerId) {
return `https://${origin}/document-builder.sjs?html=${encodeURIComponent(
`<style>
#${gridContainerId} {
display: grid;
}
</style>
<div id="${gridContainerId}"></div>`
)}`;
}
function getGridListItems(doc) {
return Array.from(doc.querySelectorAll("#grid-list .objectBox-node"));
}
function checkGridListItems(doc, expectedItems, assertionText) {
const gridItems = getGridListItems(doc).map(el => el.textContent);
is(
JSON.stringify(gridItems.sort()),
JSON.stringify(expectedItems.sort()),
assertionText
);
}
|
