move csslib into dart svn

pkg/csslib/lib/src/property.dart

+// Copyright (c) 2012, 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.
+
+/** Representations of CSS styles. */
+
+part of csslib.parser;
+
+// TODO(terry): Prune down this file we do need some of the code in this file
+//              for darker, lighter, how to represent a Font, etc but alot of
+//              the complexity can be removed.
+//              See https://github.com/dart-lang/csslib/issues/7
+
+/**
+ * Base for all style properties (e.g., Color, Font, Border, Margin, etc.)
+ */
+abstract class _StyleProperty {
+  /**
+   * Returns the expression part of a CSS declaration.  Declaration is:
+   *
+   *     property:expression;
+   *
+   * E.g., if property is color then expression could be rgba(255,255,0) the
+   *       CSS declaration would be 'color:rgba(255,255,0);'.
+   *
+   * then _cssExpression would return 'rgba(255,255,0)'.  See
+   * <http://www.w3.org/TR/CSS21/grammar.html>
+   */
+  String get cssExpression;
+}
+
+
+/**
+ * Base interface for Color, HSL and RGB.
+ */
+abstract class ColorBase {
+  /**
+   * Canonical form for color #rrggbb with alpha blending (0.0 == full
+   * transparency and 1.0 == fully opaque). If _argb length is 6 it's an
+   * rrggbb otherwise it's aarrggbb.
+   */
+  String toHexArgbString();
+
+  /**
+   * Return argb as a value (int).
+   */
+  int get argbValue;
+}
+
+
+/**
+ * General purpse Color class.  Represent a color as an ARGB value that can be
+ * converted to and from num, hex string, hsl, hsla, rgb, rgba and SVG pre-
+ * defined color constant.
+ */
+class Color implements _StyleProperty, ColorBase {
+  // If _argb length is 6 it's an rrggbb otherwise it's aarrggbb.
+  final String _argb;
+
+  // TODO(terry): Look at reducing Rgba and Hsla classes as factories for
+  //              converting from Color to an Rgba or Hsla for reading only.
+  //              Usefulness of creating an Rgba or Hsla is limited.
+
+  /**
+   * Create a color with an integer representing the rgb value of red, green,
+   * and blue.  The value 0xffffff is the color white #ffffff (CSS style).
+   * The [rgb] value of 0xffd700 would map to #ffd700 or the constant
+   * Color.gold, where ff is red intensity, d7 is green intensity, and 00 is
+   * blue intensity.
+   */
+  Color(int rgb, [num alpha]) :
+    this._argb = Color._rgbToArgbString(rgb, alpha);
+
+  /**
+   * RGB takes three values. The [red], [green], and [blue] parameters are
+   * the intensity of those components where '0' is the least and '256' is the
+   * greatest.
+   *
+   * If [alpha] is provided, it is the level of translucency which ranges from
+   * '0' (completely transparent) to '1.0' (completely opaque).  It will
+   * internally be mapped to an int between '0' and '255' like the other color
+   * components.
+   */
+  Color.createRgba(int red, int green, int blue, [num alpha]) :
+      this._argb = Color.convertToHexString(Color._clamp(red, 0, 255),
+          Color._clamp(green, 0, 255),
+          Color._clamp(blue, 0, 255),
+          alpha != null ? Color._clamp(alpha, 0, 1) : alpha);
+
+  /**
+   * Creates a new color from a CSS color string. For more information, see
+   * <https://developer.mozilla.org/en/CSS/color>.
+   */
+  Color.css(String color) :
+      this._argb = Color._convertCssToArgb(color);
+
+  // TODO(jmesserly): I found the use of percents a bit suprising.
+  /**
+   * HSL takes three values.  The [hueDegree] degree on the color wheel; '0' is
+   * the least and '100' is the greatest.  The value '0' or '360' is red, '120'
+   * is green, '240' is blue. Numbers in between reflect different shades.
+   * The [saturationPercent] percentage; where'0' is the least and '100' is the
+   * greatest (100 represents full color).  The [lightnessPercent] percentage;
+   * where'0' is the least and '100' is the greatest.  The value 0 is dark or
+   * black, 100 is light or white and 50 is a medium lightness.
+   *
+   * If [alpha] is provided, it is the level of translucency which ranges from
+   * '0' (completely transparent foreground) to '1.0' (completely opaque
+   * foreground).
+   */
+  Color.createHsla(num hueDegree, num saturationPercent, num lightnessPercent,
+      [num alpha]) :
+          this._argb = new Hsla(Color._clamp(hueDegree, 0, 360) / 360,
+          Color._clamp(saturationPercent, 0, 100) / 100,
+          Color._clamp(lightnessPercent, 0, 100) / 100,
+          alpha != null ? Color._clamp(alpha, 0, 1) : alpha).toHexArgbString();
+
+  /**
+   * The hslaRaw takes three values.  The [hue] degree on the color wheel; '0'
+   * is the least and '1' is the greatest.  The value '0' or '1' is red, the
+   * ratio of 120/360 is green, and the ratio of 240/360 is blue.  Numbers in
+   * between reflect different shades.  The [saturation] is a percentage; '0'
+   * is the least and '1' is the greatest.  The value of '1' is equivalent to
+   * 100% (full colour).  The [lightness] is a percentage; '0' is the least and
+   * '1' is the greatest.  The value of '0' is dark (black), the value of '1'
+   * is light (white), and the value of '.50' is a medium lightness.
+   *
+   * The fourth optional parameter is:
+   *   [alpha]      level of translucency range of values is 0..1, zero is a
+   *                completely transparent foreground and 1 is a completely
+   *                opaque foreground.
+   */
+  Color.hslaRaw(num hue, num saturation, num lightness, [num alpha]) :
+    this._argb = new Hsla(Color._clamp(hue, 0, 1),
+          Color._clamp(saturation, 0, 1),
+          Color._clamp(lightness, 0, 1),
+          alpha != null ? Color._clamp(alpha, 0, 1) : alpha).toHexArgbString();
+
+  /**
+   * Generate a real constant for pre-defined colors (no leading #).
+   */
+  const Color.hex(this._argb);
+
+  // TODO(jmesserly): this is needed by the example so leave it exposed for now.
+  String toString() => cssExpression;
+
+  // TODO(terry): Regardless of how color is set (rgb, num, css or hsl) we'll
+  //              always return a rgb or rgba loses fidelity when debugging in
+  //              CSS if user uses hsl and would like to edit as hsl, etc.  If
+  //              this is an issue we should keep the original value and not re-
+  //              create the CSS from the normalized value.
+  String get cssExpression {
+    if (_argb.length == 6) {
+      return "#$_argb";         // RGB only, no alpha blending.
+    } else {
+      num alpha = Color.hexToInt(_argb.substring(0, 2));
+      String a = (alpha / 255).toStringAsPrecision(2);
+      int r = Color.hexToInt(_argb.substring(2, 4));
+      int g = Color.hexToInt(_argb.substring(4, 6));
+      int b = Color.hexToInt(_argb.substring(6, 8));
+      return "rgba($r,$g,$b,$a)";
+    }
+  }
+
+  Rgba get rgba {
+    int nextIndex = 0;
+    num a;
+    if (_argb.length == 8) {
+      // Get alpha blending value 0..255
+      int alpha = Color.hexToInt(_argb.substring(nextIndex, nextIndex + 2));
+      // Convert to value from 0..1
+      a = double.parse((alpha / 255).toStringAsPrecision(2));
+      nextIndex += 2;
+    }
+    int r = Color.hexToInt(_argb.substring(nextIndex, nextIndex + 2));
+    nextIndex += 2;
+    int g = Color.hexToInt(_argb.substring(nextIndex, nextIndex + 2));
+    nextIndex += 2;
+    int b = Color.hexToInt(_argb.substring(nextIndex, nextIndex + 2));
+    return new Rgba(r, g, b, a);
+  }
+
+  Hsla get hsla => new Hsla.fromRgba(rgba);
+
+  int get argbValue => Color.hexToInt(_argb);
+
+  bool operator ==(Object other) => Color.equal(this, other);
+
+  String toHexArgbString() => _argb;
+
+  Color darker(num amount) {
+    Rgba newRgba = Color._createNewTintShadeFromRgba(rgba, -amount);
+    return new Color.hex("${newRgba.toHexArgbString()}");
+  }
+
+  Color lighter(num amount) {
+    Rgba newRgba = Color._createNewTintShadeFromRgba(rgba, amount);
+    return new Color.hex("${newRgba.toHexArgbString()}");
+  }
+
+  static bool equal(ColorBase curr, Object other) {
+    if (other is Color) {
+      Color o = other;
+      return o.toHexArgbString() == curr.toHexArgbString();
+    } else if (other is Rgba) {
+      Rgba rgb = other;
+      return rgb.toHexArgbString() == curr.toHexArgbString();
+    } else if (other is Hsla) {
+      Hsla hsla = other;
+      return hsla.toHexArgbString() == curr.toHexArgbString();
+    } else {
+      return false;
+    }
+  }
+
+  int get hashCode => _argb.hashCode;
+
+  // Conversion routines:
+
+  static String _rgbToArgbString(int rgba, num alpha) {
+    int a;
+    // If alpha is defined then adjust from 0..1 to 0..255 value, if not set
+    // then a is left as undefined and passed to convertToHexString.
+    if (alpha != null) {
+      a = (Color._clamp(alpha, 0, 1) * 255).round();
+    }
+
+    int r = (rgba & 0xff0000) >> 0x10;
+    int g = (rgba & 0xff00) >> 8;
+    int b = rgba & 0xff;
+
+    return Color.convertToHexString(r, g, b, a);
+  }
+
+  static const int _rgbCss = 1;
+  static const int _rgbaCss = 2;
+  static const int _hslCss = 3;
+  static const int _hslaCss = 4;
+  /**
+   * Parse CSS expressions of the from #rgb, rgb(r,g,b), rgba(r,g,b,a),
+   * hsl(h,s,l), hsla(h,s,l,a) and SVG colors (e.g., darkSlateblue, etc.) and
+   * convert to argb.
+   */
+  static String _convertCssToArgb(String value) {
+    // TODO(terry): Better parser/regex for converting CSS properties.
+    String color = value.trim().replaceAll("\\s", "");
+    if (color[0] == '#') {
+      String v = color.substring(1);
+      Color.hexToInt(v);              // Valid hexadecimal, throws if not.
+      return v;
+    } else if (color.length > 0 && color[color.length - 1] == ')') {
+      int type;
+      if (color.indexOf("rgb(") == 0 || color.indexOf("RGB(") == 0) {
+        color = color.substring(4);
+        type = _rgbCss;
+      } else if (color.indexOf("rgba(") == 0 || color.indexOf("RGBA(") == 0) {
+        type = _rgbaCss;
+        color = color.substring(5);
+      } else if (color.indexOf("hsl(") == 0 || color.indexOf("HSL(") == 0) {
+        type = _hslCss;
+        color = color.substring(4);
+      } else if (color.indexOf("hsla(") == 0 || color.indexOf("HSLA(") == 0) {
+        type = _hslaCss;
+        color = color.substring(5);
+      } else {
+        throw new UnsupportedError('CSS property not implemented');
+      }
+
+      color = color.substring(0, color.length - 1);     // Strip close paren.
+
+      var args = <num>[];
+      List<String> params = color.split(",");
+      for (String param in params) {
+        args.add(double.parse(param));
+      }
+      switch (type) {
+        case _rgbCss:
+          return Color.convertToHexString(args[0], args[1], args[2]);
+        case _rgbaCss:
+          return Color.convertToHexString(args[0], args[1], args[2], args[3]);
+        case _hslCss:
+          return new Hsla(args[0], args[1], args[2]).toHexArgbString();
+        case _hslaCss:
+          return new Hsla(args[0], args[1], args[2],
+              args[3]).toHexArgbString();
+        default:
+          // Type not defined UnsupportedOperationException should have thrown.
+          assert(true);
+          break;
+      }
+    }
+  }
+
+  /**
+   * [hex] hexadecimal string to convert to scalar.
+   * returns hexadecimal number as an integer.
+   * throws BadNumberFormatException if [hex] isn't a valid hexadecimal number.
+   */
+  // TODO(terry): Should be part of Dart standard library see bug
+  // <http://code.google.com/p/dart/issues/detail?id=2624>
+  static int hexToInt(String hex) {
+    int val = 0;
+
+    int len = hex.length;
+    for (int i = 0; i < len; i++) {
+      int hexDigit = hex.codeUnitAt(i);
+      if (hexDigit >= 48 && hexDigit <= 57) {
+        val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
+      } else if (hexDigit >= 65 && hexDigit <= 70) {
+        // A..F
+        val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
+      } else if (hexDigit >= 97 && hexDigit <= 102) {
+        // a..f
+        val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
+      } else {
+        throw throw new FormatException("Bad hexadecimal value");
+      }
+    }
+
+    return val;
+  }
+
+  static String convertToHexString(int r, int g, int b, [num a]) {
+    String rHex = Color._numAs2DigitHex(Color._clamp(r, 0, 255));
+    String gHex = Color._numAs2DigitHex(Color._clamp(g, 0, 255));
+    String bHex = Color._numAs2DigitHex(Color._clamp(b, 0, 255));
+    String aHex = (a != null) ?
+        Color._numAs2DigitHex((Color._clamp(a, 0, 1) * 255).round()) : "";
+
+    // TODO(terry) 15.toRadixString(16) return 'F' on Dartium not f as in JS.
+    //             bug: <http://code.google.com/p/dart/issues/detail?id=2670>
+    return "$aHex$rHex$gHex$bHex".toLowerCase();
+  }
+
+  static String _numAs2DigitHex(num v) {
+    // TODO(terry): v.toInt().toRadixString instead of v.toRadixString
+    //              Bug <http://code.google.com/p/dart/issues/detail?id=2671>.
+    String hex = v.toInt().toRadixString(16);
+    if (hex.length == 1) {
+      hex = "0${hex}";
+    }
+    return hex;
+  }
+
+  static num _clamp(num value, num min, num max) =>
+      math.max(math.min(max, value), min);
+
+  /**
+   * Change the tint (make color lighter) or shade (make color darker) of all
+   * parts of [rgba] (r, g and b).  The [amount] is percentage darker between
+   * -1 to 0 for darker and 0 to 1 for lighter; '0' is no change.  The [amount]
+   * will darken or lighten the rgb values; it will not change the alpha value.
+   * If [amount] is outside of the value -1 to +1 then [amount] is changed to
+   * either the min or max direction -1 or 1.
+   *
+   * Darker will approach the color #000000 (black) and lighter will approach
+   * the color #ffffff (white).
+   */
+  static Rgba _createNewTintShadeFromRgba(Rgba rgba, num amount) {
+    int r, g, b;
+    num tintShade = Color._clamp(amount, -1, 1);
+    if (amount < 0 && rgba.r == 255 && rgba.g == 255 && rgba.b == 255) {
+      // TODO(terry): See TODO in _changeTintShadeColor; eliminate this test
+      //              by converting to HSL and adjust lightness although this
+      //              is fastest lighter/darker algorithm.
+      // Darkening white special handling.
+      r = Color._clamp((255 + (255 * tintShade)).round().toInt(), 0, 255);
+      g = Color._clamp((255 + (255 * tintShade)).round().toInt(), 0, 255);
+      b = Color._clamp((255 + (255 * tintShade)).round().toInt(), 0, 255);
+    } else {
+      // All other colors then darkening white go here.
+      r = Color._changeTintShadeColor(rgba.r, tintShade).round().toInt();
+      g = Color._changeTintShadeColor(rgba.g, tintShade).round().toInt();
+      b = Color._changeTintShadeColor(rgba.b, tintShade).round().toInt();
+    }
+    return new Rgba(r, g, b, rgba.a);
+  }
+
+  // TODO(terry): This does an okay lighter/darker; better would be convert to
+  //              HSL then change the lightness.
+  /**
+   * The parameter [v] is the color to change (r, g, or b) in the range '0' to
+   * '255'. The parameter [delta] is a number between '-1' and '1'.  A value
+   * between '-1' and '0' is darker and a value between '0' and '1' is lighter
+   * ('0' imples no change).
+   */
+  static num _changeTintShadeColor(num v, num delta) =>
+      Color._clamp(((1 - delta) * v + (delta * 255)).round(), 0, 255);
+
+  // Predefined CSS colors see <http://www.w3.org/TR/css3-color/>
+  static final Color transparent = const Color.hex("00ffffff");  // Alpha 0.0
+  static final Color aliceBlue = const Color.hex("0f08ff");
+  static final Color antiqueWhite = const Color.hex("0faebd7");
+  static final Color aqua = const Color.hex("00ffff");
+  static final Color aquaMarine = const Color.hex("7fffd4");
+  static final Color azure = const Color.hex("f0ffff");
+  static final Color beige = const Color.hex("f5f5dc");
+  static final Color bisque = const Color.hex("ffe4c4");
+  static final Color black = const Color.hex("000000");
+  static final Color blanchedAlmond = const Color.hex("ffebcd");
+  static final Color blue = const Color.hex("0000ff");
+  static final Color blueViolet = const Color.hex("8a2be2");
+  static final Color brown = const Color.hex("a52a2a");
+  static final Color burlyWood = const Color.hex("deb887");
+  static final Color cadetBlue = const Color.hex("5f9ea0");
+  static final Color chartreuse = const Color.hex("7fff00");
+  static final Color chocolate = const Color.hex("d2691e");
+  static final Color coral = const Color.hex("ff7f50");
+  static final Color cornFlowerBlue = const Color.hex("6495ed");
+  static final Color cornSilk = const Color.hex("fff8dc");
+  static final Color crimson = const Color.hex("dc143c");
+  static final Color cyan = const Color.hex("00ffff");
+  static final Color darkBlue = const Color.hex("00008b");
+  static final Color darkCyan = const Color.hex("008b8b");
+  static final Color darkGoldenRod = const Color.hex("b8860b");
+  static final Color darkGray = const Color.hex("a9a9a9");
+  static final Color darkGreen = const Color.hex("006400");
+  static final Color darkGrey = const Color.hex("a9a9a9");
+  static final Color darkKhaki = const Color.hex("bdb76b");
+  static final Color darkMagenta = const Color.hex("8b008b");
+  static final Color darkOliveGreen = const Color.hex("556b2f");
+  static final Color darkOrange = const Color.hex("ff8c00");
+  static final Color darkOrchid = const Color.hex("9932cc");
+  static final Color darkRed = const Color.hex("8b0000");
+  static final Color darkSalmon = const Color.hex("e9967a");
+  static final Color darkSeaGreen = const Color.hex("8fbc8f");
+  static final Color darkSlateBlue = const Color.hex("483d8b");
+  static final Color darkSlateGray = const Color.hex("2f4f4f");
+  static final Color darkSlateGrey = const Color.hex("2f4f4f");
+  static final Color darkTurquoise = const Color.hex("00ced1");
+  static final Color darkViolet = const Color.hex("9400d3");
+  static final Color deepPink = const Color.hex("ff1493");
+  static final Color deepSkyBlue = const Color.hex("00bfff");
+  static final Color dimGray = const Color.hex("696969");
+  static final Color dimGrey = const Color.hex("696969");
+  static final Color dodgerBlue = const Color.hex("1e90ff");
+  static final Color fireBrick = const Color.hex("b22222");
+  static final Color floralWhite = const Color.hex("fffaf0");
+  static final Color forestGreen = const Color.hex("228b22");
+  static final Color fuchsia = const Color.hex("ff00ff");
+  static final Color gainsboro = const Color.hex("dcdcdc");
+  static final Color ghostWhite = const Color.hex("f8f8ff");
+  static final Color gold = const Color.hex("ffd700");
+  static final Color goldenRod = const Color.hex("daa520");
+  static final Color gray = const Color.hex("808080");
+  static final Color green = const Color.hex("008000");
+  static final Color greenYellow = const Color.hex("adff2f");
+  static final Color grey = const Color.hex("808080");
+  static final Color honeydew = const Color.hex("f0fff0");
+  static final Color hotPink = const Color.hex("ff69b4");
+  static final Color indianRed = const Color.hex("cd5c5c");
+  static final Color indigo = const Color.hex("4b0082");
+  static final Color ivory = const Color.hex("fffff0");
+  static final Color khaki = const Color.hex("f0e68c");
+  static final Color lavender = const Color.hex("e6e6fa");
+  static final Color lavenderBlush = const Color.hex("fff0f5");
+  static final Color lawnGreen = const Color.hex("7cfc00");
+  static final Color lemonChiffon = const Color.hex("fffacd");
+  static final Color lightBlue = const Color.hex("add8e6");
+  static final Color lightCoral = const Color.hex("f08080");
+  static final Color lightCyan = const Color.hex("e0ffff");
+  static final Color lightGoldenRodYellow = const Color.hex("fafad2");
+  static final Color lightGray = const Color.hex("d3d3d3");
+  static final Color lightGreen = const Color.hex("90ee90");
+  static final Color lightGrey = const Color.hex("d3d3d3");
+  static final Color lightPink = const Color.hex("ffb6c1");
+  static final Color lightSalmon = const Color.hex("ffa07a");
+  static final Color lightSeaGreen = const Color.hex("20b2aa");
+  static final Color lightSkyBlue = const Color.hex("87cefa");
+  static final Color lightSlateGray = const Color.hex("778899");
+  static final Color lightSlateGrey = const Color.hex("778899");
+  static final Color lightSteelBlue = const Color.hex("b0c4de");
+  static final Color lightYellow = const Color.hex("ffffe0");
+  static final Color lime = const Color.hex("00ff00");
+  static final Color limeGreen = const Color.hex("32cd32");
+  static final Color linen = const Color.hex("faf0e6");
+  static final Color magenta = const Color.hex("ff00ff");
+  static final Color maroon = const Color.hex("800000");
+  static final Color mediumAquaMarine = const Color.hex("66cdaa");
+  static final Color mediumBlue = const Color.hex("0000cd");
+  static final Color mediumOrchid = const Color.hex("ba55d3");
+  static final Color mediumPurple = const Color.hex("9370db");
+  static final Color mediumSeaGreen = const Color.hex("3cb371");
+  static final Color mediumSlateBlue = const Color.hex("7b68ee");
+  static final Color mediumSpringGreen = const Color.hex("00fa9a");
+  static final Color mediumTurquoise = const Color.hex("48d1cc");
+  static final Color mediumVioletRed = const Color.hex("c71585");
+  static final Color midnightBlue = const Color.hex("191970");
+  static final Color mintCream = const Color.hex("f5fffa");
+  static final Color mistyRose = const Color.hex("ffe4e1");
+  static final Color moccasin = const Color.hex("ffe4b5");
+  static final Color navajoWhite = const Color.hex("ffdead");
+  static final Color navy = const Color.hex("000080");
+  static final Color oldLace = const Color.hex("fdf5e6");
+  static final Color olive = const Color.hex("808000");
+  static final Color oliveDrab = const Color.hex("6b8e23");
+  static final Color orange = const Color.hex("ffa500");
+  static final Color orangeRed = const Color.hex("ff4500");
+  static final Color orchid = const Color.hex("da70d6");
+  static final Color paleGoldenRod = const Color.hex("eee8aa");
+  static final Color paleGreen = const Color.hex("98fb98");
+  static final Color paleTurquoise = const Color.hex("afeeee");
+  static final Color paleVioletRed = const Color.hex("db7093");
+  static final Color papayaWhip = const Color.hex("ffefd5");
+  static final Color peachPuff = const Color.hex("ffdab9");
+  static final Color peru = const Color.hex("cd85ef");
+  static final Color pink = const Color.hex("ffc0cb");
+  static final Color plum = const Color.hex("dda0dd");
+  static final Color powderBlue = const Color.hex("b0e0e6");
+  static final Color purple = const Color.hex("800080");
+  static final Color red = const Color.hex("ff0000");
+  static final Color rosyBrown = const Color.hex("bc8f8f");
+  static final Color royalBlue = const Color.hex("4169e1");
+  static final Color saddleBrown = const Color.hex("8b4513");
+  static final Color salmon = const Color.hex("fa8072");
+  static final Color sandyBrown = const Color.hex("f4a460");
+  static final Color seaGreen = const Color.hex("2e8b57");
+  static final Color seashell = const Color.hex("fff5ee");
+  static final Color sienna = const Color.hex("a0522d");
+  static final Color silver = const Color.hex("c0c0c0");
+  static final Color skyBlue = const Color.hex("87ceeb");
+  static final Color slateBlue = const Color.hex("6a5acd");
+  static final Color slateGray = const Color.hex("708090");
+  static final Color slateGrey = const Color.hex("708090");
+  static final Color snow = const Color.hex("fffafa");
+  static final Color springGreen = const Color.hex("00ff7f");
+  static final Color steelBlue = const Color.hex("4682b4");
+  static final Color tan = const Color.hex("d2b48c");
+  static final Color teal = const Color.hex("008080");
+  static final Color thistle = const Color.hex("d8bfd8");
+  static final Color tomato = const Color.hex("ff6347");
+  static final Color turquoise = const Color.hex("40e0d0");
+  static final Color violet = const Color.hex("ee82ee");
+  static final Color wheat = const Color.hex("f5deb3");
+  static final Color white = const Color.hex("ffffff");
+  static final Color whiteSmoke = const Color.hex("f5f5f5");
+  static final Color yellow = const Color.hex("ffff00");
+  static final Color yellowGreen = const Color.hex("9acd32");
+}
+
+
+/**
+ * Rgba class for users that want to interact with a color as a RGBA value.
+ */
+class Rgba implements _StyleProperty, ColorBase {
+  // TODO(terry): Consider consolidating rgba to a single 32-bit int, make sure
+  //              it works under JS and Dart VM.
+  final int r;
+  final int g;
+  final int b;
+  final num a;
+
+  Rgba(int red, int green, int blue, [num alpha]) :
+    this.r = Color._clamp(red, 0, 255),
+    this.g = Color._clamp(green, 0, 255),
+    this.b = Color._clamp(blue, 0, 255),
+    this.a = (alpha != null) ? Color._clamp(alpha, 0, 1) : alpha;
+
+  factory Rgba.fromString(String hexValue) =>
+    new Color.css("#${Color._convertCssToArgb(hexValue)}").rgba;
+
+  factory Rgba.fromColor(Color color) => color.rgba;
+
+  factory Rgba.fromArgbValue(num value) {
+    return new Rgba(((value.toInt() & 0xff000000) >> 0x18),  /* a */
+      ((value.toInt() & 0xff0000) >> 0x10),                  /* r */
+      ((value.toInt() & 0xff00) >> 8),                       /* g */
+      ((value.toInt() & 0xff)));                             /* b */
+  }
+
+  factory Rgba.fromHsla(Hsla hsla) {
+    // Convert to Rgba.
+    // See site <http://easyrgb.com/index.php?X=MATH> for good documentation
+    // and color conversion routines.
+
+    num h = hsla.hue;
+    num s = hsla.saturation;
+    num l = hsla.lightness;
+    num a = hsla.alpha;
+
+    int r;
+    int g;
+    int b;
+
+    if (s == 0) {
+      r = (l * 255).round().toInt();
+      g = r;
+      b = r;
+    } else {
+      num var2;
+
+      if (l < 0.5) {
+        var2 = l * (1 + s);
+      } else {
+        var2 = (l + s) - (s * l);
+      }
+      num var1 = 2 * l - var2;
+
+      r = (255 * Rgba._hueToRGB(var1, var2, h + (1/3))).round().toInt();
+      g = (255 * Rgba._hueToRGB(var1, var2, h)).round().toInt();
+      b = (255 * Rgba._hueToRGB(var1, var2, h - (1/3))).round().toInt();
+    }
+
+    return new Rgba(r, g, b, a);
+  }
+
+  static num _hueToRGB(num v1, num v2, num vH) {
+    if (vH < 0) {
+      vH += 1;
+    }
+
+    if (vH > 1) {
+      vH -= 1;
+    }
+
+    if ((6 * vH) < 1) {
+      return (v1 + (v2 - v1) * 6 * vH);
+    }
+
+    if ((2 * vH) < 1) {
+      return v2;
+    }
+
+    if ((3 * vH) < 2) {
+      return (v1 + (v2 - v1) * ((2 / 3 - vH) * 6));
+    }
+
+    return v1;
+  }
+
+  bool operator ==(Object other) => Color.equal(this, other);
+
+  String get cssExpression {
+    if (a == null) {
+      return "#${Color.convertToHexString(r, g, b)}";
+    } else {
+      return "rgba($r,$g,$b,$a)";
+    }
+  }
+
+  String toHexArgbString() => Color.convertToHexString(r, g, b, a);
+
+  int get argbValue {
+    int value = 0;
+    if (a != null) {
+      value = (a.toInt() << 0x18);
+    }
+    value += (r << 0x10);
+    value += (g << 0x08);
+    value += b;
+  }
+
+  Color get color => new Color.createRgba(r, g, b, a);
+  Hsla get hsla => new Hsla.fromRgba(this);
+
+  Rgba darker(num amount) => Color._createNewTintShadeFromRgba(this, -amount);
+  Rgba lighter(num amount) => Color._createNewTintShadeFromRgba(this, amount);
+
+  int get hashCode => toHexArgbString().hashCode;
+}
+
+
+/**
+ * Hsl class support to interact with a color as a hsl with hue, saturation, and
+ * lightness with optional alpha blending.  The hue is a ratio of 360 degrees
+ * 360° = 1 or 0, (1° == (1/360)), saturation and lightness is a 0..1 fraction
+ * (1 == 100%) and alpha is a 0..1 fraction.
+ */
+class Hsla implements _StyleProperty, ColorBase {
+  final num _h;             // Value from 0..1
+  final num _s;             // Value from 0..1
+  final num _l;             // Value from 0..1
+  final num _a;             // Value from 0..1
+
+  /**
+   * [hue] is a 0..1 fraction of 360 degrees (360 == 0).
+   * [saturation] is a 0..1 fraction (100% == 1).
+   * [lightness] is a 0..1 fraction (100% == 1).
+   * [alpha] is a 0..1 fraction, alpha blending between 0..1, 1 == 100% opaque.
+   */
+  Hsla(num hue, num saturation, num lightness, [num alpha]) :
+    this._h = (hue == 1) ? 0 : Color._clamp(hue, 0, 1),
+    this._s = Color._clamp(saturation, 0, 1),
+    this._l = Color._clamp(lightness, 0, 1),
+    this._a = (alpha != null) ? Color._clamp(alpha, 0, 1) : alpha;
+
+  factory Hsla.fromString(String hexValue) {
+    Rgba rgba = new Color.css("#${Color._convertCssToArgb(hexValue)}").rgba;
+    return _createFromRgba(rgba.r, rgba.g, rgba.b, rgba.a);
+  }
+
+  factory Hsla.fromColor(Color color) {
+    Rgba rgba = color.rgba;
+    return _createFromRgba(rgba.r, rgba.g, rgba.b, rgba.a);
+  }
+
+  factory Hsla.fromArgbValue(num value) {
+    num a = (value.toInt() & 0xff000000) >> 0x18;
+    int r = (value.toInt() & 0xff0000) >> 0x10;
+    int g = (value.toInt() & 0xff00) >> 8;
+    int b = value.toInt() & 0xff;
+
+    // Convert alpha to 0..1 from (0..255).
+    if (a != null) {
+      a = double.parse((a / 255).toStringAsPrecision(2));
+    }
+
+    return _createFromRgba(r, g, b, a);
+  }
+
+  factory Hsla.fromRgba(Rgba rgba) =>
+    _createFromRgba(rgba.r, rgba.g, rgba.b, rgba.a);
+
+  static Hsla _createFromRgba(num r, num g, num b, num a) {
+    // Convert RGB to hsl.
+    // See site <http://easyrgb.com/index.php?X=MATH> for good documentation
+    // and color conversion routines.
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    // Hue, saturation and lightness.
+    num h;
+    num s;
+    num l;
+
+    num minRgb = math.min(r, math.min(g, b));
+    num maxRgb = math.max(r, math.max(g, b));
+    l = (maxRgb + minRgb) / 2;
+    if (l <= 0) {
+      return new Hsla(0, 0, l);   // Black;
+    }
+
+    num vm = maxRgb - minRgb;
+    s = vm;
+    if (s > 0) {
+      s /= (l < 0.5) ? (maxRgb + minRgb) : (2 - maxRgb - minRgb);
+    } else {
+      return new Hsla(0, 0, l);   // White
+    }
+
+    num r2, g2, b2;
+    r2 = (maxRgb - r) / vm;
+    g2 = (maxRgb - g) / vm;
+    b2 = (maxRgb - b) / vm;
+    if (r == maxRgb) {
+      h = (g == minRgb) ? 5.0 + b2 : 1 - g2;
+    } else if (g == maxRgb) {
+      h = (b == minRgb) ? 1 + r2 : 3 - b2;
+    } else {
+      h = (r == minRgb) ? 3 + g2 : 5 - r2;
+    }
+    h /= 6;
+
+    return new Hsla(h, s, l, a);
+  }
+
+  /**
+   * Returns 0..1 fraction (ratio of 360°, e.g. 1° == 1/360).
+   */
+  num get hue => _h;
+
+  /**
+   * Returns 0..1 fraction (1 == 100%)
+   */
+  num get saturation => _s;
+
+  /**
+   * Returns 0..1 fraction (1 == 100%).
+   */
+  num get lightness => _l;
+
+  /**
+   * Returns number as degrees 0..360.
+   */
+  num get hueDegrees => (_h * 360).round();
+
+  /**
+   * Returns number as percentage 0..100
+   */
+  num get saturationPercentage => (_s * 100).round();
+
+  /**
+   * Returns number as percentage 0..100.
+   */
+  num get lightnessPercentage => (_l * 100).round();
+
+  /**
+   * Returns number as 0..1
+   */
+  num get alpha => _a;
+
+  bool operator ==(Object other) => Color.equal(this, other);
+
+  String get cssExpression => (_a == null) ?
+      "hsl($hueDegrees,$saturationPercentage,$lightnessPercentage)" :
+      "hsla($hueDegrees,$saturationPercentage,$lightnessPercentage,$_a)";
+
+  String toHexArgbString() => new Rgba.fromHsla(this).toHexArgbString();
+
+  int get argbValue => Color.hexToInt(this.toHexArgbString());
+
+  Color get color => new Color.createHsla(_h, _s, _l, _a);
+  Rgba get rgba => new Rgba.fromHsla(this);
+
+  Hsla darker(num amount) =>
+      new Hsla.fromRgba(new Rgba.fromHsla(this).darker(amount));
+
+  Hsla lighter(num amount) =>
+      new Hsla.fromRgba(new Rgba.fromHsla(this).lighter(amount));
+
+  int get hashCode => toHexArgbString().hashCode;
+}
+
+
+/** X,Y position. */
+class PointXY implements _StyleProperty {
+  final num x, y;
+  const PointXY(this.x, this.y);
+
+  String get cssExpression {
+    // TODO(terry): TBD
+  }
+}
+
+
+// TODO(terry): Implement style and color.
+/**
+ * Supports border for measuring with layout.
+ */
+class Border implements _StyleProperty {
+  final int top, left, bottom, right;
+
+  // TODO(terry): Just like CSS, 1-arg -> set all properties, 2-args -> top and
+  //               bottom are first arg, left and right are second, 3-args, and
+  //               4-args -> tlbr or trbl.
+  const Border([this.top, this.left, this.bottom, this.right]);
+
+  // TODO(terry): Consider using Size or width and height.
+  Border.uniform(num amount) :
+      top = amount, left = amount, bottom = amount, right = amount;
+
+  int get width => left + right;
+  int get height => top + bottom;
+
+  String get cssExpression {
+    return (top == left && bottom == right && top == right) ? "${left}px" :
+      "${top != null ? '$top' : '0'}px ${
+      right != null ? '$right' : '0'}px ${
+      bottom != null ? '$bottom' : '0'}px ${
+      left != null ? '$left' : '0'}px";
+  }
+}
+
+
+/** Font style constants. */
+class FontStyle {
+  /** Font style [normal] default. */
+  static const String normal = "normal";
+  /**
+   * Font style [italic] use explicity crafted italic font otherwise inclined
+   * on the fly like oblique.
+   */
+  static const String italic = "italic";
+  /**
+   * Font style [oblique] is rarely used. The normal style of a font is inclined
+   * on the fly to the right by 8-12 degrees.
+   */
+  static const String oblique = "oblique";
+}
+
+
+/** Font variant constants. */
+class FontVariant {
+  /** Font style [normal] default. */
+  static const String normal = "normal";
+  /** Font variant [smallCaps]. */
+  static const String smallCaps = "small-caps";
+}
+
+
+/** Font weight constants values 100, 200, 300, 400, 500, 600, 700, 800, 900. */
+class FontWeight {
+  /** Font weight normal [default] */
+  static const int normal = 400;
+  /** Font weight bold */
+  static const int bold = 700;
+
+  static const int wt100 = 100;
+  static const int wt200 = 200;
+  static const int wt300 = 300;
+  static const int wt400 = 400;
+  static const int wt500 = 500;
+  static const int wt600 = 600;
+  static const int wt700 = 700;
+  static const int wt800 = 800;
+  static const int wt900 = 900;
+}
+
+
+/** Generic font family names. */
+class FontGeneric {
+  /** Generic family sans-serif font (w/o serifs). */
+  static const String sansSerif = "sans-serif";
+  /** Generic family serif font. */
+  static const String serif = "serif";
+  /** Generic family fixed-width font. */
+  static const monospace = "monospace";
+  /** Generic family emulate handwriting font. */
+  static const String cursive = "cursive";
+  /** Generic family decorative font. */
+  static const String fantasy = "fantasy";
+}
+
+
+/**
+ * List of most common font families across different platforms.  Use the
+ * collection names in the Font class (e.g., Font.SANS_SERIF, Font.FONT_SERIF,
+ * Font.MONOSPACE, Font.CURSIVE or Font.FANTASY).  These work best on all
+ * platforms using the fonts that best match availability on each platform.
+ * See <http://www.angelfire.com/al4/rcollins/style/fonts.html> for a good
+ * description of fonts available between platforms and browsers.
+ */
+class FontFamily {
+  /** Sans-Serif font for Windows similar to Helvetica on Mac bold/italic. */
+  static const String arial = "arial";
+  /** Sans-Serif font for Windows less common already bolded. */
+  static const String arialBlack = "arial black";
+  /** Sans-Serif font for Mac since 1984, similar to Arial/Helvetica. */
+  static const String geneva = "geneva";
+  /** Sans-Serif font for Windows most readable sans-serif font for displays. */
+  static const String verdana = "verdana";
+  /** Sans-Serif font for Mac since 1984 is identical to Arial. */
+  static const String helvetica = "helvetica";
+
+  /** Serif font for Windows traditional font with “old-style” numerals. */
+  static const String georgia = "georgia";
+  /**
+   * Serif font for Mac. PCs may have the non-scalable Times use Times New
+   * Roman instead.  Times is more compact than Times New Roman.
+   */
+  static const String times = "times";
+  /**
+   * Serif font for Windows most common serif font and default serif font for
+   * most browsers.
+   */
+  static const String timesNewRoman = "times new roman";
+
+  /**
+   * Monospace font for Mac/Windows most common. Scalable on Mac not scalable
+   * on Windows.
+   */
+  static const String courier = "courier";
+  /** Monospace font for Mac/Windows scalable on both platforms. */
+  static const String courierNew = "courier new";
+
+  /** Cursive font for Windows and default cursive font for IE. */
+  static const String comicSansMs = "comic sans ms";
+  /** Cursive font for Mac on Macs 2000 and newer. */
+  static const String textile = "textile";
+  /** Cursive font for older Macs. */
+  static const String appleChancery = "apple chancery";
+  /** Cursive font for some PCs. */
+  static const String zaphChancery = "zaph chancery";
+
+  /** Fantasy font on most Mac/Windows/Linux platforms. */
+  static const String impact = "impact";
+  /** Fantasy font for Windows. */
+  static const String webdings = "webdings";
+}
+
+class LineHeight {
+  final num height;
+  final bool inPixels;
+  const LineHeight(this.height, {this.inPixels : true});
+}
+
+// TODO(terry): Support @font-face fule.
+/**
+ * Font style support for size, family, weight, style, variant, and lineheight.
+ */
+class Font implements _StyleProperty {
+  /** Collection of most common sans-serif fonts in order. */
+  static const List<String> sansSerif = const [FontFamily.arial,
+                                               FontFamily.verdana,
+                                               FontFamily.geneva,
+                                               FontFamily.helvetica,
+                                               FontGeneric.sansSerif];
+
+  /** Collection of most common serif fonts in order. */
+  static const List<String> serif = const [FontFamily.georgia,
+                                           FontFamily.timesNewRoman,
+                                           FontFamily.times,
+                                           FontGeneric.serif];
+  /** Collection of most common monospace fonts in order. */
+  static const List<String> monospace = const [FontFamily.courierNew,
+                                               FontFamily.courier,
+                                               FontGeneric.monospace];
+  /** Collection of most common cursive fonts in order. */
+  static const List<String> cursive = const [FontFamily.textile,
+                                             FontFamily.appleChancery,
+                                             FontFamily.zaphChancery,
+                                             FontGeneric.fantasy];
+  /** Collection of most common fantasy fonts in order. */
+  static const List<String> fantasy = const [FontFamily.comicSansMs,
+                                             FontFamily.impact,
+                                             FontFamily.webdings,
+                                             FontGeneric.fantasy];
+
+  // TODO(terry): Should support the values xx-small, small, large, xx-large,
+  //              etc. (mapped to a pixel sized font)?
+  /** Font size in pixels. */
+  final num size;
+
+  // TODO(terry): _family should be an immutable list, wrapper class to do this
+  //              should exist in Dart.
+  /**
+   * Family specifies a list of fonts, the browser will sequentially select the
+   * the first known/supported font.  There are two types of font families the
+   * family-name (e.g., arial, times, courier, etc) or the generic-family (e.g.,
+   * serif, sans-seric, etc.)
+   */
+  final List<String> family;
+
+  /** Font weight from 100, 200, 300, 400, 500, 600, 700, 800, 900 */
+  final int weight;
+
+  /** Style of a font normal, italic, oblique. */
+  final String style;
+
+  /**
+   * Font variant NORMAL (default) or SMALL_CAPS.  Different set of font glyph
+   * lower case letters designed to have to fit within the font-height and
+   * weight of the corresponding lowercase letters.
+   */
+  final String variant;
+
+  final LineHeight lineHeight;
+
+  // TODO(terry): Size and computedLineHeight are in pixels.  Need to figure out
+  //              how to handle in other units (specified in other units) like
+  //              points, inches, etc.  Do we have helpers like Units.Points(12)
+  //              where 12 is in points and that's converted to pixels?
+  // TODO(terry): lineHeight is computed as 1.2 although CSS_RESET is 1.0 we
+  //              need to be consistent some browsers use 1 others 1.2.
+  // TODO(terry): There is a school of thought "Golden Ratio Typography".
+  // Where width to display the text is also important in computing the line
+  // height.  Classic typography suggest the ratio be 1.5.  See
+  // <http://www.pearsonified.com/2011/12/golden-ratio-typography.php> and
+  // <http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/>.
+  /**
+   * Create a font using [size] of font in pixels, [family] name of font(s)
+   * using [FontFamily], [style] of the font using [FontStyle], [variant] using
+   * [FontVariant], and [lineHeight] extra space (leading) around the font in
+   * pixels, if not specified it's 1.2 the font size.
+   */
+  const Font({this.size, this.family, this.weight, this.style, this.variant,
+              this.lineHeight});
+
+  /**
+   * Merge the two fonts and return the result. See [Style.merge] for
+   * more information.
+   */
+  factory Font.merge(Font a, Font b) {
+    if (a == null) return b;
+    if (b == null) return a;
+    return new Font._merge(a, b);
+  }
+
+  Font._merge(Font a, Font b)
+    : size = _mergeVal(a.size, b.size),
+      family = _mergeVal(a.family, b.family),
+      weight = _mergeVal(a.weight, b.weight),
+      style = _mergeVal(a.style, b.style),
+      variant = _mergeVal(a.variant, b.variant),
+      lineHeight = _mergeVal(a.lineHeight, b.lineHeight);
+
+  /**
+   * Shorthand CSS format for font is:
+   *
+   *    font-style font-variant font-weight font-size/line-height font-family
+   *
+   * The font-size and font-family values are required. If any of the other
+   * values are missing the default value is used.
+   */
+  String get cssExpression {
+    // TODO(jimhug): include variant, style, other options
+    if (weight != null) {
+      // TODO(jacobr): is this really correct for lineHeight?
+      if (lineHeight != null) {
+        return "$weight ${size}px/$lineHeightInPixels $_fontsAsString";
+      }
+      return '$weight ${size}px $_fontsAsString';
+    }
+
+    return '${size}px $_fontsAsString';
+  }
+
+  Font scale(num ratio) =>
+      new Font(size: size * ratio, family: family, weight: weight, style: style,
+          variant: variant);
+
+  /**
+   * The lineHeight, provides an indirect means to specify the leading. The
+   * leading is the difference between the font-size height and the (used)
+   * value of line height in pixels.  If lineHeight is not specified it's
+   * automatically computed as 1.2 of the font size.  Firefox is 1.2, Safari is
+   * ~1.2, and CSS suggest a ration from 1 to 1.2 of the font-size when
+   * computing line-height. The Font class constructor has the computation for
+   * _lineHeight.
+   */
+  num get lineHeightInPixels {
+    if (lineHeight != null) {
+      if (lineHeight.inPixels) {
+        return lineHeight.height;
+      } else {
+        return (size != null) ? lineHeight.height * size : null;
+      }
+    } else {
+      return (size != null) ? size * 1.2 : null;
+    }
+  }
+
+  int get hashCode {
+    // TODO(jimhug): Lot's of potential collisions here. List of fonts, etc.
+    return size.toInt() % family[0].hashCode;
+  }
+
+  bool operator ==(Object other) {
+    if (other is! Font) return false;
+    Font o = other;
+    return o.size == size && o.family == family && o.weight == weight &&
+        o.lineHeight == lineHeight && o.style == style && o.variant == variant;
+  }
+
+  // TODO(terry): This is fragile should probably just iterate through the list
+  //              of fonts construction the font-family string.
+  /** Return fonts as a comma seperated list sans the square brackets. */
+  String get _fontsAsString {
+    String fonts = family.toString();
+    return fonts.length > 2 ? fonts.substring(1, fonts.length - 1) : "";
+  }
+}
+
+/**
+ * This class stores the sizes of the box edges in the CSS [box model][]. Each
+ * edge area is placed around the sides of the content box. The innermost area
+ * is the [Style.padding] area which has a background and surrounds the content.
+ * The content and padding area is surrounded by the [Style.border], which
+ * itself is surrounded by the transparent [Style.margin]. This box represents
+ * the eges of padding, border, or margin depending on which accessor was used
+ * to retrieve it.
+ *
+ * [box model]: https://developer.mozilla.org/en/CSS/box_model
+ */
+class BoxEdge {
+  /** The size of the left edge, or null if the style has no edge. */
+  final num left;
+
+  /** The size of the top edge, or null if the style has no edge. */
+  final num top;
+
+  /** The size of the right edge, or null if the style has no edge. */
+  final num right;
+
+  /** The size of the bottom edge, or null if the style has no edge. */
+  final num bottom;
+
+  /**
+   * Creates a box edge with the specified [left], [top], [right], and
+   * [bottom] width.
+   */
+  const BoxEdge([this.left, this.top, this.right, this.bottom]);
+
+  /**
+   * Creates a box edge with the specified [top], [right], [bottom], and
+   * [left] width. This matches the typical CSS order:
+   * <https://developer.mozilla.org/en/CSS/margin>
+   * <https://developer.mozilla.org/en/CSS/border-width>
+   * <https://developer.mozilla.org/en/CSS/padding>.
+   */
+   const BoxEdge.clockwiseFromTop(this.top, this.right, this.bottom, this.left);
+
+  /**
+   * This is a helper to creates a box edge with the same [left], [top]
+   * [right], and [bottom] widths.
+   */
+  const BoxEdge.uniform(num size)
+    : top = size, left = size, bottom = size, right = size;
+
+  /**
+   * Takes a possibly null box edge, with possibly null metrics, and fills
+   * them in with 0 instead.
+   */
+  factory BoxEdge.nonNull(BoxEdge other) {
+    if (other == null) return const BoxEdge(0, 0, 0, 0);
+    num left = other.left;
+    num top = other.top;
+    num right = other.right;
+    num bottom = other.bottom;
+    bool make = false;
+    if (left == null) {
+      make = true;
+      left = 0;
+    }
+    if (top == null) {
+      make = true;
+      top = 0;
+    }
+    if (right == null) {
+      make = true;
+      right = 0;
+    }
+    if (bottom == null) {
+      make = true;
+      bottom = 0;
+    }
+    return make ? new BoxEdge(left, top, right, bottom) : other;
+  }
+
+  /**
+   * Merge the two box edge sizes and return the result. See [Style.merge] for
+   * more information.
+   */
+  factory BoxEdge.merge(BoxEdge x, BoxEdge y) {
+    if (x == null) return y;
+    if (y == null) return x;
+    return new BoxEdge._merge(x, y);
+  }
+
+  BoxEdge._merge(BoxEdge x, BoxEdge y)
+    : left = _mergeVal(x.left, y.left),
+      top = _mergeVal(x.top, y.top),
+      right = _mergeVal(x.right, y.right),
+      bottom = _mergeVal(x.bottom, y.bottom);
+
+  /**
+   * The total size of the horizontal edges. Equal to [left] + [right], where
+   * null is interpreted as 0px.
+   */
+  num get width => (left != null ? left : 0) + (right != null ? right : 0);
+
+  /**
+   * The total size of the vertical edges. Equal to [top] + [bottom], where
+   * null is interpreted as 0px.
+   */
+  num get height => (top != null ? top : 0) + (bottom != null ? bottom : 0);
+}
+
+_mergeVal(x, y) => y != null ? y : x;