tor-browser

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

browser_markup_container_badge.js (2833B)

      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 the container badge is displayed on element with expected container-type values.
      7 
      8 const TEST_URI = `
      9  <style type="text/css">
     10    #container-inline-size {
     11      container-type: inline-size;
     12    }
     13 
     14    #container-size {
     15      container-type: size;
     16    }
     17 
     18    #container-normal {
     19      container-type: normal;
     20    }
     21  </style>
     22  <div id="container-inline-size">container-inline-size</div>
     23  <div id="container-size">container-size</div>
     24  <div id="container-normal">container-normal</div>
     25 `;
     26 
     27 add_task(async function () {
     28  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     29  const { inspector } = await openLayoutView();
     30 
     31  info(
     32    "Check that the container badge is shown for element with container-type: inline-size"
     33  );
     34  let container = await getContainerForSelector(
     35    "#container-inline-size",
     36    inspector
     37  );
     38  const containerInlineSizeBadge = container.elt.querySelector(
     39    ".inspector-badge[data-container]"
     40  );
     41  ok(
     42    !!containerInlineSizeBadge,
     43    "container badge is displayed for inline-size container"
     44  );
     45  is(
     46    containerInlineSizeBadge.textContent,
     47    "container",
     48    "badge has expected text"
     49  );
     50  is(
     51    containerInlineSizeBadge.title,
     52    "container-type: inline-size",
     53    "badge has expected title for inline-size container"
     54  );
     55 
     56  info("Change the element containerType value to see if the badge hides");
     57  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
     58    content.document.querySelector(
     59      "#container-inline-size"
     60    ).style.containerType = "normal";
     61  });
     62  await waitFor(
     63    () =>
     64      container.elt.querySelector(".inspector-badge[data-container]") == null
     65  );
     66  ok(true, "The badge hides when changing the containerType value");
     67 
     68  info(
     69    "Check that the container badge is shown for element with container-type: size"
     70  );
     71  container = await getContainerForSelector("#container-size", inspector);
     72  const containerSizeBadge = container.elt.querySelector(
     73    ".inspector-badge[data-container]"
     74  );
     75  ok(!!containerSizeBadge, "container badge is displayed for size container");
     76  is(containerSizeBadge.textContent, "container", "badge has expected text");
     77  is(
     78    containerSizeBadge.title,
     79    "container-type: size",
     80    "badge has expected title for size container"
     81  );
     82 
     83  info(
     84    "Check that the container badge is not shown for element with container-type: normal"
     85  );
     86  container = await getContainerForSelector("#container-normal", inspector);
     87  const noContainerBadge = container.elt.querySelector(
     88    ".inspector-badge[data-container]"
     89  );
     90  ok(
     91    !noContainerBadge,
     92    "container badge is not displayed for element with container-type: normal"
     93  );
     94 });