blob: ec32d15dfca01b607983827e08ec6cf3bde54deb [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-000-ref.html">
<meta name="flags" content="ahem">
#container {
font: 20px/1 Ahem, sans-serif;
line-height: 20px;
width: 200px;
height: 300px;
#float-left {
float: left;
position: relative;
overflow: visible;
width: 200px;
height: 300px;
-webkit-shape-outside: polygon(20px 20px, 120px 20px, 120px 80px, 20px 80px);
-webkit-shape-margin: 20px;
#svg-shape {
position: absolute;
top: 0px;
left: 0px;
width: 142px;
height: 102px;
<p>The left edges of the five black squares should follow the right side of the outer rounded rectangle boundary and each square should appear on a subsequent line.</p>
<div id="container">
<div id="float-left">
<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>