<style>
postive-z-above,
postive-z-below,
zero-z-above,
zero-z-below,
no-z-above,
no-z-below,
postive-z-after {
  position: absolute;
  display: flex;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
}

no-z-below {
  top: 50px;
  background-color: green;
}
zero-z-above {
  z-index: 0;
  top: 100px;
  background-color: red;
}
zero-z-below {
  z-index: 0;
  top: 150px;
  background-color: salmon;
}
postive-z-above {
  z-index: 1;
  top: 200px;
  background-color: yellow;
}
postive-z-below {
  z-index: 1;
  top: 250px;
  background-color: pink;
}
postive-z-after {
  z-index: 1;
  top: 300px;
  background-color: orange;
}
</style>
<postive-z-above layer yellow></postive-z-above>
<postive-z-below layer pink></postive-z-below>
<no-z-above no-layer blue></no-z-above>
<no-z-below no-layer green></no-z-below>
<zero-z-above layer red></zero-z-above>
<zero-z-below layer salmon></zero-z-below>
<postive-z-after layer orange></postive-z-after>
<script>
import "../resources/third_party/unittest/unittest.dart";
import "../resources/unit.dart";

import "dart:sky";

void main() {
  initUnit();

  test("should hit test top item", () {
    expect(document.elementFromPoint(100, 25).tagName, equals('no-z-above'));
  });

  test("should hit test second", () {
    expect(document.elementFromPoint(100, 75).tagName, equals('no-z-below'));
  });

  test("should hit test third", () {
    expect(document.elementFromPoint(100, 125).tagName, equals('zero-z-above'));
  });

  test("should hit test fourth", () {
    expect(document.elementFromPoint(100, 175).tagName, equals('zero-z-below'));
  });

  test("should hit test fifth", () {
    expect(document.elementFromPoint(100, 225).tagName, equals('postive-z-above'));
  });

  test("should hit test sixth", () {
    expect(document.elementFromPoint(100, 275).tagName, equals('postive-z-below'));
  });

  test("should hit test seventh", () {
    expect(document.elementFromPoint(100, 325).tagName, equals('postive-z-after'));
  });
}
</script>