| 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 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 53 <script src="../../resources/testharnessreport.js"></script> | 53 <script src="../../resources/testharnessreport.js"></script> |
| 54 <script src="../../resources/check-layout-th.js"></script> | 54 <script src="../../resources/check-layout-th.js"></script> |
| 55 <body onload="checkLayout('.grid')"> | 55 <body onload="checkLayout('.grid')"> |
| 56 <div id="log"></div> | 56 <div id="log"></div> |
| 57 | 57 |
| 58 <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> |
| 59 | 59 |
| 60 <div class="unconstrainedContainer"> | 60 <div class="unconstrainedContainer"> |
| 61 <div class="grid"> | 61 <div class="grid"> |
| 62 <div class="absolute autoRowAutoColumn sizedToGridArea" | 62 <div class="absolute autoRowAutoColumn sizedToGridArea" |
| 63 data-offset-x="15" data-offset-y="15" data-expected-width="1030" dat
a-expected-height="1030"> | 63 data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-
expected-height="1030"> |
| 64 </div> | 64 </div> |
| 65 <div class="absolute secondRowSecondColumn sizedToGridArea" | 65 <div class="absolute secondRowSecondColumn sizedToGridArea" |
| 66 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"> |
| 67 </div> | 67 </div> |
| 68 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" | 68 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" |
| 69 data-offset-x="15" data-offset-y="15" data-expected-width="100" data
-expected-height="50"> | 69 data-offset-x="15" data-offset-y="15" data-expected-width="100" data
-expected-height="50"> |
| 70 </div> | 70 </div> |
| 71 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" | 71 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" |
| 72 data-offset-x="15" data-offset-y="15" data-expected-width="315" data
-expected-height="215"> | 72 data-offset-x="0" data-offset-y="0" data-expected-width="315" data-e
xpected-height="215"> |
| 73 </div> | 73 </div> |
| 74 </div> | 74 </div> |
| 75 </div> | 75 </div> |
| 76 | 76 |
| 77 <div class="unconstrainedContainer"> | 77 <div class="unconstrainedContainer"> |
| 78 <div class="grid"> | 78 <div class="grid"> |
| 79 <div class="absolute autoRowAutoColumn lengthSize" | 79 <div class="absolute autoRowAutoColumn lengthSize" |
| 80 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="20"> | 80 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex
pected-height="20"> |
| 81 </div> | 81 </div> |
| 82 <div class="absolute secondRowSecondColumn lengthSize" | 82 <div class="absolute secondRowSecondColumn lengthSize" |
| 83 data-offset-x="115" data-offset-y="65" data-expected-width="50" data
-expected-height="20"> | 83 data-offset-x="115" data-offset-y="65" data-expected-width="50" data
-expected-height="20"> |
| 84 </div> | 84 </div> |
| 85 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" | 85 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" |
| 86 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="20"> | 86 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="20"> |
| 87 </div> | 87 </div> |
| 88 <div class="absolute endSecondRowEndSecondColumn lengthSize" | 88 <div class="absolute endSecondRowEndSecondColumn lengthSize" |
| 89 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="20"> | 89 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex
pected-height="20"> |
| 90 </div> | 90 </div> |
| 91 </div> | 91 </div> |
| 92 </div> | 92 </div> |
| 93 | 93 |
| 94 <div class="unconstrainedContainer"> | 94 <div class="unconstrainedContainer"> |
| 95 <div class="grid"> | 95 <div class="grid"> |
| 96 <div class="absolute autoRowAutoColumn percentageSize" | 96 <div class="absolute autoRowAutoColumn percentageSize" |
| 97 data-offset-x="15" data-offset-y="15" data-expected-width="515" data
-expected-height="206"> | 97 data-offset-x="0" data-offset-y="0" data-expected-width="515" data-e
xpected-height="206"> |
| 98 </div> | 98 </div> |
| 99 <div class="absolute secondRowSecondColumn percentageSize" | 99 <div class="absolute secondRowSecondColumn percentageSize" |
| 100 data-offset-x="115" data-offset-y="65" data-expected-width="457.5" d
ata-expected-height="193"> | 100 data-offset-x="115" data-offset-y="65" data-expected-width="457.5" d
ata-expected-height="193"> |
| 101 </div> | 101 </div> |
| 102 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" | 102 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" |
| 103 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="10"> | 103 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="10"> |
| 104 </div> | 104 </div> |
| 105 <div class="absolute endSecondRowEndSecondColumn percentageSize" | 105 <div class="absolute endSecondRowEndSecondColumn percentageSize" |
| 106 data-offset-x="15" data-offset-y="15" data-expected-width="157.5" da
ta-expected-height="43"> | 106 data-offset-x="0" data-offset-y="0" data-expected-width="157.5" data
-expected-height="43"> |
| 107 </div> | 107 </div> |
| 108 </div> | 108 </div> |
| 109 </div> | 109 </div> |
| 110 | 110 |
| 111 <div class="unconstrainedContainer"> | 111 <div class="unconstrainedContainer"> |
| 112 <div class="grid"> | 112 <div class="grid"> |
| 113 <div class="absolute autoRowAutoColumn offsets" | 113 <div class="absolute autoRowAutoColumn offsets" |
| 114 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data
-expected-height="995"> | 114 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data
-expected-height="995"> |
| 115 </div> | 115 </div> |
| 116 <div class="absolute secondRowSecondColumn offsets" | 116 <div class="absolute secondRowSecondColumn offsets" |
| 117 data-offset-x="120" data-offset-y="80" data-expected-width="900" dat
a-expected-height="930"> | 117 data-offset-x="120" data-offset-y="80" data-expected-width="900" dat
a-expected-height="930"> |
| 118 </div> | 118 </div> |
| 119 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" | 119 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" |
| 120 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"> |
| 121 </div> | 121 </div> |
| 122 <div class="absolute endSecondRowEndSecondColumn offsets" | 122 <div class="absolute endSecondRowEndSecondColumn offsets" |
| 123 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"> |
| 124 </div> | 124 </div> |
| 125 </div> | 125 </div> |
| 126 </div> | 126 </div> |
| 127 | 127 |
| 128 <div class="unconstrainedContainer"> | 128 <div class="unconstrainedContainer"> |
| 129 <div class="grid directionRTL"> | 129 <div class="grid directionRTL"> |
| 130 <div class="absolute autoRowAutoColumn sizedToGridArea" | 130 <div class="absolute autoRowAutoColumn sizedToGridArea" |
| 131 data-offset-x="-15" data-offset-y="15" data-expected-width="1030" da
ta-expected-height="1030"> | 131 data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-
expected-height="1030"> |
| 132 </div> | 132 </div> |
| 133 <div class="absolute secondRowSecondColumn sizedToGridArea" | 133 <div class="absolute secondRowSecondColumn sizedToGridArea" |
| 134 data-offset-x="0" data-offset-y="65" data-expected-width="915" data-
expected-height="965"> | 134 data-offset-x="0" data-offset-y="65" data-expected-width="915" data-
expected-height="965"> |
| 135 </div> | 135 </div> |
| 136 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" | 136 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" |
| 137 data-offset-x="915" data-offset-y="15" data-expected-width="100" dat
a-expected-height="50"> | 137 data-offset-x="915" data-offset-y="15" data-expected-width="100" dat
a-expected-height="50"> |
| 138 </div> | 138 </div> |
| 139 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" | 139 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" |
| 140 data-offset-x="700" data-offset-y="15" data-expected-width="315" dat
a-expected-height="215"> | 140 data-offset-x="715" data-offset-y="0" data-expected-width="315" data
-expected-height="215"> |
| 141 </div> | 141 </div> |
| 142 </div> | 142 </div> |
| 143 </div> | 143 </div> |
| 144 | 144 |
| 145 <div class="unconstrainedContainer"> | 145 <div class="unconstrainedContainer"> |
| 146 <div class="grid directionRTL"> | 146 <div class="grid directionRTL"> |
| 147 <div class="absolute autoRowAutoColumn lengthSize" | 147 <div class="absolute autoRowAutoColumn lengthSize" |
| 148 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> | 148 data-offset-x="980" data-offset-y="0" data-expected-width="50" data-
expected-height="20"> |
| 149 </div> | 149 </div> |
| 150 <div class="absolute secondRowSecondColumn lengthSize" | 150 <div class="absolute secondRowSecondColumn lengthSize" |
| 151 data-offset-x="865" data-offset-y="65" data-expected-width="50" data
-expected-height="20"> | 151 data-offset-x="865" data-offset-y="65" data-expected-width="50" data
-expected-height="20"> |
| 152 </div> | 152 </div> |
| 153 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" | 153 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" |
| 154 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> | 154 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> |
| 155 </div> | 155 </div> |
| 156 <div class="absolute endSecondRowEndSecondColumn lengthSize" | 156 <div class="absolute endSecondRowEndSecondColumn lengthSize" |
| 157 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> | 157 data-offset-x="980" data-offset-y="0" data-expected-width="50" data-
expected-height="20"> |
| 158 </div> | 158 </div> |
| 159 </div> | 159 </div> |
| 160 </div> | 160 </div> |
| 161 | 161 |
| 162 <div class="unconstrainedContainer"> | 162 <div class="unconstrainedContainer"> |
| 163 <div class="grid directionRTL"> | 163 <div class="grid directionRTL"> |
| 164 <div class="absolute autoRowAutoColumn percentageSize" | 164 <div class="absolute autoRowAutoColumn percentageSize" |
| 165 data-offset-x="500" data-offset-y="15" data-expected-width="515" dat
a-expected-height="206"> | 165 data-offset-x="515" data-offset-y="0" data-expected-width="515" data
-expected-height="206"> |
| 166 </div> | 166 </div> |
| 167 <div class="absolute secondRowSecondColumn percentageSize" | 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"> | 168 data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5"
data-expected-height="193"> |
| 169 </div> | 169 </div> |
| 170 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" | 170 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" |
| 171 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="10"> | 171 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="10"> |
| 172 </div> | 172 </div> |
| 173 <div class="absolute endSecondRowEndSecondColumn percentageSize" | 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"> | 174 data-offset-x="873" data-offset-y="0" data-expected-width="157.5" da
ta-expected-height="43"> |
| 175 </div> | 175 </div> |
| 176 </div> | 176 </div> |
| 177 </div> | 177 </div> |
| 178 | 178 |
| 179 <div class="unconstrainedContainer"> | 179 <div class="unconstrainedContainer"> |
| 180 <div class="grid directionRTL"> | 180 <div class="grid directionRTL"> |
| 181 <div class="absolute autoRowAutoColumn offsets" | 181 <div class="absolute autoRowAutoColumn offsets" |
| 182 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data
-expected-height="995"> | 182 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data
-expected-height="995"> |
| 183 </div> | 183 </div> |
| 184 <div class="absolute secondRowSecondColumn offsets" | 184 <div class="absolute secondRowSecondColumn offsets" |
| 185 data-offset-x="5" data-offset-y="80" data-expected-width="900" data-
expected-height="930"> | 185 data-offset-x="5" data-offset-y="80" data-expected-width="900" data-
expected-height="930"> |
| 186 </div> | 186 </div> |
| 187 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" | 187 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" |
| 188 data-offset-x="920" data-offset-y="30" data-expected-width="85" data
-expected-height="15"> | 188 data-offset-x="920" data-offset-y="30" data-expected-width="85" data
-expected-height="15"> |
| 189 </div> | 189 </div> |
| 190 <div class="absolute endSecondRowEndSecondColumn offsets" | 190 <div class="absolute endSecondRowEndSecondColumn offsets" |
| 191 data-offset-x="720" data-offset-y="15" data-expected-width="300" dat
a-expected-height="180"> | 191 data-offset-x="720" data-offset-y="15" data-expected-width="300" dat
a-expected-height="180"> |
| 192 </div> | 192 </div> |
| 193 </div> | 193 </div> |
| 194 </div> | 194 </div> |
| 195 | 195 |
| 196 </body> | 196 </body> |
| OLD | NEW |