-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathflex-aspect-ratio-img-row-005.html
53 lines (43 loc) · 1.87 KB
/
flex-aspect-ratio-img-row-005.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
<!doctype html>
<title>Aspect-ratio items with borders</title>
<link rel="author" title="David Grogan" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Section B">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion">
<meta name="assert" content="Multiplying cross size by aspect ratio should operate on content box only.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
img {
border-top: 50px solid blue;
border-left: 10px solid orange;
}
.flexbox {
display: flex;
margin-bottom: 20px;
}
</style>
<!-- script after body was flakily triggering before images were loaded, so wait for onload -->
<body onload="checkLayout('img')">
<p>
The green boxes should all be 100x100.
</p>
Section B of flex base size + transferred size suggestion:
<div class=flexbox>
<img style="height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
</div>
Section B of flex base size + transferred size suggestion, with box-sizing: border-box:
<!-- Chrome 83 fails the border-box version. -->
<div class=flexbox>
<img style="height: 150px; box-sizing: border-box;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
</div>
content size suggestion
<div class=flexbox>
<img style="max-height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
</div>
content size suggestion
<div class=flexbox>
<img style="min-height: 100px;" src="support/60x60-green.png" data-expected-client-width=100 data-expected-client-height=100 />
</div>
</body>