OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="../resources/rounded-rectangle.js"></script> | 4 <script src="../resources/rounded-rectangle.js"></script> |
5 <script> | 5 <script> |
6 function createShapeElement() { | 6 function createShapeElement() { |
7 var stylesheet = document.getElementById("stylesheet"); | 7 var stylesheet = document.getElementById("stylesheet"); |
8 var dimensions = { width: 700, height: 500, | 8 var dimensions = { width: 700, height: 500, |
9 shapeX: 25, shapeY: 45, | 9 shapeX: 25, shapeY: 45, |
10 shapeWidth: 600, shapeHeight: 300, | 10 shapeWidth: 600, shapeHeight: 300, |
11 shapeRadiusX: 100, shapeRadiusY: 150 }; | 11 shapeRadiusX: 100, shapeRadiusY: 150 }; |
12 generateShapeElement("shape-inside", stylesheet.sheet, dimensions, 90); | 12 generateShapeElement("shape-inside", stylesheet.sheet, dimensions, 90); |
13 } | 13 } |
14 </script> | 14 </script> |
15 <style id="stylesheet"> | 15 <style id="stylesheet"> |
16 body { margin: 0; } | 16 body { margin: 0; } |
17 </style> | 17 </style> |
18 </head> | 18 </head> |
19 <body onload="createShapeElement()"> | 19 <body onload="createShapeElement()"> |
20 <div id="shape-inside"></div> | 20 <div id="shape-inside"></div> |
21 <div> | 21 <div> |
22 This test requires the Ahem font. It creates a rounded rectangle shape-insid
e and fills it | 22 This test requires the Ahem font. It creates a rounded rectangle shape-insid
e and fills it |
23 with alternating black and white squares as inline content. The middle line
overlaps the top | 23 with alternating black and white squares as inline content. The middle line
overlaps the top |
24 and bottom rounded corner area. The entire shape-inside should be filled, wi
th a small amount | 24 and bottom rounded corner area. The entire shape-inside should be filled, wi
thout any overflow. |
25 of overflow. | |
26 </div> | 25 </div> |
27 </body> | 26 </body> |
28 </html> | 27 </html> |
OLD | NEW |