Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Errors
- This test failed 1 times in the preceding 30 days. quicksearch this test
- Manifest: devtools/client/inspector/grids/test/browser.toml
/* Any copyright is dedicated to the Public Domain.
"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) {
`<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
);
}