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

Side by Side Diff: LayoutTests/fast/css-intrinsic-dimensions/height-positioned.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 @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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698