css/css-transforms/3d-point-mapping-2-transforminterop.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <title>More point mapping through 3D transform hierarchies</title>
 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>

 <style type="text/css" media="screen">
   body {
     margin: 0;
     border: 1px solid black;
   }

   .test {
     display: inline-block;
     height: 200px;
     width: 200px;
     border: 1px solid black;
     margin: 20px;
   }

   #box1, #box5, #box9 {
     height: 140px;
     width: 140px;
     margin: 20px;
     background-color: #DDD;
     border: 1px solid black;
     box-sizing: border-box;
     perspective: 400px;
   }

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

   #box3 {
     position: relative;
     height: 100px;
     width: 100px;
     padding: 20px;
     margin: 20px;
     border: 1px solid black;
     background-color: #81AA8A;
     transform-style: preserve-3d;
     box-sizing: border-box;
   }

   #box4, #box8, #box12 {
     height: 90px;
     width: 90px;
     background-color: blue;
     border: 1px solid black;
     box-sizing: border-box;
     transform: rotateY(30deg);
   }

   #box7 {
     position: relative;
     padding-left: 20px;
     height: 100px;
     width: 100px;
     box-sizing: border-box;
     background-color: #DDD;
     border: 1px solid black;
   }

   #box11 {
     padding-left: 20px;
     height: 100px;
     width: 100px;
     box-sizing: border-box;
     background-color: #DDD;
     border: 1px solid black;
   }

   [id^="box"]:hover {
     outline: 3px solid orange;
   }
 </style>

 <body>

 <div class="test">
   <!-- preserve-3d element with no transform-->
   <div id="box1">
     <div id="box2">
       <div id="box3">
         <div id="box4">
         </div>
       </div>
     </div>
   </div>
 </div>

 <div class="test">
   <!-- layer with no transform-->
   <div id="box5">
     <div id="box6">
       <div id="box7">
         <div id="box8">
         </div>
       </div>
     </div>
   </div>
 </div>

 <div class="test">
   <!-- non-layer with no transform-->
   <div id="box9">
     <div id="box10">
       <div id="box11">
         <div id="box12">
         </div>
       </div>
     </div>
   </div>
 </div>

 <script>
   class Point {
     constructor(x, y) {
       this.x = x;
       this.y = y;
     }
   };
   // Each test case defines four test points near the corners of an element area.
   // - Point 1: Top-left
   // - Point 2: Top-right
   // - Point 3: Bottom-left
   // - Point 4: Bottom-right
   const tests = [{
     expectedElemId: 'box1',
       points: [
         new Point(68, 66), // Hits box1 due to box2's transformation.
         new Point(175, 45),
         new Point(62, 155), // Hits box1 due to box2's transformation.
         new Point(100, 175),
       ]
     },
     {
       expectedElemId: 'box2',
       points: [
         new Point(75, 70),
         new Point(155, 63),
         new Point(75, 155),
         new Point(100, 156), // Hits box2 due to box3 preserving parent's transformed space.
       ]
     },
     {
       expectedElemId: 'box3',
       points: [
         new Point(108, 106),
         new Point(198, 106),
         new Point(108, 198),
         // Bottom-right area is overlapped by box4.
       ]
     },
     {
       expectedElemId: 'box4',
       points: [
         new Point(120, 128), // Hits box3 if box4 were untransformed.
         new Point(210, 128),
         new Point(120, 198), // Hits box3 if box4 were untransformed.
         new Point(210, 215),
       ]
     },
     {
       expectedElemId: 'box5',
       points: [
         new Point(312, 67), // Hits box5 due to box6's transformation.
         new Point(423, 47),
         new Point(312, 155), // Hits box5 due to box6's transformation.
         new Point(331, 175), // Hits box5 due to box7 preserving parent's transformed space.
       ]
     },
     {
       expectedElemId: 'box6',
       points: [
         new Point(328, 86), // Hits box6 due to box7 preserving parent's transformed space.
         new Point(400, 63),
         new Point(328, 151), // Hits box6 due to box7 preserving parent's transformed space.
         // The bottom-right area is overlapped by box7.
       ]
     },
     {
       expectedElemId: 'box7',
       points: [
         new Point(354, 87), // Hits box7 due to box8's transformation.
         // The top-right area is overlapped by box8.
         new Point(354, 171), // Hits box7 due to box8's transformation.
         new Point(421, 185),
       ]
     },
     {
       expectedElemId: 'box8',
       points: [
         new Point(359, 87),
         new Point(428, 84),
         new Point(359, 168),
         new Point(428, 175),
       ]
     },
     {
       expectedElemId: 'box9',
       points: [
         new Point(556, 65), // Hits box9 due to box10's transformation.
         new Point(669, 46),
         new Point(556, 157), // Hits box9 due to box10's transformation.
         new Point(576, 174), // Hits box9 due to box11 preserving parent's transformed space.
       ]
     },
     {
       expectedElemId: 'box10',
       points: [
         new Point(568, 69),
         new Point(646, 62),
         new Point(568, 153),
         new Point(576, 154), // Hits box10 due to box11 preserving parent's transformed space.
       ]
     },
     {
       expectedElemId: 'box11',
       points: [
         new Point(600, 87), // Hits box11 due to box12's transformation.
         // The top-right area is overlapped by box12.
         new Point(600, 170),
         new Point(669, 185),
       ]
     },
     {
       expectedElemId: 'box12',
       points: [
         new Point(605, 87),
         new Point(673, 85),
         new Point(605, 170),
         new Point(675, 175),
       ]
     }
   ];

   tests.forEach(testcase => {
     test(t => {
       const expectedElem = document.getElementById(testcase.expectedElemId);
       for (const point of testcase.points) {
         const hitElem = document.elementFromPoint(point.x, point.y);
         assert_equals(hitElem, expectedElem,
           `point (${point.x}, ${point.y}) is inside element ${testcase.expectedElemId}`);
       }
     }, `${document.title}, hittesting ${testcase.expectedElemId})`);
   });
 </script>

 </html>
	<!DOCTYPE html>
	<title>More point mapping through 3D transform hierarchies</title>
	<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>

	<style type="text/css" media="screen">
	body {
	margin: 0;
	border: 1px solid black;
	}

	.test {
	display: inline-block;
	height: 200px;
	width: 200px;
	border: 1px solid black;
	margin: 20px;
	}

	#box1, #box5, #box9 {
	height: 140px;
	width: 140px;
	margin: 20px;
	background-color: #DDD;
	border: 1px solid black;
	box-sizing: border-box;
	perspective: 400px;
	}

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

	#box3 {
	position: relative;
	height: 100px;
	width: 100px;
	padding: 20px;
	margin: 20px;
	border: 1px solid black;
	background-color: #81AA8A;
	transform-style: preserve-3d;
	box-sizing: border-box;
	}

	#box4, #box8, #box12 {
	height: 90px;
	width: 90px;
	background-color: blue;
	border: 1px solid black;
	box-sizing: border-box;
	transform: rotateY(30deg);
	}

	#box7 {
	position: relative;
	padding-left: 20px;
	height: 100px;
	width: 100px;
	box-sizing: border-box;
	background-color: #DDD;
	border: 1px solid black;
	}

	#box11 {
	padding-left: 20px;
	height: 100px;
	width: 100px;
	box-sizing: border-box;
	background-color: #DDD;
	border: 1px solid black;
	}

	[id^="box"]:hover {
	outline: 3px solid orange;
	}
	</style>

	<body>

	<div class="test">
	<!-- preserve-3d element with no transform-->
	<div id="box1">
	<div id="box2">
	<div id="box3">
	<div id="box4">
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="test">
	<!-- layer with no transform-->
	<div id="box5">
	<div id="box6">
	<div id="box7">
	<div id="box8">
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="test">
	<!-- non-layer with no transform-->
	<div id="box9">
	<div id="box10">
	<div id="box11">
	<div id="box12">
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	class Point {
	constructor(x, y) {
	this.x = x;
	this.y = y;
	}
	};
	// Each test case defines four test points near the corners of an element area.
	// - Point 1: Top-left
	// - Point 2: Top-right
	// - Point 3: Bottom-left
	// - Point 4: Bottom-right
	const tests = [{
	expectedElemId: 'box1',
	points: [
	new Point(68, 66), // Hits box1 due to box2's transformation.
	new Point(175, 45),
	new Point(62, 155), // Hits box1 due to box2's transformation.
	new Point(100, 175),
	]
	},
	{
	expectedElemId: 'box2',
	points: [
	new Point(75, 70),
	new Point(155, 63),
	new Point(75, 155),
	new Point(100, 156), // Hits box2 due to box3 preserving parent's transformed space.
	]
	},
	{
	expectedElemId: 'box3',
	points: [
	new Point(108, 106),
	new Point(198, 106),
	new Point(108, 198),
	// Bottom-right area is overlapped by box4.
	]
	},
	{
	expectedElemId: 'box4',
	points: [
	new Point(120, 128), // Hits box3 if box4 were untransformed.
	new Point(210, 128),
	new Point(120, 198), // Hits box3 if box4 were untransformed.
	new Point(210, 215),
	]
	},
	{
	expectedElemId: 'box5',
	points: [
	new Point(312, 67), // Hits box5 due to box6's transformation.
	new Point(423, 47),
	new Point(312, 155), // Hits box5 due to box6's transformation.
	new Point(331, 175), // Hits box5 due to box7 preserving parent's transformed space.
	]
	},
	{
	expectedElemId: 'box6',
	points: [
	new Point(328, 86), // Hits box6 due to box7 preserving parent's transformed space.
	new Point(400, 63),
	new Point(328, 151), // Hits box6 due to box7 preserving parent's transformed space.
	// The bottom-right area is overlapped by box7.
	]
	},
	{
	expectedElemId: 'box7',
	points: [
	new Point(354, 87), // Hits box7 due to box8's transformation.
	// The top-right area is overlapped by box8.
	new Point(354, 171), // Hits box7 due to box8's transformation.
	new Point(421, 185),
	]
	},
	{
	expectedElemId: 'box8',
	points: [
	new Point(359, 87),
	new Point(428, 84),
	new Point(359, 168),
	new Point(428, 175),
	]
	},
	{
	expectedElemId: 'box9',
	points: [
	new Point(556, 65), // Hits box9 due to box10's transformation.
	new Point(669, 46),
	new Point(556, 157), // Hits box9 due to box10's transformation.
	new Point(576, 174), // Hits box9 due to box11 preserving parent's transformed space.
	]
	},
	{
	expectedElemId: 'box10',
	points: [
	new Point(568, 69),
	new Point(646, 62),
	new Point(568, 153),
	new Point(576, 154), // Hits box10 due to box11 preserving parent's transformed space.
	]
	},
	{
	expectedElemId: 'box11',
	points: [
	new Point(600, 87), // Hits box11 due to box12's transformation.
	// The top-right area is overlapped by box12.
	new Point(600, 170),
	new Point(669, 185),
	]
	},
	{
	expectedElemId: 'box12',
	points: [
	new Point(605, 87),
	new Point(673, 85),
	new Point(605, 170),
	new Point(675, 175),
	]
	}
	];

	tests.forEach(testcase => {
	test(t => {
	const expectedElem = document.getElementById(testcase.expectedElemId);
	for (const point of testcase.points) {
	const hitElem = document.elementFromPoint(point.x, point.y);
	assert_equals(hitElem, expectedElem,
	`point (${point.x}, ${point.y}) is inside element ${testcase.expectedElemId}`);
	}
	}, `${document.title}, hittesting ${testcase.expectedElemId})`);
	});
	</script>

	</html>