tor-browser

browser_grids_grid-list-on-target-added-removed.js (6267B)

---

/* 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
 );
}