LayoutTests/transforms/2d/transform-borderbox.html - WebKit - Git at Google

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Transform Center with Borders</title>
   <style type="text/css" media="screen">
     .container {
       height: 210px;
       width: 400px;
       margin: 30px;
       outline: 5px solid black;
     }
     .box {
       height: 100px;
       width: 200px;
       margin-bottom: 10px;
       background-color: green;
       border-right: 50px solid gray;
       box-sizing: auto;
       -webkit-transform: scalex(2);
       -webkit-transform-origin: left;
     }
     .border-box {
       box-sizing: border-box;
     }
   </style>
 </head>
 <body>

 <p>
 <p>Top box should have gray part extending outside the black outline. Lower box should lie inside the outline</p>
   <div class="container">
     <div class="box">box-sizing: auto</div>
     <div class="box border-box">box-sizing: border-box</div>
   </div>
 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Transform Center with Borders</title>
	<style type="text/css" media="screen">
	.container {
	height: 210px;
	width: 400px;
	margin: 30px;
	outline: 5px solid black;
	}
	.box {
	height: 100px;
	width: 200px;
	margin-bottom: 10px;
	background-color: green;
	border-right: 50px solid gray;
	box-sizing: auto;
	-webkit-transform: scalex(2);
	-webkit-transform-origin: left;
	}
	.border-box {
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>

	<p>
	<p>Top box should have gray part extending outside the black outline. Lower box should lie inside the outline</p>
	<div class="container">
	<div class="box">box-sizing: auto</div>
	<div class="box border-box">box-sizing: border-box</div>
	</div>
	</body>
	</html>