blob: 51890c0e60530468cc57ef85bc71a642ed07e96e [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
#content {
font: 50px/1 Ahem, sans-serif;
-webkit-font-smoothing: antialiased;
color: green;
width: 300px;
border: 1px solid black;
}
#right-shape {
float: right;
width: 50px;
height: 50px;
background-color: blue;
margin-left: 50px; /* effectively overridden by shape-outside */
-webkit-shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
}
#left-shape {
float: left;
width: 50px;
height: 50px;
background-color: blue;
margin-right: 50px; /* effectively overridden by shape-outside */
-webkit-shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
}
</style>
</head>
<body>
<p>The blue squares on the left and right should be surrounded by three green squares.</p>
<div id="content">
<div style="text-align: right">
X<br>
<div id="right-shape"></div>
X<br>X
</div>
X<br>
<div id="left-shape"></div>
X<br>X
</div>
</body>
</html>