提交 ed95ee9b 编写于 作者: D dongwei 提交者: wanggang

add test cases

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 eb9203dd
......@@ -138,13 +138,45 @@
<text id="showPropNone"
show="">
</text>
<text class="sub-title">
特有属性 -- shareid
</text>
<text class="propNewAdd"
shareid="shareImage">
</text>
<text class="propNewAdd"
shareid="">
</text>
<text class="sub-title">
特有属性 -- tid
</text>
<text class="propNewAdd"
tid="id">
</text>
<text class="propNewAdd"
tid="">
</text>
<div>
<text id="ifPropTrue"
if="true">
</text>
<text class="propNewAdd"
elif="true">
</text>
<text class="propNewAdd"
elif="false">
</text>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
div特有属性
text特有属性
</text>
</div>
</div>
......@@ -116,6 +116,7 @@
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</text>
<text onaccessibility="onAccessibility">text</text>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
......
......@@ -485,5 +485,12 @@ export default {
prompt.showToast({
message: 'reachBottom'
});
},
onAccessibility(event) {
if (event.eventType == 1) {
console.log("onAccessibility" + event.eventType);
}
console.log("onAccessibility" + JSON.stringify(event));
}
}
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 2;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
color: #72ac33;
stroke-width: 55px;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
color: #ad4e2a;
stroke-width: 55px;
margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
}
.gradient-container{
flex-direction: column;
}
.gradient1{
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
stroke-width: 30px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
flex-direction: column;
}
.access1{
background-color: #321124;
stroke-width: 30px;
margin: 5px;
}
.multimode-container{
flex-direction: column;
}
.multimode1{
background-color: #978666;
margin: 5px;
}
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development 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.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.svg-style{
width: 100px;
flex-weight: 1;
background-color: #eee;
}
.prop-container{
flex-direction: column;
flex-weight: 1;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
\ No newline at end of file
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development 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.
*/-->
<div class="container">
<div class="prop-container">
<text class="title">
textPath通用属性
</text>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
textPath特有属性
</text>
<text class="sub-title">
标识属性 -- id
</text>
<svg class="svg-style">
<text>
<textPath id="idProp" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
<text class="sub-title">
路径属性 -- path
</text>
<svg class="svg-style">
<text>
<textPath id="pathProp" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="pathPropNone" path="">
text
</textPath>
</text>
</svg>
<text class="sub-title">
起始偏移量属性 -- startOffset
</text>
<svg class="svg-style">
<text>
<textPath id="startOffsetPropLength" startOffset="30px" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="startOffsetPropPercentage" startOffset="60%" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="startOffsetPropNone" startOffset="" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
<text class="sub-title">
字体大小属性 -- font-size
</text>
<svg class="svg-style">
<text>
<textPath id="fontSizeProp" font-size="20" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="fontSizePropNone" font-size="" startOffset="60%" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
<text class="sub-title">
字体填充颜色属性 -- fill
</text>
<svg class="svg-style">
<text>
<textPath id="fillProp" fill="red" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="fillPropNone" fill="" startOffset="60%" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
<text class="sub-title">
动画的偏移属性 -- by
</text>
<svg class="svg-style">
<text>
<textPath id="byProp" by="1" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="byPropNone" by="" startOffset="60%" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
<text class="sub-title">
字体填充透明度属性 -- fill-opacity
</text>
<svg class="svg-style">
<text>
<textPath id="fillOpacityProp" fill-opacity="0.5" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="fillOpacityPropNone" fill-opacity="" startOffset="60%" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
<text class="sub-title">
元素的透明度属性 -- opacity
</text>
<svg class="svg-style">
<text>
<textPath id="opacityProp" opacity="0.5" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="opacityPropNone" opacity="" startOffset="60%" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
<text class="sub-title">
字体边框颜色属性 -- stroke
</text>
<svg class="svg-style">
<text>
<textPath id="strokeProp" stroke="#ff00ff" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="strokePropNone" stroke="" startOffset="60%" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
<text class="sub-title">
字体边框宽度属性 -- stroke-width
</text>
<svg class="svg-style">
<text>
<textPath id="strokeWidthProp" stroke="#ff00ff" stroke-width="2" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="strokeWidthPropNone" stroke="#ff00ff" stroke-width="" startOffset="60%" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
<text class="sub-title">
字体边框透明度属性 -- stroke-opacity
</text>
<svg class="svg-style">
<text>
<textPath id="strokeOpacityProp" stroke-opacity="0.4" stroke="#ff00ff" stroke-width="2" path="M0,20 Q50,20 100,20">
text
</textPath>
<textPath id="strokeOpacityPropNone" stroke-opacity="" stroke="#ff00ff" stroke-width="2" startOffset="60%" path="M0,20 Q50,20 100,20">
text
</textPath>
</text>
</svg>
</div>
</div>
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development 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 prompt from '@system.prompt';
export default {
data:{
listOne:[{}],
listThree:[{},{},{}],
idProp : null,
pathProp : null,
pathPropNone: null,
startOffsetPropLength : null,
startOffsetPropPercentage : null,
startOffsetPropNone : null,
byProp : null,
byPropNone : null,
fontSizeProp : null,
fontSizePropNone: null,
fillProp : null,
fillPropNone : null,
fillOpacityProp : null,
fillOpacityPropNone : null,
opacityProp : null,
opacityPropNone : null,
strokeProp : null,
strokePropNone : null,
strokeWidthProp : null,
strokeWidthPropNone : null,
strokeOpacityProp : null,
strokeOpacityPropNone : null,
},
onShow(){
this.getCommonPropValues();
globalThis.value = {
idProp : this.idProp,
pathProp : this.pathProp,
pathPropNone : this.pathPropNone,
fontSizeProp : this.fontSizeProp,
fontSizePropNone : this.fontSizePropNone,
startOffsetPropLength : this.startOffsetPropLength,
startOffsetPropPercentage : this.startOffsetPropPercentage,
startOffsetPropNone : this.startOffsetPropNone,
byProp : this.byProp,
byPropNone : this.byPropNone,
fillProp : this.fillProp,
fillPropNone : this.fillPropNone,
fillOpacityProp : this.fillOpacityProp,
fillOpacityPropNone : this.fillOpacityPropNone,
opacityProp : this.opacityProp,
opacityPropNone : this.opacityPropNone,
strokeProp : this.strokeProp,
strokePropNone : this.strokePropNone,
strokeWidthProp : this.strokeWidthProp,
strokeWidthPropNone : this.strokeWidthPropNone,
strokeOpacityProp : this.strokeOpacityProp,
strokeOpacityPropNone : this.strokeOpacityPropNone,
}
},
getCommonPropValues(){
this.idProp = this.$element("idProp").getInspector()
this.pathProp = this.$element("pathProp").getInspector()
this.pathPropNone = this.$element("pathPropNone").getInspector()
this.fontSizeProp = this.$element("fontSizeProp").getInspector()
this.fontSizePropNone = this.$element("fontSizePropNone").getInspector()
this.startOffsetPropLength = this.$element("startOffsetPropLength").getInspector()
this.startOffsetPropPercentage = this.$element("startOffsetPropPercentage").getInspector()
this.startOffsetPropNone = this.$element("startOffsetPropNone").getInspector()
this.byProp = this.$element("byProp").getInspector()
this.byPropNone = this.$element("byPropNone").getInspector()
this.fillProp = this.$element("fillProp").getInspector()
this.fillPropNone = this.$element("fillPropNone").getInspector()
this.fillOpacityProp = this.$element("fillOpacityProp").getInspector()
this.fillOpacityPropNone = this.$element("fillOpacityPropNone").getInspector()
this.opacityProp = this.$element("opacityProp").getInspector()
this.opacityPropNone = this.$element("opacityPropNone").getInspector()
this.strokeProp = this.$element("strokeProp").getInspector()
this.strokePropNone = this.$element("strokePropNone").getInspector()
this.strokeWidthProp = this.$element("strokeWidthProp").getInspector()
this.strokeWidthPropNone = this.$element("strokeWidthPropNone").getInspector()
this.strokeOpacityProp = this.$element("strokeOpacityProp").getInspector()
this.strokeOpacityPropNone = this.$element("strokeOpacityPropNone").getInspector()
return
},
}
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: center;
margin: 2px;
padding: 2px;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 2;
align-items: center;
}
\ No newline at end of file
......@@ -32,10 +32,6 @@
font-size="18" opacity="0.5">
textPath
</textpath>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" startOffset="30%" stroke="red">
textPath
</textpath>
<textpath fill="blue" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="16" startOffset="70%" fill-opacity="0.8">
textPath
......@@ -46,7 +42,7 @@
<text class="sub-title">
textPath通用属性3
</text>
<svg width="200" height="200">
<svg width="200" height="120">
<path d="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95" stroke="red"
fill="none"></path>
<text>
......@@ -60,136 +56,12 @@
</textpath>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
textPath动画样式1
</text>
<svg class="ani1" width="100" height="100">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2">
textPath
</textpath>
<textpath fill="#ffffff" startOffset="75%" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2" stroke-opacity="0.5">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath动画样式2
</text>
<svg class="ani2" width="100" height="100">
<svg width="200" height="120">
<path d="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95" stroke="red"
fill="none"></path>
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2">
textPath
</textpath>
<textpath fill="#ffffff" startOffset="75%" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2" stroke-opacity="0.5">
textPath
</textpath>
</text>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
textPath渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
textPath无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ff00ff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
textPath多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="black" stroke-width="2">
font-size="18" stroke="red">
textPath
</textpath>
</text>
......
......@@ -660,6 +660,16 @@
padding-start: 10px;
padding-end: 10px;
}
.propNewAdd{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
......
......@@ -271,5 +271,28 @@
<textarea id="softkeyboardenabledTrue"
softkeyboardenabled="true">
</textarea>
<text class="sub-title">
特有属性 -- tid
</text>
<textarea class="propNewAdd"
tid="id">
</textarea>
<textarea class="propNewAdd"
tid="">
</textarea>
<text class="sub-title">
特有属性 -- elif
</text>
<textarea class="propNewAdd"
if="false">
</textarea>
<textarea class="propNewAdd"
elif="true">
</textarea>
<textarea class="propNewAdd"
elif="false">
</textarea>
</div>
</div>
......@@ -76,4 +76,11 @@
selectedend="7"
menuoptions="{}">
</textarea>
<text class="sub-title">
特有事件1
</text>
<div class ="event4" onreachstart="reachStart" onreachend="reachEnd">
<textarea id="customMarquee" loop="4" change="change" selectchange="selectchange" share="share" translate="translate" style="height: 100%; width: 100%; background-color: red; margin-left: 10px;">
特有事件----</textarea>
</div>
</div>
......@@ -20,5 +20,23 @@ export default {
message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height,
duration: 3000,
});
},
selectchange(e){
prompt.showToast({
message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height,
duration: 3000,
});
},
share(e){
prompt.showToast({
message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height,
duration: 3000,
});
},
translate(e){
prompt.showToast({
message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height,
duration: 3000,
});
}
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册