diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js new file mode 100644 index 0000000000..051fc14e53 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js @@ -0,0 +1,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 + ); +} |