├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── gulpfile.js ├── index.js ├── package.json └── test ├── fixtures ├── angular-fallback.css ├── angular-fallback.expect.css ├── angular.css ├── angular.expect.css ├── bottom.css ├── bottom.expect.css ├── color-format.css ├── color-format.expect.css ├── filter-not-warning.css ├── filter-not-warning.expect.css ├── filter.css ├── filter.expect.css ├── grad.css ├── grad.expect.css ├── horizontal-reverse.css ├── horizontal-reverse.expect.css ├── horizontal.css ├── horizontal.expect.css ├── invalid-color.css ├── invalid-color.expect.css ├── invalid-syntax.css ├── invalid-syntax.expect.css ├── left.css ├── left.expect.css ├── multi-background.css ├── multi-background.expect.css ├── multi-colorstops.css ├── multi-colorstops.expect.css ├── none.css ├── none.expect.css ├── old.css ├── old.expect.css ├── one-liner.css ├── one-liner.expect.css ├── option-angle-fallback.css ├── option-angle-fallback.expect.css ├── option-skip-multicolor.css ├── option-skip-multicolor.expect.css ├── rad.css ├── rad.expect.css ├── right.css ├── right.expect.css ├── sidecorner-fallback.css ├── sidecorner-fallback.expect.css ├── simple.css ├── simple.expect.css ├── standard.css ├── standard.expect.css ├── top.css ├── top.expect.css ├── turn.css ├── turn.expect.css ├── vertical-reverse.css └── vertical-reverse.expect.css └── test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.{json,yml}] 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-unused-expressions": [0], 4 | "no-underscore-dangle": [0], 5 | "quote-props": [2, "as-needed"], 6 | "no-multi-spaces": [0], 7 | "no-extra-parens": [2], 8 | "no-unused-vars": [2], 9 | "no-loop-func": [0], 10 | "key-spacing": [0], 11 | "no-shadow": [0], 12 | "max-len": [2, 120], 13 | "strict": [0], 14 | "indent": [2], 15 | "quotes": [2, "single", "avoid-escape"], 16 | "curly": [0] 17 | }, 18 | "env": { 19 | "mocha": true, 20 | "node": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | coverage/ 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | 3 | node_modules/ 4 | npm-debug.log 5 | 6 | test/ 7 | .travis.yml 8 | 9 | gulpfile.js 10 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - "4" 5 | - "6" 6 | - "node" 7 | after_script: "npm run coveralls" 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | 1.0.0 / 2017-05-07 3 | ================== 4 | 5 | * Update postcss to 6.0 6 | 7 | ### 0.2.6 - 2017-02-09 8 | 9 | - Add `options.skipWarnings`, fixed #12 10 | 11 | ### 0.2.5 - 2016-12-13 12 | 13 | - Fixed #11. 14 | 15 | ### 0.2.4 - 2016-02-29 16 | 17 | - Fixed #8. 18 | - Added invalid linear-gradient syntax warnings. 19 | - Added invalid color format warnings. 20 | 21 | ### 0.2.3 - 2016-02-19 22 | 23 | - Add support for direction without "to". by [@lencioni](https://github.com/lencioni) 24 | 25 | ### 0.2.2 - 2016-01-13 26 | 27 | - Add `skipMultiColor` option. 28 | 29 | ### 0.2.1 - 2015-12-21 30 | 31 | - Add supports for `rad, grad, turn` unit. 32 | 33 | ### 0.2.0 - 2015-12-20 34 | 35 | - Add some warning messages (#3) 36 | - Add `angleFallback` option 37 | - Change filter string format (#2) 38 | 39 | ### 0.1.1 - 2015-11-14 40 | 41 | - Replace gradient parser 42 | - Add angular gradient support 43 | - Add color format test case 44 | 45 | ### 0.1.0 - 2015-11-13 46 | 47 | - First release. 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2015 Kevin Yue 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PostCSS Filter Gradient 2 | 3 | [PostCSS] plugin for generating the old IE supported filter gradient. 4 | 5 | [![Build Status][ci-img]][ci] 6 | [![Coverage Status][co-img]][co] 7 | 8 | [PostCSS]: https://github.com/postcss/postcss 9 | [ci-img]: https://travis-ci.org/yuezk/postcss-filter-gradient.svg 10 | [ci]: https://travis-ci.org/yuezk/postcss-filter-gradient 11 | [co-img]: https://coveralls.io/repos/github/yuezk/postcss-filter-gradient/badge.svg?branch=master 12 | [co]: https://coveralls.io/github/yuezk/postcss-filter-gradient?branch=master 13 | 14 | ```css 15 | .foo { 16 | /* Input example */ 17 | background: linear-gradient(to bottom, #1e5799, #7db9e8); 18 | } 19 | ``` 20 | 21 | ```css 22 | .foo { 23 | /* Output example */ 24 | background: linear-gradient(to bottom, #1e5799, #7db9e8); 25 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 26 | } 27 | ``` 28 | 29 | ## Install 30 | 31 | For `postcss 6.x`: 32 | 33 | ```sh 34 | npm install postcss-filter-gradient --save-dev 35 | ``` 36 | 37 | and for `postcss 5.x` 38 | 39 | ```sh 40 | npm install postcss-filter-gradient@0.x --save-dev 41 | ``` 42 | 43 | ## Usage 44 | 45 | ```js 46 | postcss([ require('postcss-filter-gradient') ]) 47 | ``` 48 | 49 | ## Options 50 | 51 | ### angleFallback 52 | 53 | Default: `true` 54 | 55 | IE filter doesn't support angular gradient. By default, when processing the angular gradient, 56 | we will convert the angle to its closest direction. You can disable this feature by setting this option to `false`. 57 | 58 | ### skipMultiColor 59 | 60 | Default: `false` 61 | 62 | If set to `true`, we will not handle the rules which have multi color stops. It is useful when you want use a 63 | background color as fallback. 64 | 65 | ### skipWarnings 66 | 67 | Default: `false` 68 | 69 | If set to `true`, all warnings will be suppressed. 70 | 71 | ## Limitation 72 | 73 | The IE filter gradient only support horizontal and vertical directions, and only support two colors. So, if there are more 74 | than two colors in the color stops, we only pick the first and the last one. You can skip it by setting 75 | `option.skipMultiColor` to `true`. 76 | 77 | ## FAQ 78 | 79 | ### Does it support legacy gradient syntax? 80 | 81 | No. We only transform the standard `linear-gradient` syntax. 82 | 83 | You can use the [postcss-gradientfixer][postcss-gradientfixer] to unprefix it first. 84 | 85 | ### Does it support angluar gradient? 86 | 87 | Yes. This plugin only support `deg` unit. It will convert angular to the closest direction. For example, it convert `90deg` to `right` 88 | and convert `10deg` to `top`, positive angluar are also supported. 89 | 90 | See [PostCSS] docs for examples for your environment. 91 | 92 | ## [CHANGELOG](CHANGELOG.md) 93 | 94 | ## LICENSE 95 | 96 | [MIT](LICENSE) 97 | 98 | [postcss-gradientfixer]: https://github.com/hallvors/postcss-gradientfixer 99 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | var files = ['index.js', 'test/*.js', 'gulpfile.js']; 4 | 5 | gulp.task('lint', function () { 6 | var eslint = require('gulp-eslint'); 7 | return gulp.src(files) 8 | .pipe(eslint()) 9 | .pipe(eslint.format()) 10 | .pipe(eslint.failAfterError()); 11 | }); 12 | 13 | gulp.task('test', function () { 14 | var mocha = require('gulp-mocha'); 15 | return gulp.src('test/*.js', { read: false }) 16 | .pipe(mocha()); 17 | }); 18 | 19 | gulp.task('default', ['lint', 'test']); 20 | 21 | gulp.task('watch', function () { 22 | gulp.watch(files, ['lint', 'test']); 23 | }); 24 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | var list = postcss.list; 3 | var filterGradient = require('filter-gradient'); 4 | var DECL_FILTER = /^background(-image)?$/; 5 | 6 | function hasFilter(rule) { 7 | var has = false; 8 | rule.walkDecls(/(-ms-)?filter/, function () { 9 | has = true; 10 | }); 11 | return has; 12 | } 13 | 14 | function parseGradient(input) { 15 | // match 0 and any number with unit 16 | var rAngle = /((?:[+-]?\d*\.?\d+)(deg|grad|rad|turn)|0)/i; 17 | // match side and any corner, in browser, 18 | // `top right` and `right top` are the same, 19 | // so we should put this situation into consideration 20 | var rSideCorner = new RegExp( 21 | '(' + // 1 22 | '(?:to\\s+)?' + 23 | '(?:' + 24 | '(?:left|right|top|bottom)' + 25 | '|' + 26 | '(?:' + 27 | '(?:' + // left top, left bottom, right top, right bottom 28 | '(?:left|right)\\s+(?:top|bottom)' + 29 | ')' + 30 | '|' + 31 | '(?:' + // top left, top right, bottom left, bottom right 32 | '(?:top|bottom)\\s+(?:left|right)' + 33 | ')' + 34 | ')' + 35 | ')' + 36 | ')' + // end 1 37 | '(?=\\s*,)' 38 | ); 39 | 40 | // match color stops, the color format is not very precise 41 | var rColorStops = /(#[0-9a-f]{3,6}|(?:hsl|rgb)a?\(.+?\)|\w+)(?:\s+((?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?))?/gi; 42 | // the final gradient line regexp 43 | var rGradientLine = new RegExp(rAngle.source + '|' + rSideCorner.source, 'i'); 44 | var rGradient = new RegExp( 45 | 'linear-gradient\\(\\s*' + 46 | '(?:(' + rGradientLine.source + ')\\s*,\\s*)?' + // match gradient line 47 | '(' + rColorStops.source + '(?:\\s*,\\s*' + rColorStops.source + ')+)' + // match color stops 48 | '\\s*\\)', 49 | 'i'); 50 | 51 | var gradientMatch = rGradient.exec(input); 52 | 53 | if (!gradientMatch) { 54 | return null; 55 | } 56 | 57 | // remove `linear-gradient(` and `)` 58 | var gradientStr = gradientMatch[0].slice(16, -1).trim(); 59 | var position = gradientStr.match('^' + rGradientLine.source, 'i') || ['', null, 'deg', 'to bottom']; 60 | var angle = position[1]; 61 | var sideCorner = position[3]; 62 | var unit = position[2]; 63 | var stops = []; 64 | var stop; 65 | 66 | // remove the gradient line 67 | var str = gradientStr.slice(position[0].length); 68 | 69 | while (stop = rColorStops.exec(str)) { // eslint-disable-line 70 | stops.push({ 71 | color: stop[1], 72 | position: stop[2] 73 | }); 74 | } 75 | 76 | return { 77 | angle: { value: angle, unit: unit }, 78 | sideCorner: sideCorner, 79 | colorStops: stops 80 | }; 81 | } 82 | 83 | function normalizeAngle(value, unit) { 84 | var num = parseFloat(value); 85 | var fullMap = { 86 | grad: 400, 87 | rad: 2, 88 | turn: 1, 89 | deg: 360 90 | }; 91 | unit = (unit || 'deg').toLowerCase(); 92 | 93 | return num / fullMap[unit] * 360; 94 | } 95 | 96 | function angleToDirection(angle) { 97 | var result = {}; 98 | var direction; 99 | var isFallback; 100 | var count; 101 | 102 | isFallback = angle % 90 !== 0; 103 | // handle the negtive value 104 | angle = (angle % 360 + 360) % 360; 105 | count = angle / 45; 106 | 107 | if (count <= 1) { 108 | direction = 'top'; 109 | } else if (count <= 3) { 110 | direction = 'right'; 111 | } else if (count <= 5) { 112 | direction = 'bottom'; 113 | } else if (count <= 7) { 114 | direction = 'left'; 115 | } else { 116 | direction = 'top'; 117 | } 118 | 119 | result.direction = direction; 120 | 121 | if (isFallback) { 122 | result.isFallback = true; 123 | result.message = 124 | 'IE filter doesn\'t support angular gradient, ' + 125 | 'we use the closest side as the fallback.'; 126 | } 127 | 128 | return result; 129 | } 130 | 131 | // Get the gradient direction: left, right, top or bottom 132 | function getDirection(gradient) { 133 | var segs; 134 | var angle; 135 | var result = {}; 136 | 137 | if (gradient.sideCorner) { 138 | segs = gradient.sideCorner.split(/\s+/); 139 | 140 | var to = segs[0] === 'to'; 141 | if (to) { 142 | // sideCorner starts with "to" so we shift it off since we don't 143 | // need this element anymore, and continue with generating the 144 | // gradient in the normal direction. 145 | segs.shift(); 146 | } else { 147 | // sideCorner does not start with "to", so we need to reverse the 148 | // direction. 149 | var reverseDirections = { 150 | top: 'bottom', 151 | bottom: 'top', 152 | left: 'right', 153 | right: 'left' 154 | }; 155 | segs[0] = reverseDirections[segs[0]]; 156 | } 157 | 158 | result.direction = segs[0]; 159 | // side corner is `top right` or `bottom left` etc. 160 | if (segs.length > 1) { 161 | // fallback to one direction 162 | result.isFallback = true; 163 | result.message = 164 | 'IE filter doesn\'t support side corner gradient, ' + 165 | 'we use the first side of the side corner as fallback.'; 166 | } 167 | } else { 168 | angle = normalizeAngle(gradient.angle.value, gradient.angle.unit); 169 | result = angleToDirection(angle); 170 | } 171 | 172 | return result; 173 | } 174 | 175 | function gradientToFilter(gradient) { 176 | var obj = parseGradient(gradient); 177 | 178 | // The gradient value is not valid 179 | if (!obj) { 180 | return { 181 | success: false, 182 | message: '`' + gradient + '` is not a valid linear gradient value.' 183 | }; 184 | } 185 | 186 | var startColor = obj.colorStops[0].color; 187 | var endColor = obj.colorStops.slice(-1)[0].color; 188 | var result = getDirection(obj); 189 | var direction = result.direction; 190 | var type; 191 | var tmp; 192 | var filterString; 193 | 194 | // Swap color if needed; 195 | if (/top|left/i.test(direction)) { 196 | tmp = startColor; 197 | startColor = endColor; 198 | endColor = tmp; 199 | } 200 | // 0: vertical, 1:horizontal 201 | type = /top|bottom/i.test(direction) ? 0 : 1; 202 | 203 | try { 204 | filterString = filterGradient(startColor, endColor, type); 205 | } catch (e) { 206 | // The color format is not valid 207 | return { 208 | success: false, 209 | message: e.message + ' in `' + gradient + '`' 210 | }; 211 | } 212 | 213 | return { 214 | success: true, 215 | string: filterString, 216 | isMultiColor: obj.colorStops.length > 2, 217 | isFallback: result.isFallback, 218 | message: result.message 219 | }; 220 | } 221 | 222 | function getGradientsFromDecl(decl) { 223 | return list.comma(decl.value).filter(function (seg) { 224 | // Only support the standard linear-gradient syntax 225 | return seg.indexOf('linear-gradient') === 0; 226 | }); 227 | } 228 | 229 | function getGradientFromRule(rule) { 230 | var gradient = {}; 231 | rule.walkDecls(DECL_FILTER, function (decl) { 232 | var gradients = getGradientsFromDecl(decl); 233 | var len = gradients.length; 234 | // Only select the first gradienat if there more than one gradients 235 | if (len) { 236 | gradient.value = gradients[0].trim(); 237 | gradient.decl = decl; 238 | 239 | if (len > 1) { 240 | gradient.warnings = 241 | 'IE filter doesn\'t support multiple gradients, ' + 242 | 'we pick the first as fallback.'; 243 | } 244 | } 245 | }); 246 | 247 | return gradient; 248 | } 249 | 250 | module.exports = postcss.plugin('postcss-filter-gradient', function (opts) { 251 | opts = opts || {}; 252 | opts.angleFallback = opts.angleFallback !== false; 253 | opts.skipMultiColor = opts.skipMultiColor === true; 254 | opts.skipWarnings = opts.skipWarnings === true; 255 | 256 | function warn(target, result, message) { 257 | if (opts.skipWarnings) return; 258 | target.warn(result, message); 259 | } 260 | 261 | return function (root, result) { 262 | root.walkRules(function (rule) { 263 | var gradient; 264 | var filter; 265 | 266 | gradient = getGradientFromRule(rule); 267 | 268 | // if linear-gradient and `filter` both exist, warn users 269 | if (gradient.value && hasFilter(rule)) { 270 | warn( 271 | rule, 272 | result, 273 | 'The `filter` declaration already exists, we have skipped this rule.' 274 | ); 275 | return; 276 | } 277 | 278 | 279 | if (gradient.warnings) { 280 | warn(gradient.decl, result, gradient.warnings); 281 | } 282 | 283 | if (!gradient.value) { 284 | return; 285 | } 286 | 287 | filter = gradientToFilter(gradient.value); 288 | 289 | // warn users when the gradient value is not valid. 290 | if (!filter.success) { 291 | warn(gradient.decl, result, filter.message); 292 | return; 293 | } 294 | 295 | if (opts.skipMultiColor && filter.isMultiColor) { 296 | return; 297 | } 298 | 299 | if (!opts.angleFallback && filter.isFallback) { 300 | return; 301 | } 302 | 303 | // warn developer when `filter.message` is not empty 304 | if (filter.message) { 305 | warn(gradient.decl, result, filter.message); 306 | } 307 | 308 | // append filter string 309 | gradient.decl.cloneAfter({ 310 | prop: 'filter', value: filter.string 311 | }); 312 | }); 313 | }; 314 | }); 315 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-filter-gradient", 3 | "version": "1.0.0", 4 | "description": "PostCSS plugin for generating the old IE supported filter gradient.", 5 | "keywords": [ 6 | "postcss", 7 | "css", 8 | "postcss-plugin", 9 | "ie", 10 | "filter", 11 | "gradient" 12 | ], 13 | "author": "Kevin Yue ", 14 | "license": "MIT", 15 | "repository": "yuezk/postcss-filter-gradient", 16 | "bugs": { 17 | "url": "https://github.com/yuezk/postcss-filter-gradient/issues" 18 | }, 19 | "homepage": "https://github.com/yuezk/postcss-filter-gradient", 20 | "dependencies": { 21 | "filter-gradient": "^1.0.1", 22 | "postcss": "^6.0.0" 23 | }, 24 | "devDependencies": { 25 | "chai": "^3.5.0", 26 | "coveralls": "^2.13.1", 27 | "gulp": "^3.9.1", 28 | "gulp-eslint": "^1.1.1", 29 | "gulp-mocha": "^2.2.0", 30 | "istanbul": "^0.4.5", 31 | "mocha": "^2.5.3" 32 | }, 33 | "scripts": { 34 | "test": "gulp", 35 | "preversion": "npm test", 36 | "version": "git add -A", 37 | "postversion": "git push origin master --tags", 38 | "coverage": "istanbul cover _mocha -- -R spec", 39 | "coveralls": "npm run coverage && cat ./coverage/lcov.info | coveralls && rm -rf ./coverage" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /test/fixtures/angular-fallback.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(30deg, #1E5799, #7DB9E8); 3 | } 4 | 5 | b { 6 | background: linear-gradient(60deg, #1E5799, #7DB9E8); 7 | } 8 | 9 | c { 10 | background: linear-gradient(-20deg, #1E5799, #7DB9E8); 11 | } 12 | 13 | d { 14 | background: linear-gradient(130deg, #1E5799, #7DB9E8); 15 | } 16 | 17 | e { 18 | background: linear-gradient(150deg, #1E5799, #7DB9E8); 19 | } 20 | 21 | f { 22 | background: linear-gradient(240deg, #1E5799, #7DB9E8); 23 | } 24 | 25 | g { 26 | background: linear-gradient(-45deg, #1E5799, #7DB9E8); 27 | } 28 | -------------------------------------------------------------------------------- /test/fixtures/angular-fallback.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(30deg, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=0); 4 | } 5 | 6 | b { 7 | background: linear-gradient(60deg, #1E5799, #7DB9E8); 8 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 9 | } 10 | 11 | c { 12 | background: linear-gradient(-20deg, #1E5799, #7DB9E8); 13 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=0); 14 | } 15 | 16 | d { 17 | background: linear-gradient(130deg, #1E5799, #7DB9E8); 18 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 19 | } 20 | 21 | e { 22 | background: linear-gradient(150deg, #1E5799, #7DB9E8); 23 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 24 | } 25 | 26 | f { 27 | background: linear-gradient(240deg, #1E5799, #7DB9E8); 28 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 29 | } 30 | 31 | g { 32 | background: linear-gradient(-45deg, #1E5799, #7DB9E8); 33 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 34 | } 35 | -------------------------------------------------------------------------------- /test/fixtures/angular.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(0, #1E5799, #7DB9E8); 3 | } 4 | 5 | b { 6 | background: linear-gradient(90deg, #1E5799, #7DB9E8); 7 | } 8 | 9 | c { 10 | background: linear-gradient(180deg, #1E5799, #7DB9E8); 11 | } 12 | 13 | d { 14 | background: linear-gradient(270deg, #1E5799, #7DB9E8); 15 | } 16 | 17 | e { 18 | background: linear-gradient(360deg, #1E5799, #7DB9E8); 19 | } 20 | 21 | f { 22 | background: linear-gradient(-90deg, #1E5799, #7DB9E8); 23 | } 24 | 25 | g { 26 | background: linear-gradient(-180deg, #1E5799, #7DB9E8); 27 | } 28 | 29 | h { 30 | background: linear-gradient(-270deg, #1E5799, #7DB9E8); 31 | } 32 | -------------------------------------------------------------------------------- /test/fixtures/angular.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(0, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=0); 4 | } 5 | 6 | b { 7 | background: linear-gradient(90deg, #1E5799, #7DB9E8); 8 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 9 | } 10 | 11 | c { 12 | background: linear-gradient(180deg, #1E5799, #7DB9E8); 13 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 14 | } 15 | 16 | d { 17 | background: linear-gradient(270deg, #1E5799, #7DB9E8); 18 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 19 | } 20 | 21 | e { 22 | background: linear-gradient(360deg, #1E5799, #7DB9E8); 23 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=0); 24 | } 25 | 26 | f { 27 | background: linear-gradient(-90deg, #1E5799, #7DB9E8); 28 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 29 | } 30 | 31 | g { 32 | background: linear-gradient(-180deg, #1E5799, #7DB9E8); 33 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 34 | } 35 | 36 | h { 37 | background: linear-gradient(-270deg, #1E5799, #7DB9E8); 38 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 39 | } 40 | -------------------------------------------------------------------------------- /test/fixtures/bottom.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(bottom, #1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/bottom.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(bottom, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=0); 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/color-format.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(rgb(30, 87, 153), rgb(125, 185, 232)); 3 | } 4 | 5 | b { 6 | background: linear-gradient(hsl(212, 67%, 36%), #7DB9E8); 7 | } 8 | 9 | c { 10 | background: linear-gradient(rgba(30, 87, 153, 0.1), hsla(206, 70%, 70%, 0.8)); 11 | } 12 | -------------------------------------------------------------------------------- /test/fixtures/color-format.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(rgb(30, 87, 153), rgb(125, 185, 232)); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 4 | } 5 | 6 | b { 7 | background: linear-gradient(hsl(212, 67%, 36%), #7DB9E8); 8 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5899', endColorstr='#ff7db9e8', GradientType=0); 9 | } 10 | 11 | c { 12 | background: linear-gradient(rgba(30, 87, 153, 0.1), hsla(206, 70%, 70%, 0.8)); 13 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1e5799', endColorstr='#cc7dbae8', GradientType=0); 14 | } 15 | -------------------------------------------------------------------------------- /test/fixtures/filter-not-warning.css: -------------------------------------------------------------------------------- 1 | a { 2 | filter: alpha(opacity=50); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/filter-not-warning.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | filter: alpha(opacity=50); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/filter.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to bottom, #1E5799, #7DB9E8); 3 | filter: alpha(opacity=50); 4 | } 5 | 6 | b { 7 | background: linear-gradient(to bottom, #1E5799, #7DB9E8); 8 | -ms-filter: alpha(opacity=50); 9 | } 10 | -------------------------------------------------------------------------------- /test/fixtures/filter.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to bottom, #1E5799, #7DB9E8); 3 | filter: alpha(opacity=50); 4 | } 5 | 6 | b { 7 | background: linear-gradient(to bottom, #1E5799, #7DB9E8); 8 | -ms-filter: alpha(opacity=50); 9 | } 10 | -------------------------------------------------------------------------------- /test/fixtures/grad.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(100grad, #1E5799, #7DB9E8); 3 | } 4 | 5 | b { 6 | background: linear-gradient(200grad, #1E5799, #7DB9E8); 7 | } 8 | 9 | c { 10 | background: linear-gradient(-100grad, #1E5799, #7DB9E8); 11 | } 12 | -------------------------------------------------------------------------------- /test/fixtures/grad.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(100grad, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 4 | } 5 | 6 | b { 7 | background: linear-gradient(200grad, #1E5799, #7DB9E8); 8 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 9 | } 10 | 11 | c { 12 | background: linear-gradient(-100grad, #1E5799, #7DB9E8); 13 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 14 | } 15 | -------------------------------------------------------------------------------- /test/fixtures/horizontal-reverse.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to left, #1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/horizontal-reverse.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to left, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/horizontal.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to right, #1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/horizontal.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to right, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/invalid-color.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(#ffff, #000); 3 | } 4 | 5 | b { 6 | background: linear-gradient(to bottom, #000, invalidColor); 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/invalid-color.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(#ffff, #000); 3 | } 4 | 5 | b { 6 | background: linear-gradient(to bottom, #000, invalidColor); 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/invalid-syntax.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(); 3 | } 4 | 5 | b { 6 | background: linear-gradient(#000); 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/invalid-syntax.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(); 3 | } 4 | 5 | b { 6 | background: linear-gradient(#000); 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/left.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(left, #1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/left.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(left, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/multi-background.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: url(../images/bg.png), linear-gradient(#1E5799, #7DB9E8), linear-gradient(to bottom, blue, green); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/multi-background.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: url(../images/bg.png), linear-gradient(#1E5799, #7DB9E8), linear-gradient(to bottom, blue, green); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/multi-colorstops.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(rgb(30, 87, 153) 0%, rgb(125, 185, 232) 76%, rgb(96, 178, 130) 100%); 3 | } 4 | 5 | b { 6 | background: linear-gradient(to bottom, blue, green, red); 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/multi-colorstops.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(rgb(30, 87, 153) 0%, rgb(125, 185, 232) 76%, rgb(96, 178, 130) 100%); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff60b282', GradientType=0); 4 | } 5 | 6 | b { 7 | background: linear-gradient(to bottom, blue, green, red); 8 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000ff', endColorstr='#ffff0000', GradientType=0); 9 | } 10 | -------------------------------------------------------------------------------- /test/fixtures/none.css: -------------------------------------------------------------------------------- 1 | a { 2 | color: #fff; 3 | background: #fff; 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/none.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | color: #fff; 3 | background: #fff; 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/old.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: -wekbit-linear-gradient(top, #1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/old.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: -wekbit-linear-gradient(top, #1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/one-liner.css: -------------------------------------------------------------------------------- 1 | /* issue #8 */ 2 | a { 3 | background: linear-gradient(#626262, #626262 80%, transparent 80%, transparent) 0 bottom / 100% 12px; 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/one-liner.expect.css: -------------------------------------------------------------------------------- 1 | /* issue #8 */ 2 | a { 3 | background: linear-gradient(#626262, #626262 80%, transparent 80%, transparent) 0 bottom / 100% 12px; 4 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff626262', endColorstr='#00000000', GradientType=0); 5 | } 6 | -------------------------------------------------------------------------------- /test/fixtures/option-angle-fallback.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(30deg, #1E5799, #7DB9E8); 3 | } 4 | 5 | b { 6 | background: linear-gradient(to top right, #1E5799, #7DB9E8); 7 | } 8 | 9 | c { 10 | background: linear-gradient(90deg, #1E5799, #7DB9E8); 11 | } 12 | -------------------------------------------------------------------------------- /test/fixtures/option-angle-fallback.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(30deg, #1E5799, #7DB9E8); 3 | } 4 | 5 | b { 6 | background: linear-gradient(to top right, #1E5799, #7DB9E8); 7 | } 8 | 9 | c { 10 | background: linear-gradient(90deg, #1E5799, #7DB9E8); 11 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 12 | } 13 | -------------------------------------------------------------------------------- /test/fixtures/option-skip-multicolor.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(rgb(30, 87, 153) 0%, rgb(125, 185, 232) 76%, rgb(96, 178, 130) 100%); 3 | } 4 | 5 | b { 6 | background: linear-gradient(to bottom, blue, green, red); 7 | } 8 | 9 | -------------------------------------------------------------------------------- /test/fixtures/option-skip-multicolor.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(rgb(30, 87, 153) 0%, rgb(125, 185, 232) 76%, rgb(96, 178, 130) 100%); 3 | } 4 | 5 | b { 6 | background: linear-gradient(to bottom, blue, green, red); 7 | } 8 | 9 | -------------------------------------------------------------------------------- /test/fixtures/rad.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(0.5rad, #1E5799, #7DB9E8); 3 | } 4 | 5 | b { 6 | background: linear-gradient(1rad, #1E5799, #7DB9E8); 7 | } 8 | 9 | c { 10 | background: linear-gradient(-0.5rad, #1E5799, #7DB9E8); 11 | } 12 | -------------------------------------------------------------------------------- /test/fixtures/rad.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(0.5rad, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 4 | } 5 | 6 | b { 7 | background: linear-gradient(1rad, #1E5799, #7DB9E8); 8 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 9 | } 10 | 11 | c { 12 | background: linear-gradient(-0.5rad, #1E5799, #7DB9E8); 13 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 14 | } 15 | -------------------------------------------------------------------------------- /test/fixtures/right.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(right, #1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/right.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(right, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/sidecorner-fallback.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to top right, #1E5799, #7DB9E8); 3 | } 4 | 5 | b { 6 | background: linear-gradient(to left bottom, #1E5799, #7DB9E8); 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/sidecorner-fallback.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to top right, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=0); 4 | } 5 | 6 | b { 7 | background: linear-gradient(to left bottom, #1E5799, #7DB9E8); 8 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 9 | } 10 | -------------------------------------------------------------------------------- /test/fixtures/simple.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(#1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/simple.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(#1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/standard.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to bottom, #1E5799, #7DB9E8); 3 | } 4 | 5 | b { 6 | background: linear-gradient(to bottom, blue, green); 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/standard.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to bottom, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 4 | } 5 | 6 | b { 7 | background: linear-gradient(to bottom, blue, green); 8 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000ff', endColorstr='#ff008000', GradientType=0); 9 | } 10 | -------------------------------------------------------------------------------- /test/fixtures/top.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(top, #1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/top.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(top, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/turn.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(0.25turn, #1E5799, #7DB9E8); 3 | } 4 | 5 | b { 6 | background: linear-gradient(0.5turn, #1E5799, #7DB9E8); 7 | } 8 | 9 | c { 10 | background: linear-gradient(-0.25turn, #1E5799, #7DB9E8); 11 | } 12 | -------------------------------------------------------------------------------- /test/fixtures/turn.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(0.25turn, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=1); 4 | } 5 | 6 | b { 7 | background: linear-gradient(0.5turn, #1E5799, #7DB9E8); 8 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0); 9 | } 10 | 11 | c { 12 | background: linear-gradient(-0.25turn, #1E5799, #7DB9E8); 13 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=1); 14 | } 15 | -------------------------------------------------------------------------------- /test/fixtures/vertical-reverse.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to top, #1E5799, #7DB9E8); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/vertical-reverse.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | background: linear-gradient(to top, #1E5799, #7DB9E8); 3 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7db9e8', endColorstr='#ff1e5799', GradientType=0); 4 | } 5 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | var postcss = require('postcss'); 4 | var expect = require('chai').expect; 5 | 6 | var plugin = require('../'); 7 | 8 | var test = function (inputFile, opts, done, warnings) { 9 | var prefix = path.join(__dirname, '/fixtures/', inputFile); 10 | var input = fs.readFileSync(prefix + '.css', 'utf-8'); 11 | var output = fs.readFileSync(prefix + '.expect.css', 'utf-8'); 12 | 13 | postcss([plugin(opts)]).process(input).then(function (result) { 14 | expect(result.css).to.eql(output); 15 | if (warnings) { 16 | result.warnings().forEach(function (warn, i) { 17 | var expectedWarning = Array.isArray(warnings) ? warnings[i] : warnings; 18 | expect(warn.text).to.eql(expectedWarning); 19 | }); 20 | } else { 21 | expect(result.warnings()).to.be.empty; 22 | } 23 | done(); 24 | }).catch(function (error) { 25 | done(error); 26 | }); 27 | }; 28 | 29 | describe('postcss-filter-gradient', function () { 30 | it('should not throw errors when `options` is undefined', function (done) { 31 | expect(plugin).to.not.throw(); 32 | done(); 33 | }); 34 | 35 | it('should do nothing if linear-gradient not exists', function (done) { 36 | test('none', {}, done); 37 | }); 38 | 39 | it('should ignore the old syntax', function (done) { 40 | test('old', {}, done); 41 | }); 42 | 43 | it('should do nothing if the filter/-ms-filter present', function (done) { 44 | var warnings = 45 | 'The `filter` declaration already exists, ' + 46 | 'we have skipped this rule.'; 47 | 48 | test('filter', {}, done, warnings); 49 | }); 50 | 51 | it('should not waring when linear-gradient does\'nt exists', function (done) { 52 | test('filter-not-warning', { }, done); 53 | }); 54 | 55 | it('should do nothing when handle invalid linear gradient syntax', function (done) { 56 | var warnings = [ 57 | '`linear-gradient()` is not a valid linear gradient value.', 58 | '`linear-gradient(#000)` is not a valid linear gradient value.' 59 | ]; 60 | 61 | test('invalid-syntax', {}, done, warnings); 62 | }); 63 | 64 | it('should do nothing when the color format is not valid', function (done) { 65 | var warnings = [ 66 | 'Unable to parse color from string "#ffff" in `linear-gradient(#ffff, #000)`', 67 | 'Unable to parse color from string "invalidColor" in `linear-gradient(to bottom, #000, invalidColor)`' 68 | ]; 69 | 70 | test('invalid-color', {}, done, warnings); 71 | }); 72 | 73 | it('should support the standard syntax', function (done) { 74 | test('standard', {}, done); 75 | }); 76 | 77 | it('should support syntax which omit direction', function (done) { 78 | test('simple', {}, done); 79 | }); 80 | 81 | it('should support top', function (done) { 82 | test('top', {}, done); 83 | }); 84 | 85 | it('should support bottom', function (done) { 86 | test('bottom', {}, done); 87 | }); 88 | 89 | it('should support vertical reverse', function (done) { 90 | test('vertical-reverse', {}, done); 91 | }); 92 | 93 | it('should support right', function (done) { 94 | test('right', {}, done); 95 | }); 96 | 97 | it('should support left', function (done) { 98 | test('left', {}, done); 99 | }); 100 | 101 | it('should support horizontal direction', function (done) { 102 | test('horizontal', {}, done); 103 | }); 104 | 105 | it('should support horizontal reverse', function (done) { 106 | test('horizontal-reverse', {}, done); 107 | }); 108 | 109 | it('should support multi color stops', function (done) { 110 | test('multi-colorstops', {}, done); 111 | }); 112 | 113 | it('should support multi background', function (done) { 114 | var warnings = 115 | 'IE filter doesn\'t support multiple gradients, ' + 116 | 'we pick the first as fallback.'; 117 | test('multi-background', {}, done, warnings); 118 | }); 119 | 120 | it('should support multi color format', function (done) { 121 | test('color-format', {}, done); 122 | }); 123 | 124 | it('should support angular gradient', function (done) { 125 | test('angular', {}, done); 126 | }); 127 | 128 | it('should support fallback when use angular gradient', 129 | function (done) { 130 | var warnings = 131 | 'IE filter doesn\'t support angular gradient, ' + 132 | 'we use the closest side as the fallback.'; 133 | test('angular-fallback', {}, done, warnings); 134 | } 135 | ); 136 | 137 | it('should support fallback when use side corner gradient', 138 | function (done) { 139 | var warnings = 140 | 'IE filter doesn\'t support side corner gradient, ' + 141 | 'we use the first side of the side corner as fallback.'; 142 | 143 | test('sidecorner-fallback', {}, done, warnings); 144 | } 145 | ); 146 | 147 | describe('options.skipWarnings', function () { 148 | var fixtures = [ 149 | 'filter', 150 | 'invalid-syntax', 151 | 'invalid-color', 152 | 'multi-background', 153 | 'angular-fallback', 154 | 'sidecorner-fallback' 155 | ]; 156 | 157 | fixtures.forEach(function (f) { 158 | it('should skip `' + f + '` warnings', function (done) { 159 | test(f, { skipWarnings: true }, done); 160 | }); 161 | }); 162 | }); 163 | 164 | it('should disable angle fallback when `option.angleFallback` is true', 165 | function (done) { 166 | test('option-angle-fallback', { angleFallback: false }, done); 167 | } 168 | ); 169 | 170 | it('shouldnt handle multi colorstops when `option.skipMultiColor` is true', 171 | function (done) { 172 | test('option-skip-multicolor', { skipMultiColor: true }, done); 173 | } 174 | ); 175 | 176 | it('should handle the `grad` unit correctly', function (done) { 177 | test('grad', {}, done); 178 | }); 179 | 180 | it('should handle the `rad` unit correctly', function (done) { 181 | test('rad', {}, done); 182 | }); 183 | 184 | it('should handle the `turn` unit correctly', function (done) { 185 | test('turn', {}, done); 186 | }); 187 | 188 | it('should handle the one-liner background syntax', function (done) { 189 | test('one-liner', {}, done); 190 | }); 191 | }); 192 | --------------------------------------------------------------------------------