OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 #source { | |
6 font: 20px/1 Ahem, sans-serif; | |
7 -webkit-flow-into: article; | |
8 } | |
9 .regions { | |
10 -webkit-flow-from: article; | |
11 width: 260px; | |
12 height: 200px; | |
13 margin: 0px 20px 20px; | |
14 background-color: #b0dcff; | |
15 shape-inside: rectangle(10px, -20px, 100%, 50%); | |
16 } | |
17 </style> | |
18 </head> | |
19 <body> | |
20 <article> | |
21 <div class="regions"></div> | |
22 <div class="regions"></div> | |
23 </article> | |
24 <div id="source"> | |
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 X X X X X 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 | |
28 <p style="margin-top: 40px;"> | |
29 Requires Ahem font. We have two regions, a rectangle shape with negative top coo
rdinate and 10px left offset is applied on the regions. | |
30 The content should flow from the first shape to the second shape. The overflow s
hould be pushed down below the content box. | |
31 </p> | |
32 <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> | |
33 </body> | |
34 </html> | |
OLD | NEW |