LayoutTests/fast/regions/shape-inside/shape-inside-with-region-borders.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <script>
     if (window.internals)
         window.internals.settings.setCSSShapesEnabled(true);
 </script>
 <style>
     #content {
         font: 20px Ahem, sans-serif;
         -webkit-flow-into: flow;
     }
     .region {
         width: 300px;
         height: 300px;
         background-color: yellow;
         border-top: 10px solid lightgreen;
         border-right: 20px solid green;
         border-bottom: 30px solid lightblue;
         border-left: 40px solid blue;
         -webkit-flow-from: flow;
     }
     #shape_inside {
         -webkit-shape-inside: rectangle(50px, 0px, 200px, 300px);
         background-color: orange;
     }
 </style>
 </head>
 <body>

 <div id="shape_inside" class="region"></div>

 <div id="content">
     XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
     XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
     XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
     XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
 </div>

 <p>Requires Ahem font. The content flows into a region (300px wide) what contains a shape-inside rectangle (200px wide) with 50px left offset.<br/>
 The content should fill the shape-inside area out. There should be an equally 50-50px left and right offset for the content in the content box. The borders shouldn't have any effect on the shape-inside's rectangle.
 <p>Bug <a href="http://webkit.org/b/115456">115456</a>: [CSS Regions][CSS Exclusions] Shape-inside on regions should respect region borders and paddings</p>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script>
	if (window.internals)
	window.internals.settings.setCSSShapesEnabled(true);
	</script>
	<style>
	#content {
	font: 20px Ahem, sans-serif;
	-webkit-flow-into: flow;
	}
	.region {
	width: 300px;
	height: 300px;
	background-color: yellow;
	border-top: 10px solid lightgreen;
	border-right: 20px solid green;
	border-bottom: 30px solid lightblue;
	border-left: 40px solid blue;
	-webkit-flow-from: flow;
	}
	#shape_inside {
	-webkit-shape-inside: rectangle(50px, 0px, 200px, 300px);
	background-color: orange;
	}
	</style>
	</head>
	<body>

	<div id="shape_inside" class="region"></div>

	<div id="content">
	XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
	XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
	XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
	XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
	</div>

	<p>Requires Ahem font. The content flows into a region (300px wide) what contains a shape-inside rectangle (200px wide) with 50px left offset.<br/>
	The content should fill the shape-inside area out. There should be an equally 50-50px left and right offset for the content in the content box. The borders shouldn't have any effect on the shape-inside's rectangle.
	<p>Bug <a href="http://webkit.org/b/115456">115456</a>: [CSS Regions][CSS Exclusions] Shape-inside on regions should respect region borders and paddings</p>

	</body>
	</html>