Tests: Make phpunit providers "public static".
[lhc/web/wiklou.git] / tests / phpunit / includes / libs / CSSJanusTest.php
1 <?php
2 /**
3 * Based on the test suite of the original Python
4 * CSSJanus libary:
5 * http://code.google.com/p/cssjanus/source/browse/trunk/cssjanus_test.py
6 * Ported to PHP for ResourceLoader and has been extended since.
7 */
8 class CSSJanusTest extends MediaWikiTestCase {
9 /**
10 * @dataProvider provideTransformCases
11 */
12 function testTransform( $cssA, $cssB = null ) {
13
14 if ( $cssB ) {
15 $transformedA = CSSJanus::transform( $cssA );
16 $this->assertEquals( $transformedA, $cssB, 'Test A-B transformation' );
17
18 $transformedB = CSSJanus::transform( $cssB );
19 $this->assertEquals( $transformedB, $cssA, 'Test B-A transformation' );
20 } else {
21 // If no B version is provided, it means
22 // the output should equal the input.
23 $transformedA = CSSJanus::transform( $cssA );
24 $this->assertEquals( $transformedA, $cssA, 'Nothing was flipped' );
25 }
26 }
27
28 /**
29 * @dataProvider provideTransformAdvancedCases
30 */
31 function testTransformAdvanced( $code, $expectedOutput, $options = array() ) {
32 $swapLtrRtlInURL = isset( $options['swapLtrRtlInURL'] ) ? $options['swapLtrRtlInURL'] : false;
33 $swapLeftRightInURL = isset( $options['swapLeftRightInURL'] ) ? $options['swapLeftRightInURL'] : false;
34
35 $flipped = CSSJanus::transform( $code, $swapLtrRtlInURL, $swapLeftRightInURL );
36
37 $this->assertEquals( $expectedOutput, $flipped,
38 'Test flipping, options: url-ltr-rtl=' . ( $swapLtrRtlInURL ? 'true' : 'false' )
39 . ' url-left-right=' . ( $swapLeftRightInURL ? 'true' : 'false' )
40 );
41 }
42
43 /**
44 * @dataProvider provideTransformBrokenCases
45 * @group Broken
46 */
47 function testTransformBroken( $code, $expectedOutput ) {
48 $flipped = CSSJanus::transform( $code );
49
50 $this->assertEquals( $expectedOutput, $flipped, 'Test flipping' );
51 }
52
53 /**
54 * These transform cases are tested *in both directions*
55 * No need to declare a principle twice in both directions here.
56 */
57 public static function provideTransformCases() {
58 return array(
59 // Property keys
60 array(
61 '.foo { left: 0; }',
62 '.foo { right: 0; }'
63 ),
64 // Guard against partial keys
65 // (CSS currently doesn't have flippable properties
66 // that contain the direction as part of the key without
67 // dash separation)
68 array(
69 '.foo { alright: 0; }'
70 ),
71 array(
72 '.foo { balleft: 0; }'
73 ),
74
75 // Dashed property keys
76 array(
77 '.foo { padding-left: 0; }',
78 '.foo { padding-right: 0; }'
79 ),
80 array(
81 '.foo { margin-left: 0; }',
82 '.foo { margin-right: 0; }'
83 ),
84 array(
85 '.foo { border-left: 0; }',
86 '.foo { border-right: 0; }'
87 ),
88
89 // Double-dashed property keys
90 array(
91 '.foo { border-left-color: red; }',
92 '.foo { border-right-color: red; }'
93 ),
94 array(
95 // Includes unknown properties?
96 '.foo { x-left-y: 0; }',
97 '.foo { x-right-y: 0; }'
98 ),
99
100 // Multi-value properties
101 array(
102 '.foo { padding: 0; }'
103 ),
104 array(
105 '.foo { padding: 0 1px; }'
106 ),
107 array(
108 '.foo { padding: 0 1px 2px; }'
109 ),
110 array(
111 '.foo { padding: 0 1px 2px 3px; }',
112 '.foo { padding: 0 3px 2px 1px; }'
113 ),
114
115 // Shorthand / Four notation
116 array(
117 '.foo { padding: .25em 15px 0pt 0ex; }',
118 '.foo { padding: .25em 0ex 0pt 15px; }'
119 ),
120 array(
121 '.foo { margin: 1px -4px 3px 2px; }',
122 '.foo { margin: 1px 2px 3px -4px; }'
123 ),
124 array(
125 '.foo { padding: 0 15px .25em 0; }',
126 '.foo { padding: 0 0 .25em 15px; }'
127 ),
128 array(
129 '.foo { padding: 1px 4.1grad 3px 2%; }',
130 '.foo { padding: 1px 2% 3px 4.1grad; }'
131 ),
132 array(
133 '.foo { padding: 1px 2px 3px auto; }',
134 '.foo { padding: 1px auto 3px 2px; }'
135 ),
136 array(
137 '.foo { padding: 1px inherit 3px auto; }',
138 '.foo { padding: 1px auto 3px inherit; }'
139 ),
140 array(
141 '.foo { border-radius: .25em 15px 0pt 0ex; }',
142 '.foo { border-radius: .25em 0ex 0pt 15px; }'
143 ),
144 array(
145 '.foo { x-unknown: a b c d; }'
146 ),
147 array(
148 '.foo barpx 0 2% { opacity: 0; }'
149 ),
150 array(
151 '#settings td p strong'
152 ),
153 array(
154 # Not sure how 4+ values should behave,
155 # testing to make sure changes are detected
156 '.foo { x-unknown: 1 2 3 4 5; }',
157 '.foo { x-unknown: 1 4 3 2 5; }',
158 ),
159 array(
160 '.foo { x-unknown: 1 2 3 4 5 6; }',
161 '.foo { x-unknown: 1 4 3 2 5 6; }',
162 ),
163
164 // Shorthand / Three notation
165 array(
166 '.foo { margin: 1em 0 .25em; }'
167 ),
168 array(
169 '.foo { margin:-1.5em 0 -.75em; }'
170 ),
171
172 // Shorthand / Two notation
173 array(
174 '.foo { padding: 1px 2px; }'
175 ),
176
177 // Shorthand / One notation
178 array(
179 '.foo { padding: 1px; }'
180 ),
181
182 // Direction
183 // Note: This differs from the Python implementation,
184 // see also CSSJanus::fixDirection for more info.
185 array(
186 '.foo { direction: ltr; }',
187 '.foo { direction: rtl; }'
188 ),
189 array(
190 '.foo { direction: rtl; }',
191 '.foo { direction: ltr; }'
192 ),
193 array(
194 'input { direction: ltr; }',
195 'input { direction: rtl; }'
196 ),
197 array(
198 'input { direction: rtl; }',
199 'input { direction: ltr; }'
200 ),
201 array(
202 'body { direction: ltr; }',
203 'body { direction: rtl; }'
204 ),
205 array(
206 '.foo, body, input { direction: ltr; }',
207 '.foo, body, input { direction: rtl; }'
208 ),
209 array(
210 'body { padding: 10px; direction: ltr; }',
211 'body { padding: 10px; direction: rtl; }'
212 ),
213 array(
214 'body { direction: ltr } .myClass { direction: ltr }',
215 'body { direction: rtl } .myClass { direction: rtl }'
216 ),
217
218 // Left/right values
219 array(
220 '.foo { float: left; }',
221 '.foo { float: right; }'
222 ),
223 array(
224 '.foo { text-align: left; }',
225 '.foo { text-align: right; }'
226 ),
227 array(
228 '.foo { -x-unknown: left; }',
229 '.foo { -x-unknown: right; }'
230 ),
231 // Guard against selectors that look flippable
232 array(
233 '.column-left { width: 0; }'
234 ),
235 array(
236 'a.left { width: 0; }'
237 ),
238 array(
239 'a.leftification { width: 0; }'
240 ),
241 array(
242 'a.ltr { width: 0; }'
243 ),
244 array(
245 # <div class="a-ltr png">
246 '.a-ltr.png { width: 0; }'
247 ),
248 array(
249 # <foo-ltr attr="x">
250 'foo-ltr[attr="x"] { width: 0; }'
251 ),
252 array(
253 'div.left > span.right+span.left { width: 0; }'
254 ),
255 array(
256 '.thisclass .left .myclass { width: 0; }'
257 ),
258 array(
259 '.thisclass .left .myclass #myid { width: 0; }'
260 ),
261
262 // Cursor values (east/west)
263 array(
264 '.foo { cursor: e-resize; }',
265 '.foo { cursor: w-resize; }'
266 ),
267 array(
268 '.foo { cursor: se-resize; }',
269 '.foo { cursor: sw-resize; }'
270 ),
271 array(
272 '.foo { cursor: ne-resize; }',
273 '.foo { cursor: nw-resize; }'
274 ),
275
276 // Background
277 array(
278 '.foo { background-position: top left; }',
279 '.foo { background-position: top right; }'
280 ),
281 array(
282 '.foo { background: url(/foo/bar.png) top left; }',
283 '.foo { background: url(/foo/bar.png) top right; }'
284 ),
285 array(
286 '.foo { background: url(/foo/bar.png) top left no-repeat; }',
287 '.foo { background: url(/foo/bar.png) top right no-repeat; }'
288 ),
289 array(
290 '.foo { background: url(/foo/bar.png) no-repeat top left; }',
291 '.foo { background: url(/foo/bar.png) no-repeat top right; }'
292 ),
293 array(
294 '.foo { background: #fff url(/foo/bar.png) no-repeat top left; }',
295 '.foo { background: #fff url(/foo/bar.png) no-repeat top right; }'
296 ),
297 array(
298 '.foo { background-position: 100% 40%; }',
299 '.foo { background-position: 0% 40%; }'
300 ),
301 array(
302 '.foo { background-position: 23% 0; }',
303 '.foo { background-position: 77% 0; }'
304 ),
305 array(
306 '.foo { background-position: 23% auto; }',
307 '.foo { background-position: 77% auto; }'
308 ),
309 array(
310 '.foo { background-position-x: 23%; }',
311 '.foo { background-position-x: 77%; }'
312 ),
313 array(
314 '.foo { background-position-y: 23%; }',
315 '.foo { background-position-y: 23%; }'
316 ),
317 array(
318 '.foo { background:url(../foo.png) no-repeat 75% 50%; }',
319 '.foo { background:url(../foo.png) no-repeat 25% 50%; }'
320 ),
321 array(
322 '.foo { background: 10% 20% } .bar { background: 40% 30% }',
323 '.foo { background: 90% 20% } .bar { background: 60% 30% }'
324 ),
325
326 // Multiple rules
327 array(
328 'body { direction: rtl; float: right; } .foo { direction: ltr; float: right; }',
329 'body { direction: ltr; float: left; } .foo { direction: rtl; float: left; }',
330 ),
331
332 // Duplicate properties
333 array(
334 '.foo { float: left; float: right; float: left; }',
335 '.foo { float: right; float: left; float: right; }',
336 ),
337
338 // Preserve comments
339 array(
340 '/* left /* right */left: 10px',
341 '/* left /* right */right: 10px'
342 ),
343 array(
344 '/*left*//*left*/left: 10px',
345 '/*left*//*left*/right: 10px'
346 ),
347 array(
348 '/* Going right is cool */ .foo { width: 0 }',
349 ),
350 array(
351 "/* padding-right 1 2 3 4 */\n#test { width: 0}\n/*right*/"
352 ),
353 array(
354 "/** Two line comment\n * left\n \*/\n#test {width: 0}"
355 ),
356
357 // @noflip annotation
358 array(
359 // before selector (single)
360 '/* @noflip */ div { float: left; }'
361 ),
362 array(
363 // before selector (multiple)
364 '/* @noflip */ div, .notme { float: left; }'
365 ),
366 array(
367 // inside selector
368 'div, /* @noflip */ .foo { float: left; }'
369 ),
370 array(
371 // after selector
372 'div, .notme /* @noflip */ { float: left; }'
373 ),
374 array(
375 // before multiple rules
376 '/* @noflip */ div { float: left; } .foo { float: left; }',
377 '/* @noflip */ div { float: left; } .foo { float: right; }'
378 ),
379 array(
380 // after multiple rules
381 '.foo { float: left; } /* @noflip */ div { float: left; }',
382 '.foo { float: right; } /* @noflip */ div { float: left; }'
383 ),
384 array(
385 // before multiple properties
386 'div { /* @noflip */ float: left; text-align: left; }',
387 'div { /* @noflip */ float: left; text-align: right; }'
388 ),
389 array(
390 // after multiple properties
391 'div { float: left; /* @noflip */ text-align: left; }',
392 'div { float: right; /* @noflip */ text-align: left; }'
393 ),
394
395 // Guard against css3 stuff
396 array(
397 'background-image: -moz-linear-gradient(#326cc1, #234e8c);'
398 ),
399 array(
400 'background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#666666), to(#ffffff));'
401 ),
402
403 // CSS syntax / white-space variations
404 // spaces, no spaces, tabs, new lines, omitting semi-colons
405 array(
406 ".foo { left: 0; }",
407 ".foo { right: 0; }"
408 ),
409 array(
410 ".foo{ left: 0; }",
411 ".foo{ right: 0; }"
412 ),
413 array(
414 ".foo{ left: 0 }",
415 ".foo{ right: 0 }"
416 ),
417 array(
418 ".foo{left:0 }",
419 ".foo{right:0 }"
420 ),
421 array(
422 ".foo{left:0}",
423 ".foo{right:0}"
424 ),
425 array(
426 ".foo { left : 0 ; }",
427 ".foo { right : 0 ; }"
428 ),
429 array(
430 ".foo\n { left : 0 ; }",
431 ".foo\n { right : 0 ; }"
432 ),
433 array(
434 ".foo\n { \nleft : 0 ; }",
435 ".foo\n { \nright : 0 ; }"
436 ),
437 array(
438 ".foo\n { \n left : 0 ; }",
439 ".foo\n { \n right : 0 ; }"
440 ),
441 array(
442 ".foo\n { \n left\n : 0; }",
443 ".foo\n { \n right\n : 0; }"
444 ),
445 array(
446 ".foo \n { \n left\n : 0; }",
447 ".foo \n { \n right\n : 0; }"
448 ),
449 array(
450 ".foo\n{\nleft\n:\n0;}",
451 ".foo\n{\nright\n:\n0;}"
452 ),
453 array(
454 ".foo\n.bar {\n\tleft: 0;\n}",
455 ".foo\n.bar {\n\tright: 0;\n}"
456 ),
457 array(
458 ".foo\t{\tleft\t:\t0;}",
459 ".foo\t{\tright\t:\t0;}"
460 ),
461
462 // Guard against partial keys
463 array(
464 '.foo { leftxx: 0; }',
465 '.foo { leftxx: 0; }'
466 ),
467 array(
468 '.foo { rightxx: 0; }',
469 '.foo { rightxx: 0; }'
470 ),
471 );
472 }
473
474 /**
475 * These cases are tested in one way only (format: actual, expected, msg).
476 * If both ways can be tested, either put both versions in here or move
477 * it to provideTransformCases().
478 */
479 public static function provideTransformAdvancedCases() {
480 $bgPairs = array(
481 # [ - _ . ] <-> [ left right ltr rtl ]
482 'foo.jpg' => 'foo.jpg',
483 'left.jpg' => 'right.jpg',
484 'ltr.jpg' => 'rtl.jpg',
485
486 'foo-left.png' => 'foo-right.png',
487 'foo_left.png' => 'foo_right.png',
488 'foo.left.png' => 'foo.right.png',
489
490 'foo-ltr.png' => 'foo-rtl.png',
491 'foo_ltr.png' => 'foo_rtl.png',
492 'foo.ltr.png' => 'foo.rtl.png',
493
494 'left-foo.png' => 'right-foo.png',
495 'left_foo.png' => 'right_foo.png',
496 'left.foo.png' => 'right.foo.png',
497
498 'ltr-foo.png' => 'rtl-foo.png',
499 'ltr_foo.png' => 'rtl_foo.png',
500 'ltr.foo.png' => 'rtl.foo.png',
501
502 'foo-ltr-left.gif' => 'foo-rtl-right.gif',
503 'foo_ltr_left.gif' => 'foo_rtl_right.gif',
504 'foo.ltr.left.gif' => 'foo.rtl.right.gif',
505 'foo-ltr_left.gif' => 'foo-rtl_right.gif',
506 'foo_ltr.left.gif' => 'foo_rtl.right.gif',
507 );
508 $provider = array();
509 foreach ( $bgPairs as $left => $right ) {
510 # By default '-rtl' and '-left' etc. are not touched,
511 # Only when the appropiate parameter is set.
512 $provider[] = array(
513 ".foo { background: url(images/$left); }",
514 ".foo { background: url(images/$left); }"
515 );
516 $provider[] = array(
517 ".foo { background: url(images/$right); }",
518 ".foo { background: url(images/$right); }"
519 );
520 $provider[] = array(
521 ".foo { background: url(images/$left); }",
522 ".foo { background: url(images/$right); }",
523 array(
524 'swapLtrRtlInURL' => true,
525 'swapLeftRightInURL' => true,
526 )
527 );
528 $provider[] = array(
529 ".foo { background: url(images/$right); }",
530 ".foo { background: url(images/$left); }",
531 array(
532 'swapLtrRtlInURL' => true,
533 'swapLeftRightInURL' => true,
534 )
535 );
536 }
537
538 return $provider;
539 }
540
541 /**
542 * Cases that are currently failing, but
543 * should be looked at in the future as enhancements and/or bug fix
544 */
545 public static function provideTransformBrokenCases() {
546 return array(
547 // Guard against selectors that look flippable
548 array(
549 # <foo-left-x attr="x">
550 'foo-left-x[attr="x"] { width: 0; }',
551 'foo-left-x[attr="x"] { width: 0; }'
552 ),
553 array(
554 # <div class="foo" data-left="x">
555 '.foo[data-left="x"] { width: 0; }',
556 '.foo[data-left="x"] { width: 0; }'
557 ),
558 );
559 }
560 }