Google Git
Sign in
webkit / WebKit / 8bde3ead3fc6049bffee0a9d68c7b464d3930194 / . / LayoutTests / fast / css-intrinsic-dimensions / intrinsic-sized-flex-items.html
blob: 96e379dfd1018206cfa559e27113693c2e9c5c99 [file] [log] [blame]
ojan@chromium.org2087f492013-03-19 22:37:55 +0000[diff] [blame]1<!DOCTYPE html>
2<style>
3@import "resources/width-keyword-classes.css";
4
5.container {
6 border: 5px solid blue;
7 width: 250px;
8 height: 250px;
9 display: -webkit-flex;
10 display: flex;
11}
12.child {
13 border: 5px solid pink;
14 -webkit-flex: none;
15 flex: none;
16 display: -webkit-flex;
17 display: flex;
18}
19.content {
20 display: inline-block;
21 width: 100px;
22 height: 100px;
23 background-color: salmon;
24}
25</style>
26
27Tests intrinsic width values on flex-items.
28
29<!-- width tests -->
30<div class="container">
31 <div class="child max-content" data-expected-width="210">
32 <div><div class="content"></div><div class="content"></div></div>
33 </div>
34</div>
35
36<div class="container">
37 <div class="child min-content" data-expected-width="110">
38 <div><div class="content"></div><div class="content"></div></div>
39 </div>
40</div>
41
42<div class="container">
43 <div class="child fit-content" data-expected-width="210">
44 <div><div class="content"></div><div class="content"></div></div>
45 </div>
46</div>
47
48<div class="container" style="width: 50px">
49 <div class="child fit-content" data-expected-width="110">
50 <div><div class="content"></div><div class="content"></div></div>
51 </div>
52</div>
53
54<div class="container">
55 <div class="child fill-available" data-expected-width="250">
56 <div><div class="content"></div><div class="content"></div></div>
57 </div>
58</div>
59
60<!-- min-width tests -->
61<div class="container">
62 <div class="child min-width-max-content" style="width: 10px;" data-expected-width="210">
63 <div><div class="content"></div><div class="content"></div></div>
64 </div>
65</div>
66<div class="container">
67 <div class="child min-width-min-content" style="width: 10px;" data-expected-width="110">
68 <div><div class="content"></div><div class="content"></div></div>
69 </div>
70</div>
71
72<div class="container">
73 <div class="child min-width-fit-content" style="width: 10px;" data-expected-width="210">
74 <div><div class="content"></div><div class="content"></div></div>
75 </div>
76</div>
77
78<div class="container" style="width: 50px">
79 <div class="child min-width-fit-content" style="width: 10px;" data-expected-width="110">
80 <div><div class="content"></div><div class="content"></div></div>
81 </div>
82</div>
83
84<div class="container">
85 <div class="child min-width-fill-available" style="width: 10px;" data-expected-width="250">
86 <div><div class="content"></div><div class="content"></div></div>
87 </div>
88</div>
89
90<!-- max-width tests -->
91<div class="container">
92 <div class="child max-width-max-content" style="width: 1000px; min-width: 0;" data-expected-width="210">
93 <div><div class="content"></div><div class="content"></div></div>
94 </div>
95</div>
96
97<div class="container">
98 <div class="child max-width-min-content" style="width: 1000px; min-width: 0;" data-expected-width="110">
99 <div><div class="content"></div><div class="content"></div></div>
100 </div>
101</div>
102
103<div class="container">
104 <div class="child max-width-fit-content" style="width: 1000px; min-width: 0;" data-expected-width="210">
105 <div><div class="content"></div><div class="content"></div></div>
106 </div>
107</div>
108
109<div class="container" style="width: 50px">
110 <div class="child max-width-fit-content" style="width: 1000px; min-width: 0;" data-expected-width="110">
111 <div><div class="content"></div><div class="content"></div></div>
112 </div>
113</div>
114
115<div class="container">
116 <div class="child max-width-fill-available" style="width: 1000px; min-width: 0;" data-expected-width="250">
117 <div><div class="content"></div><div class="content"></div></div>
118 </div>
119</div>
120
121<script src="../../resources/check-layout.js"></script>
122<script>
123checkLayout(".container");
124</script>