2012-10-12 01:33:24 +04:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
2013-11-09 19:53:03 +04:00
|
|
|
<!--
|
|
|
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=666041
|
|
|
|
|
-->
|
2012-10-12 01:33:24 +04:00
|
|
|
<head>
|
2013-11-09 19:53:03 +04:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Test for Bug 666041</title>
|
|
|
|
|
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
2012-10-12 01:33:24 +04:00
|
|
|
<script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
|
2013-11-09 19:53:03 +04:00
|
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
2012-10-12 01:33:24 +04:00
|
|
|
<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 {
|
2012-10-15 23:42:43 +04:00
|
|
|
display: flex;
|
2012-10-12 01:33:24 +04:00
|
|
|
width: 100px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
div#flexContainerParent {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2013-11-09 19:53:03 +04:00
|
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=666041">Mozilla Bug 666041</a>
|
2012-10-12 01:33:24 +04:00
|
|
|
<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
|
2017-04-06 05:31:47 +03:00
|
|
|
(its parent is display:none initially) -->
|
2012-10-12 01:33:24 +04:00
|
|
|
<div id="flexContainer">
|
|
|
|
|
<div id="a"></div>
|
|
|
|
|
<div id="b"></div>
|
|
|
|
|
<div id="c"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<pre id="test">
|
2017-02-23 00:10:07 +03:00
|
|
|
<script type="application/javascript">
|
2012-10-12 01:33:24 +04:00
|
|
|
"use strict";
|
|
|
|
|
|
2013-11-09 19:53:03 +04:00
|
|
|
/** Test for Bug 666041 **/
|
|
|
|
|
|
2012-10-12 01:33:24 +04:00
|
|
|
/* 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
|
2017-04-06 05:31:47 +03:00
|
|
|
let gRefSnapshots = {};
|
2012-10-12 01:33:24 +04:00
|
|
|
|
|
|
|
|
// 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.
|
2017-04-06 05:31:47 +03:00
|
|
|
let gOrderTestcases = [
|
2012-10-12 01:33:24 +04:00
|
|
|
// 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() {
|
2017-04-06 05:31:47 +03:00
|
|
|
let refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
|
|
|
|
|
for (let id of refIds) {
|
|
|
|
|
let elem = document.getElementById(id);
|
2012-10-12 01:33:24 +04:00
|
|
|
elem.style.display = "block";
|
2017-04-06 05:31:47 +03:00
|
|
|
gRefSnapshots[id] = snapshotWindow(window, false);
|
2012-10-12 01:33:24 +04:00
|
|
|
elem.style.display = "";
|
2017-04-06 05:31:47 +03:00
|
|
|
}
|
2012-10-12 01:33:24 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
|
2017-04-06 05:31:47 +03:00
|
|
|
let compareResult = compareSnapshots(aSnap1, aSnap2, true);
|
|
|
|
|
ok(compareResult[0],
|
|
|
|
|
"flex container rendering should match expected (" + aMsg +")");
|
2012-10-12 01:33:24 +04:00
|
|
|
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");
|
|
|
|
|
|
2012-10-15 23:42:43 +04:00
|
|
|
document.getElementById("a").style.order = aOrderTestcase[0];
|
|
|
|
|
document.getElementById("b").style.order = aOrderTestcase[1];
|
|
|
|
|
document.getElementById("c").style.order = aOrderTestcase[2];
|
2012-10-12 01:33:24 +04:00
|
|
|
|
2017-04-06 05:31:47 +03:00
|
|
|
let snapshot = snapshotWindow(window, false);
|
2012-10-12 01:33:24 +04:00
|
|
|
complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
|
|
|
|
|
aOrderTestcase);
|
|
|
|
|
|
|
|
|
|
// Clean up
|
2017-04-06 05:31:47 +03:00
|
|
|
for (let id of ["a", "b", "c"]) {
|
|
|
|
|
document.getElementById(id).style.order = "";
|
|
|
|
|
}
|
2012-10-12 01:33:24 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Main Function
|
|
|
|
|
function main() {
|
|
|
|
|
initRefSnapshots();
|
|
|
|
|
|
|
|
|
|
// un-hide the flex container's parent
|
2017-04-06 05:31:47 +03:00
|
|
|
let flexContainerParent = document.getElementById("flexContainerParent");
|
2012-10-12 01:33:24 +04:00
|
|
|
flexContainerParent.style.display = "block";
|
|
|
|
|
|
|
|
|
|
// Initial sanity-check: should be in expected document order
|
2017-04-06 05:31:47 +03:00
|
|
|
let initialSnapshot = snapshotWindow(window, false);
|
2012-10-12 01:33:24 +04:00
|
|
|
complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots["abc"],
|
2017-04-06 05:31:47 +03:00
|
|
|
"initial flex container rendering, " +
|
|
|
|
|
"no 'order' value yet");
|
2012-10-12 01:33:24 +04:00
|
|
|
|
|
|
|
|
// 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>
|
