frac-linethickness-002.html (5372B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>fractions linethickness</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> 8 <meta name="assert" content="Verifies fraction with positive, negative, percent and named space linethickness values."> 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 src="/mathml/support/fonts.js"></script> 13 <style type="text/css"> 14 @font-face { 15 font-family: TestFont; 16 src: url("/fonts/math/fraction-rulethickness10000.woff"); 17 } 18 math { 19 /* FractionRuleThickness = 10000 * 10 / 1000 = 100px; */ 20 font-family: "TestFont"; 21 font-size: 10px; 22 } 23 </style> 24 <script> 25 function LineThickness(aId) { 26 var mfrac = document.getElementById(aId); 27 var numBox = mfrac.firstElementChild.getBoundingClientRect(); 28 var denumBox = mfrac.lastElementChild.getBoundingClientRect(); 29 return denumBox.top - numBox.bottom; 30 } 31 32 setup({ explicit_done: true }); 33 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 34 35 function runTests() { 36 var defaultRuleThickness = 100; 37 var epsilon = 2; 38 39 test(function() { 40 assert_true(MathMLFeatureDetection.has_mspace()); 41 assert_approx_equals(LineThickness("positive"), 5.67 * 10, epsilon); 42 }, "Positive"); 43 44 test(function() { 45 assert_true(MathMLFeatureDetection.has_mspace()); 46 /* Negative values are treated as 0 */ 47 assert_approx_equals(LineThickness("negative"), 0, epsilon); 48 }, "Negative"); 49 50 test(function() { 51 assert_true(MathMLFeatureDetection.has_mspace()); 52 assert_approx_equals(LineThickness("percent"), defaultRuleThickness * 234 / 100, epsilon); 53 }, "Percentage"); 54 55 test(function() { 56 assert_true(MathMLFeatureDetection.has_mspace()); 57 /* Namedspace values are invalid in MathML Core. */ 58 assert_approx_equals(LineThickness("namedspace"), defaultRuleThickness, epsilon); 59 }, "Named space"); 60 61 test(function() { 62 assert_true(MathMLFeatureDetection.has_mspace()); 63 /* Calc() expressions are invalid in MathML Core. */ 64 assert_approx_equals(LineThickness("calc"), defaultRuleThickness, epsilon); 65 }, "Calc() expression"); 66 67 test(function() { 68 assert_true(MathMLFeatureDetection.has_mspace()); 69 document.getElementById("dynamic-attach").setAttribute("linethickness", "400%"); 70 document.getElementById("dynamic-modify").setAttribute("linethickness", "200%"); 71 document.getElementById("dynamic-remove").removeAttribute("linethickness"); 72 assert_approx_equals(LineThickness("dynamic-attach"), defaultRuleThickness * 4, epsilon, "attach"); 73 assert_approx_equals(LineThickness("dynamic-modify"), defaultRuleThickness * 2, epsilon, "modify"); 74 assert_approx_equals(LineThickness("dynamic-remove"), defaultRuleThickness, epsilon, "remove"); 75 }, "Dynamic linethickness"); 76 77 done(); 78 } 79 </script> 80 </head> 81 <body> 82 <math> 83 <mfrac id="positive" linethickness="5.67em"> 84 <mspace width="20px" height="10px" style="background: blue"></mspace> 85 <mspace width="20px" height="10px" style="background: cyan"></mspace> 86 </mfrac> 87 </math> 88 <math> 89 <mfrac id="negative" linethickness="-1.23em"> 90 <mspace width="20px" height="10px" style="background: blue"></mspace> 91 <mspace width="20px" height="10px" style="background: cyan"></mspace> 92 </mfrac> 93 </math> 94 <math> 95 <mfrac id="percent" linethickness="234%"> 96 <mspace width="20px" height="10px" style="background: blue"></mspace> 97 <mspace width="20px" height="10px" style="background: cyan"></mspace> 98 </mfrac> 99 </math> 100 <math> 101 <mfrac id="namedspace" linethickness="veryverythickmathspace"> 102 <mspace width="20px" height="10px" style="background: blue"></mspace> 103 <mspace width="20px" height="10px" style="background: cyan"></mspace> 104 </mfrac> 105 </math> 106 <math> 107 <mfrac id="calc" linethickness="calc(20px)"> 108 <mspace width="20px" height="10px" style="background: blue"></mspace> 109 <mspace width="20px" height="10px" style="background: cyan"></mspace> 110 </mfrac> 111 </math> 112 <math> 113 <mfrac id="dynamic-attach"> 114 <mspace width="20px" height="10px" style="background: blue"></mspace> 115 <mspace width="20px" height="10px" style="background: cyan"></mspace> 116 </mfrac> 117 </math> 118 <math> 119 <mfrac id="dynamic-modify" linethickness="300%"> 120 <mspace width="20px" height="10px" style="background: blue"></mspace> 121 <mspace width="20px" height="10px" style="background: cyan"></mspace> 122 </mfrac> 123 </math> 124 <math> 125 <mfrac id="dynamic-remove" linethickness="300%"> 126 <mspace width="20px" height="10px" style="background: blue"></mspace> 127 <mspace width="20px" height="10px" style="background: cyan"></mspace> 128 </mfrac> 129 </math> 130 </body> 131 </html>