chromium/src/third_party/blink/web_tests/transforms/3d/point-mapping/3d-point-mapping-preserve-3d.html - manifest_repos/chromium_src - Git at Google

 <html>
 <head>
   <title>Point mapping through 3D transform hierarchies</title>
   <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">

     function test()
     {
       // In non-test mode, show the mouse coords for testing
       if (!window.testRunner)
         document.body.addEventListener('mousemove', mousemoved, false);

       dispatchEvent(44, 44, 'box1', 1, 1);
       dispatchEvent(74, 68, 'box2', 1, 1);
       dispatchEvent(157, 164, 'box2', 97, 97);

       dispatchEvent(320, 68, 'box4', 1, 1);
       dispatchEvent(336, 87, 'box5', 1, 1);

       dispatchEvent(582, 87, 'box8', 1, 1);
       dispatchEvent(658, 174, 'box8', 85, 85);

       dispatchEvent(74, 314, 'box10', 1, 1);
       dispatchEvent(91, 351, 'box11', 1, 1);

       dispatchEvent(320, 314, 'box13', 1, 1);
       dispatchEvent(343, 351, 'box14', 1, 1);
       dispatchEvent(365, 375, 'box15', 1, 1);

       dispatchEvent(566, 314, 'box17', 1, 1);
       dispatchEvent(587, 352, 'box18', 1, 1);
       dispatchEvent(629, 401, 'box19', 1, 1);
       dispatchEvent(653, 422, 'box20', 1, 1);
       dispatchEvent(745, 505, 'box20', 85, 86);
     }
   </script>
   <style type="text/css" media="screen">

     body {
       margin: 0;
       border: 1px solid black;
       cursor: crosshair;
     }

     .test {
       position: absolute;
       height: 200px;
       width: 200px;
       border: 1px solid black;
       margin: 20px;
     }

 	.one {
       top: 1px;
 	  left: 1px;
 	}
 	.two {
 	  top: 1px;
 	  left: 247px;
 	}
 	.three {
 	  top: 1px;
 	  left: 493px;
 	}
 	.four {
 	  top: 247px;
 	  left: 1px;
 	}
 	.five {
 	  top: 247px;
 	  left: 247px;
 	}
 	.six {
 	  top: 247px;
 	  left: 493px;
 	}

     .box {
       height: 100px;
       width: 100px;
       -webkit-box-sizing: border-box;
       background-color: #DDD;
       border: 1px solid black;
     }

     .box:hover {
       outline: 3px solid orange;
     }

     .container {
       height: 140px;
       width: 140px;
       margin: 20px;
       border: 1px solid black;
       -webkit-box-sizing: border-box;
       -webkit-perspective: 400;
     }

     .transformed-3d {
       position: relative;
       height: 100px;
       width: 100px;
       padding: 20px;
       margin: 20px;
       border: 1px solid black;
       background-color: #81AA8A;
       -webkit-transform-style: preserve-3d;
       -webkit-box-sizing: border-box;
       transform: rotateY(-30deg);
     }

     .transformed-flat {
       position: relative;
       height: 100px;
       width: 100px;
       padding: 20px;
       margin: 20px;
       border: 1px solid black;
       background-color: #AA7994;
       -webkit-transform-style: flat;
       -webkit-box-sizing: border-box;
       transform: rotateY(-30deg);
     }

     .inner {
       background-color: blue;
       height: 90px;
       width: 90px;
     }

     #results {
       position: absolute;
       left: 30px;
       top: 500px;
     }

     #mousepos {
       position: absolute;
       left: 430px;
       top: 550px;
       color: gray;
       font-size: smaller;
     }
   </style>
 </head>
 <body onclick="clicked(event)">

 <div id="results"></div>

 <div class="test one">
   <!-- Simple transformed div in perpsective; preserve-3d on leaf -->
   <div class="container box" id="box1">
     <div class="transformed-3d box" id="box2">
     </div>
   </div>
 </div>

 <div class="test two">
   <!-- Transformed, preserve-3d div in perpsective with non-layer child -->
   <div class="container box" id="box3">
     <div class="transformed-3d box" id="box4">
       <div class="inner box" id="box5">
       </div>
     </div>
   </div>
 </div>

 <div class="test three">
   <!-- Transformed, preserve-3d div in perpsective with layer child -->
   <div class="container box" id="box6">
     <div class="transformed-3d box" id="box7">
       <div class="inner box" style="position: relative" id="box8">
       </div>
     </div>
   </div>
 </div>
 <div class="test four">
   <!-- Nested transformed, preserve-3d divs in perpsective -->
   <div class="container box" id="box9">
     <div class="transformed-3d box" id="box10">
       <div class="transformed-3d box" style="transform: translateZ(20px) rotateY(50deg)" id="box11">
       </div>
     </div>
   </div>
 </div>
 <div class="test five">
   <!-- Transformed, preserve-3d div in perpsective with non-layer child -->
   <div class="container box" id="box12">
     <div class="transformed-3d box" id="box13">
       <div class="transformed-3d box" style="transform: translateZ(10px) rotateY(50deg)" id="box14">
         <div class="inner box" id="box15">
         </div>
       </div>
     </div>
   </div>
 </div>
 <div class="test six">
   <!-- Flatten in the middle of 3d -->
   <div class="container box" id="box16">
     <div class="transformed-3d box" id="box17">
       <div class="transformed-3d box" style="transform: translateZ(10px) rotateY(20deg)" id="box18">
         <div class="transformed-flat box" style="-webkit-transform-style: flat; transform: rotateX(-20deg)" id="box19">
           <div class="inner box" id="box20">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

 <div id="mousepos"></div>

 </body>
 </html>
	<html>
	<head>
	<title>Point mapping through 3D transform hierarchies</title>
	<script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">

	function test()
	{
	// In non-test mode, show the mouse coords for testing
	if (!window.testRunner)
	document.body.addEventListener('mousemove', mousemoved, false);

	dispatchEvent(44, 44, 'box1', 1, 1);
	dispatchEvent(74, 68, 'box2', 1, 1);
	dispatchEvent(157, 164, 'box2', 97, 97);

	dispatchEvent(320, 68, 'box4', 1, 1);
	dispatchEvent(336, 87, 'box5', 1, 1);

	dispatchEvent(582, 87, 'box8', 1, 1);
	dispatchEvent(658, 174, 'box8', 85, 85);

	dispatchEvent(74, 314, 'box10', 1, 1);
	dispatchEvent(91, 351, 'box11', 1, 1);

	dispatchEvent(320, 314, 'box13', 1, 1);
	dispatchEvent(343, 351, 'box14', 1, 1);
	dispatchEvent(365, 375, 'box15', 1, 1);

	dispatchEvent(566, 314, 'box17', 1, 1);
	dispatchEvent(587, 352, 'box18', 1, 1);
	dispatchEvent(629, 401, 'box19', 1, 1);
	dispatchEvent(653, 422, 'box20', 1, 1);
	dispatchEvent(745, 505, 'box20', 85, 86);
	}
	</script>
	<style type="text/css" media="screen">

	body {
	margin: 0;
	border: 1px solid black;
	cursor: crosshair;
	}

	.test {
	position: absolute;
	height: 200px;
	width: 200px;
	border: 1px solid black;
	margin: 20px;
	}

	.one {
	top: 1px;
	left: 1px;
	}
	.two {
	top: 1px;
	left: 247px;
	}
	.three {
	top: 1px;
	left: 493px;
	}
	.four {
	top: 247px;
	left: 1px;
	}
	.five {
	top: 247px;
	left: 247px;
	}
	.six {
	top: 247px;
	left: 493px;
	}

	.box {
	height: 100px;
	width: 100px;
	-webkit-box-sizing: border-box;
	background-color: #DDD;
	border: 1px solid black;
	}

	.box:hover {
	outline: 3px solid orange;
	}

	.container {
	height: 140px;
	width: 140px;
	margin: 20px;
	border: 1px solid black;
	-webkit-box-sizing: border-box;
	-webkit-perspective: 400;
	}

	.transformed-3d {
	position: relative;
	height: 100px;
	width: 100px;
	padding: 20px;
	margin: 20px;
	border: 1px solid black;
	background-color: #81AA8A;
	-webkit-transform-style: preserve-3d;
	-webkit-box-sizing: border-box;
	transform: rotateY(-30deg);
	}

	.transformed-flat {
	position: relative;
	height: 100px;
	width: 100px;
	padding: 20px;
	margin: 20px;
	border: 1px solid black;
	background-color: #AA7994;
	-webkit-transform-style: flat;
	-webkit-box-sizing: border-box;
	transform: rotateY(-30deg);
	}

	.inner {
	background-color: blue;
	height: 90px;
	width: 90px;
	}

	#results {
	position: absolute;
	left: 30px;
	top: 500px;
	}

	#mousepos {
	position: absolute;
	left: 430px;
	top: 550px;
	color: gray;
	font-size: smaller;
	}
	</style>
	</head>
	<body onclick="clicked(event)">

	<div id="results"></div>

	<div class="test one">
	<!-- Simple transformed div in perpsective; preserve-3d on leaf -->
	<div class="container box" id="box1">
	<div class="transformed-3d box" id="box2">
	</div>
	</div>
	</div>

	<div class="test two">
	<!-- Transformed, preserve-3d div in perpsective with non-layer child -->
	<div class="container box" id="box3">
	<div class="transformed-3d box" id="box4">
	<div class="inner box" id="box5">
	</div>
	</div>
	</div>
	</div>

	<div class="test three">
	<!-- Transformed, preserve-3d div in perpsective with layer child -->
	<div class="container box" id="box6">
	<div class="transformed-3d box" id="box7">
	<div class="inner box" style="position: relative" id="box8">
	</div>
	</div>
	</div>
	</div>
	<div class="test four">
	<!-- Nested transformed, preserve-3d divs in perpsective -->
	<div class="container box" id="box9">
	<div class="transformed-3d box" id="box10">
	<div class="transformed-3d box" style="transform: translateZ(20px) rotateY(50deg)" id="box11">
	</div>
	</div>
	</div>
	</div>
	<div class="test five">
	<!-- Transformed, preserve-3d div in perpsective with non-layer child -->
	<div class="container box" id="box12">
	<div class="transformed-3d box" id="box13">
	<div class="transformed-3d box" style="transform: translateZ(10px) rotateY(50deg)" id="box14">
	<div class="inner box" id="box15">
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="test six">
	<!-- Flatten in the middle of 3d -->
	<div class="container box" id="box16">
	<div class="transformed-3d box" id="box17">
	<div class="transformed-3d box" style="transform: translateZ(10px) rotateY(20deg)" id="box18">
	<div class="transformed-flat box" style="-webkit-transform-style: flat; transform: rotateX(-20deg)" id="box19">
	<div class="inner box" id="box20">
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div id="mousepos"></div>

	</body>
	</html>