| 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(evenodd, 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 the evenodd fillRule. The content should just fill the | |
| 36 U shape with solid green rectangles.</p> | |
| 37 </body> | |
| 38 </html> | |
| 39 | |
| 40 | |
| 41 | |
| OLD | NEW |