layout/style/test/test_flexbox_child_display_values.xhtml@7e26c7da4463
layout/style/test/test_flexbox_child_display_values.xhtml
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <!--
3 https://bugzilla.mozilla.org/show_bug.cgi?id=783415
4 -->
5 <head>
6 <meta charset="utf-8"/>
7 <title>Test "display" values of content in a flex container (Bug 783415)</title>
8 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
10 </head>
11 <body>
12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783415">Mozilla Bug 783415</a>
13 <div id="display">
14 <div id="wrapper"></div>
15 </div>
16 <pre id="test">
17 <script type="application/javascript;version=1.7">
18 <![CDATA[
19 "use strict";
21 /**
22 * Test "display" values of content in a flex container (Bug 783415)
23 * ================================================================
24 *
25 * This test creates content with a variety of specified "display" values
26 * and checks what the computed "display" is when we put that content
27 * in a flex container. (Generally, it'll be the "blockified" form of the
28 * specified display-value.)
29 */
31 /*
32 * Utility function for getting computed style of "display".
33 *
34 * @arg aElem The element to query for its computed "display" value.
35 * @return The computed display value
36 */
37 function getComputedDisplay(aElem) {
38 return window.getComputedStyle(aElem, "").display;
39 }
41 /*
42 * Function used for testing a given specified "display" value and checking
43 * its computed value against expectations.
44 *
45 * @arg aSpecifiedDisplay
46 * The specified value of "display" that we should test.
47 *
48 * @arg aExpectedDisplayAsFlexContainerChild
49 * (optional) The expected computed "display" when an element with
50 * aSpecifiedDisplay is a child of a flex container. If omitted,
51 * this argument defaults to aSpecifiedDisplay.
52 *
53 * @arg aExpectedDisplayAsOutOfFlowFlexContainerChild
54 * (optional) The expected computed "display" when an element with
55 * aSpecifiedDisplay is a child of a flex container *and* has
56 * position:[fixed|absolute] or float: [left|right] set. If omitted,
57 * this argument defaults to aExpectedDisplayAsFlexContainerChild.
58 */
59 function testDisplayValue(aSpecifiedDisplay,
60 aExpectedDisplayAsFlexContainerChild,
61 aExpectedDisplayAsOutOfFlowFlexContainerChild) {
62 // DEFAULT-ARGUMENT-VALUES MAGIC: Make 2nd and 3rd args each default to
63 // the preceding arg, if they're unspecified.
64 if (typeof aExpectedDisplayAsFlexContainerChild == "undefined") {
65 aExpectedDisplayAsFlexContainerChild = aSpecifiedDisplay;
66 }
67 if (typeof aExpectedDisplayAsOutOfFlowFlexContainerChild == "undefined") {
68 aExpectedDisplayAsOutOfFlowFlexContainerChild =
69 aExpectedDisplayAsFlexContainerChild;
70 }
72 // FIRST: Create a node with display:aSpecifiedDisplay, and make sure that
73 // this original display-type is honored in a non-flex-container context.
74 let wrapper = document.getElementById("wrapper");
75 let node = document.createElement("div");
76 wrapper.appendChild(node);
78 node.style.display = aSpecifiedDisplay;
79 is(getComputedDisplay(node), aSpecifiedDisplay,
80 "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
81 "should be the same as specified value, when parent is a block");
84 // SECOND: We make our node's parent into a flex container, and make sure
85 // that this produces the correct computed "display" value.
86 wrapper.style.display = "flex";
87 is(getComputedDisplay(node), aExpectedDisplayAsFlexContainerChild,
88 "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
89 "when parent is a flex container");
92 // THIRD: We set "float" and "position" on our node (still inside of a
93 // flex container), and make sure that this produces the correct computed
94 // "display" value.
95 node.style.cssFloat = "left";
96 is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
97 "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
98 "when parent is a flex container and we're floated left");
99 node.style.cssFloat = "";
101 node.style.cssFloat = "right";
102 is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
103 "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
104 "when parent is a flex container and we're floated right");
105 node.style.cssFloat = "";
107 node.style.position = "absolute";
108 is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
109 "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
110 "when parent is a flex container and we're abs-pos");
111 node.style.position = "";
113 node.style.position = "fixed";
114 is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
115 "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
116 "when parent is a flex container and we're fixed-pos");
117 node.style.position = "";
119 // FINALLY: Clean up -- remove the node we created, and turn the wrapper
120 // back into its original display type (a block).
121 wrapper.removeChild(node);
122 wrapper.style.display = "";
123 }
125 /*
126 * Main test function
127 */
128 function main() {
129 testDisplayValue("none");
130 testDisplayValue("block");
131 testDisplayValue("flex");
132 testDisplayValue("inline-flex", "flex");
133 testDisplayValue("list-item");
134 testDisplayValue("table");
135 testDisplayValue("inline-table", "table");
137 // These values all compute to "block" in a flex container. Do them in a
138 // loop, so that I don't have to type "block" a zillion times.
139 var dispValsThatComputeToBlockInAFlexContainer = [
140 "inline",
141 "inline-block",
142 "-moz-box",
143 "-moz-inline-box",
144 "-moz-grid",
145 "-moz-inline-grid",
146 "-moz-grid-group",
147 "-moz-grid-line",
148 "-moz-stack",
149 "-moz-inline-stack",
150 "-moz-deck",
151 "-moz-popup",
152 "-moz-groupbox",
153 ];
155 dispValsThatComputeToBlockInAFlexContainer.forEach(
156 function(aSpecifiedDisplay) {
157 testDisplayValue(aSpecifiedDisplay, "block");
158 });
160 // Table-parts are special. When they're a child of a flex container,
161 // they normally don't get blockified -- instead, they trigger table-fixup
162 // and get wrapped in a table. So, their expected display as the child of
163 // a flex container is the same as their specified display. BUT, if
164 // we apply out-of-flow styling, then *that* blockifies them before
165 // we get to the table-fixup stage -- so then, their computed display
166 // is "block".
167 let tablePartsDispVals = [
168 "table-row-group",
169 "table-column",
170 "table-column-group",
171 "table-header-group",
172 "table-footer-group",
173 "table-row",
174 "table-cell",
175 "table-caption"
176 ];
178 tablePartsDispVals.forEach(
179 function(aSpecifiedDisplay) {
180 testDisplayValue(aSpecifiedDisplay, aSpecifiedDisplay, "block");
181 });
182 }
184 main();
185 ]]>
186 </script>
187 </pre>
188 </body>
189 </html>
