Source/WebCore: getComputedStyle should return shorthands property with the minimum...
authoralexis.menard@openbossa.org <alexis.menard@openbossa.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 3 Jan 2012 19:56:48 +0000 (19:56 +0000)
committeralexis.menard@openbossa.org <alexis.menard@openbossa.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 3 Jan 2012 19:56:48 +0000 (19:56 +0000)
https://bugs.webkit.org/show_bug.cgi?id=75434

Reviewed by Tony Chang.

As stated in http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties we should
return shorthands properties with the minimum number of sides possible.

Existing tests have been updated accordingly.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
(WebCore::CSSComputedStyleDeclaration::getCSSPropertyValuesForSidesShorthand):
* css/CSSComputedStyleDeclaration.h:

LayoutTests: getComputedStyle should return shorthands properties with the minimum number of sides possible.
https://bugs.webkit.org/show_bug.cgi?id=75434

Reviewed by Tony Chang.

As stated in http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties we should
return shorthands properties with the minimum number of sides possible.

* fast/css/getComputedStyle/getComputedStyle-border-color-shorthand-expected.txt:
* fast/css/getComputedStyle/getComputedStyle-border-color-shorthand.html:
* fast/css/getComputedStyle/getComputedStyle-border-style-shorthand-expected.txt:
* fast/css/getComputedStyle/getComputedStyle-border-style-shorthand.html:
* fast/css/getComputedStyle/getComputedStyle-border-width-expected.txt:
* fast/css/getComputedStyle/getComputedStyle-border-width.html:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@103953 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-color-shorthand-expected.txt
LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-color-shorthand.html
LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-style-shorthand-expected.txt
LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-style-shorthand.html
LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-width-expected.txt
LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-width.html
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSComputedStyleDeclaration.h

index 975080c..ef5fd76 100644 (file)
@@ -1,3 +1,20 @@
+2012-01-03  Alexis Menard  <alexis.menard@openbossa.org>
+
+        getComputedStyle should return shorthands properties with the minimum number of sides possible.
+        https://bugs.webkit.org/show_bug.cgi?id=75434
+
+        Reviewed by Tony Chang.
+
+        As stated in http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties we should
+        return shorthands properties with the minimum number of sides possible.
+
+        * fast/css/getComputedStyle/getComputedStyle-border-color-shorthand-expected.txt:
+        * fast/css/getComputedStyle/getComputedStyle-border-color-shorthand.html:
+        * fast/css/getComputedStyle/getComputedStyle-border-style-shorthand-expected.txt:
+        * fast/css/getComputedStyle/getComputedStyle-border-style-shorthand.html:
+        * fast/css/getComputedStyle/getComputedStyle-border-width-expected.txt:
+        * fast/css/getComputedStyle/getComputedStyle-border-width.html:
+
 2012-01-03  Florin Malita  <fmalita@google.com>
 
         NULL ptr in WebCore::SVGStyledTransformableElement::animatedLocalTransform
index bf724fb..69a13fa 100644 (file)
@@ -19,54 +19,27 @@ PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue(
 PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 255
 PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 255
 PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 255
-PASS computedStyle.getPropertyValue('border-color') is 'rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0)'
+PASS computedStyle.getPropertyValue('border-color') is 'rgb(0, 0, 0)'
 PASS computedStyle.getPropertyCSSValue('border-color').toString() is '[object CSSValueList]'
-PASS computedStyle.getPropertyCSSValue('border-color').length is 4
-PASS computedStyle.getPropertyCSSValue('border-color').cssText is 'rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0)'
+PASS computedStyle.getPropertyCSSValue('border-color').length is 1
+PASS computedStyle.getPropertyCSSValue('border-color').cssText is 'rgb(0, 0, 0)'
 PASS computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
 PASS computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
 PASS computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyValue('border-color') is 'rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102)'
+PASS computedStyle.getPropertyValue('border-color') is 'rgb(102, 102, 102)'
 PASS computedStyle.getPropertyCSSValue('border-color').toString() is '[object CSSValueList]'
-PASS computedStyle.getPropertyCSSValue('border-color').length is 4
-PASS computedStyle.getPropertyCSSValue('border-color').cssText is 'rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102)'
+PASS computedStyle.getPropertyCSSValue('border-color').length is 1
+PASS computedStyle.getPropertyCSSValue('border-color').cssText is 'rgb(102, 102, 102)'
 PASS computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
 PASS computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
 PASS computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 102
-PASS computedStyle.getPropertyValue('border-color') is 'rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0)'
+PASS computedStyle.getPropertyValue('border-color') is 'rgb(0, 0, 0)'
 PASS computedStyle.getPropertyCSSValue('border-color').toString() is '[object CSSValueList]'
-PASS computedStyle.getPropertyCSSValue('border-color').length is 4
-PASS computedStyle.getPropertyCSSValue('border-color').cssText is 'rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0)'
+PASS computedStyle.getPropertyCSSValue('border-color').length is 1
+PASS computedStyle.getPropertyCSSValue('border-color').cssText is 'rgb(0, 0, 0)'
 PASS computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
 PASS computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
 PASS computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
-PASS computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 3c46af2..3472f7e 100644 (file)
@@ -37,60 +37,33 @@ shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorV
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "255");
 
 e.style.borderColor = "black";
-shouldBe("computedStyle.getPropertyValue('border-color')", "'rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0)'");
+shouldBe("computedStyle.getPropertyValue('border-color')", "'rgb(0, 0, 0)'");
 shouldBe("computedStyle.getPropertyCSSValue('border-color').toString()", "'[object CSSValueList]'");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').length", "4");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').cssText", "'rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0)'");;
+shouldBe("computedStyle.getPropertyCSSValue('border-color').length", "1");
+shouldBe("computedStyle.getPropertyCSSValue('border-color').cssText", "'rgb(0, 0, 0)'");;
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 
 e.style.borderColor = "rgb(102, 102, 102)";
-shouldBe("computedStyle.getPropertyValue('border-color')", "'rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102)'");
+shouldBe("computedStyle.getPropertyValue('border-color')", "'rgb(102, 102, 102)'");
 shouldBe("computedStyle.getPropertyCSSValue('border-color').toString()", "'[object CSSValueList]'");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').length", "4");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').cssText", "'rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102)'");;
+shouldBe("computedStyle.getPropertyCSSValue('border-color').length", "1");
+shouldBe("computedStyle.getPropertyCSSValue('border-color').cssText", "'rgb(102, 102, 102)'");;
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "102");
 
 e.style.borderColor = "";
 e.style.color = "black";
 e.style.border = "solid";
-shouldBe("computedStyle.getPropertyValue('border-color')", "'rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0)'");
+shouldBe("computedStyle.getPropertyValue('border-color')", "'rgb(0, 0, 0)'");
 shouldBe("computedStyle.getPropertyCSSValue('border-color').toString()", "'[object CSSValueList]'");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').length", "4");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').cssText", "'rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0)'");;
+shouldBe("computedStyle.getPropertyCSSValue('border-color').length", "1");
+shouldBe("computedStyle.getPropertyCSSValue('border-color').cssText", "'rgb(0, 0, 0)'");;
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('border-color').item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(1).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(2).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-color').item(3).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 document.body.removeChild(testContainer);
 
 </script>
index bbed22e..84f6a63 100644 (file)
@@ -3,14 +3,12 @@ Test to make sure border-style shorthand property returns CSSValueList properly.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS computedStyle.getPropertyValue('border-style') is 'solid dotted solid dotted'
+PASS computedStyle.getPropertyValue('border-style') is 'solid dotted'
 PASS computedStyle.getPropertyCSSValue('border-style').toString() is '[object CSSValueList]'
-PASS computedStyle.getPropertyCSSValue('border-style').length is 4
-PASS computedStyle.getPropertyCSSValue('border-style').cssText is 'solid dotted solid dotted'
+PASS computedStyle.getPropertyCSSValue('border-style').length is 2
+PASS computedStyle.getPropertyCSSValue('border-style').cssText is 'solid dotted'
 PASS computedStyle.getPropertyCSSValue('border-style').item(0).getStringValue() is 'solid'
 PASS computedStyle.getPropertyCSSValue('border-style').item(1).getStringValue() is 'dotted'
-PASS computedStyle.getPropertyCSSValue('border-style').item(2).getStringValue() is 'solid'
-PASS computedStyle.getPropertyCSSValue('border-style').item(3).getStringValue() is 'dotted'
 PASS computedStyle.getPropertyValue('border-style') is 'solid dotted groove dashed'
 PASS computedStyle.getPropertyCSSValue('border-style').toString() is '[object CSSValueList]'
 PASS computedStyle.getPropertyCSSValue('border-style').length is 4
index 81d09d6..f753740 100644 (file)
@@ -19,14 +19,12 @@ e = document.getElementById('test');
 computedStyle = window.getComputedStyle(e, null);
 
 e.style.borderStyle = "solid dotted";
-shouldBe("computedStyle.getPropertyValue('border-style')", "'solid dotted solid dotted'");
+shouldBe("computedStyle.getPropertyValue('border-style')", "'solid dotted'");
 shouldBe("computedStyle.getPropertyCSSValue('border-style').toString()", "'[object CSSValueList]'");
-shouldBe("computedStyle.getPropertyCSSValue('border-style').length", "4");
-shouldBe("computedStyle.getPropertyCSSValue('border-style').cssText", "'solid dotted solid dotted'");
+shouldBe("computedStyle.getPropertyCSSValue('border-style').length", "2");
+shouldBe("computedStyle.getPropertyCSSValue('border-style').cssText", "'solid dotted'");
 shouldBe("computedStyle.getPropertyCSSValue('border-style').item(0).getStringValue()", "'solid'");
 shouldBe("computedStyle.getPropertyCSSValue('border-style').item(1).getStringValue()", "'dotted'");
-shouldBe("computedStyle.getPropertyCSSValue('border-style').item(2).getStringValue()", "'solid'");
-shouldBe("computedStyle.getPropertyCSSValue('border-style').item(3).getStringValue()", "'dotted'");
 
 e.style.borderStyle = "solid dotted groove dashed";
 shouldBe("computedStyle.getPropertyValue('border-style')", "'solid dotted groove dashed'");
index 3530407..de4ad76 100644 (file)
@@ -19,30 +19,23 @@ PASS computedStyle.getPropertyCSSValue('border-width').item(0).getFloatValue(CSS
 PASS computedStyle.getPropertyCSSValue('border-width').item(1).getFloatValue(CSSPrimitiveValue.CSS_PX) is 160
 PASS computedStyle.getPropertyCSSValue('border-width').item(2).getFloatValue(CSSPrimitiveValue.CSS_PX) is 64
 PASS computedStyle.getPropertyCSSValue('border-width').item(3).getFloatValue(CSSPrimitiveValue.CSS_PX) is 80
-PASS computedStyle.getPropertyValue('border-width') is '10px 0px 0px 0px'
+PASS computedStyle.getPropertyValue('border-width') is '10px 0px 0px'
 PASS computedStyle.getPropertyCSSValue('border-width').toString() is '[object CSSValueList]'
-PASS computedStyle.getPropertyCSSValue('border-width').cssText is '10px 0px 0px 0px'
-PASS computedStyle.getPropertyCSSValue('border-width').length is 4
+PASS computedStyle.getPropertyCSSValue('border-width').cssText is '10px 0px 0px'
+PASS computedStyle.getPropertyCSSValue('border-width').length is 3
 PASS computedStyle.getPropertyCSSValue('border-width').item(0).getFloatValue(CSSPrimitiveValue.CSS_PX) is 10
 PASS computedStyle.getPropertyCSSValue('border-width').item(1).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
 PASS computedStyle.getPropertyCSSValue('border-width').item(2).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
-PASS computedStyle.getPropertyCSSValue('border-width').item(3).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
-PASS computedStyle.getPropertyValue('border-width') is '0px 0px 0px 0px'
+PASS computedStyle.getPropertyValue('border-width') is '0px'
 PASS computedStyle.getPropertyCSSValue('border-width').toString() is '[object CSSValueList]'
-PASS computedStyle.getPropertyCSSValue('border-width').cssText is '0px 0px 0px 0px'
-PASS computedStyle.getPropertyCSSValue('border-width').length is 4
+PASS computedStyle.getPropertyCSSValue('border-width').cssText is '0px'
+PASS computedStyle.getPropertyCSSValue('border-width').length is 1
 PASS computedStyle.getPropertyCSSValue('border-width').item(0).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
-PASS computedStyle.getPropertyCSSValue('border-width').item(1).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
-PASS computedStyle.getPropertyCSSValue('border-width').item(2).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
-PASS computedStyle.getPropertyCSSValue('border-width').item(3).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
-PASS computedStyle.getPropertyValue('border-width') is '0px 0px 0px 0px'
+PASS computedStyle.getPropertyValue('border-width') is '0px'
 PASS computedStyle.getPropertyCSSValue('border-width').toString() is '[object CSSValueList]'
-PASS computedStyle.getPropertyCSSValue('border-width').cssText is '0px 0px 0px 0px'
-PASS computedStyle.getPropertyCSSValue('border-width').length is 4
+PASS computedStyle.getPropertyCSSValue('border-width').cssText is '0px'
+PASS computedStyle.getPropertyCSSValue('border-width').length is 1
 PASS computedStyle.getPropertyCSSValue('border-width').item(0).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
-PASS computedStyle.getPropertyCSSValue('border-width').item(1).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
-PASS computedStyle.getPropertyCSSValue('border-width').item(2).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
-PASS computedStyle.getPropertyCSSValue('border-width').item(3).getFloatValue(CSSPrimitiveValue.CSS_PX) is 0
 PASS successfullyParsed is true
 
 TEST COMPLETE
index ac2af54..026f371 100644 (file)
@@ -40,36 +40,29 @@ shouldBe("computedStyle.getPropertyCSSValue('border-width').item(3).getFloatValu
 e.style.borderWidth=""
 e.style.borderStyle=""
 e.style.borderTop = "10px solid"
-shouldBe("computedStyle.getPropertyValue('border-width')", "'10px 0px 0px 0px'");
+shouldBe("computedStyle.getPropertyValue('border-width')", "'10px 0px 0px'");
 shouldBe("computedStyle.getPropertyCSSValue('border-width').toString()", "'[object CSSValueList]'");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').cssText", "'10px 0px 0px 0px'");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').length", "4");
+shouldBe("computedStyle.getPropertyCSSValue('border-width').cssText", "'10px 0px 0px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-width').length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('border-width').item(0).getFloatValue(CSSPrimitiveValue.CSS_PX)", "10");
 shouldBe("computedStyle.getPropertyCSSValue('border-width').item(1).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('border-width').item(2).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').item(3).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
 
 e.style.borderTop=""
 e.style.borderWidth="10px 5px 4px 3px"
 e.style.borderStyle="none";
-shouldBe("computedStyle.getPropertyValue('border-width')", "'0px 0px 0px 0px'");
+shouldBe("computedStyle.getPropertyValue('border-width')", "'0px'");
 shouldBe("computedStyle.getPropertyCSSValue('border-width').toString()", "'[object CSSValueList]'");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').cssText", "'0px 0px 0px 0px'");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').length", "4");
+shouldBe("computedStyle.getPropertyCSSValue('border-width').cssText", "'0px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-width').length", "1");
 shouldBe("computedStyle.getPropertyCSSValue('border-width').item(0).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').item(1).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').item(2).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').item(3).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
 
 e.style.borderStyle="hidden";
-shouldBe("computedStyle.getPropertyValue('border-width')", "'0px 0px 0px 0px'");
+shouldBe("computedStyle.getPropertyValue('border-width')", "'0px'");
 shouldBe("computedStyle.getPropertyCSSValue('border-width').toString()", "'[object CSSValueList]'");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').cssText", "'0px 0px 0px 0px'");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').length", "4");
+shouldBe("computedStyle.getPropertyCSSValue('border-width').cssText", "'0px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-width').length", "1");
 shouldBe("computedStyle.getPropertyCSSValue('border-width').item(0).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').item(1).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').item(2).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
-shouldBe("computedStyle.getPropertyCSSValue('border-width').item(3).getFloatValue(CSSPrimitiveValue.CSS_PX)", "0");
 
 document.body.removeChild(testContainer);
 
index f24d9d6..3b63f87 100644 (file)
@@ -1,3 +1,20 @@
+2012-01-03  Alexis Menard  <alexis.menard@openbossa.org>
+
+        getComputedStyle should return shorthands property with the minimum number of sides possible.
+        https://bugs.webkit.org/show_bug.cgi?id=75434
+
+        Reviewed by Tony Chang.
+
+        As stated in http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties we should
+        return shorthands properties with the minimum number of sides possible.
+
+        Existing tests have been updated accordingly.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
+        (WebCore::CSSComputedStyleDeclaration::getCSSPropertyValuesForSidesShorthand):
+        * css/CSSComputedStyleDeclaration.h:
+
 2012-01-03  Martin Robinson  <mrobinson@igalia.com>
 
         [GTK] GTK+ 3 theming code does not use the GtkOrientable style class
index 29d04dd..b089473 100644 (file)
@@ -2156,7 +2156,7 @@ PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(int proper
         case CSSPropertyBorderColor: {
             const int properties[4] = { CSSPropertyBorderTopColor, CSSPropertyBorderRightColor,
                                         CSSPropertyBorderBottomColor, CSSPropertyBorderLeftColor };
-            return getCSSPropertyValuesForShorthandProperties(properties, WTF_ARRAY_LENGTH(properties));
+            return getCSSPropertyValuesForSidesShorthand(properties);
         }
         case CSSPropertyBorderLeft: {
             const int properties[3] = { CSSPropertyBorderLeftWidth, CSSPropertyBorderLeftStyle,
@@ -2174,7 +2174,7 @@ PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(int proper
         case CSSPropertyBorderStyle: {
             const int properties[4] = { CSSPropertyBorderTopStyle, CSSPropertyBorderRightStyle,
                                         CSSPropertyBorderBottomStyle, CSSPropertyBorderLeftStyle };
-            return getCSSPropertyValuesForShorthandProperties(properties, WTF_ARRAY_LENGTH(properties));
+            return getCSSPropertyValuesForSidesShorthand(properties);
         }
         case CSSPropertyBorderTop: {
             const int properties[3] = { CSSPropertyBorderTopWidth, CSSPropertyBorderTopStyle,
@@ -2184,14 +2184,14 @@ PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(int proper
         case CSSPropertyBorderWidth: {
             const int properties[4] = { CSSPropertyBorderTopWidth, CSSPropertyBorderRightWidth,
                                         CSSPropertyBorderBottomWidth, CSSPropertyBorderLeftWidth };
-            return getCSSPropertyValuesForShorthandProperties(properties, WTF_ARRAY_LENGTH(properties));
+            return getCSSPropertyValuesForSidesShorthand(properties);
         }
         case CSSPropertyListStyle:
             break;
         case CSSPropertyMargin: {
             const int properties[4] = { CSSPropertyMarginTop, CSSPropertyMarginRight,
                                         CSSPropertyMarginBottom, CSSPropertyMarginLeft };
-            return getCSSPropertyValuesForShorthandProperties(properties, WTF_ARRAY_LENGTH(properties));
+            return getCSSPropertyValuesForSidesShorthand(properties);
         }
         case CSSPropertyOutline: {
             const int properties[3] = { CSSPropertyOutlineColor, CSSPropertyOutlineStyle,
@@ -2201,7 +2201,7 @@ PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(int proper
         case CSSPropertyPadding: {
             const int properties[4] = { CSSPropertyPaddingTop, CSSPropertyPaddingRight,
                                         CSSPropertyPaddingBottom, CSSPropertyPaddingLeft };
-            return getCSSPropertyValuesForShorthandProperties(properties, WTF_ARRAY_LENGTH(properties));
+            return getCSSPropertyValuesForSidesShorthand(properties);
         }
         /* Individual properties not part of the spec */
         case CSSPropertyBackgroundRepeatX:
@@ -2425,4 +2425,32 @@ PassRefPtr<CSSValueList> CSSComputedStyleDeclaration::getCSSPropertyValuesForSho
     return list.release();
 }
 
+PassRefPtr<CSSValueList> CSSComputedStyleDeclaration::getCSSPropertyValuesForSidesShorthand(const int* properties) const
+{
+    RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+    // Assume the properties are in the usual order top, right, bottom, left.
+    RefPtr<CSSValue> topValue = getPropertyCSSValue(properties[0], DoNotUpdateLayout);
+    RefPtr<CSSValue> rightValue = getPropertyCSSValue(properties[1], DoNotUpdateLayout);
+    RefPtr<CSSValue> bottomValue = getPropertyCSSValue(properties[2], DoNotUpdateLayout);
+    RefPtr<CSSValue> leftValue = getPropertyCSSValue(properties[3], DoNotUpdateLayout);
+
+    // All 4 properties must be specified.
+    if (!topValue || !rightValue || !bottomValue || !leftValue)
+        return 0;
+
+    bool showLeft = rightValue->cssText() != leftValue->cssText();
+    bool showBottom = (topValue->cssText() != bottomValue->cssText()) || showLeft;
+    bool showRight = (topValue->cssText() != rightValue->cssText()) || showBottom;
+
+    list->append(topValue);
+    if (showRight)
+        list->append(rightValue);
+    if (showBottom)
+        list->append(bottomValue);
+    if (showLeft)
+        list->append(leftValue);
+
+    return list.release();
+}
+
 } // namespace WebCore
index 50ab54e..6ef90af 100644 (file)
@@ -88,6 +88,7 @@ private:
 #endif
 
     PassRefPtr<CSSValueList> getCSSPropertyValuesForShorthandProperties(const int* properties, size_t) const;
+    PassRefPtr<CSSValueList> getCSSPropertyValuesForSidesShorthand(const int* properties) const;
 
     RefPtr<Node> m_node;
     PseudoId m_pseudoElementSpecifier;