<!doctype html>
<html>
  <head>
    <title>MathML script elements: removing children</title>

    <!-- This test verifies removal of children from an <mroot>/<msqrt> element using DOM operations. It should not crash and should render the same as the equivalent static page. -->

    <style type="text/css">
      div { border: 1px solid; margin: .5em; }
    </style>
    <script type="text/javascript">
      var mathmlNS = "http://www.w3.org/1998/Math/MathML";

      function newMn(n)
      {
        var t = document.createTextNode(n.toString());
        var mn = document.createElementNS(mathmlNS, "mn");
        mn.appendChild(t);
        return mn;
      }

      function test1()
      {
        var msqrt = document.getElementById("test1").getElementsByTagNameNS(mathmlNS, "msqrt");
        var mroot = document.getElementById("test1").getElementsByTagNameNS(mathmlNS, "mroot");
        var i;
        for (i = 0; i < msqrt.length; i++)
          msqrt[i].removeChild(msqrt[i].firstChild);
        for (i = 0; i < mroot.length; i++)
          mroot[i].removeChild(mroot[i].firstChild);
      }

      function test2()
      {
        var msqrt = document.getElementById("test2").getElementsByTagNameNS(mathmlNS, "msqrt");
        var mroot = document.getElementById("test2").getElementsByTagNameNS(mathmlNS, "mroot");
        var i;
        for (i = 0; i < msqrt.length; i++)
          msqrt[i].removeChild(msqrt[i].lastChild);
        for (i = 0; i < mroot.length; i++)
          mroot[i].removeChild(mroot[i].lastChild);
      }

      function test3()
      {
        var msqrt = document.getElementById("test3").getElementsByTagNameNS(mathmlNS, "msqrt");
        var mroot = document.getElementById("test3").getElementsByTagNameNS(mathmlNS, "mroot");
        var i;
        for (i = 0; i < msqrt.length; i++)
          msqrt[i].removeChild(msqrt[i].firstChild.nextSibling);
        for (i = 0; i < mroot.length; i++)
          mroot[i].removeChild(mroot[i].firstChild.nextSibling);
      }

      function test4()
      {
        var msqrt = document.getElementById("test4").getElementsByTagNameNS(mathmlNS, "msqrt");
        var mroot = document.getElementById("test4").getElementsByTagNameNS(mathmlNS, "mroot");
        var i;
        for (i = 0; i < msqrt.length; i++)
          msqrt[i].removeChild(msqrt[i].lastChild.previousSibling);
        for (i = 0; i < mroot.length; i++)
          mroot[i].removeChild(mroot[i].lastChild.previousSibling);
      }

      function run()
      {
        test1();
        test2();
        test3();
        test4();
      }
    </script>
  </head>

  <body onload="run()">

    <!-- Test 1: remove an element at the first position in an <mroot>/<msqrt> element with various number of children. -->
    <div id="test1">Test 1:
      <math><msqrt><mi>X</mi></msqrt></math>
      <math><msqrt><mi>X</mi><mn>1</mn></msqrt></math>
      <math><msqrt><mi>X</mi><mn>1</mn><mn>2</mn></msqrt></math>
      <math><msqrt><mi>X</mi><mn>1</mn><mn>2</mn><mn>3</mn></msqrt></math>
      <math><mroot><mi>X</mi></mroot></math>
      <math><mroot><mi>X</mi><mn>1</mn></mroot></math>
      <math><mroot><mi>X</mi><mn>1</mn><mn>2</mn></mroot></math>
      <math><mroot><mi>X</mi><mn>1</mn><mn>2</mn><mn>3</mn></mroot></math>
    </div>

    <!-- Test 2: remove an <mn> element at the last position in an <mroot>/<msqrt> element with various number of children. -->
    <div id="test2">Test 2:
      <math><msqrt><mn>1</mn><mi>X</mi></msqrt></math>
      <math><msqrt><mn>1</mn><mn>2</mn><mi>X</mi></msqrt></math>
      <math><msqrt><mn>1</mn><mn>2</mn><mn>3</mn><mi>X</mi></msqrt></math>
      <math><mroot><mn>1</mn><mi>X</mi></mroot></math>
      <math><mroot><mn>1</mn><mn>2</mn><mi>X</mi></mroot></math>
      <math><mroot><mn>1</mn><mn>2</mn><mn>3</mn><mi>X</mi></mroot></math>
    </div>

    <!-- Test 3: remove an element at the second position in an <mroot>/<msqrt> element with various number of children. -->
    <div id="test3">Test 3:
      <math><msqrt><mn>1</mn><mi>X</mi></msqrt></math>
      <math><msqrt><mn>1</mn><mi>X</mi><mn>2</mn></msqrt></math>
      <math><msqrt><mn>1</mn><mi>X</mi><mn>2</mn><mn>3</mn></msqrt></math>
      <math><msqrt><mn>1</mn><mi>X</mi><mn>2</mn><mn>3</mn><mn>4</mn></msqrt></math>
      <math><mroot><mn>1</mn><mi>X</mi></mroot></math>
      <math><mroot><mn>1</mn><mi>X</mi><mn>2</mn></mroot></math>
      <math><mroot><mn>1</mn><mi>X</mi><mn>2</mn><mn>3</mn></mroot></math>
      <math><mroot><mn>1</mn><mi>X</mi><mn>2</mn><mn>3</mn><mn>4</mn></mroot></math>
    </div>

    <!-- Test 4: remove an element at the penultimate position in an <mroot>/<msqrt> element with various number of children. -->
    <div id="test4">Test 4:
      <math><msqrt><mi>X</mi><mn>1</mn></msqrt></math>
      <math><msqrt><mn>1</mn><mi>X</mi><mn>2</mn></msqrt></math>
      <math><msqrt><mn>1</mn><mn>2</mn><mi>X</mi><mn>3</mn></msqrt></math>
      <math><msqrt><mn>1</mn><mn>2</mn><mn>3</mn><mi>X</mi><mn>4</mn></msqrt></math>
      <math><mroot><mi>X</mi><mn>1</mn></mroot></math>
      <math><mroot><mn>1</mn><mi>X</mi><mn>2</mn></mroot></math>
      <math><mroot><mn>1</mn><mn>2</mn><mi>X</mi><mn>3</mn></mroot></math>
      <math><mroot><mn>1</mn><mn>2</mn><mn>3</mn><mi>X</mi><mn>4</mn></mroot></math>
    </div>

  </body>
</html>