| <!doctype html> |
| <html> |
| <head> |
| <title>display</title> |
| <meta charset="utf-8"/> |
| </head> |
| <body> |
| |
| <!-- The <math display="inline"> should be aligned left and so covered by |
| the red rectangle. --> |
| <div style="height: 3em; width: 10em;"> |
| <div style="position: absolute; left: 0; width: 10em; height: 3em; |
| background: blue;"> |
| <math display="inline"> |
| <mi>x</mi> |
| </math> |
| </div> |
| <div style="position: absolute; left: 0; width: 2em; height: 3em; |
| background: red;"> |
| </div> |
| </div> |
| |
| <!-- The <math display="block"> should be aligned centered and so |
| covered by the red rectangle. --> |
| <div style="height: 3em; width: 10em;"> |
| <div style="position: absolute; left: 0; width: 10em; height: 3em; |
| background: blue; padding: 1px;"> |
| <math display="block"> |
| <mi>x</mi> |
| </math> |
| </div> |
| <div style="position: absolute; left: 4em; width: 2em; height: 3em; |
| background: red;"> |
| </div> |
| </div> |
| |
| <!-- The <math display="inline"> should not create a new line and so |
| should be hidden by the black div. --> |
| <div style="height: 3em; width: 10em;"> |
| <div style="position: absolute; left: 0; width: 10em;"> |
| <span style="font-size: 1.5em;">X</span> |
| <math display="inline"><mi>x</mi></math> |
| <span style="font-size: 1.5em;">X</span> |
| </div> |
| <div style="position: absolute; left: 0; width: 10em; |
| background: black;"> |
| <span style="font-size: 1.5em;">X</span> |
| </div> |
| </div> |
| |
| <!-- The <math display="block"> should create a new line and so should |
| be hidden by the black div. --> |
| <div style="height: 5em; width: 10em;"> |
| <div style="position: absolute; left: 0; width: 10em;"> |
| <span style="display: inline-block; height: 2em;"></span> |
| <math display="block"><mi>x</mi></math> |
| </div> |
| <div style="position: absolute; left: 0; width: 10em;"> |
| <div style="position: absolute; left: 0; top: 2em; |
| width: 10em; background: black;"> |
| <span style="font-size: 1.5em;">X</span> |
| </div> |
| </div> |
| </div> |
| |
| </body> |
| </html> |
