diff --git a/lib/hacks/gradient.js b/lib/hacks/gradient.js index cd92f53d0..a42abeac8 100644 --- a/lib/hacks/gradient.js +++ b/lib/hacks/gradient.js @@ -148,6 +148,27 @@ class Gradient extends Value { return params; } + /** + * Look for at word + */ + isRadial(params) { + let state = 'before'; + for ( const param of params ) { + if ( state === 'before' && param.type === 'space' ) { + state = 'at'; + } else if ( state === 'at' && param.value === 'at' ) { + state = 'after'; + } else if ( state === 'after' && param.type === 'space' ) { + return true; + } else if ( param.type === 'div' ) { + break; + } else { + state = 'before'; + } + } + return false; + } + /** * Change new direction to old */ @@ -157,7 +178,7 @@ class Gradient extends Value { this.fixDirection(params); } else if (params[0].value.indexOf('deg') !== -1) { this.fixAngle(params); - } else if (params[2] && params[2].value === 'at') { + } else if (this.isRadial(params)) { this.fixRadial(params); } } @@ -195,12 +216,24 @@ class Gradient extends Value { * Fix radial direction syntax */ fixRadial(params) { - const first = params[0]; + const first = []; const second = []; - let i; + let a, b, c, i, next; + + for (i = 0; i < params.length - 2; i++) { + a = params[i]; + b = params[i + 1]; + c = params[i + 2]; + if (a.type === 'space' && b.value === 'at' && c.type === 'space') { + next = i + 3; + break; + } else { + first.push(a); + } + } let div; - for (i = 4; i < params.length; i++) { + for (i = next; i < params.length; i++) { if (params[i].type === 'div') { div = params[i]; break; @@ -209,7 +242,7 @@ class Gradient extends Value { } } - params.splice(0, i, ...second, div, first); + params.splice(0, i, ...second, div, ...first); } revertDirection(word) { diff --git a/test/cases/gradient.css b/test/cases/gradient.css index 0b8437f25..b9d6692cb 100644 --- a/test/cases/gradient.css +++ b/test/cases/gradient.css @@ -117,3 +117,11 @@ div { radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50%/cover; } + +.multiradial { + mask-image: radial-gradient(circle closest-corner at 100% 50%, #000, transparent); +} + +.broken { + mask-image: radial-gradient(white, black); +} diff --git a/test/cases/gradient.out.css b/test/cases/gradient.out.css index c4a67c4b6..e3391ebef 100644 --- a/test/cases/gradient.out.css +++ b/test/cases/gradient.out.css @@ -169,8 +169,8 @@ div { } .cover { - background: -webkit-radial-gradient(ellipse cover at center, white, black); - background: -o-radial-gradient(ellipse cover at center, white, black); + background: -webkit-radial-gradient(center, ellipse cover, white, black); + background: -o-radial-gradient(center, ellipse cover, white, black); background: radial-gradient(ellipse cover at center, white, black); } @@ -194,13 +194,23 @@ div { } .background-advanced { - background: -webkit-radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), + background: -webkit-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -webkit-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50%/cover; - background: -o-radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), + background: -o-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -o-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50%/cover; background: radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50%/cover; } + +.multiradial { + -webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, #000, transparent); + mask-image: radial-gradient(circle closest-corner at 100% 50%, #000, transparent); +} + +.broken { + -webkit-mask-image: -webkit-radial-gradient(white, black); + mask-image: radial-gradient(white, black); +}