| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/rounded-rectangle.js"></script> |
| <script> |
| function createShapeElement() { |
| var stylesheet = document.getElementById("stylesheet"); |
| var dimensions = { width: 200, height: 300, |
| shapeX: 25, shapeY: 45, |
| shapeWidth: 100, shapeHeight: 200, |
| shapeRadiusX: 55, shapeRadiusY: 0 }; |
| generateShapeElement("shape-inside1", stylesheet.sheet, dimensions, 9); |
| dimensions.shapeRadiusX = 55; |
| dimensions.shapeRadiusY = 0; |
| generateShapeElement("shape-inside2", stylesheet.sheet, dimensions, 9); |
| } |
| </script> |
| <style id="stylesheet"> |
| body { margin: 0; } |
| </style> |
| </head> |
| <body onload="createShapeElement()"> |
| <div id="shape-inside1" style="display:inline-block"></div> |
| <div id="shape-inside2" style="display:inline-block"></div> |
| <div> |
| This test requires the Ahem font. It creates two rectangular shape-insides with one of |
| corner radius X or corner radius Y equal to zero. The content should fill and slightly |
| overflow these two rectangular areas with alternating black and white boxes. |
| </div> |
| </body> |
| </html> |
