<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Horizontal stretchy operator (reference)</title>
<style>
  @font-face {
    font-family: TestFont;
    src: url("/fonts/math/stretchy.woff");
  }
  math, mo {
    font-family: TestFont;
    font-size: 50px;
  }
</style>
<body>
  <p>This test passes if you see green rectangles and no red.</p>

  <div style="position: absolute; left: 3em; top; 3em;
              width: 1000px; height: 500px; background: lightgreen;">

    <div style="position: absolute; top: 1px; left: 1px;">
      <!-- stretchy base in munder -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <munder>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
            <mspace width="200px" height="0px"/>
          </munder>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 1px; left: 251px;">
      <!-- stretchy script in munder -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <munder>
            <mspace width="200px" height="0px"/>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
          </munder>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 101px; left: 1px;">
      <!-- stretchy base in mover -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <mover>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
            <mspace width="200px" height="0px"/>
          </mover>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 101px; left: 251px;">
      <!-- stretchy script in mover -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <mover>
            <mspace width="200px" height="0px"/>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
          </mover>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 201px; left: 1px;">
      <!-- stretchy base in munderover -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <munderover>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
            <mspace width="200px" height="0px"/>
            <mspace width="200px" height="0px"/>
          </munderover>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 201px; left: 251px;">
      <!-- stretchy underscript in munderover -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <munderover>
            <mspace width="200px" height="0px"/>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
            <mspace width="200px" height="0px"/>
          </munderover>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 301px; left: 1px;">
      <!-- stretchy overscript in munderover -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <munderover>
            <mspace width="200px" height="0px"/>
            <mspace width="200px" height="0px"/>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
          </munderover>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 1px; left: 501px;">
      <!-- stretchy base and underscript in munderover -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <munderover>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
            <mspace width="200px" height="0px"/>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
          </munderover>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 151px; left: 501px;">
      <!-- stretchy base and overscript in munderover -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <munderover>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
            <mspace width="200px" height="0px"/>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
          </munderover>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 301px; left: 501px;">
      <!-- stretchy scripts in munderover -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <munderover>
            <mspace width="200px" height="0px"/>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
            <mo lspace="0" rspace="0" style="color: green;">⥚</mo>
          </munderover>
        </math>
      </div>
    </div>

    <div style="position: absolute; top: 1px; left: 751px;">
      <!-- Only stretchy operators in munderover. The widest unstretched size
           is used as the target size. -->
      <div style="position: absolute; left: 0; top: 0;">
        <math>
          <munderover>
            <mo lspace="0" rspace="0" style="font-size: 1em; color: green;">⥚</mo>
            <mo lspace="0" rspace="0" style="font-size: 4em; color: green;">⥚</mo>
            <mo lspace="0" rspace="0" style="font-size: 2em; color: green;">⥚</mo>
          </munderover>
        </math>
      </div>
    </div>
  </div>
  <script>
    MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");
    MathMLFeatureDetection.ensure_for_match_reftest("has_munderover");
  </script>
</body>
</html>
