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( [
  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 [
  37                         // Whitespace
  38                         [ "\r\t\f \v\n\r", "" ],
  39                         [ "foo, bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
  40
  41                         // Loose comments
  42                         [ "/* foo */", "" ],
  43                         [ "/*******\n foo\n *******/", "" ],
  44                         [ "/*!\n foo\n */", "" ],
  45
  46                         // Inline comments in various different places
  47                         [ "/* comment */foo, bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
  48                         [ "foo/* comment */, bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
  49                         [ "foo,/* comment */ bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
  50                         [ "foo, bar/* comment */ {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
  51                         [ "foo, bar {\n\t/* comment */prop: value;\n}", "foo,bar{prop:value}" ],
  52                         [ "foo, bar {\n\tprop: /* comment */value;\n}", "foo,bar{prop:value}" ],
  53                         [ "foo, bar {\n\tprop: value /* comment */;\n}", "foo,bar{prop:value }" ],
  54                         [ "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 (T37493)
  58                         [ 'foo { prop: value ;}', 'foo{prop:value }' ],
  59                         [ 'foo { prop : value; }', 'foo{prop :value}' ],
  60                         [ 'foo { prop: value ; }', 'foo{prop:value }' ],
  61                         [ 'foo { font-family: "foo" , "bar"; }', 'foo{font-family:"foo" ,"bar"}' ],
  62                         [ "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                         [ 'foo { content: ""; }', 'foo{content:""}' ],
  67                         [ "foo { content: ''; }", "foo{content:''}" ],
  68                         [ 'foo { content: "\'"; }', 'foo{content:"\'"}' ],
  69                         [ "foo { content: '\"'; }", "foo{content:'\"'}" ],
  70                         // - Whitespace in string values
  71                         [ '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 [
  97                         [
  98                                 'Simple case',
  99                                 [ 'foo { prop: url(bar.png); }', false, 'http://example.org', false ],
 100                                 'foo { prop: url(http://example.org/bar.png); }',
 101                         ],
 102                         [
 103                                 'Without trailing slash',
 104                                 [ 'foo { prop: url(../bar.png); }', false, 'http://example.org/quux', false ],
 105                                 'foo { prop: url(http://example.org/bar.png); }',
 106                         ],
 107                         [
 108                                 'With trailing slash on remote (T29052)',
 109                                 [ 'foo { prop: url(../bar.png); }', false, 'http://example.org/quux/', false ],
 110                                 'foo { prop: url(http://example.org/bar.png); }',
 111                         ],
 112                         [
 113                                 'Guard against stripping double slashes from query',
 114                                 [ '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                         [
 118                                 'Expand absolute paths',
 119                                 [ '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                 $this->assertEquals( $expectedOutput, $realOutput, "CSSMin::remap: $message" );
 137         }
 138
 139         public static function provideIsRemoteUrl() {
 140                 return [
 141                         [ true, 'http://localhost/w/red.gif?123' ],
 142                         [ true, 'https://example.org/x.png' ],
 143                         [ true, '//example.org/x.y.z/image.png' ],
 144                         [ true, '//localhost/styles.css?query=yes' ],
 145                         [ true, 'data:image/gif;base64,R0lGODlhAQABAIAAAP8AADAAACwAAAAAAQABAAACAkQBADs=' ],
 146                         [ false, 'x.gif' ],
 147                         [ false, '/x.gif' ],
 148                         [ false, './x.gif' ],
 149                         [ false, '../x.gif' ],
 150                 ];
 151         }
 152
 153         /**
 154          * @dataProvider provideIsRemoteUrl
 155          * @cover CSSMin::isRemoteUrl
 156          */
 157         public function testIsRemoteUrl( $expect, $url ) {
 158                 $this->assertEquals( CSSMinTestable::isRemoteUrl( $url ), $expect );
 159         }
 160
 161         public static function provideIsLocalUrls() {
 162                 return [
 163                         [ false, 'x.gif' ],
 164                         [ true, '/x.gif' ],
 165                         [ false, './x.gif' ],
 166                         [ false, '../x.gif' ],
 167                 ];
 168         }
 169
 170         /**
 171          * @dataProvider provideIsLocalUrls
 172          * @cover CSSMin::isLocalUrl
 173          */
 174         public function testIsLocalUrl( $expect, $url ) {
 175                 $this->assertEquals( CSSMinTestable::isLocalUrl( $url ), $expect );
 176         }
 177
 178         public static function provideRemapRemappingCases() {
 179                 // red.gif and green.gif are one-pixel 35-byte GIFs.
 180                 // large.png is a 35K PNG that should be non-embeddable.
 181                 // Full paths start with http://localhost/w/.
 182                 // Timestamps in output are replaced with 'timestamp'.
 183
 184                 // data: URIs for red.gif, green.gif, circle.svg
 185                 $red   = 'data:image/gif;base64,R0lGODlhAQABAIAAAP8AADAAACwAAAAAAQABAAACAkQBADs=';
 186                 $green = 'data:image/gif;base64,R0lGODlhAQABAIAAAACAADAAACwAAAAAAQABAAACAkQBADs=';
 187                 $svg = 'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A'
 188                         . '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D'
 189                         . '%228%22%3E%0A%3Ccircle%20cx%3D%224%22%20cy%3D%224%22%20r%3D%222%22%2F%3E%0A%3C%2Fsvg%3E%0A';
 190
 191                 // @codingStandardsIgnoreStart Generic.Files.LineLength
 192                 return [
 193                         [
 194                                 'Regular file',
 195                                 'foo { background: url(red.gif); }',
 196                                 'foo { background: url(http://localhost/w/red.gif?34ac6); }',
 197                         ],
 198                         [
 199                                 'Regular file (missing)',
 200                                 'foo { background: url(theColorOfHerHair.gif); }',
 201                                 'foo { background: url(http://localhost/w/theColorOfHerHair.gif); }',
 202                         ],
 203                         [
 204                                 'Remote URL',
 205                                 'foo { background: url(http://example.org/w/foo.png); }',
 206                                 'foo { background: url(http://example.org/w/foo.png); }',
 207                         ],
 208                         [
 209                                 'Protocol-relative remote URL',
 210                                 'foo { background: url(//example.org/w/foo.png); }',
 211                                 'foo { background: url(//example.org/w/foo.png); }',
 212                         ],
 213                         [
 214                                 'Remote URL with query',
 215                                 'foo { background: url(http://example.org/w/foo.png?query=yes); }',
 216                                 'foo { background: url(http://example.org/w/foo.png?query=yes); }',
 217                         ],
 218                         [
 219                                 'Protocol-relative remote URL with query',
 220                                 'foo { background: url(//example.org/w/foo.png?query=yes); }',
 221                                 'foo { background: url(//example.org/w/foo.png?query=yes); }',
 222                         ],
 223                         [
 224                                 'Domain-relative URL',
 225                                 'foo { background: url(/static/foo.png); }',
 226                                 'foo { background: url(http://doc.example.org/static/foo.png); }',
 227                         ],
 228                         [
 229                                 'Domain-relative URL with query',
 230                                 'foo { background: url(/static/foo.png?query=yes); }',
 231                                 'foo { background: url(http://doc.example.org/static/foo.png?query=yes); }',
 232                         ],
 233                         [
 234                                 'Remote URL (unnecessary quotes not preserved)',
 235                                 'foo { background: url("http://example.org/w/foo.png"); }',
 236                                 'foo { background: url(http://example.org/w/foo.png); }',
 237                         ],
 238                         [
 239                                 'Embedded file',
 240                                 'foo { /* @embed */ background: url(red.gif); }',
 241                                 "foo { background: url($red); background: url(http://localhost/w/red.gif?34ac6)!ie; }",
 242                         ],
 243                         [
 244                                 'Embedded file, other comments before the rule',
 245                                 "foo { /* Bar. */ /* @embed */ background: url(red.gif); }",
 246                                 "foo { /* Bar. */ background: url($red); /* Bar. */ background: url(http://localhost/w/red.gif?34ac6)!ie; }",
 247                         ],
 248                         [
 249                                 'Can not re-embed data: URIs',
 250                                 "foo { /* @embed */ background: url($red); }",
 251                                 "foo { background: url($red); }",
 252                         ],
 253                         [
 254                                 'Can not remap data: URIs',
 255                                 "foo { background: url($red); }",
 256                                 "foo { background: url($red); }",
 257                         ],
 258                         [
 259                                 'Can not embed remote URLs',
 260                                 'foo { /* @embed */ background: url(http://example.org/w/foo.png); }',
 261                                 'foo { background: url(http://example.org/w/foo.png); }',
 262                         ],
 263                         [
 264                                 'Embedded file (inline @embed)',
 265                                 'foo { background: /* @embed */ url(red.gif); }',
 266                                 "foo { background: url($red); "
 267                                         . "background: url(http://localhost/w/red.gif?34ac6)!ie; }",
 268                         ],
 269                         [
 270                                 'Can not embed large files',
 271                                 'foo { /* @embed */ background: url(large.png); }',
 272                                 "foo { background: url(http://localhost/w/large.png?e3d1f); }",
 273                         ],
 274                         [
 275                                 'SVG files are embedded without base64 encoding and unnecessary IE 6 and 7 fallback',
 276                                 'foo { /* @embed */ background: url(circle.svg); }',
 277                                 "foo { background: url($svg); }",
 278                         ],
 279                         [
 280                                 'Two regular files in one rule',
 281                                 'foo { background: url(red.gif), url(green.gif); }',
 282                                 'foo { background: url(http://localhost/w/red.gif?34ac6), '
 283                                         . 'url(http://localhost/w/green.gif?13651); }',
 284                         ],
 285                         [
 286                                 'Two embedded files in one rule',
 287                                 'foo { /* @embed */ background: url(red.gif), url(green.gif); }',
 288                                 "foo { background: url($red), url($green); "
 289                                         . "background: url(http://localhost/w/red.gif?34ac6), "
 290                                         . "url(http://localhost/w/green.gif?13651)!ie; }",
 291                         ],
 292                         [
 293                                 'Two embedded files in one rule (inline @embed)',
 294                                 'foo { background: /* @embed */ url(red.gif), /* @embed */ url(green.gif); }',
 295                                 "foo { background: url($red), url($green); "
 296                                         . "background: url(http://localhost/w/red.gif?34ac6), "
 297                                         . "url(http://localhost/w/green.gif?13651)!ie; }",
 298                         ],
 299                         [
 300                                 'Two embedded files in one rule (inline @embed), one too large',
 301                                 'foo { background: /* @embed */ url(red.gif), /* @embed */ url(large.png); }',
 302                                 "foo { background: url($red), url(http://localhost/w/large.png?e3d1f); "
 303                                         . "background: url(http://localhost/w/red.gif?34ac6), "
 304                                         . "url(http://localhost/w/large.png?e3d1f)!ie; }",
 305                         ],
 306                         [
 307                                 'Practical example with some noise',
 308                                 'foo { /* @embed */ background: #f9f9f9 url(red.gif) 0 0 no-repeat; }',
 309                                 "foo { background: #f9f9f9 url($red) 0 0 no-repeat; "
 310                                         . "background: #f9f9f9 url(http://localhost/w/red.gif?34ac6) 0 0 no-repeat!ie; }",
 311                         ],
 312                         [
 313                                 'Does not mess with other properties',
 314                                 'foo { color: red; background: url(red.gif); font-size: small; }',
 315                                 'foo { color: red; background: url(http://localhost/w/red.gif?34ac6); font-size: small; }',
 316                         ],
 317                         [
 318                                 'Spacing and miscellanea not changed (1)',
 319                                 'foo {   background:    url(red.gif);  }',
 320                                 'foo {   background:    url(http://localhost/w/red.gif?34ac6);  }',
 321                         ],
 322                         [
 323                                 'Spacing and miscellanea not changed (2)',
 324                                 'foo {background:url(red.gif)}',
 325                                 'foo {background:url(http://localhost/w/red.gif?34ac6)}',
 326                         ],
 327                         [
 328                                 'Spaces within url() parentheses are ignored',
 329                                 'foo { background: url( red.gif ); }',
 330                                 'foo { background: url(http://localhost/w/red.gif?34ac6); }',
 331                         ],
 332                         [
 333                                 '@import rule to local file (should we remap this?)',
 334                                 '@import url(/styles.css)',
 335                                 '@import url(http://doc.example.org/styles.css)',
 336                         ],
 337                         [
 338                                 '@import rule to URL (should we remap this?)',
 339                                 '@import url(//localhost/styles.css?query=yes)',
 340                                 '@import url(//localhost/styles.css?query=yes)',
 341                         ],
 342                         [
 343                                 'Simple case with comments before url',
 344                                 'foo { prop: /* some {funny;} comment */ url(bar.png); }',
 345                                 'foo { prop: /* some {funny;} comment */ url(http://localhost/w/bar.png); }',
 346                         ],
 347                         [
 348                                 'Simple case with comments after url',
 349                                 'foo { prop: url(red.gif)/* some {funny;} comment */ ; }',
 350                                 'foo { prop: url(http://localhost/w/red.gif?34ac6)/* some {funny;} comment */ ; }',
 351                         ],
 352                         [
 353                                 'Embedded file with comment before url',
 354                                 'foo { /* @embed */ background: /* some {funny;} comment */ url(red.gif); }',
 355                                 "foo { background: /* some {funny;} comment */ url($red); background: /* some {funny;} comment */ url(http://localhost/w/red.gif?34ac6)!ie; }",
 356                         ],
 357                         [
 358                                 'Embedded file with comments inside and outside the rule',
 359                                 'foo { /* @embed */ background: url(red.gif) /* some {foo;} comment */; /* some {bar;} comment */ }',
 360                                 "foo { background: url($red) /* some {foo;} comment */; background: url(http://localhost/w/red.gif?34ac6) /* some {foo;} comment */!ie; /* some {bar;} comment */ }",
 361                         ],
 362                         [
 363                                 'Embedded file with comment outside the rule',
 364                                 'foo { /* @embed */ background: url(red.gif); /* some {funny;} comment */ }',
 365                                 "foo { background: url($red); background: url(http://localhost/w/red.gif?34ac6)!ie; /* some {funny;} comment */ }",
 366                         ],
 367                         [
 368                                 'Rule with two urls, each with comments',
 369                                 '{ background: /*asd*/ url(something.png); background: /*jkl*/ url(something.png); }',
 370                                 '{ background: /*asd*/ url(http://localhost/w/something.png); background: /*jkl*/ url(http://localhost/w/something.png); }',
 371                         ],
 372                         [
 373                                 'Sanity check for offending line from jquery.ui.theme.css (T62077)',
 374                                 '.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}*/; }',
 375                                 '.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}*/; }',
 376                         ],
 377                 ];
 378                 // @codingStandardsIgnoreEnd
 379         }
 380
 381         /**
 382          * This tests basic functionality of CSSMin::buildUrlValue.
 383          *
 384          * @dataProvider provideBuildUrlValueCases
 385          * @covers CSSMin::buildUrlValue
 386          */
 387         public function testBuildUrlValue( $message, $input, $expectedOutput ) {
 388                 $this->assertEquals(
 389                         $expectedOutput,
 390                         CSSMin::buildUrlValue( $input ),
 391                         "CSSMin::buildUrlValue: $message"
 392                 );
 393         }
 394
 395         public static function provideBuildUrlValueCases() {
 396                 return [
 397                         [
 398                                 'Full URL',
 399                                 'scheme://user@domain:port/~user/fi%20le.png?query=yes&really=y+s',
 400                                 'url(scheme://user@domain:port/~user/fi%20le.png?query=yes&really=y+s)',
 401                         ],
 402                         [
 403                                 'data: URI',
 404                                 'data:image/png;base64,R0lGODlh/+==',
 405                                 'url(data:image/png;base64,R0lGODlh/+==)',
 406                         ],
 407                         [
 408                                 'URL with quotes',
 409                                 "https://en.wikipedia.org/wiki/Wendy's",
 410                                 "url(\"https://en.wikipedia.org/wiki/Wendy's\")",
 411                         ],
 412                         [
 413                                 'URL with parentheses',
 414                                 'https://en.wikipedia.org/wiki/Boston_(band)',
 415                                 'url("https://en.wikipedia.org/wiki/Boston_(band)")',
 416                         ],
 417                 ];
 418         }
 419
 420         /**
 421          * Seperated because they are currently broken (T37492)
 422          *
 423          * @group Broken
 424          * @dataProvider provideStringCases
 425          * @covers CSSMin::remap
 426          */
 427         public function testMinifyWithCSSStringValues( $code, $expectedOutput ) {
 428                 $this->testMinifyOutput( $code, $expectedOutput );
 429         }
 430
 431         public static function provideStringCases() {
 432                 return [
 433                         // String values should be respected
 434                         // - More than one space in a string value
 435                         [ 'foo { content: "  "; }', 'foo{content:"  "}' ],
 436                         // - Using a tab in a string value (turns into a space)
 437                         [ "foo { content: '\t'; }", "foo{content:'\t'}" ],
 438                         // - Using css-like syntax in string values
 439                         [
 440                                 'foo::after { content: "{;}"; position: absolute; }',
 441                                 'foo::after{content:"{;}";position:absolute}'
 442                         ],
 443                 ];
 444         }
 445 }
 446
 447 class CSSMinTestable extends CSSMin {
 448         // Make some protected methods public
 449         public static function isRemoteUrl( $maybeUrl ) {
 450                 return parent::isRemoteUrl( $maybeUrl );
 451         }
 452         public static function isLocalUrl( $maybeUrl ) {
 453                 return parent::isLocalUrl( $maybeUrl );
 454         }
 455 }