<!doctype html>
<html id="html">
<head>
<title>elementsFromPoint hit-testing with negative and positive z-index</title>
<style>
#container {
    width: 200px;
    height: 200px;
    background: beige;
    transform: translateZ(1px);
    position: absolute;
}

a {
    width: 200px;
    height: 200px;
    display: block;
    position: absolute;
}

#back {
    transform: translateZ(-10px);
    z-index: -2;
}

#front {
    transform: translateZ(10px);
    z-index: 2;
}

#results {
    position: absolute;
    top: 250px;
}

</style>
</head>
<body id="body">
<div id="container">
    <a id="back"></a>
    <a id="front"></a>
    <a id="middle"></a>
</div>

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

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

  let elements = document.elementsFromPoint(100, 100);
  let result = "";
  elements.forEach((elt, i) => {
    result += elt.id;
    if (i < elements.length - 1) {
      result += " < ";
    }
  });
  let output = document.getElementById('results');
  if (result == "front < middle < back < container < html")
    output.textContent = "SUCCESS: Hit test elements in correct order - " + result;
  else
    output.textContent = "FAIL: Hit test elements in incorrect order - " + result;

</script>
</body>
</html>
