OLD | NEW |
| (Empty) |
1 <!DOCTYPE HTML> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 #page { font: 16px Ahem, sans-serif; } | |
6 | |
7 #region1 { | |
8 width: 180px; | |
9 height: 100px; | |
10 shape-inside: rectangle(0, 0, 130px, 100px); | |
11 margin-top: 10px; | |
12 } | |
13 #region2 { | |
14 width: 300px; | |
15 height: 150px; | |
16 shape-inside: rectangle(0, 0, 220px, 150px); | |
17 margin-top: 60px; | |
18 } | |
19 #region3 { | |
20 width: 300px; | |
21 height: 50px; | |
22 margin-top: 60px; | |
23 } | |
24 </style> | |
25 </head> | |
26 <body> | |
27 <div id="page"> | |
28 <div id="region1"> | |
29 X X X X X | |
30 <p>X X</p> | |
31 <p style="color: green">X X X X</p> | |
32 </div> | |
33 <div id="region2"> | |
34 <p style="color: green;">X X</p> | |
35 <p style="color: orange">X X X X</p> | |
36 <p>X X X X X X X X<p style="color: yellow">X X X X X X X X X X</p></
p> | |
37 </div> | |
38 <div id="region3"> | |
39 <p>X X</p> | |
40 <p style="color: red"> X X X X X X X X X</p> | |
41 </div> | |
42 </div> | |
43 | |
44 <p>Requires Ahem font. Two different -shape-inside property are applied to t
he first and second region. The third region is a simple region without -shape-i
nside. | |
45 The rectangles should flow through the regions and the shape-insides should
be applied to the first two regions.</p> | |
46 <p> Bug <a href="http://webkit.org/b/107880">107880</a>: Regions should resp
ect shape-inside</p> | |
47 </body> | |
48 </html> | |
OLD | NEW |