From 3759cf696131454c9f35ef037a96e699f6b7caef Mon Sep 17 00:00:00 2001 From: Julien Dramaix Date: Thu, 27 Jan 2011 21:50:53 +0000 Subject: [PATCH] add clear, clip, top, left, bottom, right and overflow properties --- .../com/google/gwt/query/client/css/CSS.java | 132 ++++++++++++++---- .../gwt/query/client/css/ClearProperty.java | 95 +++++++++++++ .../gwt/query/client/css/ClipProperty.java | 60 ++++++++ .../client/css/EdgePositionProperty.java | 39 ++++++ .../query/client/css/OverflowProperty.java | 38 +++++ .../gwt/query/client/GQueryCssTest.java | 71 ++++++++++ 6 files changed, 405 insertions(+), 30 deletions(-) create mode 100644 gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClearProperty.java create mode 100644 gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClipProperty.java create mode 100644 gwtquery-core/src/main/java/com/google/gwt/query/client/css/EdgePositionProperty.java create mode 100644 gwtquery-core/src/main/java/com/google/gwt/query/client/css/OverflowProperty.java diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CSS.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CSS.java index b42b4a38..ac5ac9e3 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CSS.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/CSS.java @@ -70,6 +70,31 @@ public class CSS { public static BorderWidthProperty BORDER_WIDTH; + /** + * For absolutely positioned elements, the bottom property sets the bottom + * edge of an element to a unit above/below the bottom edge of its containing + * element. + * + * For relatively positioned elements, the bottom property sets the bottom + * edge of an element to a unit above/below its normal position. + * + * For static positioned elements, the bottom property has no effect. + */ + public static EdgePositionProperty BOTTOM; + + /** + * The clear property specifies which sides of an element where other floating + * elements are not allowed. + */ + public static ClearProperty CLEAR; + /** + * The clip property lets you specify the dimensions of an absolutely + * positioned element that should be visible, and the element is clipped into + * this shape, and displayed. + * + * The clip property does not work if the overflow property is set to visible. + */ + public static ClipProperty CLIP; /** * This property describes the foreground color of an element's text content. */ @@ -80,10 +105,12 @@ public class CSS { * device. */ public static CursorProperty CURSOR; + /** * This property specifies the mechanism by which elements are rendered. */ public static DisplayProperty DISPLAY; + /** * This property specifies whether a box should float to the left, right, or * not at all. It may be set for any element, but only applies to elements @@ -111,6 +138,18 @@ public class CSS { public static final String INHERIT_VALUE = "inherit"; + /** + * For absolutely positioned elements, the left property sets the left edge of + * an element to a unit to the left/right of the left edge of its containing + * element. + * + * For relatively positioned elements, the left property sets the left edge of + * an element to a unit to the left/right to its normal position. + * + * For static positioned elements, the left property has no effect. + */ + public static EdgePositionProperty LEFT; + public static ListStyleProperty LIST_STYLE; public static ListStyleImageProperty LIST_STYLE_IMAGE; @@ -129,6 +168,42 @@ public class CSS { public static MarginProperty MARGIN_TOP; + /** + * An outline is a line that is drawn around elements (outside the borders) to + * make the element "stand out". + * + * The outline shorthand property sets all the outline properties in one + * declaration. + */ + public static OutlineProperty OUTLINE; + + /** + * 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 + * color of an outline. + */ + public static OutlineColorProperty OUTLINE_COLOR; + + /** + * 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 static OutlineStyleProperty OUTLINE_STYLE; + + /** + * 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 static OutlineWidthProperty OUTLINE_WIDTH; + + /** + * This property specifies what happens if content overflows an element's + * box.. + */ + public static OverflowProperty OVERFLOW; + public static PaddingProperty PADDING; public static PaddingProperty PADDING_BOTTOM; @@ -139,11 +214,34 @@ public class CSS { public static PaddingProperty PADDING_TOP; + /** + * For absolutely positioned elements, the right property sets the right edge + * of an element to a unit to the left/right of the right edge of its + * containing element. + * + * For relatively positioned elements, the right property sets the right edge + * of an element to a unit to the left/right to its normal position. + * + * For static positioned elements, the right property has no effect. + */ + public static EdgePositionProperty RIGHT; + /** * This property describes how inline content of a block is aligned. */ public static TextAlignProperty TEXT_ALIGN; + /** + * For absolutely positioned elements, the top property sets the top edge of + * an element to a unit above/below the top edge of its containing element. + * + * For relatively positioned elements, the top property sets the top edge of + * an element to a unit above/below its normal position. + * + * For static positioned elements, the top property has no effect. + */ + public static EdgePositionProperty TOP; + /** * This property affects the vertical positioning inside a line box of the * boxes generated by an inline-level element. @@ -173,42 +271,15 @@ public class CSS { */ public static WidthProperty WIDTH; - /** - * 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 - * color of an outline. - */ - public static OutlineColorProperty OUTLINE_COLOR; - - /** - * 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 static OutlineStyleProperty OUTLINE_STYLE; - - /** - * 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 static OutlineWidthProperty OUTLINE_WIDTH; - - /** - * An outline is a line that is drawn around elements (outside the borders) to - * make the element "stand out". - * - * The outline shorthand property sets all the outline properties in one - * declaration. - */ - public static OutlineProperty OUTLINE; - static { BackgroundProperty.init(); BorderProperty.init(); ColorProperty.init(); CursorProperty.init(); + ClearProperty.init(); + ClipProperty.init(); DisplayProperty.init(); + EdgePositionProperty.init(); FloatProperty.init(); FontStyleProperty.init(); FontVariantProperty.init(); @@ -218,6 +289,7 @@ public class CSS { ListStyleProperty.init(); MarginProperty.init(); OutlineProperty.init(); + OverflowProperty.init(); PaddingProperty.init(); TextAlignProperty.init(); VerticalAlignProperty.init(); diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClearProperty.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClearProperty.java new file mode 100644 index 00000000..f825db05 --- /dev/null +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClearProperty.java @@ -0,0 +1,95 @@ +/* + * 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.Style.HasCssName; + +/** + * The clear property specifies which sides of an element where other floating + * elements are not allowed. + */ +public class ClearProperty extends AbstractCssProperty { + + public static enum Clear implements HasCssName { + /** + * No floating elements allowed on either the left or the right side + */ + BOTH { + @Override + public String getCssName() { + return "both"; + } + + }, + /** + * Specifies that the value of the clear property should be inherited from + * the parent element + */ + INHERIT { + @Override + public String getCssName() { + return CSS.INHERIT_VALUE; + } + + }, + /** + * No floating elements allowed on the left side + */ + LEFT { + @Override + public String getCssName() { + return "left"; + } + + }, + /** + * Allows floating elements on both sides + */ + NONE { + @Override + public String getCssName() { + return "none"; + } + + }, + /** + * No floating elements allowed on the right side + */ + RIGHT { + @Override + public String getCssName() { + return "right"; + } + + }; + + public abstract String getCssName(); + + } + + private static final String CSS_PROPERTY = "clear"; + + public static void init() { + CSS.CLEAR = new ClearProperty(); + } + + private ClearProperty() { + } + + public String getCssName() { + return CSS_PROPERTY; + } +} diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClipProperty.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClipProperty.java new file mode 100644 index 00000000..c9290947 --- /dev/null +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/ClipProperty.java @@ -0,0 +1,60 @@ +/* + * 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.Style.HasCssName; + +/** + * The clip property lets you specify the dimensions of an absolutely positioned + * element that should be visible, and the element is clipped into this shape, + * and displayed. + * + * The clip property does not work if the overflow property is set to visible. + */ +public class ClipProperty extends AbstractCssProperty { + + public static class Shape implements HasCssName { + + public static Shape rect(int top, int right, int bottom, int left) { + return new Shape("rect(" + top + "px," + right + "px," + bottom + "px," + + left + "px)"); + } + + private String value; + + private Shape(String value) { + this.value = value; + } + + public String getCssName() { + return value; + } + + } + + private static final String CSS_PROPERTY = "clip"; + + public static void init() { + CSS.CLIP = new ClipProperty(); + } + + private ClipProperty() { + } + + public String getCssName() { + return CSS_PROPERTY; + } +} diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/EdgePositionProperty.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/EdgePositionProperty.java new file mode 100644 index 00000000..f8d3f104 --- /dev/null +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/EdgePositionProperty.java @@ -0,0 +1,39 @@ +/* + * 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; + +/** + * Specify position of element's edges. + */ +public class EdgePositionProperty extends AbstractCssProperty { + + public static void init() { + CSS.BOTTOM = new EdgePositionProperty("bottom"); + CSS.LEFT = new EdgePositionProperty("left"); + CSS.RIGHT = new EdgePositionProperty("right"); + CSS.TOP = new EdgePositionProperty("top"); + } + + private String cssName; + + private EdgePositionProperty(String value) { + this.cssName = value; + } + + public String getCssName() { + return cssName; + } +} diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/css/OverflowProperty.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/OverflowProperty.java new file mode 100644 index 00000000..1eda4cc2 --- /dev/null +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/css/OverflowProperty.java @@ -0,0 +1,38 @@ +/* + * 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.Style.Overflow; + +/** + * This property specifies what happens if content overflows an element's box.. + */ +public class OverflowProperty extends + AbstractCssProperty { + + private static final String CSS_PROPERTY = "overflow"; + + public static void init() { + CSS.OVERFLOW = new OverflowProperty(); + } + + private OverflowProperty() { + } + + public String getCssName() { + return CSS_PROPERTY; + } +} diff --git a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCssTest.java b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCssTest.java index 1e032dd0..b35c3ec2 100644 --- a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCssTest.java +++ b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCssTest.java @@ -23,6 +23,7 @@ import com.google.gwt.dom.client.Style.Display; import com.google.gwt.dom.client.Style.Float; import com.google.gwt.dom.client.Style.FontStyle; import com.google.gwt.dom.client.Style.ListStyleType; +import com.google.gwt.dom.client.Style.Overflow; import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.dom.client.Style.VerticalAlign; import com.google.gwt.dom.client.Style.Visibility; @@ -36,6 +37,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.BorderStyleProperty.LineStyle; import com.google.gwt.query.client.css.BorderWidthProperty.LineWidth; +import com.google.gwt.query.client.css.ClearProperty.Clear; +import com.google.gwt.query.client.css.ClipProperty.Shape; import com.google.gwt.query.client.css.FontSizeProperty.FontSize; import com.google.gwt.query.client.css.FontVariantProperty.FontVariant; import com.google.gwt.query.client.css.ListStylePositionProperty.ListStylePosition; @@ -387,6 +390,34 @@ public class GQueryCssTest extends GWTTestCase { assertEquals("wait", $("#test").css(CSS.CURSOR)); } + + public void testClearProperty() { + + $(e).html("
Content
"); + + $("#test").css(CSS.CLEAR, Clear.BOTH); + assertEquals("both", $("#test").css("clear")); + assertEquals("both", $("#test").css(CSS.CLEAR)); + + $("#test").css(CSS.CLEAR, Clear.LEFT); + assertEquals("left", $("#test").css(CSS.CLEAR)); + + $("#test").css(CSS.CLEAR, Clear.RIGHT); + assertEquals("right", $("#test").css(CSS.CLEAR)); + + $("#test").css(CSS.CLEAR, Clear.NONE); + assertEquals("none", $("#test").css(CSS.CLEAR)); + + } + + public void testClipProperty() { + + $(e).html("
Content
"); + + $("#test").css(CSS.CLIP, Shape.rect(0, 10, 10, 0)); + assertEquals("rect(0px,10px,10px,0px)", $("#test").css("clip")); + assertEquals("rect(0px,10px,10px,0px)", $("#test").css(CSS.CLIP)); + } public void testDisplayProperty() { @@ -398,6 +429,29 @@ public class GQueryCssTest extends GWTTestCase { assertEquals("inline", $("#test").css(CSS.DISPLAY)); } + + public void testEdgePositionProperty() { + + $(e).html("
Content
<"); + + $("#test").css(CSS.LEFT,Length.px(10)); + assertEquals("10px", $("#test").css("left")); + assertEquals("10px", $("#test").css(CSS.LEFT)); + + $("#test").css(CSS.TOP,Length.px(15)); + assertEquals("15px", $("#test").css("top")); + assertEquals("15px", $("#test").css(CSS.TOP)); + + $("#test").css(CSS.RIGHT,Length.px(0)); + assertEquals("0px", $("#test").css("right")); + assertEquals("0px", $("#test").css(CSS.RIGHT)); + + $("#test").css(CSS.BOTTOM,Length.px(20)); + assertEquals("20px", $("#test").css("bottom")); + assertEquals("20px", $("#test").css(CSS.BOTTOM)); + + } + public void testFloatProperty() { @@ -616,6 +670,23 @@ public class GQueryCssTest extends GWTTestCase { } + public void testOverflowProperty(){ + $(e).html("
Content
"); + + $("#test").css(CSS.OVERFLOW, Overflow.HIDDEN); + assertEquals("hidden", $("#test").css("overflow")); + assertEquals("hidden", $("#test").css(CSS.OVERFLOW)); + + $("#test").css(CSS.OVERFLOW, Overflow.SCROLL); + assertEquals("scroll", $("#test").css("overflow")); + assertEquals("scroll", $("#test").css(CSS.OVERFLOW)); + + $("#test").css(CSS.OVERFLOW, Overflow.VISIBLE); + assertEquals("visible", $("#test").css("overflow")); + assertEquals("visible", $("#test").css(CSS.OVERFLOW)); + + } + public void testPaddingProperty() { -- 2.39.5