3 * Based on the test suite of the original Python
5 * http://code.google.com/p/cssjanus/source/browse/trunk/cssjanus_test.py
6 * Ported to PHP for ResourceLoader and has been extended since.
10 class CSSJanusTest
extends MediaWikiTestCase
{
12 * @dataProvider provideTransformCases
14 public function testTransform( $cssA, $cssB = null ) {
17 $transformedA = CSSJanus
::transform( $cssA );
18 $this->assertEquals( $transformedA, $cssB, 'Test A-B transformation' );
20 $transformedB = CSSJanus
::transform( $cssB );
21 $this->assertEquals( $transformedB, $cssA, 'Test B-A transformation' );
23 // If no B version is provided, it means
24 // the output should equal the input (modulo @noflip annotations).
25 $transformedA = CSSJanus
::transform( $cssA );
26 $this->assertEquals( $transformedA, $cssA, 'Nothing was flipped' );
31 * @dataProvider provideTransformAdvancedCases
33 public function testTransformAdvanced( $code, $expectedOutput, $options = array() ) {
34 $swapLtrRtlInURL = isset( $options['swapLtrRtlInURL'] ) ?
35 $options['swapLtrRtlInURL'] : false;
36 $swapLeftRightInURL = isset( $options['swapLeftRightInURL'] ) ?
37 $options['swapLeftRightInURL'] : false;
39 $flipped = CSSJanus
::transform( $code, $swapLtrRtlInURL, $swapLeftRightInURL );
41 $this->assertEquals( $expectedOutput, $flipped,
42 'Test flipping, options: url-ltr-rtl=' . ( $swapLtrRtlInURL ?
'true' : 'false' )
43 . ' url-left-right=' . ( $swapLeftRightInURL ?
'true' : 'false' )
48 * @dataProvider provideTransformBrokenCases
51 public function testTransformBroken( $code, $expectedOutput ) {
52 $flipped = CSSJanus
::transform( $code );
54 $this->assertEquals( $expectedOutput, $flipped, 'Test flipping' );
58 * These transform cases are tested *in both directions*
59 * No need to declare a principle twice in both directions here.
61 public static function provideTransformCases() {
68 // Guard against partial keys
69 // (CSS currently doesn't have flippable properties
70 // that contain the direction as part of the key without
73 '.foo { alright: 0; }'
76 '.foo { balleft: 0; }'
79 // Dashed property keys
81 '.foo { padding-left: 0; }',
82 '.foo { padding-right: 0; }'
85 '.foo { margin-left: 0; }',
86 '.foo { margin-right: 0; }'
89 '.foo { border-left: 0; }',
90 '.foo { border-right: 0; }'
93 // Double-dashed property keys
95 '.foo { border-left-color: red; }',
96 '.foo { border-right-color: red; }'
99 // Includes unknown properties?
100 '.foo { x-left-y: 0; }',
101 '.foo { x-right-y: 0; }'
104 // Multi-value properties
106 '.foo { padding: 0; }'
109 '.foo { padding: 0 1px; }'
112 '.foo { padding: 0 1px 2px; }'
115 '.foo { padding: 0 1px 2px 3px; }',
116 '.foo { padding: 0 3px 2px 1px; }'
119 // Shorthand / Four notation
121 '.foo { padding: .25em 15px 0pt 0ex; }',
122 '.foo { padding: .25em 0ex 0pt 15px; }'
125 '.foo { margin: 1px -4px 3px 2px; }',
126 '.foo { margin: 1px 2px 3px -4px; }'
129 '.foo { padding: 0 15px .25em 0; }',
130 '.foo { padding: 0 0 .25em 15px; }'
133 '.foo { padding: 1px 4.1grad 3px 2%; }',
134 '.foo { padding: 1px 2% 3px 4.1grad; }'
137 '.foo { padding: 1px 2px 3px auto; }',
138 '.foo { padding: 1px auto 3px 2px; }'
141 '.foo { padding: 1px inherit 3px auto; }',
142 '.foo { padding: 1px auto 3px inherit; }'
144 // border-radius assigns different meanings to the values
146 '.foo { border-radius: .25em 15px 0pt 0ex; }',
147 '.foo { border-radius: 15px .25em 0ex 0pt; }'
150 '.foo { border-radius: 0px 0px 5px 5px; }',
152 // Ensure the rule doesn't break other stuff
154 '.foo { x-unknown: a b c d; }'
157 '.foo barpx 0 2% { opacity: 0; }'
160 '#settings td p strong'
164 '.foo { border-color: red green blue white }',
165 '.foo { border-color: red white blue green }',
168 // Color name, hexdecimal, RGB & RGBA
169 '.foo { border-color: red #f00 rgb(255, 0, 0) rgba(255, 0, 0, 0.5) }',
170 '.foo { border-color: red rgba(255, 0, 0, 0.5) rgb(255, 0, 0) #f00 }',
173 // Color name, hexdecimal, HSL & HSLA
174 '.foo { border-color: red #f00 hsl(0, 100%, 50%) hsla(0, 100%, 50%, 0.5) }',
175 '.foo { border-color: red hsla(0, 100%, 50%, 0.5) hsl(0, 100%, 50%) #f00 }',
178 // Do not mangle 5 or more values
179 '.foo { -x-unknown: 1 2 3 4 5; }'
182 '.foo { -x-unknown: 1 2 3 4 5 6; }'
185 // Shorthand / Three notation
187 '.foo { margin: 1em 0 .25em; }'
190 '.foo { margin:-1.5em 0 -.75em; }'
193 // Shorthand / Two notation
195 '.foo { padding: 1px 2px; }'
198 // Shorthand / One notation
200 '.foo { padding: 1px; }'
203 // text-shadow and box-shadow
205 '.foo { box-shadow: -6px 3px 8px 5px rgba(0, 0, 0, 0.25); }',
206 '.foo { box-shadow: 6px 3px 8px 5px rgba(0, 0, 0, 0.25); }',
209 '.foo { box-shadow: inset -6px 3px 8px 5px rgba(0, 0, 0, 0.25); }',
210 '.foo { box-shadow: inset 6px 3px 8px 5px rgba(0, 0, 0, 0.25); }',
213 '.foo { text-shadow: orange 2px 0; }',
214 '.foo { text-shadow: orange -2px 0; }',
217 '.foo { text-shadow: 2px 0 orange; }',
218 '.foo { text-shadow: -2px 0 orange; }',
221 // Don't mangle zeroes
222 '.foo { text-shadow: orange 0 2px; }'
225 // Make sure floats are not considered zero
226 '.foo { box-shadow: inset .5em 0 0 white; }',
227 '.foo { box-shadow: inset -.5em 0 0 white; }',
231 // Note: This differs from the Python implementation,
232 // see also CSSJanus::fixDirection for more info.
234 '.foo { direction: ltr; }',
235 '.foo { direction: rtl; }'
238 '.foo { direction: rtl; }',
239 '.foo { direction: ltr; }'
242 'input { direction: ltr; }',
243 'input { direction: rtl; }'
246 'input { direction: rtl; }',
247 'input { direction: ltr; }'
250 'body { direction: ltr; }',
251 'body { direction: rtl; }'
254 '.foo, body, input { direction: ltr; }',
255 '.foo, body, input { direction: rtl; }'
258 'body { padding: 10px; direction: ltr; }',
259 'body { padding: 10px; direction: rtl; }'
262 'body { direction: ltr } .myClass { direction: ltr }',
263 'body { direction: rtl } .myClass { direction: rtl }'
268 '.foo { float: left; }',
269 '.foo { float: right; }'
272 '.foo { text-align: left; }',
273 '.foo { text-align: right; }'
276 '.foo { -x-unknown: left; }',
277 '.foo { -x-unknown: right; }'
279 // Guard against selectors that look flippable
281 '.column-left { width: 0; }'
284 'a.left { width: 0; }'
287 'a.leftification { width: 0; }'
290 'a.ltr { width: 0; }'
293 # <div class="a-ltr png">
294 '.a-ltr.png { width: 0; }'
298 'foo-ltr[attr="x"] { width: 0; }'
301 'div.left > span.right+span.left { width: 0; }'
304 '.thisclass .left .myclass { width: 0; }'
307 '.thisclass .left .myclass #myid { width: 0; }'
310 // Cursor values (east/west)
312 '.foo { cursor: e-resize; }',
313 '.foo { cursor: w-resize; }'
316 '.foo { cursor: se-resize; }',
317 '.foo { cursor: sw-resize; }'
320 '.foo { cursor: ne-resize; }',
321 '.foo { cursor: nw-resize; }'
326 '.foo { background-position: top left; }',
327 '.foo { background-position: top right; }'
330 '.foo { background: url(/foo/bar.png) top left; }',
331 '.foo { background: url(/foo/bar.png) top right; }'
334 '.foo { background: url(/foo/bar.png) top left no-repeat; }',
335 '.foo { background: url(/foo/bar.png) top right no-repeat; }'
338 '.foo { background: url(/foo/bar.png) no-repeat top left; }',
339 '.foo { background: url(/foo/bar.png) no-repeat top right; }'
342 '.foo { background: #fff url(/foo/bar.png) no-repeat top left; }',
343 '.foo { background: #fff url(/foo/bar.png) no-repeat top right; }'
346 '.foo { background-position: 100% 40%; }',
347 '.foo { background-position: 0% 40%; }'
350 '.foo { background-position: 23% 0; }',
351 '.foo { background-position: 77% 0; }'
354 '.foo { background-position: 23% auto; }',
355 '.foo { background-position: 77% auto; }'
358 '.foo { background-position-x: 23%; }',
359 '.foo { background-position-x: 77%; }'
362 '.foo { background-position-y: 23%; }',
363 '.foo { background-position-y: 23%; }'
366 '.foo { background:url(../foo.png) no-repeat 75% 50%; }',
367 '.foo { background:url(../foo.png) no-repeat 25% 50%; }'
370 '.foo { background: 10% 20% } .bar { background: 40% 30% }',
371 '.foo { background: 90% 20% } .bar { background: 60% 30% }'
376 'body { direction: rtl; float: right; } .foo { direction: ltr; float: right; }',
377 'body { direction: ltr; float: left; } .foo { direction: rtl; float: left; }',
380 // Duplicate properties
382 '.foo { float: left; float: right; float: left; }',
383 '.foo { float: right; float: left; float: right; }',
388 '/* left /* right */left: 10px',
389 '/* left /* right */right: 10px'
392 '/*left*//*left*/left: 10px',
393 '/*left*//*left*/right: 10px'
396 '/* Going right is cool */ .foo { width: 0 }',
399 "/* padding-right 1 2 3 4 */\n#test { width: 0}\n/*right*/"
402 "/** Two line comment\n * left\n \*/\n#test {width: 0}"
405 // @noflip annotation
407 // before selector (single)
408 '/* @noflip */ div { float: left; }'
411 // before selector (multiple)
412 '/* @noflip */ div, .notme { float: left; }'
416 'div, /* @noflip */ .foo { float: left; }'
420 'div, .notme /* @noflip */ { float: left; }'
423 // before multiple rules
424 '/* @noflip */ div { float: left; } .foo { float: left; }',
425 '/* @noflip */ div { float: left; } .foo { float: right; }'
428 // support parentheses in selector
429 '/* @noflip */ .test:not(:first) { margin-right: -0.25em; margin-left: 0.25em; }',
430 '/* @noflip */ .test:not(:first) { margin-right: -0.25em; margin-left: 0.25em; }'
433 // after multiple rules
434 '.foo { float: left; } /* @noflip */ div { float: left; }',
435 '.foo { float: right; } /* @noflip */ div { float: left; }'
438 // before multiple properties
439 'div { /* @noflip */ float: left; text-align: left; }',
440 'div { /* @noflip */ float: left; text-align: right; }'
443 // after multiple properties
444 'div { float: left; /* @noflip */ text-align: left; }',
445 'div { float: right; /* @noflip */ text-align: left; }'
448 // before a *= attribute selector with multiple properties
449 '/* @noflip */ div.foo[bar*=baz] { float:left; clear: left; }'
452 // before a ^= attribute selector with multiple properties
453 '/* @noflip */ div.foo[bar^=baz] { float:left; clear: left; }'
456 // before a ~= attribute selector with multiple properties
457 '/* @noflip */ div.foo[bar~=baz] { float:left; clear: left; }'
460 // before a = attribute selector with multiple properties
461 '/* @noflip */ div.foo[bar=baz] { float:left; clear: left; }'
464 // before a quoted attribute selector with multiple properties
465 '/* @noflip */ div.foo[bar=\'baz{quux\'] { float:left; clear: left; }'
468 // Guard against css3 stuff
470 'background-image: -moz-linear-gradient(#326cc1, #234e8c);'
473 'background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#666666), to(#ffffff));'
476 // CSS syntax / white-space variations
477 // spaces, no spaces, tabs, new lines, omitting semi-colons
499 ".foo { left : 0 ; }",
500 ".foo { right : 0 ; }"
503 ".foo\n { left : 0 ; }",
504 ".foo\n { right : 0 ; }"
507 ".foo\n { \nleft : 0 ; }",
508 ".foo\n { \nright : 0 ; }"
511 ".foo\n { \n left : 0 ; }",
512 ".foo\n { \n right : 0 ; }"
515 ".foo\n { \n left\n : 0; }",
516 ".foo\n { \n right\n : 0; }"
519 ".foo \n { \n left\n : 0; }",
520 ".foo \n { \n right\n : 0; }"
523 ".foo\n{\nleft\n:\n0;}",
524 ".foo\n{\nright\n:\n0;}"
527 ".foo\n.bar {\n\tleft: 0;\n}",
528 ".foo\n.bar {\n\tright: 0;\n}"
531 ".foo\t{\tleft\t:\t0;}",
532 ".foo\t{\tright\t:\t0;}"
535 // Guard against partial keys
537 '.foo { leftxx: 0; }',
538 '.foo { leftxx: 0; }'
541 '.foo { rightxx: 0; }',
542 '.foo { rightxx: 0; }'
548 * These cases are tested in one way only (format: actual, expected, msg).
549 * If both ways can be tested, either put both versions in here or move
550 * it to provideTransformCases().
552 public static function provideTransformAdvancedCases() {
554 # [ - _ . ] <-> [ left right ltr rtl ]
555 'foo.jpg' => 'foo.jpg',
556 'left.jpg' => 'right.jpg',
557 'ltr.jpg' => 'rtl.jpg',
559 'foo-left.png' => 'foo-right.png',
560 'foo_left.png' => 'foo_right.png',
561 'foo.left.png' => 'foo.right.png',
563 'foo-ltr.png' => 'foo-rtl.png',
564 'foo_ltr.png' => 'foo_rtl.png',
565 'foo.ltr.png' => 'foo.rtl.png',
567 'left-foo.png' => 'right-foo.png',
568 'left_foo.png' => 'right_foo.png',
569 'left.foo.png' => 'right.foo.png',
571 'ltr-foo.png' => 'rtl-foo.png',
572 'ltr_foo.png' => 'rtl_foo.png',
573 'ltr.foo.png' => 'rtl.foo.png',
575 'foo-ltr-left.gif' => 'foo-rtl-right.gif',
576 'foo_ltr_left.gif' => 'foo_rtl_right.gif',
577 'foo.ltr.left.gif' => 'foo.rtl.right.gif',
578 'foo-ltr_left.gif' => 'foo-rtl_right.gif',
579 'foo_ltr.left.gif' => 'foo_rtl.right.gif',
582 foreach ( $bgPairs as $left => $right ) {
583 # By default '-rtl' and '-left' etc. are not touched,
584 # Only when the appropiate parameter is set.
586 ".foo { background: url(images/$left); }",
587 ".foo { background: url(images/$left); }"
590 ".foo { background: url(images/$right); }",
591 ".foo { background: url(images/$right); }"
594 ".foo { background: url(images/$left); }",
595 ".foo { background: url(images/$right); }",
597 'swapLtrRtlInURL' => true,
598 'swapLeftRightInURL' => true,
602 ".foo { background: url(images/$right); }",
603 ".foo { background: url(images/$left); }",
605 'swapLtrRtlInURL' => true,
606 'swapLeftRightInURL' => true,
615 * Cases that are currently failing, but
616 * should be looked at in the future as enhancements and/or bug fix
618 public static function provideTransformBrokenCases() {
620 // Guard against selectors that look flippable
622 # <foo-left-x attr="x">
623 'foo-left-x[attr="x"] { width: 0; }',
624 'foo-left-x[attr="x"] { width: 0; }'
627 # <div class="foo" data-left="x">
628 '.foo[data-left="x"] { width: 0; }',
629 '.foo[data-left="x"] { width: 0; }'