| <html> |
| <head> |
| <style> |
| .shape { |
| font: 30px/1 Ahem, sans-serif; |
| -webkit-font-smoothing: antialiased; |
| color: green; |
| margin: 20px; |
| } |
| .content-box { |
| background-clip: content-box; |
| background-color: red; |
| width: 90px; |
| height: 90px; |
| } |
| .rounded-content-box { |
| background-clip: content-box; |
| background-color: grey; |
| width: 90px; |
| height: 90px; |
| border-radius: 30px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Check that shape-inside:content-box works correctly.</p> |
| <div class='shape content-box'>XXX XXX XXX</div> |
| <div class='shape rounded-content-box'> X<br>XXX<br> X</div> |
| </body> |
| </html> |