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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage.html

Issue 2323793002: [css-grid] Allow percentage values for column and row gutters (Closed)
Patch Set: Created 4 years, 3 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 | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html » ('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 <link href="resources/grid.css" rel="stylesheet">
3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
5 <style>
6 body { margin: 0; }
7 .grid { font: 10px/1 Ahem; position: relative; }
8 .widthAuto { width: auto; }
9 .heightAuto { height: auto; }
10 .width400 { width: 400px; }
11 .width200 { width: 200px; }
12 .height200 { height: 200px; }
13 .height100 { height: 100px; }
14 .columns100-100 { grid-template-columns: 100px 100px; }
15 .rows50-50 { grid-template-rows: 50px 50px; }
16 .autoRepeat { grid-template: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); }
17 .columnGap10Percent { grid-column-gap: 10% }
18 .rowGap20Percent { grid-row-gap: 20% }
19 .positioned { position: absolute; width: 100%; height: 100%; }
20 </style>
21
22 <script src="../../resources/testharness.js"></script>
23 <script src="../../resources/testharnessreport.js"></script>
24 <script src="../../resources/check-layout-th.js"></script>
25
26 <body onload="checkLayout('.grid')">
27 <div id="log"></div>
28
29 <p>Height is indefinte, so row gaps should be 0. Column gaps based on a grid's ' auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
svillar 2016/09/08 16:15:02 Nit: indefinte (several other appearances)
Manuel Rego 2016/09/08 16:34:23 Acknowledged.
30 <div class="width400">
31 <div class="grid columnGap10Percent rowGap20Percent" data-expected-width="40 0" data-expected-height="20">
32 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="10">XXX X XX X</div>
33 <div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0" data-expected-width="180" data-expected-height="10">XX XXX X X</div>
34 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="10 " data-expected-width="180" data-expected-height="10">X XX XXX X</div>
35 <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="10 " data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
36 </div>
37 </div>
38
39 <p>Height is indefinte, so row gaps should be 0. Column gaps based on a grid's ' instrinsic' width, which reduce the available space for tracks; however, since w e use 'fit-content' intrinsic size, first column's width is reduced and height i ncreased to let its content to fit.</p>
40 <div class="width400">
41 <div class="grid fit-content heightAuto columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40">
42 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="20">XXX X XX X</div>
43 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20">XX XXX X X</div>
44 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20 " data-expected-width="80" data-expected-height="20">X XX XXX X</div>
45 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20 " data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
46 </div>
47 </div>
48
49 <p>Height is indefinte, so row gaps should be 0. Column gaps based on a grid's ' auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
50 <div class="width400">
51 <div class="grid fit-content widthAuto columnGap10Percent rowGap20Percent" d ata-expected-width="400" data-expected-height="20">
52 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="10">XXX X XX X</div>
53 <div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0" data-expected-width="180" data-expected-height="10">XX XXX X X</div>
54 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="10 " data-expected-width="180" data-expected-height="10">X XX XXX X</div>
55 <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="10 " data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
56 </div>
57 </div>
58
59 <p>Height is indefinte, so row gaps should be 0. Column gaps based on a grid's ' instrinsic' width, which reduce the available space for tracks; however, since w e use 'fit-content' intrinsic size, first column's width is reduced and height i ncreased to let its content to fit.</p>
60 <div class="width400">
61 <div class="grid fit-content columnGap10Percent rowGap20Percent" data-expect ed-width="200" data-expected-height="40">
62 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="20">XXX X XX X</div>
63 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20">XX XXX X X</div>
64 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20 " data-expected-width="80" data-expected-height="20">X XX XXX X</div>
65 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20 " data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
66 </div>
67 </div>
68
69 <p>Height is indefinte, so row gaps should be 0. Column gaps based on a grid's ' auto' width, which reduce the available space for tracks; however, they are fixe d sized and fit.</p>
70 <div class="width400">
71 <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percen t" data-expected-width="400" data-expected-height="100">
72 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="100" data-expected-height="50">XXX X XX X</div>
73 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0 " data-expected-width="100" data-expected-height="50">XX XXX X X</div>
74 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="5 0" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
75 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="5 0" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
76 </div>
77 </div>
78
79 <p>Height is indefinte, so row gaps should be 0. Column gaps based on a grid's ' intrinsic' width, which reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
80 <div class="width400">
81 <div class="grid fit-content heightAuto columns100-100 rows50-50 columnGap1 0Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
82 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="100" data-expected-height="50">XXX X XX X</div>
83 <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0 " data-expected-width="100" data-expected-height="50">XX XXX X X</div>
84 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="5 0" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
85 <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="5 0" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
86 </div>
87 </div>
88
89 <p>Height is indefinte, so row gaps should be 0. Column gaps based on a grid's ' auto' width, which reduce the available space for tracks; however, they are fixe d sized and fit.</p>
90 <div class="width400">
91 <div class="grid fit-content widthAuto columns100-100 rows50-50 columnGap10 Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
92 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="100" data-expected-height="50">XXX X XX X</div>
93 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0 " data-expected-width="100" data-expected-height="50">XX XXX X X</div>
94 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="5 0" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
95 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="5 0" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
96 </div>
97 </div>
98
svillar 2016/09/08 16:20:17 There are a lot of test cases for indefinite heigh
Manuel Rego 2016/09/08 16:34:23 We've several tests using fit-content which covers
99 <p>Both row and column gaps are based on definite sizes, but they will reduce th e available space for tracks; however, since the container's specified inline si ze is not enough, first column's width is reduced and height increased to let it s content to fit.</p>
100 <div class="width400">
101 <div class="grid width200 height100 columnGap10Percent rowGap20Percent" data -expected-width="200" data-expected-height="100">
102 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="40">XXX X XX X</div>
103 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="40">XX XXX X X</div>
104 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60 " data-expected-width="80" data-expected-height="40">X XX XXX X</div>
105 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="60 " data-expected-width="100" data-expected-height="40">XXXXX X XX</div>
106 </div>
107 </div>
108
109 <p>Both row and column gaps are based on definite sizes, but they will reduce th e available space for tracks; however, they can grow exceeding their content's m ax-width.</p>
110 <div class="width400">
111 <div class="grid width400 height200 columnGap10Percent rowGap20Percent" data -expected-width="400" data-expected-height="200">
112 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="80">XXX X XX X</div>
113 <div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0" data-expected-width="180" data-expected-height="80">XX XXX X X</div>
114 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="12 0" data-expected-width="180" data-expected-height="80">X XX XXX X</div>
115 <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="12 0" data-expected-width="180" data-expected-height="80">XXXXX X XX</div>
116 </div>
117 </div>
118
119 <p>Both row and column gaps are based on definite sizes, they will reduce the av ailable space for tracks; however, they are fixed sized and don't fit so they ov erflow the grid container.</p>
120 <div class="width400">
121 <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Perc ent rowGap20Percent" data-expected-width="200" data-expected-height="100">
122 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
123 <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
124 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70 " data-expected-width="100" data-expected-height="50">X XX XXX X</div>
125 <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70 " data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
126 </div>
127 </div>
128
129 <p>Both row and column gaps are based on definite sizes, they will reduce the av ailable space for tracks; however, they are fixed sized and fit.</p>
130 <div class="width400">
131 <div class="grid width400 height200 columns100-100 rows50-50 columnGap10Perc ent rowGap20Percent" data-expected-width="400" data-expected-height="200">
132 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
133 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
134 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="90 " data-expected-width="100" data-expected-height="50">X XX XXX X</div>
135 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90 " data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
136 </div>
137 </div>
138
139 <p>Height is indefinte, so row gaps should be 0. Column gaps based on a grid's ' instrinsic' width, which reduce the available space for tracks; however, since w e use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks are adjusted to fit in the intrinsic size reduced by the gaps.</p>
140 <div class="width400">
141 <div class="grid fit-content autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="70">
142 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
143 <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XX XXX X X</div>
144 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="50 " data-expected-width="100" data-expected-height="20">X XX XXX X</div>
145 <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="50 " data-expected-width="80" data-expected-height="20">XXXXX X XX</div>
146 </div>
147 </div>
148
149 <p>Both row and column gaps are based on definite sizes, they will reduce the av ailable space for tracks; however, repeat auto-fill allows all of them to fit.</ p>
150 <div class="">
151 <div class="grid width400 height200 autoRepeat columnGap10Percent rowGap20Pe rcent" data-expected-width="400" data-expected-height="200">
152 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
153 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
154 <div class="firstRowThirdColumn" data-offset-x="280" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
155 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="90 " data-expected-width="100" data-expected-height="50">X XX XXX X</div>
156 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90 " data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
157 <div class="secondRowThirdColumn" data-offset-x="280" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
158 </div>
159 </div>
160
161 <p>Both row and column gaps are based on definite sizes, they will reduce the av ailable space for tracks; however, repeat auto-fill allows only 1 repetition.</p >
162 <div class="">
163 <div class="grid width200 height100 autoRepeat columnGap10Percent rowGap20Pe rcent" data-expected-width="200" data-expected-height="100">
164 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
165 <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XX XXX X X</div>
166 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70 " data-expected-width="100" data-expected-height="30">X XX XXX X</div>
167 <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70 " data-expected-width="80" data-expected-height="30">XXXXX X XX</div>
168 </div>
169 </div>
170
171 <p>Grid with positioned items. Height is indefinte, so row gaps should be 0. Col umn gaps based on a grid's 'auto' width, which reduce the available space for tr acks; however, they are fixed sized and fit.</p>
172 <div class="width400">
173 <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent " data-expected-width="400" data-expected-height="100">
174 <div class="positioned onlyFirstRowOnlyFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X X X X</div>
175 <div class="positioned onlyFirstRowOnlySecondColumn" data-offset-x="140 " data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
176 <div class="positioned onlySecondRowOnlyFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">X XX XX X X</div>
177 <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="140 " data-offset-y="50" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
178 </div>
179 </div>
180
181 <p>Grid with positioned items. Both row and column gaps are based on definite si zes, they will reduce the available space for tracks; however, they are fixed si zed and don't fit so they overflow the grid container.</p>
182 <div class="">
183 <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Perc ent rowGap20Percent" data-expected-width="200" data-expected-height="100">
184 <div class="positioned onlyFirstRowOnlyFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X X X X</div>
185 <div class="positioned onlyFirstRowOnlySecondColumn" data-offset-x="120 " data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
186 <div class="positioned onlySecondRowOnlyFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XX X X</div>
187 <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="120 " data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
188 </div>
189 </div>
190
191 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698