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
|
<!DOCTYPE html>
<meta charset="utf8">
<title>CSS contain-intrinsic-size: single axis size containment</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
<style>
.test {
contain: inline-size;
display: inline-block;
background: green;
}
.test::before {
content: '';
display: block;
width: 40px;
height: 20px;
}
.cis-none {
contain-intrinsic-size: none none;
}
.cis-height {
contain-intrinsic-size: none 50px;
}
.cis-width {
contain-intrinsic-size: 100px none;
}
.cis-both {
contain-intrinsic-size: 100px 50px;
}
.vertical {
writing-mode: vertical-lr;
}
canvas {
aspect-ratio: auto;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.test')">
<div id="log"></div>
<div class="test cis-none"
data-expected-client-width="0" data-expected-client-height="20"></div>
<div class="test cis-height"
data-expected-client-width="0" data-expected-client-height="20"></div>
<div class="test cis-width"
data-expected-client-width="100" data-expected-client-height="20"></div>
<div class="test cis-both"
data-expected-client-width="100" data-expected-client-height="20"></div>
<div class="test cis-none vertical"
data-expected-client-width="40" data-expected-client-height="0"></div>
<div class="test cis-height vertical"
data-expected-client-width="40" data-expected-client-height="50"></div>
<div class="test cis-width vertical"
data-expected-client-width="40" data-expected-client-height="0"></div>
<div class="test cis-both vertical"
data-expected-client-width="40" data-expected-client-height="50"></div>
<hr>
<img class="test cis-none" src="/css/support/60x60-green.png"
data-expected-client-width="0" data-expected-client-height="60">
<img class="test cis-height" src="/css/support/60x60-green.png"
data-expected-client-width="0" data-expected-client-height="60">
<img class="test cis-width" src="/css/support/60x60-green.png"
data-expected-client-width="100" data-expected-client-height="60">
<img class="test cis-both" src="/css/support/60x60-green.png"
data-expected-client-width="100" data-expected-client-height="60">
<img class="test cis-none vertical" src="/css/support/60x60-green.png"
data-expected-client-width="60" data-expected-client-height="0">
<img class="test cis-height vertical" src="/css/support/60x60-green.png"
data-expected-client-width="60" data-expected-client-height="50">
<img class="test cis-width vertical" src="/css/support/60x60-green.png"
data-expected-client-width="60" data-expected-client-height="0">
<img class="test cis-both vertical" src="/css/support/60x60-green.png"
data-expected-client-width="60" data-expected-client-height="50">
<hr>
<svg class="test cis-none"
data-expected-client-width="0" data-expected-client-height="150"></svg>
<svg class="test cis-height"
data-expected-client-width="0" data-expected-client-height="150"></svg>
<svg class="test cis-width"
data-expected-client-width="100" data-expected-client-height="150"></svg>
<svg class="test cis-both"
data-expected-client-width="100" data-expected-client-height="150"></svg>
<svg class="test cis-none vertical"
data-expected-client-width="300" data-expected-client-height="0"></svg>
<svg class="test cis-height vertical"
data-expected-client-width="300" data-expected-client-height="50"></svg>
<svg class="test cis-width vertical"
data-expected-client-width="300" data-expected-client-height="0"></svg>
<svg class="test cis-both vertical"
data-expected-client-width="300" data-expected-client-height="50"></svg>
<hr>
<canvas class="test cis-none" width="40" height="20"
data-expected-client-width="0" data-expected-client-height="20"></canvas>
<canvas class="test cis-height" width="40" height="20"
data-expected-client-width="0" data-expected-client-height="20"></canvas>
<canvas class="test cis-width" width="40" height="20"
data-expected-client-width="100" data-expected-client-height="20"></canvas>
<canvas class="test cis-both" width="40" height="20"
data-expected-client-width="100" data-expected-client-height="20"></canvas>
<canvas class="test cis-none vertical" width="40" height="20"
data-expected-client-width="40" data-expected-client-height="0"></canvas>
<canvas class="test cis-height vertical" width="40" height="20"
data-expected-client-width="40" data-expected-client-height="50"></canvas>
<canvas class="test cis-width vertical" width="40" height="20"
data-expected-client-width="40" data-expected-client-height="0"></canvas>
<canvas class="test cis-both vertical" width="40" height="20"
data-expected-client-width="40" data-expected-client-height="50"></canvas>
<hr>
<iframe class="test cis-none"
data-expected-client-width="0" data-expected-client-height="150"></iframe>
<iframe class="test cis-height"
data-expected-client-width="0" data-expected-client-height="150"></iframe>
<iframe class="test cis-width"
data-expected-client-width="100" data-expected-client-height="150"></iframe>
<iframe class="test cis-both"
data-expected-client-width="100" data-expected-client-height="150"></iframe>
<iframe class="test cis-none vertical"
data-expected-client-width="300" data-expected-client-height="0"></iframe>
<iframe class="test cis-height vertical"
data-expected-client-width="300" data-expected-client-height="50"></iframe>
<iframe class="test cis-width vertical"
data-expected-client-width="300" data-expected-client-height="0"></iframe>
<iframe class="test cis-both vertical"
data-expected-client-width="300" data-expected-client-height="50"></iframe>
<hr>
<video class="test cis-none"
data-expected-client-width="0" data-expected-client-height="150"></video>
<video class="test cis-height"
data-expected-client-width="0" data-expected-client-height="150"></video>
<video class="test cis-width"
data-expected-client-width="100" data-expected-client-height="150"></video>
<video class="test cis-both"
data-expected-client-width="100" data-expected-client-height="150"></video>
<video class="test cis-none vertical"
data-expected-client-width="300" data-expected-client-height="0"></video>
<video class="test cis-height vertical"
data-expected-client-width="300" data-expected-client-height="50"></video>
<video class="test cis-width vertical"
data-expected-client-width="300" data-expected-client-height="0"></video>
<video class="test cis-both vertical"
data-expected-client-width="300" data-expected-client-height="50"></video>
</body>
|
