LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-polygon-001.html - WebKit - Git at Google

 <!DOCTYPE html>
 <title>CSS Test: polygon 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://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
 <link rel="match" href="shape-outside-floats-polygon-001-ref.html">
 <meta name="flags" content="ahem">
 <style>
 .container {
     font: 20px/1 Ahem, sans-serif;
     line-height: 20px;
     width: 400px;
     height: 400px;
     background: blue;
     -webkit-writing-mode: vertical-lr;
 }
 .float-left {
     width: 200px;
     height: 200px;
     -webkit-shape-outside: polygon(0px 0px, 0px 200px, 200px 0px);
     float: left;
 }
 .float-right {
     margin-top: 100px;
     width: 200px;
     height: 100px;
     -webkit-shape-outside: polygon(0px 100px, 200px -100px, 200px 100px) content-box;
     float: right;
 }
 </style>
 <body>
   <div class="container">
     <div class="float-left"></div>
     XXXXXXXXXX
     XXXXXXXXXXX
     XXXXXXXXXXXX
     XXXXXXXXXXXXX
     XXXXXXXXXXXXXX
     XXXXXXXXXXXXXXX
     XXXXXXXXXXXXXXXX
     XXXXXXXXXXXXXXXXX
     XXXXXXXXXXXXXXXXXX
     XXXXXXXXXXXXXXXXXXX
     <div class="float-right"></div>
     XXXXXXXXXXXXXXXXXXX
     XXXXXXXXXXXXXXXXXX
     XXXXXXXXXXXXXXXXX
     XXXXXXXXXXXXXXXX
     XXXXXXXXXXXXXXX
     XXXXXXXXXXXXXX
     XXXXXXXXXXXXX
     XXXXXXXXXXXX
     XXXXXXXXXXX
     XXXXXXXXXX
   </div>
 </body>
	<!DOCTYPE html>
	<title>CSS Test: polygon 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://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
	<link rel="match" href="shape-outside-floats-polygon-001-ref.html">
	<meta name="flags" content="ahem">
	<style>
	.container {
	font: 20px/1 Ahem, sans-serif;
	line-height: 20px;
	width: 400px;
	height: 400px;
	background: blue;
	-webkit-writing-mode: vertical-lr;
	}
	.float-left {
	width: 200px;
	height: 200px;
	-webkit-shape-outside: polygon(0px 0px, 0px 200px, 200px 0px);
	float: left;
	}
	.float-right {
	margin-top: 100px;
	width: 200px;
	height: 100px;
	-webkit-shape-outside: polygon(0px 100px, 200px -100px, 200px 100px) content-box;
	float: right;
	}
	</style>
	<body>
	<div class="container">
	<div class="float-left"></div>
	XXXXXXXXXX
	XXXXXXXXXXX
	XXXXXXXXXXXX
	XXXXXXXXXXXXX
	XXXXXXXXXXXXXX
	XXXXXXXXXXXXXXX
	XXXXXXXXXXXXXXXX
	XXXXXXXXXXXXXXXXX
	XXXXXXXXXXXXXXXXXX
	XXXXXXXXXXXXXXXXXXX
	<div class="float-right"></div>
	XXXXXXXXXXXXXXXXXXX
	XXXXXXXXXXXXXXXXXX
	XXXXXXXXXXXXXXXXX
	XXXXXXXXXXXXXXXX
	XXXXXXXXXXXXXXX
	XXXXXXXXXXXXXX
	XXXXXXXXXXXXX
	XXXXXXXXXXXX
	XXXXXXXXXXX
	XXXXXXXXXX
	</div>
	</body>