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 | 5 |
6 .grid { | 6 .grid { |
7 grid-template-columns: 100px 200px; | 7 grid-template-columns: 100px 200px; |
8 grid-template-rows: 50px 150px; | 8 grid-template-rows: 50px 150px; |
9 width: 100%; | 9 width: 100%; |
10 height: 100%; | 10 height: 100%; |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
42 grid-row: 1 / 2; | 42 grid-row: 1 / 2; |
43 } | 43 } |
44 | 44 |
45 .endSecondRowEndSecondColumn { | 45 .endSecondRowEndSecondColumn { |
46 background-color: orange; | 46 background-color: orange; |
47 grid-column-end: 3; | 47 grid-column-end: 3; |
48 grid-row-end: 3; | 48 grid-row-end: 3; |
49 } | 49 } |
50 | 50 |
51 </style> | 51 </style> |
52 <script src="../../resources/check-layout.js"></script> | 52 <script src="../../resources/testharness.js"></script> |
| 53 <script src="../../resources/testharnessreport.js"></script> |
| 54 <script src="../../resources/check-layout-th.js"></script> |
53 <body onload="checkLayout('.grid')"> | 55 <body onload="checkLayout('.grid')"> |
| 56 <div id="log"></div> |
54 | 57 |
55 <p>This test checks the different size options for absolutely positioned grid it
ems.</p> | 58 <p>This test checks the different size options for absolutely positioned grid it
ems.</p> |
56 | 59 |
57 <div class="unconstrainedContainer"> | 60 <div class="unconstrainedContainer"> |
58 <div class="grid"> | 61 <div class="grid"> |
59 <div class="absolute autoRowAutoColumn sizedToGridArea" | 62 <div class="absolute autoRowAutoColumn sizedToGridArea" |
60 data-offset-x="15" data-offset-y="15" data-expected-width="1030" dat
a-expected-height="1030"> | 63 data-offset-x="15" data-offset-y="15" data-expected-width="1030" dat
a-expected-height="1030"> |
61 </div> | 64 </div> |
62 <div class="absolute secondRowSecondColumn sizedToGridArea" | 65 <div class="absolute secondRowSecondColumn sizedToGridArea" |
63 data-offset-x="115" data-offset-y="65" data-expected-width="915" dat
a-expected-height="965"> | 66 data-offset-x="115" data-offset-y="65" data-expected-width="915" dat
a-expected-height="965"> |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
115 </div> | 118 </div> |
116 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" | 119 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" |
117 data-offset-x="20" data-offset-y="30" data-expected-width="85" data-
expected-height="15"> | 120 data-offset-x="20" data-offset-y="30" data-expected-width="85" data-
expected-height="15"> |
118 </div> | 121 </div> |
119 <div class="absolute endSecondRowEndSecondColumn offsets" | 122 <div class="absolute endSecondRowEndSecondColumn offsets" |
120 data-offset-x="5" data-offset-y="15" data-expected-width="300" data-
expected-height="180"> | 123 data-offset-x="5" data-offset-y="15" data-expected-width="300" data-
expected-height="180"> |
121 </div> | 124 </div> |
122 </div> | 125 </div> |
123 </div> | 126 </div> |
124 | 127 |
| 128 <div class="unconstrainedContainer"> |
| 129 <div class="grid directionRTL"> |
| 130 <div class="absolute autoRowAutoColumn sizedToGridArea" |
| 131 data-offset-x="-15" data-offset-y="15" data-expected-width="1030" da
ta-expected-height="1030"> |
| 132 </div> |
| 133 <div class="absolute secondRowSecondColumn sizedToGridArea" |
| 134 data-offset-x="0" data-offset-y="65" data-expected-width="915" data-
expected-height="965"> |
| 135 </div> |
| 136 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" |
| 137 data-offset-x="915" data-offset-y="15" data-expected-width="100" dat
a-expected-height="50"> |
| 138 </div> |
| 139 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" |
| 140 data-offset-x="700" data-offset-y="15" data-expected-width="315" dat
a-expected-height="215"> |
| 141 </div> |
| 142 </div> |
| 143 </div> |
| 144 |
| 145 <div class="unconstrainedContainer"> |
| 146 <div class="grid directionRTL"> |
| 147 <div class="absolute autoRowAutoColumn lengthSize" |
| 148 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> |
| 149 </div> |
| 150 <div class="absolute secondRowSecondColumn lengthSize" |
| 151 data-offset-x="865" data-offset-y="65" data-expected-width="50" data
-expected-height="20"> |
| 152 </div> |
| 153 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" |
| 154 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> |
| 155 </div> |
| 156 <div class="absolute endSecondRowEndSecondColumn lengthSize" |
| 157 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> |
| 158 </div> |
| 159 </div> |
| 160 </div> |
| 161 |
| 162 <div class="unconstrainedContainer"> |
| 163 <div class="grid directionRTL"> |
| 164 <div class="absolute autoRowAutoColumn percentageSize" |
| 165 data-offset-x="500" data-offset-y="15" data-expected-width="515" dat
a-expected-height="206"> |
| 166 </div> |
| 167 <div class="absolute secondRowSecondColumn percentageSize" |
| 168 data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5"
data-expected-height="193"> |
| 169 </div> |
| 170 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" |
| 171 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="10"> |
| 172 </div> |
| 173 <div class="absolute endSecondRowEndSecondColumn percentageSize" |
| 174 data-offset-x="858" data-offset-y="15" data-expected-width="157.5" d
ata-expected-height="43"> |
| 175 </div> |
| 176 </div> |
| 177 </div> |
| 178 |
125 </body> | 179 </body> |
OLD | NEW |