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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html

Issue 1228983003: [CSS Grid Layout] Do not stretch always grid items with auto width (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Applied suggested changes. Created 5 years, 4 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 | LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html » ('j') | no next file with comments »
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 <head> 3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script> 5 <script src="../../resources/check-layout.js"></script>
6 <style> 6 <style>
7 body { 7 body {
8 margin: 0; 8 margin: 0;
9 } 9 }
10 10
(...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after
92 justify-self: start; 92 justify-self: start;
93 } 93 }
94 </style> 94 </style>
95 </head> 95 </head>
96 <body onload="checkLayout('.grid')"> 96 <body onload="checkLayout('.grid')">
97 97
98 <p>This test checks that the 'stretch' value is applied correctly for 'align' an d 'justify' properties.</p> 98 <p>This test checks that the 'stretch' value is applied correctly for 'align' an d 'justify' properties.</p>
99 99
100 <div style="position: relative"> 100 <div style="position: relative">
101 <div class="grid" data-expected-width="200" data-expected-height="400"> 101 <div class="grid" data-expected-width="200" data-expected-height="400">
102 <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data- offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="2 00"></div> 102 <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data- offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200 "></div>
103 <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRow SecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" dat a-expected-height="40"></div> 103 <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRow SecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" dat a-expected-height="40"></div>
104 <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirs tColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-exp ected-height="200"></div> 104 <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirs tColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-exp ected-height="200"></div>
105 <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSec ondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" dat a-expected-height="40"></div> 105 <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSec ondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="0" data- expected-height="40"></div>
106 </div> 106 </div>
107 </div> 107 </div>
108 108
109 <div style="position: relative"> 109 <div style="position: relative">
110 <div class="grid" data-expected-width="200" data-expected-height="400"> 110 <div class="grid" data-expected-width="200" data-expected-height="400">
111 <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data- offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0 "></div> 111 <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data- offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0 "></div>
112 <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRow SecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" dat a-expected-height="40"></div> 112 <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRow SecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" dat a-expected-height="40"></div>
113 <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirs tColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-exp ected-height="0"></div> 113 <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirs tColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-exp ected-height="0"></div>
114 <div class="onlyHeightSet alignSelfStart justifySelfStretch secondRowSec ondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" dat a-expected-height="40"></div> 114 <div class="onlyHeightSet alignSelfStart justifySelfStretch secondRowSec ondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" dat a-expected-height="40"></div>
115 </div> 115 </div>
116 </div> 116 </div>
117 117
118 <div style="position: relative"> 118 <div style="position: relative">
119 <div class="grid" data-expected-width="200" data-expected-height="400"> 119 <div class="grid" data-expected-width="200" data-expected-height="400">
120 <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstCol umn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected -height="160"></div> 120 <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstCol umn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-h eight="160"></div>
121 <div class="minWidth widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width ="120" data-expected-height="40"></div> 121 <div class="minWidth widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width ="120" data-expected-height="40"></div>
122 <div class="minHeight onlyWidthSet alignSelfStretch justifySelfStart sec ondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20 " data-expected-height="220"></div> 122 <div class="minHeight onlyWidthSet alignSelfStretch justifySelfStart sec ondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20 " data-expected-height="220"></div>
123 <div class="maxWidth onlyHeightSet alignSelfStretch justifySelfStart sec ondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width= "90" data-expected-height="40"></div> 123 <div class="maxWidth onlyHeightSet alignSelfStretch justifySelfStretch s econdRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-widt h="90" data-expected-height="40"></div>
124 </div> 124 </div>
125 </div> 125 </div>
126 126
127 <div style="position: relative"> 127 <div style="position: relative">
128 <div class="grid" data-expected-width="200" data-expected-height="400"> 128 <div class="grid" data-expected-width="200" data-expected-height="400">
129 <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" dat a-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height= "200"></div> 129 <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" dat a-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height= "200"></div>
130 <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstR owSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" d ata-expected-height="40"></div> 130 <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstR owSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" d ata-expected-height="40"></div>
131 <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFi rstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-e xpected-height="200"></div> 131 <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFi rstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-e xpected-height="200"></div>
132 <div class="onlyHeightSet alignSelfStretch justifySelfStretch secondRowS econdColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" d ata-expected-height="40"></div> 132 <div class="onlyHeightSet alignSelfStretch justifySelfStretch secondRowS econdColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" d ata-expected-height="40"></div>
133 </div> 133 </div>
134 </div> 134 </div>
135 135
136 <div style="position: relative"> 136 <div style="position: relative">
137 <div class="grid alignItemsStretch justifyItemsStart" data-expected-width="2 00" data-expected-height="400"> 137 <div class="grid alignItemsStretch justifyItemsStart" data-expected-width="2 00" data-expected-height="400">
138 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="200"></div> 138 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="0" data-expected-height="200"></div>
139 <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 139 <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
140 <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-of fset-y="200" data-expected-width="20" data-expected-height="200"></div> 140 <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-of fset-y="200" data-expected-width="20" data-expected-height="200"></div>
141 <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" dat a-offset-y="200" data-expected-width="100" data-expected-height="40"></div> 141 <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" dat a-offset-y="200" data-expected-width="0" data-expected-height="40"></div>
142 </div> 142 </div>
143 </div> 143 </div>
144 144
145 <div style="position: relative"> 145 <div style="position: relative">
146 <div class="grid alignItemsStart justifyItemsStretch" data-expected-width="2 00" data-expected-height="400"> 146 <div class="grid alignItemsStart justifyItemsStretch" data-expected-width="2 00" data-expected-height="400">
147 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="0"></div> 147 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="0"></div>
148 <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 148 <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
149 <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-of fset-y="200" data-expected-width="20" data-expected-height="0"></div> 149 <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-of fset-y="200" data-expected-width="20" data-expected-height="0"></div>
150 <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" dat a-offset-y="200" data-expected-width="100" data-expected-height="40"></div> 150 <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" dat a-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
151 </div> 151 </div>
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after
240 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200"> 240 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200">
241 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="200" data-expected-height="100"></div> 241 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="200" data-expected-height="100"></div>
242 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> 242 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
243 <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> 243 <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
244 <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="10 0" data-expected-width="200" data-expected-height="100"></div> 244 <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="10 0" data-expected-width="200" data-expected-height="100"></div>
245 </div> 245 </div>
246 </div> 246 </div>
247 247
248 </body> 248 </body>
249 </html> 249 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698