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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html

Issue 2333583002: [css-grid] Update intrinsic size for the extra sizing alg iteration. (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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.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 <link href="resources/grid.css" rel="stylesheet"> 2 <link href="resources/grid.css" rel="stylesheet">
3 <link href="resources/grid-alignment.css" rel="stylesheet"> 3 <link href="resources/grid-alignment.css" rel="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet"> 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet"> 5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
6 <style> 6 <style>
7 body { 7 body {
8 margin: 0; 8 margin: 0;
9 } 9 }
10 10
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
42 <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with < b>min-{width, height} auto</b>.<br> Enough available space in the inline axis, s o parallel tracks grow until their limits; orthogonal tracks, however, are limit ed to the bloc-axis available space, which will determine their column tracks si ze.</p> 42 <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with < b>min-{width, height} auto</b>.<br> Enough available space in the inline axis, s o parallel tracks grow until their limits; orthogonal tracks, however, are limit ed to the bloc-axis available space, which will determine their column tracks si ze.</p>
43 <div class="grid itemsStart contentStart width300 height200" data-expected-w idth="300" data-expected-height="200"> 43 <div class="grid itemsStart contentStart width300 height200" data-expected-w idth="300" data-expected-height="200">
44 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div> 44 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div>
45 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div> 45 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
46 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XX X</div> 46 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XX X</div>
47 </div> 47 </div>
48 </div> 48 </div>
49 49
50 <div class="container"> 50 <div class="container">
51 <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-{width, height} auto</b>.<br> Orthogonal gree n row track assumed as infinity, hence 10px for the column track. Actual row tra cks size is different, hence overflowing. </p> 51 <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-{width, height} auto</b>.<br> Orthogonal gree n row track assumed as infinity, hence 10px for the column track. Actual row tra cks size is different, hence overflowing. </p>
52 <div class="grid itemsStart contentStart min-content height200" data-expecte d-width="50" data-expected-height="200"> 52 <div class="grid itemsStart contentStart min-content height200" data-expecte d-width="70" data-expected-height="200">
53 <div class="firstRowFirstColumn" data-offset-x="0" data-off set-y="0" data-expected-width="30" data-expected-height="50">XX XXX X XXX XX</ div> 53 <div class="firstRowFirstColumn" data-offset-x="0" data-off set-y="0" data-expected-width="30" data-expected-height="50">XX XXX X XXX XX</ div>
54 <div class="verticalLR firstRowSecondColumn" data-offset-x="30" data-off set-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX X X XXX X XXXX X XX</div> 54 <div class="verticalLR firstRowSecondColumn" data-offset-x="30" data-off set-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX X X XXX X XXXX X XX</div>
55 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-off set-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX< /div> 55 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-off set-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX< /div>
56 </div> 56 </div>
57 </div> 57 </div>
58 58
59 <div class="container"> 59 <div class="container">
60 <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-{width, height} auto</b>.<br> Parallel blue c olumn track sized as its max of 150x, while Orthogonal green row, assumed as inf inity, sized as 10px. Since actual row tracks size is different, green column tr ack will occupy some space initally assigned to the blue one.</p> 60 <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-{width, height} auto</b>.<br> Parallel blue c olumn track sized as its max of 150x, while Orthogonal green row, assumed as inf inity, sized as 10px. Since actual row tracks size is different, green column tr ack will occupy some space initally assigned to the blue one.</p>
61 <div class="grid itemsStart contentStart max-content height200" data-expecte d-width="170" data-expected-height="200"> 61 <div class="grid itemsStart contentStart max-content height200" data-expecte d-width="190" data-expected-height="200">
62 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="130" data-expected-height="20">XX XXX X XXX XX </div> 62 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div>
63 <div class="verticalLR firstRowSecondColumn" data-offset-x="130" data-of fset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div> 63 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
64 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XX X</div> 64 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XX X</div>
65 </div> 65 </div>
66 </div> 66 </div>
67 67
68 <div class="container"> 68 <div class="container">
69 <p>Grid width under <b>fit-content</b> constrain and <b>fixed</b> height.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since we use as sumed row tracks sizes, minimum and maximum will be the same, hence fit-content will produce the same result than max-content.</p> 69 <p>Grid width under <b>fit-content</b> constrain and <b>fixed</b> height.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since we use as sumed row tracks sizes, minimum and maximum will be the same, hence fit-content will produce the same result than max-content.</p>
70 <div class="grid itemsStart contentStart fit-content height200" data-expecte d-width="170" data-expected-height="200"> 70 <div class="grid itemsStart contentStart fit-content height200" data-expecte d-width="190" data-expected-height="200">
71 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="130" data-expected-height="20">XX XXX X XXX XX </div> 71 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div>
72 <div class="verticalLR firstRowSecondColumn" data-offset-x="130" data-of fset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div> 72 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
73 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XX X</div> 73 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XX X</div>
74 </div> 74 </div>
75 </div> 75 </div>
76 76
77 <div class="container"> 77 <div class="container">
78 <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrai n.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since ther e is enough space in the inline-axis, the orthogonal green row sets the min-cont ent size, which is 50px because of the 5 chars line.</p> 78 <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrai n.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since ther e is enough space in the inline-axis, the orthogonal green row sets the min-cont ent size, which is 50px because of the 5 chars line.</p>
79 <div class="grid itemsStart contentStart min-content width300" data-expected -width="300" data-expected-height="90"> 79 <div class="grid itemsStart contentStart min-content width300" data-expected -width="300" data-expected-height="90">
80 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div> 80 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div>
81 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="70" data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div> 81 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="70" data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
82 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="50" data-expected-width="40" data-expected-height="40">XXXX XX X XX XX X</div> 82 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="50" data-expected-width="40" data-expected-height="40">XXXX XX X XX XX X</div>
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
116 <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Both pa rallel and orthogonal column tracks are 0px because of item's min-width and cont ainer's min-content constrain.</p> 116 <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Both pa rallel and orthogonal column tracks are 0px because of item's min-width and cont ainer's min-content constrain.</p>
117 <div class="grid itemsStart contentStart min-content height200" data-expecte d-width="0" data-expected-height="200"> 117 <div class="grid itemsStart contentStart min-content height200" data-expecte d-width="0" data-expected-height="200">
118 <div class="minWidthZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50"> XX XXX X XXX XX</div> 118 <div class="minWidthZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50"> XX XXX X XXX XX</div>
119 <div class="minWidthZero verticalLR firstRowSecondColumn" data-offset- x="0" data-offset-y="0" data-expected-width="40" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div> 119 <div class="minWidthZero verticalLR firstRowSecondColumn" data-offset- x="0" data-offset-y="0" data-expected-width="40" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
120 <div class="minWidthZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95"> XXXX XX X XX XXX</div> 120 <div class="minWidthZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95"> XXXX XX X XX XXX</div>
121 </div> 121 </div>
122 </div> 122 </div>
123 123
124 <div class="container"> 124 <div class="container">
125 <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Since c ontainer is sized under max-content, tracks will use its maximum size.</p> 125 <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Since c ontainer is sized under max-content, tracks will use its maximum size.</p>
126 <div class="grid itemsStart contentStart max-content height200" data-expecte d-width="170" data-expected-height="200"> 126 <div class="grid itemsStart contentStart max-content height200" data-expecte d-width="190" data-expected-height="200">
127 <div class="minWidthZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="130" data-expected-height="20"> XX XXX X XXX XX</div> 127 <div class="minWidthZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div>
128 <div class="minWidthZero verticalLR firstRowSecondColumn" data-offset- x="130" data-offset-y="0" data-expected-width="40" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div> 128 <div class="minWidthZero verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="40" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
129 <div class="minWidthZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95"> XXXX XX X XX XXX</div> 129 <div class="minWidthZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95"> XXXX XX X XX XXX</div>
130 </div> 130 </div>
131 </div> 131 </div>
132 132
133 <div class="container"> 133 <div class="container">
134 <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrai n.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Bo th parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p> 134 <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrai n.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Bo th parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
135 <div class="grid itemsStart contentStart min-content width300 " data-expecte d-width="300" data-expected-height="0"> 135 <div class="grid itemsStart contentStart min-content width300 " data-expecte d-width="300" data-expected-height="0">
136 <div class="minHeightZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div> 136 <div class="minHeightZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div>
137 <div class="minHeightZero verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50"> X XXX XX XXXXX XX XXX X XXXX X XX</div> 137 <div class="minHeightZero verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50"> X XXX XX XXXXX XX XXX X XXXX X XX</div>
138 <div class="minHeightZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="40" data-expected-height="40"> XXXX XX X XX XXX</div> 138 <div class="minHeightZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="40" data-expected-height="40"> XXXX XX X XX XXX</div>
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
187 <div class="container"> 187 <div class="container">
188 <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrai n.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> O rthogonal rows can grow now to reach their maximum, exceeding min-height as well , while parallel row tracks are still sized according to min-height.</p> 188 <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrai n.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> O rthogonal rows can grow now to reach their maximum, exceeding min-height as well , while parallel row tracks are still sized according to min-height.</p>
189 <div class="grid itemsStart contentStart max-content width300" data-expected -width="300" data-expected-height="490"> 189 <div class="grid itemsStart contentStart max-content width300" data-expected -width="300" data-expected-height="490">
190 <div class="minHeightFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"> XX XXX X XXX XX</div> 190 <div class="minHeightFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"> XX XXX X XXX XX</div>
191 <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330" >X XXX XX XXXXX XX XXX X XXXX X XX</div> 191 <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
192 <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160" >XXXX XX X XX XXX</div> 192 <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160" >XXXX XX X XX XXX</div>
193 </div> 193 </div>
194 </div> 194 </div>
195 195
196 </body> 196 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698