<!doctype html>
<html>
  <head>
    <title>scripts</title>
    <meta charset="utf-8"/>
    <style>
      td {
      border: 1px solid black;
      text-align: center; width: 100px; height: 100px;
      vertical-align: middle;
      }
      span {
      display: inline-block;
      background: black;
      border: 0;
      margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- The under/over scripts should be hidden by the black rectangles -->
    <table style="position: absolute; top: 10px; left: 10px;">
      <tr>
        <td style="vertical-align: top;">
          <math>
            <munder>
              <mspace width="20px" height="20px" depth="0px" mathbackground="red"/>
              <mspace width="10px" height="5px" depth="5px" mathbackground="green"/>
            </munder>
          </math>
        </td>
        <td>
          <math>
            <munderover>
              <mspace width="20px" height="10px" depth="10px" mathbackground="red"/>
              <mspace width="10px" height="5px" depth="5px" mathbackground="green"/>
              <mspace width="10px" height="5px" depth="5px" mathbackground="blue"/>
            </munderover>
          </math>
        </td>
        <td  style="vertical-align: bottom;">
          <math>
            <mover>
              <mspace width="20px" height="20px" depth="0px" mathbackground="red"/>
              <mspace width="10px" height="5px" depth="5px" mathbackground="green"/>
            </mover>
          </math>
        </td>
      </tr>
    </table>

    <table style="position: absolute; top: 10px; left: 10px;">
      <tr>
        <td style="vertical-align: top;">
          <span style="width: 12px; height: 50px;"></span>
        </td>
        <td>
          <span style="width: 12px; height: 50px;"></span>
        </td>
        <td  style="vertical-align: bottom;">
          <span style="width: 12px; height: 50px;"></span>
        </td>
      </tr>
    </table>

    <!-- The bases should be hidden by the black rectangles -->
    <table style="position: absolute; top: 120px; left: 10px;">
      <tr>
        <td style="vertical-align: top;">
          <math>
            <munder>
              <mspace width="20px" height="20px" depth="0px" mathbackground="red"/>
              <mspace width="10px" height="5px" depth="5px" mathbackground="green"/>
            </munder>
          </math>
        </td>
        <td>
          <math>
            <munderover>
              <mspace width="20px" height="10px" depth="10px" mathbackground="red"/>
              <mspace width="10px" height="5px" depth="5px" mathbackground="green"/>
              <mspace width="10px" height="5px" depth="5px" mathbackground="blue"/>
            </munderover>
          </math>
        </td>
        <td  style="vertical-align: bottom;">
          <math>
            <mover>
              <mspace width="20px" height="20px" depth="0px" mathbackground="red"/>
              <mspace width="10px" height="5px" depth="5px" mathbackground="blue"/>
            </mover>
          </math>
        </td>
      </tr>
    </table>

    <table style="position: absolute; top: 120px; left: 10px;">
      <tr>
        <td style="vertical-align: top;">
          <span style="width: 25px; height: 25px;"></span>
        </td>
        <td>
          <span style="width: 25px; height: 25px;"></span>
        </td>
        <td style="vertical-align: bottom;">
          <span style="width: 25px; height: 25px;"></span>
        </td>
      </tr>
    </table>

    <div style="position: absolute; top: 250px; left: 10px;">
      <!-- This verifies that the scripts are drawn smaller. Note: WebKit does
           not currently implement scriptlevel and only sets the size to
           0.75em. See bug 118738. -->
      <math>
        <munder>
          <mi>A</mi>
          <mi style="font-size: 0.75em !important">B</mi>
        </munder>
        <mover>
          <mi>A</mi>
          <mi style="font-size: 0.75em !important">B</mi>
        </mover>
        <munderover>
          <mi>A</mi>
          <mi style="font-size: 0.75em !important">B</mi>
          <mi style="font-size: 0.75em !important">C</mi>
        </munderover>
      </math>
    </div>

  </body>
</html>
