| <html> |
| <head> |
| <style> |
| .container { |
| width: 90px; |
| height: 90px; |
| color: green; |
| background-color: green; |
| margin: 10px; |
| position: relative; |
| } |
| |
| #shape-margin-border-box { |
| position: absolute; |
| top: 30px; |
| width: 25px; |
| height: 20px; |
| border: solid 5px blue; |
| border-left-width: 0px; |
| } |
| |
| #shape-margin-margin-box { |
| width: 25px; |
| height: 20px; |
| border: solid 5px blue; |
| border-left-width: 0px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <p>Verify that shape-margin has the expected effect on the four possible shape-outside box values for left floats.</p> |
| |
| <p>shape-outside: content-box</p> |
| <div class='container'></div> |
| |
| <p>shape-outside: padding-box</p> |
| <div class='container'></div> |
| |
| <p>shape-outside: border-box</p> |
| <div class='container'> |
| <div id="shape-margin-border-box"></div> |
| </div> |
| |
| <p>shape-outside: margin-box</p> |
| <div class='container'> |
| <div id="shape-margin-margin-box"></div> |
| </div> |
| |
| </body> |
| </html> |
