1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_flexbox_child_display_values.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,189 @@
1.4 +<html xmlns="http://www.w3.org/1999/xhtml">
1.5 +<!--
1.6 +https://bugzilla.mozilla.org/show_bug.cgi?id=783415
1.7 +-->
1.8 +<head>
1.9 + <meta charset="utf-8"/>
1.10 + <title>Test "display" values of content in a flex container (Bug 783415)</title>
1.11 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.12 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.13 +</head>
1.14 +<body>
1.15 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783415">Mozilla Bug 783415</a>
1.16 +<div id="display">
1.17 + <div id="wrapper"></div>
1.18 +</div>
1.19 +<pre id="test">
1.20 +<script type="application/javascript;version=1.7">
1.21 +<![CDATA[
1.22 +"use strict";
1.23 +
1.24 +/**
1.25 + * Test "display" values of content in a flex container (Bug 783415)
1.26 + * ================================================================
1.27 + *
1.28 + * This test creates content with a variety of specified "display" values
1.29 + * and checks what the computed "display" is when we put that content
1.30 + * in a flex container. (Generally, it'll be the "blockified" form of the
1.31 + * specified display-value.)
1.32 + */
1.33 +
1.34 +/*
1.35 + * Utility function for getting computed style of "display".
1.36 + *
1.37 + * @arg aElem The element to query for its computed "display" value.
1.38 + * @return The computed display value
1.39 + */
1.40 +function getComputedDisplay(aElem) {
1.41 + return window.getComputedStyle(aElem, "").display;
1.42 +}
1.43 +
1.44 +/*
1.45 + * Function used for testing a given specified "display" value and checking
1.46 + * its computed value against expectations.
1.47 + *
1.48 + * @arg aSpecifiedDisplay
1.49 + * The specified value of "display" that we should test.
1.50 + *
1.51 + * @arg aExpectedDisplayAsFlexContainerChild
1.52 + * (optional) The expected computed "display" when an element with
1.53 + * aSpecifiedDisplay is a child of a flex container. If omitted,
1.54 + * this argument defaults to aSpecifiedDisplay.
1.55 + *
1.56 + * @arg aExpectedDisplayAsOutOfFlowFlexContainerChild
1.57 + * (optional) The expected computed "display" when an element with
1.58 + * aSpecifiedDisplay is a child of a flex container *and* has
1.59 + * position:[fixed|absolute] or float: [left|right] set. If omitted,
1.60 + * this argument defaults to aExpectedDisplayAsFlexContainerChild.
1.61 + */
1.62 +function testDisplayValue(aSpecifiedDisplay,
1.63 + aExpectedDisplayAsFlexContainerChild,
1.64 + aExpectedDisplayAsOutOfFlowFlexContainerChild) {
1.65 + // DEFAULT-ARGUMENT-VALUES MAGIC: Make 2nd and 3rd args each default to
1.66 + // the preceding arg, if they're unspecified.
1.67 + if (typeof aExpectedDisplayAsFlexContainerChild == "undefined") {
1.68 + aExpectedDisplayAsFlexContainerChild = aSpecifiedDisplay;
1.69 + }
1.70 + if (typeof aExpectedDisplayAsOutOfFlowFlexContainerChild == "undefined") {
1.71 + aExpectedDisplayAsOutOfFlowFlexContainerChild =
1.72 + aExpectedDisplayAsFlexContainerChild;
1.73 + }
1.74 +
1.75 + // FIRST: Create a node with display:aSpecifiedDisplay, and make sure that
1.76 + // this original display-type is honored in a non-flex-container context.
1.77 + let wrapper = document.getElementById("wrapper");
1.78 + let node = document.createElement("div");
1.79 + wrapper.appendChild(node);
1.80 +
1.81 + node.style.display = aSpecifiedDisplay;
1.82 + is(getComputedDisplay(node), aSpecifiedDisplay,
1.83 + "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
1.84 + "should be the same as specified value, when parent is a block");
1.85 +
1.86 +
1.87 + // SECOND: We make our node's parent into a flex container, and make sure
1.88 + // that this produces the correct computed "display" value.
1.89 + wrapper.style.display = "flex";
1.90 + is(getComputedDisplay(node), aExpectedDisplayAsFlexContainerChild,
1.91 + "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
1.92 + "when parent is a flex container");
1.93 +
1.94 +
1.95 + // THIRD: We set "float" and "position" on our node (still inside of a
1.96 + // flex container), and make sure that this produces the correct computed
1.97 + // "display" value.
1.98 + node.style.cssFloat = "left";
1.99 + is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
1.100 + "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
1.101 + "when parent is a flex container and we're floated left");
1.102 + node.style.cssFloat = "";
1.103 +
1.104 + node.style.cssFloat = "right";
1.105 + is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
1.106 + "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
1.107 + "when parent is a flex container and we're floated right");
1.108 + node.style.cssFloat = "";
1.109 +
1.110 + node.style.position = "absolute";
1.111 + is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
1.112 + "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
1.113 + "when parent is a flex container and we're abs-pos");
1.114 + node.style.position = "";
1.115 +
1.116 + node.style.position = "fixed";
1.117 + is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
1.118 + "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
1.119 + "when parent is a flex container and we're fixed-pos");
1.120 + node.style.position = "";
1.121 +
1.122 + // FINALLY: Clean up -- remove the node we created, and turn the wrapper
1.123 + // back into its original display type (a block).
1.124 + wrapper.removeChild(node);
1.125 + wrapper.style.display = "";
1.126 +}
1.127 +
1.128 +/*
1.129 + * Main test function
1.130 + */
1.131 +function main() {
1.132 + testDisplayValue("none");
1.133 + testDisplayValue("block");
1.134 + testDisplayValue("flex");
1.135 + testDisplayValue("inline-flex", "flex");
1.136 + testDisplayValue("list-item");
1.137 + testDisplayValue("table");
1.138 + testDisplayValue("inline-table", "table");
1.139 +
1.140 + // These values all compute to "block" in a flex container. Do them in a
1.141 + // loop, so that I don't have to type "block" a zillion times.
1.142 + var dispValsThatComputeToBlockInAFlexContainer = [
1.143 + "inline",
1.144 + "inline-block",
1.145 + "-moz-box",
1.146 + "-moz-inline-box",
1.147 + "-moz-grid",
1.148 + "-moz-inline-grid",
1.149 + "-moz-grid-group",
1.150 + "-moz-grid-line",
1.151 + "-moz-stack",
1.152 + "-moz-inline-stack",
1.153 + "-moz-deck",
1.154 + "-moz-popup",
1.155 + "-moz-groupbox",
1.156 + ];
1.157 +
1.158 + dispValsThatComputeToBlockInAFlexContainer.forEach(
1.159 + function(aSpecifiedDisplay) {
1.160 + testDisplayValue(aSpecifiedDisplay, "block");
1.161 + });
1.162 +
1.163 + // Table-parts are special. When they're a child of a flex container,
1.164 + // they normally don't get blockified -- instead, they trigger table-fixup
1.165 + // and get wrapped in a table. So, their expected display as the child of
1.166 + // a flex container is the same as their specified display. BUT, if
1.167 + // we apply out-of-flow styling, then *that* blockifies them before
1.168 + // we get to the table-fixup stage -- so then, their computed display
1.169 + // is "block".
1.170 + let tablePartsDispVals = [
1.171 + "table-row-group",
1.172 + "table-column",
1.173 + "table-column-group",
1.174 + "table-header-group",
1.175 + "table-footer-group",
1.176 + "table-row",
1.177 + "table-cell",
1.178 + "table-caption"
1.179 + ];
1.180 +
1.181 + tablePartsDispVals.forEach(
1.182 + function(aSpecifiedDisplay) {
1.183 + testDisplayValue(aSpecifiedDisplay, aSpecifiedDisplay, "block");
1.184 + });
1.185 +}
1.186 +
1.187 +main();
1.188 +]]>
1.189 +</script>
1.190 +</pre>
1.191 +</body>
1.192 +</html>
