tor-browser

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

browser_markup_overflow_badge.js (2887B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 // Tests that the overflow badge is shown to overflow causing elements and is updated
      8 // dynamically.
      9 
     10 const TEST_URI = `
     11  <style type="text/css">
     12    .parent {
     13        width: 200px;
     14        height: 200px;
     15        overflow: scroll;
     16    }
     17    .fixed {
     18        width: 50px;
     19        height: 50px;
     20    }
     21    .shift {
     22        margin-left: 300px;
     23    }
     24  </style>
     25  <div id="top" class="parent">
     26    <div id="child1" class="fixed shift">
     27        <div id="child2" class="fixed"></div>
     28    </div>
     29    <div id="child3" class="shift">
     30        <div id="child4" class="fixed"></div>
     31    </div>
     32  </div>
     33 `;
     34 
     35 add_task(async function () {
     36  const { inspector } = await openInspectorForURL(
     37    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
     38  );
     39 
     40  await expandChildContainers(inspector);
     41 
     42  const child1 = await getContainerForSelector("#child1", inspector);
     43  const child2 = await getContainerForSelector("#child2", inspector);
     44  const child3 = await getContainerForSelector("#child3", inspector);
     45  const child4 = await getContainerForSelector("#child4", inspector);
     46 
     47  info(
     48    "Checking if overflow badges appear correctly right after the markup-view is loaded"
     49  );
     50 
     51  checkBadges([child1, child4], [child2, child3]);
     52 
     53  info("Changing the elements to check whether the badge updates correctly");
     54 
     55  await toggleClass(inspector);
     56 
     57  checkBadges([child2, child3], [child1, child4]);
     58 
     59  info(
     60    "Once again, changing the elements to check whether the badge updates correctly"
     61  );
     62 
     63  await toggleClass(inspector);
     64 
     65  checkBadges([child1, child4], [child2, child3]);
     66 });
     67 
     68 async function expandChildContainers(inspector) {
     69  const container = await getContainerForSelector("#top", inspector);
     70 
     71  await expandContainer(inspector, container);
     72  for (const child of container.getChildContainers()) {
     73    await expandContainer(inspector, child);
     74  }
     75 }
     76 
     77 async function toggleClass(inspector) {
     78  const onStateChanged = inspector.walker.once("overflow-change");
     79 
     80  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
     81    content.document.querySelector("#child1").classList.toggle("fixed");
     82    content.document.querySelector("#child3").classList.toggle("fixed");
     83  });
     84 
     85  await onStateChanged;
     86 }
     87 
     88 function checkBadges(elemsWithBadges, elemsWithNoBadges) {
     89  const hasBadge = elem =>
     90    elem.elt.querySelector(
     91      `#${elem.elt.children[0].id} > span.editor > .inspector-badge.overflow-badge`
     92    );
     93 
     94  for (const elem of elemsWithBadges) {
     95    ok(hasBadge(elem), `Overflow badge exists in ${elem.node.id}`);
     96  }
     97 
     98  for (const elem of elemsWithNoBadges) {
     99    ok(!hasBadge(elem), `Overflow badge does not exist in ${elem.node.id}`);
    100  }
    101 }