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 <!-- Verify that the same cases without 'stretch' work as expected as well. --> |
| 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 <!-- Verify we are applying correctly the min-content size. --> |
| 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 |