layout/style/test/test_flexbox_order_table.html@7e26c7da4463
layout/style/test/test_flexbox_order_table.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
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 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, div#b, div#c {
25 display: table;
26 }
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">
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>
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>
77 </div>
78 <pre id="test">
79 <script type="application/javascript;version=1.7">
80 "use strict";
82 /** Test for Bug 799775 **/
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 */
91 // DATA
92 // ----
94 // This will store snapshots of our reference divs
95 var gRefSnapshots = {};
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 var 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"],
110 // Test negative values
111 [ 1, -5, -2, "bca"],
112 [ -50, 0, -2, "acb"],
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"],
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 ];
130 // FUNCTIONS
131 // ---------
133 function initRefSnapshots() {
134 var refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
135 refIds.forEach(function(aRefId) {
136 var elem = document.getElementById(aRefId);
137 elem.style.display = "block";
138 gRefSnapshots[aRefId] = snapshotWindow(window, false);
139 elem.style.display = "";
140 });
141 }
143 function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
144 var compareResult = compareSnapshots(aSnap1, aSnap2, true);
145 ok(compareResult[0], "flex container rendering should match expected (" + aMsg +")");
146 if (!compareResult[0]) {
147 todo(false, "TESTCASE: " + compareResult[1]);
148 todo(false, "REFERENCE: "+ compareResult[2]);
149 }
150 }
152 function runOrderTestcase(aOrderTestcase) {
153 // Sanity-check
154 ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
155 is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
157 document.getElementById("a").style.order = aOrderTestcase[0];
158 document.getElementById("b").style.order = aOrderTestcase[1];
159 document.getElementById("c").style.order = aOrderTestcase[2];
161 var snapshot = snapshotWindow(window, false);
162 complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
163 aOrderTestcase);
165 // Clean up
166 document.getElementById("a").style.order = "";
167 document.getElementById("b").style.order = "";
168 document.getElementById("c").style.order = "";
169 }
171 // Main Function
172 function main() {
173 initRefSnapshots();
175 // un-hide the flex container's parent
176 var flexContainerParent = document.getElementById("flexContainerParent");
177 flexContainerParent.style.display = "block";
179 // Initial sanity-check: should be in expected document order
180 var initialSnapshot = snapshotWindow(window, false);
181 complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots["abc"],
182 "initial flex container rendering, no 'order' value yet");
184 // OK, now we run our tests
185 gOrderTestcases.forEach(runOrderTestcase);
187 // Re-hide the flex container at the end
188 flexContainerParent.style.display = "";
189 }
191 main();
193 </script>
194 </pre>
195 </body>
196 </html>
