3 * This file test the CSSMin library shipped with Mediawiki.
9 * @group ResourceLoader
12 class CSSMinTest
extends MediaWikiTestCase
{
14 protected function setUp() {
17 $server = 'http://doc.example.org';
19 $this->setMwGlobals( [
20 'wgServer' => $server,
21 'wgCanonicalServer' => $server,
26 * @dataProvider mimeTypeProvider
27 * @covers CSSMin::getMimeType
29 public function testGetMimeType( $fileContents, $fileExtension, $expected ) {
30 $fileName = wfTempDir() . DIRECTORY_SEPARATOR
. uniqid( 'MW_PHPUnit_CSSMinTest_' ) . '.'
32 $this->addTmpFiles( $fileName );
33 file_put_contents( $fileName, $fileContents );
34 $this->assertSame( $expected, CSSMin
::getMimeType( $fileName ) );
37 public function mimeTypeProvider() {
39 'JPEG with short extension' => [
44 'JPEG with long extension' => [
50 "\x89\x50\x4E\x47\x0D\x0A\x1A\x0A",
55 'PNG extension but JPEG content' => [
60 'JPEG extension but PNG content' => [
61 "\x89\x50\x4E\x47\x0D\x0A\x1A\x0A",
65 'PNG extension but SVG content' => [
66 '<?xml version="1.0"?><svg></svg>',
70 'SVG extension but PNG content' => [
71 "\x89\x50\x4E\x47\x0D\x0A\x1A\x0A",
76 'SVG with all headers' => [
77 '<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" '
78 . '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg></svg>',
82 'SVG with XML header only' => [
83 '<?xml version="1.0"?><svg></svg>',
87 'SVG with DOCTYPE only' => [
88 '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" '
89 . '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg></svg>',
93 'SVG without any header' => [
102 * @dataProvider provideMinifyCases
103 * @covers CSSMin::minify
105 public function testMinify( $code, $expectedOutput ) {
106 $minified = CSSMin
::minify( $code );
111 'Minified output should be in the form expected.'
115 public static function provideMinifyCases() {
118 [ "\r\t\f \v\n\r", "" ],
119 [ "foo, bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
123 [ "/*******\n foo\n *******/", "" ],
124 [ "/*!\n foo\n */", "" ],
126 // Inline comments in various different places
127 [ "/* comment */foo, bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
128 [ "foo/* comment */, bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
129 [ "foo,/* comment */ bar {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
130 [ "foo, bar/* comment */ {\n\tprop: value;\n}", "foo,bar{prop:value}" ],
131 [ "foo, bar {\n\t/* comment */prop: value;\n}", "foo,bar{prop:value}" ],
132 [ "foo, bar {\n\tprop: /* comment */value;\n}", "foo,bar{prop:value}" ],
133 [ "foo, bar {\n\tprop: value /* comment */;\n}", "foo,bar{prop:value }" ],
134 [ "foo, bar {\n\tprop: value; /* comment */\n}", "foo,bar{prop:value; }" ],
136 // Keep track of things that aren't as minified as much as they
138 [ 'foo { prop: value ;}', 'foo{prop:value }' ],
139 [ 'foo { prop : value; }', 'foo{prop :value}' ],
140 [ 'foo { prop: value ; }', 'foo{prop:value }' ],
141 [ 'foo { font-family: "foo" , "bar"; }', 'foo{font-family:"foo" ,"bar"}' ],
142 [ "foo { src:\n\turl('foo') ,\n\turl('bar') ; }", "foo{src:url('foo') ,url('bar') }" ],
144 // Interesting cases with string values
145 // - Double quotes, single quotes
146 [ 'foo { content: ""; }', 'foo{content:""}' ],
147 [ "foo { content: ''; }", "foo{content:''}" ],
148 [ 'foo { content: "\'"; }', 'foo{content:"\'"}' ],
149 [ "foo { content: '\"'; }", "foo{content:'\"'}" ],
150 // - Whitespace in string values
151 [ 'foo { content: " "; }', 'foo{content:" "}' ],
153 // Whitespaces after opening and before closing parentheses and brackets
154 [ 'a:not( [ href ] ) { prop: url( foobar.png ); }', 'a:not([href]){prop:url(foobar.png)}' ],
156 // Ensure that the invalid "url (" will not become the valid "url(" by minification
157 [ 'foo { prop: url ( foobar.png ); }', 'foo{prop:url (foobar.png)}' ],
161 public static function provideIsRemoteUrl() {
163 [ true, 'http://localhost/w/red.gif?123' ],
164 [ true, 'https://example.org/x.png' ],
165 [ true, '//example.org/x.y.z/image.png' ],
166 [ true, '//localhost/styles.css?query=yes' ],
167 [ true, 'data:image/gif;base64,R0lGODlhAQABAIAAAP8AADAAACwAAAAAAQABAAACAkQBADs=' ],
170 [ false, './x.gif' ],
171 [ false, '../x.gif' ],
176 * @dataProvider provideIsRemoteUrl
177 * @covers CSSMin::isRemoteUrl
179 public function testIsRemoteUrl( $expect, $url ) {
180 $this->assertEquals( CSSMinTestable
::isRemoteUrl( $url ), $expect );
183 public static function provideIsLocalUrls() {
187 [ false, './x.gif' ],
188 [ false, '../x.gif' ],
193 * @dataProvider provideIsLocalUrls
194 * @covers CSSMin::isLocalUrl
196 public function testIsLocalUrl( $expect, $url ) {
197 $this->assertEquals( CSSMinTestable
::isLocalUrl( $url ), $expect );
201 * This test tests funky parameters to CSSMin::remap.
203 * @see testRemapRemapping for testing of the basic functionality
204 * @dataProvider provideRemapCases
205 * @covers CSSMin::remap
206 * @covers CSSMin::remapOne
208 public function testRemap( $message, $params, $expectedOutput ) {
209 $remapped = call_user_func_array( 'CSSMin::remap', $params );
211 $messageAdd = " Case: $message";
215 'CSSMin::remap should return the expected url form.' . $messageAdd
219 public static function provideRemapCases() {
220 // Parameter signature:
221 // CSSMin::remap( $code, $local, $remote, $embedData = true )
225 [ 'foo { prop: url(bar.png); }', false, 'http://example.org', false ],
226 'foo { prop: url(http://example.org/bar.png); }',
229 'Without trailing slash',
230 [ 'foo { prop: url(../bar.png); }', false, 'http://example.org/quux', false ],
231 'foo { prop: url(http://example.org/bar.png); }',
234 'With trailing slash on remote (T29052)',
235 [ 'foo { prop: url(../bar.png); }', false, 'http://example.org/quux/', false ],
236 'foo { prop: url(http://example.org/bar.png); }',
239 'Guard against stripping double slashes from query',
240 [ 'foo { prop: url(bar.png?corge=//grault); }', false, 'http://example.org/quux/', false ],
241 'foo { prop: url(http://example.org/quux/bar.png?corge=//grault); }',
244 'Expand absolute paths',
245 [ 'foo { prop: url(/w/skin/images/bar.png); }', false, 'http://example.org/quux', false ],
246 'foo { prop: url(http://doc.example.org/w/skin/images/bar.png); }',
249 "Don't barf at behavior: url(#default#behaviorName) - T162973",
250 [ 'foo { behavior: url(#default#bar); }', false, '/w/', false ],
251 'foo { behavior: url("#default#bar"); }',
257 * Cases with empty url() for CSSMin::remap.
259 * Regression test for T191237.
261 * @dataProvider provideRemapEmptyUrl
264 public function testRemapEmptyUrl( $params, $expected ) {
265 $remapped = call_user_func_array( 'CSSMin::remap', $params );
266 $this->assertEquals( $expected, $remapped, 'Ignore empty url' );
269 public static function provideRemapEmptyUrl() {
272 [ "background-image: url();", false, '/example', false ],
273 "background-image: url();",
276 [ "background-image: url('');", false, '/example', false ],
277 "background-image: url('');",
280 [ 'background-image: url("");', false, '/example', false ],
281 'background-image: url("");',
287 * This tests the basic functionality of CSSMin::remap.
289 * @see testRemap for testing of funky parameters
290 * @dataProvider provideRemapRemappingCases
293 public function testRemapRemapping( $message, $input, $expectedOutput ) {
294 $localPath = __DIR__
. '/../../data/cssmin';
295 $remotePath = 'http://localhost/w';
297 $realOutput = CSSMin
::remap( $input, $localPath, $remotePath );
298 $this->assertEquals( $expectedOutput, $realOutput, "CSSMin::remap: $message" );
301 public static function provideRemapRemappingCases() {
302 // red.gif and green.gif are one-pixel 35-byte GIFs.
303 // large.png is a 35K PNG that should be non-embeddable.
304 // Full paths start with http://localhost/w/.
305 // Timestamps in output are replaced with 'timestamp'.
307 // data: URIs for red.gif, green.gif, circle.svg
308 $red = 'data:image/gif;base64,R0lGODlhAQABAIAAAP8AADAAACwAAAAAAQABAAACAkQBADs=';
309 $green = 'data:image/gif;base64,R0lGODlhAQABAIAAAACAADAAACwAAAAAAQABAAACAkQBADs=';
310 $svg = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%228'
311 . '%22 height=%228%22 viewBox=%220 0 8 8%22%3E %3Ccircle cx=%224%22 cy=%224%22 '
312 . 'r=%222%22/%3E %3Ca xmlns:xlink=%22http://www.w3.org/1999/xlink%22 xlink:title='
313 . '%22%3F%3E%22%3Etest%3C/a%3E %3C/svg%3E';
315 // phpcs:disable Generic.Files.LineLength
319 'foo { background: url(red.gif); }',
320 'foo { background: url(http://localhost/w/red.gif?34ac6); }',
323 'Regular file (missing)',
324 'foo { background: url(theColorOfHerHair.gif); }',
325 'foo { background: url(http://localhost/w/theColorOfHerHair.gif); }',
329 'foo { background: url(http://example.org/w/foo.png); }',
330 'foo { background: url(http://example.org/w/foo.png); }',
333 'Protocol-relative remote URL',
334 'foo { background: url(//example.org/w/foo.png); }',
335 'foo { background: url(//example.org/w/foo.png); }',
338 'Remote URL with query',
339 'foo { background: url(http://example.org/w/foo.png?query=yes); }',
340 'foo { background: url(http://example.org/w/foo.png?query=yes); }',
343 'Protocol-relative remote URL with query',
344 'foo { background: url(//example.org/w/foo.png?query=yes); }',
345 'foo { background: url(//example.org/w/foo.png?query=yes); }',
348 'Domain-relative URL',
349 'foo { background: url(/static/foo.png); }',
350 'foo { background: url(http://doc.example.org/static/foo.png); }',
353 'Domain-relative URL with query',
354 'foo { background: url(/static/foo.png?query=yes); }',
355 'foo { background: url(http://doc.example.org/static/foo.png?query=yes); }',
358 'Remote URL (unnecessary quotes not preserved)',
359 'foo { background: url("http://example.org/w/unnecessary-quotes.png"); }',
360 'foo { background: url(http://example.org/w/unnecessary-quotes.png); }',
364 'foo { /* @embed */ background: url(red.gif); }',
365 "foo { background: url($red); background: url(http://localhost/w/red.gif?34ac6)!ie; }",
368 'Embedded file, other comments before the rule',
369 "foo { /* Bar. */ /* @embed */ background: url(red.gif); }",
370 "foo { /* Bar. */ background: url($red); /* Bar. */ background: url(http://localhost/w/red.gif?34ac6)!ie; }",
373 'Can not re-embed data: URIs',
374 "foo { /* @embed */ background: url($red); }",
375 "foo { background: url($red); }",
378 'Can not remap data: URIs',
379 "foo { background: url($red); }",
380 "foo { background: url($red); }",
383 'Can not embed remote URLs',
384 'foo { /* @embed */ background: url(http://example.org/w/foo.png); }',
385 'foo { background: url(http://example.org/w/foo.png); }',
388 'Embedded file (inline @embed)',
389 'foo { background: /* @embed */ url(red.gif); }',
390 "foo { background: url($red); "
391 . "background: url(http://localhost/w/red.gif?34ac6)!ie; }",
394 'Can not embed large files',
395 'foo { /* @embed */ background: url(large.png); }',
396 "foo { background: url(http://localhost/w/large.png?e3d1f); }",
399 'SVG files are embedded without base64 encoding and unnecessary IE 6 and 7 fallback',
400 'foo { /* @embed */ background: url(circle.svg); }',
401 "foo { background: url(\"$svg\"); }",
404 'Two regular files in one rule',
405 'foo { background: url(red.gif), url(green.gif); }',
406 'foo { background: url(http://localhost/w/red.gif?34ac6), '
407 . 'url(http://localhost/w/green.gif?13651); }',
410 'Two embedded files in one rule',
411 'foo { /* @embed */ background: url(red.gif), url(green.gif); }',
412 "foo { background: url($red), url($green); "
413 . "background: url(http://localhost/w/red.gif?34ac6), "
414 . "url(http://localhost/w/green.gif?13651)!ie; }",
417 'Two embedded files in one rule (inline @embed)',
418 'foo { background: /* @embed */ url(red.gif), /* @embed */ url(green.gif); }',
419 "foo { background: url($red), url($green); "
420 . "background: url(http://localhost/w/red.gif?34ac6), "
421 . "url(http://localhost/w/green.gif?13651)!ie; }",
424 'Two embedded files in one rule (inline @embed), one too large',
425 'foo { background: /* @embed */ url(red.gif), /* @embed */ url(large.png); }',
426 "foo { background: url($red), url(http://localhost/w/large.png?e3d1f); "
427 . "background: url(http://localhost/w/red.gif?34ac6), "
428 . "url(http://localhost/w/large.png?e3d1f)!ie; }",
431 'Practical example with some noise',
432 'foo { /* @embed */ background: #f9f9f9 url(red.gif) 0 0 no-repeat; }',
433 "foo { background: #f9f9f9 url($red) 0 0 no-repeat; "
434 . "background: #f9f9f9 url(http://localhost/w/red.gif?34ac6) 0 0 no-repeat!ie; }",
437 'Does not mess with other properties',
438 'foo { color: red; background: url(red.gif); font-size: small; }',
439 'foo { color: red; background: url(http://localhost/w/red.gif?34ac6); font-size: small; }',
442 'Spacing and miscellanea not changed (1)',
443 'foo { background: url(red.gif); }',
444 'foo { background: url(http://localhost/w/red.gif?34ac6); }',
447 'Spacing and miscellanea not changed (2)',
448 'foo {background:url(red.gif)}',
449 'foo {background:url(http://localhost/w/red.gif?34ac6)}',
452 'Spaces within url() parentheses are ignored',
453 'foo { background: url( red.gif ); }',
454 'foo { background: url(http://localhost/w/red.gif?34ac6); }',
457 '@import rule to local file (should we remap this?)',
458 '@import url(/styles.css)',
459 '@import url(http://doc.example.org/styles.css)',
462 '@import rule to local file (should we remap this?)',
463 '@import url(/styles.css)',
464 '@import url(http://doc.example.org/styles.css)',
467 '@import rule to URL',
468 '@import url(//localhost/styles.css?query=val)',
469 '@import url(//localhost/styles.css?query=val)',
472 'Background URL (double quotes)',
473 'foo { background: url("//localhost/styles.css?quoted=double") }',
474 'foo { background: url(//localhost/styles.css?quoted=double) }',
477 'Background URL (single quotes)',
478 'foo { background: url(\'//localhost/styles.css?quoted=single\') }',
479 'foo { background: url(//localhost/styles.css?quoted=single) }',
482 'Background URL (containing parentheses; T60473)',
483 'foo { background: url("//localhost/styles.css?query=(parens)") }',
484 'foo { background: url("//localhost/styles.css?query=(parens)") }',
487 'Background URL (double quoted, containing single quotes; T60473)',
488 'foo { background: url("//localhost/styles.css?quote=\'") }',
489 'foo { background: url("//localhost/styles.css?quote=\'") }',
492 'Background URL (single quoted, containing double quotes; T60473)',
493 'foo { background: url(\'//localhost/styles.css?quote="\') }',
494 'foo { background: url("//localhost/styles.css?quote=\"") }',
497 'Simple case with comments before url',
498 'foo { prop: /* some {funny;} comment */ url(bar.png); }',
499 'foo { prop: /* some {funny;} comment */ url(http://localhost/w/bar.png); }',
502 'Simple case with comments after url',
503 'foo { prop: url(red.gif)/* some {funny;} comment */ ; }',
504 'foo { prop: url(http://localhost/w/red.gif?34ac6)/* some {funny;} comment */ ; }',
507 'Embedded file with comment before url',
508 'foo { /* @embed */ background: /* some {funny;} comment */ url(red.gif); }',
509 "foo { background: /* some {funny;} comment */ url($red); background: /* some {funny;} comment */ url(http://localhost/w/red.gif?34ac6)!ie; }",
512 'Embedded file with comments inside and outside the rule',
513 'foo { /* @embed */ background: url(red.gif) /* some {foo;} comment */; /* some {bar;} comment */ }',
514 "foo { background: url($red) /* some {foo;} comment */; background: url(http://localhost/w/red.gif?34ac6) /* some {foo;} comment */!ie; /* some {bar;} comment */ }",
517 'Embedded file with comment outside the rule',
518 'foo { /* @embed */ background: url(red.gif); /* some {funny;} comment */ }',
519 "foo { background: url($red); background: url(http://localhost/w/red.gif?34ac6)!ie; /* some {funny;} comment */ }",
522 'Rule with two urls, each with comments',
523 '{ background: /*asd*/ url(something.png); background: /*jkl*/ url(something.png); }',
524 '{ background: /*asd*/ url(http://localhost/w/something.png); background: /*jkl*/ url(http://localhost/w/something.png); }',
527 'Sanity check for offending line from jquery.ui.theme.css (T62077)',
528 '.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}*/; }',
529 '.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}*/; }',
536 * This tests basic functionality of CSSMin::buildUrlValue.
538 * @dataProvider provideBuildUrlValueCases
539 * @covers CSSMin::buildUrlValue
541 public function testBuildUrlValue( $message, $input, $expectedOutput ) {
544 CSSMin
::buildUrlValue( $input ),
545 "CSSMin::buildUrlValue: $message"
549 public static function provideBuildUrlValueCases() {
553 'scheme://user@domain:port/~user/fi%20le.png?query=yes&really=y+s',
554 'url(scheme://user@domain:port/~user/fi%20le.png?query=yes&really=y+s)',
558 'data:image/png;base64,R0lGODlh/+==',
559 'url(data:image/png;base64,R0lGODlh/+==)',
563 "https://en.wikipedia.org/wiki/Wendy's",
564 "url(\"https://en.wikipedia.org/wiki/Wendy's\")",
567 'URL with parentheses',
568 'https://en.wikipedia.org/wiki/Boston_(band)',
569 'url("https://en.wikipedia.org/wiki/Boston_(band)")',
575 * Seperated because they are currently broken (T37492)
578 * @dataProvider provideStringCases
579 * @covers CSSMin::remap
581 public function testMinifyWithCSSStringValues( $code, $expectedOutput ) {
582 $this->testMinifyOutput( $code, $expectedOutput );
585 public static function provideStringCases() {
587 // String values should be respected
588 // - More than one space in a string value
589 [ 'foo { content: " "; }', 'foo{content:" "}' ],
590 // - Using a tab in a string value (turns into a space)
591 [ "foo { content: '\t'; }", "foo{content:'\t'}" ],
592 // - Using css-like syntax in string values
594 'foo::after { content: "{;}"; position: absolute; }',
595 'foo::after{content:"{;}";position:absolute}'
601 class CSSMinTestable
extends CSSMin
{
602 // Make some protected methods public
603 public static function isRemoteUrl( $maybeUrl ) {
604 return parent
::isRemoteUrl( $maybeUrl );
606 public static function isLocalUrl( $maybeUrl ) {
607 return parent
::isLocalUrl( $maybeUrl );