table-001.html (10374B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Basic table layout</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> 7 <meta name="assert" content="Verify position of cells in basic 2x2, 4x3 and 3x4 math tables."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/feature-detection.js"></script> 11 <script> 12 setup({ explicit_done: true }); 13 window.addEventListener("load", runTests); 14 function runTests() { 15 Array.from(document.getElementsByTagName("mtable")).forEach(table => { 16 const id = table.getAttribute("id"); 17 const rtl = window.getComputedStyle(table).direction === "rtl"; 18 test(function() { 19 assert_true(MathMLFeatureDetection.has_mspace()); 20 const rows = Array.from(table.getElementsByTagName("mtr")); 21 for (var j = 0; j < rows.length; j++) { 22 var cells = Array.from(rows[j].getElementsByTagName("mtd")); 23 for (var i = 0; i < cells.length - 1; i++) { 24 var space1 = cells[i].firstElementChild.getBoundingClientRect(); 25 var space2 = cells[i + 1].firstElementChild.getBoundingClientRect(); 26 assert_equals(space1.top, space2.top, 27 `Cells (${i},${j}) and (${i + 1},${j}) should have same vertical position`); 28 if (rtl) { 29 assert_greater_than(space1.left, space2.right, 30 `Cell (${i},${j}) should be on the right of (${i + 1},${j})`); 31 } else { 32 assert_less_than(space1.right, space2.left, 33 `Cell (${i},${j}) should be on the left of (${i + 1},${j})`); 34 } 35 } 36 } 37 38 for (var j = 0; j < rows.length - 1; j++) { 39 var cells1 = Array.from(rows[j].getElementsByTagName("mtd")); 40 var cells2 = Array.from(rows[j + 1].getElementsByTagName("mtd")); 41 for (var i = 0; i < cells1.length; i++) { 42 var space1 = cells1[i].firstElementChild.getBoundingClientRect(); 43 var space2 = cells2[i].firstElementChild.getBoundingClientRect(); 44 assert_equals(space1.left, space2.left, 45 `Cells (${i},${j}) and (${i},${j + 1}) should have same horizontal position`); 46 assert_less_than(space1.bottom, space2.top, 47 `Cell (${i},${j}) should be above (${i},${j + 1})`); 48 } 49 } 50 }, `Layout of ${id}`); 51 52 }); 53 done(); 54 } 55 </script> 56 </head> 57 <body> 58 <div id="log"></div> 59 <p> 60 <math> 61 <mtable id="table-001"> 62 <mtr> 63 <mtd> 64 <mspace width="20px" height="10px" style="background: lightblue;"></mspace> 65 </mtd> 66 <mtd> 67 <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> 68 </mtd> 69 </mtr> 70 <mtr> 71 <mtd> 72 <mspace width="20px" height="10px" style="background: blue;"></mspace> 73 </mtd> 74 <mtd> 75 <mspace width="20px" height="10px" style="background: green;"></mspace> 76 </mtd> 77 </mtr> 78 </mtable> 79 <mtable id="table-002"> 80 <mtr> 81 <mtd> 82 <mspace width="20px" height="10px" style="background: lightblue;"></mspace> 83 </mtd> 84 <mtd> 85 <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> 86 </mtd> 87 <mtd> 88 <mspace width="20px" height="10px" style="background: cyan;"></mspace> 89 </mtd> 90 <mtd> 91 <mspace width="20px" height="10px" style="background: purple;"></mspace> 92 </mtd> 93 </mtr> 94 <mtr> 95 <mtd> 96 <mspace width="20px" height="10px" style="background: blue;"></mspace> 97 </mtd> 98 <mtd> 99 <mspace width="20px" height="10px" style="background: green;"></mspace> 100 </mtd> 101 <mtd> 102 <mspace width="20px" height="10px" style="background: yellow;"></mspace> 103 </mtd> 104 <mtd> 105 <mspace width="20px" height="10px" style="background: orange;"></mspace> 106 </mtd> 107 </mtr> 108 <mtr> 109 <mtd> 110 <mspace width="20px" height="10px" style="background: black;"></mspace> 111 </mtd> 112 <mtd> 113 <mspace width="20px" height="10px" style="background: red;"></mspace> 114 </mtd> 115 <mtd> 116 <mspace width="20px" height="10px" style="background: gray;"></mspace> 117 </mtd> 118 <mtd> 119 <mspace width="20px" height="10px" style="background: maroon;"></mspace> 120 </mtd> 121 </mtr> 122 </mtable> 123 <mtable id="table-003"> 124 <mtr> 125 <mtd> 126 <mspace width="20px" height="10px" style="background: lightblue;"></mspace> 127 </mtd> 128 <mtd> 129 <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> 130 </mtd> 131 <mtd> 132 <mspace width="20px" height="10px" style="background: cyan;"></mspace> 133 </mtd> 134 </mtr> 135 <mtr> 136 <mtd> 137 <mspace width="20px" height="10px" style="background: blue;"></mspace> 138 </mtd> 139 <mtd> 140 <mspace width="20px" height="10px" style="background: green;"></mspace> 141 </mtd> 142 <mtd> 143 <mspace width="20px" height="10px" style="background: orange;"></mspace> 144 </mtd> 145 </mtr> 146 <mtr> 147 <mtd> 148 <mspace width="20px" height="10px" style="background: black;"></mspace> 149 </mtd> 150 <mtd> 151 <mspace width="20px" height="10px" style="background: maroon;"></mspace> 152 </mtd> 153 <mtd> 154 <mspace width="20px" height="10px" style="background: gray;"></mspace> 155 </mtd> 156 </mtr> 157 <mtr> 158 <mtd> 159 <mspace width="20px" height="10px" style="background: red;"></mspace> 160 </mtd> 161 <mtd> 162 <mspace width="20px" height="10px" style="background: purple;"></mspace> 163 </mtd> 164 <mtd> 165 <mspace width="20px" height="10px" style="background: yellow;"></mspace> 166 </mtd> 167 168 </mtr> 169 </mtable> 170 </math> 171 </p> 172 <p> 173 <math dir="rtl"> 174 <mtable id="table-011"> 175 <mtr> 176 <mtd> 177 <mspace width="20px" height="10px" style="background: lightblue;"></mspace> 178 </mtd> 179 <mtd> 180 <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> 181 </mtd> 182 </mtr> 183 <mtr> 184 <mtd> 185 <mspace width="20px" height="10px" style="background: blue;"></mspace> 186 </mtd> 187 <mtd> 188 <mspace width="20px" height="10px" style="background: green;"></mspace> 189 </mtd> 190 </mtr> 191 </mtable> 192 <mtable id="table-012"> 193 <mtr> 194 <mtd> 195 <mspace width="20px" height="10px" style="background: lightblue;"></mspace> 196 </mtd> 197 <mtd> 198 <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> 199 </mtd> 200 <mtd> 201 <mspace width="20px" height="10px" style="background: cyan;"></mspace> 202 </mtd> 203 <mtd> 204 <mspace width="20px" height="10px" style="background: purple;"></mspace> 205 </mtd> 206 </mtr> 207 <mtr> 208 <mtd> 209 <mspace width="20px" height="10px" style="background: blue;"></mspace> 210 </mtd> 211 <mtd> 212 <mspace width="20px" height="10px" style="background: green;"></mspace> 213 </mtd> 214 <mtd> 215 <mspace width="20px" height="10px" style="background: yellow;"></mspace> 216 </mtd> 217 <mtd> 218 <mspace width="20px" height="10px" style="background: orange;"></mspace> 219 </mtd> 220 </mtr> 221 <mtr> 222 <mtd> 223 <mspace width="20px" height="10px" style="background: black;"></mspace> 224 </mtd> 225 <mtd> 226 <mspace width="20px" height="10px" style="background: red;"></mspace> 227 </mtd> 228 <mtd> 229 <mspace width="20px" height="10px" style="background: gray;"></mspace> 230 </mtd> 231 <mtd> 232 <mspace width="20px" height="10px" style="background: maroon;"></mspace> 233 </mtd> 234 </mtr> 235 </mtable> 236 <mtable id="table-013"> 237 <mtr> 238 <mtd> 239 <mspace width="20px" height="10px" style="background: lightblue;"></mspace> 240 </mtd> 241 <mtd> 242 <mspace width="20px" height="10px" style="background: lightgreen;"></mspace> 243 </mtd> 244 <mtd> 245 <mspace width="20px" height="10px" style="background: cyan;"></mspace> 246 </mtd> 247 </mtr> 248 <mtr> 249 <mtd> 250 <mspace width="20px" height="10px" style="background: blue;"></mspace> 251 </mtd> 252 <mtd> 253 <mspace width="20px" height="10px" style="background: green;"></mspace> 254 </mtd> 255 <mtd> 256 <mspace width="20px" height="10px" style="background: orange;"></mspace> 257 </mtd> 258 </mtr> 259 <mtr> 260 <mtd> 261 <mspace width="20px" height="10px" style="background: black;"></mspace> 262 </mtd> 263 <mtd> 264 <mspace width="20px" height="10px" style="background: maroon;"></mspace> 265 </mtd> 266 <mtd> 267 <mspace width="20px" height="10px" style="background: gray;"></mspace> 268 </mtd> 269 </mtr> 270 <mtr> 271 <mtd> 272 <mspace width="20px" height="10px" style="background: red;"></mspace> 273 </mtd> 274 <mtd> 275 <mspace width="20px" height="10px" style="background: purple;"></mspace> 276 </mtd> 277 <mtd> 278 <mspace width="20px" height="10px" style="background: yellow;"></mspace> 279 </mtd> 280 281 </mtr> 282 </mtable> 283 </math> 284 </p> 285 </body> 286 </html>