integration-point-5.html (2525B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>MathML sibling of SVG with foreignObject[overflow=visible]</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> 7 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=989920"> 8 <meta name="assert" content="Verify that an SVG containing a foreignObject with visible overflow does not affect layout of MathML siblings."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/mathml/support/feature-detection.js"></script> 12 <script> 13 setup({ explicit_done: true }); 14 window.addEventListener("DOMContentLoaded", function() { 15 var scale = 2; 16 var epsilon = 1; 17 var mfrac = document.getElementById("mfrac"); 18 var num = mfrac.firstElementChild.getBoundingClientRect(); 19 var denom = mfrac.lastElementChild.getBoundingClientRect(); 20 test(function() { 21 assert_true(MathMLFeatureDetection.has_mspace()); 22 assert_approx_equals(num.width, 30, epsilon, "numerator width"); 23 assert_approx_equals(num.height, 40, epsilon, "numerator height"); 24 assert_approx_equals(denom.width, 50, epsilon, "denonimator width"); 25 assert_approx_equals(denom.height, 60, epsilon, "denonimator height"); 26 }, "mspace layout in sibling of SVG foreignObject[overflow=visible]"); 27 test(function() { 28 assert_true(MathMLFeatureDetection.has_mfrac()); 29 assert_greater_than_equal(denom.bottom - num.top, 30 (40 + 60), 31 "numerator above denominator"); 32 assert_approx_equals((num.left + num.right) / 2, 33 (denom.left + denom.right) / 2, 34 epsilon, "numerator and denominator are horizontally aligned"); 35 }, "mfrac layout in sibling of SVG with foreignObject[overflow=visible]"); 36 done(); 37 }); 38 </script> 39 </head> 40 <body> 41 <div id="log"></div> 42 <math> 43 <mfrac id="mfrac"> 44 <mspace width="30px" height="40px" style="background: cyan"></mspace> 45 <mspace width="50px" height="60px" style="background: yellow"></mspace> 46 </mfrac> 47 </math> 48 <svg width="200px" height="200px" style="background: lightblue"> 49 <foreignObject width="200px" height="200px" 50 overflow="visible"> 51 <div xmlns="http://www.w3.org/1999/xhtml"> 52 This is a foreignObject 53 </div> 54 </foreignObject> 55 </svg> 56 </body> 57 </html>