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

tools/dom/src/CssRectangle.dart

+// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
+// 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.
+
+part of html;
+
+class _ContentCssRect extends CssRect {

[Jacob, 2013/05/22 02:09:51]

These should just be in their own pub package unless you plan on exposing them
directly on Element.
These sorts of helper methods are really convenient but really hard to get right
in particular in the presence of newer CSS features like 3d transforms. Also,
these should probably all be num rather than int although some of our element
methods are int where that seems dangerous at this point. 

[Jennifer Messerly, 2013/07/10 21:05:56]

Isn't "hard to get right" an argument for trying to implement it once, in the
platform or a standard package everyone can use? :)

Perhaps this suggests we should we admit defeat on integrating jQuery into
dart:html, and instead introduce "$" top level function in a library, and change
our examples/conventions to use that instead?

[Emily Fortuna, 2013/07/10 21:40:16]

They are being exposed on Element.

+
+  _ContentCssRect(element) : super(element);
+  int get height => _element.offsetHeight +
+      _addOrSubtractToBoxModel(CssRect._HEIGHT, 'content');

[Jacob, 2013/05/22 02:09:51]

make 'content'  a string constant at least

+
+  int get width => _element.offsetWidth +
+      _addOrSubtractToBoxModel(CssRect._WIDTH, 'content');
+
+  /**
+   * Set the height to `newHeight`.
+   *
+   * Values of newHeight that are less than zero are converted to effectively
+   * setting the height to 0. This is equivalent to the `height`
+   * function in jQuery and the calculated `height` css value, converted to an
+   * int in pixels.
+   */
+  void set height(Dimension newHeight) {
+    if (newHeight.value < 0) newHeight = new Dimension.px(0);
+    _element.style.height = newHeight.toString();
+  }
+
+  /**
+   * Set the current computed width in pixels of this element.
+   *
+   * This is equivalent to the `width` function in jQuery and the calculated
+   * `width` css value, converted to a dimensionless int in pixels.
+   */
+  void set width(Dimension newWidth) {
+    if (newWidth.value < 0) newWidth = new Dimension.px(0);
+    _element.style.width = newWidth.toString();
+  }
+
+  int get left() => _element.getBoundingClientRect().left -
+      _addOrSubtractToBoxModel(['left'], 'content');
+  int get top() => _element.getBoundingClientRect().top -
+      _addOrSubtractToBoxModel(['top'], 'content');
+}
+
+class _ContentCssListRect extends _ContentCssRect {
+  List<Element> _elementList;
+
+  _ContentCssListRect(elementList) : super(elementList.first) {
+    _elementList = elementList;
+  }
+
+  /**
+   * Set the height to `newHeight`.
+   *
+   * Values of newHeight that are less than zero are converted to effectively
+   * setting the height to 0. This is equivalent to the `height`
+   * function in jQuery and the calculated `height` css value, converted to an
+   * int in pixels.
+   */
+  void set height(Dimension newHeight) {
+    _elementList.forEach((e) => e.contentEdge.height = newHeight);
+  }
+
+  /**
+   * Set the current computed width in pixels of this element.
+   *
+   * This is equivalent to the `width` function in jQuery and the calculated
+   * `width` css value, converted to a dimensionless int in pixels.
+   */
+  void set width(Dimension newWidth) {
+    _elementList.forEach((e) => e.contentEdge.width = newWidth);
+  }
+}
+
+class _PaddingCssRect extends CssRect {
+  _PaddingCssRect(element) : super(element);
+  int get height => _element.offsetHeight +
+      _addOrSubtractToBoxModel(CssRect._HEIGHT, 'padding');
+  int get width => _element.offsetWidth +
+      _addOrSubtractToBoxModel(CssRect._WIDTH, 'padding');
+
+  int get left() => _element.getBoundingClientRect().left -
+      _addOrSubtractToBoxModel(['left'], 'padding');
+  int get top() => _element.getBoundingClientRect().top -
+      _addOrSubtractToBoxModel(['top'], 'padding');
+}
+
+class _BorderCssRect extends CssRect {
+  _BorderCssRect(element) : super(element);
+  int get height() => _element.offsetHeight;

[Jacob, 2013/05/22 02:09:51]

Should we put this in the platform? For example, these don't handle fractional
sizes, transforms, etc.

+  int get width() => _element.offsetWidth;
+
+  int get left() => _element.getBoundingClientRect().left;
+  int get top() => _element.getBoundingClientRect().top;
+}
+
+class _MarginCssRect extends CssRect {
+  _MarginCssRect(element) : super(element);
+  int get height() => _element.offsetHeight +
+      _addOrSubtractToBoxModel(CssRect._HEIGHT, 'margin');
+  int get width() =>
+      _element.offsetWidth + _addOrSubtractToBoxModel(CssRect._WIDTH, 'margin');
+
+  int get left() => _element.getBoundingClientRect().left -
+      _addOrSubtractToBoxModel(['left'], 'margin');
+  int get top() => _element.getBoundingClientRect().top -
+      _addOrSubtractToBoxModel(['top'], 'margin');
+}
+
+/**
+ * A class for representing CSS dimensions.
+ *
+ * In contrast to the more general purpose [Rect] class, this class's values are
+ * mutable, so one can change the height of an element programmatically.
+ *
+ * SPECIAL NOTE: Do _not_ use these methods of setting height for animations, as
+ * they will trigger a redraw of the layout. For deferred layout options, see
+ * the LayoutManager.
+ */
+abstract class CssRect extends RectBase implements Rect {
+  Element _element;
+
+  CssRect(this._element);
+
+  int get left();
+
+  int get top();
+
+  /**
+   * The height of this rectangle.
+   *
+   * This is equivalent to the `height` function in jQuery and the calculated
+   * `height` css value, converted to a dimensionless int in pixels. Unlike
+   * [getBoundingClientRect], `height` will return the same numerical width if
+   * the element is hidden or not.
+   */
+  int get height();

[Jacob, 2013/05/22 02:09:51]

these should be num not int.
it is possible to have fractional pixels.

[Emily Fortuna, 2013/07/10 21:40:16]

Done.

+
+  /**
+   * The width of this rectangle.
+   *
+   * This is equivalent to the `width` function in jQuery and the calculated
+   * `width` css value, converted to a dimensionless int in pixels. Unlike
+   * [getBoundingClientRect], `width` will return the same numerical width if
+   * the element is hidden or not.
+   */
+  int get width();
+
+  /**
+   * Set the height to `newHeight`.
+   *
+   * Values of newHeight that are less than zero are converted to effectively
+   * setting the height to 0. Note that only the content height can be set via
+   * this method.
+   */
+  void set height(Dimension newHeight) {
+    throw new UnsupportedError("Can only set height for content rect.");
+  }
+
+  /**
+   * Set the current computed width in pixels of this element.
+   *
+   * Note that only the content width can be set via this method.
+   */
+  void set width(Dimension newWidth) {
+    throw new UnsupportedError("Can only set width for content rect.");
+  }
+
+  /**
+   * Return a value that is used to modify the initial height or width
+   * measurement of an element. Depending on the value (ideally an enum) passed
+   * to augmentingMeasurement, we may need to add or subtract margin, padding,
+   * or border values, depending on the measurement we're trying to obtain.
+   */
+  int _addOrSubtractToBoxModel(List<String> dimensions,
+      String augmentingMeasurement) {
+    // getComputedStyle always returns pixel values (hence, computed), so we're
+    // always dealing with pixels in this method.
+    var styles = _element.getComputedStyle();
+
+    var val = 0;
+
+    for (String measurement in dimensions) {
+      // The border-box and default box model both exclude margin in the regular
+      // height/width calculation, so add it if we want it for this measurement.
+      if (augmentingMeasurement == "margin") {
+        val += new Dimension.css(styles.getPropertyValue(
+            '$augmentingMeasurement-$measurement')).value;
+      }
+
+      // The border-box includes padding and border, so remove it if we want
+      // just the content itself.
+      if (augmentingMeasurement == 'content') {
+        val -= new Dimension.css(
+            styles.getPropertyValue('padding-$measurement')).value;
+      }
+
+      // At this point, we don't wan't to augment with border or margin,
+      // so remove border.
+      if (augmentingMeasurement != 'margin') {
+              val -= new Dimension.css(styles.getPropertyValue(
+            'border-${measurement}-width')).value;
+      }
+    }
+    return val;
+  }
+
+  final static _HEIGHT = ['top', 'bottom'];
+  final static _WIDTH = ['right', 'left'];
+}
+