table-003.html (5601B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Basic table alignment</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> 7 <meta name="assert" content="Verify alignment of cells with block elements 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 var epsilon = 1; 16 test(function() { 17 assert_true(MathMLFeatureDetection.has_mspace()); 18 const ascents = [40, 0, 20, 30, 10, 80, 0, 40, 70, 30]; 19 const row = document.getElementById("vertical").firstElementChild; 20 const cells = Array.from(row.getElementsByTagName("mtd")); 21 for (var i = 0; i < cells.length - 1; i++) { 22 var space1 = cells[i].firstElementChild.firstElementChild.getBoundingClientRect(); 23 var space2 = cells[i + 1].firstElementChild.firstElementChild.getBoundingClientRect(); 24 assert_approx_equals(space1.top + ascents[i], 25 space2.top + ascents[i + 1], 26 epsilon, 27 `Baselines of cells ${i} and ${i + 1} should be aligned.`); 28 } 29 }, `Vertical alignment of cells`); 30 31 test(function() { 32 assert_true(MathMLFeatureDetection.has_mspace()); 33 const table = document.getElementById("horizontal"); 34 const rows = Array.from(table.getElementsByTagName("mtr")); 35 for (var j = 0; j < rows.length - 1; j++) { 36 var space1 = rows[j].firstElementChild.firstElementChild.firstElementChild.getBoundingClientRect(); 37 var space2 = rows[j + 1].firstElementChild.firstElementChild.firstElementChild.getBoundingClientRect(); 38 assert_approx_equals((space1.left + space1.right) / 2, 39 (space2.left + space2.right) / 2, 40 epsilon, 41 `Baselines of cells ${j} and ${j + 1} should be aligned.`); 42 } 43 }, `Horizontal alignment of cells`); 44 45 done(); 46 } 47 </script> 48 </head> 49 <body> 50 <div id="log"></div> 51 <p> 52 <math> 53 <mtable id="vertical"> 54 <mtr> 55 <mtd> 56 <mrow><mspace width="10px" height="40px" depth="0px" style="background: lightblue;"></mspace></mrow> 57 </mtd> 58 <mtd> 59 <mrow><mspace width="10px" height="0px" depth="40px" style="background: lightgreen;"></mspace></mrow> 60 </mtd> 61 <mtd> 62 <mrow><mspace width="10px" height="20px" depth="20px" style="background: cyan;"></mspace></mrow> 63 </mtd> 64 <mtd> 65 <mrow><mspace width="10px" height="30px" depth="10px" style="background: purple;"></mspace></mrow> 66 </mtd> 67 <mtd> 68 <mrow><mspace width="10px" height="10px" depth="30px" style="background: orange;"></mspace></mrow> 69 </mtd> 70 <mtd> 71 <mrow><mspace width="10px" height="80px" depth="0px" style="background: blue;"></mspace></mrow> 72 </mtd> 73 <mtd> 74 <mrow><mspace width="10px" height="0px" depth="80px" style="background: green;"></mspace></mrow> 75 </mtd> 76 <mtd> 77 <mrow><mspace width="10px" height="40px" depth="40px" style="background: yellow;"></mspace></mrow> 78 </mtd> 79 <mtd> 80 <mrow><mspace width="10px" height="70px" depth="30px" style="background: red;"></mspace></mrow> 81 </mtd> 82 <mtd> 83 <mrow><mspace width="10px" height="30px" depth="70px" style="background: black;"></mspace></mrow> 84 </mtd> 85 </mtr> 86 </mtable> 87 </math> 88 </p> 89 <p> 90 <math> 91 <mtable id="horizontal"> 92 <mtr> 93 <mtd> 94 <mrow><mspace width="10px" height="10px" style="background: lightblue;"></mspace></mrow> 95 </mtd> 96 </mtr> 97 <mtr> 98 <mtd> 99 <mrow><mspace width="40px" height="10px" style="background: lightgreen;"></mspace></mrow> 100 </mtd> 101 </mtr> 102 <mtr> 103 <mtd> 104 <mrow><mspace width="30px" height="10px" style="background: cyan;"></mspace></mrow> 105 </mtd> 106 </mtr> 107 <mtr> 108 <mtd> 109 <mrow><mspace width="20px" height="10px" style="background: purple;"></mspace></mrow> 110 </mtd> 111 </mtr> 112 <mtr> 113 <mtd> 114 <mrow><mspace width="50px" height="10px" style="background: orange;"></mspace></mrow> 115 </mtd> 116 </mtr> 117 <mtr> 118 <mtd> 119 <mrow><mspace width="100px" height="10px" style="background: blue;"></mspace></mrow> 120 </mtd> 121 </mtr> 122 <mtr> 123 <mtd> 124 <mrow><mspace width="90px" height="10px" style="background: green;"></mspace></mrow> 125 </mtd> 126 </mtr> 127 <mtr> 128 <mtd> 129 <mrow><mspace width="70px" height="10px" style="background: yellow;"></mspace></mrow> 130 </mtd> 131 </mtr> 132 <mtr> 133 <mtd> 134 <mrow><mspace width="80px" height="10px" style="background: red;"></mspace></mrow> 135 </mtd> 136 </mtr> 137 <mtr> 138 <mtd> 139 <mrow><mspace width="40px" height="10px" style="background: black;"></mspace></mrow> 140 </mtd> 141 </mtr> 142 </mtable> 143 </math> 144 </p> 145 </body> 146 </html>