{
"preserve comments": {
"cases": [
[
"/* left /* right */left: 10px",
"/* left /* right */right: 10px"
],
[
"/*left*//*left*/left: 10px",
"/*left*//*left*/right: 10px"
],
[
"/* Going right is cool */\n#test {left: 10px}",
"/* Going right is cool */\n#test {right: 10px}"
],
[
"/* padding-right 1 2 3 4 */\n#test {left: 10px}\n/*right*/",
"/* padding-right 1 2 3 4 */\n#test {right: 10px}\n/*right*/"
],
[
"/** Two line comment\n * left\n \\*/\n#test {left: 10px}",
"/** Two line comment\n * left\n \\*/\n#test {right: 10px}"
]
]
},
"flip position": {
"cases": [
[
".foo { left: 10px; }",
".foo { right: 10px; }"
],
[
".foo { left: 10px !important; }",
".foo { right: 10px !important; }"
]
]
},
"flip negative values": {
"cases": [
[
".foo { left:-1.5em; }",
".foo { right:-1.5em; }"
],
[
".foo { left:-.75em; }",
".foo { right:-.75em; }"
],
[
".foo { padding: 1px 2px 3px -4px; }",
".foo { padding: 1px -4px 3px 2px; }"
]
]
},
"flip four value notation": {
"cases": [
[
".foo { padding: .25em 0ex 0pt 15px; }",
".foo { padding: .25em 15px 0pt 0ex; }"
],
[
".foo { padding: 1px 2% 3px 4.1grad; }",
".foo { padding: 1px 4.1grad 3px 2%; }"
],
[
".foo { padding: 1px auto 3px 2px; }",
".foo { padding: 1px 2px 3px auto; }"
],
[
".foo { padding: 1.1px 2.2px 3.3px 4.4px; }",
".foo { padding: 1.1px 4.4px 3.3px 2.2px; }"
],
[
".foo { padding: 1px auto 3px inherit; }",
".foo { padding: 1px inherit 3px auto; }"
],
[
".foo { padding: 1px 2px 3px 4px !important; }",
".foo { padding: 1px 4px 3px 2px !important; }"
],
[
".foo {padding:1px 2px 3px 4px !important}",
".foo {padding:1px 4px 3px 2px !important}"
],
[
".foo { padding: 1px 2px 3px 4px !important; color: red; }",
".foo { padding: 1px 4px 3px 2px !important; color: red; }"
],
[
".foo{padding:1px 2px 3px 4px}",
".foo{padding:1px 4px 3px 2px}"
],
[
" .foo { padding: 1px 2px 3px 4px ; } ",
" .foo { padding: 1px 4px 3px 2px ; } "
],
[
"#settings td p strong {}"
],
[
".foo barpx 0 2% { opacity: 0; }"
],
[
".foo { -x-unknown: a b c d; }"
],
[
".foo { -x-unknown: 1px 2px 3px 4px; }"
],
[
".foo { -x-unknown: 1px 2px 3px 4px 5px; }"
]
]
},
"flip direction": {
"cases": [
[
".foo { direction: ltr; }",
".foo { direction: rtl; }"
],
[
"input { direction: rtl; }",
"input { direction: ltr; }"
],
[
"body { direction: rtl; }",
"body { direction: ltr; }"
],
[
"body { padding: 10px; direction: rtl; }",
"body { padding: 10px; direction: ltr; }"
],
[
".foo, body, input { direction: rtl; }",
".foo, body, input { direction: ltr; }"
],
[
"body { direction: rtl; } .myClass { direction: ltr; }",
"body { direction: ltr; } .myClass { direction: rtl; }"
],
[
"body{\n direction: rtl\n}",
"body{\n direction: ltr\n}"
]
]
},
"flip float": {
"cases": [
[
".foo { float: left; }",
".foo { float: right; }"
],
[
".foo { float: left !important; }",
".foo { float: right !important; }"
],
[
".foo { clear: left; }",
".foo { clear: right; }"
]
]
},
"flip padding": {
"cases": [
[
".foo { padding: 1px; }"
],
[
".foo { padding: 1px 2px; }"
],
[
".foo { padding: 1px 2px 3px; }"
],
[
".foo { padding: 1px 2px 3px 4px; }",
".foo { padding: 1px 4px 3px 2px; }"
],
[
".foo { padding: 1px 2px 3px 4px 5px; }"
],
[
".foo { padding: 1px 2px 3px 4px 5px 6px; }"
]
]
},
"flip padding-{edge}": {
"cases": [
[
".foo { padding-left: 0; }",
".foo { padding-right: 0; }"
]
]
},
"flip margin-{edge}": {
"cases": [
[
".foo { margin-left: 0; }",
".foo { margin-right: 0; }"
]
]
},
"flip cursor": {
"cases": [
[
".foo { cursor: w-resize; }",
".foo { cursor: e-resize; }"
],
[
".foo { cursor: sw-resize; }",
".foo { cursor: se-resize; }"
],
[
".foo { cursor: nw-resize; }",
".foo { cursor: ne-resize; }"
]
]
},
"flip text-align": {
"cases": [
[
".foo { text-align: left; }",
".foo { text-align: right; }"
]
]
},
"flip text-shadow": {
"cases": [
[
".foo { text-shadow: red 2px 0; }",
".foo { text-shadow: red -2px 0; }"
],
[
".foo { text-shadow: 2px 0 red; }",
".foo { text-shadow: -2px 0 red; }"
],
[
".foo { text-shadow: red 0 2px; }"
]
]
},
"flip box-shadow": {
"cases": [
[
".foo { box-shadow: -6px 3px 8px 5px rgba(0, 0, 0, 0.25); }",
".foo { box-shadow: 6px 3px 8px 5px rgba(0, 0, 0, 0.25); }"
],
[
".foo { box-shadow: inset -6px 3px 8px 5px rgba(0, 0, 0, 0.25); }",
".foo { box-shadow: inset 6px 3px 8px 5px rgba(0, 0, 0, 0.25); }"
],
[
".foo { box-shadow: inset .5em 0 0 white; }",
".foo { box-shadow: inset -.5em 0 0 white; }"
],
[
".foo { box-shadow: inset 0.5em 0 0 white; }",
".foo { box-shadow: inset -0.5em 0 0 white; }"
],
[
".foo { box-shadow: none; }"
],
[
".foo { -webkit-box-shadow: -1px 2px 3px 3px red; }",
".foo { -webkit-box-shadow: 1px 2px 3px 3px red; }"
],
[
".foo { -moz-box-shadow: -1px 2px 3px 3px red; }",
".foo { -moz-box-shadow: 1px 2px 3px 3px red; }"
],
[
".foo{box-shadow:-1px 2px 3px 3px red}",
".foo{box-shadow:1px 2px 3px 3px red}"
],
[
".foo { box-shadow: -1px 2px 3px 3px red ; }",
".foo { box-shadow: 1px 2px 3px 3px red ; }"
]
]
},
"flip border-{edge}": {
"cases": [
[
".foo { border-left: 0; }",
".foo { border-right: 0; }"
],
[
".foo { border-left: 1px solid red; }",
".foo { border-right: 1px solid red; }"
]
]
},
"flip border-{edge}-color": {
"cases": [
[
".foo { border-left-color: red; }",
".foo { border-right-color: red; }"
]
]
},
"flip border-{edge}-style": {
"cases": [
[
".foo { border-left-style: red; }",
".foo { border-right-style: red; }"
]
]
},
"flip border-color": {
"cases": [
[
".foo { border-color: red green blue white; }",
".foo { border-color: red white blue green; }"
],
[
".foo { border-color: red #f00 rgb(255, 0, 0) rgba(255, 0, 0, 0.5); }",
".foo { border-color: red rgba(255, 0, 0, 0.5) rgb(255, 0, 0) #f00; }"
],
[
".foo { border-color: red #f00 hsl(0, 100%, 50%) hsla(0, 100%, 50%, 0.5); }",
".foo { border-color: red hsla(0, 100%, 50%, 0.5) hsl(0, 100%, 50%) #f00; }"
]
]
},
"flip border-width": {
"cases": [
[
".foo { border-width: 1px 2px 3px 4px; }",
".foo { border-width: 1px 4px 3px 2px; }"
]
]
},
"flip border-style": {
"cases": [
[
".foo { border-style: none dotted dashed solid; }",
".foo { border-style: none solid dashed dotted; }"
]
]
},
"flip border-radius": {
"cases": [
[
".foo { border-radius: 1px; }"
],
[
".foo { border-radius: 1px 2px; }",
".foo { border-radius: 2px 1px; }"
],
[
".foo { border-radius: 1px 2px 3px 4px; }",
".foo { border-radius: 2px 1px 4px 3px; }"
],
[
".foo{border-radius:1px 2px 3px 4px}",
".foo{border-radius:2px 1px 4px 3px}"
],
[
".foo{ border-radius: 10px / 20px }"
],
[
".foo{ border-radius: 15px / 0 20px }",
".foo{ border-radius: 15px / 20px 0 }"
],
[
".foo{ border-radius: 1px 2px 3px 4px / 5px 6px 7px 8px }",
".foo{ border-radius: 2px 1px 4px 3px / 6px 5px 8px 7px }"
],
[
".foo{ border-radius: 0 !important }"
],
[
".foo{ border-radius: 1px 2px 3px 4px !important; }",
".foo{ border-radius: 2px 1px 4px 3px !important; }"
],
[
".foo { border-radius: 1px 2px 3px 4px ; }",
".foo { border-radius: 2px 1px 4px 3px ; }"
],
[
".foo { border-radius: 1px 2px 3px 4px 5px; }"
]
]
},
"flip border-top-{edge}-radius": {
"cases": [
[
".foo { border-top-left-radius: 0; }",
".foo { border-top-right-radius: 0; }"
]
]
},
"flip border-bottom-{edge}-radius": {
"cases": [
[
".foo { border-bottom-left-radius: 0; }",
".foo { border-bottom-right-radius: 0; }"
]
]
},
"flip background-position keywords": {
"cases": [
[
".foo { background-position: left top; }",
".foo { background-position: right top; }"
],
[
".foo { background: url(/foo/bar.png) left top; }",
".foo { background: url(/foo/bar.png) right top; }"
],
[
".foo { background: url(/foo/bar.png) no-repeat left top; }",
".foo { background: url(/foo/bar.png) no-repeat right top; }"
],
[
".foo { background: #000 url(/foo/bar.png) no-repeat left top; }",
".foo { background: #000 url(/foo/bar.png) no-repeat right top; }"
],
[
".foo { background-position: left -5px; }",
".foo { background-position: right -5px; }"
]
]
},
"flip background-position percentages": {
"cases": [
[
".foo { background-position: 77% 40%; }",
".foo { background-position: 23% 40%; }"
],
[
".foo { background-position: 2.3% 40%; }",
".foo { background-position: 97.7% 40%; }"
],
[
".foo { background-position: 2.3210% 40%; }",
".foo { background-position: 97.6790% 40%; }"
],
[
".foo { background-position: 0% 100%; }",
".foo { background-position: 100% 100%; }"
],
[
".foo { background-position: 77% -5px; }",
".foo { background-position: 23% -5px; }"
],
[
".foo { background-position: 0% 100% !important; }",
".foo { background-position: 100% 100% !important; }"
],
[
".foo{background-position: 0% 100%}",
".foo{background-position: 100% 100%}"
],
[
".foo { background-position: 0% 100% ; }",
".foo { background-position: 100% 100% ; }"
]
]
},
"do not flip background-position non-percentages": {
"cases": [
[
".foo { background-position: 0 5px; }"
],
[
".foo { background-position: 10px 20px; }"
],
[
".foo { background-position: 10px 40%; }"
],
[
".foo { background-position: 10px 2.3%; }"
]
]
},
"flip background percentages": {
"cases": [
[
".foo { background: url(/foo/bar.png) 77% 40%; }",
".foo { background: url(/foo/bar.png) 23% 40%; }"
],
[
".foo { background: url(/foo/bar.png) 77%; }",
".foo { background: url(/foo/bar.png) 23%; }"
],
[
".foo { background: url(/foo/bar.png) no-repeat 77% 40%; }",
".foo { background: url(/foo/bar.png) no-repeat 23% 40%; }"
],
[
".foo { background: #000 url(/foo/bar.png) no-repeat 77% 40%; }",
".foo { background: #000 url(/foo/bar.png) no-repeat 23% 40%; }"
],
[
".foo { background: #000 url(/foo/bar.png) no-repeat 77% 40%; }",
".foo { background: #000 url(/foo/bar.png) no-repeat 23% 40%; }"
],
[
".foo { background: 77% 40%; } .bar { background: 0% 100%; }",
".foo { background: 23% 40%; } .bar { background: 100% 100%; }"
],
[
".foo { background: url(/foo/bar.png) 77% 40% !important; }",
".foo { background: url(/foo/bar.png) 23% 40% !important; }"
],
[
".foo{background:url(/foo/bar.png) 77% 40%}",
".foo{background:url(/foo/bar.png) 23% 40%}"
],
[
".foo { background: url(/foo/bar.png) 77% 40% ; }",
".foo { background: url(/foo/bar.png) 23% 40% ; }"
]
]
},
"flip background-position-x percentages": {
"cases": [
[
".foo { background-position-x: 77%; }",
".foo { background-position-x: 23%; }"
],
[
".foo { background-position-x: 77% !important; }",
".foo { background-position-x: 23% !important; }"
],
[
".foo{background-position-x:77%}",
".foo{background-position-x:23%}"
],
[
".foo { background-position-x: 77% ; }",
".foo { background-position-x: 23% ; }"
]
]
},
"do not flip background-position-y": {
"cases": [
[
".foo { background-position-y: 40%; }"
]
]
},
"do not flip URLs when flags are off": {
"settings": {
"swapLtrRtlInUrl": false,
"swapLeftRightInUrl": false
},
"cases": [
[
"background: url(/foo/bar-left.png)"
],
[
"background: url(/foo/left-bar.png)"
],
[
"url(\"http://www.blogger.com/img/triangle_ltr.gif\")"
],
[
"url('http://www.blogger.com/img/triangle_ltr.gif')"
],
[
"url('http://www.blogger.com/img/triangle_ltr.gif' )"
],
[
"background: url(/foo/bar.left.png)"
],
[
"background: url(/foo/bar-rtl.png)"
],
[
"background: url(/foo/bar-rtl.png); right: 10px",
"background: url(/foo/bar-rtl.png); left: 10px"
],
[
"background: url(/foo/bar-right.png); direction: ltr",
"background: url(/foo/bar-right.png); direction: rtl"
],
[
"background: url(/foo/bar-rtl_right.png);right:10px; direction: ltr",
"background: url(/foo/bar-rtl_right.png);left:10px; direction: rtl"
]
]
},
"flip URLs when flags are on": {
"settings": {
"swapLtrRtlInUrl": true,
"swapLeftRightInUrl": true
},
"cases": [
[
"background: url(/foo/bar-right.png)",
"background: url(/foo/bar-left.png)"
],
[
"background: url(/foo/right-bar.png)",
"background: url(/foo/left-bar.png)"
],
[
"url(\"http://www.blogger.com/img/triangle_rtl.gif\")",
"url(\"http://www.blogger.com/img/triangle_ltr.gif\")"
],
[
"url('http://www.blogger.com/img/triangle_rtl.gif')",
"url('http://www.blogger.com/img/triangle_ltr.gif')"
],
[
"url('http://www.blogger.com/img/triangle_rtl.gif'\t)",
"url('http://www.blogger.com/img/triangle_ltr.gif'\t)"
],
[
"background: url(/foo/bar.right.png)",
"background: url(/foo/bar.left.png)"
],
[
"background: url(/foo/bright.png)"
],
[
"background: url(/foo/bar-ltr.png)",
"background: url(/foo/bar-rtl.png)"
],
[
"background: url(/foo/bar-ltr.png); right: 10px",
"background: url(/foo/bar-rtl.png); left: 10px"
],
[
"background: url(/foo/bar-left.png); direction: ltr",
"background: url(/foo/bar-right.png); direction: rtl"
],
[
"background: url(/foo/bar-ltr_left.png);right:10px; direction: ltr",
"background: url(/foo/bar-rtl_right.png);left:10px; direction: rtl"
]
]
},
"leave class names alone": {
"cases": [
[
".x-left { width: 0; }"
],
[
"#bright-left { width: 0; }"
],
[
"div.left:hover { width: 0; }"
],
[
"#bright-left,\n.foo { width: 0; }"
],
[
"#bright-left, .foo { width: 0; }"
],
[
"div.leftxx, div.leftxx { width: 0; }"
],
[
"div.left > span.right+span.left { width: 0; }"
],
[
".foo .left .bar { width: 0; }"
],
[
".foo .left .bar #myid { width: 0; }"
],
[
"foo-ltr[attr=x] { width: 0; }"
],
[
".a-foo.png { width: 0; }"
]
]
},
"leave unknown properties alone": {
"cases": [
[
".foo { xxleft: 10px; }"
],
[
".foo { xxright: 10px; }"
],
[
".foo { leftxx: 10px; }"
],
[
".foo { rightxx: 10px; }"
]
]
},
"flip multiple rules": {
"cases": [
[
"body { direction: ltr; float: left; } .foo { direction: ltr; float: left; }",
"body { direction: rtl; float: right; } .foo { direction: rtl; float: right; }"
]
]
},
"flip duplicate properties": {
"cases": [
[
".foo { float: left; float: right; float: left; }",
".foo { float: right; float: left; float: right; }"
]
]
},
"do not flip rules or properties with @noflip comments": {
"cases": [
[
"/* @noflip */ div { float: left; }"
],
[
"/*! @noflip */ div { float: left; }"
],
[
"/* @noflip */ div, .notme { float: left; }"
],
[
"/* @noflip */ div { float: left; } div { float: right; }",
"/* @noflip */ div { float: left; } div { float: left; }"
],
[
"/* @noflip */\ndiv { float: left; }\ndiv { float: right; }",
"/* @noflip */\ndiv { float: left; }\ndiv { float: left; }"
],
[
"div { float: right; /* @noflip */ float: left; }",
"div { float: left; /* @noflip */ float: left; }"
],
[
"div\n{ float: right;\n/* @noflip */\n float: left;\n; }",
"div\n{ float: left;\n/* @noflip */\n float: left;\n; }"
],
[
"div\n{ float: right;\n/* @noflip */\n text-align: left\n }",
"div\n{ float: left;\n/* @noflip */\n text-align: left\n }"
],
[
"div\n{ /* @noflip */\ntext-align: left;\nfloat: right\n\t}",
"div\n{ /* @noflip */\ntext-align: left;\nfloat: left\n\t}"
],
[
"/* @noflip */div{float:left;text-align:left;}div{float:right}",
"/* @noflip */div{float:left;text-align:left;}div{float:left}"
],
[
"/* @noflip */\ndiv{float:left;text-align:left;}a{foo:right}",
"/* @noflip */\ndiv{float:left;text-align:left;}a{foo:left}"
],
[
"/* @noflip */ div.foo[bar*=baz] { left: 10px; float: left; }"
],
[
"/* @noflip */ div.foo[bar^=baz] { left: 10px; float: left; }"
],
[
"/* @noflip */ div.foo[bar~=baz] { left: 10px; float: left; }"
],
[
"/* @noflip */ div.foo[bar=baz] { left: 10px; float: left; }"
],
[
"/* @noflip */ div.foo[bar*='baz{quux'] { left: 10px; float: left; }"
]
]
},
"do not flip gradient notation": {
"cases": [
[
".foo { background-image: -moz-linear-gradient(#326cc1, #234e8c); }"
],
[
".foo { background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#666666), to(#ffffff)); }"
]
]
}
}