OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.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"> | 4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet"> |
5 <link href="resources/grid.css" rel="stylesheet"> | 5 <link href="resources/grid.css" rel="stylesheet"> |
6 <link href="resources/grid-alignment.css" rel="stylesheet"> | 6 <link href="resources/grid-alignment.css" rel="stylesheet"> |
7 <style> | 7 <style> |
8 .columnsSmallerThanContentBox { grid-template-columns: 80px; } | 8 .columnsSmallerThanContentBox { grid-template-columns: 80px; } |
9 .columnsSameAsContentBox { grid-template-columns: 100px; } | 9 .columnsSameAsContentBox { grid-template-columns: 100px; } |
10 .columnsBiggerThanContentBox { grid-template-columns: 120px; } | 10 .columnsBiggerThanContentBox { grid-template-columns: 120px; } |
(...skipping 25 matching lines...) Expand all Loading... | |
36 </style> | 36 </style> |
37 <script src="../../resources/check-layout.js"></script> | 37 <script src="../../resources/check-layout.js"></script> |
38 <body onload="checkLayout('.grid')"> | 38 <body onload="checkLayout('.grid')"> |
39 | 39 |
40 <p>This test checks min-width|height auto does not interfere in margins computat ion, properly placing items inside their grid area.</p> | 40 <p>This test checks min-width|height auto does not interfere in margins computat ion, properly placing items inside their grid area.</p> |
41 | 41 |
42 <!-- Checking min-width: auto logic --> | 42 <!-- Checking min-width: auto logic --> |
43 <p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p> | 43 <p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p> |
44 <div class="container"> | 44 <div class="container"> |
45 <div class="grid columnsSmallerThanContentBox rowsBiggerThanMarginBox"> | 45 <div class="grid columnsSmallerThanContentBox rowsBiggerThanMarginBox"> |
46 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div> | 46 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="40" data-expected-height="60">XXXX</div> |
47 </div> | 47 </div> |
48 </div> | 48 </div> |
49 | 49 |
50 <p>Stretching allowed in both axis | column of same size than content-box, row b igger than margin-box</p> | 50 <p>Stretching allowed in both axis | column of same size than content-box, row b igger than margin-box</p> |
51 <div class="container"> | 51 <div class="container"> |
52 <div class="grid columnsSameAsContentBox rowsBiggerThanMarginBox"> | 52 <div class="grid columnsSameAsContentBox rowsBiggerThanMarginBox"> |
53 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="60" data-expected-height="60">XXXX</div> | 53 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="60" data-expected-height="60">XXXX</div> |
54 </div> | 54 </div> |
55 </div> | 55 </div> |
56 | 56 |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
108 <div class="container"> | 108 <div class="container"> |
109 <div class="grid fit-content autoHeight justifyItemsStart columnsBiggerThanM arginBox rowsBiggerThanMarginBox"> | 109 <div class="grid fit-content autoHeight justifyItemsStart columnsBiggerThanM arginBox rowsBiggerThanMarginBox"> |
110 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div> | 110 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div> |
111 </div> | 111 </div> |
112 </div> | 112 </div> |
113 | 113 |
114 <!-- Checking stretch in column-axis --> | 114 <!-- Checking stretch in column-axis --> |
115 <p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p> | 115 <p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p> |
116 <div class="container"> | 116 <div class="container"> |
117 <div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox"> | 117 <div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox"> |
118 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> | 118 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="0">XXXX</div> |
jfernandez
2016/10/06 10:23:28
Why 0 ?
Manuel Rego
2016/10/06 10:41:36
The row is 20px height, and the item has 20px marg
| |
119 </div> | 119 </div> |
120 </div> | 120 </div> |
121 | 121 |
122 <p>Stretching allowed in both axis | row of same size than content-box, column b igger than margin-box</p> | 122 <p>Stretching allowed in both axis | row of same size than content-box, column b igger than margin-box</p> |
123 <div class="container"> | 123 <div class="container"> |
124 <div class="grid rowsSameAsContentBox columnsBiggerThanMarginBox"> | 124 <div class="grid rowsSameAsContentBox columnsBiggerThanMarginBox"> |
125 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> | 125 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> |
126 </div> | 126 </div> |
127 </div> | 127 </div> |
128 | 128 |
129 <p>Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box</p> | 129 <p>Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box</p> |
130 <div class="container"> | 130 <div class="container"> |
131 <div class="grid rowsBiggerThanContentBox columnsBiggerThanMarginBox"> | 131 <div class="grid rowsBiggerThanContentBox columnsBiggerThanMarginBox"> |
132 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> | 132 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="10">XXXX</div> |
133 </div> | 133 </div> |
134 </div> | 134 </div> |
135 | 135 |
136 <p>Stretching allowed in both axis | row of same size as margin-box, column bigg er than margin-box</p> | 136 <p>Stretching allowed in both axis | row of same size as margin-box, column bigg er than margin-box</p> |
137 <div class="container"> | 137 <div class="container"> |
138 <div class="grid rowsSameAsMarginBox columnsBiggerThanMarginBox"> | 138 <div class="grid rowsSameAsMarginBox columnsBiggerThanMarginBox"> |
139 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> | 139 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> |
140 </div> | 140 </div> |
141 </div> | 141 </div> |
142 | 142 |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
175 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> | 175 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> |
176 </div> | 176 </div> |
177 </div> | 177 </div> |
178 | 178 |
179 <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than m argin-box, column bigger than margin-box</p> | 179 <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than m argin-box, column bigger than margin-box</p> |
180 <div class="container"> | 180 <div class="container"> |
181 <div class="grid fit-content autoWidth alignItemsStart rowsBiggerThanMarginB ox columnsBiggerThanMarginBox"> | 181 <div class="grid fit-content autoWidth alignItemsStart rowsBiggerThanMarginB ox columnsBiggerThanMarginBox"> |
182 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> | 182 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> |
183 </div> | 183 </div> |
184 </div> | 184 </div> |
OLD | NEW |