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

tools/dom/src/Dimension.dart

Index: tools/dom/src/Dimension.dart
diff --git a/tools/dom/src/Dimension.dart b/tools/dom/src/Dimension.dart
new file mode 100644
index 0000000000000000000000000000000000000000..05f5d6ecf0b9659a836eb5c679da77bf5580c6e6
--- /dev/null
+++ b/tools/dom/src/Dimension.dart
@@ -0,0 +1,64 @@
+/** Class representing a distance measurement in CSS. */
+class Dimension {
+  num _value;
+  String _unit;
+
+  /** Set this CSS Dimension to a percentage `value`. */
+  Dimension.percent(this._value) : _unit = '%';
+
+  /** Set this CSS Dimension to a pixel `value`. */
+  Dimension.px(this._value) : _unit = 'px';
+
+  /** Set this CSS Dimension to a pica `value`. */
+  Dimension.pc(this._value) : _unit = 'pc';
+
+  /** Set this CSS Dimension to a point `value`. */
+  Dimension.pt(this._value) : _unit = 'pt';
+
+  /** Set this CSS Dimension to an inch `value`. */
+  Dimension.inch(this._value) : _unit = 'in';
+
+  /** Set this CSS Dimension to a centimeter `value`. */
+  Dimension.cm(this._value) : _unit = 'cm';
+
+  /** Set this CSS Dimension to a millimeter `value`. */
+  Dimension.mm(this._value) : _unit = 'mm';
+
+  /**
+   * Set this CSS Dimension to the specified number of ems.
+   *
+   * 1em is equal to the current font size. (So 2ems is equal to double the font
+   * size). This is useful for producing website layouts that scale nicely with
+   * the user's desired font size.
+   */
+  Dimension.em(this._value) : _unit = 'em';
+
+  /**
+   * Set this CSS Dimension to the specified number of x-heights.
+   *
+   * One ex is equal to the the x-height of a font's baseline to its mean line,
+   * generally the height of the letter "x" in the font, which is usually about
+   * half the font-size.
+   */
+  Dimension.ex(this._value) : _unit = 'ex';
+
+  /** Construct a Dimension object from the valid CSS string `cssValue`. */
+  Dimension.css(String cssValue) {

[blois, 2013/05/22 01:18:07]

Some edge cases for cssValue:
0
50.5%
auto
inherit

I don't like it, but would a regex be a better fit? 

In general I'm worried about getting into CSS parsing.

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

I can change this so this constructor is now private (since it never gets used
outside of the html library), and is only called after calling getComputedValue
in very specific cases, so we know for certain that it is a pixel value.

+    if (cssValue == '') cssValue = '0px';
+    if (cssValue.endsWith('%')) {
+      _unit = '%';
+      _value = int.parse(cssValue.substring(0, cssValue.length-1));
+    } else {
+      _value = int.parse(cssValue.substring(0, cssValue.length - 2));
+      _unit = cssValue.substring(cssValue.length - 2);
+    }
+  }
+
+  /** Print out the CSS String representation of this value. */
+  String toString() {
+    return '${_value}${_unit}';
+  }
+
+  /** Return a unitless, numerical value of this CSS value. */
+  num get value => this._value;
+}