From df411ddff014002c1a8fb0ab5d8bbaaf257297e8 Mon Sep 17 00:00:00 2001 From: Jakub Pawlowicz Date: Wed, 10 May 2017 15:19:07 +0200 Subject: [PATCH] Fixes #941 - breaking up vendor prefixed `animation`. Why: * Components of vendor prefixed `animation` were incorrectly derived from an unprefixed property leading to errors. --- History.md | 1 + lib/optimizer/level-2/break-up.js | 16 +++--- test/optimizer/level-2/break-up-test.js | 53 +++++++++++++++++++ .../properties/override-properties-test.js | 17 ++++++ 4 files changed, 79 insertions(+), 8 deletions(-) diff --git a/History.md b/History.md index 033014a1..7e642a31 100644 --- a/History.md +++ b/History.md @@ -2,6 +2,7 @@ ================== * Fixed issue [#940](https://github.com/jakubpawlowicz/clean-css/issues/940) - handling more `font` keywords. +* Fixed issue [#941](https://github.com/jakubpawlowicz/clean-css/issues/941) - breaking up vendor prefixed `animation`. [4.1.1 / 2017-05-08](https://github.com/jakubpawlowicz/clean-css/compare/v4.1.0...v4.1.1) ================== diff --git a/lib/optimizer/level-2/break-up.js b/lib/optimizer/level-2/break-up.js index b6c96105..b48ccf23 100644 --- a/lib/optimizer/level-2/break-up.js +++ b/lib/optimizer/level-2/break-up.js @@ -65,14 +65,14 @@ function _widthFilter(validator) { } function animation(property, compactable, validator) { - var duration = _wrapDefault('animation-duration', property, compactable); - var timing = _wrapDefault('animation-timing-function', property, compactable); - var delay = _wrapDefault('animation-delay', property, compactable); - var iteration = _wrapDefault('animation-iteration-count', property, compactable); - var direction = _wrapDefault('animation-direction', property, compactable); - var fill = _wrapDefault('animation-fill-mode', property, compactable); - var play = _wrapDefault('animation-play-state', property, compactable); - var name = _wrapDefault('animation-name', property, compactable); + var duration = _wrapDefault(property.name + '-duration', property, compactable); + var timing = _wrapDefault(property.name + '-timing-function', property, compactable); + var delay = _wrapDefault(property.name + '-delay', property, compactable); + var iteration = _wrapDefault(property.name + '-iteration-count', property, compactable); + var direction = _wrapDefault(property.name + '-direction', property, compactable); + var fill = _wrapDefault(property.name + '-fill-mode', property, compactable); + var play = _wrapDefault(property.name + '-play-state', property, compactable); + var name = _wrapDefault(property.name + '-name', property, compactable); var components = [duration, timing, delay, iteration, direction, fill, play, name]; var values = property.value; var value; diff --git a/test/optimizer/level-2/break-up-test.js b/test/optimizer/level-2/break-up-test.js index 514f25b8..ef867252 100644 --- a/test/optimizer/level-2/break-up-test.js +++ b/test/optimizer/level-2/break-up-test.js @@ -377,6 +377,59 @@ vows.describe(breakUp) assert.deepEqual(components[7].value, [['property-value', 'slidein'], ['property-value', ','], ['property-value', 'slideout']]); } }, + 'vendor prefixed': { + 'topic': function () { + return _breakUp([ + [ + 'property', + ['property-name', '-moz-animation'], + ['property-value', '3s'], + ['property-value', 'ease-in'], + ['property-value', '1s'], + ['property-value', '2'], + ['property-value', 'reverse'], + ['property-value', 'both'], + ['property-value', 'paused'], + ['property-value', 'slidein'] + ] + ]); + }, + 'has 8 components': function (components) { + assert.lengthOf(components, 8); + }, + 'has animation-duration': function (components) { + assert.deepEqual(components[0].name, '-moz-animation-duration'); + assert.deepEqual(components[0].value, [['property-value', '3s']]); + }, + 'has animation-timing-function': function (components) { + assert.deepEqual(components[1].name, '-moz-animation-timing-function'); + assert.deepEqual(components[1].value, [['property-value', 'ease-in']]); + }, + 'has animation-delay': function (components) { + assert.deepEqual(components[2].name, '-moz-animation-delay'); + assert.deepEqual(components[2].value, [['property-value', '1s']]); + }, + 'has animation-iteration-count': function (components) { + assert.deepEqual(components[3].name, '-moz-animation-iteration-count'); + assert.deepEqual(components[3].value, [['property-value', '2']]); + }, + 'has animation-direction': function (components) { + assert.deepEqual(components[4].name, '-moz-animation-direction'); + assert.deepEqual(components[4].value, [['property-value', 'reverse']]); + }, + 'has animation-fill-mode': function (components) { + assert.deepEqual(components[5].name, '-moz-animation-fill-mode'); + assert.deepEqual(components[5].value, [['property-value', 'both']]); + }, + 'has animation-play-state': function (components) { + assert.deepEqual(components[6].name, '-moz-animation-play-state'); + assert.deepEqual(components[6].value, [['property-value', 'paused']]); + }, + 'has animation-name': function (components) { + assert.deepEqual(components[7].name, '-moz-animation-name'); + assert.deepEqual(components[7].value, [['property-value', 'slidein']]); + } + } }, 'background': { 'inherit': { diff --git a/test/optimizer/level-2/properties/override-properties-test.js b/test/optimizer/level-2/properties/override-properties-test.js index 4a356c82..62f062cd 100644 --- a/test/optimizer/level-2/properties/override-properties-test.js +++ b/test/optimizer/level-2/properties/override-properties-test.js @@ -165,6 +165,23 @@ vows.describe(optimizeProperties) ] ]); } + }, + 'vendor prefixed animation shorthand and longhand': { + 'topic': function () { + return _optimize('.block{-webkit-animation:1s infinite slidein;-webkit-animation-timing-function:ease-in}'); + }, + 'into': function (properties) { + assert.deepEqual(properties, [ + [ + 'property', + ['property-name', '-webkit-animation', [[1, 7, undefined]]], + ['property-value', '1s', [[1, 25, undefined]]], + ['property-value', 'ease-in', [[1, 79, undefined]]], + ['property-value', 'infinite', [[1, 28, undefined]]], + ['property-value', 'slidein', [[1, 37, undefined]]] + ] + ]); + } } }) .addBatch({ -- 2.34.1