1<!DOCTYPE html>
2<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
3<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" />
4<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto" />
5<link rel="match" href="reference/flexbox-min-width-auto-006-ref.html" />
6<meta name="assert" content="Test that min-width:auto does not incorrectly stretch items with aspect ratio" />
7
8<style>
9#reference-overlapped-red {
10 position: relative;
11 background-color: red;
12 width: 10px;
13 height: 10px;
14 top: 40px;
15 z-index: -1;
16}
17.constrained-width-flex {
18 width: 100px;
19 display: flex;
20 border: 1px solid black;
21}
22.constrained-height-flex {
23 display: flex;
24 height: 100px;
25}
26</style>
27
28<p>Test passes if there are a (vertically centered) 20x20 and a 60x100 green boxes enclosed on each 100x100 square.</p>
29
30<div class="constrained-width-flex">
31 <div class="constrained-height-flex">
32 <img src="data:image/svg+xml,
33 <svg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
34 <rect width='100%' height='100%' fill='green'/>
35 </svg>"/>
36 </div>
37</div>
38
39<br>
40
41<div class="constrained-width-flex">
42 <div class="constrained-height-flex">
43 <img src="support/60x60-green.png"/>
44 </div>
45</div>