test_flexbox_order.html (5653B)
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 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, 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"> 52 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> 62 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> 72 73 </div> 74 <pre id="test"> 75 <script type="application/javascript"> 76 "use strict"; 77 78 /** Test for Bug 666041 */ 79 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 */ 86 87 // DATA 88 // ---- 89 90 // This will store snapshots of our reference divs 91 let gRefSnapshots = {}; 92 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 let 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"], 105 106 // Test negative values 107 [ 1, -5, -2, "bca"], 108 [ -50, 0, -2, "acb"], 109 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"], 115 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 ]; 125 126 // FUNCTIONS 127 // --------- 128 129 function initRefSnapshots() { 130 let refIds = ["abc", "acb", "bac", "bca", "cab", "cba"]; 131 for (let id of refIds) { 132 let elem = document.getElementById(id); 133 elem.style.display = "block"; 134 gRefSnapshots[id] = snapshotWindow(window, false); 135 elem.style.display = ""; 136 } 137 } 138 139 function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) { 140 let compareResult = compareSnapshots(aSnap1, aSnap2, true); 141 ok(compareResult[0], 142 "flex container rendering should match expected (" + aMsg +")"); 143 if (!compareResult[0]) { 144 todo(false, "TESTCASE: " + compareResult[1]); 145 todo(false, "REFERENCE: "+ compareResult[2]); 146 } 147 } 148 149 function runOrderTestcase(aOrderTestcase) { 150 // Sanity-check 151 ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array"); 152 is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements"); 153 154 document.getElementById("a").style.order = aOrderTestcase[0]; 155 document.getElementById("b").style.order = aOrderTestcase[1]; 156 document.getElementById("c").style.order = aOrderTestcase[2]; 157 158 let snapshot = snapshotWindow(window, false); 159 complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]], 160 aOrderTestcase); 161 162 // Clean up 163 for (let id of ["a", "b", "c"]) { 164 document.getElementById(id).style.order = ""; 165 } 166 } 167 168 // Main Function 169 function main() { 170 initRefSnapshots(); 171 172 // un-hide the flex container's parent 173 let flexContainerParent = document.getElementById("flexContainerParent"); 174 flexContainerParent.style.display = "block"; 175 176 // Initial sanity-check: should be in expected document order 177 let initialSnapshot = snapshotWindow(window, false); 178 complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots.abc, 179 "initial flex container rendering, " + 180 "no 'order' value yet"); 181 182 // OK, now we run our tests 183 gOrderTestcases.forEach(runOrderTestcase); 184 185 // Re-hide the flex container at the end 186 flexContainerParent.style.display = ""; 187 } 188 189 main(); 190 191 </script> 192 </pre> 193 </body> 194 </html>