* [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 <faterr...@gmail.com> Authored: Tue Jul 18 16:32:38 2017 +0800 Committer: erha19 <faterr...@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 {