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 | 4 |
5 .grid { | 5 .grid { |
6 grid-template-columns: 100px 200px; | 6 grid-template-columns: 100px 200px; |
7 grid-template-rows: 50px 150px; | 7 grid-template-rows: 50px 150px; |
8 width: 500px; | 8 width: 500px; |
9 height: 300px; | 9 height: 300px; |
10 border: 5px solid black; | 10 border: 5px solid black; |
(...skipping 25 matching lines...) Expand all Loading... |
36 grid-row: span 8; | 36 grid-row: span 8; |
37 } | 37 } |
38 | 38 |
39 .endImplicitLineSpan { | 39 .endImplicitLineSpan { |
40 background-color: orange; | 40 background-color: orange; |
41 grid-column: 1 / span 5; | 41 grid-column: 1 / span 5; |
42 grid-row: 1 / span 8; | 42 grid-row: 1 / span 8; |
43 } | 43 } |
44 | 44 |
45 </style> | 45 </style> |
46 <script src="../../resources/check-layout.js"></script> | 46 <script src="../../resources/testharness.js"></script> |
| 47 <script src="../../resources/testharnessreport.js"></script> |
| 48 <script src="../../resources/check-layout-th.js"></script> |
47 <body onload="checkLayout('.grid')"> | 49 <body onload="checkLayout('.grid')"> |
| 50 <div id="log"></div> |
48 | 51 |
49 <p>This test checks that grid placement properties of absolutely positioned item
s using implicit grid lines are treated as "auto".</p> | 52 <p>This test checks that grid placement properties of absolutely positioned item
s using implicit grid lines are treated as "auto".</p> |
50 | 53 |
51 <div class="grid"> | 54 <div class="grid"> |
52 <div class="absolute sizedToGridArea startImplicitLine" | 55 <div class="absolute sizedToGridArea startImplicitLine" |
53 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp
ected-height="330"> | 56 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp
ected-height="330"> |
54 </div> | 57 </div> |
55 <div class="absolute sizedToGridArea endImplicitLine" | 58 <div class="absolute sizedToGridArea endImplicitLine" |
56 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp
ected-height="315"> | 59 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp
ected-height="315"> |
57 </div> | 60 </div> |
58 </div> | 61 </div> |
59 | 62 |
60 <div class="grid"> | 63 <div class="grid"> |
61 <div class="absolute sizedToGridArea startImplicitLineSpan" | 64 <div class="absolute sizedToGridArea startImplicitLineSpan" |
62 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp
ected-height="330"> | 65 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp
ected-height="330"> |
63 </div> | 66 </div> |
64 <div class="absolute sizedToGridArea endImplicitLineSpan" | 67 <div class="absolute sizedToGridArea endImplicitLineSpan" |
65 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp
ected-height="315"> | 68 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp
ected-height="315"> |
66 </div> | 69 </div> |
67 </div> | 70 </div> |
68 | 71 |
| 72 <div class="grid directionRTL"> |
| 73 <div class="absolute sizedToGridArea startImplicitLine" |
| 74 data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-ex
pected-height="330"> |
| 75 </div> |
| 76 <div class="absolute sizedToGridArea endImplicitLine" |
| 77 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expe
cted-height="315"> |
| 78 </div> |
| 79 </div> |
| 80 |
| 81 <div class="grid directionRTL"> |
| 82 <div class="absolute sizedToGridArea startImplicitLineSpan" |
| 83 data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-ex
pected-height="330"> |
| 84 </div> |
| 85 <div class="absolute sizedToGridArea endImplicitLineSpan" |
| 86 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expe
cted-height="315"> |
| 87 </div> |
| 88 </div> |
| 89 |
69 </body> | 90 </body> |
OLD | NEW |