diff options
Diffstat (limited to 'layout/style/test/test_flexbox_order.html')
| -rw-r--r-- | layout/style/test/test_flexbox_order.html | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/layout/style/test/test_flexbox_order.html b/layout/style/test/test_flexbox_order.html new file mode 100644 index 0000000000..64b5431da8 --- /dev/null +++ b/layout/style/test/test_flexbox_order.html @@ -0,0 +1,194 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=666041 +--> +<head> + <meta charset="utf-8"> + <title>Test for Bug 666041</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <script src="/tests/SimpleTest/WindowSnapshot.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> + <style type="text/css"> + + div.ref { + display: none; + height: 30px; + } + + refA, refB, refC { + display: block; + float: left; + } + + div#a, refA { + background: lightgreen; + width: 20px; + height: 30px; + } + div#b, refB { + background: orange; + width: 30px; + height: 30px; + } + div#c, refC { + background: blue; + width: 50px; + height: 30px; + } + div#flexContainer { + display: flex; + width: 100px; + height: 30px; + } + div#flexContainerParent { + display: none; + } + </style> +</head> +<body> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=666041">Mozilla Bug 666041</a> +<div id="display"> + + <!-- Reference cases (display:none; only shown during initRefSnapshots) --> + <div id="references"> + <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div> + <div class="ref" id="acb"><refA></refA><refC></refC><refB></refB></div> + <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div> + <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div> + <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div> + <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div> + </div> + + <div id="flexContainerParent"> + <!-- The flex container that we'll be testing + (its parent is display:none initially) --> + <div id="flexContainer"> + <div id="a"></div> + <div id="b"></div> + <div id="c"></div> + </div> + </div> + +</div> +<pre id="test"> +<script type="application/javascript"> +"use strict"; + +/** Test for Bug 666041 **/ + +/* This testcase ensures that we honor the "order" property when ordering + * flex items within a flex container. + * + * Note: The items in this testcase don't overlap, so this testcase does _not_ + * test paint ordering. It only tests horizontal ordering in a flex container. + */ + +// DATA +// ---- + +// This will store snapshots of our reference divs +let gRefSnapshots = {}; + +// These are the sets of 'order' values that we'll test. +// The first three values in each array are the 'order' values that we'll +// assign to elements a, b, and c (respectively). The final value in each +// array is the ID of the expected reference rendering. +let gOrderTestcases = [ + // The 6 basic permutations: + [ 1, 2, 3, "abc"], + [ 1, 3, 2, "acb"], + [ 2, 1, 3, "bac"], + [ 2, 3, 1, "cab"], + [ 3, 1, 2, "bca"], + [ 3, 2, 1, "cba"], + + // Test negative values + [ 1, -5, -2, "bca"], + [ -50, 0, -2, "acb"], + + // Non-integers should be ignored. + // (So, they'll leave their div with the initial 'order' value, which is 0.) + [ 1, 1.5, 2, "bac"], + [ 2.5, 3.4, 1, "abc"], + [ 0.5, 1, 1.5, "acb"], + + // Decimal values that happen to be equal to integers (e.g. "3.0") are still + // <numbers>, and are _not_ <integers>. + // Source: http://www.w3.org/TR/CSS21/syndata.html#value-def-integer + // (So, they'll leave their div with the initial 'order' value, which is 0.) + // (NOTE: We have to use quotes around "3.0" and "2.0" to be sure JS doesn't + // coerce them into integers before we get a chance to set them in CSS.) + [ "3.0", "2.0", "1.0", "abc"], + [ 3, "2.0", 1, "bca"], +]; + +// FUNCTIONS +// --------- + +function initRefSnapshots() { + let refIds = ["abc", "acb", "bac", "bca", "cab", "cba"]; + for (let id of refIds) { + let elem = document.getElementById(id); + elem.style.display = "block"; + gRefSnapshots[id] = snapshotWindow(window, false); + elem.style.display = ""; + } +} + +function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) { + let compareResult = compareSnapshots(aSnap1, aSnap2, true); + ok(compareResult[0], + "flex container rendering should match expected (" + aMsg +")"); + if (!compareResult[0]) { + todo(false, "TESTCASE: " + compareResult[1]); + todo(false, "REFERENCE: "+ compareResult[2]); + } +} + +function runOrderTestcase(aOrderTestcase) { + // Sanity-check + ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array"); + is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements"); + + document.getElementById("a").style.order = aOrderTestcase[0]; + document.getElementById("b").style.order = aOrderTestcase[1]; + document.getElementById("c").style.order = aOrderTestcase[2]; + + let snapshot = snapshotWindow(window, false); + complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]], + aOrderTestcase); + + // Clean up + for (let id of ["a", "b", "c"]) { + document.getElementById(id).style.order = ""; + } +} + +// Main Function +function main() { + initRefSnapshots(); + + // un-hide the flex container's parent + let flexContainerParent = document.getElementById("flexContainerParent"); + flexContainerParent.style.display = "block"; + + // Initial sanity-check: should be in expected document order + let initialSnapshot = snapshotWindow(window, false); + complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots.abc, + "initial flex container rendering, " + + "no 'order' value yet"); + + // OK, now we run our tests + gOrderTestcases.forEach(runOrderTestcase); + + // Re-hide the flex container at the end + flexContainerParent.style.display = ""; +} + +main(); + +</script> +</pre> +</body> +</html> |