OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <link href="resources/grid-alignment.css" rel="stylesheet"> |
| 4 <style> |
| 5 body { |
| 6 margin: 0; |
| 7 } |
| 8 .grid { |
| 9 font: 10px/1 Ahem; |
| 10 width: 300px; |
| 11 height: 80px; |
| 12 position: relative; |
| 13 grid-template-columns: minmax(min-content, max-content); |
| 14 grid-template-rows: minmax(min-content, max-content); |
| 15 } |
| 16 </style> |
| 17 <script src="../../resources/testharness.js"></script> |
| 18 <script src="../../resources/testharnessreport.js"></script> |
| 19 <script src="../../resources/check-layout-th.js"></script> |
| 20 <body onload="checkLayout('.grid')"> |
| 21 <div id="log"></div> |
| 22 <p>This test checks that grid items sizing works as regular block sizing with or
thogonal flows.</p> |
| 23 |
| 24 <div> |
| 25 <p>HORIZONTAL-TB container with VERTICAL-LR items.</p> |
| 26 <div class="grid"> |
| 27 <div class="sizedToGridArea verticalLR firstRowFirstColumn" data-offset-
x="0" data-offset-y="0" data-expected-width="20" data-expected-height="80">X X X
X X X</div> |
| 28 </div> |
| 29 </div> |
| 30 |
| 31 <div> |
| 32 <p>HORIZONTAL-TB container with VERTICAL-RL items.</p> |
| 33 <div class="grid itemsStart"> |
| 34 <div class="sizedToGridArea verticalRL firstRowFirstColumn" data-offset-
x="0" data-offset-y="0" data-expected-width="20" data-expected-height="80">X X X
X X X</div> |
| 35 </div> |
| 36 </div> |
| 37 |
| 38 <div> |
| 39 <p>VERTICAL-LR container with HORIZONTAL-TB items.</p> |
| 40 <div class="grid itemsStart verticalLR"> |
| 41 <div class="sizedToGridArea firstRowFirstColumn horizontalTB" data-offse
t-x="0" data-offset-y="0" data-expected-width="110" data-expected-height="10">X
X X X X X</div> |
| 42 </div> |
| 43 </div> |
| 44 |
| 45 <div> |
| 46 <p>VERTICAL-RL container with HORIZONTAL-TB items.</p> |
| 47 <div class="grid itemsStart verticalRL"> |
| 48 <div class="sizedToGridArea firstRowFirstColumn horizontalTB" data-offse
t-x="190" data-offset-y="0" data-expected-width="110" data-expected-height="10">
X X X X X X</div> |
| 49 </div> |
| 50 </div> |
| 51 </body> |
OLD | NEW |