| <!doctype html> |
| <html> |
| <head> |
| <title>scripts-height</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; |
| padding: 0; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <!-- base with large height: the script are shifted to the top/bottom |
| of the cell and should be hidden by the black rectangles --> |
| <div style="position: absolute; top: 10px; left: 10px;"> |
| <table> |
| <tr> |
| <td> |
| <math> |
| <msubsup> |
| <mspace height="40px" depth="40px"/> |
| <mspace width="10px" height="5px" depth="5px"/> |
| <mspace width="10px" height="5px" depth="5px"/> |
| </msubsup> |
| </math> |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div style="position: absolute; top: 10px; left: 10px;"> |
| <table> |
| <tr> |
| <td style="vertical-align: top"> |
| <span style="width: 20px; height: 20px;"></span> |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div style="position: absolute; top: 10px; left: 10px;"> |
| <table> |
| <tr> |
| <td style="vertical-align: bottom"> |
| <span style="width: 20px; height: 20px;"></span> |
| </td> |
| </tr> |
| </table> |
| </div> |
| |
| <!-- scripts of different heights: they should all be aligned in the |
| middle of the cell --> |
| <div style="position: absolute; top: 10px; left: 120px;"> |
| <table> |
| <tr> |
| <td style="width: 14em; height: 14em;"> |
| <math> |
| <mspace height="7em" depth="7em"/> |
| <mspace width="10px" height="1em" depth="1em" mathbackground="red"/> |
| <msubsup> |
| <mspace width="10px" height="1em" depth="1em" mathbackground="green"/> |
| <mspace/> |
| <mspace/> |
| </msubsup> |
| <msubsup> |
| <mspace width="10px" height="1em" depth="1em" mathbackground="blue"/> |
| <mspace/> |
| <mspace/> |
| </msubsup> |
| <msubsup> |
| <mspace width="10px" height="1em" depth="1em" mathbackground="yellow"/> |
| <mspace/> |
| <mspace/> |
| </msubsup> |
| </math> |
| </td> |
| </tr> |
| </table> |
| </div> |
| |
| </body> |
| </html> |
