From ac66aaf6d1abcf5f4a35486f43dee2ef0f9708a5 Mon Sep 17 00:00:00 2001 From: Jakub Pawlowicz Date: Mon, 16 Jan 2017 17:55:38 +0100 Subject: [PATCH] Fixes #859 - avoids `-webkit-border-radius` optimizations. Why: * Apparently it doesn't support shortening 4 values to 2, as the latter is taken as a horizontal + vertical radius in all corners; * disabling any optimizations as a precaution; * see http://jsfiddle.net/qnGKj/2881/ --- History.md | 5 +++++ lib/optimizer/level-2/compactable.js | 15 +++++---------- test/fixtures/big-min.css | 14 +++++++------- test/integration-test.js | 4 ++-- test/optimizer/level-2/break-up-test.js | 10 +++++----- .../properties/merge-into-shorthands-test.js | 17 +++++++++++++++++ 6 files changed, 41 insertions(+), 24 deletions(-) diff --git a/History.md b/History.md index ba5105ca..8ee6e691 100644 --- a/History.md +++ b/History.md @@ -48,6 +48,11 @@ * Fixed issue [#857](https://github.com/jakubpawlowicz/clean-css/issues/857) - normalizes CleanCSS API interface. * Fixed issue [#863](https://github.com/jakubpawlowicz/clean-css/issues/863) - adds `transform` callback for custom optimizations. +[3.4.24 / 2017-xx-xx](https://github.com/jakubpawlowicz/clean-css/compare/v3.4.23...3.4) +================== + +* Fixed issue [#859](https://github.com/jakubpawlowicz/clean-css/issues/859) - avoid `-webkit-border-radius` optimizations. + [3.4.23 / 2016-12-17](https://github.com/jakubpawlowicz/clean-css/compare/v3.4.22...v3.4.23) ================== diff --git a/lib/optimizer/level-2/compactable.js b/lib/optimizer/level-2/compactable.js index a67df00e..9cf334d4 100644 --- a/lib/optimizer/level-2/compactable.js +++ b/lib/optimizer/level-2/compactable.js @@ -187,8 +187,7 @@ var compactable = { defaultValue: '0', vendorPrefixes: [ '-moz-', - '-o-', - '-webkit-' + '-o-' ] }, 'border-bottom-right-radius': { @@ -199,8 +198,7 @@ var compactable = { defaultValue: '0', vendorPrefixes: [ '-moz-', - '-o-', - '-webkit-' + '-o-' ] }, 'border-bottom-style': { @@ -304,8 +302,7 @@ var compactable = { shorthand: true, vendorPrefixes: [ '-moz-', - '-o-', - '-webkit-' + '-o-' ] }, 'border-right': { @@ -402,8 +399,7 @@ var compactable = { defaultValue: '0', vendorPrefixes: [ '-moz-', - '-o-', - '-webkit-' + '-o-' ] }, 'border-top-right-radius': { @@ -414,8 +410,7 @@ var compactable = { defaultValue: '0', vendorPrefixes: [ '-moz-', - '-o-', - '-webkit-' + '-o-' ] }, 'border-top-style': { diff --git a/test/fixtures/big-min.css b/test/fixtures/big-min.css index aad18a3c..c72d406f 100644 --- a/test/fixtures/big-min.css +++ b/test/fixtures/big-min.css @@ -1936,7 +1936,7 @@ body.auth-unlogged #core-liberation .form-monlibe-unlogged form{opacity:.3} #core-liberation .block-comments .block-content .comment_reply_links .comment_flag,#core-liberation .block-comments .block-content .comment_reply_links .comment_post_new{display:none;float:right;margin-right:10px;padding-top:5px} #core-liberation .block-comments .block-content .comment_reply_links .comment_flag .icon{position:static;display:block;width:13px;height:12px;float:left;background-image:url(http://s0.libe.com/libe/img/common/_sprites_icons/icons.png?9914d0d70a49);background-repeat:no-repeat;background-position:-33px -2px;margin:3px 6px 0 0} #core-liberation .block-comments .block-content .comment_reply_links .comment_flag:hover .icon{background-position:-33px -18px} -#core-liberation .block-comments .block-content .comment_reply_links .comment_reply{display:none;float:right;padding:5px 10px 7px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#878787} +#core-liberation .block-comments .block-content .comment_reply_links .comment_reply{display:none;float:right;padding:5px 10px 7px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px 5px 5px 5px;background-color:#878787} #core-liberation .block-comments .block-content .comment_libe>.comment_outer .meta .icon{position:absolute;right:0;top:0;display:block;width:36px;height:13px;background:url(http://s0.libe.com/libe/img/common/_sprites_icons/icons.png?9914d0d70a49) 0 -84px no-repeat} #core-liberation .block-comments .block-content .comment_libe>.comment_outer .meta .details,#core-liberation .block-comments .block-content .comment_libe>.comment_outer .meta .note,#core-liberation .block-comments .block-content .comment_libe>.comment_outer .meta .who{padding-right:41px} #core-liberation .block-comments .block-content .is_removed>.comment_outer{padding:3px 8px 5px} @@ -2182,15 +2182,15 @@ a.god:hover{text-decoration:none} #core-liberation .block-item .cartridge-basic-bubble .btn-comment{width:100px} .btn-basic a,.btn-basic span{display:block;padding:2px 1px 4px;text-decoration:none;text-align:center;font-size:11px;border:1px solid} form .btn-basic input[type=button],form .btn-basic input[type=reset],form .btn-basic input[type=submit]{border:1px solid;padding:0 10px 4px;height:26px;cursor:pointer;cursor:hand;font-size:11px;font-family:Verdana,sans-serif} -.btn-laune a,.btn-laune span,.btn-monlibe a,.btn-monlibe span,.btn-zoneabo a,.btn-zoneabo span{display:block;padding:5px 5px 7px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none} -form .btn-laune input[type=button],form .btn-laune input[type=reset],form .btn-laune input[type=submit],form .btn-monlibe input[type=button],form .btn-monlibe input[type=reset],form .btn-monlibe input[type=submit],form .btn-zoneabo input[type=button],form .btn-zoneabo input[type=reset],form .btn-zoneabo input[type=submit]{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:0 10px 3px;height:25px;cursor:pointer;cursor:hand;font-size:12px;font-family:Verdana,sans-serif;border:0} +.btn-laune a,.btn-laune span,.btn-monlibe a,.btn-monlibe span,.btn-zoneabo a,.btn-zoneabo span{display:block;padding:5px 5px 7px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px 5px 5px 5px;text-decoration:none} +form .btn-laune input[type=button],form .btn-laune input[type=reset],form .btn-laune input[type=submit],form .btn-monlibe input[type=button],form .btn-monlibe input[type=reset],form .btn-monlibe input[type=submit],form .btn-zoneabo input[type=button],form .btn-zoneabo input[type=reset],form .btn-zoneabo input[type=submit]{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px 5px 5px 5px;padding:0 10px 3px;height:25px;cursor:pointer;cursor:hand;font-size:12px;font-family:Verdana,sans-serif;border:0} form .btn-monlibe input[type=reset]{opacity:.9} -.btn-rounded-degraded a,.btn-rounded-degraded span{display:block;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:7px 14px 11px;text-decoration:none;text-align:center;font-size:13px;font-weight:700} +.btn-rounded-degraded a,.btn-rounded-degraded span{display:block;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px 5px 5px 5px;padding:7px 14px 11px;text-decoration:none;text-align:center;font-size:13px;font-weight:700} .btn-rounded-degraded a:hover,.btn-rounded-degraded span:hover{text-decoration:none!important} #bar-liberation #login-box-content p.forgot-password a:hover,#bar-liberation #personal-options-content ul li a:hover,#bar-liberation .content .activities-stream a:hover,#bar-liberation .content ul.list li a,#bar-liberation .content ul.list li a:hover,#core-liberation .block-activities .block-content ul li a,#core-liberation .block-activities .block-content ul li a:hover,.site-liberation .block-call-items .mini-tpl .whosaid h5 a.theme:hover,.site-liberation .block-call-items .tpl-search-results h4 a:hover span,.site-liberation a:hover,.site-liberation a:hover h2,.site-liberation a:hover h3,.site-liberation a:hover h4,.site-liberation a:hover h5,.site-liberation a:hover h6,.site-liberation a:hover p{text-decoration:underline} -form .btn-rounded-degraded input[type=button],form .btn-rounded-degraded input[type=submit]{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:0;padding:0 10px 6px;height:35px;cursor:pointer;cursor:hand;font-size:13px;font-family:Verdana,sans-serif;font-weight:700} +form .btn-rounded-degraded input[type=button],form .btn-rounded-degraded input[type=submit]{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px 5px 5px 5px;border:0;padding:0 10px 6px;height:35px;cursor:pointer;cursor:hand;font-size:13px;font-family:Verdana,sans-serif;font-weight:700} form .btn-rounded-degraded input[type=button]:focus,form .btn-rounded-degraded input[type=button]:hover,form .btn-rounded-degraded input[type=submit]:focus,form .btn-rounded-degraded input[type=submit]:hover{text-decoration:none} -.btn-read-digitalpaper{display:block;border:1px solid;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 7px 7px} +.btn-read-digitalpaper{display:block;border:1px solid;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px 3px 3px 3px;padding:5px 7px 7px} .btn-read-digitalpaper a,.btn-read-digitalpaper span{display:block;min-height:32px;background:url(http://s0.libe.com/libe/img/common/reader_picto.png?8fdcc4850538) right top no-repeat;padding-right:50px;font-size:12px} #core-liberation .pagination{float:none;margin-bottom:14px;margin-top:21px;border-top:1px dotted;border-bottom:1px dotted;padding-top:3px;text-align:center} #core-liberation .pagination .first{float:left;background-image:url(http://s0.libe.com/libe/img/common/bg-search-pagination-first.png?71b3279ad5d6);background-repeat:no-repeat;background-position:0 5px;margin-left:10px;padding-left:20px} @@ -2271,7 +2271,7 @@ body.init-bar-is-closed #bar-liberation{height:15px} #bar-liberation .content .login{left:29px;width:1037px;z-index:10020} #bar-liberation .content .login h3{font-family:Verdana,sans-serif;font-weight:400;font-size:12px;padding:12px 10px 0} #page-paywall .content .arguments .arg .price,#page-paywall .content .arguments .arg h4,#page-paywall .content .video h5,.site-liberation h1,.site-liberation h2,.site-liberation h3,.site-liberation h4{font-family:Georgia,"Times New Roman",Times,serif} -#bar-liberation .content .login a.subscribe{position:absolute;display:block;top:10px;right:230px;padding:3px 10px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px} +#bar-liberation .content .login a.subscribe{position:absolute;display:block;top:10px;right:230px;padding:3px 10px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px 5px 5px 5px} #page-404 form,#page-paywall .content .form-login form p input[type=password]:focus,#page-paywall .content .form-login form p input[type=text]:focus{border:1px solid} #bar-liberation .content .login a.subscribe:hover{text-decoration:none;background-color:#3c3c3c} #bar-liberation .content .login span{position:absolute;display:block;top:13px;right:205px} diff --git a/test/integration-test.js b/test/integration-test.js index 40f3a302..b182be43 100644 --- a/test/integration-test.js +++ b/test/integration-test.js @@ -756,7 +756,7 @@ vows.describe('integration tests') ], 'border-radius - same 4 values with vendor prefixes': [ 'div{-moz-border-radius:3px 3px 3px 3px;-o-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px}', - 'div{-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}' + 'div{-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px}' ], 'padding - same pairs': [ 'div{padding:15.5em 10.5em 15.5em 10.5em}', @@ -780,7 +780,7 @@ vows.describe('integration tests') ], 'border-radius - same 3 values with one vendor prefixe': [ 'div{-webkit-border-radius:3px 3px 3px;border-radius:3px 3px 3px}', - 'div{-webkit-border-radius:3px;border-radius:3px}' + 'div{-webkit-border-radius:3px 3px 3px;border-radius:3px}' ], 'border-color - same 2nd and 4th value as rgb': [ 'div{border-color:rgb(0,0,0) rgb(34,0,0) rgb(255,0,0) rgb(34,0,0)}', diff --git a/test/optimizer/level-2/break-up-test.js b/test/optimizer/level-2/break-up-test.js index 53a65be1..92dcbf69 100644 --- a/test/optimizer/level-2/break-up-test.js +++ b/test/optimizer/level-2/break-up-test.js @@ -572,7 +572,7 @@ vows.describe(breakUp) return _breakUp([ [ 'property', - ['property-name', '-webkit-border-radius'], + ['property-name', '-moz-border-radius'], ['property-value', '0px'], ['property-value', '1px'], ['property-value', '2px'], @@ -586,19 +586,19 @@ vows.describe(breakUp) assert.lengthOf(components, 4); }, 'has border-top-left-radius': function (components) { - assert.equal(components[0].name, '-webkit-border-top-left-radius'); + assert.equal(components[0].name, '-moz-border-top-left-radius'); assert.deepEqual(components[0].value, [['property-value', '0px'], ['property-value', '1px']]); }, 'has border-top-right-radius': function (components) { - assert.equal(components[1].name, '-webkit-border-top-right-radius'); + assert.equal(components[1].name, '-moz-border-top-right-radius'); assert.deepEqual(components[1].value, [['property-value', '1px'], ['property-value', '4px']]); }, 'has border-bottom-right-radius': function (components) { - assert.equal(components[2].name, '-webkit-border-bottom-right-radius'); + assert.equal(components[2].name, '-moz-border-bottom-right-radius'); assert.deepEqual(components[2].value, [['property-value', '2px'], ['property-value', '1px']]); }, 'has border-bottom-left': function (components) { - assert.equal(components[3].name, '-webkit-border-bottom-left-radius'); + assert.equal(components[3].name, '-moz-border-bottom-left-radius'); assert.deepEqual(components[3].value, [['property-value', '1px'], ['property-value', '4px']]); } }, diff --git a/test/optimizer/level-2/properties/merge-into-shorthands-test.js b/test/optimizer/level-2/properties/merge-into-shorthands-test.js index 30642bb2..6b52b7bf 100644 --- a/test/optimizer/level-2/properties/merge-into-shorthands-test.js +++ b/test/optimizer/level-2/properties/merge-into-shorthands-test.js @@ -257,6 +257,23 @@ vows.describe(optimizeProperties) ]); } }, + 'skipping -webkit-border-radius optimizations': { + 'topic': function () { + return _optimize('p{-webkit-border-radius:7px 3px 7px 3px}'); + }, + 'into': function (properties) { + assert.deepEqual(properties, [ + [ + 'property', + ['property-name', '-webkit-border-radius', [[1, 2, undefined]]], + ['property-value', '7px', [[1, 24, undefined]]], + ['property-value', '3px', [[1, 28, undefined]]], + ['property-value', '7px', [[1, 32, undefined]]], + ['property-value', '3px', [[1, 36, undefined]]] + ] + ]); + } + }, 'shorthand multiple !important': { 'topic': function () { return _optimize('a{border-color:#123 !important;border-top-color: #456 !important}'); -- 2.34.1