You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by da...@apache.org on 2017/07/20 08:30:14 UTC
[44/50] incubator-weex git commit: * [html5] improve style unit test
case
* [html5] improve style unit test case
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/9c84d237
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/9c84d237
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/9c84d237
Branch: refs/heads/0.15-dev
Commit: 9c84d23729d424d18d7c0a2c474dc339f4617067
Parents: 646ce6b
Author: erha19 <fa...@gmail.com>
Authored: Tue Jul 18 16:32:38 2017 +0800
Committer: erha19 <fa...@gmail.com>
Committed: Tue Jul 18 16:32:38 2017 +0800
----------------------------------------------------------------------
html5/test/render/vue/utils/style.js | 119 +++++++++++++++++++++++++-----
1 file changed, 100 insertions(+), 19 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/9c84d237/html5/test/render/vue/utils/style.js
----------------------------------------------------------------------
diff --git a/html5/test/render/vue/utils/style.js b/html5/test/render/vue/utils/style.js
index 6bc1a78..2110f23 100644
--- a/html5/test/render/vue/utils/style.js
+++ b/html5/test/render/vue/utils/style.js
@@ -24,71 +24,153 @@ import {
normalizeString,
normalizeNumber,
normalizeUnitsNum,
+ addTransform,
+ addTranslateX,
trimComment
} from '../../../../render/vue/utils/style'
-import { init } from '../../../../render/vue/env/viewport'
-
+import {
+ init
+} from '../../../../render/vue/env/viewport'
describe('style', function () {
// const rect = document.documentElement.getBoundingClientRect()
// const info = {}
- const { scale, dpr } = init()
+ const {
+ scale,
+ dpr
+ } = init()
it('should support using 0.5px to paint 1px width border', () => {
expect(supportHairlines()).to.be.false
window.devicePixelRatio = 2
- // phantomjs didn't support using 0.5px to paint 1px width border
+ // phantomjs didn't support using 0.5px to paint 1px width border
expect(supportHairlines()).to.be.false
})
it('should support stick style', () => {
// phantomjs support stick true
expect(supportSticky()).to.be.true
})
-
it('should normalize units numbers', () => {
expect(normalizeUnitsNum('100px')).to.equal(100 * scale + 'px')
expect(normalizeUnitsNum('100')).to.equal(100 * scale + 'px')
expect(normalizeUnitsNum('100wx')).to.equal(100 * scale * dpr + 'px')
expect(normalizeUnitsNum('20wm')).to.equal('')
})
-
it('should normalize number style vals', () => {
expect(normalizeNumber('width', 10)).to.equal(10 * scale + 'px')
expect(normalizeNumber('width', 1.2)).to.equal(1.2 * scale + 'px')
})
-
it('should normalize string style vals', () => {
expect(normalizeString('width', '100%')).to.equal('100%')
- expect(normalizeString('transform', 'translate3d(10px, 10px, 10px)'))
- .to.equal(`translate3d(${10 * scale}px, ${10 * scale}px, ${10 * scale}px)`)
- expect(normalizeString('border-bottom', '4px solid #112233'))
- .to.equal(`${4 * scale}px solid #112233`)
- expect(normalizeString('border-left', '4wx dotted red'))
- .to.equal(`${4 * scale * dpr}px dotted red`)
+ expect(normalizeString('transform', 'translate3d(10px, 10px, 10px)')).to.equal(`translate3d(${10 * scale}px, ${10 * scale}px, ${10 * scale}px)`)
+ expect(normalizeString('border-bottom', '4px solid #112233')).to.equal(`${4 * scale}px solid #112233`)
+ expect(normalizeString('border-left', '4wx dotted red')).to.equal(`${4 * scale * dpr}px dotted red`)
})
-
it('should normalize style object', () => {
const style = {
width: '200px',
flexDirection: 'row',
flex: 1,
fontSize: 12,
- transform: 'translate3d(100px, 100px, 0)'
+ transform: 'translate3d(100px, 100px, 0)',
+ // just for run default branch
+ reg: /^(\d+)/
}
const res = normalizeStyle(style)
- console.log(res)
expect(normalizeString('transform', style.transform)).to.equal(res.transform)
expect(normalizeString('width', style.width)).to.equal(res.width)
expect(normalizeString('flexDirection', style.flexDirection)).to.equal(res.flexDirection)
expect(normalizeNumber('fontSize', style.fontSize)).to.equal(res.fontSize)
- // flex is in noUnitsNumberKeys array
+ // flex is in noUnitsNumberKeys array
expect(style.flex).to.equal(res.flex)
+ expect(style.reg).to.equal(res.reg)
})
-
it('should trim comment in style.', () => {
const cssText = '.ani-point0[data-v-4c05cc1a] {\n left: 88px;\n top: 88px;\n}\n.ani-point1[data-v-4c05cc1a] {\n /* left: 43px;\n top: 71px;*/\n}'
const trimmed = '.ani-point0[data-v-4c05cc1a] {\n left: 88px;\n top: 88px;\n}\n.ani-point1[data-v-4c05cc1a] {\n \n}'
expect(trimComment(cssText)).to.equal(trimmed)
})
})
+describe('transform', () => {
+ describe('should add translate style to the element', () => {
+ const style = {
+ translate: 'translate3d(2px, 2px, 2px)',
+ rotate: 'rotate(30deg)'
+ }
+ const nodeStyle = {
+ translate: 'translate3d(5px, 5px, 5px)',
+ scale: 'scale(0.5)',
+ rotate: 'rotate(50deg)'
+ }
+ let node = null
+ beforeEach(() => {
+ node = document.createElement('div')
+ node.style.transform = nodeStyle.translate + ' ' + nodeStyle.scale + ' ' + nodeStyle.rotate
+ node.style.webkitTransform = nodeStyle.translate + ' ' + nodeStyle.scale + ' ' + nodeStyle.rotate
+ })
+ it('should inherit transform properties from element', () => {
+ addTransform(node, style, false)
+ expect(node.style.transform).to.be.equal(style.translate + ' ' + nodeStyle.scale + ' ' + style.rotate + ' ')
+ // webkitTransform will remove last whitespace automatically
+ expect(node.style.webkitTransform).to.be.equal(style.translate + ' ' + nodeStyle.scale + ' ' + style.rotate)
+ })
+ it('should replace all transform properties', () => {
+ addTransform(node, style, true)
+ expect(node.style.transform).to.be.equal(style.translate + ' ' + style.rotate + ' ')
+ // webkitTransform will remove last whitespace automatically
+ expect(node.style.webkitTransform).to.be.equal(style.translate + ' ' + style.rotate)
+ })
+ })
+ describe('should add translate X to the element', () => {
+ const nodeStyle = {
+ translate: 'translate3d(5px, 5px, 5px)',
+ scale: 'scale(0.5)',
+ rotate: 'rotate(50deg)'
+ }
+ let node = null
+ beforeEach(() => {
+ node = document.createElement('div')
+ // node.style.transform = nodeStyle.translate+' '+nodeStyle.scale+' '+ nodeStyle.rotate
+ // node.style.webkitTransform = nodeStyle.translate+' '+nodeStyle.scale+' '+ nodeStyle.rotate
+ })
+ it('should element has translate property', () => {
+ const toAdd = 2
+ const translateReg = /[+-\d.]+[pw]x/
+ const translateReplaceFunction = ($0) => {
+ return (parseFloat($0) + toAdd) + 'px'
+ }
+ const removeSpaceReg = /(\s?)/g
+ node.style.transform = nodeStyle.translate + ' ' + nodeStyle.scale + ' ' + nodeStyle.rotate
+ node.style.webkitTransform = nodeStyle.translate + ' ' + nodeStyle.scale + ' ' + nodeStyle.rotate
+ addTranslateX(node, toAdd)
+ // webkitTransform will reserved whitespace between translate value but transform will not.
+ expect(node.style.transform).to.be.equal(nodeStyle.translate.replace(translateReg, translateReplaceFunction).replace(removeSpaceReg, '') + ' ' + nodeStyle.scale + ' ' + nodeStyle.rotate + ' ')
+ // webkitTransform will remove last whitespace automatically
+ expect(node.style.webkitTransform).to.be.equal(nodeStyle.translate.replace(translateReg, translateReplaceFunction) + ' ' + nodeStyle.scale + ' ' + nodeStyle.rotate)
+ })
+ it('should element does not have translate property', () => {
+ const toAdd = 2
+ const translateReg = /[+-\d.]+[pw]x/
+ const translateReplaceFunction = ($0) => {
+ return (parseFloat($0) + toAdd) + 'px'
+ }
+ const defaultTranslate = 'translate3d(0px, 0px, 0px)'
+ node.style.transform = nodeStyle.scale + ' ' + nodeStyle.rotate
+ node.style.webkitTransform = nodeStyle.scale + ' ' + nodeStyle.rotate
+ addTranslateX(node, toAdd)
+ // transform will reserved whitespace when translate on the last position.
+ expect(node.style.transform).to.be.equal(nodeStyle.scale + ' ' + nodeStyle.rotate + ' ' + defaultTranslate.replace(translateReg, translateReplaceFunction) + ' ')
+ // webkitTransform will remove last whitespace automatically
+ expect(node.style.webkitTransform).to.be.equal(nodeStyle.scale + ' ' + nodeStyle.rotate + ' ' + defaultTranslate.replace(translateReg, translateReplaceFunction))
+ })
+ it('should elemet remain', () => {
+ const toAdd = 0
+ node.style.transform = nodeStyle.scale + ' ' + nodeStyle.rotate
+ node.style.webkitTransform = nodeStyle.scale + ' ' + nodeStyle.rotate
+ addTranslateX(node, toAdd)
+ expect(node.style.transform).to.be.equal(nodeStyle.scale + ' ' + nodeStyle.rotate)
+ expect(node.style.webkitTransform).to.be.equal(nodeStyle.scale + ' ' + nodeStyle.rotate)
+ })
+ })
+})
describe('autoPrefix', () => {
const style = {
width: '200px',
@@ -96,7 +178,6 @@ describe('autoPrefix', () => {
flex: 1,
transform: 'translate3d(100px, 100px, 0)'
}
-
it('should add prefix for styles.', () => {
const res = autoPrefix(style)
const {