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.
8 class CSSJanusTest
extends MediaWikiTestCase
{
10 * @dataProvider provideTransformCases
12 function testTransform( $cssA, $cssB = null ) {
15 $transformedA = CSSJanus
::transform( $cssA );
16 $this->assertEquals( $transformedA, $cssB, 'Test A-B transformation' );
18 $transformedB = CSSJanus
::transform( $cssB );
19 $this->assertEquals( $transformedB, $cssA, 'Test B-A transformation' );
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' );
29 * @dataProvider provideTransformAdvancedCases
31 function testTransformAdvanced( $code, $expectedOutput, $options = array() ) {
32 $swapLtrRtlInURL = isset( $options['swapLtrRtlInURL'] ) ?
$options['swapLtrRtlInURL'] : false;
33 $swapLeftRightInURL = isset( $options['swapLeftRightInURL'] ) ?
$options['swapLeftRightInURL'] : false;
35 $flipped = CSSJanus
::transform( $code, $swapLtrRtlInURL, $swapLeftRightInURL );
37 $this->assertEquals( $expectedOutput, $flipped,
38 'Test flipping, options: url-ltr-rtl=' . ( $swapLtrRtlInURL ?
'true' : 'false' )
39 . ' url-left-right=' . ( $swapLeftRightInURL ?
'true' : 'false' )
44 * @dataProvider provideTransformBrokenCases
47 function testTransformBroken( $code, $expectedOutput ) {
48 $flipped = CSSJanus
::transform( $code );
50 $this->assertEquals( $expectedOutput, $flipped, 'Test flipping' );
54 * These transform cases are tested *in both directions*
55 * No need to declare a principle twice in both directions here.
57 public static function provideTransformCases() {
64 // Guard against partial keys
65 // (CSS currently doesn't have flippable properties
66 // that contain the direction as part of the key without
69 '.foo { alright: 0; }'
72 '.foo { balleft: 0; }'
75 // Dashed property keys
77 '.foo { padding-left: 0; }',
78 '.foo { padding-right: 0; }'
81 '.foo { margin-left: 0; }',
82 '.foo { margin-right: 0; }'
85 '.foo { border-left: 0; }',
86 '.foo { border-right: 0; }'
89 // Double-dashed property keys
91 '.foo { border-left-color: red; }',
92 '.foo { border-right-color: red; }'
95 // Includes unknown properties?
96 '.foo { x-left-y: 0; }',
97 '.foo { x-right-y: 0; }'
100 // Multi-value properties
102 '.foo { padding: 0; }'
105 '.foo { padding: 0 1px; }'
108 '.foo { padding: 0 1px 2px; }'
111 '.foo { padding: 0 1px 2px 3px; }',
112 '.foo { padding: 0 3px 2px 1px; }'
115 // Shorthand / Four notation
117 '.foo { padding: .25em 15px 0pt 0ex; }',
118 '.foo { padding: .25em 0ex 0pt 15px; }'
121 '.foo { margin: 1px -4px 3px 2px; }',
122 '.foo { margin: 1px 2px 3px -4px; }'
125 '.foo { padding: 0 15px .25em 0; }',
126 '.foo { padding: 0 0 .25em 15px; }'
129 '.foo { padding: 1px 4.1grad 3px 2%; }',
130 '.foo { padding: 1px 2% 3px 4.1grad; }'
133 '.foo { padding: 1px 2px 3px auto; }',
134 '.foo { padding: 1px auto 3px 2px; }'
137 '.foo { padding: 1px inherit 3px auto; }',
138 '.foo { padding: 1px auto 3px inherit; }'
141 '.foo { border-radius: .25em 15px 0pt 0ex; }',
142 '.foo { border-radius: .25em 0ex 0pt 15px; }'
145 '.foo { x-unknown: a b c d; }'
148 '.foo barpx 0 2% { opacity: 0; }'
151 '#settings td p strong'
154 // Do not mangle 5 or more values
155 '.foo { -x-unknown: 1 2 3 4 5; }'
158 '.foo { -x-unknown: 1 2 3 4 5 6; }'
161 // Shorthand / Three notation
163 '.foo { margin: 1em 0 .25em; }'
166 '.foo { margin:-1.5em 0 -.75em; }'
169 // Shorthand / Two notation
171 '.foo { padding: 1px 2px; }'
174 // Shorthand / One notation
176 '.foo { padding: 1px; }'
180 // Note: This differs from the Python implementation,
181 // see also CSSJanus::fixDirection for more info.
183 '.foo { direction: ltr; }',
184 '.foo { direction: rtl; }'
187 '.foo { direction: rtl; }',
188 '.foo { direction: ltr; }'
191 'input { direction: ltr; }',
192 'input { direction: rtl; }'
195 'input { direction: rtl; }',
196 'input { direction: ltr; }'
199 'body { direction: ltr; }',
200 'body { direction: rtl; }'
203 '.foo, body, input { direction: ltr; }',
204 '.foo, body, input { direction: rtl; }'
207 'body { padding: 10px; direction: ltr; }',
208 'body { padding: 10px; direction: rtl; }'
211 'body { direction: ltr } .myClass { direction: ltr }',
212 'body { direction: rtl } .myClass { direction: rtl }'
217 '.foo { float: left; }',
218 '.foo { float: right; }'
221 '.foo { text-align: left; }',
222 '.foo { text-align: right; }'
225 '.foo { -x-unknown: left; }',
226 '.foo { -x-unknown: right; }'
228 // Guard against selectors that look flippable
230 '.column-left { width: 0; }'
233 'a.left { width: 0; }'
236 'a.leftification { width: 0; }'
239 'a.ltr { width: 0; }'
242 # <div class="a-ltr png">
243 '.a-ltr.png { width: 0; }'
247 'foo-ltr[attr="x"] { width: 0; }'
250 'div.left > span.right+span.left { width: 0; }'
253 '.thisclass .left .myclass { width: 0; }'
256 '.thisclass .left .myclass #myid { width: 0; }'
259 // Cursor values (east/west)
261 '.foo { cursor: e-resize; }',
262 '.foo { cursor: w-resize; }'
265 '.foo { cursor: se-resize; }',
266 '.foo { cursor: sw-resize; }'
269 '.foo { cursor: ne-resize; }',
270 '.foo { cursor: nw-resize; }'
275 '.foo { background-position: top left; }',
276 '.foo { background-position: top right; }'
279 '.foo { background: url(/foo/bar.png) top left; }',
280 '.foo { background: url(/foo/bar.png) top right; }'
283 '.foo { background: url(/foo/bar.png) top left no-repeat; }',
284 '.foo { background: url(/foo/bar.png) top right no-repeat; }'
287 '.foo { background: url(/foo/bar.png) no-repeat top left; }',
288 '.foo { background: url(/foo/bar.png) no-repeat top right; }'
291 '.foo { background: #fff url(/foo/bar.png) no-repeat top left; }',
292 '.foo { background: #fff url(/foo/bar.png) no-repeat top right; }'
295 '.foo { background-position: 100% 40%; }',
296 '.foo { background-position: 0% 40%; }'
299 '.foo { background-position: 23% 0; }',
300 '.foo { background-position: 77% 0; }'
303 '.foo { background-position: 23% auto; }',
304 '.foo { background-position: 77% auto; }'
307 '.foo { background-position-x: 23%; }',
308 '.foo { background-position-x: 77%; }'
311 '.foo { background-position-y: 23%; }',
312 '.foo { background-position-y: 23%; }'
315 '.foo { background:url(../foo.png) no-repeat 75% 50%; }',
316 '.foo { background:url(../foo.png) no-repeat 25% 50%; }'
319 '.foo { background: 10% 20% } .bar { background: 40% 30% }',
320 '.foo { background: 90% 20% } .bar { background: 60% 30% }'
325 'body { direction: rtl; float: right; } .foo { direction: ltr; float: right; }',
326 'body { direction: ltr; float: left; } .foo { direction: rtl; float: left; }',
329 // Duplicate properties
331 '.foo { float: left; float: right; float: left; }',
332 '.foo { float: right; float: left; float: right; }',
337 '/* left /* right */left: 10px',
338 '/* left /* right */right: 10px'
341 '/*left*//*left*/left: 10px',
342 '/*left*//*left*/right: 10px'
345 '/* Going right is cool */ .foo { width: 0 }',
348 "/* padding-right 1 2 3 4 */\n#test { width: 0}\n/*right*/"
351 "/** Two line comment\n * left\n \*/\n#test {width: 0}"
354 // @noflip annotation
356 // before selector (single)
357 '/* @noflip */ div { float: left; }'
360 // before selector (multiple)
361 '/* @noflip */ div, .notme { float: left; }'
365 'div, /* @noflip */ .foo { float: left; }'
369 'div, .notme /* @noflip */ { float: left; }'
372 // before multiple rules
373 '/* @noflip */ div { float: left; } .foo { float: left; }',
374 '/* @noflip */ div { float: left; } .foo { float: right; }'
377 // after multiple rules
378 '.foo { float: left; } /* @noflip */ div { float: left; }',
379 '.foo { float: right; } /* @noflip */ div { float: left; }'
382 // before multiple properties
383 'div { /* @noflip */ float: left; text-align: left; }',
384 'div { /* @noflip */ float: left; text-align: right; }'
387 // after multiple properties
388 'div { float: left; /* @noflip */ text-align: left; }',
389 'div { float: right; /* @noflip */ text-align: left; }'
392 // Guard against css3 stuff
394 'background-image: -moz-linear-gradient(#326cc1, #234e8c);'
397 'background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#666666), to(#ffffff));'
400 // CSS syntax / white-space variations
401 // spaces, no spaces, tabs, new lines, omitting semi-colons
423 ".foo { left : 0 ; }",
424 ".foo { right : 0 ; }"
427 ".foo\n { left : 0 ; }",
428 ".foo\n { right : 0 ; }"
431 ".foo\n { \nleft : 0 ; }",
432 ".foo\n { \nright : 0 ; }"
435 ".foo\n { \n left : 0 ; }",
436 ".foo\n { \n right : 0 ; }"
439 ".foo\n { \n left\n : 0; }",
440 ".foo\n { \n right\n : 0; }"
443 ".foo \n { \n left\n : 0; }",
444 ".foo \n { \n right\n : 0; }"
447 ".foo\n{\nleft\n:\n0;}",
448 ".foo\n{\nright\n:\n0;}"
451 ".foo\n.bar {\n\tleft: 0;\n}",
452 ".foo\n.bar {\n\tright: 0;\n}"
455 ".foo\t{\tleft\t:\t0;}",
456 ".foo\t{\tright\t:\t0;}"
459 // Guard against partial keys
461 '.foo { leftxx: 0; }',
462 '.foo { leftxx: 0; }'
465 '.foo { rightxx: 0; }',
466 '.foo { rightxx: 0; }'
472 * These cases are tested in one way only (format: actual, expected, msg).
473 * If both ways can be tested, either put both versions in here or move
474 * it to provideTransformCases().
476 public static function provideTransformAdvancedCases() {
478 # [ - _ . ] <-> [ left right ltr rtl ]
479 'foo.jpg' => 'foo.jpg',
480 'left.jpg' => 'right.jpg',
481 'ltr.jpg' => 'rtl.jpg',
483 'foo-left.png' => 'foo-right.png',
484 'foo_left.png' => 'foo_right.png',
485 'foo.left.png' => 'foo.right.png',
487 'foo-ltr.png' => 'foo-rtl.png',
488 'foo_ltr.png' => 'foo_rtl.png',
489 'foo.ltr.png' => 'foo.rtl.png',
491 'left-foo.png' => 'right-foo.png',
492 'left_foo.png' => 'right_foo.png',
493 'left.foo.png' => 'right.foo.png',
495 'ltr-foo.png' => 'rtl-foo.png',
496 'ltr_foo.png' => 'rtl_foo.png',
497 'ltr.foo.png' => 'rtl.foo.png',
499 'foo-ltr-left.gif' => 'foo-rtl-right.gif',
500 'foo_ltr_left.gif' => 'foo_rtl_right.gif',
501 'foo.ltr.left.gif' => 'foo.rtl.right.gif',
502 'foo-ltr_left.gif' => 'foo-rtl_right.gif',
503 'foo_ltr.left.gif' => 'foo_rtl.right.gif',
506 foreach ( $bgPairs as $left => $right ) {
507 # By default '-rtl' and '-left' etc. are not touched,
508 # Only when the appropiate parameter is set.
510 ".foo { background: url(images/$left); }",
511 ".foo { background: url(images/$left); }"
514 ".foo { background: url(images/$right); }",
515 ".foo { background: url(images/$right); }"
518 ".foo { background: url(images/$left); }",
519 ".foo { background: url(images/$right); }",
521 'swapLtrRtlInURL' => true,
522 'swapLeftRightInURL' => true,
526 ".foo { background: url(images/$right); }",
527 ".foo { background: url(images/$left); }",
529 'swapLtrRtlInURL' => true,
530 'swapLeftRightInURL' => true,
539 * Cases that are currently failing, but
540 * should be looked at in the future as enhancements and/or bug fix
542 public static function provideTransformBrokenCases() {
544 // Guard against selectors that look flippable
546 # <foo-left-x attr="x">
547 'foo-left-x[attr="x"] { width: 0; }',
548 'foo-left-x[attr="x"] { width: 0; }'
551 # <div class="foo" data-left="x">
552 '.foo[data-left="x"] { width: 0; }',
553 '.foo[data-left="x"] { width: 0; }'