blob: 63881f1f6607ee59c3957e33325eb20a18d27e56 [file] [log] [blame]
<!DOCTYPE html>
<title>CSS Test: horizontal rectangle shape-outside on floats, vertical-rl writing mode</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://www.w3.org/TR/css-shapes-1/#shape-outside-property">
<link rel="match" href="shape-outside-floats-horizontal-rectangle-002-ref.html">
<meta name="flags" content="ahem">
<style>
.container {
width: 75px;
height: 100px;
font: 25px/1 Ahem;
line-height: 25px;
border: 10px solid black;
display: inline-block;
-webkit-writing-mode: vertical-rl;
}
.left-text {
text-align: left;
}
.right-text {
text-align: right;
}
.left {
float: left;
width: 75px;
height: 100px;
-webkit-shape-outside: rectangle(25px, 0px, 50px, 75px);
}
.right {
float: right;
width: 75px;
height: 100px;
-webkit-shape-outside: rectangle(25px, 25px, 50px, 75px);
}
</style>
</head>
<body>
<p>Test passes if you see two black rectangle boxes with a smaller white rectangle in one corner of each.</p>
<div class="container left-text">
<div class="left"></div>
X<br/>
X<br/>
XXXX<br/>
</div>
<div class="container right-text">
<div class="right"></div>
X<br/>
X<br/>
XXXX<br/>
</div>
</body>