tor-browser

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

fragments.html (2485B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>ResizeObserver with multiple fragments</title>
      4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/resize-observer-1/">
      6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3673">
      7 <meta name="assert" content="Tests ResizeObserver supports multiple fragments." />
      8 
      9 <style>
     10 #wrapper {
     11  column-width: 100px;
     12  width: max-content;
     13  height: 100px;
     14  margin: 10px;
     15 }
     16 #target {
     17  outline: solid;
     18  background: orange;
     19 }
     20 .w50 {
     21  width: 50px;
     22 }
     23 .w75 {
     24  width: 75px;
     25 }
     26 .h100 {
     27  height: 100px;
     28 }
     29 .h150 {
     30  height: 150px;
     31 }
     32 .h175 {
     33  height: 175px;
     34 }
     35 </style>
     36 
     37 <div id="log"></div>
     38 
     39 <div id="wrapper">
     40  <div id="target"></div>
     41 </div>
     42 
     43 <script src="/resources/testharness.js"></script>
     44 <script src="/resources/testharnessreport.js"></script>
     45 <script>
     46 const target = document.getElementById("target");
     47 
     48 const nextSizes = (() => {
     49  let callback = null;
     50  new ResizeObserver((entries) => {
     51    if (callback) {
     52      callback(entries[0].contentBoxSize);
     53      callback = null;
     54    }
     55  }).observe(target);
     56  return () => {
     57    if (callback) {
     58      throw "Already awaiting another notification";
     59    }
     60    return new Promise((resolve, reject) => {
     61      callback = resolve;
     62      requestAnimationFrame(() => {
     63        requestAnimationFrame(() => {
     64          reject("Missing ResizeObserver notification");
     65          callback = null;
     66        });
     67      });
     68    });
     69  };
     70 })();
     71 
     72 function checkSizes(className, expectedSizes, msg) {
     73  promise_test(async () => {
     74    await new Promise(requestAnimationFrame);
     75    target.className = className;
     76    let sizes;
     77    try {
     78      sizes = await nextSizes();
     79    } catch (error) {
     80      assert_unreached(error);
     81    }
     82    assert_equals(sizes.length, expectedSizes.length, "number of fragments");
     83    for (let i = 0; i < sizes.length; ++i) {
     84      assert_equals(sizes[i].inlineSize, expectedSizes[i][0], `fragment #${i+1} inline size`);
     85      assert_equals(sizes[i].blockSize, expectedSizes[i][1], `fragment #${i+1} block size`);
     86    }
     87  }, msg);
     88 }
     89 
     90 checkSizes(
     91  "w50 h100",
     92  [[50, 100]],
     93  "Single fragment"
     94 );
     95 checkSizes(
     96  "w50 h150",
     97  [[50, 100], [50, 50]],
     98  "Adding 2nd fragment"
     99 );
    100 checkSizes(
    101  "w50 h175",
    102  [[50, 100], [50, 75]],
    103  "Resizing 2nd fragment"
    104 );
    105 checkSizes(
    106  "w75 h175",
    107  [[75, 100], [75, 75]],
    108  "Resizing all fragments"
    109 );
    110 checkSizes(
    111  "w75 h100",
    112  [[75, 100]],
    113  "Removing 2nd fragment"
    114 );
    115 </script>