OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <link href="resources/grid.css" rel="stylesheet"> | 2 <link href="resources/grid.css" rel="stylesheet"> |
3 <style> | 3 <style> |
4 .grid { | 4 .grid { |
5 grid-template: 1fr / 50px 1fr; | 5 grid-template: 50px 1fr / 1fr; |
6 | 6 |
7 position: absolute; | 7 position: absolute; |
8 left: 50px; | 8 left: 50px; |
9 top: 50px; | 9 top: 50px; |
10 | 10 |
11 width: 200px; | 11 width: 200px; |
12 height: 200px; | 12 height: 200px; |
13 | 13 |
14 border: 7px solid #ccc; | 14 border: 7px solid #ccc; |
15 font: 10px/1 Ahem; | 15 font: 10px/1 Ahem; |
(...skipping 13 matching lines...) Expand all Loading... |
29 <p>Items should extend to fill the width of the absolutely positioned grid conta
iner.</p> | 29 <p>Items should extend to fill the width of the absolutely positioned grid conta
iner.</p> |
30 <script src="../../resources/check-layout.js"></script> | 30 <script src="../../resources/check-layout.js"></script> |
31 <body onload="checkLayout('.grid')"> | 31 <body onload="checkLayout('.grid')"> |
32 | 32 |
33 <div class="grid"> | 33 <div class="grid"> |
34 <div class="row1" data-expected-height="50" data-expected-width="200">XXX X
</div> | 34 <div class="row1" data-expected-height="50" data-expected-width="200">XXX X
</div> |
35 <div class="row2" data-expected-height="150" data-expected-width="200">XX XX
X XX</div> | 35 <div class="row2" data-expected-height="150" data-expected-width="200">XX XX
X XX</div> |
36 </div> | 36 </div> |
37 | 37 |
38 </body> | 38 </body> |
OLD | NEW |