LayoutTests/compositing/overflow/overflow-positioning.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>25052 testcase</title>
   <style type="text/css" media="screen">
   body {
       margin: 100px;
   }

   #container {
     position: relative;
     overflow: hidden;
     height: 200px;
     width: 200px;
     border: 1px solid black;
     z-index: 0;
   }

   #header {
     position: relative;
     width: 100%;
     height: 100px;
     background-color: rgba(128, 128, 0, 0.2);
   }

   #hanger {
     position: absolute;
     left: -200px;
     height: 100px;
     width: 150px;
     background-color: blue;
   }

   #mover {
     position: absolute;
     top: 0;
     height: 150px;
     width: 150px;
     background-color: green;
     -webkit-transition: -webkit-transform 1000s;
   }

   #mover:hover {
     -webkit-transform: translate(0px, 100px);
   }
   #mover.moving {
     -webkit-transform: translate(0px, 100px);
   }
   </style>
   <script type="text/javascript" charset="utf-8">
     if (window.testRunner)
       testRunner.waitUntilDone();

     function startTest()
     {
       window.setTimeout(function() {
         var mover = document.getElementById('mover');
         mover.className = 'moving';

         window.setTimeout(function() {
           if (window.testRunner)
             testRunner.notifyDone();
         }, 0);

       }, 0);
     }

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

 <p>Things should not jump around when the green square starts the transition.</p>
 <div id="container">
   <div id="header">
     <div id="hanger"></div>
   </div>
   <div id="mover">
   </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>25052 testcase</title>
	<style type="text/css" media="screen">
	body {
	margin: 100px;
	}

	#container {
	position: relative;
	overflow: hidden;
	height: 200px;
	width: 200px;
	border: 1px solid black;
	z-index: 0;
	}

	#header {
	position: relative;
	width: 100%;
	height: 100px;
	background-color: rgba(128, 128, 0, 0.2);
	}

	#hanger {
	position: absolute;
	left: -200px;
	height: 100px;
	width: 150px;
	background-color: blue;
	}

	#mover {
	position: absolute;
	top: 0;
	height: 150px;
	width: 150px;
	background-color: green;
	-webkit-transition: -webkit-transform 1000s;
	}

	#mover:hover {
	-webkit-transform: translate(0px, 100px);
	}
	#mover.moving {
	-webkit-transform: translate(0px, 100px);
	}
	</style>
	<script type="text/javascript" charset="utf-8">
	if (window.testRunner)
	testRunner.waitUntilDone();

	function startTest()
	{
	window.setTimeout(function() {
	var mover = document.getElementById('mover');
	mover.className = 'moving';

	window.setTimeout(function() {
	if (window.testRunner)
	testRunner.notifyDone();
	}, 0);

	}, 0);
	}

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

	<p>Things should not jump around when the green square starts the transition.</p>
	<div id="container">
	<div id="header">
	<div id="hanger"></div>
	</div>
	<div id="mover">
	</div>
	</div>

	</body>
	</html>