Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/style/test/mochitest.toml
<!--
-->
<head>
<meta charset="utf-8"/>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783415">Mozilla Bug 783415</a>
<div id="display">
<div id="wrapper"></div>
</div>
<pre id="test">
<script type="application/javascript">
<![CDATA[
"use strict";
/**
* ================================================================
*
* This test creates content with a variety of specified "display" values
* and checks what the computed "display" is when we put that content
* in a flex container. (Generally, it'll be the "blockified" form of the
* specified display-value.)
*/
/*
* Utility function for getting computed style of "display".
*
* @arg aElem The element to query for its computed "display" value.
* @return The computed display value
*/
function getComputedDisplay(aElem) {
return window.getComputedStyle(aElem).display;
}
/*
* Function used for testing a given specified "display" value and checking
* its computed value against expectations.
*
* @arg aSpecifiedDisplay
* The specified value of "display" that we should test.
*
* @arg aExpectedDisplayAsFlexContainerChild
* (optional) The expected computed "display" when an element with
* aSpecifiedDisplay is a child of a flex container. If omitted,
* this argument defaults to aSpecifiedDisplay.
*
* @arg aExpectedDisplayAsOutOfFlowFlexContainerChild
* (optional) The expected computed "display" when an element with
* aSpecifiedDisplay is a child of a flex container *and* has
* position:[fixed|absolute] or float: [left|right] set. If omitted,
* this argument defaults to aExpectedDisplayAsFlexContainerChild.
*/
function testDisplayValue(aSpecifiedDisplay,
aExpectedDisplayAsFlexContainerChild,
aExpectedDisplayAsOutOfFlowFlexContainerChild) {
// DEFAULT-ARGUMENT-VALUES MAGIC: Make 2nd and 3rd args each default to
// the preceding arg, if they're unspecified.
if (typeof aExpectedDisplayAsFlexContainerChild == "undefined") {
aExpectedDisplayAsFlexContainerChild = aSpecifiedDisplay;
}
if (typeof aExpectedDisplayAsOutOfFlowFlexContainerChild == "undefined") {
aExpectedDisplayAsOutOfFlowFlexContainerChild =
aExpectedDisplayAsFlexContainerChild;
}
// FIRST: Create a node with display:aSpecifiedDisplay, and make sure that
// this original display-type is honored in a non-flex-container context.
let wrapper = document.getElementById("wrapper");
let node = document.createElement("div");
wrapper.appendChild(node);
node.style.display = aSpecifiedDisplay;
is(getComputedDisplay(node), aSpecifiedDisplay,
"checking computed value of 'display: " + aSpecifiedDisplay + "' " +
"should be the same as specified value, when parent is a block");
// SECOND: We make our node's parent into a flex container, and make sure
// that this produces the correct computed "display" value.
wrapper.style.display = "flex";
is(getComputedDisplay(node), aExpectedDisplayAsFlexContainerChild,
"checking computed value of 'display: " + aSpecifiedDisplay + "' " +
"when parent is a flex container");
// THIRD: We set "float" and "position" on our node (still inside of a
// flex container), and make sure that this produces the correct computed
// "display" value.
node.style.cssFloat = "left";
is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
"checking computed value of 'display: " + aSpecifiedDisplay + "' " +
"when parent is a flex container and we're floated left");
node.style.cssFloat = "";
node.style.cssFloat = "right";
is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
"checking computed value of 'display: " + aSpecifiedDisplay + "' " +
"when parent is a flex container and we're floated right");
node.style.cssFloat = "";
node.style.position = "absolute";
is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
"checking computed value of 'display: " + aSpecifiedDisplay + "' " +
"when parent is a flex container and we're abs-pos");
node.style.position = "";
node.style.position = "fixed";
is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
"checking computed value of 'display: " + aSpecifiedDisplay + "' " +
"when parent is a flex container and we're fixed-pos");
node.style.position = "";
// FINALLY: Clean up -- remove the node we created, and turn the wrapper
// back into its original display type (a block).
wrapper.removeChild(node);
wrapper.style.display = "";
}
/*
* Main test function
*/
function main() {
testDisplayValue("none");
testDisplayValue("block");
testDisplayValue("flex");
testDisplayValue("inline-flex", "flex");
testDisplayValue("list-item");
testDisplayValue("table");
testDisplayValue("inline-table", "table");
// These values all compute to "block" in a flex container. Do them in a
// loop, so that I don't have to type "block" a zillion times.
var dispValsThatComputeToBlockInAFlexContainer = [
"inline",
"inline-block",
];
dispValsThatComputeToBlockInAFlexContainer.forEach(
function(aSpecifiedDisplay) {
testDisplayValue(aSpecifiedDisplay, "block");
});
// Table-parts are special. When they're a child of a flex container,
// they normally don't get blockified -- instead, they trigger table-fixup
// and get wrapped in a table. So, their expected display as the child of
// a flex container is the same as their specified display. BUT, if
// we apply out-of-flow styling, then *that* blockifies them before
// we get to the table-fixup stage -- so then, their computed display
// is "block".
let tablePartsDispVals = [
"table-row-group",
"table-column",
"table-column-group",
"table-header-group",
"table-footer-group",
"table-row",
"table-cell",
"table-caption"
];
tablePartsDispVals.forEach(
function(aSpecifiedDisplay) {
testDisplayValue(aSpecifiedDisplay, "block", "block");
});
}
main();
]]>
</script>
</pre>
</body>
</html>