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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-intrinsic-maximums-expected.html

Issue 2411673003: [css-grid] Fix intrinsic maximums resolution with fit-content and auto (Closed)
Patch Set: Created 4 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
OLDNEW
(Empty)
1 <!DOCTYPE html>
2
3 <link href="resources/grid.css" rel="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
5
6 <style>
7
8 .item {
9 font: 10px/1 Ahem;
10 background: cyan;
11 grid-column: 1 / -1;
12 }
13
14 .abs {
15 width: 100%;
16 height: 5px;
17 position: absolute;
18 }
19
20 .grid {
21 border: 2px solid black;
22 display: grid;
23 position: relative;
24 padding-top: 10px;
25 margin-bottom: 10px;
26 width: 100px;
27 justify-items: start;
28 }
29
30 .float {
31 float: left;
32 width: 200px;
33 }
34
35 .col1 { grid-column: 1 / 2; background: orange; }
36 .col2 { grid-column: 2 / 3; background: indigo; }
37 .col3 { grid-column: 3 / 4; background: green; }
38
39 </style>
40
41 <div class="float">
42
43 <!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 - ->
44 <!--
45 <div class="grid" style="grid-template: 20px / 10px 5px;">
46 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
47 <div class="abs col1"></div>
48 <div class="abs col2"></div>
49 </div>
50 -->
51
52 <div class="grid" style="grid-template: 20px / 50px 5px;">
53 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
54 <div class="abs col1"></div>
55 <div class="abs col2"></div>
56 </div>
57
58 <!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 - ->
59 <!--
60 <div class="grid" style="grid-template: 20px / 85px 5px;">
61 <div class="item min-width-max-content">XXXX XXXX</div>
62 <div class="abs col1"></div>
63 <div class="abs col2"></div>
64 </div>
65 -->
66
67 <div class="grid" style="grid-template: 20px / 5px 85px;">
68 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
69 <div class="abs col1"></div>
70 <div class="abs col2"></div>
71 </div>
72
73 <div class="grid" style="grid-template: 20px / 5px 85px;">
74 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
75 <div class="abs col1"></div>
76 <div class="abs col2"></div>
77 </div>
78
79 <div class="grid" style="grid-template: 20px / 5px 85px;">
80 <div class="item min-width-max-content">XXXX XXXX</div>
81 <div class="abs col1"></div>
82 <div class="abs col2"></div>
83 </div>
84
85 </div>
86
87 <div class="float">
88
89 <!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 - ->
90 <!--
91 <div class="grid" style="grid-template: 20px / repeat(2, 5px) 80px;">
92 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
93 <div class="abs col1"></div>
94 <div class="abs col2"></div>
95 <div class="abs col3"></div>
96 </div>
97 -->
98
99 <div class="grid" style="grid-template: 20px / 25px 5px 60px;">
100 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
101 <div class="abs col1"></div>
102 <div class="abs col2"></div>
103 <div class="abs col3"></div>
104 </div>
105
106 <!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 - ->
107 <!--
108 <div class="grid" style="grid-template: 20px / calc(85px / 2) 5px calc(85px / 2) ;">
109 <div class="item min-width-max-content">XXXX XXXX</div>
110 <div class="abs col1"></div>
111 <div class="abs col2"></div>
112 <div class="abs col3"></div>
113 </div>
114 -->
115
116 <!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 - ->
117 <!--
118 <div class="grid" style="grid-template: 20px / 90px repeat(2, 5px);">
119 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
120 <div class="abs col1"></div>
121 <div class="abs col2"></div>
122 <div class="abs col3"></div>
123 </div>
124 -->
125
126 <div class="grid" style="grid-template: 20px / 70px 5px 25px;">
127 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
128 <div class="abs col1"></div>
129 <div class="abs col2"></div>
130 <div class="abs col3"></div>
131 </div>
132
133 <!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 - ->
134 <!--
135 <div class="grid" style="grid-template: 20px / calc(105px/2) 5px calc(85px/2);" style="justify-items: start">
136 <div class="item min-width-max-content">XXXX XXXX</div>
137 <div class="abs col1"></div>
138 <div class="abs col2"></div>
139 <div class="abs col3"></div>
140 </div>
141 -->
142
143 </div>
144
145 <div class="float">
146
147 <div class="grid" style="grid-template: 20px / calc(60px - 15px/2) 5px calc(25px + 35px/2);">
148 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
149 <div class="abs col1"></div>
150 <div class="abs col2"></div>
151 <div class="abs col3"></div>
152 </div>
153
154 <div class="grid" style="grid-template: 20px / calc(60px + 25px/2) 5px calc(25px - 5px/2);">
155 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
156 <div class="abs col1"></div>
157 <div class="abs col2"></div>
158 <div class="abs col3"></div>
159 </div>
160
161 <div class="grid" style="grid-template: 20px / 90px 5px 5px;">
162 <div class="item min-width-max-content">XXXX XXXX</div>
163 <div class="abs col1"></div>
164 <div class="abs col2"></div>
165 <div class="abs col3"></div>
166 </div>
167
168 </div>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698