layout/style/test/test_flexbox_order.html@deefc01c0e14
layout/style/test/test_flexbox_order.html
Thu, 15 Jan 2015 21:03:48 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:03:48 +0100
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
- permissions
- -rw-r--r--
Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=666041
5 -->
6 <head>
7 <meta charset="utf-8">
8 <title>Test for Bug 666041</title>
9 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
10 <script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
12 <style type="text/css">
14 div.ref {
15 display: none;
16 height: 30px;
17 }
19 refA, refB, refC {
20 display: block;
21 float: left;
22 }
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 </style>
48 </head>
49 <body>
50 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=666041">Mozilla Bug 666041</a>
51 <div id="display">
53 <!-- Reference cases (display:none; only shown during initRefSnapshots) -->
54 <div id="references">
55 <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div>
56 <div class="ref" id="acb"><refA></refA><refC></refC><refB></refB></div>
57 <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div>
58 <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div>
59 <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div>
60 <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div>
61 </div>
63 <div id="flexContainerParent">
64 <!-- The flex container that we'll be testing
65 (its parent is display:none initially) -->
66 <div id="flexContainer">
67 <div id="a"></div>
68 <div id="b"></div>
69 <div id="c"></div>
70 </div>
71 </div>
73 </div>
74 <pre id="test">
75 <script type="application/javascript;version=1.7">
76 "use strict";
78 /** Test for Bug 666041 **/
80 /* This testcase ensures that we honor the "order" property when ordering
81 * flex items within a flex container.
82 *
83 * Note: The items in this testcase don't overlap, so this testcase does _not_
84 * test paint ordering. It only tests horizontal ordering in a flex container.
85 */
87 // DATA
88 // ----
90 // This will store snapshots of our reference divs
91 var gRefSnapshots = {};
93 // These are the sets of 'order' values that we'll test.
94 // The first three values in each array are the 'order' values that we'll
95 // assign to elements a, b, and c (respectively). The final value in each
96 // array is the ID of the expected reference rendering.
97 var gOrderTestcases = [
98 // The 6 basic permutations:
99 [ 1, 2, 3, "abc"],
100 [ 1, 3, 2, "acb"],
101 [ 2, 1, 3, "bac"],
102 [ 2, 3, 1, "cab"],
103 [ 3, 1, 2, "bca"],
104 [ 3, 2, 1, "cba"],
106 // Test negative values
107 [ 1, -5, -2, "bca"],
108 [ -50, 0, -2, "acb"],
110 // Non-integers should be ignored.
111 // (So, they'll leave their div with the initial 'order' value, which is 0.)
112 [ 1, 1.5, 2, "bac"],
113 [ 2.5, 3.4, 1, "abc"],
114 [ 0.5, 1, 1.5, "acb"],
116 // Decimal values that happen to be equal to integers (e.g. "3.0") are still
117 // <numbers>, and are _not_ <integers>.
118 // Source: http://www.w3.org/TR/CSS21/syndata.html#value-def-integer
119 // (So, they'll leave their div with the initial 'order' value, which is 0.)
120 // (NOTE: We have to use quotes around "3.0" and "2.0" to be sure JS doesn't
121 // coerce them into integers before we get a chance to set them in CSS.)
122 [ "3.0", "2.0", "1.0", "abc"],
123 [ 3, "2.0", 1, "bca"],
124 ];
126 // FUNCTIONS
127 // ---------
129 function initRefSnapshots() {
130 var refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
131 refIds.forEach(function(aRefId) {
132 var elem = document.getElementById(aRefId);
133 elem.style.display = "block";
134 gRefSnapshots[aRefId] = snapshotWindow(window, false);
135 elem.style.display = "";
136 });
137 }
139 function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
140 var compareResult = compareSnapshots(aSnap1, aSnap2, true);
141 ok(compareResult[0], "flex container rendering should match expected (" + aMsg +")");
142 if (!compareResult[0]) {
143 todo(false, "TESTCASE: " + compareResult[1]);
144 todo(false, "REFERENCE: "+ compareResult[2]);
145 }
146 }
148 function runOrderTestcase(aOrderTestcase) {
149 // Sanity-check
150 ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
151 is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
153 document.getElementById("a").style.order = aOrderTestcase[0];
154 document.getElementById("b").style.order = aOrderTestcase[1];
155 document.getElementById("c").style.order = aOrderTestcase[2];
157 var snapshot = snapshotWindow(window, false);
158 complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
159 aOrderTestcase);
161 // Clean up
162 document.getElementById("a").style.order = "";
163 document.getElementById("b").style.order = "";
164 document.getElementById("c").style.order = "";
165 }
167 // Main Function
168 function main() {
169 initRefSnapshots();
171 // un-hide the flex container's parent
172 var flexContainerParent = document.getElementById("flexContainerParent");
173 flexContainerParent.style.display = "block";
175 // Initial sanity-check: should be in expected document order
176 var initialSnapshot = snapshotWindow(window, false);
177 complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots["abc"],
178 "initial flex container rendering, no 'order' value yet");
180 // OK, now we run our tests
181 gOrderTestcases.forEach(runOrderTestcase);
183 // Re-hide the flex container at the end
184 flexContainerParent.style.display = "";
185 }
187 main();
189 </script>
190 </pre>
191 </body>
192 </html>
