layout/style/test/test_flexbox_order_table.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=799775
   5 -->
   6 <head>
   7   <meta charset="utf-8">
   8   <title>Test for Bug 799775</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, div#b, div#c {
  25       display: table;
  26     }
  27
  28     div#a, refA {
  29       background: lightgreen;
  30       width: 20px;
  31       height: 30px;
  32     }
  33     div#b, refB {
  34       background: orange;
  35       width: 30px;
  36       height: 30px;
  37     }
  38     div#c, refC {
  39       background: blue;
  40       width: 50px;
  41       height: 30px;
  42     }
  43     div#flexContainer {
  44       display: flex;
  45       width: 100px;
  46       height: 30px;
  47     }
  48     div#flexContainerParent {
  49       display: none;
  50     }
  51   </style>
  52 </head>
  53 <body>
  54 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=799775">Mozilla Bug 799775</a>
  55 <div id="display">
  56
  57   <!-- Reference cases (display:none; only shown during initRefSnapshots) -->
  58   <div id="references">
  59     <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div>
  60     <div class="ref" id="acb"><refA></refA><refC></refC><refB></refB></div>
  61     <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div>
  62     <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div>
  63     <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div>
  64     <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div>
  65   </div>
  66
  67   <div id="flexContainerParent">
  68     <!-- The flex container that we'll be testing
  69          (its parent is display:none initially) -->
  70     <div id="flexContainer">
  71       <div id="a"></div>
  72       <div id="b"></div>
  73       <div id="c"></div>
  74     </div>
  75   </div>
  76
  77 </div>
  78 <pre id="test">
  79 <script type="application/javascript">
  80 "use strict";
  81
  82 /** Test for Bug 799775 **/
  83
  84 /* This testcase ensures that we honor the "order" property when ordering
  85  * tables as flex items within a flex container.
  86  *
  87  * Note: The items in this testcase don't overlap, so this testcase does _not_
  88  * test paint ordering.  It only tests horizontal ordering in a flex container.
  89  */
  90
  91 // DATA
  92 // ----
  93
  94 // This will store snapshots of our reference divs
  95 let gRefSnapshots = {};
  96
  97 // These are the sets of 'order' values that we'll test.
  98 // The first three values in each array are the 'order' values that we'll
  99 // assign to elements a, b, and c (respectively).  The final value in each
 100 // array is the ID of the expected reference rendering.
 101 let gOrderTestcases = [
 102   // The 6 basic permutations:
 103   [ 1, 2, 3, "abc"],
 104   [ 1, 3, 2, "acb"],
 105   [ 2, 1, 3, "bac"],
 106   [ 2, 3, 1, "cab"],
 107   [ 3, 1, 2, "bca"],
 108   [ 3, 2, 1, "cba"],
 109
 110   // Test negative values
 111   [ 1, -5, -2, "bca"],
 112   [ -50, 0, -2, "acb"],
 113
 114   // Non-integers should be ignored.
 115   // (So, they'll leave their div with the initial 'order' value, which is 0.)
 116   [ 1,   1.5, 2,   "bac"],
 117   [ 2.5, 3.4, 1,   "abc"],
 118   [ 0.5, 1,   1.5, "acb"],
 119
 120   // Decimal values that happen to be equal to integers (e.g. "3.0") are still
 121   // <numbers>, and are _not_ <integers>.
 122   //  Source: http://www.w3.org/TR/CSS21/syndata.html#value-def-integer
 123   // (So, they'll leave their div with the initial 'order' value, which is 0.)
 124   // (NOTE: We have to use quotes around "3.0" and "2.0" to be sure JS doesn't
 125   // coerce them into integers before we get a chance to set them in CSS.)
 126   [ "3.0", "2.0", "1.0", "abc"],
 127   [ 3, "2.0", 1, "bca"],
 128 ];
 129
 130 // FUNCTIONS
 131 // ---------
 132
 133 function initRefSnapshots() {
 134   let refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
 135   for (let id of refIds) {
 136     let elem = document.getElementById(id);
 137     elem.style.display = "block";
 138     gRefSnapshots[id] = snapshotWindow(window, false);
 139     elem.style.display = "";
 140   }
 141 }
 142
 143 function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
 144   let compareResult = compareSnapshots(aSnap1, aSnap2, true);
 145   ok(compareResult[0],
 146      "flex container rendering should match expected (" + aMsg +")");
 147   if (!compareResult[0]) {
 148     todo(false, "TESTCASE: " + compareResult[1]);
 149     todo(false, "REFERENCE: "+ compareResult[2]);
 150   }
 151 }
 152
 153 function runOrderTestcase(aOrderTestcase) {
 154   // Sanity-check
 155   ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
 156   is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
 157
 158   document.getElementById("a").style.order = aOrderTestcase[0];
 159   document.getElementById("b").style.order = aOrderTestcase[1];
 160   document.getElementById("c").style.order = aOrderTestcase[2];
 161
 162   let snapshot = snapshotWindow(window, false);
 163   complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
 164                             aOrderTestcase);
 165
 166   // Clean up
 167   for (let id of ["a", "b", "c"]) {
 168     document.getElementById(id).style.order = "";
 169   }
 170 }
 171
 172 // Main Function
 173 function main() {
 174   initRefSnapshots();
 175
 176   // un-hide the flex container's parent
 177   let flexContainerParent = document.getElementById("flexContainerParent");
 178   flexContainerParent.style.display = "block";
 179
 180   // Initial sanity-check: should be in expected document order
 181   let initialSnapshot = snapshotWindow(window, false);
 182   complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots.abc,
 183                             "initial flex container rendering, " +
 184                             "no 'order' value yet");
 185
 186   // OK, now we run our tests
 187   gOrderTestcases.forEach(runOrderTestcase);
 188
 189   // Re-hide the flex container at the end
 190   flexContainerParent.style.display = "";
 191 }
 192
 193 main();
 194
 195 </script>
 196 </pre>
 197 </body>
 198 </html>