Added offset document measurement to Element.

tests/html/element_test.dart

Index: tests/html/element_test.dart
diff --git a/tests/html/element_test.dart b/tests/html/element_test.dart
index 353733501166435b43a97792b189c1d0a43994aa..73c68f738222d7abbaf7774e5b93fe4f61e6dcef 100644
--- a/tests/html/element_test.dart
+++ b/tests/html/element_test.dart
@@ -59,7 +59,7 @@ main() {
       final container = new Element.tag("div");
       container.style.position = 'absolute';
       container.style.top = '8px';
-      container.style.left = '8px';
+      container.style.left = '9px';
       final element = new Element.tag("div");
       element.style.width = '200px';
       element.style.height = '200px';
@@ -72,8 +72,11 @@ main() {
       expect(element.offset.height, greaterThan(100));
       expect(element.scrollWidth, greaterThan(100));
       expect(element.scrollHeight, greaterThan(100));
-      expect(element.getBoundingClientRect().left, 8);
+      expect(element.getBoundingClientRect().left, 9);
       expect(element.getBoundingClientRect().top, 8);
+
+      expect(element.documentOffset.x, 9);
+      expect(element.documentOffset.y, 8);
       container.remove();
     });
   });
@@ -725,4 +728,149 @@ main() {
       expect(range[1], isInputElement);
     });
   });
+  void initPage() {
+    /* Set up the following hierarchy:
+    <ul class="level-1">

[Jennifer Messerly, 2013/07/25 02:22:09]

Parse this from a mutliline string literal with `new Element.html`? That way the
code stays in sync with the comment :)

+      <li class="item-i">I</li>
+      <li class="item-ii" style="position: relative; top: 4px;">II
+        <ul class="level-2">
+          <li class="item-a">A</li>
+          <li class="item-b"
+              style="position: relative; top: 20px; left: 15px;">B
+            <ul class="level-3">
+              <li class="item-1">1</li>
+              <li class="item-2">2</li>
+              <li class="item-3">3</li>
+            </ul>
+          </li>
+          <li class="item-c">C</li>
+        </ul>
+      </li>
+      <li class="item-iii">III</li>
+    </ul> */
+    var level1 = new UListElement()
+      ..classes.add('level-1')
+      ..children.add(new LIElement()..innerHtml = 'I');
+    var itemii = new LIElement()
+      ..classes.add('item-ii')
+      ..style.position = 'relative'
+      ..style.top = '4px'
+      ..innerHtml = 'II';
+    level1.children.add(itemii);
+    var level2 = new UListElement();
+    itemii.children.add(level2);
+    var itema = new LIElement()
+      ..classes.add('item-a')
+      ..innerHtml = 'A';
+    var item1 = new LIElement()
+      ..classes.add('item-1')
+      ..innerHtml = '1';
+    var item2 = new LIElement()
+      ..classes.add('item-2')
+      ..innerHtml = '2';
+    var level3 = new UListElement()
+      ..children.addAll([item1, item2]);
+    var itemb = new LIElement()
+      ..classes.add('item-b')
+      ..style.position = 'relative'
+      ..style.top = '20px'
+      ..style.left = '150px'
+      ..innerHtml = 'B'
+      ..children.add(level3);
+    level2.children.addAll([itema, itemb, new LIElement()..innerHtml = 'C']);
+    document.body.append(level1);
+
+    var bar = new DivElement()..classes.add('bar');
+    var style = bar.style;
+    style..position = 'absolute'
+         ..top = '8px'
+         ..left = '90px';
+    var baz = new DivElement()..classes.add('baz');
+    style = baz.style;
+    style..position = 'absolute'
+         ..top = '600px'
+         ..left = '7000px';
+    bar.children.add(baz);
+
+    var quux = new DivElement()..classes.add('quux');
+    var qux = new DivElement()
+      ..classes.add('qux')
+      ..children.add(quux);
+
+    document.body.append(bar);
+    document.body.append(qux);
+  }
+
+  group('offset', () {
+    setUp(initPage);
+
+    test('offsetTo', () {
+      var itema = query('.item-a');
+      var itemb = query('.item-b');
+      var item1 = query('.item-1');
+      var itemii = query('.item-ii');
+      var level1 = query('.level-1');
+      var baz = query('.baz');
+      var bar = query('.bar');
+      var qux = query('.qux');
+      var quux = query('.quux');
+
+      var point = itema.offsetTo(itemii);
+      expect(point.x, 40);
+      expect(point.y, inInclusiveRange(17, 20));
+
+      expect(baz.offsetTo(bar).x, 7000);
+      expect(baz.offsetTo(bar).y, inInclusiveRange(599, 604));
+
+      qux.style.position = 'fixed';
+      expect(quux.offsetTo(qux).x, 0);
+      expect(quux.offsetTo(qux).y, 0);
+
+      point = item1.offsetTo(itemb);
+      expect(point.x, 40);
+      expect(point.y, inInclusiveRange(17, 20));
+      point = itemb.offsetTo(itemii);
+      expect(point.x, 190);
+      expect(point.y, inInclusiveRange(54, 60));
+      point = item1.offsetTo(itemii);
+      expect(point.x, 230);
+      expect(point.y, inInclusiveRange(74, 80));
+    });
+
+    test('documentOffset', () {
+      var bar = query('.bar');
+      var baz = query('.baz');
+      var qux = query('.qux');
+      var quux = query('.quux');
+      var itema = query('.item-a');
+      var itemb = query('.item-b');
+      var item1 = query('.item-1');
+      var itemii = query('.item-ii');
+
+      expect(itema.documentOffset.x, 88);
+      expect(itema.documentOffset.y, inInclusiveRange(119, 124));
+
+      expect(itemii.documentOffset.x, 48);
+      expect(itemii.documentOffset.y, inInclusiveRange(101, 105));
+
+      expect(itemb.documentOffset.x, 238);
+      expect(itemb.documentOffset.y, inInclusiveRange(157, 165));
+
+      expect(item1.documentOffset.x, 278);
+      expect(item1.documentOffset.y, inInclusiveRange(175, 182));
+
+      expect(bar.documentOffset.x, 90);
+      expect(bar.documentOffset.y, 8);
+
+      expect(baz.documentOffset.x, 7090);
+      expect(baz.documentOffset.y, 608);
+
+      expect(qux.documentOffset.x, 8);
+      expect(qux.documentOffset.y, inInclusiveRange(222, 232));
+
+      expect(quux.documentOffset.x, 8);
+      expect(quux.documentOffset.y, inInclusiveRange(222, 232));
+    });
+  });
+
 }