tor-browser

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

test_flexbox_order_abspos.html (6392B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=1345873
      5 -->
      6 <head>
      7  <meta charset="utf-8">
      8  <title>Test for Bug 1345873</title>
      9  <script src="/tests/SimpleTest/SimpleTest.js"></script>
     10  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
     11  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
     12  <style type="text/css">
     13 
     14    div.ref {
     15      display: none;
     16      height: 30px;
     17    }
     18 
     19    refA, refB, refC {
     20      display: block;
     21      float: left;
     22    }
     23 
     24    div#a, refA {
     25      background: lightgreen;
     26      width: 20px;
     27      height: 30px;
     28    }
     29    div#b, refB {
     30      background: orange;
     31      width: 30px;
     32      height: 30px;
     33    }
     34    div#c, refC {
     35      background: blue;
     36      width: 50px;
     37      height: 30px;
     38    }
     39    div#flexContainer {
     40      display: flex;
     41      width: 100px;
     42      height: 30px;
     43    }
     44    div#flexContainerParent {
     45      display: none;
     46    }
     47    .abs {
     48      position: absolute !important;
     49      width: 15px  !important;
     50      height: 15px !important;
     51    }
     52  </style>
     53 </head>
     54 <body>
     55 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1345873">Mozilla Bug 1345873</a>
     56 <div id="display">
     57 
     58  <!-- Reference cases (display:none; only shown during initRefSnapshots) -->
     59  <div id="references">
     60    <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div>
     61    <div class="ref" id="Abc">
     62      <refA class="abs"></refA><refB></refB><refC></refC></div>
     63    <div class="ref" id="Bac">
     64      <refB class="abs"></refB><refA></refA><refC></refC></div>
     65    <div class="ref" id="Bca">
     66      <refB class="abs"></refB><refC></refC><refA></refA></div>
     67    <div class="ref" id="Cab">
     68      <refC class="abs"></refC><refA></refA><refB></refB></div>
     69    <div class="ref" id="ABc">
     70      <refA class="abs"></refA><refB class="abs"></refB><refC></refC></div>
     71    <div class="ref" id="ACb">
     72      <refA class="abs"></refA><refC class="abs"></refC><refB></refB></div>
     73    <div class="ref" id="BCa">
     74      <refB class="abs"></refB><refC class="abs"></refC><refA></refA></div>
     75    <div class="ref" id="ABC">
     76      <refA class="abs"></refA><refB class="abs"></refB><refC class="abs"></refC></div>
     77  </div>
     78 
     79  <div id="flexContainerParent">
     80    <!-- The flex container that we'll be testing
     81         (its parent is display:none initially) -->
     82    <div id="flexContainer">
     83      <div id="a"></div>
     84      <div id="b"></div>
     85      <div id="c"></div>
     86    </div>
     87  </div>
     88 
     89 </div>
     90 <pre id="test">
     91 <script type="application/javascript">
     92 "use strict";
     93 
     94 /** Test for Bug 1345873 */
     95 
     96 /* This testcase ensures that we honor the "order" property when ordering
     97 * flex items within a flex container.
     98 *
     99 * Note: The items in this testcase don't overlap, so this testcase does _not_
    100 * test paint ordering.  It only tests horizontal ordering in a flex container.
    101 */
    102 
    103 // DATA
    104 // ----
    105 
    106 // This will store snapshots of our reference divs
    107 let gRefSnapshots = {};
    108 
    109 // These are the sets of 'order' values that we'll test.
    110 // * The first three values in each array are the 'order' values that we'll
    111 // assign to elements a, b, and c (respectively).
    112 // * The next value is a string containing the concatenated IDs of any
    113 // elements that should be absolutely positioned.
    114 // * The final value in each array is the ID of the expected reference
    115 // rendering. (By convention, in those IDs, capital = abspos)
    116 var gOrderTestcases = [
    117  // Just one child is abspos:
    118  [ 1, 2, 3, "a", "Abc"],
    119  [ 1, 2, 3, "b", "Bac"],
    120  [ 1, 2, 3, "c", "Cab"],
    121  [ 2, 3, 1, "b", "Bca"],
    122  [ 3, 1, 1, "b", "Bca"],
    123 
    124  // Two children are abspos:
    125  // (Note: "order" doesn't influence position or paint order for abspos
    126  // children - only for (in-flow) flex items.)
    127  [ 1, 2, 3, "ab", "ABc"],
    128  [ 2, 1, 3, "ab", "ABc"],
    129  [ 1, 2, 3, "ac", "ACb"],
    130  [ 3, 2, 1, "ac", "ACb"],
    131  [ 3, 2, 1, "bc", "BCa"],
    132 
    133  // All three children are abspos:
    134  // (Rendering always the same regardless of "order" values)
    135  [ 1, 2, 3, "abc", "ABC"],
    136  [ 3, 1, 2, "abc", "ABC"],
    137  [ 3, 2, 1, "abc", "ABC"],
    138 ];
    139 
    140 // FUNCTIONS
    141 // ---------
    142 
    143 function initRefSnapshots() {
    144  let refIds = ["abc",
    145                "Abc", "Bac", "Bca", "Cab",
    146                "ABc", "ACb", "BCa",
    147                "ABC"];
    148  for (let id of refIds) {
    149    let elem = document.getElementById(id);
    150    elem.style.display = "block";
    151    gRefSnapshots[id] = snapshotWindow(window, false);
    152    elem.style.display = "";
    153  }
    154 }
    155 
    156 function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
    157  let compareResult = compareSnapshots(aSnap1, aSnap2, true);
    158  ok(compareResult[0],
    159     "flex container rendering should match expected (" + aMsg +")");
    160  if (!compareResult[0]) {
    161    todo(false, "TESTCASE: " + compareResult[1]);
    162    todo(false, "REFERENCE: "+ compareResult[2]);
    163  }
    164 }
    165 
    166 function runOrderTestcase(aOrderTestcase) {
    167  // Sanity-check
    168  ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
    169  is(aOrderTestcase.length, 5, "expecting testcase to have 5 elements");
    170 
    171  document.getElementById("a").style.order = aOrderTestcase[0];
    172  document.getElementById("b").style.order = aOrderTestcase[1];
    173  document.getElementById("c").style.order = aOrderTestcase[2];
    174 
    175  let idsToMakeAbspos = aOrderTestcase[3].split("");
    176  for (let absPosId of idsToMakeAbspos) {
    177    document.getElementById(absPosId).classList.add("abs");
    178  }
    179 
    180  let snapshot = snapshotWindow(window, false);
    181  complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[4]],
    182                            aOrderTestcase);
    183 
    184  // Clean up
    185  for (let id of ["a", "b", "c"]) {
    186    document.getElementById(id).style.order = "";
    187    document.getElementById(id).classList.remove("abs");
    188  }
    189 }
    190 
    191 // Main Function
    192 function main() {
    193  initRefSnapshots();
    194 
    195  // un-hide the flex container's parent
    196  let flexContainerParent = document.getElementById("flexContainerParent");
    197  flexContainerParent.style.display = "block";
    198 
    199  // Initial sanity-check: should be in expected document order
    200  let initialSnapshot = snapshotWindow(window, false);
    201  complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots.abc,
    202                            "initial flex container rendering, " +
    203                            "no 'order' value yet");
    204 
    205  // OK, now we run our tests
    206  gOrderTestcases.forEach(runOrderTestcase);
    207 
    208  // Re-hide the flex container at the end
    209  flexContainerParent.style.display = "";
    210 }
    211 
    212 main();
    213 
    214 </script>
    215 </pre>
    216 </body>
    217 </html>