| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .border { |
| border-left: 5px solid blue; |
| border-top: 10px solid blue; |
| border-right: 15px solid blue; |
| border-bottom: 20px solid blue; |
| width: 50px; |
| height: 70px; |
| border-style: solid; |
| } |
| .padding { |
| padding: 10px 15px 20px 5px; |
| } |
| .border-box { |
| -webkit-box-sizing: border-box; |
| } |
| .border-box.border { |
| width: 70px; |
| height: 100px; |
| } |
| .border-box.border.padding { |
| width: 90px; |
| height: 130px; |
| } |
| .shape-inside { |
| -webkit-shape-inside: polygon(5px 10px, 35px 10px, 35px 50px, 5px 50px); |
| font-family: Ahem, sans-serif; |
| font-size: 10px; |
| color: green; |
| } |
| .border-box.shape-inside { |
| -webkit-shape-inside: polygon(10px 20px, 40px 20px, 40px 60px, 10px 60px) border-box; |
| } |
| .border-box.border.padding.shape-inside { |
| -webkit-shape-inside: polygon(15px 30px, 45px 30px, 45px 70px, 15px 70px) border-box; |
| } |
| .vertical-lr { |
| -webkit-writing-mode: vertical-lr; |
| } |
| .vertical-rl { |
| -webkit-writing-mode: vertical-rl; |
| } |
| .horizontal-tb { |
| -webkit-writing-mode: horizontal-tb; |
| } |
| </style> |
| </head> |
| <body> |
| <p>These tests check that shape inside offsets from the correct box. They require the Ahem font.</p> |
| <p>The following tests check writing modes on a box with a 5 10 15 20px blue border, and 5 10 15 20px shape offsets.</p> |
| <div class='border shape-inside horizontal-tb'> |
| xxx xxx xxx xxx |
| </div> |
| <div class='border shape-inside vertical-lr'> |
| xxxx xxxx xxxx |
| </div> |
| <div class='border shape-inside vertical-rl'> |
| xxxx xxxx xxxx |
| </div> |
| <p>The following tests should look the same, but use box-sizing: border-box.</p> |
| <div class='border-box border shape-inside horizontal-tb'> |
| xxx xxx xxx xxx |
| </div> |
| <div class='border-box border shape-inside vertical-lr'> |
| xxxx xxxx xxxx |
| </div> |
| <div class='border-box border shape-inside vertical-rl'> |
| xxxx xxxx xxxx |
| </div> |
| <p>The following tests add 5 10 15 20px of padding.</p> |
| <div class='border padding shape-inside horizontal-tb'> |
| xxx xxx xxx xxx |
| </div> |
| <div class='border padding shape-inside vertical-lr'> |
| xxxx xxxx xxxx |
| </div> |
| <div class='border padding shape-inside vertical-rl'> |
| xxxx xxxx xxxx |
| </div> |
| <p>The following tests should look the same, but use box-sizing: border-box.</p> |
| <div class='border-box border padding shape-inside horizontal-tb'> |
| xxx xxx xxx xxx |
| </div> |
| <div class='border-box border padding shape-inside vertical-lr'> |
| xxxx xxxx xxxx |
| </div> |
| <div class='border-box border padding shape-inside vertical-rl'> |
| xxxx xxxx xxxx |
| </div> |
| </body> |
| </html> |
