1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<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>
|
