multi-column-layout.html (2215B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>MathML inside multi-column</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> 7 <meta name="assert" content="Verify that putting MathML inside a multi-column list shouldn't affect its layout."> 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("DOMContentLoaded", function() { 14 var epsilon = 1; 15 var mfrac = document.getElementById("mfrac"); 16 var num = mfrac.firstElementChild.getBoundingClientRect(); 17 var denom = mfrac.lastElementChild.getBoundingClientRect(); 18 test(function() { 19 assert_true(MathMLFeatureDetection.has_mspace()); 20 assert_approx_equals(num.width, 30, epsilon, "numerator width"); 21 assert_approx_equals(num.height, 40, epsilon, "numerator height"); 22 assert_approx_equals(denom.width, 50, epsilon, "numerator width"); 23 assert_approx_equals(denom.height, 60, epsilon, "numerator height"); 24 }, "mspace layout in multicol"); 25 test(function() { 26 assert_true(MathMLFeatureDetection.has_mfrac()); 27 assert_greater_than_equal(denom.bottom - num.top, 28 (40 + 60), 29 "numerator is above the denominator"); 30 assert_approx_equals((num.left + num.right) / 2, 31 (denom.left + denom.right) / 2, 32 epsilon, "numerator and denominator are horizontally aligned"); 33 }, "mfrac layout in multicol"); 34 done(); 35 }); 36 </script> 37 </head> 38 <body> 39 <div id="log"></div> 40 <div style="column-width: 10em; list-style-type: decimal;"> 41 <ol> 42 <li>blah</li> 43 <li> 44 <math> 45 <mfrac id="mfrac"> 46 <mspace width="30px" height="40px" style="background: cyan"></mspace> 47 <mspace width="50px" height="60px" style="background: yellow"></mspace> 48 </mfrac> 49 </li> 50 <li>blah</li> 51 <li>blah</li> 52 <li>blah</li> 53 </ol> 54 </div> 55 </body> 56 </html>