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