blob: 59a93f7d50634a7ddc438c5755e43d82645dc016 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
#container-border {
border: 1px solid black;
margin: 10px;
width: 500px;
}
#container {
font: 50px/1 Ahem, sans-serif;
color: grey;
width: 500px;
height: 300px;
overflow: hidden;
}
#float-left {
float: left;
position: relative;
overflow: visible;
-webkit-shape-outside: ellipse(200px 100px at 225px 125px);
-webkit-shape-margin: 25px;
width: 450px;
height: 250px;
}
#svg-shape-ellipse {
position: absolute;
display:block;
top: 0px;
left: 0px;
width: 500px;
height: 300px;
}
</style>
<body>
<p>The five square grey Ahem-font characters should appear below outermost ellipse boundary, which is defined by the shape-margin.</p>
<div id="container-border">
<div id="container">
<div id="float-left">
<svg id="svg-shape-ellipse" xmlns="http://www.w3.org/2000/">
<ellipse cx="225" cy="125" rx="200" ry="100" fill="green"></ellipse>
<ellipse cx="225" cy="125" rx="225" ry="125" fill="none" stroke="green"></ellipse>
</svg>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
X X X X X
</div>
</body>
</html>