LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-shape-margin-001.html - WebKit - Git at Google

 <!DOCTYPE html>
 <title>CSS Test: square shape-outside on floats</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="author" title="Hans Muller" href="mailto:hmuller@adobe.com">
 <link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-margin-property">
 <link rel="match" href="shape-outside-floats-shape-margin-001-ref.html">
 <meta name="flags" content="ahem">
 <style>
 #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;
     display:block;
     top: 0px;
     right: -20px;
     width: 142px;
     height: 102px;
 }
 </style>

 <body>
 <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="http://www.w3.org/2000/">
             <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>
         </svg>
     </div>
     X<br/>X<br/>X<br/>X<br/>X
 </div>
 </body>
	<!DOCTYPE html>
	<title>CSS Test: square shape-outside on floats</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="author" title="Hans Muller" href="mailto:hmuller@adobe.com">
	<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-margin-property">
	<link rel="match" href="shape-outside-floats-shape-margin-001-ref.html">
	<meta name="flags" content="ahem">
	<style>
	#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;
	display:block;
	top: 0px;
	right: -20px;
	width: 142px;
	height: 102px;
	}
	</style>

	<body>
	<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="http://www.w3.org/2000/">
	<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>
	</svg>
	</div>
	X<br/>X<br/>X<br/>X<br/>X
	</div>
	</body>