tor-browser

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

test_bug1490890.html (3154B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=1490890
      5 -->
      6 <head>
      7  <meta charset="utf-8">
      8  <title>Test for Bug 1490890</title>
      9  <script src="/tests/SimpleTest/SimpleTest.js"></script>
     10  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
     11  <style>
     12    #flex {
     13      display: flex;
     14      flex-direction: column;
     15      height: 100px;
     16      max-height: 100px;
     17      overflow: hidden;
     18      border: 1px solid black;
     19    }
     20    #overflowAuto {
     21      overflow: auto;
     22      white-space: pre-wrap;
     23    }
     24  </style>
     25 </head>
     26 <body>
     27 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1490890">Mozilla Bug 1490890</a>
     28 <div id="display">
     29  <div id="content">
     30    <div id="flex">
     31      <div id="overflowAuto">
     32        <!-- Populated by test JS below: -->
     33        <div id="tall"></div>
     34      </div>
     35      <div id="testNode">abc</div>
     36    </div>
     37  </div>
     38 </div>
     39 <pre id="test">
     40 <script type="application/javascript">
     41 "use strict";
     42 
     43 /** Test for Bug 1490890 */
     44 
     45 /**
     46 * This test checks how many reflows are required, when we make a change inside
     47 * a flex item, with a tall scrollable sibling flex item.
     48 */
     49 
     50 const gUtils = SpecialPowers.getDOMWindowUtils(window);
     51 
     52 // The elements that we will modify here:
     53 const gTall = document.getElementById("tall");
     54 const gTestNode = document.getElementById("testNode");
     55 
     56 // Helper function to undo our modifications:
     57 function cleanup()
     58 {
     59  gTall.firstChild.remove();
     60  gTestNode.style = "";
     61 }
     62 
     63 // Flush layout & return the global frame-reflow-count
     64 function getReflowCount()
     65 {
     66  let unusedVal = document.getElementById("flex").offsetHeight; // flush layout
     67  return gUtils.framesReflowed;
     68 }
     69 
     70 // This function changes gTestNode to "display:none", and returns the number
     71 // of frames that need to be reflowed as a result of that tweak.
     72 function makeTweakAndCountReflows()
     73 {
     74  let beforeCount = getReflowCount();
     75  gTestNode.style.display = "none";
     76  let afterCount = getReflowCount();
     77 
     78  let numReflows = afterCount - beforeCount;
     79  if (numReflows <= 0) {
     80    ok(false, "something's wrong -- we should've reflowed *something*");
     81  }
     82  return numReflows;
     83 }
     84 
     85 // ACTUAL TEST LOGIC STARTS HERE
     86 // -----------------------------
     87 const testLineCount = 100;
     88 const refLineCount = 5000;
     89 
     90 // "Reference" measurement: put enough lines of text into gTall to trigger
     91 // a vertical scrollbar, and then see how many frames need to be reflowed
     92 // in response to a tweak in gTestNode:
     93 let text = document.createTextNode("a\n".repeat(testLineCount));
     94 gTall.appendChild(text);
     95 let numReferenceReflows = makeTweakAndCountReflows();
     96 cleanup();
     97 
     98 // "Test" measurement: put many more lines of text into gTall (many more than
     99 // for reference case), and then see how many frames need to be reflowed
    100 // in response to a tweak in gTestNode:
    101 text = document.createTextNode("a\n".repeat(refLineCount));
    102 gTall.appendChild(text);
    103 let numTestReflows = makeTweakAndCountReflows();
    104 cleanup();
    105 
    106 is(numTestReflows, numReferenceReflows,
    107   "Tweak should trigger the same number of reflows regardless of " +
    108   "how much content is present in descendant of sibling");
    109 </script>
    110 </pre>
    111 </body>
    112 </html>