| 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 |