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

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 1407633003: [css-grid] Implementation of Baseline Self-Alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Get advantage of recomputing the intrinsic size to solve the issues with orthogonal flows. Created 3 years, 10 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-self-baseline-vertical-rl-07-expected.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/LayoutBlockFlow.cpp » ('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 21 matching lines...) Expand all
32 } 32 }
33 </style> 33 </style>
34 <script src="../../resources/testharness.js"></script> 34 <script src="../../resources/testharness.js"></script>
35 <script src="../../resources/testharnessreport.js"></script> 35 <script src="../../resources/testharnessreport.js"></script>
36 <script src="../../resources/check-layout-th.js"></script> 36 <script src="../../resources/check-layout-th.js"></script>
37 <body onload="checkLayout('.grid')"> 37 <body onload="checkLayout('.grid')">
38 <div id="log"></div> 38 <div id="log"></div>
39 <p>This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.</p> 39 <p>This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.</p>
40 40
41 <div class="container"> 41 <div class="container">
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>.</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>.</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>.</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>.</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>.</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>
83 </div> 83 </div>
84 </div> 84 </div>
85 85
86 <div class="container"> 86 <div class="container">
87 <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> Both paral ell and orthogonal tracks reach their maximum sizes.</p> 87 <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>.</p>
88 <div class="grid itemsStart contentStart max-content width300" data-expected -width="300" data-expected-height="490"> 88 <div class="grid itemsStart contentStart max-content width300" data-expected -width="300" data-expected-height="490">
89 <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> 89 <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>
90 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div> 90 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
91 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX X XX</div> 91 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX X XX</div>
92 </div> 92 </div>
93 </div> 93 </div>
94 94
95 <div class="container"> 95 <div class="container">
96 <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> Same resul t as sizing under max-content constrain.</p> 96 <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>.</p>
97 <div class="grid itemsStart contentStart fit-content width300" data-expected -width="300" data-expected-height="490"> 97 <div class="grid itemsStart contentStart fit-content width300" data-expected -width="300" data-expected-height="490">
98 <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> 98 <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>
99 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div> 99 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
100 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX X XX</div> 100 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX X XX</div>
101 </div> 101 </div>
102 </div> 102 </div>
103 103
104 <!-- Playing with min-{width,height} constrains. --> 104 <!-- Playing with min-{width,height} constrains. -->
105 105
106 <div class="container"> 106 <div class="container">
107 <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with < b>min-width: 0px, min-height: auto</b>.<br> Since grid container has definite si ze in both axis, all grid tracks grow until reach their maximum breadth, hence m in-width has no effect.</p> 107 <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with < b>min-width: 0px, min-height: auto</b>.</p>
108 <div class="grid itemsStart contentStart width300 height200" data-expected-w idth="300" data-expected-height="200"> 108 <div class="grid itemsStart contentStart width300 height200" data-expected-w idth="300" data-expected-height="200">
109 <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> 109 <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>
110 <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> 110 <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>
111 <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> 111 <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>
112 </div> 112 </div>
113 </div> 113 </div>
114 114
115 <div class="container"> 115 <div class="container">
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>.</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>.</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>.</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>
139 </div> 139 </div>
140 </div> 140 </div>
141 141
142 <div class="container"> 142 <div class="container">
143 <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: 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> 143 <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: 0px</b>.</p>
144 <div class="grid itemsStart contentStart max-content width300" data-expected -width="300" data-expected-height="490"> 144 <div class="grid itemsStart contentStart max-content width300" data-expected -width="300" data-expected-height="490">
145 <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> 145 <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>
146 <div class="minHeightZero 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> 146 <div class="minHeightZero 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>
147 <div class="minHeightZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160" >XXXX XX X XX XXX</div> 147 <div class="minHeightZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160" >XXXX XX X XX XXX</div>
148 </div> 148 </div>
149 </div> 149 </div>
150 150
151 <div class="container"> 151 <div class="container">
152 <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with < b>min-width: 50px, min-height: auto</b>.<br> Since grid container has definite s ize in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.</p> 152 <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with < b>min-width: 50px, min-height: auto</b>.</p>
153 <div class="grid itemsStart contentStart width300 height200" data-expected-w idth="300" data-expected-height="200"> 153 <div class="grid itemsStart contentStart width300 height200" data-expected-w idth="300" data-expected-height="200">
154 <div class="minWidthFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div> 154 <div class="minWidthFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div>
155 <div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="50" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div> 155 <div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="50" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
156 <div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95"> XXXX XX X XX XXX</div> 156 <div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95"> XXXX XX X XX XXX</div>
157 </div> 157 </div>
158 </div> 158 </div>
159 159
160 <div class="container"> 160 <div class="container">
161 <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-width: 50px, min-height: auto</b>.<br> Column tracks size is set by min-width, while rows grow until exhaust the available he ight.</p> 161 <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-width: 50px, min-height: auto</b>.</p>
162 <div class="grid itemsStart contentStart min-content height200" data-expecte d-width="100" data-expected-height="200"> 162 <div class="grid itemsStart contentStart min-content height200" data-expecte d-width="100" data-expected-height="200">
163 <div class="minWidthFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40"> XX XXX X XXX XX</div> 163 <div class="minWidthFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40"> XX XXX X XXX XX</div>
164 <div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset- x="50" data-offset-y="0" data-expected-width="50" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div> 164 <div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset- x="50" data-offset-y="0" data-expected-width="50" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
165 <div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95"> XXXX XX X XX XXX</div> 165 <div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95"> XXXX XX X XX XXX</div>
166 </div> 166 </div>
167 </div> 167 </div>
168 168
169 <div class="container"> 169 <div class="container">
170 <p>Grid width under <b>max-content</b> constrain and fixed height.<br> All g rid items sized with <b>min-width: 50px, min-height: auto</b>.<br> .</p> 170 <p>Grid width under <b>max-content</b> constrain and fixed height.<br> All g rid items sized with <b>min-width: 50px, min-height: auto</b>.<br> .</p>
171 <div class="grid itemsStart contentStart max-content height200" data-expecte d-width="200" data-expected-height="200"> 171 <div class="grid itemsStart contentStart max-content height200" data-expecte d-width="200" data-expected-height="200">
172 <div class="minWidthFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div> 172 <div class="minWidthFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div>
173 <div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="50" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div> 173 <div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="50" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
174 <div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95"> XXXX XX X XX XXX</div> 174 <div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95"> XXXX XX X XX XXX</div>
175 </div> 175 </div>
176 </div> 176 </div>
177 177
178 <div class="container"> 178 <div class="container">
179 <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: 50px</b>.<br> P arallel blue row track must grow to fulfill min-height restriction, while orthog onal shrink to satisfy container's min-content constrain.</p> 179 <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: 50px</b>.</p>
180 <div class="grid itemsStart contentStart min-content width300" data-expected -width="300" data-expected-height="100"> 180 <div class="grid itemsStart contentStart min-content width300" data-expected -width="300" data-expected-height="100">
181 <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> 181 <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>
182 <div class="minHeightFixed 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> 182 <div class="minHeightFixed 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>
183 <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="50" data-expected-width="40" data-expected-height="50"> XXXX XX X XX XXX</div> 183 <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="50" data-expected-width="40" data-expected-height="50"> XXXX XX X XX XXX</div>
184 </div> 184 </div>
185 </div> 185 </div>
186 186
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>.</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-self-baseline-vertical-rl-07-expected.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/LayoutBlockFlow.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698