| <html> |
| <head> |
| <title>stretch depth/height</title> |
| <meta charset="utf-8"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script type="text/javascript"> |
| setup({ "explicit_done": true }); |
| var epsilon = 3; |
| |
| function getAxis(id) { |
| var frac = document.getElementById("frac" + id).getBoundingClientRect(); |
| var space = document.getElementById("space" + id).getBoundingClientRect(); |
| return space.bottom - (frac.top + frac.bottom) / 2; |
| } |
| |
| function run() { |
| |
| test(function() { |
| var axis1 = getAxis("1"); |
| var s1 = document.getElementById("s1").getBoundingClientRect(); |
| var c1 = document.getElementById("c1ref").getBoundingClientRect(); |
| assert_approx_equals(s1.top, c1.top, epsilon); |
| assert_approx_equals(s1.height, (c1.height - axis1) * 2, epsilon); |
| }, "large depth"); |
| |
| test(function() { |
| var axis1a = getAxis("1a"); |
| var s1a = document.getElementById("s1a").getBoundingClientRect(); |
| var c1a = document.getElementById("c1refa").getBoundingClientRect(); |
| assert_approx_equals(s1a.top, c1a.top, epsilon); |
| assert_approx_equals(s1a.height, (c1a.height - axis1a) * 2, epsilon); |
| }, "large depth (explicit symmetric attribute)"); |
| |
| test(function() { |
| var axis2 = getAxis("2"); |
| var s2 = document.getElementById("s2").getBoundingClientRect(); |
| var c2 = document.getElementById("c2ref").getBoundingClientRect(); |
| assert_approx_equals(s2.bottom, c2.bottom, epsilon); |
| assert_approx_equals(s2.height, (c2.height + axis2) * 2, epsilon); |
| }, "large height"); |
| |
| test(function() { |
| var axis2a = getAxis("2a"); |
| var s2a = document.getElementById("s2a").getBoundingClientRect(); |
| var c2a = document.getElementById("c2refa").getBoundingClientRect(); |
| assert_approx_equals(s2a.bottom, c2a.bottom, epsilon); |
| assert_approx_equals(s2a.height, (c2a.height + axis2a) * 2, epsilon); |
| }, "large height (explicit symmetric attribute)"); |
| |
| done(); |
| } |
| </script> |
| </head> |
| <body onload="run()"> |
| |
| <p>This test passes if the brace stretches symmetrically and is large enough to cover its sibling.</p> |
| |
| <p> |
| <!-- This tests a large depth. --> |
| <math> |
| <mrow> |
| <mfrac id="frac1"><mspace width="1em"/><mspace width="1em"/></mfrac><mspace id="space1"/> |
| <mo id="s1">{</mo> |
| <mspace id="c12" width="10px" height="10px" depth="30px" mathbackground="blue"/> |
| <mspace id="c12" width="10px" height="0px" depth="50px" mathbackground="blue"/> |
| <mspace id="c13" width="10px" height="20px" depth="20px" mathbackground="blue"/> |
| <mspace id="c1ref" width="10px" height="80px" depth="0px" mathbackground="blue"/> |
| <mspace id="c14" width="10px" height="30px" depth="10px" mathbackground="blue"/> |
| </mrow> |
| </math> |
| <!-- This tests a large depth (explicit symmetric attribute). --> |
| <math> |
| <mrow> |
| <mfrac id="frac1a"><mspace width="1em"/><mspace width="1em"/></mfrac><mspace id="space1a"/> |
| <mo symmetric="true" id="s1a">{</mo> |
| <mspace id="c12a" width="10px" height="10px" depth="30px" mathbackground="blue"/> |
| <mspace id="c12a" width="10px" height="0px" depth="50px" mathbackground="blue"/> |
| <mspace id="c13a" width="10px" height="20px" depth="20px" mathbackground="blue"/> |
| <mspace id="c1refa" width="10px" height="80px" depth="0px" mathbackground="blue"/> |
| <mspace id="c14a" width="10px" height="30px" depth="10px" mathbackground="blue"/> |
| </mrow> |
| </math> |
| <!-- This tests a large height. --> |
| <math> |
| <mrow> |
| <mfrac id="frac2"><mspace width="1em"/><mspace width="1em"/></mfrac><mspace id="space2"/> |
| <mo id="s2">{</mo> |
| <mspace id="c22" width="10px" height="10px" depth="30px" mathbackground="blue"/> |
| <mspace id="c23" width="10px" height="50px" depth="0px" mathbackground="blue"/> |
| <mspace id="c2ref" width="10px" height="0px" depth="80px" mathbackground="blue"/> |
| <mspace id="c24" width="10px" height="20px" depth="20px" mathbackground="blue"/> |
| <mspace id="c25" width="10px" height="30px" depth="10px" mathbackground="blue"/> |
| </mrow> |
| </math> |
| <!-- This tests a large height (explicit symmetric attribute). --> |
| <math> |
| <mrow> |
| <mfrac id="frac2a"><mspace width="1em"/><mspace width="1em"/></mfrac><mspace id="space2a"/> |
| <mo symmetric="true" id="s2a">{</mo> |
| <mspace id="c22a" width="10px" height="10px" depth="30px" mathbackground="blue"/> |
| <mspace id="c23a" width="10px" height="50px" depth="0px" mathbackground="blue"/> |
| <mspace id="c2refa" width="10px" height="0px" depth="80px" mathbackground="blue"/> |
| <mspace id="c24a" width="10px" height="20px" depth="20px" mathbackground="blue"/> |
| <mspace id="c25a" width="10px" height="30px" depth="10px" mathbackground="blue"/> |
| </mrow> |
| </math> |
| </p> |
| |
| </body> |
| </html> |
