| <html> |
| <head> |
| <title>Over-constrained dimensions test for absolutely positioned elements</title> |
| <style type="text/css"> |
| .container { |
| direction: rtl; |
| position: absolute; |
| width: 200px; |
| height: 200px; |
| background-color: blue; |
| } |
| .toTest { |
| position: absolute; |
| /* Over-constrained -- 50px + 75px + 100px + 25px + 25px > 200px */ |
| left: 50px; |
| right: 75px; |
| width: 100px; |
| margin-left: 25px; |
| margin-right: 25px; |
| |
| height: 50px; |
| background-color: green; |
| } |
| #test { left: 300px; } |
| #control div { direction: ltr; } |
| #test div { direction: rtl; } |
| </style> |
| </head> |
| <body> |
| <p>The two boxes below should look identical.</p> |
| <div id="control" class="container"> |
| <div class="toTest"></div> |
| </div> |
| <div id="test" class="container"> |
| <div class="toTest"></div> |
| </div> |
| </body> |
| </html> |
