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

 <!DOCTYPE html>
 <title>
  CSS Test: vertical rectangle shape-outside on floats, vertical-rl writing mode
 </title>
 <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-vertical-rectangle-002-reference.html" />
 <meta name="flags" content="ahem" />
 <script>
  // This is required to run the tests in WebKit's test infrastructure.
 if (window.internals)
     window.internals.settings.setCSSShapesEnabled(true);
 </script>
 <style>
  .container {
     width: 100px;
     height: 75px;
     font: 25px/1 Ahem;
     line-height: 25px;
     border: 10px solid black;
     display: inline-block;
    -webkit-writing-mode: vertical-rl;
 }

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

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

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

 .right {
     float: right;
     width: 100px;
     height: 75px;
    -webkit-shape-outside: rectangle(25px, 25px, 75px, 50px);
 }
 </style>
 <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, vertical-rl writing mode
	</title>
	<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-vertical-rectangle-002-reference.html" />
	<meta name="flags" content="ahem" />
	<script>
	// This is required to run the tests in WebKit's test infrastructure.
	if (window.internals)
	window.internals.settings.setCSSShapesEnabled(true);
	</script>
	<style>
	.container {
	width: 100px;
	height: 75px;
	font: 25px/1 Ahem;
	line-height: 25px;
	border: 10px solid black;
	display: inline-block;
	-webkit-writing-mode: vertical-rl;
	}

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

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

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

	.right {
	float: right;
	width: 100px;
	height: 75px;
	-webkit-shape-outside: rectangle(25px, 25px, 75px, 50px);
	}
	</style>
	<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>