blob: 2d29ceda7c651b5b2be235c5f5161c107bedaa21 [file] [log] [blame]
<!DOCTYPE html>
<title>CSS Test: vertical rectangle shape-outside on floats, vertical-lr writing mode</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-vertical-rectangle-001-ref.html">
<meta name="flags" content="ahem">
<style>
.container {
width: 100px;
height: 75px;
font: 25px/1 Ahem;
line-height: 25px;
border: 10px solid black;
display: inline-block;
-webkit-writing-mode: vertical-lr;
}
.left-text {
text-align: left;
}
.right-text {
text-align: right;
}
.left {
float: left;
width: 100px;
height: 75px;
-webkit-shape-outside: rectangle(0px, 0px, 75px, 50px);
}
.right {
float: right;
width: 100px;
height: 75px;
-webkit-shape-outside: rectangle(0px, 25px, 75px, 50px);
}
</style>
</head>
<body>
<p>Test passes if you see two black rectangle boxes with a smaller white rectangle in one corner.</p>
<div class="container left-text">
<div class="left"></div>
X<br/>
X<br/>
X<br/>
XXX<br/>
</div>
<div class="container right-text">
<div class="right"></div>
X<br/>
X<br/>
X<br/>
XXX<br/>
</div>
</body>