root-parameters-2.html (2674B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Radical parameters</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> 7 <meta name="assert" content="Test edge kerning values for radicals."> 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 src="/mathml/support/fonts.js"></script> 12 <style> 13 @font-face { 14 font-family: radical-negativekernbeforedegree1000-rulethickness1000; 15 src: url("/fonts/math/radical-negativekernbeforedegree1000-rulethickness1000.woff"); 16 } 17 @font-face { 18 font-family: radical-kernafterdegreeminus5000-rulethickness1000; 19 src: url("/fonts/math/radical-kernafterdegreeminus5000-rulethickness1000.woff"); 20 } 21 math, mspace { 22 font-size: 10px; 23 } 24 mspace { 25 opacity: .5; 26 } 27 </style> 28 <script> 29 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 30 var epsilon = 1; 31 32 function getBox(aId) { 33 return document.getElementById(aId).getBoundingClientRect(); 34 } 35 36 function runTests() { 37 test(function() { 38 assert_true(MathMLFeatureDetection.has_mspace()); 39 assert_approx_equals(getBox("index001").left - getBox("mroot001").left, 40 0, epsilon, "should be clamped to 0"); 41 }, "RadicalKernBeforeDegree = -1em < 0"); 42 43 test(function() { 44 assert_true(MathMLFeatureDetection.has_mspace()); 45 var radicalSymbolWidth = 1000 * emToPx; 46 var radicalLeft = getBox("base002").left - radicalSymbolWidth; 47 assert_approx_equals(getBox("index002").right - radicalLeft, 48 30, epsilon, "should be clamped to 3em"); 49 }, "RadicalKernBeforeAfterDegree = -5em < -3em = -degree's inline size"); 50 51 done(); 52 } 53 54 setup({ explicit_done: true }); 55 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 56 57 </script> 58 </head> 59 <body> 60 <div id="log"></div> 61 <p> 62 <math style="font-family: radical-negativekernbeforedegree1000-rulethickness1000"> 63 <mroot id="mroot001"> 64 <mspace id="base001" height="6em" width="6em" style="background: blue"/> 65 <mspace id="index001" height="6em" width="6em" style="background: green"/> 66 </mroot> 67 </math> 68 </p> 69 <hr/> 70 <p> 71 <math style="font-family: radical-kernafterdegreeminus5000-rulethickness1000"> 72 <mroot id="mroot002"> 73 <mspace id="base002" height="3em" width="3em" style="background: blue"/> 74 <mspace id="index002" height="3em" width="3em" style="background: green"/> 75 </mroot> 76 </math> 77 </p> 78 </body> 79 </html>