| <html> |
| <head> |
| <style> |
| .container { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100px; |
| height: 100px; |
| font: 30px / 1 Ahem, sans-serif; |
| color: red; |
| border: 1px solid green; |
| border-top: 5px solid green; |
| } |
| .shape-outside { |
| width: 100px; |
| height: 100px; |
| background-color: rgba(15, 117, 117, 0.5); |
| } |
| .leftFloatTriangle { |
| -webkit-shape-outside: polygon(0px 0px, 100px 50px, 0px 100px); |
| float: left; |
| } |
| .rightFloatTriangle { |
| -webkit-shape-outside: polygon(100px 0px, 0px 50px, 100px 100px); |
| float: right; |
| } |
| .leftFloatUpperLeftTirangle { |
| -webkit-shape-outside: polygon(0px 0px, 100px 0px, 0px 100px); |
| float: left; |
| } |
| .rightFloatUpperRightTriangle { |
| -webkit-shape-outside: polygon(100px 0px, 0px 0px, 100px 100px); |
| float: right; |
| } |
| .overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 102px; |
| height: 106px; |
| background-color: green; |
| } |
| </style> |
| </script> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="shape-outside leftFloatTriangle"></div> X X |
| </div> |
| <div class="container" style="left: 140px;"> |
| <div class="shape-outside rightFloatTriangle"></div> X X |
| </div> |
| <div class="container" style="top: 140px;"> |
| <div class="shape-outside leftFloatUpperLeftTirangle"></div> X X |
| </div> |
| <div class="container" style="top: 140px; left: 140px;"> |
| <div class="shape-outside rightFloatUpperRightTriangle"></div> X X |
| </div> |
| <div class="overlay"></div> |
| <div class="overlay" style="left: 140px"></div> |
| <div class="overlay" style="top: 140px"></div> |
| <div class="overlay" style="top: 140px; left: 140px;"></div> |
| |
| <p style="margin-top: 280px;">The content should wrap around the triangle shapes, it should fit in the content box, so you should see four green rectangles. |
| You shouldn't see any red.</p> |
| <p><a href='http://webkit.org/b/128693'>Bug 128693</a>: [CSS Shapes] Adjust lineTop position to the next available wrapping location at shape-outsides</p> |
| </body> |
| </html> |
