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 |