sky/tests/layout/document-elementFromPoint.sky

<sky>
<style>
foo, parent { width: 100px; height: 100px; background: blue; }
bar { width: 100px; height: 100px; background: purple; }
parent { display: paragraph; }
child { background: salmon; }
canvas { height: 50px; background-color: pink; }
</style>
<foo /><bar />
<parent>
  <child>Foo bar</child>
</parent>
<canvas />
<script>
import "../resources/third_party/unittest/unittest.dart";
import "../resources/unit.dart";

import "dart:sky";

void main() {
  initUnit();

  test("should hit test", () {
    // FIXME: We should have much better hit-testing coverage, at least:
    // inline content (both sections of a wrapped run)
    // text node
    // flex box
    // display: paragraph
    // position: absolute
    // position: relative
    // z-order (missing, zero, positive and negative)
    expect(document.elementFromPoint(50, 50).tagName, equals('foo'));
    expect(document.elementFromPoint(50, 150).tagName, equals('bar'));
    expect(document.elementFromPoint(150, 50).tagName, equals('sky'));
  });

  void hitTestWithChildren() {
    expect(document.elementFromPoint(50, 210).tagName, equals('child'));
    // Right of the <child> inline.
    expect(document.elementFromPoint(95, 210).tagName, equals('parent'));
    // Below the <child> inline.
    expect(document.elementFromPoint(50, 275).tagName, equals('parent'));
  }

  test("should hit test child and parent", () {
    hitTestWithChildren();
  });

  test("should hit test child with layered parent", () {
    document.querySelector('parent').style.setProperty("transform", "translate3d(0, 0, 0)");
    hitTestWithChildren();
  });

  test("should hit test transformed child", () {
    document.querySelector('child').style.setProperty("transform", "translate3d(100px, 0, 0)");
    expect(document.elementFromPoint(50, 210).tagName, equals('parent'));
    expect(document.elementFromPoint(150, 210).tagName, equals('child'));
  });

  test("should hit test canvas", () {
    expect(document.elementFromPoint(50, 310).tagName, equals('canvas'));
  });
}
</script>
</sky>