Bug 201603 - Synchronize MathML WPT tests against upstream
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / mathml / presentation-markup / fractions / frac-parameters-gap-005.html
1 <!DOCTYPE html>
2 <html class="reftest-wait">
3 <head>
4 <meta charset="utf-8">
5 <title>Stack parameters (display gap between numerator and denominator)</title>
6 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
7 <link rel="match" href="frac-parameters-gap-005-ref.html"/>
8 <meta name="assert" content="Element mfrac with zero linethickness correctly uses the StackDisplayStyleGapMin parameter from the MATH table when denominator contains text.">
9 <style>
10   math, mspace, mtext {
11     font-size: 20px;
12   }
13   mtext {
14     font-family: math-text;
15     color: blue;
16   }
17   @font-face {
18     font-family: displaystylegapmin4000;
19     src: url("/fonts/math/stack-displaystylegapmin4000.woff");
20   }
21   @font-face {
22     /*
23       math-text has the following properties:
24       - typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
25       - glyph A: .5em ascent and .5em descent.
26       - glyph B: 1em ascent and 0em descent.
27       - glyph C: 0em ascent and 1em descent.
28      */
29     font-family: math-text;
30     src: url("/fonts/math/math-text.woff");
31   }
32   #reference {
33     background: green;
34   }
35   #frame {
36     position: absolute;
37     border-top: 4px solid black;
38     border-bottom: 4px solid black;
39     width: 100%;
40   }
41 </style>
42 <script>
43   function runTests() {
44     var div = document.getElementById("frame");
45     var refBox = document.getElementById("reference").getBoundingClientRect();
46     div.style.top = `${refBox.top-2}px`;
47     div.style.height = `${refBox.height-4}px`;
48     document.documentElement.classList.remove('reftest-wait');
49   }
50   window.addEventListener("load", () => { document.fonts.ready.then(runTests); });
51 </script>
52 </head>
53 <body>
54   <p>
55     This test passes if the blue squares are aligned:
56   </p>
57   <p>
58     <math display="block" style="font-family: displaystylegapmin4000">
59       <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
60       <mspace height="10em" depth="10em"/>
61       <!--
62            The gap between the numerators/denominators and the math axis must StackDisplayStyleGapMin / 2.
63            The gap should be calculated using the exact bounding box of the glyphs.
64            The numerator descent is .5em + the denominator ascent.
65            Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
66         -->
67       <mfrac linethickness="0px">
68         <mspace width="3em" depth="1em"/>
69         <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
70       </mfrac>
71       <mfrac linethickness="0px">
72         <mspace width="3em" depth="1em"/>
73         <mtext>A</mtext>
74       </mfrac>
75       <mfrac linethickness="0px">
76         <mspace width="3em" depth="1.5em"/>
77         <mtext>B</mtext>
78       </mfrac>
79       <mfrac linethickness="0px">
80         <mspace width="3em" depth=".5em"/>
81         <mtext>C</mtext>
82       </mfrac>
83     </math>
84   </p>
85   <div id="frame"></div>
86   <script src="/mathml/support/feature-detection.js"></script>
87   <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
88 </body>
89 </html>