OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 .container { |
| 6 width: 300px; |
| 7 height: 100px; |
| 8 font: 50px/1 Ahem, sans-serif; |
| 9 background-color: red; |
| 10 margin-bottom: 100px; |
| 11 overflow: hidden; |
| 12 } |
| 13 .float-left { |
| 14 position: relative; |
| 15 width: 100px; |
| 16 height: 100px; |
| 17 float: left; |
| 18 background-color: green; |
| 19 } |
| 20 .triangle-left { |
| 21 -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%); |
| 22 } |
| 23 .float-right { |
| 24 position: relative; |
| 25 width: 100px; |
| 26 height: 100px; |
| 27 float: right; |
| 28 background-color: green; |
| 29 } |
| 30 .triangle-right { |
| 31 -webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%); |
| 32 } |
| 33 .circle { |
| 34 -webkit-shape-outside: circle(50%, 100%, 50%); |
| 35 } |
| 36 </style> |
| 37 </head> |
| 38 <body> |
| 39 <h1>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=110372">110372</a> -
[CSS Exclusions] Properly position multiple stacked floats with non rectangular
shape outside</h1> |
| 40 <h2>You should see a single green rectange. There should be no red.</h2> |
| 41 <div class="container"> |
| 42 <div class="float-left triangle-left"></div> |
| 43 <div class="float-right triangle-right"></div> |
| 44 X<br/> |
| 45 <div class="float-left circle"></div> |
| 46 </div> |
| 47 <h2>You should see a single green rectange. There should be no red.</h2> |
| 48 <div style="text-align: right" class="container"> |
| 49 <div class="float-right triangle-right"></div> |
| 50 <div class="float-left triangle-left"></div> |
| 51 X<br/> |
| 52 <div class="float-right circle"></div> |
| 53 </div> |
| 54 </body> |
| 55 </html> |
OLD | NEW |