You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/04/24 09:33:23 UTC
[05/51] [abbrv] incubator-weex git commit: * [html5] fix gradient.
* [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.13-dev
Commit: 91468cf8e70852e4edffec9931ecbe85582ffda8
Parents: 4c6c9ce
Author: MrRaindrop <te...@gmail.com>
Authored: Mon Apr 17 22:35:16 2017 +0800
Committer: MrRaindrop <te...@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>