Bad position of large operators inside an munderover element
[WebKit-https.git] / LayoutTests / mathml / opentype / large-operators-munderover.html
1 <!doctype html>
2 <html>
3   <head>
4     <title>Large Operator Munderover</title>
5     <meta charset="utf-8"/>
6     <style type="text/css">
7       /* This font is taken from Mozilla's test suite. */
8       @font-face {
9       font-family: stretchy;
10         src: url("stretchy.woff");
11       }
12       math {
13         font-family: stretchy;
14       }
15     </style>
16     <script>
17       var result;
18       var epsilon = 1;
19       function almostEqual(x, y) {
20         return Math.abs(x - y) < epsilon;
21       }
22       function assert(text, condition) {
23         result += text + ": " + (condition ? "PASS" : "FAIL") + "\n";
24       }
25       function test() {
26         result = "";
27         // font em is 1024, size of glyph L8 is 8389 and font-size is 16px
28         var largeop = document.getElementById("largeop").getBoundingClientRect();
29         var green = document.getElementById("green").getBoundingClientRect();
30         var red = document.getElementById("red").getBoundingClientRect();
31         var size = (8389/1024)*16;
32
33         assert("largeop width", almostEqual(largeop.width, size));
34         assert("largeop height", almostEqual(largeop.height, size));
35         assert("green bar is above", green.bottom <= largeop.top);
36         assert("red bar is below", red.top >= largeop.bottom);
37         document.getElementById("result").innerText = result;
38         if (window.testRunner)
39           testRunner.dumpAsText();
40       }
41     </script>
42   </head>
43   <body onload="test()">
44     <p>This test passes if you see a large black square with a green bar overscript and a red bar underscript.</p>
45     <math display="block">
46       <munderover>
47         <mo id="largeop" lspace="0px" rspace="0px" style="font-size: 16px;" >&#x2A1C;</mo>
48         <mspace id="red" width="200px" height="10px" depth="10px" mathbackground="red"/>
49         <mspace id="green" width="250px" height="10px" depth="10px" mathbackground="green"/>
50       </munderover>
51     </math>
52     <div id="result"></div>
53   </body>
54 </html>