Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
大约 1 年 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts

体验新版 GitCode，发现更多精彩内容 >>

提交 39c9aeca 编写于 作者: B bayanxing
浏览文件
操作

modify testcase svg 

Signed-off-by: Nbayanxing <bayanxing@kaihongdigi.com>
上级 326bbe1f
隐藏空白更改
内联 并排
Showing with 263 addition and 361 deletion
ace/ace_standard/src/main/js/default/pages/animate/index.hml
浏览文件 @ 39c9aeca
<!-- xxx.hml -->
<div class="container">
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="150" height="150" class="svg-style">
<circle cx="60" cy="60" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="r" from="0" to="30" dur="2000" repeatCount="1"></animate>
</circle>
<circle cx="110" cy="110" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="r" from="0" to="30" dur="2000" repeatCount="1" fill="freeze"></animate>
</circle>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="150" height="150" class="svg-style">
<rect x="25" y="25" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="rx" from="0" to="30" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="1000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="150" height="150" class="svg-style">
<text x="25" y="25" font-size="30px" fill="red">
animate
<animate attributeName="y" values="25;90;150;80" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
<animate attributeName="x" values="25;100;30;0" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
<animate attributeName="fill" values="red;blue;#00ff00;#888888" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
</text>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="150" height="150" class="svg-style">
<path d="M0,0 Q40,40 60,80 Q90,60 100,120 Q100,0 150,150" stroke="red"
fill="none"></path>
<text>
<textpath fill="blue" path="M0,0 Q40,40 60,80 Q90,60 100,120 Q100,0 150,150"
font-size="16px" startOffset="0%">
animate
<animate attributeName="startOffset" values="0%;40%;60%;80%" keyTimes="0.5;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
</textpath>
</text>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果5
</text>
<svg width="150" height="150" class="svg-style">
<rect x="25" y="25" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="fill" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite" calcMode="discrete">
</animate>
</rect>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果6
</text>
<svg width="150" height="150" class="svg-style">
<rect x="25" y="25" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="fill" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
</div>
</div>
<svg fill="white" width="600" height="600">
<circle cx="60" cy="70" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="r" from="0" to="50" dur="2000" repeatCount="indefinite"></animate>
<animate attributeName="cx" from="60" to="200" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="60" cy="200" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="stroke-width" from="4" to="10" calcMode="discrete" dur="2000" repeatCount="indefinite"></animate>
<animate attributeName="stroke" values="red;blue" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="180" cy="200" r="50" stroke-width="10" stroke="red" stroke-dasharray="60 10" stroke-dashoffset="3">
<animate attributeName="stroke-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate>
<animate attributeName="stroke-dashoffset" values="30;0;30" dur="500" repeatCount="indefinite"></animate>
<animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="180" cy="200" r="5" fill="blue">
<animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="60" cy="380" r="50" fill="blue">
<animate attributeName="fill" values="red;blue" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="180" cy="380" r="50" fill="blue">
<animate attributeName="fill-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate>
</circle>
</svg>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/animateMotion/index.css
浏览文件 @ 39c9aeca
.container {
width: 100%;
flex-direction: column;
align-items: center;
}
.title{
font-size: 18px;
color: grey;
padding: 5px;
text-align: center;
}
.svg-style{
border: 1px solid #000000;
}
.outerBox{
flex-direction: column;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml
浏览文件 @ 39c9aeca
<!-- xxx.hml -->
<div class="container">
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
</animateMotion>
</path>>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="1" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
</animateMotion>
</path>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
</animateMotion>
</path>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="1" fill="freeze" rotate="5" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120, 0 z">
</animateMotion>
</path>
</svg>
</div>
</div>
</div>
<svg fill="white" width="400" height="400">
<path fill="none" stroke="blue" stroke-width="3" d="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,160,100 160,0 c0,-100,-160,100 -160,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="m40,130 c0,-100 160,100 160,0 c0,-100,-160,100 -160,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="45"path="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></animateMotion>
</path>
</svg>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/animateTransform/index.css
浏览文件 @ 39c9aeca
/* xxx.css */
.container {
width: 100%;
flex-direction: column;
align-items: center;
padding-bottom: 40px;
}
.title{
font-size: 18px;
color: grey;
padding: 5px;
text-align: center;
}
.svg-style{
border: 1px solid #000000;
}
.outerBox{
flex-direction: column;
}
justify-content: flex-start;
align-items: flex-start;
background-color: #f8f8ff;
}
.back_container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1000px;
width: 1080px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml
浏览文件 @ 39c9aeca
<!-- xxx.hml -->
<div class="container">
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="150" height="150" class="svg-style">
<circle cx="40" cy="40" r="20" stroke-width="4" fill="white" stroke="blue">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 120"
to="150 60 90" dur="3s" repeatCount="indefinite">
</animateTransform>
</circle>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="150" height="150" class="svg-style">
<circle cx="30" cy="100" r="20" stroke-width="4" fill="white" stroke="blue">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0"
to="-100" dur="3s" repeatCount="1">
</animateTransform>
</circle>
</svg>
</div>
<div class="back_container">
<svg>
<polygon points="60,30 90,90 30,90" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="green">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0; 5; 0; 10" keyTimes="0;
0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2"
keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2"
keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="skewX" values="0; 10; 0; 10"
keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
</svg>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="150" height="150" class="svg-style">
<ellipse cx="50" cy="50" rx="30" ry="20" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s"
repeatCount="indefinite">
</animateTransform>
</ellipse>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="150" height="150" class="svg-style">
<ellipse cx="50" cy="50" rx="30" ry="20" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s"
repeatCount="1" fill="freeze">
</animateTransform>
</ellipse>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果5
</text>
<svg width="150" height="150" class="svg-style">
<line x1="10" x2="90" y1="75" y2="75" stroke-width="10" stroke="black" stroke-linecap="square">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="100"
dur="3s" repeatCount="indefinite">
</animateTransform>
</line>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果6
</text>
<svg width="150" height="150" class="svg-style">
<line x1="10" x2="90" y1="35" y2="35" stroke-width="10" stroke="black" stroke-linecap="square">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 100"
dur="3s" repeatCount="indefinite">
</animateTransform>
</line>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果7
</text>
<svg width="150" height="150" class="svg-style">
<path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
d="M1,19 l17,-13 l7,23 m0,0 l13.5,33 l13.5 ,-43 m0,0 l32 ,-13 l42 ,13 m0,0 l10.75,93">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3"
dur="3s" repeatCount="indefinite">
</animateTransform>
</path>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果8
</text>
<svg width="150" height="150" class="svg-style">
<path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
d="M1,19 l17,-13 l7,23 m0,0 l13.5,33 l13.5 ,-43 m0,0 l32 ,-13 l42 ,13 m0,0 l10.75,93">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 6"
dur="3s" repeatCount="indefinite">
</animateTransform>
</path>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果9
</text>
<svg width="150" height="150" class="svg-style">
<polygon points="10,20 40,40 30,60" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polygon>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果10
</text>
<svg width="150" height="150" class="svg-style">
<polygon points="10,20 40,40 30,60" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polygon>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果11
</text>
<svg width="150" height="150" class="svg-style">
<polyline points="10,150 50,125 50,150 100,100" fill="white" stroke="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="0" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="150" to="90" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polyline>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果12
</text>
<svg width="150" height="150" class="svg-style">
<rect width="100" height="100" x="25" y="25" stroke-width="10" stroke="red" rx="10" ry="10"
stroke-dasharray="5 3" stroke-dashoffset="3">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2"
dur="3s" repeatCount="indefinite">
</animateTransform>
<animate attributeName="stroke" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果13
</text>
<svg width="150" height="150" class="svg-style">
<text x="10" y="10" fill="#D2691E" font-size="12">
animateTransform
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="5"
dur="3s" repeatCount="indefinite">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 90"
dur="3s" repeatCount="indefinite">
</animateTransform>
</text>
</svg>
</div>
</div>
</div>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/test/List.test.js
浏览文件 @ 39c9aeca
......@@ -15,5 +15,7 @@
require('./basicabilityapi.test.js')
require('./mediaquery.test.js')
require('./commonComponentJsApi.test.js')
require('./divProps.test.js')
//require('./commonComponentJsApi.test.js')
//require('./divProps.test.js')
require('./componentJsApi.test.js')
ace/ace_standard/src/main/js/default/test/componentJsApi.test.js 0 → 100644
浏览文件 @ 39c9aeca
/*
* Copyright (C) 2021 Huawei Device Co., Ltd.
* Licensed 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 router from '@system.router';
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from 'deccjsunit/index';
describe('aceJsTest', function () {
async function sleep(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, time)
}).then(() => {
console.info(`sleep ${time} over...`)
})
}
async function backToIndex() {
let backToIndexPromise = new Promise((resolve, reject) => {
setTimeout(() => {
router.back({
uri: 'pages/index/index'
});
resolve();
}, 500);
});
let clearPromise = new Promise((resolve, reject) => {
setTimeout(() => {
router.clear();
resolve();
}, 500);
});
await backToIndexPromise.then(() => {
return clearPromise;
});
}
/**
* run after testcase
*/
afterEach(async function () {
console.info('[aceJsTest] after each called')
await backToIndex();
await sleep(5000)
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testAnimateComponent
* @tc.desc ACE
*/
it('testAnimateComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/animate/index'
}
try {
result = router.push(options)
console.info("push animate page success " + JSON.stringify(result));
} catch (err) {
console.error("push animate page error " + JSON.stringify(result));
}
await sleep(5000)
let pages = router.getState();
console.info("[router.animate] getState" + JSON.stringify(pages));
expect("pages/animate/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testAnimateMotionComponent
* @tc.desc ACE
*/
it('testAnimateMotionComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/animateMotion/index'
}
try {
result = router.push(options)
console.info("push animateMotion page success " + JSON.stringify(result));
} catch (err) {
console.error("push animateMotion page error " + JSON.stringify(result));
}
await sleep(5000)
let pages = router.getState();
console.info("[router.animateMotion] getState" + JSON.stringify(pages));
expect("pages/animateMotion/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testAnimateTransformComponent
* @tc.desc ACE
*/
it('testAnimateTransformComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/animateTransform/index'
}
try {
result = router.push(options)
console.info("push animateTransform page success " + JSON.stringify(result));
} catch (err) {
console.error("push animateTransform page error " + JSON.stringify(result));
}
await sleep(5000)
let pages = router.getState();
console.info("[router.animateTransform] getState" + JSON.stringify(pages));
expect("pages/animateTransform/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testTextPathComponent
* @tc.desc ACE
*/
it('testTextPathComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/textPath/index'
}
try {
result = router.push(options)
console.info("push textPath page success " + JSON.stringify(result));
} catch (err) {
console.error("push textPath page error " + JSON.stringify(result));
}
await sleep(5000)
let pages = router.getState();
console.info("[router.textPath] getState" + JSON.stringify(pages));
expect("pages/textPath/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testTspanComponent
* @tc.desc ACE
*/
it('testTspanComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/tspan/index'
}
try {
result = router.push(options)
console.info("push tspan page success " + JSON.stringify(result));
} catch (err) {
console.error("push tspan page error " + JSON.stringify(result));
}
await sleep(5000)
let pages = router.getState();
console.info("[router.tspan] getState" + JSON.stringify(pages));
expect("pages/tspan/").assertEqual(pages.path);
done();
});
});
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或