diff --git a/lib/processor.js b/lib/processor.js index 1fc531f4b..91aeacfc9 100644 --- a/lib/processor.js +++ b/lib/processor.js @@ -712,7 +712,13 @@ class Processor { * Some rare old values, which is not in standard */ withHackValue(decl) { - return decl.prop === '-webkit-background-clip' && decl.value === 'text' + return ( + (decl.prop === '-webkit-background-clip' && decl.value === 'text') || + // Do not remove -webkit-box-orient when -webkit-line-clamp is present. + // https://github.com/postcss/autoprefixer/issues/1510 + (decl.prop === '-webkit-box-orient' && + decl.parent.some(d => d.prop === '-webkit-line-clamp')) + ) } } diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js index 3d46b72a4..b94deae99 100644 --- a/test/autoprefixer.test.js +++ b/test/autoprefixer.test.js @@ -1178,8 +1178,10 @@ test('supports text-decoration shorthand', () => { test('supports -webkit-line-clamp', () => { let input = read('webkit-line-clamp') + let output = read('webkit-line-clamp.out') let result = postcss([cleaner]).process(input) - equal(result.css, input) + + equal(universalizer(result.css), universalizer(output)) equal(result.warnings().length, 0) }) diff --git a/test/cases/webkit-line-clamp.css b/test/cases/webkit-line-clamp.css index 1cb0ae101..943bcf5fc 100644 --- a/test/cases/webkit-line-clamp.css +++ b/test/cases/webkit-line-clamp.css @@ -5,3 +5,34 @@ -webkit-box-orient: vertical; -webkit-line-clamp: 2; } + +.simple-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.clamp-with-flex-direction { + flex-direction: column; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.clamp-with-flex-direction-and-box-direction { + flex-direction: column; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-line-clamp: 2; +} + +.clamp-display-webkit-box-only { + display: -webkit-box; + -webkit-line-clamp: 2; +} + +.clamp-display-webkit-box-orient-vertical-only { + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} diff --git a/test/cases/webkit-line-clamp.out.css b/test/cases/webkit-line-clamp.out.css new file mode 100644 index 000000000..10a12c849 --- /dev/null +++ b/test/cases/webkit-line-clamp.out.css @@ -0,0 +1,37 @@ +.limit-text { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.simple-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.clamp-with-flex-direction { + flex-direction: column; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.clamp-with-flex-direction-and-box-direction { + flex-direction: column; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.clamp-display-webkit-box-only { + display: -webkit-box; + -webkit-line-clamp: 2; +} + +.clamp-display-webkit-box-orient-vertical-only { + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +}