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