css/css-transforms-1/transform-origin-009.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Transforms Test: transform-origin - 0% center('center' computes to '50%' in vertical position)</title>
 <link rel="author" title="Intel" href="http://www.intel.com">
 <link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
 <link rel="help" title="8. The 'transform-origin' Property" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
 <link rel="match" href="transform-origin-007-ref.html">
 <meta name="flags" content="">
 <meta name="assert" content="The 'transform-origin' property set 'center' computes to 50%(top 50%) for the vertical position.">
 <style>
   .div1 {
     height: 150px;
     position: absolute;
     width: 150px;
   }
   .div2 {
     background-color: gray;
   }
   #test {
     background-color: red;
     height: 50px;
     margin: 50px 0px 50px 100px;
     transform: rotate(180deg);
     transform-origin: 0% center;
     width: 50px;
   }
   #ref {
     background-color: green;
     height: 50px;
     margin: 50px 0px 50px 100px;
     transform: rotate(180deg);
     transform-origin: 0% 50%;
     width: 50px;
   }
 </style>
 <body>
   <p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p>
   <div class="div1 div2"><div id="test"></div></div>
   <div class="div1"><div id="ref"></div></div>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Transforms Test: transform-origin - 0% center('center' computes to '50%' in vertical position)</title>
	<link rel="author" title="Intel" href="http://www.intel.com">
	<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
	<link rel="help" title="8. The 'transform-origin' Property" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
	<link rel="match" href="transform-origin-007-ref.html">
	<meta name="flags" content="">
	<meta name="assert" content="The 'transform-origin' property set 'center' computes to 50%(top 50%) for the vertical position.">
	<style>
	.div1 {
	height: 150px;
	position: absolute;
	width: 150px;
	}
	.div2 {
	background-color: gray;
	}
	#test {
	background-color: red;
	height: 50px;
	margin: 50px 0px 50px 100px;
	transform: rotate(180deg);
	transform-origin: 0% center;
	width: 50px;
	}
	#ref {
	background-color: green;
	height: 50px;
	margin: 50px 0px 50px 100px;
	transform: rotate(180deg);
	transform-origin: 0% 50%;
	width: 50px;
	}
	</style>
	<body>
	<p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p>
	<div class="div1 div2"><div id="test"></div></div>
	<div class="div1"><div id="ref"></div></div>
	</body>