tests/phpunit/includes/libs/CSSMinTest.php

   1 <?php
   2 /**
   3  * This file test the CSSMin library shipped with Mediawiki.
   4  *
   5  * @author Timo Tijhof
   6  */
   7
   8 class CSSMinTest extends MediaWikiTestCase {
   9
  10         protected function setUp() {
  11                 parent::setUp();
  12
  13                 $server = 'http://doc.example.org';
  14
  15                 $this->setMwGlobals( array(
  16                         'wgServer' => $server,
  17                         'wgCanonicalServer' => $server,
  18                 ) );
  19         }
  20
  21         /**
  22          * @dataProvider provideMinifyCases
  23          * @covers CSSMin::minify
  24          */
  25         public function testMinify( $code, $expectedOutput ) {
  26                 $minified = CSSMin::minify( $code );
  27
  28                 $this->assertEquals(
  29                         $expectedOutput,
  30                         $minified,
  31                         'Minified output should be in the form expected.'
  32                 );
  33         }
  34
  35         public static function provideMinifyCases() {
  36                 return array(
  37                         // Whitespace
  38                         array( "\r\t\f \v\n\r", "" ),
  39                         array( "foo, bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ),
  40
  41                         // Loose comments
  42                         array( "/* foo */", "" ),
  43                         array( "/*******\n foo\n *******/", "" ),
  44                         array( "/*!\n foo\n */", "" ),
  45
  46                         // Inline comments in various different places
  47                         array( "/* comment */foo, bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ),
  48                         array( "foo/* comment */, bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ),
  49                         array( "foo,/* comment */ bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ),
  50                         array( "foo, bar/* comment */ {\n\tprop: value;\n}", "foo,bar{prop:value}" ),
  51                         array( "foo, bar {\n\t/* comment */prop: value;\n}", "foo,bar{prop:value}" ),
  52                         array( "foo, bar {\n\tprop: /* comment */value;\n}", "foo,bar{prop:value}" ),
  53                         array( "foo, bar {\n\tprop: value /* comment */;\n}", "foo,bar{prop:value }" ),
  54                         array( "foo, bar {\n\tprop: value; /* comment */\n}", "foo,bar{prop:value; }" ),
  55
  56                         // Keep track of things that aren't as minified as much as they
  57                         // could be (bug 35493)
  58                         array( 'foo { prop: value ;}', 'foo{prop:value }' ),
  59                         array( 'foo { prop : value; }', 'foo{prop :value}' ),
  60                         array( 'foo { prop: value ; }', 'foo{prop:value }' ),
  61                         array( 'foo { font-family: "foo" , "bar"; }', 'foo{font-family:"foo" ,"bar"}' ),
  62                         array( "foo { src:\n\turl('foo') ,\n\turl('bar') ; }", "foo{src:url('foo') ,url('bar') }" ),
  63
  64                         // Interesting cases with string values
  65                         // - Double quotes, single quotes
  66                         array( 'foo { content: ""; }', 'foo{content:""}' ),
  67                         array( "foo { content: ''; }", "foo{content:''}" ),
  68                         array( 'foo { content: "\'"; }', 'foo{content:"\'"}' ),
  69                         array( "foo { content: '\"'; }", "foo{content:'\"'}" ),
  70                         // - Whitespace in string values
  71                         array( 'foo { content: " "; }', 'foo{content:" "}' ),
  72                 );
  73         }
  74
  75         /**
  76          * This tests funky parameters to CSSMin::remap. testRemapRemapping tests
  77          * the basic functionality.
  78          *
  79          * @dataProvider provideRemapCases
  80          * @covers CSSMin::remap
  81          */
  82         public function testRemap( $message, $params, $expectedOutput ) {
  83                 $remapped = call_user_func_array( 'CSSMin::remap', $params );
  84
  85                 $messageAdd = " Case: $message";
  86                 $this->assertEquals(
  87                         $expectedOutput,
  88                         $remapped,
  89                         'CSSMin::remap should return the expected url form.' . $messageAdd
  90                 );
  91         }
  92
  93         public static function provideRemapCases() {
  94                 // Parameter signature:
  95                 // CSSMin::remap( $code, $local, $remote, $embedData = true )
  96                 return array(
  97                         array(
  98                                 'Simple case',
  99                                 array( 'foo { prop: url(bar.png); }', false, 'http://example.org', false ),
 100                                 'foo { prop: url(http://example.org/bar.png); }',
 101                         ),
 102                         array(
 103                                 'Without trailing slash',
 104                                 array( 'foo { prop: url(../bar.png); }', false, 'http://example.org/quux', false ),
 105                                 'foo { prop: url(http://example.org/quux/../bar.png); }',
 106                         ),
 107                         array(
 108                                 'With trailing slash on remote (bug 27052)',
 109                                 array( 'foo { prop: url(../bar.png); }', false, 'http://example.org/quux/', false ),
 110                                 'foo { prop: url(http://example.org/quux/../bar.png); }',
 111                         ),
 112                         array(
 113                                 'Guard against stripping double slashes from query',
 114                                 array( 'foo { prop: url(bar.png?corge=//grault); }', false, 'http://example.org/quux/', false ),
 115                                 'foo { prop: url(http://example.org/quux/bar.png?corge=//grault); }',
 116                         ),
 117                         array(
 118                                 'Expand absolute paths',
 119                                 array( 'foo { prop: url(/w/skin/images/bar.png); }', false, 'http://example.org/quux', false ),
 120                                 'foo { prop: url(http://doc.example.org/w/skin/images/bar.png); }',
 121                         ),
 122                 );
 123         }
 124
 125         /**
 126          * This tests basic functionality of CSSMin::remap. testRemapRemapping tests funky parameters.
 127          *
 128          * @dataProvider provideRemapRemappingCases
 129          * @covers CSSMin::remap
 130          */
 131         public function testRemapRemapping( $message, $input, $expectedOutput ) {
 132                 $localPath = __DIR__ . '/../../data/cssmin/';
 133                 $remotePath = 'http://localhost/w/';
 134
 135                 $realOutput = CSSMin::remap( $input, $localPath, $remotePath );
 136
 137                 $this->assertEquals(
 138                         $expectedOutput,
 139                         preg_replace( '/\d+-\d+-\d+T\d+:\d+:\d+Z/', 'timestamp', $realOutput ),
 140                         "CSSMin::remap: $message"
 141                 );
 142         }
 143
 144         public static function provideRemapRemappingCases() {
 145                 // red.gif and green.gif are one-pixel 35-byte GIFs.
 146                 // large.png is a 35K PNG that should be non-embeddable.
 147                 // Full paths start with http://localhost/w/.
 148                 // Timestamps in output are replaced with 'timestamp'.
 149
 150                 // data: URIs for red.gif and green.gif
 151                 $red   = 'data:image/gif;base64,R0lGODlhAQABAIAAAP8AADAAACwAAAAAAQABAAACAkQBADs=';
 152                 $green = 'data:image/gif;base64,R0lGODlhAQABAIAAAACAADAAACwAAAAAAQABAAACAkQBADs=';
 153
 154                 return array(
 155                         array(
 156                                 'Regular file',
 157                                 'foo { background: url(red.gif); }',
 158                                 'foo { background: url(http://localhost/w/red.gif?timestamp); }',
 159                         ),
 160                         array(
 161                                 'Regular file (missing)',
 162                                 'foo { background: url(theColorOfHerHair.gif); }',
 163                                 'foo { background: url(http://localhost/w/theColorOfHerHair.gif); }',
 164                         ),
 165                         array(
 166                                 'Remote URL',
 167                                 'foo { background: url(http://example.org/w/foo.png); }',
 168                                 'foo { background: url(http://example.org/w/foo.png); }',
 169                         ),
 170                         array(
 171                                 'Protocol-relative remote URL',
 172                                 'foo { background: url(//example.org/w/foo.png); }',
 173                                 'foo { background: url(//example.org/w/foo.png); }',
 174                         ),
 175                         array(
 176                                 'Remote URL with query',
 177                                 'foo { background: url(http://example.org/w/foo.png?query=yes); }',
 178                                 'foo { background: url(http://example.org/w/foo.png?query=yes); }',
 179                         ),
 180                         array(
 181                                 'Protocol-relative remote URL with query',
 182                                 'foo { background: url(//example.org/w/foo.png?query=yes); }',
 183                                 'foo { background: url(//example.org/w/foo.png?query=yes); }',
 184                         ),
 185                         array(
 186                                 'Domain-relative URL',
 187                                 'foo { background: url(/static/foo.png); }',
 188                                 'foo { background: url(http://doc.example.org/static/foo.png); }',
 189                         ),
 190                         array(
 191                                 'Domain-relative URL with query',
 192                                 'foo { background: url(/static/foo.png?query=yes); }',
 193                                 'foo { background: url(http://doc.example.org/static/foo.png?query=yes); }',
 194                         ),
 195                         array(
 196                                 'Remote URL (unnecessary quotes not preserved)',
 197                                 'foo { background: url("http://example.org/w/foo.png"); }',
 198                                 'foo { background: url(http://example.org/w/foo.png); }',
 199                         ),
 200                         array(
 201                                 'Embedded file',
 202                                 'foo { /* @embed */ background: url(red.gif); }',
 203                                 "foo { background: url($red); background: url(http://localhost/w/red.gif?timestamp)!ie; }",
 204                         ),
 205                         array(
 206                                 'Embedded file, other comments before the rule',
 207                                 "foo { /* Bar. */ /* @embed */ background: url(red.gif); }",
 208                                 "foo { /* Bar. */ background: url($red); /* Bar. */ background: url(http://localhost/w/red.gif?timestamp)!ie; }",
 209                         ),
 210                         array(
 211                                 'Can not re-embed data: URIs',
 212                                 "foo { /* @embed */ background: url($red); }",
 213                                 "foo { background: url($red); }",
 214                         ),
 215                         array(
 216                                 'Can not remap data: URIs',
 217                                 "foo { background: url($red); }",
 218                                 "foo { background: url($red); }",
 219                         ),
 220                         array(
 221                                 'Can not embed remote URLs',
 222                                 'foo { /* @embed */ background: url(http://example.org/w/foo.png); }',
 223                                 'foo { background: url(http://example.org/w/foo.png); }',
 224                         ),
 225                         array(
 226                                 'Embedded file (inline @embed)',
 227                                 'foo { background: /* @embed */ url(red.gif); }',
 228                                 "foo { background: url($red); "
 229                                         . "background: url(http://localhost/w/red.gif?timestamp)!ie; }",
 230                         ),
 231                         array(
 232                                 'Can not embed large files',
 233                                 'foo { /* @embed */ background: url(large.png); }',
 234                                 "foo { background: url(http://localhost/w/large.png?timestamp); }",
 235                         ),
 236                         array(
 237                                 'Two regular files in one rule',
 238                                 'foo { background: url(red.gif), url(green.gif); }',
 239                                 'foo { background: url(http://localhost/w/red.gif?timestamp), '
 240                                         . 'url(http://localhost/w/green.gif?timestamp); }',
 241                         ),
 242                         array(
 243                                 'Two embedded files in one rule',
 244                                 'foo { /* @embed */ background: url(red.gif), url(green.gif); }',
 245                                 "foo { background: url($red), url($green); "
 246                                         . "background: url(http://localhost/w/red.gif?timestamp), "
 247                                         . "url(http://localhost/w/green.gif?timestamp)!ie; }",
 248                         ),
 249                         array(
 250                                 'Two embedded files in one rule (inline @embed)',
 251                                 'foo { background: /* @embed */ url(red.gif), /* @embed */ url(green.gif); }',
 252                                 "foo { background: url($red), url($green); "
 253                                         . "background: url(http://localhost/w/red.gif?timestamp), "
 254                                         . "url(http://localhost/w/green.gif?timestamp)!ie; }",
 255                         ),
 256                         array(
 257                                 'Two embedded files in one rule (inline @embed), one too large',
 258                                 'foo { background: /* @embed */ url(red.gif), /* @embed */ url(large.png); }',
 259                                 "foo { background: url($red), url(http://localhost/w/large.png?timestamp); "
 260                                         . "background: url(http://localhost/w/red.gif?timestamp), "
 261                                         . "url(http://localhost/w/large.png?timestamp)!ie; }",
 262                         ),
 263                         array(
 264                                 'Practical example with some noise',
 265                                 'foo { /* @embed */ background: #f9f9f9 url(red.gif) 0 0 no-repeat; }',
 266                                 "foo { background: #f9f9f9 url($red) 0 0 no-repeat; "
 267                                         . "background: #f9f9f9 url(http://localhost/w/red.gif?timestamp) 0 0 no-repeat!ie; }",
 268                         ),
 269                         array(
 270                                 'Does not mess with other properties',
 271                                 'foo { color: red; background: url(red.gif); font-size: small; }',
 272                                 'foo { color: red; background: url(http://localhost/w/red.gif?timestamp); font-size: small; }',
 273                         ),
 274                         array(
 275                                 'Spacing and miscellanea not changed (1)',
 276                                 'foo {   background:    url(red.gif);  }',
 277                                 'foo {   background:    url(http://localhost/w/red.gif?timestamp);  }',
 278                         ),
 279                         array(
 280                                 'Spacing and miscellanea not changed (2)',
 281                                 'foo {background:url(red.gif)}',
 282                                 'foo {background:url(http://localhost/w/red.gif?timestamp)}',
 283                         ),
 284                         array(
 285                                 'Spaces within url() parentheses are ignored',
 286                                 'foo { background: url( red.gif ); }',
 287                                 'foo { background: url(http://localhost/w/red.gif?timestamp); }',
 288                         ),
 289                         array(
 290                                 '@import rule to local file (should we remap this?)',
 291                                 '@import url(/styles.css)',
 292                                 '@import url(http://doc.example.org/styles.css)',
 293                         ),
 294                         array(
 295                                 '@import rule to URL (should we remap this?)',
 296                                 '@import url(//localhost/styles.css?query=yes)',
 297                                 '@import url(//localhost/styles.css?query=yes)',
 298                         ),
 299                         array(
 300                                 'Simple case with comments before url',
 301                                 'foo { prop: /* some {funny;} comment */ url(bar.png); }',
 302                                 'foo { prop: /* some {funny;} comment */ url(http://localhost/w/bar.png); }',
 303                         ),
 304                         array(
 305                                 'Simple case with comments after url',
 306                                 'foo { prop: url(red.gif)/* some {funny;} comment */ ; }',
 307                                 'foo { prop: url(http://localhost/w/red.gif?timestamp)/* some {funny;} comment */ ; }',
 308                         ),
 309                         array(
 310                                 'Embedded file with comment before url',
 311                                 'foo { /* @embed */ background: /* some {funny;} comment */ url(red.gif); }',
 312                                 "foo { background: /* some {funny;} comment */ url($red); background: /* some {funny;} comment */ url(http://localhost/w/red.gif?timestamp)!ie; }",
 313                         ),
 314                         array(
 315                                 'Embedded file with comments inside and outside the rule',
 316                                 'foo { /* @embed */ background: url(red.gif) /* some {foo;} comment */; /* some {bar;} comment */ }',
 317                                 "foo { background: url($red) /* some {foo;} comment */; background: url(http://localhost/w/red.gif?timestamp) /* some {foo;} comment */!ie; /* some {bar;} comment */ }",
 318                         ),
 319                         array(
 320                                 'Embedded file with comment outside the rule',
 321                                 'foo { /* @embed */ background: url(red.gif); /* some {funny;} comment */ }',
 322                                 "foo { background: url($red); background: url(http://localhost/w/red.gif?timestamp)!ie; /* some {funny;} comment */ }",
 323                         ),
 324                         array(
 325                                 'Rule with two urls, each with comments',
 326                                 '{ background: /*asd*/ url(something.png); background: /*jkl*/ url(something.png); }',
 327                                 '{ background: /*asd*/ url(http://localhost/w/something.png); background: /*jkl*/ url(http://localhost/w/something.png); }',
 328                         ),
 329                         array(
 330                                 'Sanity check for offending line from jquery.ui.theme.css (bug 60077)',
 331                                 '.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }',
 332                                 '.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(http://localhost/w/images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }',
 333                         ),
 334                 );
 335         }
 336
 337         /**
 338          * This tests basic functionality of CSSMin::buildUrlValue.
 339          *
 340          * @dataProvider provideBuildUrlValueCases
 341          * @covers CSSMin::buildUrlValue
 342          */
 343         public function testBuildUrlValue( $message, $input, $expectedOutput ) {
 344                 $this->assertEquals(
 345                         $expectedOutput,
 346                         CSSMin::buildUrlValue( $input ),
 347                         "CSSMin::buildUrlValue: $message"
 348                 );
 349         }
 350
 351         public static function provideBuildUrlValueCases() {
 352                 return array(
 353                         array(
 354                                 'Full URL',
 355                                 'scheme://user@domain:port/~user/fi%20le.png?query=yes&really=y+s',
 356                                 'url(scheme://user@domain:port/~user/fi%20le.png?query=yes&really=y+s)',
 357                         ),
 358                         array(
 359                                 'data: URI',
 360                                 'data:image/png;base64,R0lGODlh/+==',
 361                                 'url(data:image/png;base64,R0lGODlh/+==)',
 362                         ),
 363                         array(
 364                                 'URL with quotes',
 365                                 "https://en.wikipedia.org/wiki/Wendy's",
 366                                 "url(\"https://en.wikipedia.org/wiki/Wendy's\")",
 367                         ),
 368                         array(
 369                                 'URL with parentheses',
 370                                 'https://en.wikipedia.org/wiki/Boston_(band)',
 371                                 'url("https://en.wikipedia.org/wiki/Boston_(band)")',
 372                         ),
 373                 );
 374         }
 375
 376         /**
 377          * Seperated because they are currently broken (bug 35492)
 378          *
 379          * @group Broken
 380          * @dataProvider provideStringCases
 381          * @covers CSSMin::remap
 382          */
 383         public function testMinifyWithCSSStringValues( $code, $expectedOutput ) {
 384                 $this->testMinifyOutput( $code, $expectedOutput );
 385         }
 386
 387         public static function provideStringCases() {
 388                 return array(
 389                         // String values should be respected
 390                         // - More than one space in a string value
 391                         array( 'foo { content: "  "; }', 'foo{content:"  "}' ),
 392                         // - Using a tab in a string value (turns into a space)
 393                         array( "foo { content: '\t'; }", "foo{content:'\t'}" ),
 394                         // - Using css-like syntax in string values
 395                         array(
 396                                 'foo::after { content: "{;}"; position: absolute; }',
 397                                 'foo::after{content:"{;}";position:absolute}'
 398                         ),
 399                 );
 400         }
 401 }