LayoutTests/fast/regions/position-writing-modes-in-variable-width-regions.html - WebKit - Git at Google

 <!doctype html>
 <html>
 <head>
  <style>
     #content {
         -webkit-flow-into: flow1;
     }

     #first-box {
         margin:50px 10% 0 10%;
         position:relative;
         height:400px;
     }

     #region1, #region2 {
         -webkit-flow-from: flow1;
     }

     #region1 {
         width: 500px;
         height: 50px;
     }

     #region2 {
         width: 320px;
         height: 400px;
     }

     .square {
         width:31.25%;
         height:20%;
         position:absolute;
     }

     .red { width:80px; height:80px; position:absolute; background-color:red; z-index:-1 }

     #topleft { top:0; left:0; -webkit-writing-mode:vertical-rl; background-color:#00ff00;}
     #topright { top:0; right:0; -webkit-writing-mode:horizontal-bt; background-color:#00dd00;}
     #bottomleft { bottom:0; left:0; -webkit-writing-mode:vertical-lr; background-color:#00bb00;  }
     #bottomright { bottom:0; right:0px; -webkit-writing-mode:horizontal-tb; background-color:#009900;}
 </style>
 </head>

 <body>
 You should see four 80x80 green squares below and no red should be visible.

 <div style="position:relative; width:550px;">

 <div id="content">
     <div id="first-box">
         <div class="square" id="topleft"></div>
         <div class="square" id="topright"></div>
         <div class="square" id="bottomleft"></div>
         <div class="square" id="bottomright"></div>
     </div>
 </div>

 <div id="container">
     <div id="region1"></div>
     <div id="region2"></div>
     <div id="region3"></div>
 </div>

 <div class=red style="top:50px;left:32px;"></div>

 <div class=red style="top:370px;left:32px;"></div>

 <div class=red style="top:50px;right:262px;"></div>

 <div class=red style="top:370px;right:262px;"></div>
 </div>
	<!doctype html>
	<html>
	<head>
	<style>
	#content {
	-webkit-flow-into: flow1;
	}

	#first-box {
	margin:50px 10% 0 10%;
	position:relative;
	height:400px;
	}

	#region1, #region2 {
	-webkit-flow-from: flow1;
	}

	#region1 {
	width: 500px;
	height: 50px;
	}

	#region2 {
	width: 320px;
	height: 400px;
	}

	.square {
	width:31.25%;
	height:20%;
	position:absolute;
	}

	.red { width:80px; height:80px; position:absolute; background-color:red; z-index:-1 }

	#topleft { top:0; left:0; -webkit-writing-mode:vertical-rl; background-color:#00ff00;}
	#topright { top:0; right:0; -webkit-writing-mode:horizontal-bt; background-color:#00dd00;}
	#bottomleft { bottom:0; left:0; -webkit-writing-mode:vertical-lr; background-color:#00bb00; }
	#bottomright { bottom:0; right:0px; -webkit-writing-mode:horizontal-tb; background-color:#009900;}
	</style>
	</head>

	<body>
	You should see four 80x80 green squares below and no red should be visible.

	<div style="position:relative; width:550px;">

	<div id="content">
	<div id="first-box">
	<div class="square" id="topleft"></div>
	<div class="square" id="topright"></div>
	<div class="square" id="bottomleft"></div>
	<div class="square" id="bottomright"></div>
	</div>
	</div>

	<div id="container">
	<div id="region1"></div>
	<div id="region2"></div>
	<div id="region3"></div>
	</div>

	<div class=red style="top:50px;left:32px;"></div>

	<div class=red style="top:370px;left:32px;"></div>

	<div class=red style="top:50px;right:262px;"></div>

	<div class=red style="top:370px;right:262px;"></div>
	</div>