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
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1580012
-->
<head>
<title>Test for Bug 1580012</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
/* Styling for parents that blockify their children: */
.grid { display: grid; }
.flex { display: flex; }
/* Styling that blockifies an element itself: */
.float { float: left; }
.abs { position: absolute; }
</style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1580012">Mozilla Bug 1580012</a>
<p id="display"></p>
<div id="content">
<!-- Boxes that have no reason to be blockified: -->
<div class="moz-box" id="regularMozBox"></div>
<div class="moz-inline-box" id="regularMozInlineBox"></div>
<!-- A grid container with a -moz-box and a -moz-inline-box grid item (which
should both end up with display:-moz-box), and a -moz-inline-box
grandchild (which should preserve its -moz-inline-box display val): -->
<div class="grid">
<div class="moz-box" id="gridItemMozBox"></div>
<div class="moz-inline-box" id="gridItemMozInlineBox"></div>
<div><div class="moz-inline-box" id="gridGrandchildMozInlineBox"></div></div>
</div>
<!-- A flex container with a -moz-box and a -moz-inline-box flex item (which
should both end up with display:-moz-box), and a -moz-inline-box
grandchild (which should preserve its -moz-inline-box display val): -->
<div class="flex">
<div class="moz-box" id="flexItemMozBox"></div>
<div class="moz-inline-box" id="flexItemMozInlineBox"></div>
<div><div class="moz-inline-box" id="flexGrandchildMozInlineBox"></div></div>
</div>
<!-- Boxes that are directly blockified via other styling on them: -->
<!-- XXXdholbert commenting these out -- see notes below about assertion
failures for floated -moz-box.
<div class="float moz-box" id="floatMozBox"></div>
<div class="float moz-inline-box" id="floatMozInlineBox"></div>
-->
<!-- XXXdholbert commenting these out -- see notes below about assertion
failures for positioned -moz-box.
<div class="abs moz-box" id="absMozBox"></div>
<div class="abs moz-inline-box" id="absMozInlineBox"></div>
-->
</div>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 1580012 **/
SimpleTest.waitForExplicitFinish();
function checkDisp(elemId, expectedDisplay) {
var elem = document.getElementById(elemId);
ok(elem, "should have a valid ID for an element");
is(getComputedStyle(elem).display, expectedDisplay,
"Element with ID " + elemId + " should have expected display value");
}
function runTest() {
// Create CSS Style rules to add -moz-box / -moz-inline-box styling.
// Note that these style won't parse correctly until after we've flipped
// the prefs via pushPrefEnv(). That's why I'm creating these style rules
// here rather than just putting them inline in the <style> element.
var sheet = document.styleSheets[0];
sheet.insertRule(".moz-box { display: -moz-box; }");
sheet.insertRule(".moz-inline-box { display: -moz-inline-box; }");
// Check the computed 'display' of the various elements.
checkDisp("regularMozBox", "-moz-box");
checkDisp("regularMozInlineBox", "-moz-inline-box");
checkDisp("gridItemMozBox", "-moz-box");
checkDisp("gridItemMozInlineBox", "-moz-box");
checkDisp("gridGrandchildMozInlineBox", "-moz-inline-box");
checkDisp("flexItemMozBox", "-moz-box");
checkDisp("flexItemMozInlineBox", "-moz-box");
checkDisp("flexGrandchildMozInlineBox", "-moz-inline-box");
// XXXdholbert The floated boxes trigger assertion failures where
// nsLineLayout thinks it somehow ended up with an inline-level (really, just
// a non-'block') floated thing. In practice this isn't really a concern
// since -moz-box display values are disabled in content and since XUL
// doesn't use 'float' for layout. So: I've added a fatal assertion in
// ReflowInput.cpp to validate that we never actually encounter a floated
// -moz-box/-moz-inline-box, and I'm commenting out these lines (which
// trigger that fatal assertion).
//
// checkDisp("floatMozBox", "-moz-box");
// checkDisp("floatMozInlineBox", "-moz-box");
// XXXdholbert These abspos boxes trigger a diagnostic assertion added in
// bug 1582819 which is intended to flush out XUL content that is positioned
// and hence was previously blockified to 'block' but will now be '-moz-box'.
// The diagnostic assertion doesn't need to stay around forever, but while
// it exists, we can't test this scenario without triggering it.
//
// checkDisp("absMozBox", "-moz-box");
// checkDisp("absMozInlineBox", "-moz-box");
SimpleTest.finish();
}
SpecialPowers.pushPrefEnv({
"set": [
["layout.css.xul-box-display-values.content.enabled", true],
]
}, runTest);
</script>
</pre>
</body>
</html>
|
