The Tor Browser / file comparison
comparison: layout/style/test/test_flexbox_order_table.html
layout/style/test/test_flexbox_order_table.html
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
equal
deleted
inserted
replaced
| -1:000000000000 | 0:3dd77928c5da |
|---|---|
| 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"> | |
| 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;version=1.7"> | |
| 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 var 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 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"], | |
| 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 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 } | |
| 142 | |
| 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 } | |
| 151 | |
| 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"); | |
| 156 | |
| 157 document.getElementById("a").style.order = aOrderTestcase[0]; | |
| 158 document.getElementById("b").style.order = aOrderTestcase[1]; | |
| 159 document.getElementById("c").style.order = aOrderTestcase[2]; | |
| 160 | |
| 161 var snapshot = snapshotWindow(window, false); | |
| 162 complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]], | |
| 163 aOrderTestcase); | |
| 164 | |
| 165 // Clean up | |
| 166 document.getElementById("a").style.order = ""; | |
| 167 document.getElementById("b").style.order = ""; | |
| 168 document.getElementById("c").style.order = ""; | |
| 169 } | |
| 170 | |
| 171 // Main Function | |
| 172 function main() { | |
| 173 initRefSnapshots(); | |
| 174 | |
| 175 // un-hide the flex container's parent | |
| 176 var flexContainerParent = document.getElementById("flexContainerParent"); | |
| 177 flexContainerParent.style.display = "block"; | |
| 178 | |
| 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"); | |
| 183 | |
| 184 // OK, now we run our tests | |
| 185 gOrderTestcases.forEach(runOrderTestcase); | |
| 186 | |
| 187 // Re-hide the flex container at the end | |
| 188 flexContainerParent.style.display = ""; | |
| 189 } | |
| 190 | |
| 191 main(); | |
| 192 | |
| 193 </script> | |
| 194 </pre> | |
| 195 </body> | |
| 196 </html> |
