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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html

Issue 1317643005: [css-grid] Fix track sizing algo w/ size restrictions and intrinsic sizes (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: New design Created 5 years, 2 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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2
3 <link href="resources/grid.css" rel="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
5
6 <style>
7 .grid {
8 grid-template-rows: minmax(0px, 100px);
9 width: 40px;
10
11 align-items: start;
12 justify-items: start;
13 }
14
15 .max-height-35 { max-height: 35px; }
16 .max-height-50 { max-height: 50px; }
17 .min-height-35 { min-height: 35px; }
18 .min-height-50 { min-height: 50px; }
19 </style>
20
21 <script src="../../resources/check-layout.js"></script>
22
23 <body onload="checkLayout('.grid')">
24
25 <h2>Check the behavior of grids under max-content constraints.</h2>
26 <div class="grid max-content max-height-35" data-expected-width="40" data-expect ed-height="35">
27 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XXX XX XXX</div>
28 </div>
29
30 <div class="grid max-content max-height-min-content" data-expected-width="40" da ta-expected-height="0">
31 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX X</div>
32 </div>
33
34 <div class="grid max-height-min-content" data-expected-width="40" data-expected- height="0">
35 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX</div>
36 </div>
37
38 <div class="grid max-content max-height-fill-available" data-expected-width="40" data-expected-height="100">
39 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XXX X XXX</div>
40 </div>
41
42 <div class="grid max-content" data-expected-width="40" data-expected-height="100 ">
43 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XXX XX</div>
44 </div>
45
46 <br>
47 <h2>Check the behavior of grids under min-content contstraints.</h2>
48 <div class="grid min-content" data-expected-width="40" data-expected-height="0">
49 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XX XX</div>
50 </div>
51
52 <div class="grid min-content min-height-50" data-expected-width="40" data-expect ed-height="50">
53 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX X</div>
54 </div>
55
56 <div class="grid min-content min-height-fit-content" data-expected-width="40" da ta-expected-height="100">
57 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XXXX</div>
58 </div>
59
60 <div style="height: 200px;">
61 <div class="grid min-content min-height-fill-available" data-expected-width= "40" data-expected-height="200">
62 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXXX XXXX XXX</div>
63 </div>
64 </div>
65
66 <div class="grid min-content min-height-min-content" data-expected-width="40" da ta-expected-height="0">
67 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX</div>
68 </div>
69
70 <div class="grid min-content min-height-35" data-expected-width="40" data-expect ed-height="35">
71 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XX</div>
72 </div>
73
74 <div class="grid min-content min-height-max-content" data-expected-width="40" da ta-expected-height="100">
75 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">X XXX X</div>
76 </div>
77
78 <div class="grid min-content min-height-50" data-expected-width="40" data-expect ed-height="50">
79 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XXXX XXXX XXXX XXXX</div>
80 </div>
81
82 <div class="grid min-content max-height-50" data-expected-width="40" data-expect ed-height="0">
83 <div class="sizedToGridArea min-height-fill-available" data-expected-width=" 40" data-expected-height="0">XXXX X X XXXX</div>
84 </div>
85
86 <br>
87 <h2>Check the behavior of grids with definite available space.</h2>
88 <div class="grid" style="height: 100px;" data-expected-width="40" data-expected- height="100">
89 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX X</div>
90 </div>
91
92 <div class="grid max-height-35" style="height: 100px;" data-expected-width="40" data-expected-height="35">
93 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XX</div>
94 </div>
95
96 <div class="grid min-height-50" style="height: 10px;" data-expected-width="40" d ata-expected-height="50">
97 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX XXXX</div>
98 </div>
99
100 <div class="grid min-height-50" style="height: 20px; data-expected-width="40" da ta-expected-height="50">
101 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX XXX XX XXX XX XXX</div>
102 </div>
103
104 <div style="height: 100px;">
105 <div class="grid" style="height: 37%;" data-expected-width="40" data-expecte d-height="37">
106 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="37">X X X X</div>
107 </div>
108 <div class="grid min-height-50" style="height: 37%;" data-expected-width="40 " data-expected-height="50">
109 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="50">XX XX XX</div>
110 </div>
111 <div class="grid min-height-35" style="height: 37%;" data-expected-width="40 " data-expected-height="37">
112 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="37">XXXX</div>
113 </div>
114 </div>
115
116 <br>
117 <h2>Check the behavior of grids with indefinite available space.</h2>
118 <div class="fit-content">
119 <div class="grid" data-expected-width="40" data-expected-height="100">
120 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX</div>
121 </div>
122 <div class="grid min-height-35" data-expected-width="40" data-expected-heigh t="100">
123 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XXXX X</div>
124 </div>
125 <div class="grid max-height-min-content" data-expected-width="40" data-expec ted-height="0">
126 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">XX XX XX</div>
127 </div>
128 <div class="grid fit-content" data-expected-width="40" data-expected-height= "100">
129 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div>
130 </div>
131 </div>
132
133 <div class="fit-content" style="height: 125px;">
134 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="125">
135 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div>
136 </div>
137 </div>
138
139 <div class="fit-content min-height-50">
140 <div class="grid" data-expected-width="40" data-expected-height="100">
141 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX XX X XXX</div>
142 </div>
143 <div class="grid min-height-35" data-expected-width="40" data-expected-heigh t="100">
144 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX X X</div>
145 </div>
146 <div class="grid max-height-min-content" data-expected-width="40" data-expec ted-height="0">
147 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">X XXX XX</div>
148 </div>
149 <div class="grid fit-content" data-expected-width="40" data-expected-height= "100">
150 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XX X</div>
151 </div>
152 </div>
153
154 <div class="fit-content min-height-50" style="height: 75px;">
155 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="75">
156 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="75">XX X</div>
157 </div>
158 </div>
159
160 <div style="height: 25px;">
161 <div class="grid fit-content" data-expected-width="40" data-expected-height= "25">
162 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="25">XX X</div>
163 </div>
164 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="25">
165 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="25">XX X</div>
166 </div>
167 <div class="grid fit-content min-height-35" data-expected-width="40" data-ex pected-height="35">
168 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="35">XX X</div>
169 </div>
170 <div class="grid fit-content max-height-min-content" data-expected-width="40 " data-expected-height="0">
171 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">XX X</div>
172 </div>
173 </div>
174
175 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698