/* This testcase ensures that we honor the "order" property when ordering
* tables as 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"],
// 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");
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>
Messung V0.5
¤ Dauer der Verarbeitung: 0.19 Sekunden
(vorverarbeitet)
¤
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.
