OLD | NEW |
---|---|
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 .grid { | 5 .grid { |
6 grid-template-columns: 5px; | 6 grid-template-columns: 5px; |
7 grid-template-rows: 5px; | 7 grid-template-rows: 5px; |
8 } | 8 } |
9 | 9 |
10 .container { | 10 .container { |
(...skipping 17 matching lines...) Expand all Loading... | |
28 | 28 |
29 .maxSmaller { | 29 .maxSmaller { |
30 max-width: 10px; | 30 max-width: 10px; |
31 max-height: 10px; | 31 max-height: 10px; |
32 } | 32 } |
33 | 33 |
34 .maxBigger { | 34 .maxBigger { |
35 max-width: 150px; | 35 max-width: 150px; |
36 max-height: 75px; | 36 max-height: 75px; |
37 } | 37 } |
38 | |
39 .noStretch { | |
40 justify-items: start; | |
41 } | |
38 </style> | 42 </style> |
39 <script src="../../resources/check-layout.js"></script> | 43 <script src="../../resources/check-layout.js"></script> |
40 <body onload="checkLayout('.grid')"> | 44 <body onload="checkLayout('.grid')"> |
41 | 45 |
42 <p>This test checks min-width|height auto behavior for grids</p> | 46 <p>This test checks min-width|height auto behavior for grids</p> |
43 | 47 |
44 <div class="container"> | 48 <div class="container"> |
45 <div class="grid"> | 49 <div class="grid"> |
46 <div class="ahem" data-expected-width="100" data-expected-height="25">XX XX</div> | 50 <div class="ahem" data-expected-width="100" data-expected-height="25">XX XX</div> |
47 </div> | 51 </div> |
(...skipping 16 matching lines...) Expand all Loading... | |
64 <div class="ahem maxSmaller" data-expected-width="10" data-expected-heig ht="10">XXXX</div> | 68 <div class="ahem maxSmaller" data-expected-width="10" data-expected-heig ht="10">XXXX</div> |
65 </div> | 69 </div> |
66 </div> | 70 </div> |
67 | 71 |
68 <div class="container"> | 72 <div class="container"> |
69 <div class="grid"> | 73 <div class="grid"> |
70 <div class="ahem maxBigger" data-expected-width="100" data-expected-heig ht="25">XXXX</div> | 74 <div class="ahem maxBigger" data-expected-width="100" data-expected-heig ht="25">XXXX</div> |
71 </div> | 75 </div> |
72 </div> | 76 </div> |
73 | 77 |
78 <!-- Verifying that the same cases without 'stretch' work as expected as well. - -> | |
svillar
2015/07/28 15:14:07
Nit: I think we tend to write imperatives instead
jfernandez
2015/07/28 21:31:50
Acknowledged.
| |
79 <div class="container"> | |
80 <div class="grid noStretch"> | |
81 <div class="ahem" data-expected-width="100" data-expected-height="25">XX XX</div> | |
82 </div> | |
83 </div> | |
84 | |
85 <div class="container"> | |
86 <div class="grid noStretch"> | |
87 <div class="ahem minSmaller" data-expected-width="100" data-expected-hei ght="10">XXXX</div> | |
88 </div> | |
89 </div> | |
90 | |
91 <div class="container"> | |
92 <div class="grid noStretch"> | |
93 <div class="ahem minBigger" data-expected-width="150" data-expected-heig ht="75">XXXX</div> | |
94 </div> | |
95 </div> | |
96 | |
97 <div class="container"> | |
98 <div class="grid noStretch"> | |
99 <div class="ahem maxSmaller" data-expected-width="10" data-expected-heig ht="10">XXXX</div> | |
100 </div> | |
101 </div> | |
102 | |
103 <div class="container"> | |
104 <div class="grid noStretch"> | |
105 <div class="ahem maxBigger" data-expected-width="100" data-expected-heig ht="25">XXXX</div> | |
106 </div> | |
107 </div> | |
108 | |
109 <!-- Verifying we are applying correctly the min-content size. --> | |
svillar
2015/07/28 15:14:07
Ditto.
jfernandez
2015/07/28 21:31:50
Acknowledged.
| |
110 <div class="container"> | |
111 <div class="grid"> | |
112 <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div> | |
113 </div> | |
114 </div> | |
115 | |
116 <div class="container"> | |
117 <div class="grid noStretch"> | |
118 <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div> | |
119 </div> | |
120 </div> | |
121 | |
74 </body> | 122 </body> |
75 </html> | 123 </html> |
OLD | NEW |