tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_markup_display_node_01.js (2814B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that markup display node shows for only for grid and flex containers.
      7 
      8 const TEST_URI = `
      9  <style type="text/css">
     10    #grid {
     11      display: grid;
     12    }
     13    #subgrid {
     14      display: grid;
     15      grid: subgrid / subgrid;
     16    }
     17    #flex {
     18      display: flex;
     19    }
     20    #block {
     21      display: block;
     22    }
     23  </style>
     24  <div id="grid">
     25    <div id="subgrid"></div>
     26  </div>
     27  <div id="flex">Flex</div>
     28  <div id="block">Block</div>
     29  <span>HELLO WORLD</span>
     30 `;
     31 
     32 add_task(async function () {
     33  const { inspector } = await openInspectorForURL(
     34    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
     35  );
     36 
     37  info("Check the display node is shown and the value of #grid.");
     38  await selectNode("#grid", inspector);
     39  const gridContainer = await getContainerForSelector("#grid", inspector);
     40  const gridDisplayNode = gridContainer.elt.querySelector(
     41    ".inspector-badge.interactive[data-display]"
     42  );
     43  ok(gridDisplayNode, "#grid display node is shown.");
     44  is(
     45    gridDisplayNode.textContent,
     46    "grid",
     47    "Got the correct display type for #grid."
     48  );
     49 
     50  info("Check the display node is shown and the value of #subgrid.");
     51  await selectNode("#subgrid", inspector);
     52  const subgridContainer = await getContainerForSelector("#subgrid", inspector);
     53  const subgridDisplayNode = subgridContainer.elt.querySelector(
     54    ".inspector-badge[data-display]"
     55  );
     56  ok(subgridDisplayNode, "#subgrid display node is shown");
     57  is(
     58    subgridDisplayNode.textContent,
     59    "subgrid",
     60    "Got the correct display type for #subgrid"
     61  );
     62 
     63  info("Check the display node is shown and the value of #flex.");
     64  await selectNode("#flex", inspector);
     65  const flexContainer = await getContainerForSelector("#flex", inspector);
     66  const flexDisplayNode = flexContainer.elt.querySelector(
     67    ".inspector-badge.interactive[data-display]"
     68  );
     69  ok(flexDisplayNode, "#flex display node is shown.");
     70  is(
     71    flexDisplayNode.textContent,
     72    "flex",
     73    "Got the correct display type for #flex"
     74  );
     75 
     76  info("Check the display node is hidden for #block.");
     77  await selectNode("#block", inspector);
     78  const blockContainer = await getContainerForSelector("#block", inspector);
     79  const blockDisplayNode = blockContainer.elt.querySelector(
     80    ".inspector-badge.interactive[data-display]"
     81  );
     82  ok(!blockDisplayNode, "#block display node is hidden.");
     83 
     84  info("Check the display node is hidden for span.");
     85  await selectNode("span", inspector);
     86  const spanContainer = await getContainerForSelector("span", inspector);
     87  const spanDisplayNode = spanContainer.elt.querySelector(
     88    ".inspector-badge.interactive[data-display]"
     89  );
     90  ok(!spanDisplayNode, "span display node is hidden.");
     91 });