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

 <!DOCTYPE html>
 <title>CSS Test: vertical rectangle 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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
 <link rel="match" href="shape-outside-floats-vertical-rectangle-000-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;
 }

 .left-text {
     text-align: left;
 }

 .right-text {
     text-align: right;
 }

 .left {
     float: left;
     width: 75px;
     height: 100px;
     -webkit-shape-outside: rectangle(0px, 0px, 50px, 75px);
 }

 .right {
     float: right;
     width: 75px;
     height: 100px;
     -webkit-shape-outside: rectangle(25px, 0px, 50px, 75px);
 }
 </style>
 </head>
 <body>
     <p>Test passes if you see two black rectangle boxes with a smaller white rectangle in one corner.</p>
     <div class="container left-text">
         <div class="left"></div>
         X<br/>
         X<br/>
         X<br/>
         XXX<br/>
     </div>

     <div class="container right-text">
         <div class="right"></div>
         X<br/>
         X<br/>
         X<br/>
         XXX<br/>
     </div>
 </body>
	<!DOCTYPE html>
	<title>CSS Test: vertical rectangle 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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
	<link rel="match" href="shape-outside-floats-vertical-rectangle-000-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;
	}

	.left-text {
	text-align: left;
	}

	.right-text {
	text-align: right;
	}

	.left {
	float: left;
	width: 75px;
	height: 100px;
	-webkit-shape-outside: rectangle(0px, 0px, 50px, 75px);
	}

	.right {
	float: right;
	width: 75px;
	height: 100px;
	-webkit-shape-outside: rectangle(25px, 0px, 50px, 75px);
	}
	</style>
	</head>
	<body>
	<p>Test passes if you see two black rectangle boxes with a smaller white rectangle in one corner.</p>
	<div class="container left-text">
	<div class="left"></div>
	X<br/>
	X<br/>
	X<br/>
	XXX<br/>
	</div>

	<div class="container right-text">
	<div class="right"></div>
	X<br/>
	X<br/>
	X<br/>
	XXX<br/>
	</div>
	</body>