tor-browser

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

browser_flexbox_grand_parent_flex.js (1479B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that a flex container is not shown as a flex item of its grandparent flex
      7 // container.
      8 
      9 const TEST_URI = `
     10 <style>
     11 .flex {
     12  display: flex;
     13 }
     14 </style>
     15 <div class="flex">
     16  <div>
     17    <div id="grandchild" class="flex">
     18      This is a flex item of a flex container.
     19      Its parent isn't a flex container, but its grandparent is.
     20    </div>
     21  </div>
     22 </div>
     23 `;
     24 
     25 add_task(async function () {
     26  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     27  const { inspector, flexboxInspector } = await openLayoutView();
     28  const { document: doc } = flexboxInspector;
     29 
     30  info("Select the flex container's grandchild.");
     31  const onFlexContainerHeaderRendered = waitForDOM(
     32    doc,
     33    ".flex-header-container-label"
     34  );
     35  await selectNode("#grandchild", inspector);
     36  await onFlexContainerHeaderRendered;
     37 
     38  info("Check that only the Flex Container accordion item is showing.");
     39  const flexPanes = doc.querySelectorAll(".flex-accordion");
     40  is(
     41    flexPanes.length,
     42    1,
     43    "There should only be one flex accordion item showing."
     44  );
     45 
     46  info("Check that the container header shows Flex Container.");
     47  const flexAccordionHeader = flexPanes[0].querySelector(
     48    ".accordion-header-label"
     49  );
     50  is(
     51    flexAccordionHeader.textContent,
     52    "Flex Container",
     53    "The flexbox pane shows a flex container accordion item."
     54  );
     55 });