Chromium Code Reviews| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <script> | |
| 5 if (window.internals) | |
| 6 window.internals.settings.setCSSExclusionsEnabled(true); | |
|
Julien - ping for review
2013/05/29 17:14:49
Do we need this? CSS runtime features are enabled
| |
| 7 </script> | |
| 8 <style> | |
| 9 .container { | |
| 10 width: 300px; | |
| 11 height: 100px; | |
| 12 font: 50px/1 Ahem, sans-serif; | |
| 13 background-color: red; | |
| 14 margin-bottom: 100px; | |
| 15 overflow: hidden; | |
| 16 } | |
| 17 .float-left { | |
| 18 position: relative; | |
| 19 width: 100px; | |
| 20 height: 100px; | |
|
Julien - ping for review
2013/05/29 17:14:49
I would have expected these 2 properties to not be
| |
| 21 float: left; | |
| 22 background-color: green; | |
| 23 } | |
| 24 .triangle-left { | |
| 25 -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%); | |
| 26 } | |
| 27 .float-right { | |
| 28 position: relative; | |
| 29 width: 100px; | |
| 30 height: 100px; | |
| 31 float: right; | |
| 32 background-color: green; | |
| 33 } | |
| 34 .triangle-right { | |
| 35 -webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%); | |
| 36 } | |
| 37 .circle { | |
| 38 -webkit-shape-outside: circle(50%, 100%, 50%); | |
| 39 } | |
| 40 </style> | |
| 41 </head> | |
| 42 <body> | |
| 43 <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> | |
| 44 <h2>You should see a single green rectange. There should be no red.</h2> | |
| 45 <div class="container"> | |
| 46 <div class="float-left triangle-left"></div> | |
| 47 <div class="float-right triangle-right"></div> | |
| 48 X<br/> | |
| 49 <div class="float-left circle"></div> | |
| 50 </div> | |
| 51 <h2>You should see a single green rectange. There should be no red.</h2> | |
| 52 <div style="text-align: right" class="container"> | |
| 53 <div class="float-right triangle-right"></div> | |
| 54 <div class="float-left triangle-left"></div> | |
| 55 X<br/> | |
| 56 <div class="float-right circle"></div> | |
| 57 </div> | |
| 58 </body> | |
| 59 </html> | |
| OLD | NEW |