table-cell-mrow-layout.html (2583B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Table cell mrow layout</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> 7 <meta name="assert" content="Table cell relies on the mrow layout for their children."> 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 src="/mathml/support/layout-comparison.js"></script> 12 <style> 13 /* Remove default padding, since there is none on reference mrow element. */ 14 mtd { padding: 0; } 15 </style> 16 </head> 17 <body> 18 <div id="log"></div> 19 <p> 20 <math> 21 <mtable id="mtable"> 22 <mtr> 23 <mtd id="mtd"> 24 <mspace width="10px" depth="20px" height="20px" style="background: blue"/> 25 <mspace width="10px" depth="10px" height="30px" style="background: lightblue"/> 26 <mspace width="10px" depth="30px" height="10px" style="background: black"/> 27 </mtd> 28 </mtr> 29 </mtable> 30 </math> 31 </p> 32 <p> 33 <math> 34 <mrow id="mtd-reference"> 35 <mspace width="10px" depth="20px" height="20px" style="background: blue"/> 36 <mspace width="10px" depth="10px" height="30px" style="background: lightblue"/> 37 <mspace width="10px" depth="30px" height="10px" style="background: black"/> 38 </mrow> 39 </math> 40 </p> 41 <p> 42 <math> 43 <mtable id="mtable-reference"> 44 <mtr> 45 <mtd> 46 <mrow> 47 <mspace width="10px" depth="20px" height="20px" style="background: blue"/> 48 <mspace width="10px" depth="10px" height="30px" style="background: lightblue"/> 49 <mspace width="10px" depth="30px" height="10px" style="background: black"/> 50 </mrow> 51 </mtd> 52 </mtr> 53 </mtable> 54 </math> 55 </p> 56 <script> 57 const epsilon = 1; 58 59 test(function() { 60 assert_true(MathMLFeatureDetection.has_mspace()); 61 let mtd = document.getElementById("mtd"); 62 let reference = document.getElementById("mtd-reference"); 63 compareLayout(mtd, reference, epsilon); 64 }, "<mtd> relies on mrow algorithm to layout its children"); 65 66 test(function() { 67 assert_true(MathMLFeatureDetection.has_mspace()); 68 let mtable = document.getElementById("mtable"); 69 let reference = document.getElementById("mtable-reference"); 70 compareLayout(mtable, reference, epsilon); 71 }, "<mtable> layout does not change if children of <mtd> elements are wrapped in an explicit <mrow>"); 72 </script> 73 </body> 74 </html>