Revert 3dde7a4 and use a more specific regular expression to match bo…

…rder-radius values. Add new tests.
wikimedia · Aug 3, 2014 · cf8f1e0 · cf8f1e0
1 parent 3dde7a4
commit cf8f1e0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 38 deletions.
diff --git a/lib/cssjanus.js b/lib/cssjanus.js
@@ -86,7 +86,6 @@ function CSSJanus() {
 		noFlipSingleToken = '`NOFLIP_SINGLE`',
 		noFlipClassToken = '`NOFLIP_CLASS`',
 		commentToken = '`COMMENT`',
-		importantToken = '`IMPORTANT`',
 		// Patterns
 		nonAsciiPattern = '[^\\u0020-\\u007e]',
 		unicodePattern = '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)',
@@ -99,7 +98,6 @@ function CSSJanus() {
 		charsWithinSelectorPattern = '[^\\}]*?',
 		noFlipPattern = '\\/\\*\\!?\\s*@noflip\\s*\\*\\/',
 		commentPattern = '\\/\\*[^*]*\\*+([^\\/*][^*]*\\*+)*\\/',
-		importantPattern = '\\s*\\!important\\s*',
 		escapePattern = '(?:' + unicodePattern + '|\\\\[^\\r\\n\\f0-9a-f])',
 		nmstartPattern = '(?:[_a-z]|' + nonAsciiPattern + '|' + escapePattern + ')',
 		nmcharPattern = '(?:[_a-z0-9-]|' + nonAsciiPattern + '|' + escapePattern + ')',
@@ -116,7 +114,6 @@ function CSSJanus() {
 		// Regular expressions
 		temporaryTokenRegExp = new RegExp( '`TMP`', 'g' ),
 		commentRegExp = new RegExp( commentPattern, 'gi' ),
-		importantRegExp = new RegExp( importantPattern, 'gi' ),
 		noFlipSingleRegExp = new RegExp( '(' + noFlipPattern + lookAheadNotOpenBracePattern + '[^;}]+;?)', 'gi' ),
 		noFlipClassRegExp = new RegExp( '(' + noFlipPattern + charsWithinSelectorPattern + '})', 'gi' ),
 		directionLtrRegExp = new RegExp( '(' + directionPattern + ')ltr', 'gi' ),
@@ -133,7 +130,8 @@ function CSSJanus() {
 		fourNotationColorRegExp = new RegExp( fourNotationColorPropsPattern + colorPattern + '(\\s+)' + colorPattern + '(\\s+)' + colorPattern + '(\\s+)' + colorPattern, 'gi' ),
 		bgHorizontalPercentageRegExp = new RegExp( '(background(?:-position)?\\s*:\\s*[^%:;}]*?)(-?' + numPattern + ')(%\\s*(?:' + quantPattern + '|' + identPattern + '))', 'gi' ),
 		bgHorizontalPercentageXRegExp = new RegExp( '(background-position-x\\s*:\\s*)(-?' + numPattern + ')(%)', 'gi' ),
-		borderRadiusRegExp = new RegExp( '(border-radius\\s*:\\s*)([^;}]*)', 'gi' );
+		borderRadiusRegExp = new RegExp( '(border-radius\\s*:\\s*)' + signedQuantPattern + '(?:(?:\\s+' + signedQuantPattern + ')(?:\\s+' + signedQuantPattern + ')?(?:\\s+' + signedQuantPattern + ')?)?' +
+			'(?:(?:(?:\\s*\\/\\s*)' + signedQuantPattern + ')(?:\\s+' + signedQuantPattern + ')?(?:\\s+' + signedQuantPattern + ')?(?:\\s+' + signedQuantPattern + ')?)?', 'gi' );
 
 	/**
 	 * Invert the horizontal value of a background position property.
@@ -155,53 +153,53 @@ function CSSJanus() {
 	 * @private
 	 * @param {string} match Matched property
 	 * @param {string} pre Text before value
-	 * @param {string} values Border radius values
 	 * @return {string} Inverted property
 	 */
-	function calculateNewBorderRadius( match, pre, values ) {
-		var important = ( values.indexOf( importantToken ) >= 0 );
-		if ( important ) {
-			values = values.replace( importantToken, '' ).trim();
-		}
+	function calculateNewBorderRadius( match, pre ) {
+		var firstGroup = [], secondGroup = [], i, values;
 
-		var elements = values.split( /\s*\/\s*/g );
+		for ( i = 2; i <= 5; i++ ) {
+			if ( arguments[i] ) {
+				firstGroup.push( arguments[i] );
+			}
+		}
 
-		switch ( elements.length ) {
-			case 1:
-				values = flipValues( elements[0] );
-				break;
-			case 2:
-				values = flipValues( elements[0] ) + ' / ' + flipValues( elements[1] );
-				break;
+		for ( i = 6; i <= 9; i++ ) {
+			if ( arguments[i] ) {
+				secondGroup.push( arguments[i] );
+			}
 		}
 
-		if ( important ) {
-			values = values + importantToken;
+		if ( secondGroup.length ) {
+			values = flipBorderRadiusValues( firstGroup ) + ' / ' + flipBorderRadiusValues( secondGroup );
+		} else {
+			values = flipBorderRadiusValues( firstGroup );
 		}
 
 		return pre + values;
 	}
 
 	/**
-	 * Invert a set of values.
+	 * Invert a set of border radius values.
 	 *
 	 * @private
-	 * @param {string} values Matched values
+	 * @param {array} values Matched values
 	 * @return {string} Inverted values
 	 */
-	function flipValues( values ) {
-		values = values.split( /\s+/g );
-
+	function flipBorderRadiusValues( values ) {
 		switch ( values.length ) {
 			case 4:
 				values = [values[1], values[0], values[3], values[2]];
 				break;
 			case 3:
-				values = [values[1], values[0], values[2]];
+				values = [values[1], values[0], values[1], values[2]];
 				break;
 			case 2:
 				values = [values[1], values[0]];
 				break;
+			case 1:
+				values = [values[0]];
+				break;
 		}
 
 		return values.join( ' ' );
@@ -220,19 +218,16 @@ function CSSJanus() {
 			// Tokenizers
 			var noFlipSingleTokenizer = new Tokenizer( noFlipSingleRegExp, noFlipSingleToken ),
 				noFlipClassTokenizer = new Tokenizer( noFlipClassRegExp, noFlipClassToken ),
-				importantTokenizer = new Tokenizer( importantRegExp, importantToken ),
 				commentTokenizer = new Tokenizer( commentRegExp, commentToken );
 
 			// Tokenize
 			css = commentTokenizer.tokenize(
-				importantTokenizer.tokenize(
-					noFlipClassTokenizer.tokenize(
-						noFlipSingleTokenizer.tokenize(
-							// We wrap tokens in ` , not ~ like the original implementation does.
-							// This was done because ` is not a legal character in CSS and can only
-							// occur in URLs, where we escape it to %60 before inserting our tokens.
-							css.replace( '`', '%60' )
-						)
+				noFlipClassTokenizer.tokenize(
+					noFlipSingleTokenizer.tokenize(
+						// We wrap tokens in ` , not ~ like the original implementation does.
+						// This was done because ` is not a legal character in CSS and can only
+						// occur in URLs, where we escape it to %60 before inserting our tokens.
+						css.replace( '`', '%60' )
 					)
 				)
 			);
@@ -280,9 +275,7 @@ function CSSJanus() {
 			// Detokenize
 			css = noFlipSingleTokenizer.detokenize(
 				noFlipClassTokenizer.detokenize(
-					importantTokenizer.detokenize(
-						commentTokenizer.detokenize( css )
-					)
+					commentTokenizer.detokenize( css )
 				)
 			);
 

diff --git a/test/cssjanus.test.js b/test/cssjanus.test.js
@@ -521,6 +521,10 @@ var tests = {
 			flip( 'border-radius: 5px' ),
 			'border-radius: 5px'
 		);
+		assert.equal(
+			flip( 'border-radius: 5px 9px 7px' ),
+			'border-radius: 9px 5px 9px 7px'
+		);
 		// Test horizontal / vertical radius rules
 		assert.equal(
 			flip( 'border-radius: 15px / 0 20px' ),
@@ -530,6 +534,14 @@ var tests = {
 			flip( 'border-radius: 15px 40px / 20px 15px' ),
 			'border-radius: 40px 15px / 15px 20px'
 		);
+		assert.equal(
+			flip( 'border-radius: 5px 9px 7px / 3px 4px' ),
+			'border-radius: 9px 5px 9px 7px / 4px 3px'
+		);
+		assert.equal(
+			flip( 'border-radius: 10px / 20px' ),
+			'border-radius: 10px / 20px'
+		);
 		// Test correct position of !important after flip
 		assert.equal(
 			flip( 'div { border-radius: 0 !important }' ),