diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..121f2d9 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,18 @@ +# EditorConfig is awesome: http://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_style = tab +insert_final_newline = true +trim_trailing_whitespace = true + +[*.{cmd,bat}] +end_of_line = crlf + +[{package.json,.travis.yml,appveyor.yml,.gitlab-ci.yml}] +indent_style = space +indent_size = 2 diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..4ebc8ae --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +coverage diff --git a/.eslintrc.json b/.eslintrc.json index e27e663..2c9de03 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -9,6 +9,28 @@ ], "root": true, "rules": { + "arrow-spacing": [ + "error", + { + "after": true, + "before": true + } + ], + "comma-spacing": [ + "error", + { + "after": true, + "before": false + } + ], + "comma-dangle": [ + "error", + "always-multiline" + ], + "eqeqeq": [ + "error", + "smart" + ], "indent": [ "error", "tab", @@ -16,19 +38,56 @@ "SwitchCase": 1 } ], - "quotes": [ + "key-spacing": [ + "error" + ], + "keyword-spacing": [ + "error" + ], + "no-var": [ + "error" + ], + "no-console": [ "error", - "double", { - "allowTemplateLiterals": true, - "avoidEscape": true + "allow": [ + "warn", + "error" + ] } ], - "valid-jsdoc": [ + "prefer-const": [ + "error" + ], + "quotes": [ + "error", + "single" + ], + "semi": [ + "error" + ], + "space-before-function-paren": [ + "error" + ], + "space-before-blocks": [ + "error" + ], + "space-infix-ops": [ + "error" + ], + "spaced-comment": [ "error", + "always" + ], + "strict": [ + "error", + "safe" + ], + "valid-jsdoc": [ + "warn", { "requireReturn": false } ] } -} \ No newline at end of file +} diff --git a/.gitignore b/.gitignore index e920c16..00cbbdf 100644 --- a/.gitignore +++ b/.gitignore @@ -2,11 +2,14 @@ logs *.log npm-debug.log* +yarn-debug.log* +yarn-error.log* # Runtime data pids *.pid *.seed +*.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov @@ -14,20 +17,43 @@ lib-cov # Coverage directory used by tools like istanbul coverage +# nyc test coverage +.nyc_output + # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt +# Bower dependency directory (https://bower.io/) +bower_components + # node-waf configuration .lock-wscript # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release -# Dependency directory -node_modules +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ # Optional npm cache directory .npm +# Optional eslint cache +.eslintcache + # Optional REPL history .node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index c5f9581..0000000 --- a/.jshintrc +++ /dev/null @@ -1,32 +0,0 @@ -{ - //声明浏览器环境 - "browser": true, - //允许在if,for,while语句中使用赋值 - "boss": true, - //使用if和while等结构语句时必须加上大括号来明确代码块 - "curly": true, - //使用===或者是!==,而不是==和!= - "eqeqeq": true, - //允许使用"== null"作比较 - "eqnull": true, - //允许应该出现赋值或函数调用的地方使用表达式 - "expr": true, - //匿名函数调用,使用(function(){ ... })(); 而不是(function(){ ... }());; - "immed": true, - //禁止使用arguments.caller和arguments.callee - "noarg": true, - //true表示字符串可以使用单引号和双引号,但必须保持一致,double表示必须使用双引号 - "quotmark": true, - //所有的非全局变量,在使用前都必须被声明 - "undef": true, - //变量声明了但不使用会被警告 - "unused": true, - //必须使用use strict;语法 - "strict": "global", - //ECMAScript 版本号 - "esversion": 6, - // 声明 node 运行环境 - "node": true, - // 不得写入全局变量 - "globals": false -} \ No newline at end of file diff --git a/.npmignore b/.npmignore index 08afbdf..0cebcf9 100644 --- a/.npmignore +++ b/.npmignore @@ -1,18 +1,18 @@ *.log *.pid *.seed -lib-cov -coverage -.csscomb.json +.editorconfig +.eslintrc* +.eslintignore .gitignore .grunt -.jshintrc -.eslintrc.json .lock-wscript .node_repl_history +.stylelintrc* .travis.yml +.vscode +.nyc_output appveyor.yml -build coverage gulpfile.js lib-cov diff --git a/.travis.yml b/.travis.yml index 21bb5d5..51cd42f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,9 +1,11 @@ sudo: false + language: node_js + node_js: - "stable" - "6" - "4" - - "0.12" + after_success: - - "npm run coveralls" \ No newline at end of file + - "npm run coveralls" diff --git a/README-zh.md b/README-zh.md index 3be6d74..f703259 100644 --- a/README-zh.md +++ b/README-zh.md @@ -6,53 +6,41 @@ [![AppVeyor](https://img.shields.io/appveyor/ci/gucong3000/postcss-pie.svg?&label=Windows)](https://ci.appveyor.com/project/gucong3000/postcss-pie) [![Coverage Status](https://img.shields.io/coveralls/gucong3000/postcss-pie.svg)](https://coveralls.io/r/gucong3000/postcss-pie) -makes IE several of the most useful CSS3 decoration features - -让IE兼容最常用的几个CSS3特性 +使IE能够显示一些最有用的CSS3的装饰特性。 ------ [English](README.md) -postcss-pie 由[PostCSS](https://github.com/postcss/postcss)与[PIE](http://css3pie.com/)驱动,让IE6-IE9兼容CSS3特性: -* [border-radius](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius) -* [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow) -* [border-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image) -* [CSS3 Backgrounds](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) -* [Gradients](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +postcss-pie 由[PostCSS](https://github.com/postcss/postcss)与[PIE](http://css3pie.com/)驱动,让IE6-IE9兼容这些CSS3特性: +* [border-radius](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius) +* [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow) +* [border-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image) +* [CSS3 Backgrounds](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) +* [Gradients](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients) ## Usage -1. [下载PIE](http://css3pie.com/download-latest),解压所有文件到HTML文档所在服务器的某个目录, 如`/path/to/pie_files/` -1. 配置你的postcss - ```JavaScript - var postcss = require('postcss'); - var pie = require('postcss-pie'); - - postcss([ - pie({ - htcPath: '/path/to/pie_files/PIE.htc', - pieLoadPath: 'http://cdn.server/path/to/js-files/', - }); - ]); - ``` - -1. [确保正确的Content-Type](http://css3pie.com/documentation/known-issues/#content-type) - - 如果IE在请求PIE.htc文件时,HTTP响应头中的Content-Type不是"text/x-component",会造成功能失效。 - 在大部分服务器默认配置下,都不会出现这个问题。如果出现此问题,如Apache,请在.htaccess 文件中添加: - - ``` - AddType text/x-component .htc - ``` +[下载PIE](http://css3pie.com/download/),解压所有文件,部署到web服务器的某个目录, 如`/pie/` +配置你的postcss -## Options +```JavaScript +var postcss = require('postcss'); +var pie = require('postcss-pie'); -函数 pie(options) 返回一个新的PostCSS插件。参见[PostCSS API](https://github.com/postcss/postcss/blob/master/docs/api.md)中的插件使用文档。 +postcss([ + pie({ + // 必须使用绝对地址,且必须与html同一个域名,不得跨域,不得使用CDN地址。 + htcPath: '/pie/PIE.htc', + // PIE的其他文件所在目录的路径,必须是完整url,可以是cdn地址。 + pieLoadPath: 'http://server.com/pie/', + }); +]); +``` -一共有两个选项: +## [确保正确的Content-Type](http://css3pie.com/documentation/known-issues/#content-type) -* `htcPath` (string): `PIE.htc` 的所在路径,文件必须放在HTML文档所在服务器,路径必须使用`/`开头的绝对路径(不支持跨域名使用)。不使用此选项,则不会调用htc文件,此时你需要[使用JS方式激活](http://css3pie.com/documentation/pie-js/) -* `pieLoadPath` (string): `PIE_IE9.js`和`PIE_IE678.js`所在目录的路径,必须为完整的URL路径,不使用此属性时,则自动从`PIE.htc`所在目录加载js文件。如果未声明`htcPath`属性,则此项配置无效。 +如果IE在请求PIE.htc文件时,HTTP响应头中的Content-Type不是"text/x-component",会造成功能失效。 +详见[PIE相关文档](http://css3pie.com/documentation/known-issues/#content-type) -## [PIE的文档](http://css3pie.com/documentation/) \ No newline at end of file +## [PIE的文档](http://css3pie.com/documentation/) diff --git a/README.md b/README.md index cf44bcb..3cd8b72 100644 --- a/README.md +++ b/README.md @@ -6,51 +6,41 @@ [![AppVeyor](https://img.shields.io/appveyor/ci/gucong3000/postcss-pie.svg?&label=Windows)](https://ci.appveyor.com/project/gucong3000/postcss-pie) [![Coverage Status](https://img.shields.io/coveralls/gucong3000/postcss-pie.svg)](https://coveralls.io/r/gucong3000/postcss-pie) -makes IE several of the most useful CSS3 decoration features +makes IE capable of rendering several of the most useful CSS3 decoration features. ------ [简体中文](README-zh.md) postcss-pie is a plugin for [PostCSS](https://github.com/postcss/postcss), use [PIE](http://css3pie.com/), to makes IE6-IE9 several of the most useful CSS3 decoration features. like: -* [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) -* [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) -* [border-image](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image) -* [CSS3 Backgrounds](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) -* [Gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +* [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) +* [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) +* [border-image](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image) +* [CSS3 Backgrounds](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) +* [Gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) ## Usage -1. [Download the PIE distribution](http://css3pie.com/download-latest), and unzip it somewhere. sub path from the HTML document domain root. like: `/path/to/pie_files/` -1. config postcss - ```JavaScript - var postcss = require('postcss'); - var pie = require('postcss-pie'); +[Download PIE](http://css3pie.com/download/), Unpack all the files and deploy them to a directory of the web server, such as `/pie/` +Configure your postcss - postcss([ - pie({ - htcPath: '/path/to/pie_files/PIE.htc', - pieLoadPath: 'http://cdn.server/path/to/js-files/', - }); - ]); - ``` +```JavaScript +var postcss = require('postcss'); +var pie = require('postcss-pie'); -1. [Serving the correct Content-Type](http://css3pie.com/documentation/known-issues/#content-type) +postcss([ + pie({ + // You must use absolute address and must have the same domain name as HTML. You must not cross domain or use CDN address. + htcPath: '/pie/PIE.htc', + // The path to the directory where other files of PIE is, must be full URL, and can be CDN addresses. + pieLoadPath: 'http://server.com/pie/', + }); +]); +``` - IE requires that HTC behaviors are served up with a content-type header of "text/x-component", otherwise it will simply ignore the behavior. Many web servers are preconfigured to serve the correct content-type, but others are not. - If you have problems with the PIE behavior not being applied, check your server configuration and if possible update it to use the correct content-type. For Apache, you can do this in a .htaccess file: +## [Serving the correct Content-Type](http://css3pie.com/documentation/known-issues/#content-type) - ``` - AddType text/x-component .htc - ``` - -## Options - -Function pie(options) returns new PostCSS plugin. See [PostCSS API](https://github.com/postcss/postcss/blob/master/docs/api.md) for plugin usage documentation. - -There are 2 options: - -* `htcPath` (string): `PIE.htc` file path, file must be in the same domain as the HTML page which uses. path must start with `/`. If not use this option, `PIE.htc` will not behavior, in this case, you need [pie-js](http://css3pie.com/documentation/pie-js/) way to use. -* `pieLoadPath` (string): parent path of `PIE_IE9.js` and `PIE_IE678.js`, must be a full path URL. if empty, parent path of `PIE.htc` will be use. if not use `htcPath` option, this option will disable. +IE requires that HTC behaviors are served up with a content-type header of "text/x-component", otherwise it will simply ignore the behavior. +See [PIE related documents](http://css3pie.com/documentation/known-issues/#content-type) ## [PIE documentation](http://css3pie.com/documentation/) diff --git a/appveyor.yml b/appveyor.yml index 2ff353a..bfce406 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -5,7 +5,6 @@ environment: - nodejs_version: "stable" - nodejs_version: "6" - nodejs_version: "4" - - nodejs_version: "0.12" # Install scripts. (runs after repo cloning) install: @@ -16,9 +15,6 @@ install: # Post-install test scripts. test_script: - # Output useful info for debugging. - - node --version - - npm --version # run tests - npm test diff --git a/lib/check-bg.js b/lib/check-bg.js new file mode 100644 index 0000000..f509eef --- /dev/null +++ b/lib/check-bg.js @@ -0,0 +1,46 @@ +'use strict'; +// 检查background子属性中是否含有IE不认识的值 +const bgSubKeyWord = { + color: /\b(?:rgba|hsla?)\(/i, + repeat: /\b(?:round|space?)\b/i, + attachment: /\blocal\b/i, +}; + +// 检查background属性中是否有IE不认识的关键字 +const bgKeyWord = [ + // border-box | padding-box | content-box + /\b(?:border|padding|content)-box\b/, + // auto | cover | contain | text + /\b(auto|cover|contain|text)\b/, + // 长度值 + /\/\s*(?:\d*\.)?\d+(?:[a-z]+?|%)\b/, +].concat(Object.keys(bgSubKeyWord).map(function (prop) { + return bgSubKeyWord[prop]; +})); + +function getClearValue (value) { + return value.replace(/\b(?:url|(?:rgb|hsl)a?)\([^()]+\)/i, ''); +} + +function hasMultipleBg (value) { + return /,/.test(value); +} + +function hasBgKeyWord (decl) { + const prop = /^background(?:-(\w+))?$/i.exec(decl.prop); + if (!prop) { + return; + } + + if (prop[1]) { + const regexp = bgSubKeyWord[prop[1].toLowerCase()]; + return (regexp && regexp.test(decl.value)) || hasMultipleBg(getClearValue(decl.value)); + } else { + const value = getClearValue(decl.value); + return bgKeyWord.some(function (regexp) { + return regexp.test(value); + }) || hasMultipleBg(value); + } +} + +module.exports = hasBgKeyWord; diff --git a/lib/fixer.js b/lib/fixer.js new file mode 100644 index 0000000..03e4e41 --- /dev/null +++ b/lib/fixer.js @@ -0,0 +1,96 @@ +'use strict'; +const checkBG = require('./check-bg'); + +function fixer (root, options) { + let hasBehavior; + + root.walkRules(rule => { + + let needBehavior; + let needIE9; + let behavior; + const pieProps = {}; + // 寻找pie不能直接获取到的css属性,给与“-pie”前缀以便pie可以访问 + rule.each(decl => { + if (decl.type !== 'decl') { + return; + } + + if (/^-pie-/.test(decl.prop)) { + // 记录已经加过前缀的属性 + pieProps[decl.prop.slice(5).toLowerCase()] = decl.value; + needBehavior = true; + return; + } else if (pieProps[decl.prop.toLowerCase()]) { + // 跳过已经加过前缀的属性 + return; + } else if (/^behavior$/i.test(decl.prop)) { + behavior = decl; + return; + } + + if (/^border-image$/i.test(decl.prop)) { + // 发现了其他pie可以兼容,但IE8根本不认识的css属性 + needBehavior = true; + needIE9 = true; + return; + } + + if (/^(?:border-image|border-radius|box-shadow|background-(?:size|origin|clip))$/i.test(decl.prop)) { + // 发现了其他pie可以兼容,但IE8根本不认识的css属性 + needBehavior = true; + return; + } + + function addPrefix () { + needBehavior = true; + decl.cloneBefore({ + prop: '-pie-' + decl.prop, + }); + } + + if (/^background(?:-image)?$/.test(decl.prop) && /\bgradient\(/.test(decl.value)) { + // 发现类型的取值 + needIE9 = true; + addPrefix(); + } else if (checkBG(decl)) { + addPrefix(); + } + }); + + // 如果当前rule中找到可PIE兼容的项目 + if (needBehavior && options.htcPath) { + hasBehavior = true; + if (behavior) { + return; + } + // 添加behavior属性 + rule.append({ + prop: 'behavior', + value: 'url("' + options.htcPath + '")', + }); + + // 如果不需要兼容背景渐变 + if (!needIE9 && !rule.selectors.some(selector => { + return /^:root\b/i.test(selector); + })) { + // IE9下关闭behavior + rule.append({ + prop: 'behavior', + value: 'none\\9\\0', + }); + } + } + }); + if (hasBehavior && options.pieLoadPath && !/-pie-load-path\b/i.test(root.first.toString())) { + root.prepend({ + selector: 'html', + }); + root.first.append({ + prop: '-pie-load-path', + value: '"' + options.pieLoadPath + '"', + }); + } +} + +module.exports = fixer; diff --git a/lib/index.js b/lib/index.js index 3e49fd8..3f057e4 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,93 +1,10 @@ -"use strict"; -var postcss = require("postcss"); - -module.exports = postcss.plugin("postcss-pie", function(options) { - - return function(css, result) { - function testRemotesJs(url) { - require("request") - .get(url) - .on("error", function(err) { - result.warn("options.pieLoadPath", err); - }); - } - if (options) { - - if (options.htcPath && !/^\/.*/.test(options.htcPath)) { - options.htcPath = null; - result.warn("options.htcPath: the URL has to either be absolute from the domain root"); - } - if (options.pieLoadPath) { - var pieLoadPath = options.pieLoadPath.replace(/\/?$/, "/PIE_IE"); - testRemotesJs(pieLoadPath + "678.js"); - testRemotesJs(pieLoadPath + "9.js"); - } - } - var opts = options || {}; - - var hasBehavior; - - css.walkRules(function(rule) { - - var needBehavior; - var hasGradient; - // 寻找pie不能直接获取到的css属性,给与“-pie”前缀以便pie可以访问 - rule.walkDecls(function(decl) { - - var needPrefix; - - if (/^background(?:-image)?$/.test(decl.prop) && /\bgradient\(/.test(decl.value)) { - // 发现颜色渐变背景 - hasGradient = true; - needPrefix = true; - } else if (decl.prop === "background" && /\b(?:\/|text|contain|cover(?:(?:padding|border|content)-box))\b/.test(decl.value.replace(/\burl\([^())]+\)/, ""))) { - // background 属性中含有css3的属性值 - needPrefix = true; - } else if (/^background(?:-(?:color|image|repeat|attachment|position))?$/.test(decl.prop) && /,/.test(decl.value)) { - // background或者color|image|repeat|attachment|position中有多背景图 - needPrefix = true; - } else if (!needBehavior && /(?:border-image|border-radius|box-shadow|background-(?:size|origin|clip))/.test(decl.prop)) { - // 发现了其他pie可以兼容,但IE8根本不认识的css属性 - needBehavior = true; - } - - if (needPrefix) { - needBehavior = true; - rule.insertBefore(decl, { - prop: "-pie-" + decl.prop, - value: decl.value, - }); - } - }); - - // 如果当前rule中找到可PIE兼容的项目 - if (needBehavior && opts.htcPath) { - hasBehavior = true; - // 如果不需要兼容背景渐变 - if (!hasGradient && !rule.selectors.some(function(selector) { - return /^:root\b/.test(selector); - })) { - // IE9下关闭behavior - rule.prepend({ - prop: "behavior", - value: "none\\9\\0", - }); - } - // 添加behavior属性 - rule.prepend({ - prop: "behavior", - value: "url(\"" + opts.htcPath + "\")", - }); - } - }); - if (hasBehavior && opts.pieLoadPath) { - css.prepend({ - selector: "html" - }); - css.first.append({ - prop: "-pie-load-path", - value: "\"" + opts.pieLoadPath + "\"" - }); - } +'use strict'; +const postcss = require('postcss'); +const optValidation = require('./opt-validation'); +const fixer = require('./fixer'); +module.exports = postcss.plugin('postcss-pie', function (options) { + optValidation(options); + return function (root) { + return fixer(root, options || {}); }; }); diff --git a/lib/opt-validation.js b/lib/opt-validation.js new file mode 100644 index 0000000..d1e455b --- /dev/null +++ b/lib/opt-validation.js @@ -0,0 +1,100 @@ +'use strict'; +const got = require('got'); +const urlCache = {}; +const reHtc = { + test: RegExp.prototype.test.bind(/^text\/x-component$/i), + expected: 'text/x-component', +}; +const reJs = { + test: RegExp.prototype.test.bind(/^\w+\/javascript$/i), + expected: 'application/javascript', +}; + +function testRemotesFile (url, prop, type) { + if (urlCache[url]) { + return urlCache[url]; + } + + urlCache[url] = got(url).then(response => { + let message; + if (!type.test(response.headers['content-type'])) { + message = [ + 'Invalid `content-type`: `', + response.headers['content-type'], + '`, expected: `', + type.expected, + ].join(''); + } + return message; + }).catch(ex => { + return ex.message; + }).then(message => { + if (message) { + throw [ + message, + url, + '`options.' + prop + '`', + ].join('\n\tat '); + } + }); + + return urlCache[url]; +} + +function fixurl (url) { + url = url && /^(https?:)?(\/\/[^\/]+\/.+)\/?$/.exec(url); + if (url) { + return (url[1] || 'https:') + url[2]; + } +} + +function optValidation (options) { + if (!options) { + return Promise.resolve({}); + } + + let error; + + const task = []; + function test (url, prop, type) { + task.push(testRemotesFile(url, prop, type)); + } + + /* istanbul ignore else */ + if (options.pieLoadPath) { + const pieLoadPath = fixurl(options.pieLoadPath); + if (pieLoadPath) { + options.pieLoadPath = pieLoadPath; + test(pieLoadPath + '/PIE_IE678.js', 'pieLoadPath', reJs); + test(pieLoadPath + '/PIE_IE9.js', 'pieLoadPath', reJs); + } else { + error = 'invalid `options.pieLoadPath`, Expect URL.'; + } + } + + if (options.htcPath) { + const htcPath = fixurl(options.htcPath); + if (htcPath) { + options.htcPath = htcPath; + test(options.htcPath, 'htcPath', reHtc); + } else if (!/^\//.test(options.htcPath)) { + error = 'invalid `options.htcPath`, Expect absolute path or URL.'; + } + } + + if (error) { + return Promise.reject(error); + } else { + return Promise.all(task); + } +} + +function validation (options) { + const stack = new Error().stack.split(/\r?\n\s+/g).slice(4); + optValidation(options).catch(message => { + console.error([message].concat(stack).join('\n\t')); + process.exit(1); + }); + +} +module.exports = validation; diff --git a/package.json b/package.json index 5cec594..4f42271 100644 --- a/package.json +++ b/package.json @@ -4,16 +4,17 @@ "url": "https://github.com/gucong3000/postcss-pie/issues" }, "dependencies": { - "postcss": "^5.2.6", - "request": "^2.79.0" + "postcss": "^6.0.1", + "request": "^2.81.0" }, - "description": "makes IE several of the most useful CSS3 decoration features", + "description": "makes IE capable of rendering several of the most useful CSS3 decoration features.", "devDependencies": { - "coveralls": "^2.11.15", - "eslint": "^3.11.1", - "istanbul": "^0.4.5", - "mocha": "^3.2.0", - "node-version-check": "^2.1.1" + "coveralls": "^2.13.1", + "eslint": "^3.19.0", + "got": "^6.7.1", + "mocha": "^3.4.1", + "nyc": "^10.3.2", + "sinon": "^2.3.1" }, "homepage": "https://github.com/gucong3000/postcss-pie#readme", "keywords": [ @@ -31,15 +32,30 @@ "license": "MIT", "main": "./lib/index", "name": "postcss-pie", + "nyc": { + "lines": 100, + "statements": 100, + "functions": 100, + "branches": 100, + "include": [ + "lib/**/*.js" + ], + "reporter": [ + "lcov", + "text" + ], + "cache": true, + "all": true, + "check-coverage": true + }, "repository": { "type": "git", "url": "git+https://github.com/gucong3000/postcss-pie.git" }, "scripts": { - "lint": "node-version-gte-4 && eslint lib/* || echo \"ESLint not supported\"", - "coveralls": "npm run test-cov && coveralls < coverage/lcov.info", - "test": "npm run lint && mocha", - "test-cov": "istanbul cover node_modules/mocha/bin/_mocha" + "coveralls": "coveralls < coverage/lcov.info", + "pretest": "eslint lib test", + "test": "nyc mocha" }, - "version": "2.0.5" + "version": "3.0.0" } diff --git a/test/.eslintrc.json b/test/.eslintrc.json new file mode 100644 index 0000000..17231ba --- /dev/null +++ b/test/.eslintrc.json @@ -0,0 +1,10 @@ +{ + "env": { + "mocha": true + }, + "rules": { + "no-console": [ + "off" + ] + } +} diff --git a/test/fixtures/add-behavior-out.css b/test/fixtures/add-behavior-out.css deleted file mode 100644 index 9eb880b..0000000 --- a/test/fixtures/add-behavior-out.css +++ /dev/null @@ -1,16 +0,0 @@ -html { - -pie-load-path: "http://css3pie.com/pie"; -} - -.box-shadow { - behavior: url("/PIE/build/PIE.htc"); - behavior: none\9\0; - background: #fff; - box-shadow: #ccc 0 0 .25em; -} - -.gradient { - behavior: url("/PIE/build/PIE.htc"); - -pie-background: linear-gradient(#eef, #fff 70%); - background: linear-gradient(#eef, #fff 70%); -} \ No newline at end of file diff --git a/test/fixtures/add-behavior.css b/test/fixtures/add-behavior.css deleted file mode 100644 index 65a7fc8..0000000 --- a/test/fixtures/add-behavior.css +++ /dev/null @@ -1,8 +0,0 @@ -.box-shadow { - background: #fff; - box-shadow: #ccc 0 0 .25em; -} - -.gradient { - background: linear-gradient(#eef, #fff 70%); -} \ No newline at end of file diff --git a/test/fixtures/border-image-behavior-out.css b/test/fixtures/border-image-behavior-out.css new file mode 100644 index 0000000..1510c1a --- /dev/null +++ b/test/fixtures/border-image-behavior-out.css @@ -0,0 +1,9 @@ +html { + -pie-load-path: "http://css3pie.com/pie"; +} +#bitmap { + border: 30px solid transparent; + padding: 20px; + border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30; + behavior: url("/pie/PIE.htc"); +} diff --git a/test/fixtures/border-image-out.css b/test/fixtures/border-image-out.css new file mode 100644 index 0000000..a76aa1f --- /dev/null +++ b/test/fixtures/border-image-out.css @@ -0,0 +1,5 @@ +#bitmap { + border: 30px solid transparent; + padding: 20px; + border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30; +} diff --git a/test/fixtures/border-image.css b/test/fixtures/border-image.css new file mode 100644 index 0000000..a76aa1f --- /dev/null +++ b/test/fixtures/border-image.css @@ -0,0 +1,5 @@ +#bitmap { + border: 30px solid transparent; + padding: 20px; + border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30; +} diff --git a/test/fixtures/css3background-behavior-out.css b/test/fixtures/css3background-behavior-out.css new file mode 100644 index 0000000..976bf7a --- /dev/null +++ b/test/fixtures/css3background-behavior-out.css @@ -0,0 +1,28 @@ +html { + -pie-load-path: "http://css3pie.com/pie"; +} + +.test { + -pie-background: url(skin/p_103x196_1.jpg) no-repeat 10px 20px/60px 60px padding-box; + background: url(skin/p_103x196_1.jpg) no-repeat 10px 20px/60px 60px padding-box; + behavior: url("/pie/PIE.htc"); + behavior: none\9\0; +} + +.test { + -pie-background: url(skin/p_103x196_1.jpg) no-repeat 90px 100px/60px padding-box #aaa; + background: url(skin/p_103x196_1.jpg) no-repeat 90px 100px/60px padding-box #aaa; + behavior: url("/pie/PIE.htc"); + behavior: none\9\0; +} + +.test { + -pie-background: url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box; + background: url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box; + behavior: url("/PIE/build/PIE.htc"); + a {} +} + +.test { + background: url(skin/p_103x196_1.jpg) no-repeat 50px 60px; +} diff --git a/test/fixtures/css3background-out.css b/test/fixtures/css3background-out.css index 10a9e6c..06b20e9 100644 --- a/test/fixtures/css3background-out.css +++ b/test/fixtures/css3background-out.css @@ -11,6 +11,8 @@ .test { -pie-background: url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box; background: url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box; + behavior: url("/PIE/build/PIE.htc"); + a {} } .test { diff --git a/test/fixtures/css3background.css b/test/fixtures/css3background.css index c515846..2a16a2f 100644 --- a/test/fixtures/css3background.css +++ b/test/fixtures/css3background.css @@ -7,7 +7,10 @@ } .test { + -pie-background: url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box; background: url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box; + behavior: url("/PIE/build/PIE.htc"); + a {} } .test { diff --git a/test/fixtures/css3patterns-behavior-out.css b/test/fixtures/css3patterns-behavior-out.css new file mode 100644 index 0000000..1134a2a --- /dev/null +++ b/test/fixtures/css3patterns-behavior-out.css @@ -0,0 +1,626 @@ +html { + -pie-load-path: "http://css3pie.com/pie"; +} + +#Microbial-Mat { + -pie-background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, + radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), + #8a3; + background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, + radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), + #8a3; + background-size: 20px 20px; + behavior: url("/pie/PIE.htc"); +} + +#Stairs { + -pie-background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, + linear-gradient(63deg, transparent 74%, #999 78%), + linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), + #444; + background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, + linear-gradient(63deg, transparent 74%, #999 78%), + linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), + #444; + background-size: 16px 48px; + behavior: url("/pie/PIE.htc"); +} + +#Half-Rombes { + background: #36c; + -pie-background: linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, + linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, + linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px, + linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px, + #36c; + background: linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, + linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, + linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px, + linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px, + #36c; + background-size: 15px 30px; + behavior: url("/pie/PIE.htc"); +} + +#Arrows { + -pie-background: linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px, + linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px), + linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px); + background: linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px, + linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px), + linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px); + background-color: #e1ebbd; + background-size: 128px 128px; + behavior: url("/pie/PIE.htc"); +} + +#Zig-Zag { + -pie-background: linear-gradient(135deg, #eceddc 25%, transparent 25%) -50px 0, + linear-gradient(225deg, #eceddc 25%, transparent 25%) -50px 0, + linear-gradient(315deg, #eceddc 25%, transparent 25%), + linear-gradient(45deg, #eceddc 25%, transparent 25%); + background: linear-gradient(135deg, #eceddc 25%, transparent 25%) -50px 0, + linear-gradient(225deg, #eceddc 25%, transparent 25%) -50px 0, + linear-gradient(315deg, #eceddc 25%, transparent 25%), + linear-gradient(45deg, #eceddc 25%, transparent 25%); + background-size: 100px 100px; + background-color: #ec173a; + behavior: url("/pie/PIE.htc"); +} + +#Weave { + -pie-background: linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), + linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px; + background: linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), + linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px; + background-color: #708090; + background-size: 64px 128px; + behavior: url("/pie/PIE.htc"); +} + +#Upholstery { + -pie-background: radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, + radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, + radial-gradient(hsla(0, 100%, 30%, .8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, + radial-gradient(hsla(0, 100%, 30%, .8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, + radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, + radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, + radial-gradient(hsla(0, 100%, 15%, .7), hsla(0, 100%, 20%, 0)) 0 0, + radial-gradient(hsla(0, 100%, 15%, .7), hsla(0, 100%, 20%, 0)) 50px 50px, + linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, + linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0; + background: radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, + radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, + radial-gradient(hsla(0, 100%, 30%, .8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, + radial-gradient(hsla(0, 100%, 30%, .8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, + radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, + radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, + radial-gradient(hsla(0, 100%, 15%, .7), hsla(0, 100%, 20%, 0)) 0 0, + radial-gradient(hsla(0, 100%, 15%, .7), hsla(0, 100%, 20%, 0)) 50px 50px, + linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, + linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0; + background-color: #300; + background-size: 100px 100px; + behavior: url("/pie/PIE.htc"); +} + +#Starry-night { + background-color: black; + -pie-background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), + radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), + radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), + radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); + background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), + radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), + radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), + radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); + background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; + -pie-background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; + background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; + behavior: url("/pie/PIE.htc"); +} + +#Marrakesh { + background-color: white; + -pie-background-image: radial-gradient(midnightblue 9px, transparent 10px), + repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px); + background-image: radial-gradient(midnightblue 9px, transparent 10px), + repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px); + background-size: 30px 30px, 90px 90px; + background-position: 0 0; + behavior: url("/pie/PIE.htc"); +} + +#Rainbow-bokeh { + -pie-background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, + linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); + background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, + radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, + linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); + background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; + background-color: #840b2a; + behavior: url("/pie/PIE.htc"); +} + +#Carbon { + -pie-background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, + linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, + linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, + linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, + linear-gradient(90deg, #1b1b1b 10px, transparent 10px), + linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); + background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, + linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, + linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, + linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, + linear-gradient(90deg, #1b1b1b 10px, transparent 10px), + linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); + background-color: #131313; + background-size: 20px 20px; + behavior: url("/pie/PIE.htc"); +} + +#Carbon-fibre { + -pie-background: radial-gradient(black 15%, transparent 16%) 0 0, + radial-gradient(black 15%, transparent 16%) 8px 8px, + radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, + radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; + background: radial-gradient(black 15%, transparent 16%) 0 0, + radial-gradient(black 15%, transparent 16%) 8px 8px, + radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, + radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; + background-color: #282828; + background-size: 16px 16px; + behavior: url("/pie/PIE.htc"); +} + +#Hearts { + -pie-background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%), + radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%), + radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%), + radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%), + radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%), + + radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, + radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, + radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px, + radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px, + radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px; + background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%), + radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%), + radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%), + radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%), + radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%), + + radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, + radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, + radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px, + radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px, + radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px; + background-color: #b03; + background-size: 100px 100px; + behavior: url("/pie/PIE.htc"); +} + +#Argyle { + background-color: #6d695c; + -pie-background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), + repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), + linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), + linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); + background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), + repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), + linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), + linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); + background-size: 70px 120px; + behavior: url("/pie/PIE.htc"); +} + +#Steps { + background-color: #ff7d9d; + background-size: 58px 58px; + -pie-background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, + 0px 36px, 4px 2px, 29px 6px, 33px 30px; + background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, + 0px 36px, 4px 2px, 29px 6px, 33px 30px; + -pie-background-image: linear-gradient(335deg, #c90032 23px, transparent 23px), + linear-gradient(155deg, #c90032 23px, transparent 23px), + linear-gradient(335deg, #c90032 23px, transparent 23px), + linear-gradient(155deg, #c90032 23px, transparent 23px), + + linear-gradient(335deg, #c90032 10px, transparent 10px), + linear-gradient(155deg, #c90032 10px, transparent 10px), + linear-gradient(335deg, #c90032 10px, transparent 10px), + linear-gradient(155deg, #c90032 10px, transparent 10px); + background-image: linear-gradient(335deg, #c90032 23px, transparent 23px), + linear-gradient(155deg, #c90032 23px, transparent 23px), + linear-gradient(335deg, #c90032 23px, transparent 23px), + linear-gradient(155deg, #c90032 23px, transparent 23px), + + linear-gradient(335deg, #c90032 10px, transparent 10px), + linear-gradient(155deg, #c90032 10px, transparent 10px), + linear-gradient(335deg, #c90032 10px, transparent 10px), + linear-gradient(155deg, #c90032 10px, transparent 10px); + behavior: url("/pie/PIE.htc"); +} + +#Waves { + -pie-background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent), + radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px; + background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent), + radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px; + background-color: slategray; + background-size: 75px 100px; + behavior: url("/pie/PIE.htc"); +} + +#Cross { + -pie-background: radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), + radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px, + linear-gradient(#a8b1bb 8px, transparent 8px) 0 -4px, + linear-gradient(90deg, #a8b1bb 8px, transparent 8px) -4px 0; + background: radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), + radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px, + linear-gradient(#a8b1bb 8px, transparent 8px) 0 -4px, + linear-gradient(90deg, #a8b1bb 8px, transparent 8px) -4px 0; + background-color: slategray; + background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px; + behavior: url("/pie/PIE.htc"); +} + +#Yin-Yang { + -pie-background: radial-gradient(circle at 50% 59%, #d2caab 3%, #364e27 4%, #364e27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0, + radial-gradient(circle at 50% 41%, #364e27 3%, #d2caab 4%, #d2caab 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0, + radial-gradient(circle at 50% 59%, #d2caab 3%, #364e27 4%, #364e27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px, + radial-gradient(circle at 50% 41%, #364e27 3%, #d2caab 4%, #d2caab 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px, + radial-gradient(circle at 100% 50%, #d2caab 16%, rgba(210,202,171,0) 17%), + radial-gradient(circle at 0% 50%, #364e27 16%, rgba(54,78,39,0) 17%), + radial-gradient(circle at 100% 50%, #d2caab 16%, rgba(210,202,171,0) 17%) 50px 50px, + radial-gradient(circle at 0% 50%, #364e27 16%, rgba(54,78,39,0) 17%) 50px 50px; + background: radial-gradient(circle at 50% 59%, #d2caab 3%, #364e27 4%, #364e27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0, + radial-gradient(circle at 50% 41%, #364e27 3%, #d2caab 4%, #d2caab 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0, + radial-gradient(circle at 50% 59%, #d2caab 3%, #364e27 4%, #364e27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px, + radial-gradient(circle at 50% 41%, #364e27 3%, #d2caab 4%, #d2caab 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px, + radial-gradient(circle at 100% 50%, #d2caab 16%, rgba(210,202,171,0) 17%), + radial-gradient(circle at 0% 50%, #364e27 16%, rgba(54,78,39,0) 17%), + radial-gradient(circle at 100% 50%, #d2caab 16%, rgba(210,202,171,0) 17%) 50px 50px, + radial-gradient(circle at 0% 50%, #364e27 16%, rgba(54,78,39,0) 17%) 50px 50px; + background-color: #63773f; + background-size: 100px 100px; + behavior: url("/pie/PIE.htc"); +} + +#Stars { + -pie-background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, + linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, + linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, + linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, + linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, + linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, + + linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, + linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, + linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, + linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, + linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, + linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; + background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, + linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, + linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, + linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, + linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, + linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, + + linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, + linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, + linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, + linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, + linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, + linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; + background-color: #232927; + background-size: 100px 100px; + behavior: url("/pie/PIE.htc"); +} + +#Brady-Bunch { + -pie-background-image: radial-gradient(closest-side, transparent 0%, transparent 75%, #b6cc66 76%, #b6cc66 85%, #edffdb 86%, #edffdb 94%, #fff 95%, #fff 103%, #d9e6a7 104%, #d9e6a7 112%, #798b3c 113%, #798b3c 121%, #fff 122%, #fff 130%, #e0ead7 131%, #e0ead7 140%), + radial-gradient(closest-side, transparent 0%, transparent 75%, #b6cc66 76%, #b6cc66 85%, #edffdb 86%, #edffdb 94%, #fff 95%, #fff 103%, #d9e6a7 104%, #d9e6a7 112%, #798b3c 113%, #798b3c 121%, #fff 122%, #fff 130%, #e0ead7 131%, #e0ead7 140%); + background-image: radial-gradient(closest-side, transparent 0%, transparent 75%, #b6cc66 76%, #b6cc66 85%, #edffdb 86%, #edffdb 94%, #fff 95%, #fff 103%, #d9e6a7 104%, #d9e6a7 112%, #798b3c 113%, #798b3c 121%, #fff 122%, #fff 130%, #e0ead7 131%, #e0ead7 140%), + radial-gradient(closest-side, transparent 0%, transparent 75%, #b6cc66 76%, #b6cc66 85%, #edffdb 86%, #edffdb 94%, #fff 95%, #fff 103%, #d9e6a7 104%, #d9e6a7 112%, #798b3c 113%, #798b3c 121%, #fff 122%, #fff 130%, #e0ead7 131%, #e0ead7 140%); + background-size: 110px 110px; + background-color: #c8d3a7; + -pie-background-position: 0 0, 55px 55px; + background-position: 0 0, 55px 55px; + behavior: url("/pie/PIE.htc"); +} + +#Shippo { + background-color: #def; + -pie-background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%), + radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%); + background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%), + radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%); + background-size: 80px 80px; + -pie-background-position: 0 0, 40px 40px; + background-position: 0 0, 40px 40px; + behavior: url("/pie/PIE.htc"); +} + +#Bricks { + background-color: silver; + -pie-background-image: linear-gradient(335deg, #b00 23px, transparent 23px), + linear-gradient(155deg, #d00 23px, transparent 23px), + linear-gradient(335deg, #b00 23px, transparent 23px), + linear-gradient(155deg, #d00 23px, transparent 23px); + background-image: linear-gradient(335deg, #b00 23px, transparent 23px), + linear-gradient(155deg, #d00 23px, transparent 23px), + linear-gradient(335deg, #b00 23px, transparent 23px), + linear-gradient(155deg, #d00 23px, transparent 23px); + background-size: 58px 58px; + -pie-background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; + background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; + behavior: url("/pie/PIE.htc"); +} + +#Seigaiha { + background-color: silver; + -pie-background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), + radial-gradient(circle at 0 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), + radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), + radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), + radial-gradient(circle at 0 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent); + background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), + radial-gradient(circle at 0 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), + radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), + radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), + radial-gradient(circle at 0 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent); + background-size: 100px 50px; + behavior: url("/pie/PIE.htc"); +} + +#Japanese-cube { + background-color: #556; + -pie-background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), + linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), + linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), + linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), + linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), + linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); + background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), + linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), + linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), + linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), + linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), + linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); + background-size: 80px 140px; + -pie-background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; + background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; + behavior: url("/pie/PIE.htc"); +} + +#Polka-dot { + background-color: #001; + -pie-background-image: radial-gradient(white 15%, transparent 16%), + radial-gradient(white 15%, transparent 16%); + background-image: radial-gradient(white 15%, transparent 16%), + radial-gradient(white 15%, transparent 16%); + background-size: 60px 60px; + -pie-background-position: 0 0, 30px 30px; + background-position: 0 0, 30px 30px; + behavior: url("/pie/PIE.htc"); +} + +#Houndstooth { + -pie-background: linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, black 75%, black) 0 0, + linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, white 75%, white) 1em 1em, + linear-gradient(45deg, black 17%, transparent 17%, transparent 25%, black 25%, black 36%, transparent 36%, transparent 64%, black 64%, black 75%, transparent 75%, transparent 83%, black 83%) 1em 1em; + background: linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, black 75%, black) 0 0, + linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, white 75%, white) 1em 1em, + linear-gradient(45deg, black 17%, transparent 17%, transparent 25%, black 25%, black 36%, transparent 36%, transparent 64%, black 64%, black 75%, transparent 75%, transparent 83%, black 83%) 1em 1em; + background-color: white; + background-size: 2em 2em; + behavior: url("/pie/PIE.htc"); +} + +#Checkerboard { + background-color: #eee; + -pie-background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), + linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); + background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), + linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); + background-size: 60px 60px; + -pie-background-position: 0 0, 30px 30px; + background-position: 0 0, 30px 30px; + behavior: url("/pie/PIE.htc"); +} + +#Diagonal-checkerboard { + background-color: #eee; + -pie-background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), + linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); + background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), + linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); + background-size: 60px 60px; + behavior: url("/pie/PIE.htc"); +} + +#Tartan { + -pie-background-color: hsl(2, 57%, 40%); + background-color: hsl(2, 57%, 40%); + -pie-background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), + repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), + repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px); + background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), + repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), + repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px); + behavior: url("/pie/PIE.htc"); +} + +#Madras { + -pie-background-color: hsl(34, 53%, 82%); + background-color: hsl(34, 53%, 82%); + -pie-background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, .5) 5px, hsla(197, 62%, 11%, .5) 10px, + hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, .5) 35px, hsla(5, 53%, 63%, .5) 40px, + hsla(197, 62%, 11%, .5) 40px, hsla(197, 62%, 11%, .5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, + hsla(5, 53%, 63%, .5) 60px, hsla(5, 53%, 63%, .5) 70px, hsla(35, 91%, 65%, .5) 70px, hsla(35, 91%, 65%, .5) 80px, + hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, .5) 90px, hsla(5, 53%, 63%, .5) 110px, + hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, .5) 120px, hsla(197, 62%, 11%, .5) 140px + ), + repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, .5) 5px, hsla(197, 62%, 11%, .5) 10px, + hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, .5) 35px, hsla(5, 53%, 63%, .5) 40px, + hsla(197, 62%, 11%, .5) 40px, hsla(197, 62%, 11%, .5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, + hsla(5, 53%, 63%, .5) 60px, hsla(5, 53%, 63%, .5) 70px, hsla(35, 91%, 65%, .5) 70px, hsla(35, 91%, 65%, .5) 80px, + hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, .5) 90px, hsla(5, 53%, 63%, .5) 110px, + hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, .5) 140px, hsla(197, 62%, 11%, .5) 160px + ); + background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, .5) 5px, hsla(197, 62%, 11%, .5) 10px, + hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, .5) 35px, hsla(5, 53%, 63%, .5) 40px, + hsla(197, 62%, 11%, .5) 40px, hsla(197, 62%, 11%, .5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, + hsla(5, 53%, 63%, .5) 60px, hsla(5, 53%, 63%, .5) 70px, hsla(35, 91%, 65%, .5) 70px, hsla(35, 91%, 65%, .5) 80px, + hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, .5) 90px, hsla(5, 53%, 63%, .5) 110px, + hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, .5) 120px, hsla(197, 62%, 11%, .5) 140px + ), + repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, .5) 5px, hsla(197, 62%, 11%, .5) 10px, + hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, .5) 35px, hsla(5, 53%, 63%, .5) 40px, + hsla(197, 62%, 11%, .5) 40px, hsla(197, 62%, 11%, .5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, + hsla(5, 53%, 63%, .5) 60px, hsla(5, 53%, 63%, .5) 70px, hsla(35, 91%, 65%, .5) 70px, hsla(35, 91%, 65%, .5) 80px, + hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, .5) 90px, hsla(5, 53%, 63%, .5) 110px, + hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, .5) 140px, hsla(197, 62%, 11%, .5) 160px + ); + behavior: url("/pie/PIE.htc"); +} + +#Lined-paper { + background-color: #fff; + -pie-background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), + linear-gradient(#eee .1em, transparent .1em); + background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), + linear-gradient(#eee .1em, transparent .1em); + background-size: 100% 1.2em; + behavior: url("/pie/PIE.htc"); +} + +#Blueprint-grid { + background-color: #269; + -pie-background-image: linear-gradient(white 2px, transparent 2px), + linear-gradient(90deg, white 2px, transparent 2px), + linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); + background-image: linear-gradient(white 2px, transparent 2px), + linear-gradient(90deg, white 2px, transparent 2px), + linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); + background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; + -pie-background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; + background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; + behavior: url("/pie/PIE.htc"); +} + +#Tablecloth { + background-color: white; + -pie-background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), + linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); + background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), + linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); + background-size: 50px 50px; + behavior: url("/pie/PIE.htc"); +} + +#Diagonal-stripes { + background-color: gray; + -pie-background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); + background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); + behavior: url("/pie/PIE.htc"); +} + +#Cicada-stripes { + background-color: #026873; + -pie-background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), + linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), + linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), + linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%); + background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), + linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), + linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), + linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%); + background-size: 13px, 29px, 37px, 53px; + behavior: url("/pie/PIE.htc"); +} + +#Vertical-stripes { + background-color: gray; + -pie-background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%); + background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%); + background-size: 50px 50px; + behavior: url("/pie/PIE.htc"); +} + +#Horizontal-stripes { + background-color: gray; + -pie-background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%); + background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%); + background-size: 50px 50px; + behavior: url("/pie/PIE.htc"); +} + +#HoneyComb { + -pie-background: radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px, + radial-gradient(circle farthest-side at 0% 50%,#b71 24%,rgba(240,166,17,0) 0)19px 30px, + linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0, + linear-gradient(150deg,#fb1 24%,#b71 0,#b71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#b71 0,#b71 76%,#fb1 0)0 0, + linear-gradient(30deg,#fb1 24%,#b71 0,#b71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#b71 0,#b71 76%,#fb1 0)0 0, + linear-gradient(90deg,#b71 2%,#fb1 0,#fb1 98%,#b71 0%)0 0 #fb1; + background: radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px, + radial-gradient(circle farthest-side at 0% 50%,#b71 24%,rgba(240,166,17,0) 0)19px 30px, + linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0, + linear-gradient(150deg,#fb1 24%,#b71 0,#b71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#b71 0,#b71 76%,#fb1 0)0 0, + linear-gradient(30deg,#fb1 24%,#b71 0,#b71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#b71 0,#b71 76%,#fb1 0)0 0, + linear-gradient(90deg,#b71 2%,#fb1 0,#fb1 98%,#b71 0%)0 0 #fb1; + background-size: 40px 60px; + behavior: url("/pie/PIE.htc"); +} + +#Wave { + -pie-background: linear-gradient(#fff 50%, rgba(255,255,255,0) 0) 0 0, + radial-gradient(circle closest-side, #fff 53%, rgba(255,255,255,0) 0) 0 0, + radial-gradient(circle closest-side, #fff 50%, rgba(255,255,255,0) 0) 55px 0 #48b; + background: linear-gradient(#fff 50%, rgba(255,255,255,0) 0) 0 0, + radial-gradient(circle closest-side, #fff 53%, rgba(255,255,255,0) 0) 0 0, + radial-gradient(circle closest-side, #fff 50%, rgba(255,255,255,0) 0) 55px 0 #48b; + background-size: 110px 200px; + background-repeat: repeat-x; + behavior: url("/pie/PIE.htc"); +} + +#Pyramid { + -pie-background: linear-gradient(315deg, transparent 75%, #d45d55 0)-10px 0, + linear-gradient(45deg, transparent 75%, #d45d55 0)-10px 0, + linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0, + linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16; + background: linear-gradient(315deg, transparent 75%, #d45d55 0)-10px 0, + linear-gradient(45deg, transparent 75%, #d45d55 0)-10px 0, + linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0, + linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16; + background-size: 20px 20px; + behavior: url("/pie/PIE.htc"); +} + +#Chocolate-Weave { + -pie-background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0), + linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0), + linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753; + background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0), + linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0), + linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753; + background-size: 25px 25px; + behavior: url("/pie/PIE.htc"); +} diff --git a/test/fixtures/multiple-bg-behavior-out.css b/test/fixtures/multiple-bg-behavior-out.css new file mode 100644 index 0000000..2f97925 --- /dev/null +++ b/test/fixtures/multiple-bg-behavior-out.css @@ -0,0 +1,15 @@ +html { + -pie-load-path: "http://css3pie.com/pie"; +} +.test { + width: 300px; + height: 300px; + -pie-background: url(skin/p_103x196_1.jpg) no-repeat 10px 20px/60px 60px padding-box, + url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box, + url(skin/p_103x196_1.jpg) no-repeat 90px 100px/60px padding-box #aaa; + background: url(skin/p_103x196_1.jpg) no-repeat 10px 20px/60px 60px padding-box, + url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box, + url(skin/p_103x196_1.jpg) no-repeat 90px 100px/60px padding-box #aaa; + behavior: url("/pie/PIE.htc"); + behavior: none\9\0; +} diff --git a/test/index.js b/test/index.js index 7665707..009fe2c 100644 --- a/test/index.js +++ b/test/index.js @@ -1,62 +1,126 @@ -"use strict"; -/* global describe, it */ -var fs = require("fs"); -var assert = require("assert"); - -function process(css, postcssOpts, opts) { - var postcss = require("postcss"); - var processors = [ - require("..")(opts), - ]; - return postcss(processors).process(css, postcssOpts).css; -} - -process(".test-opts{}", undefined, { - htcPath: "PIE.htc", - pieLoadPath: "https://github.com/pie", -}); +'use strict'; +const assert = require('assert'); +const fs = require('fs'); +const postcss = require('postcss'); +const sinon = require('sinon'); +const pie = require('..'); -var files = fs.readdirSync("./test/fixtures"); +let files = fs.readdirSync('./test/fixtures'); -files = files.filter(function(filename) { +files = files.filter(function (filename) { return /\.css$/.test(filename) && !/-out\.css$/.test(filename); }); -describe("fixtures", function() { - var allRight = true; +function testFile (input, output, options) { + let real; + return postcss([ + pie(options), + ]).process(fs.readFileSync(input).toString(), { + from: input, + }).then(function (result) { + if (output) { + real = result.content; + assert.equal(fs.readFileSync(output).toString(), real); + } + }).catch(ex => { + if (real && output) { + fs.writeFileSync(output, real); + } + throw ex; + }); +} + +describe('fixtures', () => { - files.forEach(function(filename) { + files.forEach(function (filename) { - var testName = filename.replace(/\.\w+$/, ""); - var inputFile = "./test/fixtures/" + filename; - var input = fs.readFileSync(inputFile).toString(); - var output = ""; - try { - output = fs.readFileSync("./test/fixtures/" + testName + "-out.css").toString(); - } catch (ex) { + const input = './test/fixtures/' + filename; + const testName = filename.replace(/\.\w+$/, ''); - } - var real = process(input, { - from: inputFile, - }, testName === "add-behavior" ? { - htcPath: "/PIE/build/PIE.htc", - pieLoadPath: "http://css3pie.com/pie", - } : undefined); - - if (allRight) { - it(testName, function() { - assert.equal(output, real); + it(testName, () => { + return testFile(input, input.replace(/\.\w+$/, '-out.css')); + }); + + it(testName + ' with behavior', () => { + return testFile(input, input.replace(/\.\w+$/, '-behavior-out.css'), { + pieLoadPath: 'http://css3pie.com/pie', + htcPath: '/pie/PIE.htc', }); - } + }); + }); +}); - if (input === real) { - console.error(inputFile); - } +describe('options error', () => { - if (real !== output) { - allRight = false; - // fs.writeFileSync("./test/fixtures/" + testName + "-out.css", real); - return false; - } + function waitExitCode () { + return new Promise(resolve => { + const timer = setInterval(() => { + if (process.exit.called) { + clearInterval(timer); + resolve(process.exit.lastCall.args[0]); + } + }, 20); + }); + } + + beforeEach(() => { + sinon.stub(process, 'exit'); + sinon.stub(console, 'error'); + }); + + afterEach(() => { + process.exit.restore(); + console.error.restore(); }); + + it('invalid htcPath', () => { + const result = waitExitCode().then((exitCode) => { + const message = console.error.lastCall.args[0].split(/\n\s+/)[0]; + assert.equal(message, 'invalid `options.htcPath`, Expect absolute path or URL.'); + assert.ok(exitCode); + }); + pie({ + htcPath: 'invalid', + }); + return result; + }); + + it('invalid pieLoadPath', () => { + const result = waitExitCode().then((exitCode) => { + const message = console.error.lastCall.args[0].split(/\n\s+/)[0]; + assert.equal(message, 'invalid `options.pieLoadPath`, Expect URL.'); + assert.ok(exitCode); + }); + pie({ + pieLoadPath: 'invalid', + }); + return result; + }); + + it('invalid htcPath `content-type`', function () { + this.timeout(30000); + const result = waitExitCode().then((exitCode) => { + const message = console.error.lastCall.args[0]; + assert.ok(/Invalid `content-type`/i.test(message), message); + assert.ok(exitCode); + }); + pie({ + htcPath: '//github.com/lojjic/PIE', + }); + return result; + }); + + it('pieLoadPath 404', function () { + this.timeout(30000); + const result = waitExitCode().then((exitCode) => { + const message = console.error.lastCall.args[0]; + assert.ok(/Response code 404 \(Not Found\)/i.test(message), message); + assert.ok(exitCode); + }); + pie({ + pieLoadPath: '//github.com/lojjic/PIE', + }); + return result; + }); + });