frac-bar-002.html (3137B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>fractions bar</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 7 <meta name="assert" content="Verify painting of the fraction bar when margin/padding/border are involved."> 8 <link rel="match" href="frac-bar-002-ref.html"> 9 <style type="text/css"> 10 @font-face { 11 font-family: TestFont; 12 src: url("/fonts/math/fraction-rulethickness10000.woff"); 13 } 14 math { 15 /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ 16 /* The gap / shift / axisheight parameters are set to 0. */ 17 font-family: "TestFont"; 18 font-size: 1px; 19 } 20 #container { 21 position: absolute; 22 left: 0; 23 top: 0; 24 } 25 #red { 26 position: absolute; 27 background: red; 28 margin: 1px; 29 width: 148px; 30 height: 148px; 31 } 32 </style> 33 <script src="/mathml/support/fonts.js"></script> 34 <script src="/common/reftest-wait.js"></script> 35 <script> 36 window.addEventListener("load", () => { loadAllFonts().then(adjustPositionOfFraction); }); 37 38 function adjustPositionOfFraction() 39 { 40 requestAnimationFrame(() => { 41 var container = document.getElementById("container"); 42 var red = document.getElementById("red"); 43 var numeratorBox = document.getElementById("numerator").getBoundingClientRect(); 44 const shift = 50; 45 const numeratorMargin = 20; 46 47 /* Move the red square at the expected position, 48 with a 1px gap to avoid antialiasing issues. */ 49 red.style.left = `${shift}px`; 50 red.style.top = `${shift}px`; 51 52 /* Move the fraction bar at the expected position. */ 53 container.style.left = (shift - numeratorBox.left + numeratorMargin) + "px"; 54 container.style.top = (shift - numeratorBox.bottom - numeratorMargin) + "px"; 55 requestAnimationFrame(takeScreenshot); 56 }); 57 } 58 </script> 59 </head> 60 <body> 61 <p>This test passes if you see a green <strong>square</strong> and no red.</p> 62 <div> 63 <div id="red"></div> 64 <div id="container"> 65 <math> 66 <!-- border, padding and margin should not affect the width of the fraction bar. --> 67 <mfrac style="color: green; font-size: 15em; 68 border: 30px solid transparent; 69 padding: 60px; margin: 120px; 70 "> 71 <!-- the bar width is the one of the numerator margin box i.e. 80 + 2 * (5 + 10 + 20) = 150px --> 72 <mspace id="numerator" width="80px" 73 style="border: 5px solid transparent; 74 padding: 10px; margin: 20px;"></mspace> 75 <mspace></mspace> 76 </mfrac> 77 </math> 78 </div> 79 </div> 80 <script src="/mathml/support/feature-detection.js"></script> 81 <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script> 82 </body> 83 </html>