Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(33)

Side by Side Diff: LayoutTests/fast/css-intrinsic-dimensions/height-positioned-expected.html

Issue 13674002: Support intrinsic values for height, min-height and max-height (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: CSS table tests Created 7 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <!--
3 All divs here should shrinkwrap to fit their content, except for fill-available
4 -->
5 <style>
6 body * {
7 border: 2px solid red;
8 padding: 5px;
9 clear: both;
10 }
11
12 .container {
13 height: 400px;
14 border-color: blue;
15
16 display: inline-block;
17 width: 100px;
18 }
19
20 .position-container {
21 border-color: green;
22 position: relative;
23 height: 100px;
24 }
25
26 .position-container > * {
27 position: absolute;
28 }
29
30 .f-a-container {
31 height: 100%;
32 box-sizing: border-box;
33 }
34
35 .fill-available {
36 height: 386px;
37 box-sizing: border-box;
38 }
39 </style>
40 <div class="container">
41 <div class="position-container">
42 <div>
43 height: min-content<br>on this box.
44 </div>
45 </div>
46 <div class="position-container">
47 <div>
48 height: max-content<br>on this box.
49 </div>
50 </div>
51 <div class="position-container">
52 <div>
53 height: fit-content<br>on this box.
54 </div>
55 </div>
56 </div>
57
58 <div class="container">
59 <div class="position-container f-a-container">
60 <div class="fill-available">
61 height: fill-available<br> on this box.
62 </div>
63 </div>
64 </div>
65
66 <div class="container">
67 <div class="position-container">
68 <div>
69 min-height: min-content<br>on this box.
70 </div>
71
72 </div>
73 <div class="position-container">
74 <div>
75 min-height: max-content<br>on this box.
76 </div>
77
78 </div>
79 <div class="position-container">
80 <div>
81 min-height: fit-content<br>on this box.
82 </div>
83 </div>
84 </div>
85
86 <div class="container">
87 <div class="position-container f-a-container">
88 <div class="fill-available">
89 min-height: fill-available<br> on this box.
90 </div>
91 </div>
92 </div>
93
94 <div class="container">
95 <div class="position-container">
96 <div>
97 max-height: min-content<br>on this box.
98 </div>
99
100 </div>
101 <div class="position-container">
102 <div>
103 max-height: max-content<br>on this box.
104 </div>
105
106 </div>
107 <div class="position-container">
108 <div>
109 max-height: fit-content<br>on this box.
110 </div>
111 </div>
112 </div>
113
114 <div class="container">
115 <div class="position-container f-a-container">
116 <div class="fill-available">
117 max-height: fill-available<br> on this box.
118 </div>
119 </div>
120 </div>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698