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

 <html>
 <head>
 <style>
 .container {
     width: 90px;
     height: 90px;
     color: green;
     background-color: red;
     font: 30px/1 Ahem, sans-serif;
     margin: 10px;
     -webkit-font-smoothing: antialiased;
 }
 .content-box {
     -webkit-shape-outside: content-box;
     background-clip: content-box;
     width: 30px;
     height: 30px;
     padding: 10px;
     border: 10px solid transparent;
     margin: 10px;
 }
 .padding-box {
     -webkit-shape-outside: padding-box;
     background-clip: padding-box;
     width: 10px;
     height: 10px;
     padding: 10px 20px;
     border: 15px solid transparent;
     margin: 15px;
 }
 .border-box {
     -webkit-shape-outside: border-box;
     background-clip: border-box;
     width: 10px;
     height: 10px;
     padding: 5px 10px;
     border: 5px solid transparent;
     border-right-width: 10px;
     margin: 30px;
 }
 .margin-box {
     -webkit-shape-outside: margin-box;
     width: 10px;
     height: 10px;
     padding: 2px 4px;
     border: 3px solid transparent;
     border-right-width: 6px;
     margin: 5px 10px;
 }
 .margin-box::before {
     display: block;
     margin-top: -10px;
     width: 30px;
     height: 30px;
     background-color: green;
     content: ' ';
 }
 .shape {
     background-color: green;
     float: left;
     border-left-width: 0;
     padding-left: 0;
     margin-left: 0;
 }
 </style>
 </head>
 <body>
     <p>These tests set the shape-outside to the various boxes (margin/border/padding/content). They require the Ahem font. You should see green squares, with no red.</p>
     <p>shape-outside: content-box</p>
     <div class='container'>
         <div class='shape content-box'></div>
         xxx xx xxx
     </div>
     <p>shape-outside: padding-box</p>
     <div class='container'>
         <div class='shape padding-box'></div>
         xxx xx xxx
     </div>
     <p>shape-outside: border-box</p>
     <div class='container'>
         <div class='shape border-box'></div>
         xxx xx xxx
     </div>
     <p>shape-outside: margin-box</p>
     <div class='container'>
         <div class='shape margin-box'></div>
         xx xxx xxx
     </div>
 </body>
 </html>
	<html>
	<head>
	<style>
	.container {
	width: 90px;
	height: 90px;
	color: green;
	background-color: red;
	font: 30px/1 Ahem, sans-serif;
	margin: 10px;
	-webkit-font-smoothing: antialiased;
	}
	.content-box {
	-webkit-shape-outside: content-box;
	background-clip: content-box;
	width: 30px;
	height: 30px;
	padding: 10px;
	border: 10px solid transparent;
	margin: 10px;
	}
	.padding-box {
	-webkit-shape-outside: padding-box;
	background-clip: padding-box;
	width: 10px;
	height: 10px;
	padding: 10px 20px;
	border: 15px solid transparent;
	margin: 15px;
	}
	.border-box {
	-webkit-shape-outside: border-box;
	background-clip: border-box;
	width: 10px;
	height: 10px;
	padding: 5px 10px;
	border: 5px solid transparent;
	border-right-width: 10px;
	margin: 30px;
	}
	.margin-box {
	-webkit-shape-outside: margin-box;
	width: 10px;
	height: 10px;
	padding: 2px 4px;
	border: 3px solid transparent;
	border-right-width: 6px;
	margin: 5px 10px;
	}
	.margin-box::before {
	display: block;
	margin-top: -10px;
	width: 30px;
	height: 30px;
	background-color: green;
	content: ' ';
	}
	.shape {
	background-color: green;
	float: left;
	border-left-width: 0;
	padding-left: 0;
	margin-left: 0;
	}
	</style>
	</head>
	<body>
	<p>These tests set the shape-outside to the various boxes (margin/border/padding/content). They require the Ahem font. You should see green squares, with no red.</p>
	<p>shape-outside: content-box</p>
	<div class='container'>
	<div class='shape content-box'></div>
	xxx xx xxx
	</div>
	<p>shape-outside: padding-box</p>
	<div class='container'>
	<div class='shape padding-box'></div>
	xxx xx xxx
	</div>
	<p>shape-outside: border-box</p>
	<div class='container'>
	<div class='shape border-box'></div>
	xxx xx xxx
	</div>
	<p>shape-outside: margin-box</p>
	<div class='container'>
	<div class='shape margin-box'></div>
	xx xxx xxx
	</div>
	</body>
	</html>