finalize CSS part

gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java

@@ -17,10 +17,6 @@ package com.google.gwt.query.client;
 import static com.google.gwt.query.client.plugins.Effects.Effects;
 import static com.google.gwt.query.client.plugins.Events.Events;
 import static com.google.gwt.query.client.plugins.Widgets.Widgets;
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.HashMap;
-import java.util.List;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.JavaScriptObject;
 import com.google.gwt.core.client.JsArray;
@@ -35,13 +31,13 @@ import com.google.gwt.dom.client.Node;
 import com.google.gwt.dom.client.NodeList;
 import com.google.gwt.dom.client.OptionElement;
 import com.google.gwt.dom.client.SelectElement;
+import com.google.gwt.dom.client.TextAreaElement;
 import com.google.gwt.dom.client.Style.Display;
 import com.google.gwt.dom.client.Style.HasCssName;
-import com.google.gwt.dom.client.TextAreaElement;
 import com.google.gwt.query.client.css.CSS;
-import com.google.gwt.query.client.css.CssProperty;
-import com.google.gwt.query.client.css.TakeCssValue;
-import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
+import com.google.gwt.query.client.css.HasCssValue;
+import com.google.gwt.query.client.css.TakesCssValue;
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
 import com.google.gwt.query.client.impl.DocumentStyleImpl;
 import com.google.gwt.query.client.plugins.EventsListener;
 import com.google.gwt.user.client.DOM;
@@ -49,6 +45,11 @@ import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.EventListener;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.Widget;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.HashMap;
+import java.util.List;
 import com.google.gwt.query.client.LazyBase;
 
 public interface LazyGQuery<T> extends LazyBase<T>{
@@ -119,29 +120,32 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> append(String html);
 
   /**
-   * All of the matched set of elements will be inserted at the end
-   * of the element(s) specified by the parameter other.
-   *
-   * The operation $(A).appendTo(B) is, essentially, the reverse of doing a regular
-   * $(A).append(B), instead of appending B to A, you're appending A to B.
+   * All of the matched set of elements will be inserted at the end of the
+   * element(s) specified by the parameter other.
+   * 
+   * The operation $(A).appendTo(B) is, essentially, the reverse of doing a
+   * regular $(A).append(B), instead of appending B to A, you're appending A to
+   * B.
    */
   LazyGQuery<T> appendTo(GQuery other);
 
   /**
-   * All of the matched set of elements will be inserted at the end
-   * of the element(s) specified by the parameter other.
-   *
-   * The operation $(A).appendTo(B) is, essentially, the reverse of doing a regular
-   * $(A).append(B), instead of appending B to A, you're appending A to B.
+   * All of the matched set of elements will be inserted at the end of the
+   * element(s) specified by the parameter other.
+   * 
+   * The operation $(A).appendTo(B) is, essentially, the reverse of doing a
+   * regular $(A).append(B), instead of appending B to A, you're appending A to
+   * B.
    */
   LazyGQuery<T> appendTo(Node n);
 
   /**
-   * All of the matched set of elements will be inserted at the end
-   * of the element(s) specified by the parameter other.
-   *
-   * The operation $(A).appendTo(B) is, essentially, the reverse of doing a regular
-   * $(A).append(B), instead of appending B to A, you're appending A to B.
+   * All of the matched set of elements will be inserted at the end of the
+   * element(s) specified by the parameter other.
+   * 
+   * The operation $(A).appendTo(B) is, essentially, the reverse of doing a
+   * regular $(A).append(B), instead of appending B to A, you're appending A to
+   * B.
    */
   LazyGQuery<T> appendTo(String html);
 
@@ -153,16 +157,18 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   /**
    * Return a GWT Widget containing the first matched element.
    * 
-   * If the element is already associated to a widget it returns the original widget, 
-   * otherwise a new GWT widget will be created depending on the tagName.
+   * If the element is already associated to a widget it returns the original
+   * widget, otherwise a new GWT widget will be created depending on the
+   * tagName.
    * 
    */
   Widget asWidget();
 
   /**
    * Set a key/value object as properties to all matched elements.
-   *
-   * Example: $("img").attr(new Properties("src: 'test.jpg', alt: 'Test Image'"))
+   * 
+   * Example: $("img").attr(new
+   * Properties("src: 'test.jpg', alt: 'Test Image'"))
    */
   LazyGQuery<T> attr(Properties properties);
 
@@ -207,28 +213,28 @@ public interface LazyGQuery<T> extends LazyBase<T>{
 
   /**
    * Binds a set of handlers to a particular Event for each matched element.
-   *
+   * 
    * The event handlers are passed as Functions that you can use to prevent
    * default behavior. To stop both default action and event bubbling, the
    * function event handler has to return false.
-   *
+   * 
    * You can pass an additional Object data to your Function as the second
    * parameter
-   *
+   * 
    */
-  LazyGQuery<T> bind(int eventbits, Object data, Function...funcs);
+  LazyGQuery<T> bind(int eventbits, Object data, Function... funcs);
 
   /**
-   * Bind a set of functions to the blur event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the blur event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> blur(Function...f);
+  LazyGQuery<T> blur(Function... f);
 
   /**
-   * Bind a set of functions to the change event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the change event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> change(Function...f);
+  LazyGQuery<T> change(Function... f);
 
   /**
    * Get a set of elements containing all of the unique immediate children of
@@ -245,10 +251,10 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> children(String... filters);
 
   /**
-   * Bind a set of functions to the click event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the click event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> click(Function...f);
+  LazyGQuery<T> click(Function... f);
 
   /**
    * Clone matched DOM Elements and select the clones. This is useful for moving
@@ -267,13 +273,37 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    */
   LazyGQuery<T> contents();
 
+  /**
+   * Set CSS a single style property on every matched element using type-safe
+   * enumerations.
+   * 
+   * The best way to use this method (i.e. to generate a CssSetter) is to take
+   * the desired css property defined in {@link CSS} class and call the
+   * {@link TakesCssValue#with(HasCssName)} method on it.
+   * 
+   * 
+   * ex :
+   * <pre class="code">
+   * $("#myDiv").css(CSS.TOP.with(Length.cm(15)));
+   * $("#myDiv").css(CSS.BACKGROUND.with(RGBColor.SILVER, ImageValue.url(""),
+   *               BackgroundRepeat.NO_REPEAT, BackgroundAttachment.FIXED,
+   *               BackgroundPosition.CENTER));
+   * $("#myDiv").css(CSS.BACKGROUND_ATTACHMENT.with(BackgroundAttachment.FIXED));
+   * 
+   * </pre>
+   * 
+   */
+  LazyGQuery<T> css(CssSetter cssSetter);
+
   /**
    * Set a key/value object as style properties to all matched elements. This
    * serves as the best way to set a large number of style properties on all
    * matched elements.
-   *
-   * Example: $(".item").css(Properties.create("color: 'red', background:
-   * 'blue'"))
+   * 
+   * Example:
+   * <pre class="code">
+   *  $(".item").css(Properties.create("color: 'red', background:'blue'"))
+   * </pre>
    */
   LazyGQuery<T> css(Properties properties);
 
@@ -282,13 +312,32 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    */
   String css(String name);
 
+  /**
+   * Return a style property on the first matched element.
+   * 
+   * The parameter force has a special meaning here: - When force is false,
+   * returns the value of the css property defined in the style attribute of the
+   * element. - Otherwise it returns the real computed value.
+   * 
+   * For instance if you define 'display=none' not in the element style but in
+   * the css stylesheet, it returns an empty string unless you pass the
+   * parameter force=true.
+   */
+  String css(String name, boolean force);
+
+  /**
+   * Set a single style property to a value, on all matched elements.
+   * 
+   */
+  LazyGQuery<T> css(String prop, String val);
+
   /**
    * Return a style property on the first matched element using type-safe
    * enumerations.
    * 
    * Ex : $("#myId").css(CSS.BACKGROUND_COLOR);
    */
-  String css(CssProperty property);
+  String css(HasCssValue property);
 
   /**
    * Return a style property on the first matched element using type-safe
@@ -304,26 +353,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    * 
    * Ex : $("#myId").css(CSS.WIDTH, true);
    */
-  String css(CssProperty property, boolean force);
-
-  /**
-   * Return a style property on the first matched element.
-   *
-   * The parameter force has a special meaning here:
-   * - When force is false, returns the value of the css property defined
-   *   in the style attribute of the element.
-   * - Otherwise it returns the real computed value.
-   *
-   * For instance if you define 'display=none' not in the element style
-   * but in the css stylesheet, it returns an empty string unless you
-   * pass the parameter force=true.
-   */
-  String css(String name, boolean force);
-
-  /**
-   * Set a single style property to a value, on all matched elements.
-   */
-  LazyGQuery<T> css(String prop, String val);
+  String css(HasCssValue property, boolean force);
 
   /**
    * Set CSS a single style property on every matched element using type-safe
@@ -331,19 +361,12 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    * <i>inherit</i> value
    * 
    * ex :
+   * 
    * <pre class="code">
    * $(#myId).css(CSS.TEXT_DECORATION, CSS.INHERIT);
    * </pre>
    */
-  LazyGQuery<T> css(TakeCssValue<?> cssProperty, String value);
-
-  // LazyGQuery<T> css(TakesLength cssProperty, Length value);
-
-  // <X, Y, Z, T extends CssShorthandProperty3<X, Y, Z>> LazyGQuery<T> css( // T cssProperty, X value1, Y value2, Z value3);
-
-  // <W, X, Y, Z, T extends CssShorthandProperty4<W, X, Y, Z>> LazyGQuery<T> css( // T cssProperty, W value0, X value1, Y value2, Z value3);
-
-  // <V, W, X, Y, Z, T extends CssShorthandProperty5<V, W, X, Y, Z>> LazyGQuery<T> css( // T cssProperty, V value1, W value2, X value3, Y value4, Z value5);
+  LazyGQuery<T> css(TakesCssValue<?> cssProperty, String value);
 
   /**
    * Returns the numeric value of a css property.
@@ -352,11 +375,10 @@ public interface LazyGQuery<T> extends LazyBase<T>{
 
   /**
    * Returns the numeric value of a css property.
-   *  
-   * The parameter force has a special meaning:
-   * - When force is false, returns the value of the css property defined
-   *   in the set of style attributes. 
-   * - When true returns the real computed value.   
+   * 
+   * The parameter force has a special meaning: - When force is false, returns
+   * the value of the css property defined in the set of style attributes. -
+   * When true returns the real computed value.
    */
   double cur(String prop, boolean force);
 
@@ -369,7 +391,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   /**
    * Returns value at named data store for the element, as set by data(name,
    * value) with desired return type.
-   *
+   * 
    * @param clz return type class literal
    */
   <T> T data(String name, Class<T> clz);
@@ -380,16 +402,15 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> data(String name, Object value);
 
   /**
-   * Bind a set of functions to the dblclick event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the dblclick event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> dblclick(Function...f);
+  LazyGQuery<T> dblclick(Function... f);
 
   /**
-   * Run one or more Functions over each element of the GQuery.
-   * You have to override one of these funcions:
-   *    public void f(Element e)
-   *    public String f(Element e, int i)
+   * Run one or more Functions over each element of the GQuery. You have to
+   * override one of these funcions: public void f(Element e) public String
+   * f(Element e, int i)
    */
   LazyGQuery<T> each(Function... f);
 
@@ -400,10 +421,9 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   Element[] elements();
 
   /**
-   * Remove all child nodes from the set of matched elements.
-   * In the case of a document element, it removes all the content
-   * You should call this method whenever you create a new iframe and you
-   * want to add dynamic content to it.
+   * Remove all child nodes from the set of matched elements. In the case of a
+   * document element, it removes all the content You should call this method
+   * whenever you create a new iframe and you want to add dynamic content to it.
    */
   LazyGQuery<T> empty();
 
@@ -419,8 +439,8 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> eq(int pos);
 
   /**
-   * Bind a set of functions to the error event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the error event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
   LazyGQuery<T> error(Function... f);
 
@@ -466,7 +486,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    * Searches for all elements that match the specified css expression. This
    * method is a good way to find additional descendant elements with which to
    * process.
-   *
+   * 
    * Provide a comma-separated list of expressions to apply multiple filters at
    * once.
    */
@@ -478,10 +498,10 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> first();
 
   /**
-   * Bind a set of functions to the focus event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the focus event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> focus(Function...f);
+  LazyGQuery<T> focus(Function... f);
 
   /**
    * Return all elements matched in the GQuery as a NodeList. @see #elements()
@@ -520,8 +540,8 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   boolean hasClass(String... classes);
 
   /**
-   * Get the current computed, pixel, height of the first matched element.
-   * It does not include margin, padding nor border.
+   * Get the current computed, pixel, height of the first matched element. It
+   * does not include margin, padding nor border.
    */
   int height();
 
@@ -573,8 +593,8 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   int innerHeight();
 
   /**
-   * Returns the inner width of the first matched element, including padding
-   * but not the vertical scrollbar width, border, or margin.
+   * Returns the inner width of the first matched element, including padding but
+   * not the vertical scrollbar width, border, or margin.
    */
   int innerWidth();
 
@@ -599,7 +619,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   /**
    * Insert all of the matched elements before another, specified, set of
    * elements.
-   *
+   * 
    * The elements must already be inserted into the document (you can't insert
    * an element after another if it's not in the page).
    */
@@ -608,7 +628,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   /**
    * Insert all of the matched elements before another, specified, set of
    * elements.
-   *
+   * 
    * The elements must already be inserted into the document (you can't insert
    * an element after another if it's not in the page).
    */
@@ -617,7 +637,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   /**
    * Insert all of the matched elements before another, specified, set of
    * elements.
-   *
+   * 
    * The elements must already be inserted into the document (you can't insert
    * an element after another if it's not in the page).
    */
@@ -631,10 +651,10 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   boolean is(String... filters);
 
   /**
-   * Bind a set of functions to the keydown event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the keydown event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> keydown(Function...f);
+  LazyGQuery<T> keydown(Function... f);
 
   /**
    * Trigger a keydown event passing the key pushed.
@@ -642,10 +662,10 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> keydown(int key);
 
   /**
-   * Bind a set of functions to the keypress event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the keypress event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> keypress(Function...f);
+  LazyGQuery<T> keypress(Function... f);
 
   /**
    * Trigger a keypress event passing the key pushed.
@@ -653,10 +673,10 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> keypress(int key);
 
   /**
-   * Bind a set of functions to the keyup event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the keyup event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> keyup(Function...f);
+  LazyGQuery<T> keyup(Function... f);
 
   /**
    * Trigger a keyup event passing the key pushed.
@@ -692,40 +712,40 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> lt(int pos);
 
   /**
-   * Pass each element in the current matched set through a function, 
-   * producing a new array containing the return values.
+   * Pass each element in the current matched set through a function, producing
+   * a new array containing the return values.
    */
-  <W> List<W> map(Function f);
+  <W> ArrayList<W> map(Function f);
 
   /**
-   * Bind a set of functions to the mousedown event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the mousedown event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> mousedown(Function...f);
+  LazyGQuery<T> mousedown(Function... f);
 
   /**
-   * Bind a set of functions to the mousemove event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the mousemove event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> mousemove(Function...f);
+  LazyGQuery<T> mousemove(Function... f);
 
   /**
-   * Bind a set of functions to the mouseout event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the mouseout event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> mouseout(Function...f);
+  LazyGQuery<T> mouseout(Function... f);
 
   /**
-   * Bind a set of functions to the mouseover event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the mouseover event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> mouseover(Function...f);
+  LazyGQuery<T> mouseover(Function... f);
 
   /**
-   * Bind a set of functions to the mouseup event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the mouseup event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> mouseup(Function...f);
+  LazyGQuery<T> mouseup(Function... f);
 
   /**
    * Get a set of elements containing the unique next siblings of each of the
@@ -782,37 +802,37 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   /**
    * Binds a handler to a particular Event (like Event.ONCLICK) for each matched
    * element. The handler is executed only once for each element.
-   *
+   * 
    * The event handler is passed as a Function that you can use to prevent
    * default behavior. To stop both default action and event bubbling, the
    * function event handler has to return false.
-   *
+   * 
    * You can pass an additional Object data to your Function as the second
    * parameter
    */
   LazyGQuery<T> one(int eventbits, Object data, Function f);
 
   /**
-   * Get the current computed height for the first element in the set of matched elements, 
-   * including padding, border, but not the margin.
+   * Get the current computed height for the first element in the set of matched
+   * elements, including padding, border, but not the margin.
    */
   int outerHeight();
 
   /**
-   * Get the current computed height for the first element in the set of matched elements, 
-   * including padding, border, and optionally margin.
+   * Get the current computed height for the first element in the set of matched
+   * elements, including padding, border, and optionally margin.
    */
   int outerHeight(boolean includeMargin);
 
   /**
-   * Get the current computed width for the first element in the set of matched elements, 
-   * including padding, border, but not the margin.
+   * Get the current computed width for the first element in the set of matched
+   * elements, including padding, border, but not the margin.
    */
   int outerWidth();
 
   /**
-   * Get the current computed width for the first element in the set of matched elements, 
-   * including padding and border and optionally margin.
+   * Get the current computed width for the first element in the set of matched
+   * elements, including padding and border and optionally margin.
    */
   int outerWidth(boolean includeMargin);
 
@@ -872,29 +892,32 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> prepend(String html);
 
   /**
-   * All of the matched set of elements will be inserted at the beginning
-   * of the element(s) specified by the parameter other.
-   *
-   * The operation $(A).prependTo(B) is, essentially, the reverse of doing a regular
-   * $(A).prepend(B), instead of prepending B to A, you're prepending A to B.
+   * All of the matched set of elements will be inserted at the beginning of the
+   * element(s) specified by the parameter other.
+   * 
+   * The operation $(A).prependTo(B) is, essentially, the reverse of doing a
+   * regular $(A).prepend(B), instead of prepending B to A, you're prepending A
+   * to B.
    */
   LazyGQuery<T> prependTo(GQuery other);
 
   /**
-   * All of the matched set of elements will be inserted at the beginning
-   * of the element(s) specified by the parameter other.
-   *
-   * The operation $(A).prependTo(B) is, essentially, the reverse of doing a regular
-   * $(A).prepend(B), instead of prepending B to A, you're prepending A to B.
+   * All of the matched set of elements will be inserted at the beginning of the
+   * element(s) specified by the parameter other.
+   * 
+   * The operation $(A).prependTo(B) is, essentially, the reverse of doing a
+   * regular $(A).prepend(B), instead of prepending B to A, you're prepending A
+   * to B.
    */
   LazyGQuery<T> prependTo(Node n);
 
   /**
-   * All of the matched set of elements will be inserted at the beginning
-   * of the element(s) specified by the parameter other.
-   *
-   * The operation $(A).prependTo(B) is, essentially, the reverse of doing a regular
-   * $(A).prepend(B), instead of prepending B to A, you're prepending A to B.
+   * All of the matched set of elements will be inserted at the beginning of the
+   * element(s) specified by the parameter other.
+   * 
+   * The operation $(A).prependTo(B) is, essentially, the reverse of doing a
+   * regular $(A).prepend(B), instead of prepending B to A, you're prepending A
+   * to B.
    */
   LazyGQuery<T> prependTo(String html);
 
@@ -990,10 +1013,10 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   void saveCssAttrs(String... cssProps);
 
   /**
-   * Bind a set of functions to the scroll event of each matched element.
-   * Or trigger the event if no functions are provided.
+   * Bind a set of functions to the scroll event of each matched element. Or
+   * trigger the event if no functions are provided.
    */
-  LazyGQuery<T> scroll(Function...f);
+  LazyGQuery<T> scroll(Function... f);
 
   /**
    * Scrolls the first matched element into view.
@@ -1003,10 +1026,10 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   /**
    * Scrolls the first matched element into view.
    * 
-   * If ensure == true, it crawls up the DOM hierarchy, adjusting the scrollLeft and
-   * scrollTop properties of each scroll-able element to ensure that the
+   * If ensure == true, it crawls up the DOM hierarchy, adjusting the scrollLeft
+   * and scrollTop properties of each scroll-able element to ensure that the
    * specified element is completely in view. It adjusts each scroll position by
-   * the minimum amount necessary. 
+   * the minimum amount necessary.
    */
   LazyGQuery<T> scrollIntoView(boolean ensure);
 
@@ -1017,20 +1040,19 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   int scrollLeft();
 
   /**
-   * The scroll left offset is set to the passed value on
-   * all matched elements. This method works for both visible and hidden
-   * elements.
+   * The scroll left offset is set to the passed value on all matched elements.
+   * This method works for both visible and hidden elements.
    */
   LazyGQuery<T> scrollLeft(int left);
 
   /**
    * 
-   * Scrolls the contents of all matched elements to the specified co-ordinate 
-   * becoming the top left corner of the viewable area. 
+   * Scrolls the contents of all matched elements to the specified co-ordinate
+   * becoming the top left corner of the viewable area.
    * 
-   * This method is only useful where there are areas of the document not viewable within 
-   * the current viewable area of the window and the visible property 
-   * of the window's scrollbar must be set to true. 
+   * This method is only useful where there are areas of the document not
+   * viewable within the current viewable area of the window and the visible
+   * property of the window's scrollbar must be set to true.
    * 
    */
   LazyGQuery<T> scrollTo(int left, int top);
@@ -1042,45 +1064,19 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   int scrollTop();
 
   /**
-   * The scroll top offset is set to the passed value on
-   * all matched elements. This method works for both visible and hidden
-   * elements.
+   * The scroll top offset is set to the passed value on all matched elements.
+   * This method works for both visible and hidden elements.
    */
   LazyGQuery<T> scrollTop(int top);
 
   LazyGQuery<T> select();
 
   /**
-   * Force the current matched set of elements to become
-   * the specified array of elements.
+   * Force the current matched set of elements to become the specified array of
+   * elements.
    */
   LazyGQuery<T> setArray(NodeList<Element> nodes);
 
-  /**
-   * Set CSS a single style property on every matched element using type-safe
-   * enumerations.
-   * 
-   * The best way to use this method (i.e. to generate a CssSetter) is to take
-   * the desired css property defined in {@link CSS} class and call the
-   * {@link TakeCssValue#with(HasCssName)} method on it.
-   * 
-   *  ex :
-   *  
-   *  $("#myDiv").css(CSS.TOP.with(Length.cm(15)));
-   *  $("#myDiv").css(CSS.BACKGROUND.with(RGBColor.SILVER, ImageValue.url(""), BackgroundRepeat.NO_REPEAT, BackgroundAttachment.FIXED, BackgroundPosition.CENTER)); 
-   *  $("#myDiv").css(CSS.BACKGROUND_ATTACHMENT.with(BackgroundAttachment.FIXED));
-   * 
-   */
-  LazyGQuery<T> setCss(CssSetter cssSetter);
-
-  // <S, T extends TakeCssValue<S>> LazyGQuery<T> setCss(T cssProperty, S value);
-
-  // LazyGQuery<T> setCss(TakesLength cssProperty, Length value);
-
-  // <X, Y, Z, T extends CssShorthandProperty3<X, Y, Z>> LazyGQuery<T> setCss( // T cssProperty, X value1, Y value2, Z value3);
-
-  // <V, W, X, Y, Z, T extends CssShorthandProperty5<V, W, X, Y, Z>> LazyGQuery<T> setCss( // T cssProperty, V value1, W value2, X value3, Y value4, Z value5);
-
   void setPreviousObject(GQuery previousObject);
 
   void setSelector(String selector);
@@ -1135,17 +1131,17 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> toggle(Function... fn);
 
   /**
-   * Adds or removes the specified classes to each matched element
-   * depending on the class's presence.
+   * Adds or removes the specified classes to each matched element depending on
+   * the class's presence.
    */
   LazyGQuery<T> toggleClass(String... classes);
 
   /**
-   * Adds or removes the specified classes to each matched element
-   * depending on the value of the switch argument.
-   *
-   * if addOrRemove is true, the class is added and in the case of
-   * false it is removed.
+   * Adds or removes the specified classes to each matched element depending on
+   * the value of the switch argument.
+   * 
+   * if addOrRemove is true, the class is added and in the case of false it is
+   * removed.
    */
   LazyGQuery<T> toggleClass(String clz, boolean addOrRemove);
 
@@ -1166,12 +1162,12 @@ public interface LazyGQuery<T> extends LazyBase<T>{
 
   /**
    * Trigger a set of events on each matched element.
-   *
-   * For keyboard events you can pass a second parameter which represents
-   * the key-code of the pushed key.
-   *
-   * Example: fire(Event.ONCLICK | Event.ONFOCUS)
-   * Example: fire(Event.ONKEYDOWN. 'a');
+   * 
+   * For keyboard events you can pass a second parameter which represents the
+   * key-code of the pushed key.
+   * 
+   * Example: fire(Event.ONCLICK | Event.ONFOCUS) Example: fire(Event.ONKEYDOWN.
+   * 'a');
    */
   LazyGQuery<T> trigger(int eventbits, int... keys);
 
@@ -1190,7 +1186,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    * Gets the content of the value attribute of the first matched element,
    * returns only the first value even if it is a multivalued element. To get an
    * array of all values in multivalues elements use vals()
-   *
+   * 
    * When the first element is a radio-button and is not checked, then it looks
    * for a the first checked radio-button that has the same name in the list of
    * matched elements.
@@ -1207,11 +1203,11 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   /**
    * Gets the content of the value attribute of the first matched element,
    * returns more than one value if it is a multiple select.
-   *
+   * 
    * When the first element is a radio-button and is not checked, then it looks
    * for a the first checked radio-button that has the same name in the list of
    * matched elements.
-   *
+   * 
    * This method always returns an array. If no valid value can be determined
    * the array will be empty, otherwise it will contain one or more values.
    */
@@ -1223,8 +1219,8 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   boolean visible();
 
   /**
-   * Return the first non null attached widget from the matched elements
-   * or null if there isn't any.
+   * Return the first non null attached widget from the matched elements or null
+   * if there isn't any.
    */
   <W extends Widget> W widget();
 
@@ -1234,17 +1230,18 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   List<Widget> widgets();
 
   /**
-   * Return the list of attached widgets instance of the provided class matching the query.
+   * Return the list of attached widgets instance of the provided class matching
+   * the query.
+   * 
+   * This method is very useful for decoupled views, so as we can access widgets
+   * from other views without maintaining methods which export them.
    * 
-   * This method is very useful for decoupled views, so as we can access widgets from other
-   * views without maintaining methods which export them.
-   *  
    */
   <W extends Widget> List<W> widgets(Class<W> clazz);
 
   /**
-   * Get the current computed, pixel, width of the first matched element.
-   * It does not include margin, padding nor border.
+   * Get the current computed, pixel, width of the first matched element. It
+   * does not include margin, padding nor border.
    */
   int width();
 
@@ -1292,7 +1289,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    * get wrapped with an element. This wrapping process is most useful for
    * injecting additional structure into a document, without ruining the
    * original semantic qualities of a document.
-   *
+   * 
    * This works by going through the first element provided (which is generated,
    * on the fly, from the provided HTML) and finds the deepest descendant
    * element within its structure -- it is that element that will enwrap
@@ -1306,7 +1303,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    * get wrapped with an element. This wrapping process is most useful for
    * injecting additional structure into a document, without ruining the
    * original semantic qualities of a document.
-   *
+   * 
    * This works by going through the first element provided (which is generated,
    * on the fly, from the provided HTML) and finds the deepest descendant
    * element within its structure -- it is that element that will enwrap
@@ -1320,7 +1317,7 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    * get wrapped with an element. This wrapping process is most useful for
    * injecting additional structure into a document, without ruining the
    * original semantic qualities of a document.
-   *
+   * 
    * This works by going through the first element provided (which is generated,
    * on the fly, from the provided HTML) and finds the deepest descendant
    * element within its structure -- it is that element that will enwrap

gwtquery-core/src/main/java/com/google/gwt/query/client/css/AbstractCssProperty.java

@@ -1,80 +0,0 @@
-/*
- * Copyright 2011, The gwtquery team.
- * 
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy of
- * the License at
- * 
- * http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- */
-package com.google.gwt.query.client.css;
-
-import com.google.gwt.dom.client.Element;
-import com.google.gwt.dom.client.Style;
-import com.google.gwt.dom.client.Style.HasCssName;
-
-/**
- * Base class for Css property
- * 
- * @param <T> Class of the value associated with the css property
- */
-public abstract class AbstractCssProperty<T extends HasCssName> implements
-    TakeCssValue<T> {
-
-  protected class CssSetterImpl implements CssSetter {
-
-    private T cssValue;
-
-    public CssSetterImpl(T cssValue) {
-
-      this.cssValue = cssValue;
-    }
-
-    public void applyCss(Element e) {
-      assert e != null : "Impossible to apply css to a null object";
-      set(e.getStyle(), cssValue);
-    }
-  }
-  
-  protected class LengthCssSetter implements CssSetter{
-    
-    private Length length;
-    
-    public LengthCssSetter(Length length) {
-      this.length = length;
-    }
-      
-    public void applyCss(Element e) {
-      assert e != null : "Impossible to apply css to a null object";
-      e.getStyle().setProperty(getCssName(), length.getCssName());   
-    }
-  }
-
-  private String cssName;
-
-  protected AbstractCssProperty(String cssName) {
-    this.cssName = cssName;
-  }
-
-  public String get(Style s) {
-    return s.getProperty(getCssName());
-  }
-
-  public String getCssName() {
-    return cssName;
-  }
-
-  public void set(Style s, T value) {
-    s.setProperty(getCssName(), value.getCssName());
-  }
-
-  public CssSetter with(T value) {
-    return new CssSetterImpl(value);
-  }
-}

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundAttachmentProperty.java

@@ -23,7 +23,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * containing block (<i>'scroll'</i>).
  */
 public class BackgroundAttachmentProperty extends
-    AbstractCssProperty<BackgroundAttachmentProperty.BackgroundAttachment> {
+    CssProperty<BackgroundAttachmentProperty.BackgroundAttachment> {
 
   public static enum BackgroundAttachment implements HasCssName {
     /**

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundColorProperty.java

@@ -20,7 +20,7 @@ package com.google.gwt.query.client.css;
  * value or the keyword 'transparent', to make the underlying colors shine
  * through.
  */
-public class BackgroundColorProperty extends AbstractCssProperty<RGBColor> {
+public class BackgroundColorProperty extends CssProperty<RGBColor> {
 
   private static final String CSS_PROPERTY = "backgroundColor";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundImageProperty.java

@@ -18,7 +18,7 @@ package com.google.gwt.query.client.css;
 /**
  * This property sets the background image of an element,
  */
-public class BackgroundImageProperty extends AbstractCssProperty<ImageValue> {
+public class BackgroundImageProperty extends CssProperty<UriValue> {
 
   private static final String CSS_PROPERTY = "backgroundImage";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundPositionProperty.java

@@ -23,7 +23,7 @@ import com.google.gwt.dom.client.Style.Unit;
  * position.
  */
 public class BackgroundPositionProperty extends
-    AbstractCssProperty<BackgroundPositionProperty.BackgroundPosition> {
+    CssProperty<BackgroundPositionProperty.BackgroundPosition> {
 
   /**
    * Value for <i>background-position</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundProperty.java

@@ -19,7 +19,7 @@ import com.google.gwt.dom.client.Style;
 import com.google.gwt.query.client.css.BackgroundAttachmentProperty.BackgroundAttachment;
 import com.google.gwt.query.client.css.BackgroundPositionProperty.BackgroundPosition;
 import com.google.gwt.query.client.css.BackgroundRepeatProperty.BackgroundRepeat;
-import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
 
 /**
  * The <i>'background'</i> property is a shorthand property for setting the
@@ -29,7 +29,7 @@ import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
  * place in the style sheet.
  * 
  */
-public class BackgroundProperty implements CssProperty {
+public class BackgroundProperty implements HasCssValue {
 
   private static final String CSS_PROPERTY = "background";
 
@@ -45,7 +45,7 @@ public class BackgroundProperty implements CssProperty {
   private BackgroundProperty() {
   }
 
-  public String get(Style s) {
+  public String getCssValue(Style s) {
     return s.getProperty(CSS_PROPERTY);
   }
 
@@ -54,7 +54,7 @@ public class BackgroundProperty implements CssProperty {
   }
 
   public CssSetter with(final RGBColor backgroundColor,
-      ImageValue backgroundImage, BackgroundRepeat backgroundRepeat,
+      UriValue backgroundImage, BackgroundRepeat backgroundRepeat,
       BackgroundAttachment backgroundAttachment,
       BackgroundPosition backgroundPosition) {
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BackgroundRepeatProperty.java

@@ -23,7 +23,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * of a box
  */
 public class BackgroundRepeatProperty extends
-    AbstractCssProperty<BackgroundRepeatProperty.BackgroundRepeat> {
+    CssProperty<BackgroundRepeatProperty.BackgroundRepeat> {
 
   /**
    * Define possible values for <i>backgroung-repeat</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BorderCollapseProperty.java

@@ -21,7 +21,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  *The <i>border-collapse</i> selects a table's border model.
  */
 public class BorderCollapseProperty extends
-    AbstractCssProperty<BorderCollapseProperty.BorderCollapse> {
+    CssProperty<BorderCollapseProperty.BorderCollapse> {
 
   public static enum BorderCollapse implements HasCssName {
     /**

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BorderColorProperty.java

@@ -19,7 +19,7 @@ package com.google.gwt.query.client.css;
  * The <i>border-color</i> property specifies the color of a border of a
  * box.
  */
-public class BorderColorProperty extends AbstractCssProperty<RGBColor> {
+public class BorderColorProperty extends CssProperty<RGBColor> {
 
   private static final String BORDER_BOTTOM_COLOR_PROPERTY = "borderBottomColor";
   private static final String BORDER_COLOR_PROPERTY = "borderColor";

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BorderProperty.java

@@ -16,9 +16,9 @@
 package com.google.gwt.query.client.css;
 
 import com.google.gwt.dom.client.Style;
-import com.google.gwt.query.client.css.BorderStyleProperty.LineStyle;
-import com.google.gwt.query.client.css.BorderWidthProperty.LineWidth;
-import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
+import com.google.gwt.query.client.css.BorderStyleProperty.BorderStyle;
+import com.google.gwt.query.client.css.BorderWidthProperty.BorderWidth;
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
 
 /**
  * The <i>border</i> property is a shorthand property for setting the same
@@ -29,7 +29,7 @@ import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
  * 
  * 
  */
-public class BorderProperty implements CssProperty {
+public class BorderProperty implements HasCssValue {
 
   private static final String BORDER_BOTTOM_PROPERTY = "borderBottom";
   private static final String BORDER_LEFT_PROPERTY = "borderLeft";
@@ -55,7 +55,7 @@ public class BorderProperty implements CssProperty {
     cssProperty = property;
   }
 
-  public String get(Style s) {
+  public String getCssValue(Style s) {
     return s.getProperty(cssProperty);
   }
 
@@ -63,12 +63,12 @@ public class BorderProperty implements CssProperty {
     return cssProperty;
   }
 
-  public CssSetter with(LineWidth borderWidth, LineStyle borderStyle,
+  public CssSetter with(BorderWidth borderWidth, BorderStyle borderStyle,
       RGBColor borderColor) {
     return new MultipleValueCssSetter(getCssName(), borderWidth, borderStyle, borderColor);
   }
   
-  public CssSetter with(Length borderWidth, LineStyle borderStyle,
+  public CssSetter with(Length borderWidth, BorderStyle borderStyle,
       RGBColor borderColor) {
     return new MultipleValueCssSetter(getCssName(), borderWidth, borderStyle, borderColor);
   }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BorderSpacingProperty.java

@@ -25,7 +25,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * Lengths may not be negative.
  */
 public class BorderSpacingProperty extends
-    AbstractCssProperty<BorderSpacingProperty.BorderSpacing> {
+    CssProperty<BorderSpacingProperty.BorderSpacing> {
 
   /**
    * value for <i>border-spacing</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BorderStyleProperty.java

@@ -22,9 +22,9 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * (solid, double, dashed, etc.).
  */
 public class BorderStyleProperty extends
-    AbstractCssProperty<BorderStyleProperty.LineStyle> {
+    CssProperty<BorderStyleProperty.BorderStyle> {
 
-  public static enum LineStyle implements HasCssName {
+  public static enum BorderStyle implements HasCssName {
     /**
      * The border is a series of short line segments.
      */

gwtquery-core/src/main/java/com/google/gwt/query/client/css/BorderWidthProperty.java

@@ -21,12 +21,12 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * The <i>border-width</i> property specifies the width of the border of a box.
  */
 public class BorderWidthProperty extends
-    AbstractCssProperty<BorderWidthProperty.LineWidth> implements TakesLength {
+    CssProperty<BorderWidthProperty.BorderWidth> implements TakesLength {
 
   /**
    * Object allowing to specify a width of a line
    */
-  public static enum LineWidth implements HasCssName {
+  public static enum BorderWidth implements HasCssName {
 
     /**
      * Define a medium border.
@@ -71,6 +71,6 @@ public class BorderWidthProperty extends
   }
 
   public CssSetter with(Length value) {
-    return new LengthCssSetter(value);
+    return new SimpleCssSetter(this, value);
   }
 }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/CSS.java

@@ -30,8 +30,8 @@ import com.google.gwt.query.client.css.BackgroundPositionProperty.BackgroundPosi
 import com.google.gwt.query.client.css.BackgroundRepeatProperty.BackgroundRepeat;
 import com.google.gwt.query.client.css.BorderCollapseProperty.BorderCollapse;
 import com.google.gwt.query.client.css.BorderSpacingProperty.BorderSpacing;
-import com.google.gwt.query.client.css.BorderStyleProperty.LineStyle;
-import com.google.gwt.query.client.css.BorderWidthProperty.LineWidth;
+import com.google.gwt.query.client.css.BorderStyleProperty.BorderStyle;
+import com.google.gwt.query.client.css.BorderWidthProperty.BorderWidth;
 import com.google.gwt.query.client.css.CaptionSideProperty.CaptionSide;
 import com.google.gwt.query.client.css.ClearProperty.Clear;
 import com.google.gwt.query.client.css.ClipProperty.Shape;
@@ -65,13 +65,6 @@ public class CSS {
    * properties to their initial values, then assigns explicit values given in
    * the declaration.
    * </p>
-   * <h3>Example :</h3>
-   * 
-   * <pre class="code">$("#myId").css(CSS.BACKGROUND, RGBColor.TRANSPARENT,
-   *     ImageValue.url("back.jpg"), BackgroundRepeat.NO_REPEAT,
-   *     BackgroundAttachment.SCROLL, BackgroundPosition.CENTER);</code>
-   *
-   * </pre>
    */
   public static BackgroundProperty BACKGROUND;
 
@@ -85,11 +78,6 @@ public class CSS {
    * <p>
    * This property can only take a {@link BackgroundAttachment} object as value.
    * </p>
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BACKGROUND_ATTACHMENT, BackgroundAttachment.FIXED);
-   * </pre>
    */
   public static BackgroundAttachmentProperty BACKGROUND_ATTACHMENT;
 
@@ -123,7 +111,7 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link ImageValue} object as value.
+   * This property takes a {@link UriValue} object as value.
    * </p>
    * 
    * <h3>Examples:</h3>
@@ -146,13 +134,6 @@ public class CSS {
    * This property takes a {@link BackgroundPosition} object as value.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BACKGROUND_POSITION, BackgroundPosition.CENTER_TOP);
-   * $("#myId2").css(CSS.BACKGROUND_POSITION,BackgroundPosition.position(25, 25, Unit.PCT));
-   * </pre>
-   * 
    */
   public static BackgroundPositionProperty BACKGROUND_POSITION;
 
@@ -167,11 +148,6 @@ public class CSS {
    * This property takes a {@link BackgroundRepeat} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BACKGROUND_REPEAT, BackgroundRepeat.REPEAT_X);
-   * </pre>
    */
   public static BackgroundRepeatProperty BACKGROUND_REPEAT;
 
@@ -184,12 +160,6 @@ public class CSS {
    * the other border properties must be used.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER, LineWidth.THICK, LineStyle.DASHED,RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER, LineWidth.length(3, Unit.PX),LineStyle.SOLID, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderProperty BORDER;
 
@@ -199,12 +169,6 @@ public class CSS {
    * width, style, and color of the bottom border of a box.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_BOTTOM, LineWidth.THICK,LineStyle.DASHED, RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER_BOTTOM, LineWidth.length(3, Unit.PX),LineStyle.SOLID, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderProperty BORDER_BOTTOM;
 
@@ -218,12 +182,6 @@ public class CSS {
    * This property takes a {@link RGBColor} object as value.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_BOTTOM_COLOR, RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER_BOTTOM_COLOR, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderColorProperty BORDER_BOTTOM_COLOR;
 
@@ -234,14 +192,8 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineStyle} object as value.
+   * This property takes a {@link BorderStyle} object as value.
    * </p>
-   * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_BOTTOM_STYLE, LineStyle.DASHED);
-   * </pre>
    */
   public static BorderStyleProperty BORDER_BOTTOM_STYLE;
 
@@ -252,16 +204,10 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineWidth} or a {@link Length} object as
+   * This property takes a {@link BorderWidth} or a {@link Length} object as
    * value.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_BOTTOM_WIDTH, LineWidth.THICK);
-   * $("#myId2").css(CSS.BORDER_BOTTOM_WIDTH, Length.px(2));
-   * </pre>
    */
   public static BorderWidthProperty BORDER_BOTTOM_WIDTH;
 
@@ -274,11 +220,6 @@ public class CSS {
    * This property takes a {@link BorderCollapse} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_COLLAPSE, BorderCollapse.COLLAPSE);
-   * </pre>
    */
   public static BorderCollapseProperty BORDER_COLLAPSE;
 
@@ -292,12 +233,6 @@ public class CSS {
    * This property takes a {@link RGBColor} object as value.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_COLOR, RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER_COLOR, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderColorProperty BORDER_COLOR;
 
@@ -306,13 +241,6 @@ public class CSS {
    * The <i>border-left</i> property is a shorthand property for setting the
    * width, style, and color of the left border of a box.
    * </p>
-   * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_LEFT, LineWidth.THICK, LineStyle.DASHED, RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER_LEFT, LineWidth.length(3, Unit.PX), LineStyle.SOLID, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderProperty BORDER_LEFT;
 
@@ -326,12 +254,6 @@ public class CSS {
    * This property takes a {@link RGBColor} object as value.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_LEFT_COLOR, RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER_LEFT_COLOR, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderColorProperty BORDER_LEFT_COLOR;
 
@@ -342,14 +264,9 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineStyle} object as value.
+   * This property takes a {@link BorderStyle} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_LEFT_STYLE, LineStyle.DASHED);
-   * </pre>
    */
   public static BorderStyleProperty BORDER_LEFT_STYLE;
 
@@ -360,16 +277,10 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineWidth} or a {@link Length} object as
+   * This property takes a {@link BorderWidth} or a {@link Length} object as
    * value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_BOTTOM_WIDTH, LineWidth.THICK);
-   * $("#myId2").css(CSS.BORDER_BOTTOM_WIDTH, Length.px(2));
-   * </pre>
    */
   public static BorderWidthProperty BORDER_LEFT_WIDTH;
 
@@ -379,12 +290,6 @@ public class CSS {
    * width, style, and color of the right border of a box.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_RIGHT, LineWidth.THICK,LineStyle.DASHED, RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER_RIGHT, LineWidth.length(3, Unit.PX),LineStyle.SOLID, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderProperty BORDER_RIGHT;
 
@@ -398,12 +303,6 @@ public class CSS {
    * This property takes a {@link RGBColor} object as value.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_RIGHT_COLOR, RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER_RIGHT_COLOR, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderColorProperty BORDER_RIGHT_COLOR;
 
@@ -414,14 +313,9 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineStyle} object as value.
+   * This property takes a {@link BorderStyle} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_RIGHT_STYLE, LineStyle.DASHED);
-   * </pre>
    */
   public static BorderStyleProperty BORDER_RIGHT_STYLE;
 
@@ -432,16 +326,10 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineWidth} or a {@link Length} object as
+   * This property takes a {@link BorderWidth} or a {@link Length} object as
    * value.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_RIGHT_WIDTH, LineWidth.THICK);
-   * $("#myId2").css(CSS.BORDER_RIGHT_WIDTH, Length.px(2));
-   * </pre>
    */
   public static BorderWidthProperty BORDER_RIGHT_WIDTH;
 
@@ -458,15 +346,6 @@ public class CSS {
    * This property takes a {@link BorderSpacing} object as value.
    * </p>
    * 
-   * <h3>Exampls:</h3>
-   * 
-   * <pre class="code">
-   * // specify a horizontal and vertical spacing of 15px
-   * $("#myId").css(CSS.BORDER_SPACING, new BorderSpacing(Length.px(15)));
-   *
-   * // specify a horizontal spacing of 10px and a vertical spacing of 20em
-   * $("#myId2").css(CSS.BORDER_SPACING, new BorderSpacing(Length.px(10), Length.em(20)));
-   * </pre>
    */
   public static BorderSpacingProperty BORDER_SPACING;
 
@@ -477,14 +356,9 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineStyle} object as value.
+   * This property takes a {@link BorderStyle} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_STYLE, LineStyle.DASHED);
-   * </pre>
    */
   public static BorderStyleProperty BORDER_STYLE;
 
@@ -494,12 +368,6 @@ public class CSS {
    * width, style, and color of the top border of a box.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_TOP, LineWidth.THICK, LineStyle.DASHED, RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER_TOP, LineWidth.length(3, Unit.PX), LineStyle.SOLID, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderProperty BORDER_TOP;
 
@@ -513,12 +381,6 @@ public class CSS {
    * This property takes a {@link RGBColor} object as value.
    * </p>
    * 
-   * <h3>Examples:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_TOP_COLOR, RGBColor.BLACK);
-   * $("#myId2").css(CSS.BORDER_TOP_COLOR, RGBColor.rgb("#000000"));
-   * </pre>
    */
   public static BorderColorProperty BORDER_TOP_COLOR;
 
@@ -529,14 +391,9 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineStyle} object as value.
+   * This property takes a {@link BorderStyle} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_TOP_STYLE, LineStyle.DASHED);
-   * </pre>
    */
   public static BorderStyleProperty BORDER_TOP_STYLE;
 
@@ -547,16 +404,10 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineWidth} or a {@link Length} object as
+   * This property takes a {@link BorderWidth} or a {@link Length} object as
    * value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_TOP_WIDTH, LineWidth.THICK);
-   * $("#myId2").css(CSS.BORDER_TOP_WIDTH, Length.px(2));
-   * </pre>
    */
   public static BorderWidthProperty BORDER_TOP_WIDTH;
 
@@ -567,16 +418,10 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link LineWidth} or a {@link Length} object as
+   * This property takes a {@link BorderWidth} or a {@link Length} object as
    * value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BORDER_WIDTH, LineWidth.THICK);
-   * $("#myId2").css(CSS.BORDER_WIDTH, Length.px(2));
-   * </pre>
    */
   public static BorderWidthProperty BORDER_WIDTH;
 
@@ -602,11 +447,6 @@ public class CSS {
    * This property takes a {@link Length} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.BOTTOM,Length.px(20));
-   * </pre>
    */
   public static EdgePositionProperty BOTTOM;
 
@@ -620,11 +460,6 @@ public class CSS {
    * This property takes a {@link CaptionSide} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.CAPTION_SIDE, CaptionSide.BOTTOM);
-   * </pre>
    */
   public static CaptionSideProperty CAPTION_SIDE;
 
@@ -640,11 +475,6 @@ public class CSS {
    * This property takes a {@link Clear} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.CLEAR, Clear.BOTH);
-   * </pre>
    */
   public static ClearProperty CLEAR;
 
@@ -663,11 +493,6 @@ public class CSS {
    * This property takes a {@link Shape} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * $("#myId").css(CSS.CLIP, Shape.rect(0, 10, 10, 0));
-   * </pre>
    */
   public static ClipProperty CLIP;
 
@@ -679,18 +504,6 @@ public class CSS {
    * <p>
    * This property takes a {@link RGBColor} object as value.
    * </p>
-   * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * // Three different ways to specify red as text color for the element with id 'myId'
-   * $("#myId").css(CSS.COLOR, RGBColor.RED);
-   * $("#myId").css(CSS.COLOR, RGBColor.rgb(255,0,0));
-   * $("#myId").css(CSS.COLOR, RGBColor.rgb("#FF0000"));
-   *
-   * String color =  $("#myId").css(CSS.COLOR); 
-   * // retrieve the color of the element with id 'myId'
-   * </pre>
    */
   public static ColorProperty COLOR;
 
@@ -703,15 +516,6 @@ public class CSS {
    * This property takes a {@link Cursor} object as value.
    * </p>
    * 
-   * <h3>Example:</h3>
-   * 
-   * <pre class="code">
-   * // set a cursor to the element with id 'myId'
-   * $("#myId").css(CSS.CURSOR, Cursor.WAIT);
-   * // retrieve the cursor of the element with id 'myId'
-   * String cursor = $("#myId").css(CSS.CURSOR);
-   *
-   * </pre>
    */
   public static CursorProperty CURSOR;
 
@@ -932,8 +736,7 @@ public class CSS {
    * CSS value specifying that the setting of the related property should be
    * inherited from the parent element
    */
-  public static final String INHERIT= "inherit";
- 
+  public static final String INHERIT = "inherit";
 
   /**
    * <p>
@@ -1034,7 +837,7 @@ public class CSS {
    * </p>
    * 
    * <p>
-   * This property takes a {@link ImageValue} object as value.
+   * This property takes a {@link UriValue} object as value.
    * </p>
    * 
    * <h3>Example:</h3>
@@ -1300,7 +1103,7 @@ public class CSS {
    * style of an outline.
    * </p>
    * <p>
-   * This property takes a {@link LineStyle} object as value.
+   * This property takes a {@link BorderStyle} object as value.
    * </p>
    * 
    * <h3>Example:</h3>
@@ -1318,7 +1121,7 @@ public class CSS {
    * outline
    * </p>
    * <p>
-   * This property takes a {@link LineWidth} object as value.
+   * This property takes a {@link BorderWidth} object as value.
    * </p>
    * 
    * <h3>Example:</h3>

gwtquery-core/src/main/java/com/google/gwt/query/client/css/CaptionSideProperty.java

@@ -22,7 +22,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * table box.
  */
 public class CaptionSideProperty extends
-    AbstractCssProperty<CaptionSideProperty.CaptionSide> {
+    CssProperty<CaptionSideProperty.CaptionSide> {
 
   /**
    * Possible values for <i>caption-side</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClearProperty.java

@@ -21,7 +21,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * The clear property specifies which sides of an element where other floating
  * elements are not allowed.
  */
-public class ClearProperty extends AbstractCssProperty<ClearProperty.Clear> {
+public class ClearProperty extends CssProperty<ClearProperty.Clear> {
 
   /**
    * Possible values for <i>clear</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClipProperty.java

@@ -23,7 +23,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * element's box(es). The <i>clip</i> property allows you to modify this
  * clipping region by defining a shape.
  */
-public class ClipProperty extends AbstractCssProperty<ClipProperty.Shape> {
+public class ClipProperty extends CssProperty<ClipProperty.Shape> {
 
   /**
    * Object defining a clipping region used as value for <i>clip</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/ColorProperty.java

@@ -19,7 +19,7 @@ package com.google.gwt.query.client.css;
  * The <i>color</i> property describes the foreground color of an element's text
  * content.
  */
-public class ColorProperty extends AbstractCssProperty<RGBColor> {
+public class ColorProperty extends CssProperty<RGBColor> {
 
   private static final String CSS_PROPERTY = "color";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/CssProperty.java

@@ -15,22 +15,52 @@
  */
 package com.google.gwt.query.client.css;
 
+import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.Style;
+import com.google.gwt.dom.client.Style.HasCssName;
 
 /**
- * Minimal contract for an object defining a css property
+ * Base class for Css property
  * 
+ * @param <T> Class of the value associated with the css property
  */
-public interface CssProperty {
-
-  /**
-   * Return the value of the property as an enumerated type, or null, if the
-   * value falls outside the enumerated set.
-   */
-  String get(Style s);
-
-  /**
-   * Return the css name of this property
-   */
-  String getCssName();
+public class CssProperty<T extends HasCssName> implements
+    TakesCssValue<T> {
+
+  protected class CssSetterImpl implements CssSetter {
+
+    private T cssValue;
+
+    public CssSetterImpl(T cssValue) {
+
+      this.cssValue = cssValue;
+    }
+
+    public void applyCss(Element e) {
+      assert e != null : "Impossible to apply css to a null object";
+      set(e.getStyle(), cssValue);
+    }
+  }
+  
+  private String cssName;
+
+  protected CssProperty(String cssName) {
+    this.cssName = cssName;
+  }
+
+  public String getCssName() {
+    return cssName;
+  }
+
+  public String getCssValue(Style s) {
+    return s.getProperty(getCssName());
+  }
+
+  public CssSetter with(T value) {
+    return new CssSetterImpl(value);
+  }
+
+  protected void set(Style s, T value) {
+    s.setProperty(getCssName(), value != null ? value.getCssName() : "");
+  }
 }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/CursorProperty.java

@@ -21,7 +21,7 @@ import com.google.gwt.dom.client.Style.Cursor;
  * The <i>cursor</i> property specifies the type of cursor to be displayed for
  * the pointing device
  */
-public class CursorProperty extends AbstractCssProperty<Cursor> {
+public class CursorProperty extends CssProperty<Cursor> {
 
   private static final String CSS_PROPERTY = "cursor";
 
@@ -32,4 +32,8 @@ public class CursorProperty extends AbstractCssProperty<Cursor> {
   private CursorProperty() {
     super(CSS_PROPERTY);
   }
+  
+  public CssSetter with(UriValue url){
+    return new SimpleCssSetter(this, url);
+  }
 }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/DirectionProperty.java

@@ -25,7 +25,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * incomplete last line in a block in case of 'text-align: justify'.
  */
 public class DirectionProperty extends
-    AbstractCssProperty<DirectionProperty.Direction> {
+    CssProperty<DirectionProperty.Direction> {
 
   /**
    * Possible values for <i>direction</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/DisplayProperty.java

@@ -20,7 +20,7 @@ import com.google.gwt.dom.client.Style.Display;
 /**
  * This property specifies the mechanism by which elements are rendered.
  */
-public class DisplayProperty extends AbstractCssProperty<Display> {
+public class DisplayProperty extends CssProperty<Display> {
 
   private static final String CSS_PROPERTY = "display";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/EdgePositionProperty.java

@@ -15,12 +15,11 @@
  */
 package com.google.gwt.query.client.css;
 
-import com.google.gwt.query.client.Properties;
 
 /**
  * Specify position of element's edges.
  */
-public class EdgePositionProperty extends AbstractCssProperty<Length> {
+public class EdgePositionProperty extends CssProperty<Length> {
 
   public static void init() {
     CSS.BOTTOM = new EdgePositionProperty("bottom");

gwtquery-core/src/main/java/com/google/gwt/query/client/css/EmptyCellsProperty.java

@@ -25,7 +25,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * ("\09"), and space ("\20").
  */
 public class EmptyCellsProperty extends
-    AbstractCssProperty<EmptyCellsProperty.EmptyCells> {
+    CssProperty<EmptyCellsProperty.EmptyCells> {
 
   /**
    * Possible values for <i>empty-cells</i> property.)

gwtquery-core/src/main/java/com/google/gwt/query/client/css/FloatProperty.java

@@ -23,7 +23,7 @@ import com.google.gwt.dom.client.Style.Float;
  * at all. It may be set for any element, but only applies to elements that
  * generate boxes that are not absolutely positioned.
  */
-public class FloatProperty extends AbstractCssProperty<Float> {
+public class FloatProperty extends CssProperty<Float> {
 
   private static final String CSS_PROPERTY = "float";
 
@@ -36,7 +36,7 @@ public class FloatProperty extends AbstractCssProperty<Float> {
   }
 
   @Override
-  public void set(Style s, Float value) {
+  protected void set(Style s, Float value) {
     s.setFloat(value);
   }
 }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/FontSizeProperty.java

@@ -21,7 +21,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * This property specifies the size of a font.
  */
 public class FontSizeProperty extends
-    AbstractCssProperty<FontSizeProperty.FontSize> implements TakesLength {
+    CssProperty<FontSizeProperty.FontSize> implements TakesLength {
 
   /**
    * Possible values for the <i>font-size</i> property.
@@ -88,6 +88,6 @@ public class FontSizeProperty extends
   }
 
   public CssSetter with(Length value) {
-    return new LengthCssSetter(value);
+    return new SimpleCssSetter(this, value);
   }
 }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/FontStyleProperty.java

@@ -21,7 +21,7 @@ import com.google.gwt.dom.client.Style.FontStyle;
  * The <i>font-style</i> property requests normal (sometimes referred to as
  * "roman" or "upright"), italic, and oblique faces within a font family.
  */
-public class FontStyleProperty extends AbstractCssProperty<FontStyle> {
+public class FontStyleProperty extends CssProperty<FontStyle> {
 
   private static final String CSS_PROPERTY = "fontStyle";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/FontVariantProperty.java

@@ -26,7 +26,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * most of the world's writing systems).
  */
 public class FontVariantProperty extends
-    AbstractCssProperty<FontVariantProperty.FontVariant> {
+    CssProperty<FontVariantProperty.FontVariant> {
 
   /**
    * Possible values for the <i>font-variant</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/FontWeightProperty.java

@@ -20,7 +20,7 @@ import com.google.gwt.dom.client.Style.FontWeight;
 /**
  * The <i>font-weight</i> property specifies the weight of the font.
  */
-public class FontWeightProperty extends AbstractCssProperty<FontWeight> {
+public class FontWeightProperty extends CssProperty<FontWeight> {
 
   private static final String CSS_PROPERTY = "fontWeight";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/ImageValue.java → gwtquery-core/src/main/java/com/google/gwt/query/client/css/HasCssValue.java

@@ -15,37 +15,18 @@
  */
 package com.google.gwt.query.client.css;
 
+import com.google.gwt.dom.client.Style;
 import com.google.gwt.dom.client.Style.HasCssName;
 
 /**
- * Image as css value
+ * Minimal contract for an object defining a css property
+ * 
  */
-public class ImageValue implements HasCssName {
-
-  /**
-   * Specify that no image is used
-   */
-  public static final ImageValue NONE;
-
-  static {
-    NONE = new ImageValue("none");
-  }
+public interface HasCssValue extends HasCssName {
 
   /**
-   * Define an image by its url
+   * Return the value of the property as an enumerated type, or null, if the
+   * value falls outside the enumerated set.
    */
-  public static ImageValue url(String url) {
-    return new ImageValue("url('" + url + "')");
-  }
-
-  private String value;
-
-  private ImageValue(String value) {
-    this.value = value;
-  }
-
-  public String getCssName() {
-    return value;
-  }
-
-}
+  String getCssValue(Style s);
+}

gwtquery-core/src/main/java/com/google/gwt/query/client/css/HeightProperty.java

@@ -19,7 +19,7 @@ package com.google.gwt.query.client.css;
  * All height css properties : <i>max-height</i>, <i>min-height</i>,
  * <i>height</i>
  */
-public class HeightProperty extends AbstractCssProperty<Length> {
+public class HeightProperty extends CssProperty<Length> {
 
   private static final String HEIGHT_PROPERTY = "height";
   private static final String MAX_HEIGHT_PROPERTY = "maxHeight";

gwtquery-core/src/main/java/com/google/gwt/query/client/css/LetterSpacingProperty.java

@@ -19,7 +19,7 @@ package com.google.gwt.query.client.css;
  * The <i>letter-spacing</i> property specifies spacing behavior between text
  * characters.
  */
-public class LetterSpacingProperty extends AbstractCssProperty<Length> {
+public class LetterSpacingProperty extends CssProperty<Length> {
 
   private static final String CSS_PROPERTY = "letterSpacing";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/LineHeightProperty.java

@@ -15,8 +15,6 @@
  */
 package com.google.gwt.query.client.css;
 
-import com.google.gwt.dom.client.Style;
-
 /**
  * <p>
  * If the property is set on a block-level element whose content is composed of
@@ -31,8 +29,8 @@ import com.google.gwt.dom.client.Style;
  * property.)
  * </p>
  */
-public class LineHeightProperty extends AbstractCssProperty<CssNumber>
-    implements TakesLength {
+public class LineHeightProperty extends CssProperty<Length> implements
+    TakesNumber {
 
   private static final String CSS_PROPERTY = "lineHeight";
 
@@ -44,13 +42,12 @@ public class LineHeightProperty extends AbstractCssProperty<CssNumber>
     super(CSS_PROPERTY);
   }
 
-  public void set(Style s, Length p) {
-    s.setProperty(CSS_PROPERTY, p.getCssName());
-
+  public CssSetter with(Integer value) {
+    return new SimpleCssSetter(CSS_PROPERTY, value != null ? "" + value : null);
   }
-  
-  public CssSetter with(Length value) {
-    return new LengthCssSetter(value);
+
+  public CssSetter with(Double value) {
+    return new SimpleCssSetter(CSS_PROPERTY, value != null ? "" + value : null);
   }
 
 }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/ListStyleImageProperty.java

@@ -20,7 +20,7 @@ package com.google.gwt.query.client.css;
  * list item marker. When the image is available, it will replace the marker set
  * with the <i>list-style-type</i> marker.
  */
-public class ListStyleImageProperty extends AbstractCssProperty<ImageValue> {
+public class ListStyleImageProperty extends CssProperty<UriValue> {
 
   private static final String CSS_PROPERTY = "listStyleImage";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/ListStylePositionProperty.java

@@ -22,7 +22,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * box in the principal block box.
  */
 public class ListStylePositionProperty extends
-    AbstractCssProperty<ListStylePositionProperty.ListStylePosition> {
+    CssProperty<ListStylePositionProperty.ListStylePosition> {
 
   /**
    * Possible values for <i>list-style-position</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/ListStyleProperty.java

@@ -18,14 +18,14 @@ package com.google.gwt.query.client.css;
 import com.google.gwt.dom.client.Style;
 import com.google.gwt.dom.client.Style.ListStyleType;
 import com.google.gwt.query.client.css.ListStylePositionProperty.ListStylePosition;
-import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
 
 /**
  * The <i>list-style</i> property is a shorthand notation for setting the three
  * properties <i>list-style-type</i>, <i>list-style-image</i>, and
  * <i>list-style-position</i> at the same place in the style sheet.
  */
-public class ListStyleProperty implements CssProperty {
+public class ListStyleProperty implements HasCssValue {
 
   private static final String CSS_PROPERTY = "listStyle";
 
@@ -39,7 +39,7 @@ public class ListStyleProperty implements CssProperty {
   private ListStyleProperty() {
   }
 
-  public String get(Style s) {
+  public String getCssValue(Style s) {
     return s.getProperty(CSS_PROPERTY);
   }
 
@@ -48,7 +48,7 @@ public class ListStyleProperty implements CssProperty {
   }
 
   public CssSetter with(ListStyleType listStyleType,
-      ListStylePosition listStylePosition, ImageValue listStyleImage) {
+      ListStylePosition listStylePosition, UriValue listStyleImage) {
     return new MultipleValueCssSetter(CSS_PROPERTY, listStyleType,
         listStylePosition, listStyleImage);
   }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/ListStyleTypeProperty.java

@@ -25,7 +25,7 @@ import com.google.gwt.dom.client.Style.ListStyleType;
  * and alphabetic systems. Note. Numbered lists improve document accessibility
  * by making lists easier to navigate.
  */
-public class ListStyleTypeProperty extends AbstractCssProperty<ListStyleType> {
+public class ListStyleTypeProperty extends CssProperty<ListStyleType> {
 
   private static final String CSS_PROPERTY = "listStyleType";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/MarginProperty.java

@@ -20,14 +20,14 @@ import com.google.gwt.dom.client.Style;
 /**
  * The margin property sets the margins of an element.
  */
-public class MarginProperty extends AbstractCssProperty<Length> {
+public class MarginProperty extends CssProperty<Length> {
 
-  public static class ShorthandMarginProperty implements CssProperty {
+  public static class ShorthandMarginProperty implements HasCssValue {
 
     private ShorthandMarginProperty() {
     }
 
-    public String get(Style s) {
+    public String getCssValue(Style s) {
       return s.getMargin();
     }
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/MultipleValueCssSetter.java

@@ -1,37 +1,26 @@
 package com.google.gwt.query.client.css;
 
-import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.Style.HasCssName;
-import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
 
-public class MultipleValueCssSetter implements CssSetter {
+public class MultipleValueCssSetter extends SimpleCssSetter {
 
-  private String cssValue;
-  private String cssPropertyName;
   
   public MultipleValueCssSetter(String cssPropertyName, HasCssName... values) {
-    computeValue(values);
-    this.cssPropertyName = cssPropertyName;
+    super(cssPropertyName, computeValue(values));
   }
   
-  protected void computeValue(HasCssName... values){
+  protected static String computeValue(HasCssName... values){
     StringBuilder valueBuilder = new StringBuilder();
     
     for (HasCssName cssValue : values){
       valueBuilder.append(notNull(cssValue));
     }
 
-    cssValue = valueBuilder.toString().trim();
+    return valueBuilder.toString().trim();
   }
 
-  public void applyCss(Element e) {
-    assert e != null : "Impossible to apply css to a null object";
-    e.getStyle().setProperty(cssPropertyName, cssValue);
-    
-  }
-  
 
-  private String notNull(HasCssName value) {
+  private static String notNull(HasCssName value) {
     return value != null ? value.getCssName() + " " : "";
   }
   

gwtquery-core/src/main/java/com/google/gwt/query/client/css/OutlineColorProperty.java

@@ -20,7 +20,7 @@ package com.google.gwt.query.client.css;
  * make the element "stand out". The outline-color property specifies the color
  * of an outline.
  */
-public class OutlineColorProperty extends AbstractCssProperty<RGBColor> {
+public class OutlineColorProperty extends CssProperty<RGBColor> {
 
   private static final String CSS_PROPERTY = "outlineColor";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/OutlineProperty.java

@@ -16,9 +16,9 @@
 package com.google.gwt.query.client.css;
 
 import com.google.gwt.dom.client.Style;
-import com.google.gwt.query.client.css.BorderStyleProperty.LineStyle;
-import com.google.gwt.query.client.css.BorderWidthProperty.LineWidth;
-import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
+import com.google.gwt.query.client.css.BorderStyleProperty.BorderStyle;
+import com.google.gwt.query.client.css.BorderWidthProperty.BorderWidth;
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
 
 /**
  * An outline is a line that is drawn around elements (outside the borders) to
@@ -28,7 +28,7 @@ import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
  * declaration.
  */
 public class OutlineProperty implements
-    CssProperty{
+    HasCssValue{
 
   private static final String CSS_PROPERTY = "outline";
 
@@ -42,7 +42,7 @@ public class OutlineProperty implements
   private OutlineProperty() {
   }
 
-  public String get(Style s) {
+  public String getCssValue(Style s) {
     return s.getProperty(CSS_PROPERTY);
   }
 
@@ -50,12 +50,12 @@ public class OutlineProperty implements
     return CSS_PROPERTY;
   }
 
-  public CssSetter with(RGBColor outlineColor, LineStyle outlineStyle,
-      LineWidth outlineWidth) {
+  public CssSetter with(RGBColor outlineColor, BorderStyle outlineStyle,
+      BorderWidth outlineWidth) {
     return new MultipleValueCssSetter(CSS_PROPERTY, outlineColor, outlineStyle, outlineWidth);
   }
 
-  public CssSetter with(RGBColor outlineColor, LineStyle outlineStyle,
+  public CssSetter with(RGBColor outlineColor, BorderStyle outlineStyle,
       Length outlineWidth) {
     return new MultipleValueCssSetter(CSS_PROPERTY, outlineColor, outlineStyle, outlineWidth);
   }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/OutlineStyleProperty.java

@@ -15,14 +15,14 @@
  */
 package com.google.gwt.query.client.css;
 
-import com.google.gwt.query.client.css.BorderStyleProperty.LineStyle;
+import com.google.gwt.query.client.css.BorderStyleProperty.BorderStyle;
 
 /**
  * An outline is a line that is drawn around elements (outside the borders) to
  * make the element "stand out". The outline-color property specifies the style
  * of an outline.
  */
-public class OutlineStyleProperty extends AbstractCssProperty<LineStyle> {
+public class OutlineStyleProperty extends CssProperty<BorderStyle> {
 
   private static final String CSS_PROPERTY = "outlineStyle";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/OutlineWidthProperty.java

@@ -15,14 +15,14 @@
  */
 package com.google.gwt.query.client.css;
 
-import com.google.gwt.query.client.css.BorderWidthProperty.LineWidth;
+import com.google.gwt.query.client.css.BorderWidthProperty.BorderWidth;
 
 /**
  * An outline is a line that is drawn around elements (outside the borders) to
  * make the element "stand out". The outline-width specifies the width of an
  * outline
  */
-public class OutlineWidthProperty extends AbstractCssProperty<LineWidth>
+public class OutlineWidthProperty extends CssProperty<BorderWidth>
     implements TakesLength {
 
   private static final String CSS_PROPERTY = "outlineWidth";
@@ -36,6 +36,6 @@ public class OutlineWidthProperty extends AbstractCssProperty<LineWidth>
   }
   
   public CssSetter with(Length value) {
-    return new LengthCssSetter(value);
+    return new SimpleCssSetter(this, value);
   }
 }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/OverflowProperty.java

@@ -22,7 +22,7 @@ import com.google.gwt.dom.client.Style.Overflow;
  * element is clipped when it overflows the element's box (which is acting as a
  * containing block for the content).
  */
-public class OverflowProperty extends AbstractCssProperty<Overflow> {
+public class OverflowProperty extends CssProperty<Overflow> {
 
   private static final String CSS_PROPERTY = "overflow";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/PaddingProperty.java

@@ -21,9 +21,9 @@ import com.google.gwt.dom.client.Style;
  * The padding properties define the space between the element border and the
  * element content.
  */
-public class PaddingProperty extends AbstractCssProperty<Length> {
+public class PaddingProperty extends CssProperty<Length> {
 
-  public static class ShorthandPaddingProperty implements CssProperty {
+  public static class ShorthandPaddingProperty implements HasCssValue {
 
     private ShorthandPaddingProperty() {
     }
@@ -35,7 +35,7 @@ public class PaddingProperty extends AbstractCssProperty<Length> {
 
     }
 
-    public String get(Style s) {
+    public String getCssValue(Style s) {
       return s.getPadding();
     }
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/PositionProperty.java

@@ -21,7 +21,7 @@ import com.google.gwt.dom.client.Style.Position;
  * The <i>position</i> property determines which of the CSS2 positioning
  * algorithms is used to calculate the position of a box.
  */
-public class PositionProperty extends AbstractCssProperty<Position> {
+public class PositionProperty extends CssProperty<Position> {
 
   private static final String CSS_PROPERTY = "position";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/RGBColor.java

@@ -24,8 +24,10 @@ public class RGBColor implements HasCssName {
 
   public static RGBColor AQUA;
   public static RGBColor BLACK;
+  public static RGBColor BLUE;
   public static RGBColor FUSCHIA;
   public static RGBColor GRAY;
+  public static RGBColor GREY;
   public static RGBColor GREEN;
   public static RGBColor LIME;
   public static RGBColor MAROON;
@@ -43,8 +45,10 @@ public class RGBColor implements HasCssName {
   static {
     AQUA = rgb("aqua");
     BLACK = rgb("black");
+    BLUE = rgb("blue");
     FUSCHIA = rgb("fuschia");
     GRAY = rgb("gray");
+    GREY = rgb("grey");
     GREEN = rgb("green");
     LIME = rgb("lime");
     MAROON = rgb("maroon");

gwtquery-core/src/main/java/com/google/gwt/query/client/css/SimpleCssSetter.java

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2011, The gwtquery team.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.Style.HasCssName;
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
+
+/**
+ * Simple implementation of {@link CssSetter} interface. It does its job for the
+ * most CSS property
+ *
+ */
+public class SimpleCssSetter implements CssSetter {
+
+  private String property;
+  private String value;
+  
+  public SimpleCssSetter(HasCssValue property, HasCssName value) {
+    this(property.getCssName(), value != null ? value.getCssName() : null);
+  }
+
+  public SimpleCssSetter(String property, String value) {
+    this.property = property;
+    this.value = value;
+  }
+
+  public void applyCss(Element e) {
+    assert e != null : "Impossible to apply css to a null object";
+    e.getStyle().setProperty(property, value != null ? value : "");
+
+  }
+
+}

gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakeCssValue.java → gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesCssValue.java

@@ -16,18 +16,16 @@
 package com.google.gwt.query.client.css;
 
 import com.google.gwt.dom.client.Element;
-import com.google.gwt.dom.client.Style.HasCssName;
 
 /**
  * An CSS property with values of type T.
  */
-public interface TakeCssValue<T extends HasCssName> extends CssProperty {
+public interface TakesCssValue<T> extends HasCssValue {
 
   public interface CssSetter {
     public void applyCss(Element e);
   }
 
-
   CssSetter with(T value);
 
 }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesInteger.java

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2011, The gwtquery team.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
+
+/**
+ * Interface to be implemented by properties which take a integer as defined in
+ * css2 specification
+ * 
+ * @see http://www.w3.org/TR/CSS21/syndata.html#value-def-number
+ */
+public interface TakesInteger extends HasCssValue {
+
+  CssSetter with(Integer value);
+}

gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesLength.java

@@ -15,12 +15,12 @@
  */
 package com.google.gwt.query.client.css;
 
-import com.google.gwt.query.client.css.TakeCssValue.CssSetter;
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
 
 /**
  * Interface to be implemented by properties which take length units in addition
  * to an other type. If the properties takes only length units, please use
- * {@link TakeCssValue} instead.
+ * {@link TakesCssValue} instead.
  */
 public interface TakesLength {
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/TakesNumber.java

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2011, The gwtquery team.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.query.client.css;
+
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
+
+/**
+ * Interface to be implemented by properties which take a number as defined in
+ * css2 specification
+ * 
+ * @see http://www.w3.org/TR/CSS21/syndata.html#value-def-number
+ */
+public interface TakesNumber extends TakesInteger {
+
+  CssSetter with(Double value);
+}

gwtquery-core/src/main/java/com/google/gwt/query/client/css/TextAlignProperty.java

@@ -22,7 +22,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * container is aligned.
  */
 public class TextAlignProperty extends
-    AbstractCssProperty<TextAlignProperty.TextAlign> {
+    CssProperty<TextAlignProperty.TextAlign> {
 
   /**
    * Possible value for <i>text-align</i> property.
@@ -58,11 +58,6 @@ public class TextAlignProperty extends
   }
 
   private static final String CSS_PROPERTY = "textAlign";
-  /*private static final String TEXT_ALIGN_CENTER = "center";
-  private static final String TEXT_ALIGN_JUSTIFY = "justify";
-  private static final String TEXT_ALIGN_LEFT = "left";
-
-  private static final String TEXT_ALIGN_RIGHT = "right";*/
 
   public static void init() {
     CSS.TEXT_ALIGN = new TextAlignProperty();

gwtquery-core/src/main/java/com/google/gwt/query/client/css/TextDecorationProperty.java

@@ -30,7 +30,7 @@ import com.google.gwt.dom.client.Style.TextDecoration;
  * descendants, nor to the contents of atomic inline-level descendants such as
  * inline blocks and inline tables.
  */
-public class TextDecorationProperty extends AbstractCssProperty<TextDecoration> {
+public class TextDecorationProperty extends CssProperty<TextDecoration> {
 
   private static final String CSS_PROPERTY = "textDecoration";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/TextIdentProperty.java

@@ -22,7 +22,7 @@ package com.google.gwt.query.client.css;
  * with respect to the left (or right, for right-to-left layout) edge of the
  * line box. User agents must render this indentation as blank space.
  */
-public class TextIdentProperty extends AbstractCssProperty<Length> {
+public class TextIdentProperty extends CssProperty<Length> {
 
   private static final String CSS_PROPERTY = "textIdent";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/TextTransformProperty.java

@@ -22,7 +22,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * element's text.
  */
 public class TextTransformProperty extends
-    AbstractCssProperty<TextTransformProperty.TextTransform> {
+    CssProperty<TextTransformProperty.TextTransform> {
 
   /**
    * Possible values for <i>text-transform</i> property.

gwtquery-core/src/main/java/com/google/gwt/query/client/css/UnicodeBidiProperty.java

@@ -21,7 +21,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * This property defines the text direction/writing direction
  */
 public class UnicodeBidiProperty extends
-    AbstractCssProperty<UnicodeBidiProperty.UnicodeBidi> {
+    CssProperty<UnicodeBidiProperty.UnicodeBidi> {
 
   /**
    * Define possible values for <i>unicode-bidi</i> property

gwtquery-core/src/main/java/com/google/gwt/query/client/css/CssNumber.java → gwtquery-core/src/main/java/com/google/gwt/query/client/css/UriValue.java

@@ -18,22 +18,25 @@ package com.google.gwt.query.client.css;
 import com.google.gwt.dom.client.Style.HasCssName;
 
 /**
- * Some css property take simply number as value.
+ * Image as css value
  */
-public class CssNumber implements HasCssName {
+public class UriValue implements HasCssName {
+
+  /**
+   * Define an uri by an url
+   */
+  public static UriValue url(String url) {
+    return new UriValue("url('" + url + "')");
+  }
 
   private String value;
 
-  public CssNumber(String value) {
+  private UriValue(String value) {
     this.value = value;
   }
-  
-  public CssNumber(int value) {
-    this(""+value);
-  }
 
   public String getCssName() {
     return value;
   }
 
-}
+}

gwtquery-core/src/main/java/com/google/gwt/query/client/css/VerticalAlignProperty.java

@@ -21,7 +21,7 @@ import com.google.gwt.dom.client.Style.VerticalAlign;
  * The <i>vertical-align</i> property affects the vertical positioning inside a
  * line box of the boxes generated by an inline-level element.
  */
-public class VerticalAlignProperty extends AbstractCssProperty<VerticalAlign>
+public class VerticalAlignProperty extends CssProperty<VerticalAlign>
     implements TakesLength {
 
   private static final String CSS_PROPERTY = "verticalAlign";
@@ -35,7 +35,7 @@ public class VerticalAlignProperty extends AbstractCssProperty<VerticalAlign>
   }
 
   public CssSetter with(Length value) {
-    return new LengthCssSetter(value);
+    return new SimpleCssSetter(this, value);
   }
 
 }

gwtquery-core/src/main/java/com/google/gwt/query/client/css/VisibilityProperty.java

@@ -22,7 +22,7 @@ import com.google.gwt.dom.client.Style.Visibility;
  * element are rendered. Invisible boxes still affect layout (set the
  * <i>display<i> property to <i>none</i> to suppress box generation altogether).
  */
-public class VisibilityProperty extends AbstractCssProperty<Visibility> {
+public class VisibilityProperty extends CssProperty<Visibility> {
 
   private static final String CSS_PROPERTY = "visibility";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/WhiteSpaceProperty.java

@@ -22,7 +22,7 @@ import com.google.gwt.dom.client.Style.HasCssName;
  * is handled
  */
 public class WhiteSpaceProperty extends
-    AbstractCssProperty<WhiteSpaceProperty.WhiteSpace> {
+    CssProperty<WhiteSpaceProperty.WhiteSpace> {
 
   public enum WhiteSpace implements HasCssName {
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/WidthProperty.java

@@ -18,7 +18,7 @@ package com.google.gwt.query.client.css;
 /**
  * All width css properties : <i>max-width</i>, <i>min-width</i>, <i>width</i>
  */
-public class WidthProperty extends AbstractCssProperty<Length> {
+public class WidthProperty extends CssProperty<Length> {
 
   private static final String WIDTH_PROPERTY = "width";
   private static final String MAX_WIDTH_PROPERTY = "maxWidth";

gwtquery-core/src/main/java/com/google/gwt/query/client/css/WordSpacingProperty.java

@@ -18,7 +18,7 @@ package com.google.gwt.query.client.css;
 /**
  * The <i>word-spacing</i> property specifies spacing behavior between words.
  */
-public class WordSpacingProperty extends AbstractCssProperty<Length> {
+public class WordSpacingProperty extends CssProperty<Length> {
 
   private static final String CSS_PROPERTY = "wordSpacing";
 

gwtquery-core/src/main/java/com/google/gwt/query/client/css/ZIndexProperty.java

@@ -16,6 +16,7 @@
 package com.google.gwt.query.client.css;
 
 import com.google.gwt.dom.client.Style;
+import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
 
 /**
  * The z-index property specifies the stack order of an element.
@@ -26,7 +27,7 @@ import com.google.gwt.dom.client.Style;
  * The z-index property only works on positioned elements (position:absolute,
  * position:relative, or position:fixed).
  */
-public class ZIndexProperty extends AbstractCssProperty<CssNumber> {
+public class ZIndexProperty implements TakesInteger {
 
   private static final String CSS_PROPERTY = "zIndex";
 
@@ -35,21 +36,36 @@ public class ZIndexProperty extends AbstractCssProperty<CssNumber> {
   }
 
   private ZIndexProperty() {
-    super(CSS_PROPERTY);
   }
 
-  @Override
-  public String get(Style s) {
+  
+  public String getCssName() {
+    return CSS_PROPERTY;
+  }
+
+  /**
+   * return a {@link String} containing the value of the <i>z-index</i>
+   * property.
+   */
+  public String getCssValue(Style s) {
     return getZIndex(s);
   }
 
+  /**
+   * returns a {@link CssSetter} object setting <i>z-index</i> property to the
+   * specified <code>value</code>
+   */
+  public CssSetter with(Integer value) {
+    return new SimpleCssSetter(CSS_PROPERTY, value != null ? value.toString() : null);
+  }
+
   /**
    * See GWT issue 5548
    * http://code.google.com/p/google-web-toolkit/issues/detail?id=5548
    */
   private native String getZIndex(Style s) /*-{
-    //force to return a string
-    return ""+s["zIndex"];
+		//force to return a string
+		return "" + s["zIndex"];
   }-*/;
 
 }

gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEventsTest.java

@@ -26,6 +26,7 @@ import com.google.gwt.junit.DoNotRunWith;
 import com.google.gwt.junit.Platform;
 import com.google.gwt.junit.client.GWTTestCase;
 import com.google.gwt.query.client.css.CSS;
+import com.google.gwt.query.client.css.Length;
 import com.google.gwt.query.client.css.RGBColor;
 import com.google.gwt.query.client.plugins.Events;
 import com.google.gwt.query.client.plugins.EventsListener;
@@ -67,10 +68,10 @@ public class GQueryEventsTest extends GWTTestCase {
   @DoNotRunWith({Platform.HtmlUnitBug, Platform.HtmlUnitLayout, Platform.HtmlUnitUnknown})
   public void testEventsDblClick() {
     $(e).html("<p>Content</p>");
-    $("p", e).css("color", "white");
+    $("p", e).css(CSS.COLOR.with(RGBColor.WHITE));
     $("p", e).dblclick(new Function() {
       public void f(Element elem) {
-        $(elem).css("color", "yellow");
+        $(elem).css(CSS.COLOR.with(RGBColor.YELLOW));
       }
     });
     $("p", e).dblclick();
@@ -83,11 +84,11 @@ public class GQueryEventsTest extends GWTTestCase {
     // click
     $("p", e).click(new Function() {
       public void f(Element elem) {
-        $(elem).css("color", "red");
+        $(elem).css(CSS.COLOR.with(RGBColor.RED));
       }
     }, new Function() {
       public void f(Element elem) {
-        $(elem).css("background", "green");
+        $(elem).css(CSS.BACKGROUND_COLOR.with(RGBColor.GREEN));
       }
     });
     $("p", e, Events.Events).trigger(Event.ONCLICK);
@@ -95,7 +96,7 @@ public class GQueryEventsTest extends GWTTestCase {
     assertEquals("green", $("p", e).css("background-color"));
 
     // unbind
-    $("p", e).css("color", "white");
+    $("p", e).css(CSS.COLOR.with(RGBColor.WHITE));
     $("p", e).unbind(Event.ONCLICK);
     $("p", e).click();
     assertEquals("white", $("p", e).css("color"));
@@ -104,11 +105,11 @@ public class GQueryEventsTest extends GWTTestCase {
     $("p", e).unbind(Event.ONCLICK);
     $("p", e).toggle(new Function() {
       public void f(Element elem) {
-        $(elem).css("color", "red");
+        $(elem).css(CSS.COLOR.with(RGBColor.RED));
       }
     }, new Function() {
       public void f(Element elem) {
-        $(elem).css("color", "blue");
+        $(elem).css(CSS.COLOR.with(RGBColor.BLUE));
       }
     });
     $("p", e).click();
@@ -120,23 +121,23 @@ public class GQueryEventsTest extends GWTTestCase {
     $("p", e).unbind(Event.ONCLICK);
     $("p", e).one(Event.ONCLICK, null, new Function() {
       public void f(Element elem) {
-        $(elem).css("color", "red");
+        $(elem).css(CSS.COLOR.with(RGBColor.RED));
       }
     });
     $("p", e).click();
     assertEquals("red", $("p", e).css("color"));
-    $("p", e).css("color", "white");
+    $("p", e).css(CSS.COLOR.with(RGBColor.WHITE));
     $("p", e).click();
     assertEquals("white", $("p", e).css("color"));
 
     // hover (mouseover, mouseout)
     $("p", e).hover(new Function() {
       public void f(Element elem) {
-        $(elem).css("background-color", "yellow");
+        $(elem).css(CSS.BACKGROUND_COLOR.with(RGBColor.YELLOW));
       }
     }, new Function() {
       public void f(Element elem) {
-        $(elem).css("background-color", "white");
+        $(elem).css(CSS.BACKGROUND_COLOR.with(RGBColor.WHITE));
       }
     });
     $("p", e).trigger(Event.ONMOUSEOVER);
@@ -185,14 +186,14 @@ public class GQueryEventsTest extends GWTTestCase {
   }
 
   public void testLazyMethods() {
-    $(e).css("color", "white");
+    $(e).css(CSS.COLOR.with(RGBColor.WHITE));
     assertEquals("white", $(e).css("color"));
 
-    $(e).one(Event.ONCLICK, null, lazy().css("color", "red").done());
+    $(e).one(Event.ONCLICK, null, lazy().css(CSS.COLOR.with(RGBColor.RED)).done());
     $(e).click();
     assertEquals("red", $(e).css("color"));
 
-    $(e).click(lazy().setCss(CSS.COLOR.with(RGBColor.BLACK)).done());
+    $(e).click(lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done());
     $(e).click();
     assertEquals("black", $(e).css("color"));
   }
@@ -202,17 +203,17 @@ public class GQueryEventsTest extends GWTTestCase {
 
     $("p", e, Events.Events).bind("click.first.namespace", null, new Function() {; 
       public void f(Element elem) {
-        $(elem).css("color", "red");
+        $(elem).css(CSS.COLOR.with(RGBColor.RED));
       }
     });
     $("p", e, Events.Events).bind("click.second.namespace", null, new Function() {; 
       public void f(Element elem) {
-        $(elem).css("background", "green");
+        $(elem).css(CSS.BACKGROUND_COLOR.with(RGBColor.GREEN));
       }
     });
     $("p", e, Events.Events).bind("click", null, new Function() {; 
       public void f(Element elem) {
-        $(elem).css("fontSize", "24px");
+        $(elem).css(CSS.FONT_SIZE.with(Length.px(24)));
       }
     });
     $("p", e, Events.Events).trigger(Event.ONCLICK);
@@ -220,7 +221,7 @@ public class GQueryEventsTest extends GWTTestCase {
     assertEquals("green", $("p", e).css("background-color"));
     assertEquals(24.0d, $("p", e).cur("fontSize", true));
     
-    $("p", e).css("color","").css("background","").css("fontSize", "12px");
+    $("p", e).css(CSS.COLOR.with(null)).css(CSS.BACKGROUND_COLOR,"").css(CSS.FONT_SIZE.with(Length.px(12)));
     assertFalse("red".equalsIgnoreCase($("p", e).css("color")));
     assertFalse("green".equalsIgnoreCase($("p", e).css("background-color")));
     assertEquals(12.0d, $("p", e).cur("fontSize", true));
@@ -232,7 +233,7 @@ public class GQueryEventsTest extends GWTTestCase {
     assertEquals(24.0d, $("p", e).cur("fontSize", true));
     
     
-    $("p", e).css("color","").css("background","").css("fontSize", "12px");
+    $("p", e).css(CSS.COLOR.with(null)).css(CSS.BACKGROUND_COLOR,"").css(CSS.FONT_SIZE.with(Length.px(12)));
     assertFalse("red".equalsIgnoreCase($("p", e).css("color")));
     assertFalse("green".equalsIgnoreCase($("p", e).css("background-color")));
     assertEquals(12.0d, $("p", e).cur("fontSize", true));
@@ -286,7 +287,7 @@ public class GQueryEventsTest extends GWTTestCase {
       }
     });
     RootPanel.get().add(b);
-    $("button").click(lazy().css("color", "red").done());
+    $("button").click(lazy().css(CSS.COLOR.with(RGBColor.RED)).done());
 
     $("button").click();
     assertEquals("red", $("button").css("color"));
@@ -299,19 +300,19 @@ public class GQueryEventsTest extends GWTTestCase {
     $(e).html(content);
     $(document).bind(Event.ONMOUSEMOVE, null, new Function() {
       public void f(Element e){
-        $("p").css("color", "red");
+        $("p").css(CSS.COLOR.with(RGBColor.RED));
       }
     });
     $(document).bind(Event.ONMOUSEUP, null, new Function(){
       public void f(Element e){
-        $("p").css("color", "yellow");
+        $("p").css(CSS.COLOR.with(RGBColor.YELLOW));
       }
     });
     $(document).trigger(Event.ONMOUSEMOVE);
     assertEquals("red", $("p").css("color"));
     $(document).trigger(Event.ONMOUSEUP);
     assertEquals("yellow", $("p").css("color"));
-    $("p").css("color", "black");
+    $("p").css(CSS.COLOR.with(RGBColor.BLACK));
     $(document).unbind(Event.ONMOUSEUP|Event.ONMOUSEMOVE);
     $(document).trigger(Event.ONMOUSEMOVE);
     assertEquals("black", $("p").css("color"));