| <!doctype html> |
| <html> |
| <head> |
| <title>Large Operator Munderover</title> |
| <meta charset="utf-8"/> |
| <style type="text/css"> |
| /* This font is taken from Mozilla's test suite. */ |
| @font-face { |
| font-family: stretchy; |
| src: url("stretchy.woff"); |
| } |
| math { |
| font-family: stretchy; |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| var epsilon = 1; |
| setup({ "explicit_done": true }); |
| function run() { |
| // font em is 1024, size of glyph L8 is 8389 and font-size is 16px |
| var largeop = document.getElementById("largeop").getBoundingClientRect(); |
| var green = document.getElementById("green").getBoundingClientRect(); |
| var red = document.getElementById("red").getBoundingClientRect(); |
| var size = (8389/1024)*16; |
| |
| test(function() { |
| assert_approx_equals(largeop.width, size, epsilon); |
| }, "largeop width"); |
| test(function() { |
| assert_approx_equals(largeop.height, size, epsilon); |
| }, "largeop height"); |
| test(function() { |
| assert_less_than_equal(green.bottom, largeop.top); |
| }, "green bar is above"); |
| test(function() { |
| assert_greater_than_equal(red.top, largeop.bottom); |
| }, "red bar is below"); |
| done(); |
| } |
| </script> |
| </head> |
| <body onload="run()"> |
| <p>This test passes if you see a large black square with a green bar overscript and a red bar underscript.</p> |
| <math display="block"> |
| <munderover> |
| <mo id="largeop" lspace="0px" rspace="0px" style="font-size: 16px;" >⨜</mo> |
| <mspace id="red" width="200px" height="10px" depth="10px" mathbackground="red"/> |
| <mspace id="green" width="250px" height="10px" depth="10px" mathbackground="green"/> |
| </munderover> |
| </math> |
| </body> |
| </html> |
