LayoutTests/fast/writing-mode/percentage-padding.html - WebKit - Git at Google

 <html>
 <head>
 <style>
 .block
 {
     width:100px;
     height:200px;
     padding:50%;
     background-color:green;
 }
 </style>
 </head>
 <body>
 <div style="width:100px;height:200px; -webkit-writing-mode:vertical-lr">
 <div id="test" class="block"></div>
 </div>
 <div id="console"></div>
 <script>
 if (window.testRunner)
     window.testRunner.dumpAsText();
 test = document.getElementById("test");
 rect = test.getBoundingClientRect();
 width = rect.right - rect.left;
 height = rect.bottom - rect.top;
 if (width != 300 || height != 400) {
   document.getElementById('console').innerHTML = "FAIL: The block should be 300x400 pixels in size.";
   test.style.backgroundColor = 'red';
 } else
   document.getElementById('console').innerHTML = "PASS: The block is the correct size.";
 </script>
 </body>
 </html>
	<html>
	<head>
	<style>
	.block
	{
	width:100px;
	height:200px;
	padding:50%;
	background-color:green;
	}
	</style>
	</head>
	<body>
	<div style="width:100px;height:200px; -webkit-writing-mode:vertical-lr">
	<div id="test" class="block"></div>
	</div>
	<div id="console"></div>
	<script>
	if (window.testRunner)
	window.testRunner.dumpAsText();
	test = document.getElementById("test");
	rect = test.getBoundingClientRect();
	width = rect.right - rect.left;
	height = rect.bottom - rect.top;
	if (width != 300 \|\| height != 400) {
	document.getElementById('console').innerHTML = "FAIL: The block should be 300x400 pixels in size.";
	test.style.backgroundColor = 'red';
	} else
	document.getElementById('console').innerHTML = "PASS: The block is the correct size.";
	</script>
	</body>
	</html>