-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathcontain-inline-size-replaced.html
104 lines (97 loc) · 5.19 KB
/
contain-inline-size-replaced.html
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
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: intrinsic size of inline-size-contained replaced elems</title>
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
<meta name=assert
content="This test checks that various replaced elements with contain: inline-size have an intrinsic inline size of 0 regardless of their content.">
<style>
.inline-contained {
contain: inline-size;
width: auto;
height: auto;
border: none;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.inline-contained')">
<div>
<!-- video element: -->
<video class="inline-contained" data-expected-width="0" data-expected-height="150"></video>
<video class="inline-contained" data-expected-width="0" data-expected-height="150" controls></video>
<video class="inline-contained" data-expected-width="0" data-expected-height="100"
poster="support/blue-100x100.png"></video>
<video class="inline-contained" data-expected-width="0" data-expected-height="100" poster="support/blue-100x100.png"
controls></video>
<video class="inline-contained" data-expected-width="0" data-expected-height="240" controls>
<source src="support/white.webm" type=video/webm>
<source src="/media/white.mp4" type="video/mp4">
</video>
<video class="inline-contained" data-expected-width="0" data-expected-height="240" controls>
<source src="support/white.webm" type=video/webm>
<source src="/media/white.mp4" type="video/mp4">
</video>
<br>
<!-- other misc replaced elements: -->
<canvas class="inline-contained" data-expected-width="0" data-expected-height="150"></canvas>
<svg class="inline-contained" data-expected-bounding-client-rect-width="0"
data-expected-bounding-client-rect-height="150"></svg>
<br>
<!-- Image elements: -->
<img class="inline-contained" data-expected-width="0" src="broken">
<img class="inline-contained" data-expected-width="0" data-expected-height="100" src="support/blue-100x100.png">
<picture>
<source srcset="support/blue-100x100.png"><img class="inline-contained" data-expected-width="0"
data-expected-height="100">
</picture>
<br>
<!-- Document-embedding elements (with a target resource that
could provide an intrinsic ratio in some cases, in the absence of
contain:inline-size): -->
<embed class="inline-contained" data-expected-width="0" data-expected-height="100" src="support/blue-100x100.png">
<object class="inline-contained" data-expected-width="0" data-expected-height="100"
data="support/blue-100x100.png"></object>
<iframe class="inline-contained" data-expected-width="0" data-expected-height="150"></iframe>
<iframe class="inline-contained" data-expected-width="0" data-expected-height="150"
src="support/blue-100x100.png"></iframe>
<br>
</div>
<!-- Same, but in vertical mode -->
<div style="writing-mode: vertical-rl;">
<video class="inline-contained" data-expected-width="300" data-expected-height="0"></video>
<video class="inline-contained" data-expected-width="300" data-expected-height="0" controls></video>
<video class="inline-contained" data-expected-width="100" data-expected-height="0"
poster="support/blue-100x100.png"></video>
<video class="inline-contained" data-expected-width="100" data-expected-height="0" poster="support/blue-100x100.png"
controls></video>
<video class="inline-contained" data-expected-width="320" data-expected-height="0" controls>
<source src="support/white.webm" type=video/webm>
<source src="/media/white.mp4" type="video/mp4">
</video>
<video class="inline-contained" data-expected-width="320" data-expected-height="0" controls>
<source src="support/white.webm" type=video/webm>
<source src="/media/white.mp4" type="video/mp4">
</video>
<canvas class="inline-contained" data-expected-width="300" data-expected-height="0"></canvas>
<svg class="inline-contained" data-expected-bounding-client-rect-width="300"
data-expected-bounding-client-rect-height="0"></svg>
<br>
<img class="inline-contained" data-expected-height="0" src="broken">
<img class="inline-contained" data-expected-width="100" data-expected-height="0" src="support/blue-100x100.png">
<picture>
<source srcset="support/blue-100x100.png"><img class="inline-contained" data-expected-width="100"
data-expected-height="0">
</picture>
<br>
<embed class="inline-contained" data-expected-width="100" data-expected-height="0" src="support/blue-100x100.png">
<object class="inline-contained" data-expected-width="100" data-expected-height="0"
data="support/blue-100x100.png"></object>
<iframe class="inline-contained" data-expected-width="300" data-expected-height="0"></iframe>
<iframe class="inline-contained" data-expected-width="300" data-expected-height="0"
src="support/blue-100x100.png"></iframe>
<br>
</div>
</body>