blob: fb9e40972dcbcb00e780a46e7fc2f671fce4713c [file] [log] [blame]
<!DOCTYPE html>
<title>CSS Test: stacked floats with shape-outside</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
<link rel="match" href="shape-outside-floats-stacked-000-ref.html">
<meta name="flags" content="ahem">
<style>
.container {
width: 300px;
height: 100px;
font: 50px/1 Ahem, sans-serif;
line-height: 50px;
background-color: red;
margin-bottom: 50px;
overflow: hidden;
color: green;
}
.float-left {
width: 100px;
height: 100px;
float: left;
background-color: green;
}
.triangle-left {
-webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%);
}
.float-right {
position: relative;
width: 100px;
height: 100px;
float: right;
background-color: green;
}
.triangle-right {
-webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%);
}
.circle {
position: relative;
top: -50%;
-webkit-shape-outside: circle(50%, 50%, 50%);
}
</style>
<body>
<p>You should see two green rectanges. There should be no red.</p>
<div class="container">
<div class="float-left triangle-left"></div>
<div class="float-right triangle-right"></div>
X<br/>
<div class="float-left circle"></div>
</div>
<div style="text-align: right" class="container">
<div class="float-right triangle-right"></div>
<div class="float-left triangle-left"></div>
X<br/>
<div class="float-right circle"></div>
</div>
</body>