| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| */ |
| import { |
| supportHairlines, |
| supportSticky, |
| autoPrefix, |
| normalizeStyle, |
| normalizeString, |
| normalizeNumber, |
| normalizeUnitsNum, |
| addTransform, |
| addTranslateX, |
| trimComment |
| } from '../../../../render/vue/utils/style' |
| import { |
| init |
| } from '../../../../render/vue/env/viewport' |
| |
| function trimSpace (str) { |
| return str.replace(/\s/g, '') |
| } |
| |
| describe('style', function () { |
| // const rect = document.documentElement.getBoundingClientRect() |
| // const info = {} |
| 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 |
| 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`) |
| }) |
| it('should normalize style object', () => { |
| const style = { |
| width: '200px', |
| flexDirection: 'row', |
| flex: 1, |
| fontSize: 12, |
| transform: 'translate3d(100px, 100px, 0)', |
| // just for run default branch |
| reg: /^(\d+)/ |
| } |
| const res = normalizeStyle(style) |
| 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 |
| 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(trimSpace(node.style.transform)).to.be.equal( |
| trimSpace(style.translate + nodeStyle.scale + style.rotate)) |
| // webkitTransform will remove last whitespace automatically |
| expect(trimSpace(node.style.webkitTransform)).to.be.equal( |
| trimSpace(style.translate + nodeStyle.scale + style.rotate) |
| ) |
| }) |
| it('should replace all transform properties', () => { |
| addTransform(node, style, true) |
| expect(trimSpace(node.style.transform)).to.be.equal( |
| trimSpace(style.translate + style.rotate)) |
| // webkitTransform will remove last whitespace automatically |
| expect(trimSpace(node.style.webkitTransform)).to.be.equal( |
| trimSpace(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' |
| } |
| 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(trimSpace(node.style.transform)).to.be.equal( |
| trimSpace(nodeStyle.translate.replace(translateReg, translateReplaceFunction) |
| + nodeStyle.scale |
| + nodeStyle.rotate)) |
| // webkitTransform will remove last whitespace automatically |
| expect(trimSpace(node.style.webkitTransform)).to.be.equal( |
| trimSpace(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(trimSpace(node.style.transform)).to.be.equal( |
| trimSpace(nodeStyle.scale + nodeStyle.rotate + defaultTranslate.replace(translateReg, translateReplaceFunction))) |
| // webkitTransform will remove last whitespace automatically |
| expect(trimSpace(node.style.webkitTransform)).to.be.equal( |
| trimSpace(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(trimSpace(node.style.transform)).to.be.equal( |
| trimSpace(nodeStyle.scale + nodeStyle.rotate)) |
| expect(trimSpace(node.style.webkitTransform)).to.be.equal( |
| trimSpace(nodeStyle.scale + nodeStyle.rotate) |
| ) |
| }) |
| }) |
| }) |
| describe('autoPrefix', () => { |
| const style = { |
| width: '200px', |
| flexDirection: 'row', |
| flex: 1, |
| transform: 'translate3d(100px, 100px, 0)' |
| } |
| it('should add prefix for styles.', () => { |
| const res = autoPrefix(style) |
| const { |
| WebkitBoxDirection, |
| WebkitBoxOrient, |
| WebkitFlexDirection, |
| flexDirection, |
| WebkitTransform, |
| transform, |
| width |
| } = res |
| expect(WebkitBoxDirection).to.equal('normal') |
| expect(WebkitBoxOrient).to.equal('horizontal') |
| expect(WebkitFlexDirection).to.equal('row') |
| expect(flexDirection).to.equal('row') |
| expect(WebkitTransform).to.equal('translate3d(100px, 100px, 0)') |
| expect(transform).to.equal('translate3d(100px, 100px, 0)') |
| expect(width).to.equal('200px') |
| }) |
| }) |
