OLD | NEW |
---|---|
(Empty) | |
1 <!doctype html> | |
ojan
2013/04/11 03:21:46
You also need test cases for positioned&&replaced
cbiesinger
2013/04/12 01:17:52
Thanks - that made me realize I forgot to change c
| |
2 <!-- | |
3 All divs here should shrinkwrap to fit their content, except for fill-available | |
4 --> | |
5 <style> | |
6 @import "resources/height-keyword-classes.css"; | |
7 | |
8 body * { | |
9 border: 2px solid red; | |
10 padding: 5px; | |
11 clear: both; | |
12 } | |
13 | |
14 .container { | |
15 height: 400px; | |
16 border-color: blue; | |
17 | |
18 display: inline-block; | |
19 width: 100px; | |
20 } | |
21 | |
22 .position-container { | |
23 border-color: green; | |
24 position: relative; | |
25 height: 100px; | |
26 } | |
27 | |
28 .position-container > * { | |
29 position: absolute; | |
30 } | |
31 | |
32 .f-a-container { | |
33 height: 100%; | |
34 box-sizing: border-box; | |
35 } | |
36 | |
37 .small { | |
38 height: 1px; | |
39 } | |
40 | |
41 .big { | |
42 height: 200px; | |
43 } | |
44 | |
45 .really-big { | |
46 height: 1000px; | |
47 } | |
48 </style> | |
49 <div class="container"> | |
50 <div class="position-container"> | |
51 <div class="min-content"> | |
52 height: min-content<br>on this box. | |
53 </div> | |
54 </div> | |
55 <div class="position-container"> | |
56 <div class="max-content"> | |
57 height: max-content<br>on this box. | |
58 </div> | |
59 </div> | |
60 <div class="position-container"> | |
61 <div class="fit-content"> | |
62 height: fit-content<br>on this box. | |
63 </div> | |
64 </div> | |
65 </div> | |
66 | |
67 <div class="container"> | |
68 <div class="position-container f-a-container"> | |
69 <div class="fill-available"> | |
70 height: fill-available<br> on this box. | |
71 </div> | |
72 </div> | |
73 </div> | |
74 | |
75 <div class="container"> | |
76 <div class="position-container"> | |
77 <div class="small min-height-min-content"> | |
78 min-height: min-content<br>on this box. | |
79 </div> | |
80 | |
81 </div> | |
82 <div class="position-container"> | |
83 <div class="small min-height-max-content"> | |
84 min-height: max-content<br>on this box. | |
85 </div> | |
86 | |
87 </div> | |
88 <div class="position-container"> | |
89 <div class="small min-height-fit-content"> | |
90 min-height: fit-content<br>on this box. | |
91 </div> | |
92 </div> | |
93 </div> | |
94 | |
95 <div class="container"> | |
96 <div class="position-container f-a-container"> | |
97 <div class="small min-height-fill-available"> | |
98 min-height: fill-available<br> on this box. | |
99 </div> | |
100 </div> | |
101 </div> | |
102 | |
103 <div class="container"> | |
104 <div class="position-container"> | |
105 <div class="big max-height-min-content"> | |
106 max-height: min-content<br>on this box. | |
107 </div> | |
108 | |
109 </div> | |
110 <div class="position-container"> | |
111 <div class="big max-height-max-content"> | |
112 max-height: max-content<br>on this box. | |
113 </div> | |
114 | |
115 </div> | |
116 <div class="position-container"> | |
117 <div class="big max-height-fit-content"> | |
118 max-height: fit-content<br>on this box. | |
119 </div> | |
120 </div> | |
121 </div> | |
122 | |
123 <div class="container"> | |
124 <div class="position-container f-a-container"> | |
125 <div class="really-big max-height-fill-available"> | |
126 max-height: fill-available<br> on this box. | |
127 </div> | |
128 </div> | |
129 </div> | |
OLD | NEW |