getComputedStyle for border-radius is not implemented.
authoralexis.menard@openbossa.org <alexis.menard@openbossa.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 9 Jan 2012 19:26:54 +0000 (19:26 +0000)
committeralexis.menard@openbossa.org <alexis.menard@openbossa.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 9 Jan 2012 19:26:54 +0000 (19:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=75630

Reviewed by Tony Chang.

Source/WebCore:

Implement getComputedStyle for border-radius shorthand property.

Test: fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::getBorderRadiusCornerValues):
(WebCore::getBorderRadiusCornerValue):
(WebCore::getBorderRadiusShorthandValue):
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):

LayoutTests:

Add new tests to make sure we return the correct values.

* fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand-expected.txt: Added.
* fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand-expected.txt [new file with mode: 0644]
LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp

index 7bb4baf..dc6cd8e 100644 (file)
@@ -1,3 +1,15 @@
+2012-01-09  Alexis Menard  <alexis.menard@openbossa.org>
+
+        getComputedStyle for border-radius is not implemented.
+        https://bugs.webkit.org/show_bug.cgi?id=75630
+
+        Reviewed by Tony Chang.
+
+        Add new tests to make sure we return the correct values.
+
+        * fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand-expected.txt: Added.
+        * fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html: Added.
+
 2012-01-09  John Knottenbelt  <jknotten@chromium.org>
 
         [Chromium] Update test expectations.
diff --git a/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand-expected.txt b/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand-expected.txt
new file mode 100644 (file)
index 0000000..af317af
--- /dev/null
@@ -0,0 +1,89 @@
+Test to make sure border-radius shorthand property returns CSSValueList properly.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS computedStyle.getPropertyValue('border-radius') is '64px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '64px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '64px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '64px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '64px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '64px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '32px 16px 64px / 8px 48px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '32px 16px 64px / 8px 48px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '32px 8px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '16px 48px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '64px 8px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '16px 48px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '64px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '64px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '64px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '64px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '64px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '64px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '1px 2px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '1px 2px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '1px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '2px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '1px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '2px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '1px 2px 4px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '1px 2px 4px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '1px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '2px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '4px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '2px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '1px 2px 4px 6px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '1px 2px 4px 6px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '1px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '2px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '4px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '6px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '1px 2px 4px 6px / 64px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '1px 2px 4px 6px / 64px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '1px 64px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '2px 64px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '4px 64px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '6px 64px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '1px 2px 4px 6px / 64px 3px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '1px 2px 4px 6px / 64px 3px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '1px 64px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '2px 3px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '4px 64px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '6px 3px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '1px 2px 4px 6px / 64px 3px 7px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '1px 2px 4px 6px / 64px 3px 7px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '1px 64px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '2px 3px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '4px 7px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '6px 3px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '1px 2px 4px 6px / 64px 3px 7px 8px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '1px 2px 4px 6px / 64px 3px 7px 8px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '1px 64px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '2px 3px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '4px 7px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '6px 8px'
+PASS checkComputedStyleValue() is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html b/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html
new file mode 100644 (file)
index 0000000..9cbfa1d
--- /dev/null
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="../../js/resources/js-test-pre.js"></script>
+</head>
+<body>
+<script>
+
+description("Test to make sure border-radius shorthand property returns CSSValueList properly.")
+
+var testContainer = document.createElement("div");
+testContainer.contentEditable = true;
+document.body.appendChild(testContainer);
+
+testContainer.innerHTML = '<div style="width:100px;height:100px"><div id="test">hello</div></div>';
+
+e = document.getElementById('test');
+computedStyle = window.getComputedStyle(e, null);
+
+function checkComputedStyleValue() {
+    var before = window.getComputedStyle(e, null).getPropertyValue('border-radius');
+    e.style.background = 'none';
+    e.style.background = before;
+    return (window.getComputedStyle(e, null).getPropertyValue('border-radius') == before);
+}
+
+e.style.borderRadius = "4em";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'64px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+e.style.borderRadius = "2em 1em 4em / 0.5em 3em";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'32px 16px 64px / 8px 48px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'32px 16px 64px / 8px 48px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'32px 8px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'16px 48px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'64px 8px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'16px 48px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+e.style.borderRadius = "";
+e.style.borderTopLeftRadius = "4em";
+e.style.borderTopRightRadius = "4em";
+e.style.borderBottomLeftRadius = "4em";
+e.style.borderBottomRightRadius = "4em";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'64px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+e.style.borderRadius = "1px 2px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'1px 2px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'1px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'2px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'1px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'2px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+e.style.borderRadius = "1px 2px 4px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'1px 2px 4px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'1px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'2px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'4px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'2px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+e.style.borderRadius = "1px 2px 4px 6px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'1px 2px 4px 6px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'1px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'2px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'4px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+e.style.borderRadius = "1px 2px 4px 6px / 4em";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px / 64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'1px 2px 4px 6px / 64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'1px 64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'2px 64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'4px 64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px 64px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+e.style.borderRadius = "1px 2px 4px 6px / 4em 3px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px / 64px 3px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'1px 2px 4px 6px / 64px 3px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'1px 64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'2px 3px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'4px 64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px 3px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+e.style.borderRadius = "1px 2px 4px 6px / 4em 3px 7px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px / 64px 3px 7px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'1px 2px 4px 6px / 64px 3px 7px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'1px 64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'2px 3px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'4px 7px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px 3px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+e.style.borderRadius = "1px 2px 4px 6px / 4em 3px 7px 8px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px / 64px 3px 7px 8px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'1px 2px 4px 6px / 64px 3px 7px 8px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'1px 64px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'2px 3px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'4px 7px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px 8px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+document.body.removeChild(testContainer);
+
+</script>
+<script src="../../js/resources/js-test-post.js"></script>
+</body>
+</html>
index e975484..a211863 100644 (file)
@@ -1,3 +1,20 @@
+2012-01-09  Alexis Menard  <alexis.menard@openbossa.org>
+
+        getComputedStyle for border-radius is not implemented.
+        https://bugs.webkit.org/show_bug.cgi?id=75630
+
+        Reviewed by Tony Chang.
+
+        Implement getComputedStyle for border-radius shorthand property.
+
+        Test: fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::getBorderRadiusCornerValues):
+        (WebCore::getBorderRadiusCornerValue):
+        (WebCore::getBorderRadiusShorthandValue):
+        (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
+
 2012-01-09  Sheriff Bot  <webkit.review.bot@gmail.com>
 
         Unreviewed, rolling out r104418.
index 3e0dc8c..22eec1e 100644 (file)
@@ -576,14 +576,9 @@ PassRefPtr<CSSPrimitiveValue> CSSComputedStyleDeclaration::currentColorOrValidCo
     return cssValuePool->createColorValue(color.rgb());
 }
 
-static PassRefPtr<CSSValue> getBorderRadiusCornerValue(LengthSize radius, const RenderStyle* style, CSSValuePool* cssValuePool)
+static PassRefPtr<CSSValueList> getBorderRadiusCornerValues(LengthSize radius, const RenderStyle* style, CSSValuePool* cssValuePool)
 {
     RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
-    if (radius.width() == radius.height()) {
-        if (radius.width().type() == Percent)
-            return cssValuePool->createValue(radius.width().percent(), CSSPrimitiveValue::CSS_PERCENTAGE);
-        return zoomAdjustedPixelValue(radius.width().value(), style, cssValuePool);
-    }
     if (radius.width().type() == Percent)
         list->append(cssValuePool->createValue(radius.width().percent(), CSSPrimitiveValue::CSS_PERCENTAGE));
     else
@@ -595,6 +590,58 @@ static PassRefPtr<CSSValue> getBorderRadiusCornerValue(LengthSize radius, const
     return list.release();
 }
 
+static PassRefPtr<CSSValue> getBorderRadiusCornerValue(LengthSize radius, const RenderStyle* style, CSSValuePool* cssValuePool)
+{
+    if (radius.width() == radius.height()) {
+        if (radius.width().type() == Percent)
+            return cssValuePool->createValue(radius.width().percent(), CSSPrimitiveValue::CSS_PERCENTAGE);
+        return zoomAdjustedPixelValue(radius.width().value(), style, cssValuePool);
+    }
+    return getBorderRadiusCornerValues(radius, style, cssValuePool);
+}
+
+static PassRefPtr<CSSValueList> getBorderRadiusShorthandValue(const RenderStyle* style, CSSValuePool* cssValuePool)
+{
+    RefPtr<CSSValueList> list = CSSValueList::createSlashSeparated();
+    bool showHorizontalBottomLeft = style->borderTopRightRadius().width() != style->borderBottomLeftRadius().width();
+    bool showHorizontalBottomRight = style->borderBottomRightRadius().width() != style->borderTopLeftRadius().width();
+    bool showHorizontalTopRight = style->borderTopRightRadius().width() != style->borderTopLeftRadius().width();
+
+    bool showVerticalBottomLeft = style->borderTopRightRadius().height() != style->borderBottomLeftRadius().height();
+    bool showVerticalBottomRight = (style->borderBottomRightRadius().height() != style->borderTopLeftRadius().height()) || showVerticalBottomLeft;
+    bool showVerticalTopRight = (style->borderTopRightRadius().height() != style->borderTopLeftRadius().height()) || showVerticalBottomRight;
+    bool showVerticalTopLeft = (style->borderTopLeftRadius().width() != style->borderTopLeftRadius().height());
+
+    RefPtr<CSSValueList> topLeftRadius = getBorderRadiusCornerValues(style->borderTopLeftRadius(), style, cssValuePool);
+    RefPtr<CSSValueList> topRightRadius = getBorderRadiusCornerValues(style->borderTopRightRadius(), style, cssValuePool);
+    RefPtr<CSSValueList> bottomRightRadius = getBorderRadiusCornerValues(style->borderBottomRightRadius(), style, cssValuePool);
+    RefPtr<CSSValueList> bottomLeftRadius = getBorderRadiusCornerValues(style->borderBottomLeftRadius(), style, cssValuePool);
+
+    RefPtr<CSSValueList> horizontalRadii = CSSValueList::createSpaceSeparated();
+    horizontalRadii->append(topLeftRadius->item(0));
+    if (showHorizontalTopRight)
+        horizontalRadii->append(topRightRadius->item(0));
+    if (showHorizontalBottomRight)
+        horizontalRadii->append(bottomRightRadius->item(0));
+    if (showHorizontalBottomLeft)
+        horizontalRadii->append(bottomLeftRadius->item(0));
+
+    list->append(horizontalRadii);
+
+    if (showVerticalTopLeft) {
+        RefPtr<CSSValueList> verticalRadii = CSSValueList::createSpaceSeparated();
+        verticalRadii->append(topLeftRadius->item(1));
+        if (showVerticalTopRight)
+            verticalRadii->append(topRightRadius->item(1));
+        if (showVerticalBottomRight)
+            verticalRadii->append(bottomRightRadius->item(1));
+        if (showVerticalBottomLeft)
+            verticalRadii->append(bottomLeftRadius->item(1));
+        list->append(verticalRadii);
+    }
+    return list.release();
+}
+
 static LayoutRect sizingBox(RenderObject* renderer)
 {
     if (!renderer->isBox())
@@ -2135,7 +2182,6 @@ PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(int proper
         case CSSPropertyWebkitFilter:
             return valueForFilter(style.get());
 #endif
-        /* Shorthand properties, currently not supported see bug 13658*/
         case CSSPropertyBackground: {
             const int properties[5] = { CSSPropertyBackgroundColor, CSSPropertyBackgroundImage,
                                         CSSPropertyBackgroundRepeat, CSSPropertyBackgroundAttachment,
@@ -2170,7 +2216,7 @@ PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(int proper
         case CSSPropertyBorderImage:
             return valueForNinePieceImage(style->borderImage(), cssValuePool);
         case CSSPropertyBorderRadius:
-            break;
+            return getBorderRadiusShorthandValue(style.get(), cssValuePool);
         case CSSPropertyBorderRight: {
             const int properties[3] = { CSSPropertyBorderRightWidth, CSSPropertyBorderRightStyle,
                                         CSSPropertyBorderRightColor };