1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_flexbox_order_table.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,196 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=799775
1.8 +-->
1.9 +<head>
1.10 + <meta charset="utf-8">
1.11 + <title>Test for Bug 799775</title>
1.12 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.13 + <script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
1.14 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.15 + <style type="text/css">
1.16 +
1.17 + div.ref {
1.18 + display: none;
1.19 + height: 30px;
1.20 + }
1.21 +
1.22 + refA, refB, refC {
1.23 + display: block;
1.24 + float: left;
1.25 + }
1.26 +
1.27 + div#a, div#b, div#c {
1.28 + display: table;
1.29 + }
1.30 +
1.31 + div#a, refA {
1.32 + background: lightgreen;
1.33 + width: 20px;
1.34 + height: 30px;
1.35 + }
1.36 + div#b, refB {
1.37 + background: orange;
1.38 + width: 30px;
1.39 + height: 30px;
1.40 + }
1.41 + div#c, refC {
1.42 + background: blue;
1.43 + width: 50px;
1.44 + height: 30px;
1.45 + }
1.46 + div#flexContainer {
1.47 + display: flex;
1.48 + width: 100px;
1.49 + height: 30px;
1.50 + }
1.51 + div#flexContainerParent {
1.52 + display: none;
1.53 + }
1.54 + </style>
1.55 +</head>
1.56 +<body>
1.57 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=799775">Mozilla Bug 799775</a>
1.58 +<div id="display">
1.59 +
1.60 + <!-- Reference cases (display:none; only shown during initRefSnapshots) -->
1.61 + <div id="references">
1.62 + <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div>
1.63 + <div class="ref" id="acb"><refA></refA><refC></refC><refB></refB></div>
1.64 + <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div>
1.65 + <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div>
1.66 + <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div>
1.67 + <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div>
1.68 + </div>
1.69 +
1.70 + <div id="flexContainerParent">
1.71 + <!-- The flex container that we'll be testing
1.72 + (its parent is display:none initially) -->
1.73 + <div id="flexContainer">
1.74 + <div id="a"></div>
1.75 + <div id="b"></div>
1.76 + <div id="c"></div>
1.77 + </div>
1.78 + </div>
1.79 +
1.80 +</div>
1.81 +<pre id="test">
1.82 +<script type="application/javascript;version=1.7">
1.83 +"use strict";
1.84 +
1.85 +/** Test for Bug 799775 **/
1.86 +
1.87 +/* This testcase ensures that we honor the "order" property when ordering
1.88 + * tables as flex items within a flex container.
1.89 + *
1.90 + * Note: The items in this testcase don't overlap, so this testcase does _not_
1.91 + * test paint ordering. It only tests horizontal ordering in a flex container.
1.92 + */
1.93 +
1.94 +// DATA
1.95 +// ----
1.96 +
1.97 +// This will store snapshots of our reference divs
1.98 +var gRefSnapshots = {};
1.99 +
1.100 +// These are the sets of 'order' values that we'll test.
1.101 +// The first three values in each array are the 'order' values that we'll
1.102 +// assign to elements a, b, and c (respectively). The final value in each
1.103 +// array is the ID of the expected reference rendering.
1.104 +var gOrderTestcases = [
1.105 + // The 6 basic permutations:
1.106 + [ 1, 2, 3, "abc"],
1.107 + [ 1, 3, 2, "acb"],
1.108 + [ 2, 1, 3, "bac"],
1.109 + [ 2, 3, 1, "cab"],
1.110 + [ 3, 1, 2, "bca"],
1.111 + [ 3, 2, 1, "cba"],
1.112 +
1.113 + // Test negative values
1.114 + [ 1, -5, -2, "bca"],
1.115 + [ -50, 0, -2, "acb"],
1.116 +
1.117 + // Non-integers should be ignored.
1.118 + // (So, they'll leave their div with the initial 'order' value, which is 0.)
1.119 + [ 1, 1.5, 2, "bac"],
1.120 + [ 2.5, 3.4, 1, "abc"],
1.121 + [ 0.5, 1, 1.5, "acb"],
1.122 +
1.123 + // Decimal values that happen to be equal to integers (e.g. "3.0") are still
1.124 + // <numbers>, and are _not_ <integers>.
1.125 + // Source: http://www.w3.org/TR/CSS21/syndata.html#value-def-integer
1.126 + // (So, they'll leave their div with the initial 'order' value, which is 0.)
1.127 + // (NOTE: We have to use quotes around "3.0" and "2.0" to be sure JS doesn't
1.128 + // coerce them into integers before we get a chance to set them in CSS.)
1.129 + [ "3.0", "2.0", "1.0", "abc"],
1.130 + [ 3, "2.0", 1, "bca"],
1.131 +];
1.132 +
1.133 +// FUNCTIONS
1.134 +// ---------
1.135 +
1.136 +function initRefSnapshots() {
1.137 + var refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
1.138 + refIds.forEach(function(aRefId) {
1.139 + var elem = document.getElementById(aRefId);
1.140 + elem.style.display = "block";
1.141 + gRefSnapshots[aRefId] = snapshotWindow(window, false);
1.142 + elem.style.display = "";
1.143 + });
1.144 +}
1.145 +
1.146 +function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
1.147 + var compareResult = compareSnapshots(aSnap1, aSnap2, true);
1.148 + ok(compareResult[0], "flex container rendering should match expected (" + aMsg +")");
1.149 + if (!compareResult[0]) {
1.150 + todo(false, "TESTCASE: " + compareResult[1]);
1.151 + todo(false, "REFERENCE: "+ compareResult[2]);
1.152 + }
1.153 +}
1.154 +
1.155 +function runOrderTestcase(aOrderTestcase) {
1.156 + // Sanity-check
1.157 + ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
1.158 + is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
1.159 +
1.160 + document.getElementById("a").style.order = aOrderTestcase[0];
1.161 + document.getElementById("b").style.order = aOrderTestcase[1];
1.162 + document.getElementById("c").style.order = aOrderTestcase[2];
1.163 +
1.164 + var snapshot = snapshotWindow(window, false);
1.165 + complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
1.166 + aOrderTestcase);
1.167 +
1.168 + // Clean up
1.169 + document.getElementById("a").style.order = "";
1.170 + document.getElementById("b").style.order = "";
1.171 + document.getElementById("c").style.order = "";
1.172 +}
1.173 +
1.174 +// Main Function
1.175 +function main() {
1.176 + initRefSnapshots();
1.177 +
1.178 + // un-hide the flex container's parent
1.179 + var flexContainerParent = document.getElementById("flexContainerParent");
1.180 + flexContainerParent.style.display = "block";
1.181 +
1.182 + // Initial sanity-check: should be in expected document order
1.183 + var initialSnapshot = snapshotWindow(window, false);
1.184 + complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots["abc"],
1.185 + "initial flex container rendering, no 'order' value yet");
1.186 +
1.187 + // OK, now we run our tests
1.188 + gOrderTestcases.forEach(runOrderTestcase);
1.189 +
1.190 + // Re-hide the flex container at the end
1.191 + flexContainerParent.style.display = "";
1.192 +}
1.193 +
1.194 +main();
1.195 +
1.196 +</script>
1.197 +</pre>
1.198 +</body>
1.199 +</html>
