<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>
