Fixes #301 - proper border-radius processing.

* Makes sure horizontal / vertical values of border-radius are respected.

diff --git a/History.md b/History.md
index 86ea227..e14b735 100644 (file)
--- a/History.md
+++ b/History.md
@@ -1,3 +1,8 @@
+[2.2.4 / 2014-xx-xx](https://github.com/GoalSmashers/clean-css/compare/v2.2.3...v2.2.4)
+==================
+
+* Fixed issue [#301](https://github.com/GoalSmashers/clean-css/issues/301) - proper border radius processing.
+
 [2.2.3 / 2014-06-24](https://github.com/GoalSmashers/clean-css/compare/v2.2.2...v2.2.3)
 ==================
 

diff --git a/lib/properties/processable.js b/lib/properties/processable.js
index e1a0a59..35fbfcc 100644 (file)
--- a/lib/properties/processable.js
+++ b/lib/properties/processable.js
@@ -331,6 +331,27 @@ module.exports = (function () {
     return breakUp._widthStyleColor(token, 'border', ['width', 'style', 'color']);
   };
 
+  breakUp.borderRadius = function(token) {
+    var parts = token.value.split('/');
+    if (parts.length == 1)
+      return breakUp.fourUnits(token);
+
+    var horizontalPart = token.clone();
+    var verticalPart = token.clone();
+
+    horizontalPart.value = parts[0];
+    verticalPart.value = parts[1];
+
+    var horizontalBreakUp = breakUp.fourUnits(horizontalPart);
+    var verticalBreakUp = breakUp.fourUnits(verticalPart);
+
+    for (var i = 0; i < 4; i++) {
+      horizontalBreakUp[i].value = [horizontalBreakUp[i].value, verticalBreakUp[i].value];
+    }
+
+    return horizontalBreakUp;
+  };
+
   // Contains functions that can put together shorthands from their components
   // NOTE: correct order of tokens is assumed inside these functions!
   var putTogether = {
@@ -485,6 +506,33 @@ module.exports = (function () {
           return innerFunc(prop, tokens, isImportant);
         }
       };
+    },
+    borderRadius: function (prop, tokens, isImportant) {
+      var verticalTokens = [];
+
+      for (var i = 0, l = tokens.length; i < l; i++) {
+        var token = tokens[i];
+        if (!Array.isArray(token.value))
+          continue;
+
+        if (token.value.length > 1) {
+          verticalTokens.push({
+            prop: token.prop,
+            value: token.value[1],
+            isImportant: token.isImportant
+          });
+        }
+
+        token.value = token.value[0];
+      }
+
+      var result = putTogether.takeCareOfInherit(putTogether.fourUnits)(prop, tokens, isImportant);
+      if (verticalTokens.length > 0) {
+        var verticalResult = putTogether.takeCareOfInherit(putTogether.fourUnits)(prop, verticalTokens, isImportant);
+        result.value += ' / ' + verticalResult.value;
+      }
+
+      return result;
     }
   };
 
@@ -661,6 +709,7 @@ module.exports = (function () {
     };
     for (var i = 0; i < components.length; i++) {
       processable[components[i]] = {
+        breakUp: breakup || breakUp.fourUnits,
         canOverride: canoverride || canOverride.unit,
         defaultValue: defaultValue || '0',
         shortestValue: shortestValue
@@ -673,28 +722,28 @@ module.exports = (function () {
     'border-top-right-radius',
     'border-bottom-right-radius',
     'border-bottom-left-radius'
-  ]);
+  ], breakUp.borderRadius, putTogether.borderRadius);
 
   addFourValueShorthand('-moz-border-radius', [
     '-moz-border-top-left-radius',
     '-moz-border-top-right-radius',
     '-moz-border-bottom-right-radius',
     '-moz-border-bottom-left-radius'
-  ]);
+  ], breakUp.borderRadius, putTogether.borderRadius);
 
   addFourValueShorthand('-webkit-border-radius', [
     '-webkit-border-top-left-radius',
     '-webkit-border-top-right-radius',
     '-webkit-border-bottom-right-radius',
     '-webkit-border-bottom-left-radius'
-  ]);
+  ], breakUp.borderRadius, putTogether.borderRadius);
 
   addFourValueShorthand('-o-border-radius', [
     '-o-border-top-left-radius',
     '-o-border-top-right-radius',
     '-o-border-bottom-right-radius',
     '-o-border-bottom-left-radius'
-  ]);
+  ], breakUp.borderRadius, putTogether.borderRadius);
 
   addFourValueShorthand('border-color', [
     'border-top-color',

diff --git a/test/unit-test.js b/test/unit-test.js
index 2c31664..b3a2802 100644 (file)
--- a/test/unit-test.js
+++ b/test/unit-test.js
@@ -1951,7 +1951,18 @@ title']{display:block}",
     'outline auto': [
       'a{outline:5px auto -webkit-focus-ring-color}',
       'a{outline:-webkit-focus-ring-color auto 5px}'
-    ]
+    ],
+    'border radius side H+V': 'a{border-top-left-radius:1em / 1em}',
+    'border radius expanded H+V': [
+      'a{border-radius:1em 1em 1em 1em / 2em 2em 2em 2em}',
+      'a{border-radius:1em / 2em}'
+    ],
+    'border radius expanded H+V with mixed values #1': [
+      'a{border-radius:1em 2em 1em 2em / 1em 2em 3em 2em}',
+      'a{border-radius:1em 2em / 1em 2em 3em}'
+    ],
+    'border radius expanded H+V with mixed values #2': 'a{border-radius:1em / 1em 1em 1em 2em}',
+    'border radius H+V': 'a{border-radius:50% / 100%}'
   }),
   'viewport units': cssContext({
     'shorthand margin with viewport width not changed': 'div{margin:5vw}'