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----2---1,5---6 | |
9 | | | | | |
10 | 3----4 | | |
11 8--------------7 | |
12 | |
13 Vertical edges 8-0 and 2-3 as well as 4-5 and 5-7 wind in opposite direc
tions. | |
14 As a result both nonzero and evenodd fills produce the same U shaped res
ult. | |
15 */ | |
16 #polygon-shape-inside { | |
17 width: 200px; | |
18 height: 150px; | |
19 font: 50px/1 Ahem, sans-serif; | |
20 color: green; | |
21 shape-inside: polygon(nonzero, 50px 50px, 150px 50px, 100px 50px, 100px
100px, 150px 100px, 150px 50px, 200px 50px, 200px 150px, 50px 150px); | |
22 } | |
23 | |
24 #informative-text { | |
25 position: absolute; | |
26 top: 150px; | |
27 left: 50px; | |
28 } | |
29 </style> | |
30 </head> | |
31 <body style="position:relative"> | |
32 <div id="polygon-shape-inside">X X XXX</div> | |
33 <p id="informative-text"> | |
34 This test requires the Ahem font. It creates a self-intersecting rectiline
ar polygonal | |
35 shape-inside with default fillRule (nonzero). The content should just fill
the | |
36 U shape with solid green rectangles.</p> | |
37 </body> | |
38 </html> | |
39 | |
40 | |
41 | |
OLD | NEW |