blob: 0150c93bc0aba8504a8e516f12c59eca68a8bce1 [file] [log] [blame]
<!DOCTYPE html>
<title>CSS Test: square shape-outside on floats with a border</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
<link rel="match" href="shape-outside-floats-square-000-ref.html">
<meta name="flags" content="ahem">
<style>
.container {
width: 75px;
height: 75px;
font: 25px/1 Ahem;
line-height: 25px;
border: 10px solid red;
display: inline-block;
}
.right-text {
text-align: right;
}
.left {
float: left;
width: 75px;
height: 75px;
border: 10px solid black;
margin-top: -10px;
margin-left: -10px;
-webkit-shape-outside: rectangle(0px, 0px, 50px, 50px);
}
.right {
float: right;
width: 75px;
height: 75px;
border: 10px solid black;
margin-top: -10px;
margin-right: -10px;
-webkit-shape-outside: rectangle(25px, 0px, 50px, 50px);
}
</style>
</head>
<body>
<p>Test passes if you see two black square boxes with a smaller white square in one corner.</p>
<div class="container right-text">
<div class="left"></div>
X<br/>
X<br/>
XXX<br/>
</div>
<div class="container">
<div class="right"></div>
X<br/>
X<br/>
XXX<br/>
</div>
</body>