<!doctype html>
<title>Hit testing preserve-3d + negative z-index ::after</title>
<style>
* {
	position: relative;
}

#container {
    width: 200px;
    height: 200px
	display: flex;
	background: beige;
    align-items: center;
	transform-style: preserve-3d;
}

#container::after {
    width: 200px;
    height: 200px;
	content: "";
	display: block;
	position: absolute;
	background: aliceblue;
	top: 0%;
	z-index: -1;
}

#hit {
    display: block;
    width: 200px;
    height: 200px;
}

</style>
<body>
<div id="container">
    <a id="hit" href="2">Hit Me</a>
</div>

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

<script type="text/javascript" charset="utf-8">
  if (window.testRunner)
    testRunner.dumpAsText();

  var hit = document.elementFromPoint(100, 100);
  var results = document.getElementById('results');
  if (hit == document.getElementById('hit'))
    results.innerHTML = 'Hit correct target: PASSED';
  else
    results.innerHTML = 'Failed to find correct target: FAIL';
</script>
</body>
