spacing.html (3199B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Spacing in mrows</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#error-message-merror"> 10 <link rel="help" href="https://w3c.github.io/mathml-core/#making-sub-expressions-invisible-mphantom"> 11 <link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> 12 <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.menclose"> 13 <link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> 14 <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> 15 <meta name="assert" content="Spacing is added around operators inside mrow-like elements."> 16 <script src="/mathml/support/feature-detection.js"></script> 17 <script src="/mathml/support/fonts.js"></script> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script type="text/javascript"> 21 setup({ explicit_done: true }); 22 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 23 function runTests() 24 { 25 ["Mrow", "Sqrt", "Style", "Error", "Phantom", "Math", "Menclose", "Mpadded", "Unknown", "Fenced", "A", "Mtd"].forEach((tag) => { 26 test(function() { 27 assert_true(MathMLFeatureDetection.has_operator_spacing()); 28 var mrow = document.getElementById(tag); 29 var mn1 = mrow.firstElementChild.getBoundingClientRect(); 30 var mn2 = mrow.lastElementChild.getBoundingClientRect(); 31 assert_greater_than_equal(mn2.left - mn1.right, 50); 32 }, `operator spacing inside ${tag}`); 33 }); 34 done(); 35 } 36 </script> 37 </head> 38 <body> 39 <div id="log"></div> 40 <p> 41 <math><mrow id="Mrow"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mrow></math> 42 <math><msqrt id="Sqrt"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></msqrt></math> 43 <math><mstyle id="Style"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mstyle></math> 44 <math><merror id="Error"><mn>1</mn><mo lspace="50px"></mo><mn>2</mn></merror></math> 45 <math><mphantom id="Phantom"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mphantom></math> 46 <math id="Math"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></math> 47 <!-- menclose is treated as <unknown> in MathML Core --> 48 <math><menclose id="Menclose" notation="box"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></menclose></math> 49 <math><mpadded id="Mpadded" lspace="10px"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mpadded></math> 50 <math><unknown id="Unknown"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></unknown></math> 51 <math><mfenced id="Fenced"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mfenced></math> 52 <math><a id="A"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></a></math> 53 <math><mtable><mtr><mtd id="Mtd"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mtd></mtr></mtable></math> 54 </p> 55 </body> 56 </html>