* [html5] fix gradient.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/91468cf8 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/91468cf8 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/91468cf8 Branch: refs/heads/0.12-dev Commit: 91468cf8e70852e4edffec9931ecbe85582ffda8 Parents: 4c6c9ce Author: MrRaindrop <tekk...@gmail.com> Authored: Mon Apr 17 22:35:16 2017 +0800 Committer: MrRaindrop <tekk...@gmail.com> Committed: Mon Apr 17 22:35:16 2017 +0800 ---------------------------------------------------------------------- html5/render/vue/core/style.js | 33 ++++++++++++++++++-- html5/test/render/vue/core/style.js | 15 ++++++++- .../render/vue/data/dotvue/scoped-style.vue | 12 +++++++ 3 files changed, 57 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/91468cf8/html5/render/vue/core/style.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/core/style.js b/html5/render/vue/core/style.js index e370c0d..5383ff9 100644 --- a/html5/render/vue/core/style.js +++ b/html5/render/vue/core/style.js @@ -190,13 +190,42 @@ export function getComponentStyle (context, extract) { } return {} } - const style = {} + let style = {} let vnode = context.$vnode while (vnode) { extend(style, getStyle(vnode, extract)) vnode = vnode.parent } - return addPrefix(normalizeStyle(style)) + style = addPrefix(normalizeStyle(style)) + /** + * when prefixed value is a array, it should be applied to element + * during the next tick. + * e.g. + * background-image: linear-gradient(to top,#f5fefd,#ffffff); + * will generate: + * { + * backgroundImage: [ + * "-webkit-linear-gradient(to top,#f5fefd,#ffffff)", + * "-moz-linear-gradient(to top,#f5fefd,#ffffff)", + * "linear-gradient(to top,#f5fefd,#ffffff)"] + * } + */ + for (const k in style) { + if (Array.isArray(style[k])) { + const vals = style[k] + context.$nextTick(function () { + const el = context.$el + if (el) { + for (let i = 0; i < vals.length; i++) { + el.style[k] = vals[i] + } + } + }) + delete style[k] + } + } + return style + // return addPrefix(normalizeStyle(style)) } export function extractComponentStyle (context) { http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/91468cf8/html5/test/render/vue/core/style.js ---------------------------------------------------------------------- diff --git a/html5/test/render/vue/core/style.js b/html5/test/render/vue/core/style.js index 4e1ac54..00bc59a 100644 --- a/html5/test/render/vue/core/style.js +++ b/html5/test/render/vue/core/style.js @@ -45,7 +45,7 @@ init('core style', (Vue, helper) => { helper.register('image', image) }) - it('should get normalized merged styles.', function () { + it('should get normalized merged styles.', function (done) { const vm = helper.createVm(scopedStyleBundle) const el = vm.$refs.foo.$el || vm.$refs.foo expect(el).to.be.ok @@ -79,5 +79,18 @@ init('core style', (Vue, helper) => { transformRes.push(el.style[k] === expectedTransform[k]) } expect(transformRes).to.include(true) + + const id = 'test-style' + helper.registerDone(id, () => { + expect(el.style.backgroundImage).to.match( + /(?:-webkit-|-moz-|-ms-|-o-)?linear-gradient\(to top, (?:rgb\(245, 254, 253\)|#f5fefd), (?:rgb\(255, 255, 255\)|#ffffff)\)/) + expect(['-webkit-box', + '-moz-box', + '-ms-flexbox', + '-webkit-flex', + 'flex']).to.include(el.style.display) + helper.unregisterDone(id) + done() + }) }) }) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/91468cf8/html5/test/render/vue/data/dotvue/scoped-style.vue ---------------------------------------------------------------------- diff --git a/html5/test/render/vue/data/dotvue/scoped-style.vue b/html5/test/render/vue/data/dotvue/scoped-style.vue index 67c1bb8..e8ceff8 100644 --- a/html5/test/render/vue/data/dotvue/scoped-style.vue +++ b/html5/test/render/vue/data/dotvue/scoped-style.vue @@ -6,8 +6,20 @@ <style scoped> .ct { + display: flex; width: 200px; flex-direction: row; transform: translate3d(100px, 100px, 0); + background-image: linear-gradient(to top, #f5fefd, #ffffff); } </style> + +<script> + module.exports = { + mounted () { + setTimeout(() => { + this.done('test-style') + }, 1000) + } + } +</script>