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; display: paragraph; }
canvas { height: 50px; background-color: pink; }
inline-flex { display: inline-flex; width: 50px; height: 50px; background: green; }
grand-child { width: 50px; height: 50px; transform: translate3d(100px, 0, 0); background: papayawhip; }
</style>
<foo /><bar />
<parent>
  <child>Foo bar</child>
  <inline-flex>
    <grand-child />
  </inline-flex>
</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["transform"] = "translate3d(0, 0, 0)";
    hitTestWithChildren();
  });

  test("should hit test transformed child", () {
    document.querySelector('parent').style["display"] = "flex";
    document.querySelector('child').style["transform"] = "translate3d(100px, 0, 0)";
    expect(document.elementFromPoint(50, 210).tagName, equals('parent'));
    expect(document.elementFromPoint(150, 210).tagName, equals('child'));
    expect(document.elementFromPoint(25, 240).tagName, equals('inline-flex'));
    // TODO(ojan): This is incorrect. It should hit grand-child.
    // This broke sometime before 4153b8a515d54275934d4244aaf2d5a7a8fe3333.
    expect(document.elementFromPoint(150, 240).tagName, equals('sky'));
  });

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