tor-browser

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

test_bug1774135.html (3095B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <meta charset="utf-8">
      4 <title>Test for Bug 1774135</title>
      5 <script src="/tests/SimpleTest/SimpleTest.js"></script>
      6 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
      7 <style>
      8  .split {
      9    width: 299px;
     10    display: flex;
     11    background: red;  /* so we can see if it's visible. It should NOT be visible */
     12  }
     13  .split>* {
     14    flex: 1 1 auto;
     15    height: 50px;
     16  }
     17  .left {
     18    background: pink;
     19  }
     20  .middle {
     21    background: lightgreen;
     22  }
     23  .right {
     24    background: lightblue;
     25  }
     26 </style>
     27 <script>
     28  function WidthTracker(observed) {
     29    this._observer = new ResizeObserver(this._handleNotification.bind(this));
     30    this._observed = observed;
     31  }
     32 
     33  WidthTracker.prototype = {
     34    _handleNotification(entries) {
     35      for (let entry of entries) {
     36        this._elemToWidth.set(
     37          entry.target,
     38          entry.devicePixelContentBoxSize[0].inlineSize
     39        );
     40      }
     41      for (let elem of this._observed) {
     42        if (!this._elemToWidth.has(elem)) {
     43          return;
     44        }
     45      }
     46      // Note(dshin): Wait a tick - we need to let the resize observer loop exit
     47      // and avoid resize loop error.
     48      const resolve = this._resolve;
     49      const result = new Map(this._elemToWidth);
     50      this._observer.disconnect();
     51      delete this._resolve;
     52      delete this._elemToWidth;
     53      window.requestAnimationFrame(function() {
     54        resolve(result);
     55      });
     56    },
     57    start() {
     58      this._elemToWidth = new Map();
     59      for (const elem of this._observed) {
     60        this._observer.observe(elem);
     61      }
     62      return new Promise(res => { this._resolve = res; });
     63    },
     64  };
     65  async function run_test(tracker, container, children, relativeZoom) {
     66    SpecialPowers.setFullZoom(window, relativeZoom);
     67    let result = await tracker.start(Array.from(children).concat([container]));
     68    let observedChildrenWidths = 0;
     69    for (const child of children) {
     70      observedChildrenWidths += result.get(child);
     71    }
     72    let containerWidth = result.get(container);
     73    is(observedChildrenWidths, containerWidth, "Combined widths of children == container width");
     74  }
     75 
     76  const originalZoom = SpecialPowers.getFullZoom(window);
     77  let tracker;
     78  let container;
     79  let children;
     80 
     81  const zoomsToTest = [
     82    300,
     83    240,
     84    200,
     85    170,
     86    150,
     87    133,
     88    120,
     89    110,
     90    100,
     91    90,
     92    80,
     93    67,
     94    50,
     95    30,
     96  ];
     97 
     98  add_task(async () => {
     99    container = document.querySelector('.split');
    100    children = document.querySelectorAll('.split>*');
    101    tracker = new WidthTracker(Array.from(children).concat([container]));
    102  });
    103  for (let i = 0; i < zoomsToTest.length; ++i) {
    104    let relativeZoom = originalZoom * zoomsToTest[i] / 100;
    105    add_task(async () => { await run_test(tracker, container, children, relativeZoom); });
    106  }
    107  add_task(async () => { SpecialPowers.setFullZoom(window, originalZoom); });
    108 </script>
    109 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1774135">Mozilla Bug 1774135</a>
    110 <div class="split">
    111  <div class="left"></div>
    112  <div class="middle"></div>
    113  <div class="right"></div>
    114 </div>