LayoutTests/compositing/geometry/flipped-writing-mode.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
   <style>
     body {
       overflow: hidden;
     }
     .flipped {
       margin: 10px;
       height: 200px;
       width: 250px;
       background-color: silver;
       -webkit-writing-mode: vertical-rl;
     }

     .box {
       height: 100px;
       width: 100px;
       margin: 10px 20px;
       background-color: blue;
     }

     .composited {
       -webkit-transform: translateZ(0);
     }

     .block {
       width: 20px;
       height: 80px;
       margin: 5px;
       background-color: green;
     }

     #layers {
       opacity: 0; /* hide from pixel result */
     }
   </style>
   <script>
     if (window.testRunner)
       testRunner.dumpAsText(true);

     function dumpLayers()
     {
       if (window.testRunner)
         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
     }

     window.addEventListener('load', dumpLayers, false);
   </script>
 </head>
 <body>

   <div class="composited flipped">
     <div class="composited box">
       <div class="block"></div>
       <div class="block"></div>
       <div class="block"></div>
       <div class="block"></div>
       <div class="block"></div>
       <div class="block"></div>
       <div class="block"></div>
       <div class="block"></div>
     </div>
   </div>

   <pre id="layers">Layer tree goes here in DRT</pre>
 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	body {
	overflow: hidden;
	}
	.flipped {
	margin: 10px;
	height: 200px;
	width: 250px;
	background-color: silver;
	-webkit-writing-mode: vertical-rl;
	}

	.box {
	height: 100px;
	width: 100px;
	margin: 10px 20px;
	background-color: blue;
	}

	.composited {
	-webkit-transform: translateZ(0);
	}

	.block {
	width: 20px;
	height: 80px;
	margin: 5px;
	background-color: green;
	}

	#layers {
	opacity: 0; /* hide from pixel result */
	}
	</style>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText(true);

	function dumpLayers()
	{
	if (window.testRunner)
	document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
	}

	window.addEventListener('load', dumpLayers, false);
	</script>
	</head>
	<body>

	<div class="composited flipped">
	<div class="composited box">
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	</div>
	</div>

	<pre id="layers">Layer tree goes here in DRT</pre>
	</body>
	</html>