| <html> |
| <head> |
| <style> |
| .container { |
| width: 90px; |
| height: 90px; |
| color: green; |
| background-color: red; |
| font: 30px/1 Ahem, sans-serif; |
| margin: 10px; |
| -webkit-font-smoothing: antialiased; |
| } |
| .content-box { |
| -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%) content-box; |
| background-clip: content-box; |
| width: 30px; |
| height: 30px; |
| padding: 10px; |
| border: 10px solid transparent; |
| margin: 10px; |
| } |
| .padding-box { |
| -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%) padding-box; |
| background-clip: padding-box; |
| width: 10px; |
| height: 10px; |
| padding: 10px 20px; |
| border: 15px solid transparent; |
| margin: 15px; |
| } |
| .border-box { |
| -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%) border-box; |
| background-clip: border-box; |
| width: 10px; |
| height: 10px; |
| padding: 5px 10px; |
| border: 5px solid transparent; |
| border-right-width: 10px; |
| margin: 30px; |
| } |
| .margin-box { |
| -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%) margin-box; |
| width: 10px; |
| height: 10px; |
| padding: 2px 4px; |
| border: 3px solid transparent; |
| border-right-width: 6px; |
| margin: 5px 10px; |
| } |
| .margin-box::before { |
| display: block; |
| margin-top: -10px; |
| width: 30px; |
| height: 30px; |
| background-color: green; |
| content: ' '; |
| } |
| .shape { |
| background-color: green; |
| float: left; |
| border-left-width: 0; |
| padding-left: 0; |
| margin-left: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <p>These tests set the shape-outside to a <shape> <box> pair, where the shape takes up its entire sizing box. They test for each of the various sizing boxes (margin/border/padding/content). They require the Ahem font. You should see green squares, with no red.</p> |
| <p>shape-outside: content-box</p> |
| <div class='container'> |
| <div class='shape content-box'></div> |
| xxx xx xxx |
| </div> |
| <p>shape-outside: padding-box</p> |
| <div class='container'> |
| <div class='shape padding-box'></div> |
| xxx xx xxx |
| </div> |
| <p>shape-outside: border-box</p> |
| <div class='container'> |
| <div class='shape border-box'></div> |
| xxx xx xxx |
| </div> |
| <p>shape-outside: margin-box</p> |
| <div class='container'> |
| <div class='shape margin-box'></div> |
| xx xxx xxx |
| </div> |
| </body> |
| </html> |
