layout/style/test/test_bug1490890.html

   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>