dynamic-table-001.html (12759B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Dynamic tabular elements</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <script src="/mathml/support/mathml-fragments.js"></script> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> 10 <meta name="assert" content="Dynamically modify DOM tree of mtables"> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/mathml/support/feature-detection.js"></script> 14 <script src="/mathml/support/layout-comparison.js"></script> 15 <script> 16 function forceCells(mtable, rows, cols) { 17 while (mtable.children.length > rows) 18 mtable.removeChild(mtable.lastElementChild); 19 while (mtable.children.length < rows) 20 mtable.appendChild(FragmentHelper.createElement("mtr")); 21 for (let i = 0; i < rows; i++) { 22 let mtr = mtable.children[i]; 23 while (mtr.children.length > cols) 24 mtr.removeChild(mtr.lastElementChild); 25 while (mtr.children.length < cols) 26 mtr.appendChild(FragmentHelper.createElement("mtd")); 27 28 for (let j = 0; j < cols; j++) { 29 let mtd = mtr.children[j]; 30 while (mtd.children.length > 0) 31 mtd.removeChild(mtd.lastElementChild); 32 let mspace = FragmentHelper.createElement("mspace"); 33 mspace.setAttribute("height", `${10*(i+1)}px`); 34 mspace.setAttribute("width", `${10*(j+1)}px`); 35 mspace.setAttribute("style", `background: black;`); 36 mtd.appendChild(mspace); 37 } 38 } 39 } 40 41 setup({ explicit_done: true }); 42 window.addEventListener("load", function() { 43 // force initial layout so we're sure what we're testing against 44 document.documentElement.getBoundingClientRect(); 45 46 let reference = document.getElementById("reference"); 47 48 Array.from(document.querySelectorAll("[data-title]")).forEach(mtable => { 49 test(function() { 50 assert_true(MathMLFeatureDetection.has_mspace()); 51 forceCells(mtable, 4, 3); 52 const epsilon = 1; 53 compareLayout(mtable, reference, epsilon); 54 }, `${mtable.getAttribute("data-title")}`); 55 }); 56 done(); 57 }); 58 </script> 59 </head> 60 <body> 61 <div id="log"></div> 62 <p> 63 <math> 64 <mtable id="reference"> 65 <mtr> 66 <mtd><mspace height="10px" width="10px" style="background: blue;"/></mtd> 67 <mtd><mspace height="10px" width="20px" style="background: blue;"/></mtd> 68 <mtd><mspace height="10px" width="30px" style="background: blue;"/></mtd> 69 </mtr> 70 <mtr> 71 <mtd><mspace height="20px" width="10px" style="background: blue;"/></mtd> 72 <mtd><mspace height="20px" width="20px" style="background: blue;"/></mtd> 73 <mtd><mspace height="20px" width="30px" style="background: blue;"/></mtd> 74 </mtr> 75 <mtr> 76 <mtd><mspace height="30px" width="10px" style="background: blue;"/></mtd> 77 <mtd><mspace height="30px" width="20px" style="background: blue;"/></mtd> 78 <mtd><mspace height="30px" width="30px" style="background: blue;"/></mtd> 79 </mtr> 80 <mtr> 81 <mtd><mspace height="40px" width="10px" style="background: blue;"/></mtd> 82 <mtd><mspace height="40px" width="20px" style="background: blue;"/></mtd> 83 <mtd><mspace height="40px" width="30px" style="background: blue;"/></mtd> 84 </mtr> 85 </mtable> 86 </math> 87 </p> 88 <p> 89 <math> 90 <mtable data-title="Filling an empty mtable element"></mtable> 91 </math> 92 </p> 93 <p> 94 <math> 95 <mtable data-title="Filling empty mtr elements"> 96 <mtr></mtr> 97 <mtr></mtr> 98 <mtr></mtr> 99 <mtr></mtr> 100 </mtable> 101 </math> 102 </p> 103 <p> 104 <math> 105 <mtable data-title="Filling empty mtd elements"> 106 <mtr> 107 <mtd></mtd> 108 <mtd></mtd> 109 <mtd></mtd> 110 </mtr> 111 <mtr> 112 <mtd></mtd> 113 <mtd></mtd> 114 <mtd></mtd> 115 </mtr> 116 <mtr> 117 <mtd></mtd> 118 <mtd></mtd> 119 <mtd></mtd> 120 </mtr> 121 <mtr> 122 <mtd></mtd> 123 <mtd></mtd> 124 <mtd></mtd> 125 </mtr> 126 </mtable> 127 </math> 128 </p> 129 <p> 130 <math> 131 <mtable data-title="Filling an empty mtr element"> 132 <mtr> 133 <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> 134 <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> 135 <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> 136 </mtr> 137 <mtr> 138 <!-- Empty mtr --> 139 </mtr> 140 <mtr> 141 <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> 142 <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> 143 <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> 144 </mtr> 145 <mtr> 146 <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> 147 <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> 148 <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> 149 </mtr> 150 </mtable> 151 </math> 152 </p> 153 <p> 154 <math> 155 <mtable data-title="Filling an empty mtd element"> 156 <mtr> 157 <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> 158 <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> 159 <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> 160 </mtr> 161 <mtr> 162 <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> 163 <mtd><!-- Empty --></mtd> 164 <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> 165 </mtr> 166 <mtr> 167 <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> 168 <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> 169 <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> 170 </mtr> 171 <mtr> 172 <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> 173 <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> 174 <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> 175 </mtr> 176 </mtable> 177 </math> 178 </p> 179 <p> 180 <math> 181 <mtable data-title="Adding missing elements"> 182 <mtr> 183 <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> 184 <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> 185 <!-- Cell missing --> 186 </mtr> 187 <mtr> 188 <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> 189 <mtd><!-- Empty --></mtd> 190 <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> 191 </mtr> 192 <mtr> 193 <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> 194 <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> 195 <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> 196 </mtr> 197 <!-- Row missing --> 198 </mtable> 199 </math> 200 </p> 201 <p> 202 <math> 203 <mtable data-title="Removing a row"> 204 <mtr> 205 <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> 206 <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> 207 <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> 208 </mtr> 209 <mtr> 210 <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> 211 <mtd><mspace height="20px" width="20px" style="background: black;"/></mtd> 212 <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> 213 </mtr> 214 <mtr> 215 <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> 216 <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> 217 <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> 218 </mtr> 219 <mtr> 220 <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> 221 <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> 222 <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> 223 </mtr> 224 <mtr> 225 <mtd><mspace height="50px" width="10px" style="background: red;"/></mtd> 226 <mtd><mspace height="50px" width="20px" style="background: red;"/></mtd> 227 <mtd><mspace height="50px" width="30px" style="background: red;"/></mtd> 228 </mtr> 229 </mtable> 230 </math> 231 </p> 232 <p> 233 <math> 234 <mtable data-title="Removing a column"> 235 <mtr> 236 <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> 237 <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> 238 <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> 239 <mtd><mspace height="10px" width="40px" style="background: red;"/></mtd> 240 </mtr> 241 <mtr> 242 <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> 243 <mtd><mspace height="20px" width="20px" style="background: black;"/></mtd> 244 <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> 245 <mtd><mspace height="20px" width="40px" style="background: red;"/></mtd> 246 </mtr> 247 <mtr> 248 <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> 249 <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> 250 <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> 251 <mtd><mspace height="30px" width="40px" style="background: red;"/></mtd> 252 </mtr> 253 <mtr> 254 <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> 255 <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> 256 <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> 257 <mtd><mspace height="40px" width="40px" style="background: red;"/></mtd> 258 </mtr> 259 </mtable> 260 </math> 261 </p> 262 <p> 263 <math> 264 <mtable data-title="Removing extra elements"> 265 <mtr> 266 <mtd><mspace height="10px" width="10px" style="background: black;"/></mtd> 267 <mtd><mspace height="10px" width="20px" style="background: black;"/></mtd> 268 <mtd><mspace height="10px" width="30px" style="background: black;"/></mtd> 269 <mtd><mspace height="10px" width="40px" style="background: black;"/></mtd> 270 <mtd><mspace height="10px" width="50px" style="background: red;"/></mtd><!-- extra mtd --> 271 </mtr> 272 <mtr> 273 <mtd><mspace height="20px" width="10px" style="background: black;"/></mtd> 274 <mtd><mspace height="20px" width="20px" style="background: black;"/></mtd> 275 <mtd><mspace height="20px" width="30px" style="background: black;"/></mtd> 276 <mtd><mspace height="20px" width="40px" style="background: black;"/><mspace height="20px" width="40px" style="background: red;"/><!-- extra child--></mtd> 277 </mtr> 278 <mtr> 279 <mtd><mspace height="30px" width="10px" style="background: black;"/></mtd> 280 <mtd><mspace height="30px" width="20px" style="background: black;"/></mtd> 281 <mtd><mspace height="30px" width="30px" style="background: black;"/></mtd> 282 <mtd><mspace height="30px" width="40px" style="background: black;"/></mtd> 283 </mtr> 284 <mtr> 285 <mtd><mspace height="40px" width="10px" style="background: black;"/></mtd> 286 <mtd><mspace height="40px" width="20px" style="background: black;"/></mtd> 287 <mtd><mspace height="40px" width="30px" style="background: black;"/></mtd> 288 <mtd><mspace height="40px" width="40px" style="background: black;"/></mtd> 289 </mtr> 290 <mtr> 291 <mtd><mspace height="50px" width="10px" style="background: red;"/></mtd> 292 <mtd><mspace height="50px" width="20px" style="background: red;"/></mtd> 293 <mtd><mspace height="50px" width="30px" style="background: red;"/></mtd> 294 <mtd><mspace height="50px" width="40px" style="background: red;"/></mtd> 295 </mtr> <!-- extra row --> 296 </mtable> 297 </math> 298 </p> 299 300 </body> 301 </html>