LayoutTests/transforms/2d/compound-transforms-vs-containers.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>Compare Compound Transforms (translate scale rotate)</title>

   <style type="text/css" media="screen">
     div {
       width: 80px;
       height: 80px;
       position: absolute;
     }
     .container {
         position: relative;
         left: 50px;
         width: 400px;
         height: 220px;
         margin: 20px;
         border: 1px solid black;
     }
     .box {
       background-color: green;
     }
   </style>
 </head>
 <body>

 <p>Test ensures that nested transformed elements produce the same result as a single compound transform.You should not see any red in the two tests below</p>
 <div class="container">
   <p>Translate first</p>
   <div style="-webkit-transform: translate(75px, 20px)">
     <div style="-webkit-transform: scale(1.6, 1.6)">
       <div style="-webkit-transform: rotate(45deg)">
         <div class="box" style="background-color: red">Individual</div>
       </div>
     </div>
   </div>
   <div class="box" style="-webkit-transform: translate(75px, 20px) scale(1.6, 1.6) rotate(45deg);"></div>
 </div>

 <div class="container">
   <p>Translate second</p>
   <div style="-webkit-transform: scale(1.6, 1.6)">
     <div style="-webkit-transform: translate(75px, 20px)">
       <div style="-webkit-transform: rotate(45deg)">
         <div class="box" style="background-color: red">Individual</div>
       </div>
     </div>
   </div>
   <div class="box" style="-webkit-transform: scale(1.6, 1.6) translate(75px, 20px) rotate(45deg);"></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>Compare Compound Transforms (translate scale rotate)</title>

	<style type="text/css" media="screen">
	div {
	width: 80px;
	height: 80px;
	position: absolute;
	}
	.container {
	position: relative;
	left: 50px;
	width: 400px;
	height: 220px;
	margin: 20px;
	border: 1px solid black;
	}
	.box {
	background-color: green;
	}
	</style>
	</head>
	<body>

	<p>Test ensures that nested transformed elements produce the same result as a single compound transform.You should not see any red in the two tests below</p>
	<div class="container">
	<p>Translate first</p>
	<div style="-webkit-transform: translate(75px, 20px)">
	<div style="-webkit-transform: scale(1.6, 1.6)">
	<div style="-webkit-transform: rotate(45deg)">
	<div class="box" style="background-color: red">Individual</div>
	</div>
	</div>
	</div>
	<div class="box" style="-webkit-transform: translate(75px, 20px) scale(1.6, 1.6) rotate(45deg);"></div>
	</div>

	<div class="container">
	<p>Translate second</p>
	<div style="-webkit-transform: scale(1.6, 1.6)">
	<div style="-webkit-transform: translate(75px, 20px)">
	<div style="-webkit-transform: rotate(45deg)">
	<div class="box" style="background-color: red">Individual</div>
	</div>
	</div>
	</div>
	<div class="box" style="-webkit-transform: scale(1.6, 1.6) translate(75px, 20px) rotate(45deg);"></div>
	</div>

	</body>
	</html>