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
|
<!DOCTYPE html>
<meta charset="utf8">
<title>CSS contain-intrinsic-size: Logical versions</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-2/#containment-size">
<style>
.test {
contain: size;
display: inline-block;
background: green;
}
.test::before {
content: '';
display: block;
width: 40px;
height: 20px;
}
.cis-none {
contain-intrinsic-inline-size: none;
contain-intrinsic-block-size: none;
}
.cis-block {
contain-intrinsic-inline-size: none;
contain-intrinsic-block-size: 50px;
}
.cis-inline {
contain-intrinsic-inline-size: 100px;
contain-intrinsic-block-size: none;
}
.cis-both {
contain-intrinsic-inline-size: 100px;
contain-intrinsic-block-size: 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="0"></div>
<div class="test cis-block"
data-expected-client-width="0" data-expected-client-height="50"></div>
<div class="test cis-inline"
data-expected-client-width="100" data-expected-client-height="0"></div>
<div class="test cis-both"
data-expected-client-width="100" data-expected-client-height="50"></div>
<div class="test cis-none vertical"
data-expected-client-height="0" data-expected-client-width="0"></div>
<div class="test cis-block vertical"
data-expected-client-height="0" data-expected-client-width="50"></div>
<div class="test cis-inline vertical"
data-expected-client-height="100" data-expected-client-width="0"></div>
<div class="test cis-both vertical"
data-expected-client-height="100" data-expected-client-width="50"></div>
<hr>
<img class="test cis-none" src="/css/support/60x60-green.png"
data-expected-client-width="0" data-expected-client-height="0">
<img class="test cis-block" src="/css/support/60x60-green.png"
data-expected-client-width="0" data-expected-client-height="50">
<img class="test cis-inline" src="/css/support/60x60-green.png"
data-expected-client-width="100" data-expected-client-height="0">
<img class="test cis-both" src="/css/support/60x60-green.png"
data-expected-client-width="100" data-expected-client-height="50">
<img class="test cis-none vertical" src="/css/support/60x60-green.png"
data-expected-client-height="0" data-expected-client-width="0">
<img class="test cis-block vertical" src="/css/support/60x60-green.png"
data-expected-client-height="0" data-expected-client-width="50">
<img class="test cis-inline vertical" src="/css/support/60x60-green.png"
data-expected-client-height="100" data-expected-client-width="0">
<img class="test cis-both vertical" src="/css/support/60x60-green.png"
data-expected-client-height="100" data-expected-client-width="50">
<hr>
<svg class="test cis-none"
data-expected-client-width="0" data-expected-client-height="0"></svg>
<svg class="test cis-block"
data-expected-client-width="0" data-expected-client-height="50"></svg>
<svg class="test cis-inline"
data-expected-client-width="100" data-expected-client-height="0"></svg>
<svg class="test cis-both"
data-expected-client-width="100" data-expected-client-height="50"></svg>
<svg class="test cis-none vertical"
data-expected-client-height="0" data-expected-client-width="0"></svg>
<svg class="test cis-block vertical"
data-expected-client-height="0" data-expected-client-width="50"></svg>
<svg class="test cis-inline vertical"
data-expected-client-height="100" data-expected-client-width="0"></svg>
<svg class="test cis-both vertical"
data-expected-client-height="100" data-expected-client-width="50"></svg>
<hr>
<canvas class="test cis-none" width="40" height="20"
data-expected-client-width="0" data-expected-client-height="0"></canvas>
<canvas class="test cis-block" width="40" height="20"
data-expected-client-width="0" data-expected-client-height="50"></canvas>
<canvas class="test cis-inline" width="40" height="20"
data-expected-client-width="100" data-expected-client-height="0"></canvas>
<canvas class="test cis-both" width="40" height="20"
data-expected-client-width="100" data-expected-client-height="50"></canvas>
<canvas class="test cis-none vertical" width="40" height="20"
data-expected-client-height="0" data-expected-client-width="0"></canvas>
<canvas class="test cis-block vertical" width="40" height="20"
data-expected-client-height="0" data-expected-client-width="50"></canvas>
<canvas class="test cis-inline vertical" width="40" height="20"
data-expected-client-height="100" data-expected-client-width="0"></canvas>
<canvas class="test cis-both vertical" width="40" height="20"
data-expected-client-height="100" data-expected-client-width="50"></canvas>
<hr>
<iframe class="test cis-none"
data-expected-client-width="0" data-expected-client-height="0"></iframe>
<iframe class="test cis-block"
data-expected-client-width="0" data-expected-client-height="50"></iframe>
<iframe class="test cis-inline"
data-expected-client-width="100" data-expected-client-height="0"></iframe>
<iframe class="test cis-both"
data-expected-client-width="100" data-expected-client-height="50"></iframe>
<iframe class="test cis-none vertical"
data-expected-client-height="0" data-expected-client-width="0"></iframe>
<iframe class="test cis-block vertical"
data-expected-client-height="0" data-expected-client-width="50"></iframe>
<iframe class="test cis-inline vertical"
data-expected-client-height="100" data-expected-client-width="0"></iframe>
<iframe class="test cis-both vertical"
data-expected-client-height="100" data-expected-client-width="50"></iframe>
<hr>
<video class="test cis-none"
data-expected-client-width="0" data-expected-client-height="0"></video>
<video class="test cis-block"
data-expected-client-width="0" data-expected-client-height="50"></video>
<video class="test cis-inline"
data-expected-client-width="100" data-expected-client-height="0"></video>
<video class="test cis-both"
data-expected-client-width="100" data-expected-client-height="50"></video>
<video class="test cis-none vertical"
data-expected-client-height="0" data-expected-client-width="0"></video>
<video class="test cis-block vertical"
data-expected-client-height="0" data-expected-client-width="50"></video>
<video class="test cis-inline vertical"
data-expected-client-height="100" data-expected-client-width="0"></video>
<video class="test cis-both vertical"
data-expected-client-height="100" data-expected-client-width="50"></video>
</body>
|
