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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html

Issue 1529083006: [css-grid] Initial support for implicit grid before explicit grid (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Apply suggested changes Created 5 years 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-item-negative-position-resolution.html » ('j') | third_party/WebKit/Source/core/style/GridCoordinate.h » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <style> 4 <style>
5 .smallGrid { 5 .smallGrid {
6 grid-template-columns: 50px 100px; 6 grid-template-columns: 50px 100px;
7 grid-template-rows: 50px 100px; 7 grid-template-rows: 50px 100px;
8 } 8 }
9 9
10 .bigGrid { 10 .bigGrid {
11 grid-template-columns: 50px 100px 150px 200px; 11 grid-template-columns: 50px 100px 150px 200px;
12 grid-template-rows: 50px 100px 150px 200px; 12 grid-template-rows: 50px 100px 150px 200px;
13 } 13 }
14 14
15 .overflowingRowFirstColumn { 15 .overflowingRowFirstColumn {
16 grid-row: auto / 10; 16 grid-row: auto / 10;
17 grid-column: 1; 17 grid-column: 1;
18 } 18 }
19 19
20 .secondRowOverflowingColumn { 20 .secondRowOverflowingColumn {
21 grid-row: 2; 21 grid-row: 2;
22 grid-column: auto / 8; 22 grid-column: auto / 8;
23 } 23 }
24 24
25 /* These 2 classes forces the grid to be sized after the grid-{end|after}, thus end up in the
26 first row / columns. */
27 .negativeOverflowingRowFirstColumn { 25 .negativeOverflowingRowFirstColumn {
28 grid-row: auto / -10; 26 grid-row: auto / -10;
29 grid-column: 1; 27 grid-column: 1;
30 } 28 }
31 29
32 .secondRowNegativeOverflowingColumn { 30 .secondRowNegativeOverflowingColumn {
33 grid-row: 2; 31 grid-row: 2;
34 grid-column: auto / -8; 32 grid-column: auto / -8;
35 } 33 }
36 34
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after
125 123
126 <div class="unconstrainedContainer"> 124 <div class="unconstrainedContainer">
127 <div class="grid bigGrid gridAutoFlowRowDense"> 125 <div class="grid bigGrid gridAutoFlowRowDense">
128 <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XX XXX XXXXX</div> 126 <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XX XXX XXXXX</div>
129 <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="5 00" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXX X XXXXX XXXXX</div> 127 <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="5 00" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXX X XXXXX XXXXX</div>
130 </div> 128 </div>
131 </div> 129 </div>
132 130
133 <div class="unconstrainedContainer"> 131 <div class="unconstrainedContainer">
134 <div class="grid bigGrid gridAutoFlowColumnDense"> 132 <div class="grid bigGrid gridAutoFlowColumnDense">
135 <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offs et-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX XXX XXXXX XXXXX</div> 133 <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offs et-x="170" data-offset-y="0" data-expected-width="50" data-expected-height="30"> XXXXX XXXXX XXXXX</div>
136 <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-off set-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100" >XXXXX XXXXX XXXXX</div> 134 <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-off set-x="0" data-offset-y="80" data-expected-width="170" data-expected-height="100 ">XXXXX XXXXX XXXXX</div>
137 </div> 135 </div>
138 </div> 136 </div>
139 137
140 <div class="unconstrainedContainer"> 138 <div class="unconstrainedContainer">
141 <div class="grid bigGrid gridAutoFlowRowDense"> 139 <div class="grid bigGrid gridAutoFlowRowDense">
142 <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offs et-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX XXX XXXXX XXXXX</div> 140 <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offs et-x="170" data-offset-y="0" data-expected-width="50" data-expected-height="30"> XXXXX XXXXX XXXXX</div>
143 <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-off set-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100" >XXXXX XXXXX XXXXX</div> 141 <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-off set-x="0" data-offset-y="80" data-expected-width="170" data-expected-height="100 ">XXXXX XXXXX XXXXX</div>
144 </div> 142 </div>
145 </div> 143 </div>
146 144
147 </body> 145 </body>
148 </html> 146 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html » ('j') | third_party/WebKit/Source/core/style/GridCoordinate.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698