tor-browser

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

scrollbar-gutter-reflow-counts-001.html (3354B)

      1 <!DOCTYPE html>
      2 <html>
      3  <meta charset="utf-8">
      4  <title>CSS Overflow: Test scrollbar-gutter 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  #target {
     13    inline-size: 200px;
     14    block-size: 100px;
     15    background: lightgray;
     16    overflow: auto;
     17  }
     18 
     19  #targetChild {
     20    inline-size: 100%;
     21    block-size: 100%;
     22    background: orange;
     23  }
     24  </style>
     25 
     26  <p>Here is a scroll contaier for testing:</p>
     27  <div id="target">
     28    <div id="targetChild"></div>
     29  </div>
     30 
     31  <script>
     32  let gUtils = SpecialPowers.getDOMWindowUtils(window);
     33  let gTarget = document.getElementById("target");
     34  let gTargetChild = document.getElementById("targetChild");
     35 
     36  function getReflowCount()
     37  {
     38    document.documentElement.offsetHeight; // flush layout
     39    return gUtils.framesReflowed;
     40  }
     41 
     42  function cleanUp() {
     43    gTarget.style.writingMode = "";
     44    gTarget.style.scrollbarGutter = "";
     45    gTargetChild.style.blockSize = "";
     46  }
     47 
     48  function tweakStyleAndCountReflows(aAddStyle, aAddScrollbarGutter)
     49  {
     50    let beforeCount = getReflowCount();
     51    if (aAddScrollbarGutter) {
     52      gTarget.style.scrollbarGutter = "stable";
     53    }
     54    aAddStyle();
     55    let afterCount = getReflowCount();
     56    cleanUp();
     57 
     58    let numReflows = afterCount - beforeCount;
     59    assert_greater_than(numReflows, 0, "We should've reflowed *something* after changing styles:");
     60    return numReflows;
     61  }
     62 
     63  let gTestCases = [
     64    {
     65      name : "Enlarge the child's block-size to 200%",
     66      addStyle : function () {
     67        gTargetChild.style.blockSize = "200%";
     68      },
     69    },
     70    {
     71      name : "Enlarge the child's block-size to 300px",
     72      addStyle : function () {
     73        gTargetChild.style.blockSize = "300px";
     74      },
     75    },
     76    {
     77      name : "Enlarge the child's block-size to 200% in a vertical-lr scroll container",
     78      addStyle : function () {
     79        gTarget.style.writingMode = "vertical-lr";
     80        gTargetChild.style.blockSize = "200%";
     81      },
     82    },
     83    {
     84      name : "Enlarge the child's block-size to 300px in a vertical-lr scroll container",
     85      addStyle : function () {
     86        gTarget.style.writingMode = "vertical-lr";
     87        gTargetChild.style.blockSize = "300px";
     88      },
     89    },
     90    {
     91      name : "Enlarge the child's block-size to 200% in a vertical-rl scroll container",
     92      addStyle : function () {
     93        gTarget.style.writingMode = "vertical-rl";
     94        gTargetChild.style.blockSize = "200%";
     95      },
     96    },
     97    {
     98      name : "Enlarge the child's block-size to 300px in a vertical-rl scroll container",
     99      addStyle : function () {
    100        gTarget.style.writingMode = "vertical-rl";
    101        gTargetChild.style.blockSize = "300px";
    102      },
    103    },
    104  ];
    105 
    106  for (let testcase of gTestCases) {
    107    test(function () {
    108      let numTestReflows = tweakStyleAndCountReflows(testcase.addStyle, true);
    109      let numReferenceReflows = tweakStyleAndCountReflows(testcase.addStyle, false);
    110      assert_less_than(numTestReflows, numReferenceReflows,
    111                       "A scroll container with 'scrollbar-gutter:stable' should have less reflow counts:");
    112    }, testcase.name)
    113  }
    114  </script>
    115 </html>