From e457d804eb6f854baf5edfd022ce217d53d6e946 Mon Sep 17 00:00:00 2001 From: MatmaRex Date: Mon, 4 Mar 2013 12:36:41 +0100 Subject: [PATCH] (bug 45677) CSSJanus: support text-shadow and box-shadow flipping We just need to negate the horizontal offset value in both of them. This only supports *a single shadow* per element; multiple shadows are not supported (only the first will be flipped). Also, to make it possible: * don't mangle 5+ consecutive numeric values in the 'four_notation_quantity' rule * support rgb(a) and hsl(a) colors in the 'color' rule Change-Id: I148229558e1b9a0516e413ffe86007235c3c3ef8 --- includes/libs/CSSJanus.php | 52 ++++++++++++++++++-- tests/phpunit/includes/libs/CSSJanusTest.php | 41 ++++++++++++--- 2 files changed, 82 insertions(+), 11 deletions(-) diff --git a/includes/libs/CSSJanus.php b/includes/libs/CSSJanus.php index 76c5b6ab5b..bfcbc9783e 100644 --- a/includes/libs/CSSJanus.php +++ b/includes/libs/CSSJanus.php @@ -76,6 +76,9 @@ class CSSJanus { 'cursor_west' => null, 'four_notation_quantity' => null, 'four_notation_color' => null, + 'box_shadow' => null, + 'text_shadow1' => null, + 'text_shadow2' => null, 'bg_horizontal_percentage' => null, 'bg_horizontal_percentage_x' => null, ); @@ -96,7 +99,7 @@ class CSSJanus { $patterns['ident'] = "-?{$patterns['nmstart']}{$patterns['nmchar']}*"; $patterns['quantity'] = "{$patterns['num']}(?:\s*{$patterns['unit']}|{$patterns['ident']})?"; $patterns['possibly_negative_quantity'] = "((?:-?{$patterns['quantity']})|(?:inherit|auto))"; - $patterns['color'] = "(#?{$patterns['nmchar']}+)"; + $patterns['color'] = "(#?{$patterns['nmchar']}+|(?:rgba?|hsla?)\([ \d.,%-]+\))"; $patterns['url_chars'] = "(?:{$patterns['url_special_chars']}|{$patterns['nonAscii']}|{$patterns['escape']})*"; $patterns['lookahead_not_open_brace'] = "(?!({$patterns['nmchar']}|\r?\n|\s|#|\:|\.|\,|\+|>)*?{)"; $patterns['lookahead_not_closing_paren'] = "(?!{$patterns['url_chars']}?{$patterns['valid_after_uri_chars']}\))"; @@ -113,8 +116,11 @@ class CSSJanus { $patterns['rtl_in_url'] = "/{$patterns['lookbehind_not_letter']}(rtl){$patterns['lookahead_for_closing_paren']}/i"; $patterns['cursor_east'] = "/{$patterns['lookbehind_not_letter']}([ns]?)e-resize/"; $patterns['cursor_west'] = "/{$patterns['lookbehind_not_letter']}([ns]?)w-resize/"; - $patterns['four_notation_quantity'] = "/{$patterns['possibly_negative_quantity']}(\s+){$patterns['possibly_negative_quantity']}(\s+){$patterns['possibly_negative_quantity']}(\s+){$patterns['possibly_negative_quantity']}/i"; - $patterns['four_notation_color'] = "/(-color\s*:\s*){$patterns['color']}(\s+){$patterns['color']}(\s+){$patterns['color']}(\s+){$patterns['color']}/i"; + $patterns['four_notation_quantity'] = "/(:\s*){$patterns['possibly_negative_quantity']}(\s+){$patterns['possibly_negative_quantity']}(\s+){$patterns['possibly_negative_quantity']}(\s+){$patterns['possibly_negative_quantity']}(\s*[;}])/i"; + $patterns['four_notation_color'] = "/(-color\s*:\s*){$patterns['color']}(\s+){$patterns['color']}(\s+){$patterns['color']}(\s+){$patterns['color']}(\s*[;}])/i"; + $patterns['box_shadow'] = "/(box-shadow\s*:\s*(?:inset\s*)?){$patterns['possibly_negative_quantity']}/i"; + $patterns['text_shadow1'] = "/(text-shadow\s*:\s*){$patterns['color']}(\s*){$patterns['possibly_negative_quantity']}/i"; + $patterns['text_shadow2'] = "/(text-shadow\s*:\s*){$patterns['possibly_negative_quantity']}/i"; // The two regexes below are parenthesized differently then in the original implementation to make the // callback's job more straightforward $patterns['bg_horizontal_percentage'] = "/(background(?:-position)?\s*:\s*[^%]*?)(-?{$patterns['num']})(%\s*(?:{$patterns['quantity']}|{$patterns['ident']}))/"; @@ -161,6 +167,7 @@ class CSSJanus { $css = self::fixCursorProperties( $css ); $css = self::fixFourPartNotation( $css ); $css = self::fixBackgroundPosition( $css ); + $css = self::fixShadows( $css ); // Detokenize stuff we tokenized before $css = $comments->detokenize( $css ); @@ -257,8 +264,43 @@ class CSSJanus { * @return string */ private static function fixFourPartNotation( $css ) { - $css = preg_replace( self::$patterns['four_notation_quantity'], '$1$2$7$4$5$6$3', $css ); - $css = preg_replace( self::$patterns['four_notation_color'], '$1$2$3$8$5$6$7$4', $css ); + $css = preg_replace( self::$patterns['four_notation_quantity'], '$1$2$3$8$5$6$7$4$9', $css ); + $css = preg_replace( self::$patterns['four_notation_color'], '$1$2$3$8$5$6$7$4$9', $css ); + + return $css; + } + + /** + * Negates horizontal offset in box-shadow and text-shadow rules. + * + * @param $css string + * @return string + */ + private static function fixShadows( $css ) { + // Flips the sign of a CSS value, possibly with a unit. + // (We can't just negate the value with unary minus due to the units.) + $flipSign = function ( $cssValue ) { + // Don't mangle zeroes + if ( intval( $cssValue ) === 0 ) { + return $cssValue; + } elseif ( $cssValue[0] === '-' ) { + return substr( $cssValue, 1 ); + } else { + return "-" . $cssValue; + } + }; + + $css = preg_replace_callback( self::$patterns['box_shadow'], function ( $matches ) use ( $flipSign ) { + return $matches[1] . $flipSign( $matches[2] ); + }, $css ); + + $css = preg_replace_callback( self::$patterns['text_shadow1'], function ( $matches ) use ( $flipSign ) { + return $matches[1] . $matches[2] . $matches[3] . $flipSign( $matches[4] ); + }, $css ); + + $css = preg_replace_callback( self::$patterns['text_shadow2'], function ( $matches ) use ( $flipSign ) { + return $matches[1] . $flipSign( $matches[2] ); + }, $css ); return $css; } diff --git a/tests/phpunit/includes/libs/CSSJanusTest.php b/tests/phpunit/includes/libs/CSSJanusTest.php index 26747b91f9..a4bd512b1e 100644 --- a/tests/phpunit/includes/libs/CSSJanusTest.php +++ b/tests/phpunit/includes/libs/CSSJanusTest.php @@ -151,14 +151,21 @@ class CSSJanusTest extends MediaWikiTestCase { '#settings td p strong' ), array( - # Not sure how 4+ values should behave, - # testing to make sure changes are detected - '.foo { x-unknown: 1 2 3 4 5; }', - '.foo { x-unknown: 1 4 3 2 5; }', + // Test the colors regex + '.foo { border-color: red green blue white }', + '.foo { border-color: red white blue green }', ), array( - '.foo { x-unknown: 1 2 3 4 5 6; }', - '.foo { x-unknown: 1 4 3 2 5 6; }', + // Test the colors regex harder + '.foo { border-color: red #f00 rgb(255, 0, 0%) rgba(100%, 0, 0, 0) }', + '.foo { border-color: red rgba(100%, 0, 0, 0) rgb(255, 0, 0%) #f00 }', + ), + array( + // Do not bork 4+ values + '.foo { x-unknown: 1 2 3 4 5; }' + ), + array( + '.foo { x-unknown: 1 2 3 4 5 6; }' ), // Shorthand / Three notation @@ -179,6 +186,28 @@ class CSSJanusTest extends MediaWikiTestCase { '.foo { padding: 1px; }' ), + // text-shadow and box-shadow + array( + '.foo { box-shadow: -6px 3px 8px 5px rgba(0, 0, 0, 0.25); }', + '.foo { box-shadow: 6px 3px 8px 5px rgba(0, 0, 0, 0.25); }', + ), + array( + '.foo { box-shadow: inset -6px 3px 8px 5px rgba(0, 0, 0, 0.25); }', + '.foo { box-shadow: inset 6px 3px 8px 5px rgba(0, 0, 0, 0.25); }', + ), + array( + '.foo { text-shadow: orange 2px 0; }', + '.foo { text-shadow: orange -2px 0; }', + ), + array( + '.foo { text-shadow: 2px 0 orange; }', + '.foo { text-shadow: -2px 0 orange; }', + ), + array( + // Don't mangle zeroes + '.foo { text-shadow: orange 0 2px; }' + ), + // Direction // Note: This differs from the Python implementation, // see also CSSJanus::fixDirection for more info. -- 2.20.1