CSSJanus: Handle values of border-radius correctly

The values are not "top right bottom left" here, but
"top-left top-right bottom-right bottom-left".

Bug: 49074
Change-Id: I22bc777b59e667aeb36727fdc8e41e8681979128

diff --git a/RELEASE-NOTES-1.22 b/RELEASE-NOTES-1.22
index 5e93c0f..417ecb4 100644 (file)
--- a/RELEASE-NOTES-1.22
+++ b/RELEASE-NOTES-1.22
@@ -198,6 +198,7 @@ production.
 * CSSJanus now supports rgb, hsl, rgba, and hsla color syntaxes.
 * Special:Listfiles can no longer be sorted by image name when filtering
   by user in miser mode.
+* (bug 49074) CSSJanus: Handle values of border-radius correctly.
 
 === API changes in 1.22 ===
 * (bug 25553) The JSON output formatter now leaves forward slashes unescaped

diff --git a/includes/libs/CSSJanus.php b/includes/libs/CSSJanus.php
index 46236cd..f70e00a 100644 (file)
--- a/includes/libs/CSSJanus.php
+++ b/includes/libs/CSSJanus.php
@@ -76,6 +76,7 @@ class CSSJanus {
                'cursor_west' => null,
                'four_notation_quantity' => null,
                'four_notation_color' => null,
+               'border_radius' => null,
                'bg_horizontal_percentage' => null,
                'bg_horizontal_percentage_x' => null,
        );
@@ -115,6 +116,7 @@ class CSSJanus {
                $patterns['cursor_west'] = "/{$patterns['lookbehind_not_letter']}([ns]?)w-resize/";
                $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['border_radius'] = "/(border-radius\s*:\s*){$patterns['possibly_negative_quantity']}(\s+){$patterns['possibly_negative_quantity']}(\s+){$patterns['possibly_negative_quantity']}(\s+){$patterns['possibly_negative_quantity']}(\s*[;}])/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']}))/";
@@ -160,6 +162,7 @@ class CSSJanus {
                $css = self::fixLeftAndRight( $css );
                $css = self::fixCursorProperties( $css );
                $css = self::fixFourPartNotation( $css );
+               $css = self::fixBorderRadius( $css );
                $css = self::fixBackgroundPosition( $css );
 
                // Detokenize stuff we tokenized before
@@ -263,6 +266,22 @@ class CSSJanus {
                return $css;
        }
 
+       /**
+        * Swaps appropriate corners in four-part border-radius rules.
+        * Needs to undo the effect of fixFourPartNotation() on those rules, too.
+        *
+        * @param $css string
+        * @return string
+        */
+       private static function fixBorderRadius( $css ) {
+               // Undo four_notation_quantity
+               $css = preg_replace( self::$patterns['border_radius'], '$1$2$3$8$5$6$7$4$9', $css );
+               // Do the real thing
+               $css = preg_replace( self::$patterns['border_radius'], '$1$4$3$2$5$8$7$6$9', $css );
+
+               return $css;
+       }
+
        /**
         * Flip horizontal background percentages.
         * @param $css string

diff --git a/tests/phpunit/includes/libs/CSSJanusTest.php b/tests/phpunit/includes/libs/CSSJanusTest.php
index e6432a9..b51dbdf 100644 (file)
--- a/tests/phpunit/includes/libs/CSSJanusTest.php
+++ b/tests/phpunit/includes/libs/CSSJanusTest.php
@@ -137,10 +137,15 @@ class CSSJanusTest extends MediaWikiTestCase {
                                '.foo { padding: 1px inherit 3px auto; }',
                                '.foo { padding: 1px auto 3px inherit; }'
                        ),
+                       // border-radius assigns different meanings to the values
                        array(
                                '.foo { border-radius: .25em 15px 0pt 0ex; }',
-                               '.foo { border-radius: .25em 0ex 0pt 15px; }'
+                               '.foo { border-radius: 15px .25em 0ex 0pt; }'
                        ),
+                       array(
+                               '.foo { border-radius: 0px 0px 5px 5px; }',
+                       ),
+                       // Ensure the rule doesn't break other stuff
                        array(
                                '.foo { x-unknown: a b c d; }'
                        ),