tor-browser

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

content-visibility-hidden-reflow-count.html (3553B)

      1 <!DOCTYPE html>
      2 <html>
      3  <meta charset="utf-8">
      4  <title>CSS Contain: Test content-visibility:hidden reflow counts</title>
      5  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
      6  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1746098">
      7 
      8  <script src="/resources/testharness.js"></script>
      9  <script src="/resources/testharnessreport.js"></script>
     10 
     11  <style>
     12  .container {
     13    content-visibility: visible;
     14    contain: strict;
     15  }
     16  .flex {
     17    display: flex;
     18  }
     19  .grid {
     20    display: grid;
     21    grid: repeat(2, 60px) / auto-flow 80px;
     22  }
     23  </style>
     24 
     25  <div id="test"></div>
     26 
     27  <script>
     28  let gUtils = SpecialPowers.getDOMWindowUtils(window);
     29  let gTestContainer = document.getElementById("test");
     30 
     31  function setupContainerWithStrictContainment() {
     32    const container = document.createElement("div");
     33    container.classList.add("container");
     34    gTestContainer.innerHTML = "";
     35    gTestContainer.appendChild(container);
     36    return container;
     37  }
     38 
     39  function flushLayout() {
     40    document.documentElement.offsetHeight;
     41  }
     42 
     43  function getReflowCount() {
     44    flushLayout();
     45    return gUtils.framesReflowed;
     46  }
     47 
     48  function runTestFunctionAndCountReflows(testFunction, container) {
     49    const beforeCount = getReflowCount();
     50    testFunction(container);
     51    const afterCount = getReflowCount();
     52    return afterCount - beforeCount;
     53  }
     54 
     55  function assertContentVisibilityHiddenHasFewerReflows(testSetup, testFunction) {
     56    let container = setupContainerWithStrictContainment();
     57    testSetup(container);
     58    flushLayout();
     59 
     60    const visibleReflows = runTestFunctionAndCountReflows(testFunction, container);
     61 
     62    container = setupContainerWithStrictContainment();
     63    testSetup(container);
     64    container.style.contentVisibility = "hidden";
     65    flushLayout();
     66 
     67    const hiddenReflows = runTestFunctionAndCountReflows(testFunction, container);
     68    assert_less_than(hiddenReflows, visibleReflows,
     69                     "Style / layout changes in hidden content resulted in fewer reflows than visible content.");
     70  }
     71 
     72  test(() => {
     73    assertContentVisibilityHiddenHasFewerReflows(
     74      (container) => {
     75          const div = document.createElement("div");
     76          div.innerText = "Test Content";
     77          container.appendChild(div);
     78      },
     79      (container) => {
     80          container.children[0].style.width = "100px";
     81          container.children[0].style.height = "100px";
     82    });
     83  }, `Avoiding layout while modifying a simple div's style.`);
     84 
     85  test(() => {
     86    assertContentVisibilityHiddenHasFewerReflows(
     87      (container) => {
     88        container.classList.add("flex");
     89 
     90        const flexContainer = document.createElement("div");
     91        flexContainer.classList.add("flex");
     92        container.appendChild(flexContainer);
     93 
     94        container.appendChild(document.createElement("div"));
     95      },
     96      (container) => {
     97        container.children[0].style.flexDirection = "row-reverse";
     98       }
     99    );
    100  }, `Avoiding layout while modifying a div with flex display mode.`);
    101 
    102  test(() => {
    103    assertContentVisibilityHiddenHasFewerReflows(
    104      (container) => {
    105        container.classList.add("grid");
    106 
    107        const gridChild = document.createElement("div");
    108        gridChild.style.display = "grid";
    109        container.appendChild(gridChild);
    110 
    111        container.appendChild(document.createElement("div"));
    112      },
    113      (container) => {
    114        container.children[0].style.rowGap = "30px";
    115       },
    116    );
    117  }, `Avoiding layout while modifying a div with grid display mode.`);
    118 
    119  </script>
    120 </html>