Provide cross-browser Rects for box model dimensions for Elements.

tests/html/element_dimensions_test.dart

+// Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file

[Jennifer Messerly, 2013/07/16 22:03:16]

2013

[Emily Fortuna, 2013/07/18 22:45:02]

Done.

+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file
+
+library elementDimensionsTest;

[Jennifer Messerly, 2013/07/16 22:03:16]

hmm, i'm not sure if we have a style guide here, but personally I try to have it
match the library name, e.g. "library element_dimensions_test" ... fwiw, just
ran this by Bob and apparently that style is in use elsewhere too. Tho the
official style guide doesn't say anything.

[Emily Fortuna, 2013/07/18 22:45:02]

Done.

+import 'package:unittest/unittest.dart';
+import 'package:unittest/html_config.dart';
+import 'dart:html';
+
+main() {
+  useHtmlConfiguration();
+
+  var isElement = predicate((x) => x is Element, 'is an Element');
+  var isCanvasElement =
+      predicate((x) => x is CanvasElement, 'is a CanvasElement');
+  var isDivElement = predicate((x) => x is DivElement, 'is a isDivElement');
+
+  var div = new DivElement();
+  div.id = 'test';
+  document.body.nodes.add(div);
+
+  void initDiv() {

[Jennifer Messerly, 2013/07/16 22:03:16]

maybe this should be a "setUp(() { ... })"
http://api.dartlang.org/docs/releases/latest/unittest.html#setUp?

[Emily Fortuna, 2013/07/18 22:45:02]

Done.

+    div.style.padding = '4px';
+    div.style.border = '0px solid #fff';

[Jennifer Messerly, 2013/07/16 22:03:16]

use cascades? :)

[Emily Fortuna, 2013/07/18 22:45:02]

Done. I hadn't originally because what I really wanted to do was write:
(div.style)..padding = blah
             .. border = foo
etc, but our method cascades aren't that smart. :-( Anyway, I updated it.

+    div.style.margin = '6px';
+    div.style.height = '10px';
+    div.style.width = '11px';
+    div.style.boxSizing = 'content-box';
+    div.style.overflow = 'visible';
+  }
+
+  div.nodes.addAll([
+      new DivElement(),
+      new CanvasElement(),
+      new DivElement(),
+      new Text('Hello'),
+      new DivElement(),
+      new Text('World'),
+      new CanvasElement()]);
+
+  test('contentEdge.height', () {
+    initDiv();
+    var all1 = queryAll('#test');
+
+    expect(all1.contentEdge.height, 10);
+    expect(all1[0].getComputedStyle().getPropertyValue('height'), '10px');
+
+    all1.contentEdge.height = new Dimension.px(600);
+    expect(all1.contentEdge.height, 600);
+    expect(all1[0].getComputedStyle().getPropertyValue('height'), '600px');
+    all1[0].style.visibility = 'hidden';
+    expect(all1.contentEdge.height, 600);
+    all1[0].style.visibility = 'visible';
+
+    // If user passes in a negative number, set height to 0.
+    all1.contentEdge.height = new Dimension.px(-1);
+    expect(all1.contentEdge.height, 0);
+
+    // Adding padding or border shouldn't affect the height for non-box-sizing.
+    div.style.padding = '20pc';
+    expect(all1.contentEdge.height, 0);
+    div.style.border = '2px solid #fff';
+    expect(all1.contentEdge.height, 0);
+
+    initDiv();

[Jennifer Messerly, 2013/07/16 22:03:16]

the re-init here makes me wonder if it should be a separate test case

[Emily Fortuna, 2013/07/18 22:45:02]

split into individual tests.

+    div.style.boxSizing = 'border-box';
+    expect(all1.contentEdge.height, 2);
+    div.style.padding = '20pc';
+    expect(all1.contentEdge.height, 0);
+    div.style.border = '2px solid #fff';
+    expect(all1.contentEdge.height, 0);
+  });
+
+  test('contentEdge.width', () {
+    initDiv();
+    var all1 = queryAll('#test');
+    expect(all1.contentEdge.width, 11);
+    expect(all1[0].getComputedStyle().getPropertyValue('width'), '11px');
+
+    all1.contentEdge.width = new Dimension.px(600);
+    expect(all1.contentEdge.width, 600);
+    expect(all1[0].getComputedStyle().getPropertyValue('width'), '600px');
+    all1[0].style.visibility = 'hidden';
+    expect(all1.contentEdge.width, 600);
+    all1[0].style.visibility = 'visible';
+
+    // If user passes in a negative number, set width to 0.
+    all1.contentEdge.width = new Dimension.px(-1);
+    expect(all1.contentEdge.width, 0);
+
+    // Adding padding or border shouldn't affect the width.
+    div.style.padding = '20pc';
+    expect(all1.contentEdge.width, 0);
+    div.style.border = '2px solid #fff';
+    expect(all1.contentEdge.width, 0);
+
+    initDiv();
+    div.style.boxSizing = 'border-box';
+    expect(all1.contentEdge.width, 3);
+    div.style.padding = '20pc';
+    expect(all1.contentEdge.width, 0);
+    div.style.border = '2px solid #fff';
+    expect(all1.contentEdge.width, 0);
+
+  });

[Jennifer Messerly, 2013/07/16 22:03:16]

newline after

[Emily Fortuna, 2013/07/18 22:45:02]

Done.

+  test('paddingEdge.height', () {
+    initDiv();
+
+    var all1 = queryAll('#test');
+    expect(all1.paddingEdge.height, 18);
+    all1[0].style.visibility = 'hidden';
+    expect(all1.paddingEdge.height, 18);
+    all1[0].style.visibility = 'visible';
+
+    // Adding border shouldn't affect the paddingEdge.height.
+    div.style.border = '2px solid #fff';
+    expect(all1.paddingEdge.height, 18);
+    // Adding padding should affect the paddingEdge.height.
+    div.style.padding = '20pc';
+    expect(all1.paddingEdge.height, 650);
+
+    initDiv();
+    div.style.boxSizing = 'border-box';
+    expect(all1.paddingEdge.height, 10);
+    div.style.padding = '20pc';
+    expect(all1.paddingEdge.height, 640);
+    div.style.border = '2px solid #fff';
+    expect(all1.paddingEdge.height, 640);
+  });
+
+  test('paddingEdge.width', () {
+    initDiv();
+    var all1 = queryAll('#test');
+    expect(all1.paddingEdge.width, 19);
+    all1[0].style.visibility = 'hidden';
+    expect(all1.paddingEdge.width, 19);
+    all1[0].style.visibility = 'visible';
+
+    // Adding border shouldn't affect the width.
+    div.style.border = '2px solid #fff';
+    expect(all1.paddingEdge.width, 19);
+
+    // Adding padding should affect the paddingEdge.width.
+    div.style.padding = '20pc';
+    expect(all1.paddingEdge.width, 651);
+
+    initDiv();
+    div.style.boxSizing = 'border-box';
+    expect(all1.paddingEdge.width, 11);
+    div.style.padding = '20pc';
+    expect(all1.paddingEdge.width, 640);
+    div.style.border = '2px solid #fff';
+    expect(all1.paddingEdge.width, 640);
+  });
+
+  test('borderEdge.height and marginEdge.height', () {
+    initDiv();
+
+    var all1 = queryAll('#test');
+    expect(div.borderEdge.height, 18);
+    expect(div.marginEdge.height, 30);
+    expect(all1.borderEdge.height, 18);
+    expect(all1.marginEdge.height, 30);
+    all1[0].style.visibility = 'hidden';
+    expect(all1.borderEdge.height, 18);
+    all1[0].style.visibility = 'visible';
+
+    // Adding border should affect the borderEdge.height.
+    div.style.border = '2px solid #fff';
+    expect(all1.borderEdge.height, 22);
+    // Adding padding should affect the borderEdge.height.
+    div.style.padding = '20pc';
+    expect(all1.borderEdge.height, 654);
+    expect(all1.marginEdge.height, 666);
+
+    initDiv();
+    div.style.boxSizing = 'border-box';
+    expect(all1.borderEdge.height, 10);
+    expect(all1.marginEdge.height, 22);
+    div.style.padding = '20pc';
+    expect(all1.borderEdge.height, 640);
+    expect(all1.marginEdge.height, 652);
+    div.style.border = '2px solid #fff';
+    expect(all1.borderEdge.height, 644);
+    expect(all1.marginEdge.height, 656);
+  });
+
+  test('borderEdge.width and marginEdge.width', () {
+    initDiv();
+    var all1 = queryAll('#test');
+    expect(all1.borderEdge.width, 19);
+    expect(all1.marginEdge.width, 31);
+
+    // Adding border should affect the width.
+    div.style.border = '2px solid #fff';
+    expect(all1.borderEdge.width, 23);
+
+    // Adding padding should affect the borderEdge.width.
+    div.style.padding = '20pc';
+    expect(all1.borderEdge.width, 655);
+    expect(all1.marginEdge.width, 667);
+
+    initDiv();
+    div.style.boxSizing = 'border-box';
+    expect(all1.borderEdge.width, 11);
+    expect(all1.marginEdge.width, 23);
+    div.style.padding = '20pc';
+    expect(all1.borderEdge.width, 640);
+    expect(all1.marginEdge.width, 652);
+    div.style.border = '2px solid #fff';
+    expect(all1.borderEdge.width, 644);
+    expect(all1.marginEdge.width, 656);
+  });
+
+  test('left and top', () {
+    initDiv();
+    div.style.border = '1px solid #fff';
+    div.style.margin = '6px 7px';
+    div.style.padding = '4px 5px';
+    var all1 = queryAll('#test');
+
+    expect(all1.borderEdge.left, all1[0].getBoundingClientRect().left);
+    expect(all1.borderEdge.top, all1[0].getBoundingClientRect().top);
+
+    expect(all1.contentEdge.left, all1[0].getBoundingClientRect().left + 1 + 5);
+    expect(all1.contentEdge.top, all1[0].getBoundingClientRect().top + 1 + 4);
+
+    expect(all1.marginEdge.left, all1[0].getBoundingClientRect().left - 7);
+    expect(all1.marginEdge.top, all1[0].getBoundingClientRect().top - 6);
+
+    expect(all1.paddingEdge.left, all1[0].getBoundingClientRect().left + 1);
+    expect(all1.paddingEdge.top, all1[0].getBoundingClientRect().top + 1);
+  });
+
+  test('setHeight ElementList', () {
+    initDiv();
+    div.style.border = '1px solid #fff';
+    div.style.margin = '6px 7px';
+    div.style.padding = '4px 5px';
+    var all1 = queryAll('div');
+    all1.contentEdge.height = new Dimension.px(200);
+    for (Element elem in all1) {
+      expect(elem.contentEdge.height, 200);
+    }
+    all1.contentEdge.height = new Dimension.px(10);
+    for (Element elem in all1) {
+      expect(elem.contentEdge.height, 10);
+    }
+  });
+}