OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 /* This rectilinear polygon contains a self-intersecting loop (the vertices
are | |
6 numbered in the figure: | |
7 | |
8 0----4----1----5 | |
9 | | | | | |
10 | 3----2 | | |
11 7--------------6 | |
12 | |
13 When the fillRule is nonzero the entire rectangle is filled because | |
14 edges 7-0 and 3-4 wind in same direction. When fillRule is evenodd the | |
15 1-2-3-4 rectangle is not filled, leaving a U shape. | |
16 */ | |
17 #polygon-shape-inside { | |
18 width: 200px; | |
19 height: 150px; | |
20 font: 50px/1 Ahem, sans-serif; | |
21 color: green; | |
22 shape-inside: polygon(nonzero, 50px 50px, 150px 50px, 150px 100px, 100px
100px, 100px 50px, 200px 50px, 200px 150px, 50px 150px); | |
23 } | |
24 | |
25 #informative-text { | |
26 position: absolute; | |
27 top: 150px; | |
28 left: 50px; | |
29 } | |
30 </style> | |
31 </head> | |
32 <body style="position:relative"> | |
33 <div id="polygon-shape-inside">XXX XXX</div> | |
34 <p id="informative-text"> | |
35 This test requires the Ahem font. It creates a self-intersecting rectiline
ar polygonal | |
36 shape-inside with the default fillRule (nonzero). The content should just
fill the | |
37 shape with solid green rectangles.</p> | |
38 </body> | |
39 </html> | |
40 | |
OLD | NEW |