mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-27 04:05:32 +00:00
ede8c44ef2
This excludes dom/, otherwise the file size is too large for phabricator to handle. This is an autogenerated commit to handle scripts loading mochitest harness files, in the simple case where the script src is on the same line as the tag. This was generated with https://bug1544322.bmoattachments.org/attachment.cgi?id=9058170 using the `--part 2` argument. Differential Revision: https://phabricator.services.mozilla.com/D27456 --HG-- extra : moz-landing-system : lando
179 lines
6.4 KiB
HTML
179 lines
6.4 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=783415
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Test "display" values of content in a flex container (Bug 783415)</title>
|
|
<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";
|
|
|
|
/**
|
|
* Test "display" values of content in a flex container (Bug 783415)
|
|
* ================================================================
|
|
*
|
|
* 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>
|