content-editable.html (2128B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>MathML inside content-editable</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 content-editable div 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, "denominator width"); 23 assert_approx_equals(denom.height, 60, epsilon, "denominator height"); 24 }, "mspace layout in content-editable div"); 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 content-editable div"); 34 done(); 35 }); 36 </script> 37 </head> 38 <body> 39 <div id="log"></div> 40 <div contenteditable="true"> 41 This is 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 a content editable div 49 </div> 50 </body> 51 </html>