LayoutTests/mathml/presentation/mo-stacked-glyphs.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>mo stacked glyphs</title>
   5     <meta charset="utf-8"/>
   6   </head>
   7   <body>
   8
   9     <!-- Test some stretchy operators requiring stacked glyphs at large sizes. -->
  10     <div style="position: absolute; top: 25px; left: 0; opacity: 0.75;">
  11       <math>
  12         <mrow>
  13           <mo>(</mo>
  14           <mo>)</mo>
  15           <mo>{</mo>
  16           <mo>}</mo>
  17           <mo>[</mo>
  18           <mo>]</mo>
  19           <mo>|</mo>
  20           <mo stretchy="true">&#x222b;</mo>
  21           <mspace height="200px" depth="200px"/>
  22         </mrow>
  23       </math>
  24     </div>
  25
  26     <!-- Same operators, but shifted vertically by one pixel. -->
  27     <div style="position: absolute; top: 26px; left: 0; opacity: 0.75;">
  28       <math>
  29         <mrow>
  30           <mo>(</mo>
  31           <mo>)</mo>
  32           <mo>{</mo>
  33           <mo>}</mo>
  34           <mo>[</mo>
  35           <mo>]</mo>
  36           <mo>|</mo>
  37           <mo stretchy="true">&#x222b;</mo>
  38           <mspace height="200px" depth="200px"/>
  39         </mrow>
  40       </math>
  41     </div>
  42
  43     <!-- Some horizontal bands to hide the top/middle/bottom parts of the
  44          operators and only show the straight lines. Note that the two previous
  45          <div> elements have opacity>0.5 and are only shifted vertically by
  46          one pixel. Hence the overlapped <div>'s should look like one <div> of
  47          opacity=1, provided there are no gaps between the stacked glyphs and
  48          that these glyphs are perfectly aligned. -->
  49         <div style="position: absolute; top: 0px; left: 0; width: 100%; height: 150px; background: red;"></div>
  50         <div style="position: absolute; top: 200px; left: 0; width: 100%; height: 150px; background: red;"></div>
  51         <div style="position: absolute; top: 400px; left: 0; width: 100%; height: 150px; background: red;"></div>
  52
  53   </body>
  54 </html>