OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 article { font: 20px/1 Ahem, sans-serif; } | |
6 .regions { | |
7 width: 260px; | |
8 height: 200px; | |
9 margin: 0px 20px 20px; | |
10 background-color: #b0dcff; | |
11 shape-inside: rectangle(10px, -20px, 100%, 50%); | |
12 } | |
13 .overflow { | |
14 margin-top: -20px; | |
15 margin-left: 20px; | |
16 } | |
17 </style> | |
18 </head> | |
19 <body> | |
20 <article> | |
21 <div class="regions"> | |
22 X X X X X X X X X X X X X X X X X X X X X X X X | |
23 </div> | |
24 <div class="regions"> | |
25 X X X X X X X X X X X X X X X X X X X X X X X X | |
26 </div> | |
27 <div class="overflow"> | |
28 X X X X X | |
29 </div> | |
30 </article> | |
31 <p style="margin-top: 20px"> | |
32 Requires Ahem font. We have two regions, a rectangle shape with negative top coo
rdinate and 10px left offset is applied on the regions. | |
33 The content should flow from the first shape to the second shape. The overflow s
hould be pushed down below the content box. | |
34 </p> | |
35 <p>Bug <a href="http://webkit.org/b/123103">123103</a>: [CSS Shapes][CSS Regions
] Don't apply shape-inside when we have multiple auto-height regions and the hei
ght is not resolved</p> | |
36 </body> | |
37 </html> | |
OLD | NEW |