<!doctype html>
<html>
  <head>
    <title>mo stacked glyphs</title>
    <meta charset="utf-8"/>
  </head>
  <body>

    <!-- Test some stretchy operators requiring stacked glyphs at large sizes. -->
    <div style="position: absolute; top: 25px; left: 0; opacity: 0.75;">
      <math>
        <mrow>
          <mo>(</mo>
          <mo>)</mo>
          <mo>{</mo>
          <mo>}</mo>
          <mo>[</mo>
          <mo>]</mo>
          <mo>|</mo>
          <mo stretchy="true">&#x222b;</mo>
          <mspace height="200px" depth="200px"/>
        </mrow>
      </math>
    </div>

    <!-- Same operators, but shifted vertically by one pixel. -->
    <div style="position: absolute; top: 26px; left: 0; opacity: 0.75;">
      <math>
        <mrow>
          <mo>(</mo>
          <mo>)</mo>
          <mo>{</mo>
          <mo>}</mo>
          <mo>[</mo>
          <mo>]</mo>
          <mo>|</mo>
          <mo stretchy="true">&#x222b;</mo>
          <mspace height="200px" depth="200px"/>
        </mrow>
      </math>
    </div>
    
    <!-- Some horizontal bands to hide the top/middle/bottom parts of the
         operators and only show the straight lines. Note that the two previous
         <div> elements have opacity>0.5 and are only shifted vertically by
         one pixel. Hence the overlapped <div>'s should look like one <div> of
         opacity=1, provided there are no gaps between the stacked glyphs and
         that these glyphs are perfectly aligned. -->
        <div style="position: absolute; top: 0px; left: 0; width: 100%; height: 150px; background: red;"></div>
        <div style="position: absolute; top: 200px; left: 0; width: 100%; height: 150px; background: red;"></div>
        <div style="position: absolute; top: 400px; left: 0; width: 100%; height: 150px; background: red;"></div>

  </body>
</html>
