[webkit-changes] [160299] trunk

Sun, 08 Dec 2013 21:11:46 -0800

Title: [160299] trunk
Revision
160299
Author
[email protected]
Date
2013-12-08 21:13:49 -0800 (Sun, 08 Dec 2013)

Log Message

getComputedStyle border-radius shorthand omits vertical radius information
https://bugs.webkit.org/show_bug.cgi?id=125394

Reviewed by Andreas Kling.

Source/WebCore:

Merge https://chromium.googlesource.com/chromium/blink/+/4c2866855dddbb28bb7d978ad627acc368af23d0

getComputedStyle of border-radius shows the vertical radius components if they differ from their horizontal counterpants.
We were incorrectly detecting this case and over simplifying the results of getComputedStyle.
This patch ensures we only hide the vertical values if they are identical to the horizontal values.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::getBorderRadiusShorthandValue):

LayoutTests:

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

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (160298 => 160299)


--- trunk/LayoutTests/ChangeLog	2013-12-09 04:51:32 UTC (rev 160298)
+++ trunk/LayoutTests/ChangeLog	2013-12-09 05:13:49 UTC (rev 160299)
@@ -1,3 +1,13 @@
+2013-12-08  Ryosuke Niwa  <[email protected]>
+
+        getComputedStyle border-radius shorthand omits vertical radius information
+        https://bugs.webkit.org/show_bug.cgi?id=125394
+
+        Reviewed by Andreas Kling.
+
+        * fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand-expected.txt:
+        * fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html:
+
 2013-12-08  Zan Dobersek  <[email protected]>
 
         Unreviewed GTK gardening.

Modified: trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand-expected.txt (160298 => 160299)


--- trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand-expected.txt	2013-12-09 04:51:32 UTC (rev 160298)
+++ trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand-expected.txt	2013-12-09 05:13:49 UTC (rev 160299)
@@ -83,6 +83,38 @@
 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 computedStyle.getPropertyValue('border-radius') is '10px 20px 30px 40px / 15px 25px 35px 45px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '10px 20px 30px 40px / 15px 25px 35px 45px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '10px 15px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '20px 25px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '30px 35px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '40px 45px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '10px 20px 30px 40px / 10px 25px 35px 45px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '10px 20px 30px 40px / 10px 25px 35px 45px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '10px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '20px 25px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '30px 35px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '40px 45px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '10px 20px 30px 40px / 10px 20px 35px 45px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '10px 20px 30px 40px / 10px 20px 35px 45px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '10px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '20px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '30px 35px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '40px 45px'
+PASS checkComputedStyleValue() is true
+PASS computedStyle.getPropertyValue('border-radius') is '10px 20px 30px 40px / 10px 20px 30px 45px'
+PASS computedStyle.getPropertyCSSValue('border-radius').toString() is '[object CSSValueList]'
+PASS computedStyle.getPropertyCSSValue('border-radius').cssText is '10px 20px 30px 40px / 10px 20px 30px 45px'
+PASS computedStyle.getPropertyCSSValue('border-top-left-radius').cssText is '10px'
+PASS computedStyle.getPropertyCSSValue('border-top-right-radius').cssText is '20px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText is '30px'
+PASS computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText is '40px 45px'
+PASS checkComputedStyleValue() is true
 PASS successfullyParsed is true
 
 TEST COMPLETE

Modified: trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html (160298 => 160299)


--- trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html	2013-12-09 04:51:32 UTC (rev 160298)
+++ trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html	2013-12-09 05:13:49 UTC (rev 160299)
@@ -15,17 +15,17 @@
 
 testContainer.innerHTML = '<div style="width:100px;height:100px"><div id="test">hello</div></div>';
 
-e = document.getElementById('test');
-computedStyle = window.getComputedStyle(e, null);
+var element = document.getElementById('test');
+var computedStyle = window.getComputedStyle(element, null);
 
 function checkComputedStyleValue() {
-    var before = window.getComputedStyle(e, null).getPropertyValue('border-radius');
-    e.style.background = '';
-    e.style.background = ""
-    return (window.getComputedStyle(e, null).getPropertyValue('border-radius') == before);
+    var before = window.getComputedStyle(element, null).getPropertyValue('border-radius');
+    element.style.background = '';
+    element.style.background = ""
+    return (window.getComputedStyle(element, null).getPropertyValue('border-radius') == before);
 }
 
-e.style.borderRadius = "4em";
+element.style.borderRadius = "4em";
 shouldBe("computedStyle.getPropertyValue('border-radius')", "'64px'");
 shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'64px'");
@@ -35,7 +35,7 @@
 shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'64px'");
 shouldBe("checkComputedStyleValue()", "true");
 
-e.style.borderRadius = "2em 1em 4em / 0.5em 3em";
+element.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'");
@@ -45,11 +45,11 @@
 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";
+element.style.borderRadius = "";
+element.style.borderTopLeftRadius = "4em";
+element.style.borderTopRightRadius = "4em";
+element.style.borderBottomLeftRadius = "4em";
+element.style.borderBottomRightRadius = "4em";
 shouldBe("computedStyle.getPropertyValue('border-radius')", "'64px'");
 shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'64px'");
@@ -59,7 +59,7 @@
 shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'64px'");
 shouldBe("checkComputedStyleValue()", "true");
 
-e.style.borderRadius = "1px 2px";
+element.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'");
@@ -69,7 +69,7 @@
 shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'2px'");
 shouldBe("checkComputedStyleValue()", "true");
 
-e.style.borderRadius = "1px 2px 4px";
+element.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'");
@@ -79,7 +79,7 @@
 shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'2px'");
 shouldBe("checkComputedStyleValue()", "true");
 
-e.style.borderRadius = "1px 2px 4px 6px";
+element.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'");
@@ -89,7 +89,7 @@
 shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px'");
 shouldBe("checkComputedStyleValue()", "true");
 
-e.style.borderRadius = "1px 2px 4px 6px / 4em";
+element.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'");
@@ -99,7 +99,7 @@
 shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px 64px'");
 shouldBe("checkComputedStyleValue()", "true");
 
-e.style.borderRadius = "1px 2px 4px 6px / 4em 3px";
+element.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'");
@@ -109,7 +109,7 @@
 shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px 3px'");
 shouldBe("checkComputedStyleValue()", "true");
 
-e.style.borderRadius = "1px 2px 4px 6px / 4em 3px 7px";
+element.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'");
@@ -119,7 +119,7 @@
 shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px 3px'");
 shouldBe("checkComputedStyleValue()", "true");
 
-e.style.borderRadius = "1px 2px 4px 6px / 4em 3px 7px 8px";
+element.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'");
@@ -129,6 +129,46 @@
 shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'6px 8px'");
 shouldBe("checkComputedStyleValue()", "true");
 
+element.style.borderRadius = "10px 20px 30px 40px / 15px 25px 35px 45px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'10px 20px 30px 40px / 15px 25px 35px 45px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'10px 20px 30px 40px / 15px 25px 35px 45px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'10px 15px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'20px 25px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'30px 35px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'40px 45px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+element.style.borderRadius = "10px 20px 30px 40px / 10px 25px 35px 45px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'10px 20px 30px 40px / 10px 25px 35px 45px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'10px 20px 30px 40px / 10px 25px 35px 45px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'10px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'20px 25px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'30px 35px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'40px 45px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+element.style.borderRadius = "10px 20px 30px 40px / 10px 20px 35px 45px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'10px 20px 30px 40px / 10px 20px 35px 45px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'10px 20px 30px 40px / 10px 20px 35px 45px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'10px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'20px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'30px 35px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'40px 45px'");
+shouldBe("checkComputedStyleValue()", "true");
+
+element.style.borderRadius = "10px 20px 30px 40px / 10px 20px 30px 45px";
+shouldBe("computedStyle.getPropertyValue('border-radius')", "'10px 20px 30px 40px / 10px 20px 30px 45px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('border-radius').cssText", "'10px 20px 30px 40px / 10px 20px 30px 45px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-left-radius').cssText", "'10px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-top-right-radius').cssText", "'20px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-right-radius').cssText", "'30px'");
+shouldBe("computedStyle.getPropertyCSSValue('border-bottom-left-radius').cssText", "'40px 45px'");
+shouldBe("checkComputedStyleValue()", "true");
+
 document.body.removeChild(testContainer);
 
 </script>

Modified: trunk/Source/WebCore/ChangeLog (160298 => 160299)


--- trunk/Source/WebCore/ChangeLog	2013-12-09 04:51:32 UTC (rev 160298)
+++ trunk/Source/WebCore/ChangeLog	2013-12-09 05:13:49 UTC (rev 160299)
@@ -1,3 +1,19 @@
+2013-12-08  Ryosuke Niwa  <[email protected]>
+
+        getComputedStyle border-radius shorthand omits vertical radius information
+        https://bugs.webkit.org/show_bug.cgi?id=125394
+
+        Reviewed by Andreas Kling.
+
+        Merge https://chromium.googlesource.com/chromium/blink/+/4c2866855dddbb28bb7d978ad627acc368af23d0
+
+        getComputedStyle of border-radius shows the vertical radius components if they differ from their horizontal counterpants.
+        We were incorrectly detecting this case and over simplifying the results of getComputedStyle.
+        This patch ensures we only hide the vertical values if they are identical to the horizontal values.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::getBorderRadiusShorthandValue):
+
 2013-12-08  Carlos Garcia Campos  <[email protected]>
 
         [GTK] Do not skip attributes with only custom setter

Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (160298 => 160299)


--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp	2013-12-09 04:51:32 UTC (rev 160298)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp	2013-12-09 05:13:49 UTC (rev 160299)
@@ -746,7 +746,6 @@
     bool showVerticalBottomLeft = style->borderTopRightRadius().height() != style->borderBottomLeftRadius().height();
     bool showVerticalBottomRight = showVerticalBottomLeft || (style->borderBottomRightRadius().height() != style->borderTopLeftRadius().height());
     bool showVerticalTopRight = showVerticalBottomRight || (style->borderTopRightRadius().height() != style->borderTopLeftRadius().height());
-    bool showVerticalTopLeft = (style->borderTopLeftRadius().width() != style->borderTopLeftRadius().height());
 
     RefPtr<CSSValueList> topLeftRadius = getBorderRadiusCornerValues(style->borderTopLeftRadius(), style, renderView);
     RefPtr<CSSValueList> topRightRadius = getBorderRadiusCornerValues(style->borderTopRightRadius(), style, renderView);
@@ -764,17 +763,18 @@
 
     list.get().append(horizontalRadii.release());
 
-    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.get().append(verticalRadii.release());
-    }
+    RefPtr<CSSValueList> verticalRadiiList = CSSValueList::createSpaceSeparated();
+    verticalRadiiList->append(topLeftRadius->item(1));
+    if (showVerticalTopRight)
+        verticalRadiiList->append(topRightRadius->item(1));
+    if (showVerticalBottomRight)
+        verticalRadiiList->append(bottomRightRadius->item(1));
+    if (showVerticalBottomLeft)
+        verticalRadiiList->append(bottomLeftRadius->item(1));
+
+    if (!verticalRadiiList->equals(*toCSSValueList(list.get().item(0))))
+        list.get().append(verticalRadiiList.release());
+
     return list;
 }
 

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to