The Tor Browser: layout/style/test/test_flexbox_order.html@8bccb770b82d (annotated)

layout/style/test/test_flexbox_order.html@8bccb770b82d (annotated)

layout/style/test/test_flexbox_order.html

Wed, 31 Dec 2014 13:27:57 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 13:27:57 +0100
branch: TOR_BUG_3246
changeset 6: 8bccb770b82d
permissions: -rw-r--r--

Ignore runtime configuration files generated during quality assurance.

 <!DOCTYPE HTML>
 <html>
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=666041
 -->
 <head>
   <meta charset="utf-8">
   <title>Test for Bug 666041</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   <style type="text/css">
     div.ref {
       display: none;
       height: 30px;
     }
     refA, refB, refC {
       display: block;
       float: left;
     }
     div#a, refA {
       background: lightgreen;
       width: 20px;
       height: 30px;
     }
     div#b, refB {
       background: orange;
       width: 30px;
       height: 30px;
     }
     div#c, refC {
       background: blue;
       width: 50px;
       height: 30px;
     }
     div#flexContainer {
       display: flex;
       width: 100px;
       height: 30px;
     }
     div#flexContainerParent {
       display: none;
     }
   </style>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=666041">Mozilla Bug 666041</a>
 <div id="display">
   <!-- Reference cases (display:none; only shown during initRefSnapshots) -->
   <div id="references">
     <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div>
     <div class="ref" id="acb"><refA></refA><refC></refC><refB></refB></div>
     <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div>
     <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div>
     <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div>
     <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div>
   </div>
   <div id="flexContainerParent">
     <!-- The flex container that we'll be testing
          (its  parent is display:none initially) -->
     <div id="flexContainer">
       <div id="a"></div>
       <div id="b"></div>
       <div id="c"></div>
     </div>
   </div>
 </div>
 <pre id="test">
 <script type="application/javascript;version=1.7">
 "use strict";
 /** Test for Bug 666041 **/
 /* This testcase ensures that we honor the "order" property when ordering
  * flex items within a flex container.
  *
  * Note: The items in this testcase don't overlap, so this testcase does _not_
  * test paint ordering.  It only tests horizontal ordering in a flex container.
  */
 // DATA
 // ----
 // This will store snapshots of our reference divs
 var gRefSnapshots = {};
 // These are the sets of 'order' values that we'll test.
 // The first three values in each array are the 'order' values that we'll
 // assign to elements a, b, and c (respectively).  The final value in each
 // array is the ID of the expected reference rendering.
 var gOrderTestcases = [
   // The 6 basic permutations:
   [ 1, 2, 3, "abc"],
   [ 1, 3, 2, "acb"],
   [ 2, 1, 3, "bac"],
   [ 2, 3, 1, "cab"],
   [ 3, 1, 2, "bca"],
   [ 3, 2, 1, "cba"],
   // Test negative values
   [ 1, -5, -2, "bca"],
   [ -50, 0, -2, "acb"],
   // Non-integers should be ignored.
   // (So, they'll leave their div with the initial 'order' value, which is 0.)
   [ 1,   1.5, 2,   "bac"],
   [ 2.5, 3.4, 1,   "abc"],
   [ 0.5, 1,   1.5, "acb"],
   // Decimal values that happen to be equal to integers (e.g. "3.0") are still
   // <numbers>, and are _not_ <integers>.
   //  Source: http://www.w3.org/TR/CSS21/syndata.html#value-def-integer
   // (So, they'll leave their div with the initial 'order' value, which is 0.)
   // (NOTE: We have to use quotes around "3.0" and "2.0" to be sure JS doesn't
   // coerce them into integers before we get a chance to set them in CSS.)
   [ "3.0", "2.0", "1.0", "abc"],
   [ 3, "2.0", 1, "bca"],
 ];
 // FUNCTIONS
 // ---------
 function initRefSnapshots() {
   var refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
   refIds.forEach(function(aRefId) {
     var elem = document.getElementById(aRefId);
     elem.style.display = "block";
     gRefSnapshots[aRefId] = snapshotWindow(window, false);
     elem.style.display = "";
   });
 }
 function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
   var compareResult = compareSnapshots(aSnap1, aSnap2, true);
   ok(compareResult[0], "flex container rendering should match expected (" + aMsg +")");
   if (!compareResult[0]) {
     todo(false, "TESTCASE: " + compareResult[1]);
     todo(false, "REFERENCE: "+ compareResult[2]);
   }
 }
 function runOrderTestcase(aOrderTestcase) {
   // Sanity-check
   ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
   is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
   document.getElementById("a").style.order = aOrderTestcase[0];
   document.getElementById("b").style.order = aOrderTestcase[1];
   document.getElementById("c").style.order = aOrderTestcase[2];
   var snapshot = snapshotWindow(window, false);
   complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
                             aOrderTestcase);
   // Clean up
   document.getElementById("a").style.order = "";
   document.getElementById("b").style.order = "";
   document.getElementById("c").style.order = "";
 }
 // Main Function
 function main() {
   initRefSnapshots();
   // un-hide the flex container's parent
   var flexContainerParent = document.getElementById("flexContainerParent");
   flexContainerParent.style.display = "block";
   // Initial sanity-check: should be in expected document order
   var initialSnapshot = snapshotWindow(window, false);
   complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots["abc"],
                             "initial flex container rendering, no 'order' value yet");
   // OK, now we run our tests
   gOrderTestcases.forEach(runOrderTestcase);
   // Re-hide the flex container at the end
   flexContainerParent.style.display = "";
 }
 main();
 </script>
 </pre>
 </body>
 </html>

The Tor Browser / annotate

layout/style/test/test_flexbox_order.html@8bccb770b82d (annotated)

layout/style/test/test_flexbox_order.html