blob: 3a0270e9647efd2ab3d55b9449f26d9c6cb50ce5 [file] [log] [blame]
<!DOCTYPE html>
<title>CSS Test: square shape-outside on floats</title>
<link rel="author" title="Adobe" href="">
<link rel="author" title="Bem Jones-Bey" href="">
<link rel="author" title="Hans Muller" href="">
<link rel="help" href="">
<link rel="match" href="shape-outside-floats-shape-margin-001-ref.html">
<meta name="flags" content="ahem">
#container {
font: 20px/1 Ahem, sans-serif;
line-height: 20px;
width: 200px;
height: 300px;
text-align: right;
#float-right {
float: right;
position: relative;
overflow: visible;
width: 200px;
height: 300px;
-webkit-shape-outside: polygon(100px 20px, 200px 20px, 200px 80px, 100px 80px);
-webkit-shape-margin: 20px;
#svg-shape {
position: absolute;
top: 0px;
right: -20px;
width: 142px;
height: 102px;
<p>The right edges of the five black squares should follow the left side of the outer rounded rectangle boundary and each square should appear on a subsequent line.</p>
<div id="container">
<div id="float-right">
<svg id="svg-shape" xmlns="">
<rect x="20" y="20" width="100" height="60" fill="none" stroke="green"></rect>
<rect x="1" y="1" width="140" height="100" rx="20" ry="20" fill="none" stroke="green"></rect>