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