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

 <!DOCTYPE html>
 <title>shape-outside-floats-rounded-rectangle-001.html</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-rounded-rectangle-001-ref.html">
 <meta name="flags" content="ahem">
 <style>
 .container {
     font: 20px/1 Ahem, sans-serif;
     width: 500px;
     height: 200px;
     border: 1px solid black;
 }

 .rounded-rect {
     width: 320px;
     height: 160px;
     background-color: blue;
     overflow: hidden;
     border-radius: 60px;
     -webkit-shape-outside: rectangle(0px, 0px, 320px, 160px, 60px, 60px); /* x,y,width,height,rx,ry */
 }
 </style>

 <body>
 <p>The black squares should trace the right side of the rounded rectangle's blue outline.</p>
 <div class="container">
 X<br/>
     <div style="float: left" class="rounded-rect"></div>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X
 </div>

 <p>The black squares should trace the left side of the rounded rectangle's blue outline.</p>
 <div class="container" style="text-align: right">
 X<br/>
     <div style="float: right" class="rounded-rect"></div>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X<br/>
 X
 </div>
 </body>
	<!DOCTYPE html>
	<title>shape-outside-floats-rounded-rectangle-001.html</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-rounded-rectangle-001-ref.html">
	<meta name="flags" content="ahem">
	<style>
	.container {
	font: 20px/1 Ahem, sans-serif;
	width: 500px;
	height: 200px;
	border: 1px solid black;
	}

	.rounded-rect {
	width: 320px;
	height: 160px;
	background-color: blue;
	overflow: hidden;
	border-radius: 60px;
	-webkit-shape-outside: rectangle(0px, 0px, 320px, 160px, 60px, 60px); /* x,y,width,height,rx,ry */
	}
	</style>

	<body>
	<p>The black squares should trace the right side of the rounded rectangle's blue outline.</p>
	<div class="container">
	X<br/>
	<div style="float: left" class="rounded-rect"></div>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X
	</div>

	<p>The black squares should trace the left side of the rounded rectangle's blue outline.</p>
	<div class="container" style="text-align: right">
	X<br/>
	<div style="float: right" class="rounded-rect"></div>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X<br/>
	X
	</div>
	</body>