tor-browser

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

test_bug1505254.html (4288B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=1505254
      5 -->
      6 <head>
      7  <meta charset="utf-8">
      8  <title>Test for Bug 1505254</title>
      9  <script src="/tests/SimpleTest/SimpleTest.js"></script>
     10  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
     11  <style>
     12    /* Note: this CSS/DOM structure is loosely based on WhatsApp Web. */
     13    #outerFlex {
     14      display: flex;
     15      height: 200px;
     16      border: 3px solid purple;
     17      overflow: hidden;
     18      position: relative;
     19    }
     20    #outerItem {
     21      flex: 0 0 60%;
     22      overflow: hidden;
     23      position: relative;
     24    }
     25    #abspos {
     26      position: absolute;
     27      display: flex;
     28      flex-direction: column;
     29      height: 100%;
     30      width: 100%;
     31    }
     32    #insideAbspos {
     33      position: relative;
     34      flex: 1 1 0;
     35      width: 100%;
     36      height: 100%;
     37    }
     38    #scroller {
     39      display: flex;
     40      flex-direction: column;
     41      position: absolute;
     42      top: 0;
     43      overflow-x: hidden;
     44      overflow-y: scroll;
     45      height: 100%;
     46      width: 100%;
     47    }
     48    #initiallyHidden {
     49      display:none;
     50    }
     51 
     52  </style>
     53 </head>
     54 <body>
     55 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1505254">Mozilla Bug 1505254</a>
     56 <div id="display">
     57  <div id="content">
     58    <div id="outerFlex">
     59      <div id="outerItem">
     60        <div id="abspos">
     61          <div id="insideAbspos">
     62            <div>
     63              <div id="scroller">
     64                <div style="min-height: 600px">abc</div>
     65                <div id="initiallyHidden">def</div>
     66              </div>
     67            </div>
     68          </div>
     69          <div id="testNode"></div>
     70        </div>
     71      </div>
     72    </div>
     73  </div>
     74 </div>
     75 <pre id="test">
     76 <script type="application/javascript">
     77 "use strict";
     78 
     79 /** Test for Bug 1505254 */
     80 
     81 /**
     82 * This test checks how many reflows are required when we make a change inside
     83 * of an abpsos element, which itself is inside of a flex item with cached
     84 * block-size measurements. This test is checking that this sort of change
     85 * doesn't invalidate those cached block-size measurements on the flex item
     86 * ancestor. (We're testing that indirectly by seeing how many frames are
     87 * reflowed.)
     88 */
     89 
     90 const gUtils = SpecialPowers.getDOMWindowUtils(window);
     91 
     92 // The elements that we will modify here:
     93 const gInitiallyHidden = document.getElementById("initiallyHidden");
     94 const gTestNode = document.getElementById("testNode");
     95 
     96 // Helper function to undo our modifications:
     97 function cleanup()
     98 {
     99  gTestNode.textContent = "";
    100  gInitiallyHidden.style = "";
    101 }
    102 
    103 // Helper function to flush layout & return the global frame-reflow-count:
    104 function getReflowCount()
    105 {
    106  let unusedVal = document.getElementById("scroller").offsetHeight; // flush layout
    107  return gUtils.framesReflowed;
    108 }
    109 
    110 // This function adds some text in gTestNode and returns the number of frames
    111 // that need to be reflowed as a result of that tweak:
    112 function makeTweakAndCountReflows()
    113 {
    114  let beforeCount = getReflowCount();
    115  gTestNode.textContent = "def";
    116  let afterCount = getReflowCount();
    117 
    118  let numReflows = afterCount - beforeCount;
    119  if (numReflows <= 0) {
    120    ok(false, "something's wrong -- we should've reflowed *something*");
    121  }
    122  return numReflows;
    123 }
    124 
    125 // ACTUAL TEST LOGIC STARTS HERE
    126 // -----------------------------
    127 
    128 // "Reference" measurement: see how many frames need to be reflowed
    129 // in response to a tweak in gTestNode, before we've shown
    130 // #initiallyHidden:
    131 let numReferenceReflows = makeTweakAndCountReflows();
    132 cleanup();
    133 
    134 // "Test" measurement: see how many frames need to be reflowed
    135 // in response to a tweak in gTestNode, after we've shown #initiallyHidden:
    136 gInitiallyHidden.style.display = "block";
    137 let numTestReflows = makeTweakAndCountReflows();
    138 cleanup();
    139 
    140 // Any difference between our measurements is an indication that we're reflowing
    141 // frames in a non-"dirty" subtree. (The gTestNode tweak has no reason to cause
    142 // #initiallyHidden to be dirty -- and therefore, the presence/absence of
    143 // #initiallyHidden shouldn't affect the number of frames that get reflowed in
    144 // response to the gTestNode tweak).
    145 is(numTestReflows, numReferenceReflows,
    146   "Tweak should trigger the same number of reflows regardless of " +
    147   "content in unmodified sibling");
    148 
    149 </script>
    150 </pre>
    151 </body>
    152 </html>