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
|
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<meta name="assert"
content="inline-size:stretch causes an absolutely-positioned element's content-box to be sized to fill the available space in its containing block, regardless of the writing-mode of its DOM-tree parent.">
<style>
.cb {
inline-size: 60px;
block-size: 46px;
/* This margin & border are purely cosmetic and don't impact the sizing
* calculations in this test: */
margin: 5px;
border: 2px solid black;
/* We make each containing block an inline-level box, so we can display
* subtests in multiple rows, for easier visualization: */
display: inline-block;
vertical-align: top;
position: relative;
}
.cb > * {
/* This rule is targeting the DOM-tree-parents of the abspos elements.
* In the interests of simplicity and consistency, this style rule makes
* the matched elements fill *their* parent boxes (which are the abspos
* containing blocks). Without this, there are a few edge cases where
* some of the matched elements would be zero-sized, which would then
* collapse away the space that we want to be available for stretching.
*/
block-size: 100%;
inline-size: 100%;
}
.test {
position: absolute;
/* We have 2+3 = 5px of margin in the inline axis. This means the stretched
* children should all have a border-box inline-size that's 5px less than
* the containing block's padding-box size in the same axis. The dimension
* of the containing block's padding-box that we're filling will depend on
* whether our WM is orthogonal to it or not. If we're orthogonal, our
* expected stretch size is 46px - 5px = 41px. If we're not orthogonal,
* our expected stretch size is 60px - 5px = 55px. */
margin-inline-start: 2px;
margin-inline-end: 3px;
/* We also have some border/padding that UAs will need to account for
* when computing the stretched children's content-box sizes; but these
* don't reduce our `data-expected-{width,height}` expectations, since
* those correspond to the border-box size. */
border: 3px solid blue;
padding: 2px;
inline-size: stretch;
block-size: 20px;
background: fuchsia;
}
.htb { writing-mode: horizontal-tb; }
.vlr { writing-mode: vertical-lr; }
.vrl { writing-mode: vertical-rl; }
</style>
<script>
function runTests() {
checkLayout('.test');
// Add box-sizing:border-box (which shouldn't impact the actual resolved
// box sizes that 'stretch' produces), and retest:
for (let elem of document.querySelectorAll(".test")) {
elem.style.boxSizing = "border-box";
}
checkLayout('.test');
}
</script>
<body onload="runTests()">
<!-- This test is exercising cases where the abspos element's containing
block (which happens to be its grandparent) has a writing-mode that
disagrees with the abspos element's parent. We exercise all 6
pairwise-mismatching combinations of {htb,vlr,vrl} for the grandparent &
parent. For each such pair, we test all three of those same
writing-modes on the innermost abspos element.
Note that we use 'data-expected-{height,width}' depending on which axis
is the block axis for the abspos ".test" element (since that's the
element whose "block-size: stretch" resolution we're testing). So for
"test htb" elements, we check the height; whereas for "test vlr" and
"test vrl", we check the width.
-->
<!-- htb / vlr / {htb,vlr,vrl} -->
<div class="cb htb"><div class="vlr">
<div class="test htb" data-expected-width="55"></div>
</div></div>
<div class="cb htb"><div class="vlr">
<div class="test vlr" data-expected-height="41"></div>
</div></div>
<div class="cb htb"><div class="vlr">
<div class="test vrl" data-expected-height="41"></div>
</div></div>
<br>
<!-- htb / vrl / {htb,vlr,vrl} -->
<div class="cb htb"><div class="vrl">
<div class="test htb" data-expected-width="55"></div>
</div></div>
<div class="cb htb"><div class="vrl">
<div class="test vlr" data-expected-height="41"></div>
</div></div>
<div class="cb htb"><div class="vrl">
<div class="test vrl" data-expected-height="41"></div>
</div></div>
<br>
<!-- vlr / htb / {htb,vlr,vrl} -->
<div class="cb vlr"><div class="htb">
<div class="test htb" data-expected-width="41"></div>
</div></div>
<div class="cb vlr"><div class="htb">
<div class="test vlr" data-expected-height="55"></div>
</div></div>
<div class="cb vlr"><div class="htb">
<div class="test vrl" data-expected-height="55"></div>
</div></div>
<br>
<!-- vlr / vrl / {htb,vlr,vrl} -->
<div class="cb vlr"><div class="vrl">
<div class="test htb" data-expected-width="41"></div>
</div></div>
<div class="cb vlr"><div class="vrl">
<div class="test vlr" data-expected-height="55"></div>
</div></div>
<div class="cb vlr"><div class="vrl">
<div class="test vrl" data-expected-height="55"></div>
</div></div>
<br>
<!-- vrl / htb / {htb,vlr,vrl} -->
<div class="cb vrl"><div class="htb">
<div class="test htb" data-expected-width="41"></div>
</div></div>
<div class="cb vrl"><div class="htb">
<div class="test vlr" data-expected-height="55"></div>
</div></div>
<div class="cb vrl"><div class="htb">
<div class="test vrl" data-expected-height="55"></div>
</div></div>
<br>
<!-- vrl / vlr / {htb,vlr,vrl} -->
<div class="cb vrl"><div class="vrl">
<div class="test htb" data-expected-width="41"></div>
</div></div>
<div class="cb vrl"><div class="vrl">
<div class="test vlr" data-expected-height="55"></div>
</div></div>
<div class="cb vrl"><div class="vrl">
<div class="test vrl" data-expected-height="55"></div>
</div></div>
<br>
</body>
|
