<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 = 1;

      function run() {
        test(function() {
          var s1 = document.getElementById("s1").getBoundingClientRect();
          var c1 = document.getElementById("c1").getBoundingClientRect();
          assert_approx_equals(s1.top, c1.top, epsilon);
          assert_approx_equals(s1.bottom, c1.bottom, epsilon);
        }, "symmetric stretching");

        test(function() {
          var s2 = document.getElementById("s2").getBoundingClientRect();
          var c2 = document.getElementById("c2").getBoundingClientRect();
          assert_approx_equals(s2.top, c2.top, epsilon);
          assert_approx_equals(s2.bottom, c2.bottom, epsilon);
        }, "large depth");

        test(function() {
          var s3 = document.getElementById("s3").getBoundingClientRect();
          var c3 = document.getElementById("c3").getBoundingClientRect();
          assert_approx_equals(s3.top, c3.top, epsilon);
          assert_approx_equals(s3.bottom, c3.bottom, epsilon);
        }, "large height");

        test(function() {
          var s4 = document.getElementById("s4").getBoundingClientRect();
          var c4 = document.getElementById("c4").getBoundingClientRect();
          assert_approx_equals(s4.top, c4.top, epsilon);
          assert_approx_equals(s4.bottom, c4.bottom, epsilon);
        }, "mtable");

        test(function() {
          var s5 = document.getElementById("s5").getBoundingClientRect();
          var c5maxheight = document.getElementById("c5maxheight").getBoundingClientRect();
          var c5maxdepth = document.getElementById("c5maxdepth").getBoundingClientRect();
          assert_approx_equals(s5.top, c5maxheight.top, epsilon);
          assert_approx_equals(s5.bottom, c5maxdepth.bottom, epsilon);
        }, "several siblings with different heights/depths");

        test(function() {
          var c6maxheight = document.getElementById("c6maxheight").getBoundingClientRect();
          var c6maxdepth = document.getElementById("c6maxdepth").getBoundingClientRect();
          for (var i = 1; i <= 3; i++) {
            var s6 = document.getElementById("s6_" + i).getBoundingClientRect();
            assert_approx_equals(s6.top, c6maxheight.top, epsilon, "top of operator" + i);
            assert_approx_equals(s6.bottom, c6maxdepth.bottom, c6maxheight.top, epsilon, "bottom of operator" + i);
          }
        }, "testing several operators in one mrow");

        test(function() {
          var s71 = document.getElementById("s71").getBoundingClientRect();
          var c71 = document.getElementById("c71").getBoundingClientRect();
          var s72 = document.getElementById("s72").getBoundingClientRect();
          var c72 = document.getElementById("c72").getBoundingClientRect();

            assert_approx_equals(s71.top, c71.top, epsilon);
            assert_approx_equals(s71.bottom, c71.bottom, epsilon);
            assert_approx_equals(s72.top, c72.top, epsilon);
            assert_approx_equals(s72.bottom, c72.bottom, epsilon);
        }, "testing with non-stretchy mo");

        done();
      }
    </script>
  </head>
  <body onload="run()">

    <p>This test passes if the depth and height of braces match the maximum depth and height of its siblings.</p>

    <p>
      <!-- This tests symmetric stretching. -->
      <math>
        <mrow>
          <mo id="s1" symmetric="false">{</mo>
          <mspace id="c1" width="10px" height="150px" depth="150px" mathbackground="blue"/>
        </mrow>
      </math>
      <!-- This tests a large depth. -->
      <math>
        <mrow>
          <mo id="s2" symmetric="false">{</mo>
          <mspace id="c2" width="10px" height="50px" depth="250px" mathbackground="blue"/>
        </mrow>
      </math>
      <!-- This tests a large height. -->
      <math>
        <mrow>
          <mo id="s3" symmetric="false">{</mo>
          <mspace id="c3" width="10px" height="250px" depth="50px" mathbackground="blue"/>
        </mrow>
      </math>
      <!-- This tests an mtable sibling. -->
      <math>
        <mrow>
          <mo id="s4" symmetric="false">{</mo>
          <mtable id="c4">
            <mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
            <mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
            <mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
            <mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
            <mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
          </mtable>
        </mrow>
      </math>
      <!-- This tests several siblings with different heights/depths. -->
      <math>
        <mrow>
          <mo id="s5" symmetric="false">{</mo>
          <mfrac>
            <mfrac>
              <mn>1</mn>
              <mn>2</mn>
            </mfrac>
            <msup>
              <mn>3</mn>
              <mn>4</mn>
            </msup>
          </mfrac>
          <mo>-</mo>
          <msqrt>
            <mfrac>
              <mn>5</mn>
              <mn>6</mn>
            </mfrac>
          </msqrt>
          <mo>*</mo>
          <mfrac id="c5maxheight">
            <mfrac>
              <mfrac>
                <mfrac>
                  <mn>1</mn>
                  <mn>2</mn>
                </mfrac>
                <msup>
                  <mn>3</mn>
                  <mn>4</mn>
                </msup>
              </mfrac>
              <msqrt>
                <mfrac>
                  <mn>5</mn>
                  <mn>6</mn>
                </mfrac>
              </msqrt>
            </mfrac>
            <mfrac>
              <mfrac>
                <msub>
                  <mn>7</mn>
                  <mn>8</mn>
                </msub>
                <munder>
                  <mn>9</mn>
                  <mn>10</mn>
                </munder>
              </mfrac>
              <mn>11</mn>
            </mfrac>
          </mfrac>
          <mo>+</mo>
          <mfrac>
            <msub>
              <mn>7</mn>
              <mn>8</mn>
            </msub>
            <munder>
              <mn>9</mn>
              <mn>10</mn>
            </munder>
          </mfrac>
          <mo>/</mo>
          <mfrac id="c5maxdepth">
            <mfrac>
              <mn>1</mn>
              <mn>2</mn>
            </mfrac>
            <mfrac>
              <mfrac>
                <mfrac>
                  <mn>1</mn>
                  <mn>2</mn>
                </mfrac>
                <msup>
                  <mn>3</mn>
                  <mn>4</mn>
                </msup>
              </mfrac>
              <msqrt>
                <mfrac>
                  <mn>5</mn>
                  <mfrac>
                    <mn>5</mn>
                    <mn>6</mn>
                  </mfrac>
                </mfrac>
              </msqrt>
            </mfrac>
          </mfrac>
        </mrow>
      </math>
      <!-- This tests several operators in the same mrow. -->
      <math>
        <mrow>
          <mo id="s6_1" symmetric="false">{</mo>
          <mspace id="c6maxdepth" width="10px" height="50px" depth="150px" mathbackground="red"/>
          <mo id="s6_2" symmetric="false">|</mo>
          <mspace id="c6maxheight" width="10px" height="150px" depth="50px" mathbackground="red"/>
          <mo id="s6_3" symmetric="false">}</mo>
        </mrow>
      </math>
      <!-- These tests whether the size of non-stretchy operators is taken into account (bug 126842). -->
      <math>
        <mrow>
          <mo id="s71" symmetric="false">{</mo>
          <mo id="c71" mathsize="8em">p</mo>
        </mrow>
        <mrow>
          <mo id="s72" symmetric="false">{</mo>
          <mo id="c72" mathsize="8em" stretchy="false">|</mo>
        </mrow>
      </math>
    </p>

  </body>
</html>
