integration-point-4.html (2623B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>MathML inside foreignObject</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> 7 <meta name="assert" content="Verify that MathML can be used inside a foreignObject element."> 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 scale = 2; 15 var epsilon = 1; 16 var mfrac = document.getElementById("mfrac"); 17 var num = mfrac.firstElementChild.getBoundingClientRect(); 18 var denom = mfrac.lastElementChild.getBoundingClientRect(); 19 test(function() { 20 assert_true(MathMLFeatureDetection.has_mspace()); 21 // The values of width and height are inverted (because of the 22 // rotation) and multiplied by the scale factor. 23 assert_approx_equals(num.height, 30 * scale, epsilon, "numerator width"); 24 assert_approx_equals(num.width, 40 * scale, epsilon, "numerator height"); 25 assert_approx_equals(denom.height, 50 * scale, epsilon, "numerator width"); 26 assert_approx_equals(denom.width, 60 * scale, epsilon, "numerator height"); 27 }, "mspace layout in SVG foreignObject"); 28 test(function() { 29 // The horizontal/vertical metrics are inverted (because of the 30 // rotation) and multiplied by the scale factor. 31 assert_true(MathMLFeatureDetection.has_mfrac()); 32 assert_greater_than_equal(num.right - denom.left, 33 (40 + 60) * scale, 34 "numerator is on the right of denominator"); 35 assert_approx_equals((num.top + num.bottom) / 2, 36 (denom.top + denom.bottom) / 2, 37 epsilon, "numerator and denominator are vertically aligned"); 38 }, "mfrac layout in SVG foreignObject"); 39 done(); 40 }); 41 </script> 42 </head> 43 <body> 44 <div id="log"></div> 45 <svg width="400px" height="400px"> 46 <g transform="rotate(90, 200, 200) scale(2)"> 47 <foreignObject width="400px" height="400px" 48 requiredExtensions="http://www.w3.org/1998/Math/MathML"> 49 <math> 50 <mfrac id="mfrac"> 51 <mspace width="30px" height="40px" style="background: cyan"></mspace> 52 <mspace width="50px" height="60px" style="background: yellow"></mspace> 53 </mfrac> 54 </math> 55 </foreignObject> 56 </g> 57 </svg> 58 </body> 59 </html>