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

add test cases

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 5694fcad
......@@ -215,14 +215,29 @@
<text class="sub-title">
特有属性-show
</text>
<svg width="200px" height="200px">
<svg id ="showPropTrue" width="100px" height="40px" x="" y="20" show="true">
<svg width="200px" height="100px">
<svg id ="showPropTrue" width="100px" height="40px" show="true">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="showPropFalse" width="100px" height="40px" x="10" y="50" show="false">
<svg id ="showPropFalse" width="100px" height="40px" show="false">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="showPropNone" width="100px" height="40px" x="20" y="80" show="">
<svg id ="showPropNone" width="100px" height="40px" show="">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
</svg>
<text class="sub-title">
特有属性-elif
</text>
<svg width="200px" height="100px">
<svg id ="showPropTrue" width="100px" height="40px" if="false">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="showPropFalse" width="100px" height="40px" elif="true">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="showPropNone" width="100px" height="40px" elif="false">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
</svg>
......
.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{
background-color: #72ac33;
width: 55px;
height: 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);
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)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
background-color: #ad4e2a;
width: 55px;
height: 55px;
margin: 5px;
}
.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{
color: #321124;
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">
text通用属性
</text>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
text特有属性
</text>
<text class="sub-title">
标识属性 -- id
</text>
<svg class="svg-style">
<text id="idProp" y="10">
text
</text>
</svg>
<text class="sub-title">
x坐标属性 -- x
</text>
<svg class="svg-style">
<text id="xPropLength" x="30" y="10">
text
</text>
<text id="xPropPercentage" x="60%" y="10">
text
</text>
<text id="xPropNone" x="" y="10">
text
</text>
</svg>
<text class="sub-title">
y坐标属性 -- y
</text>
<svg class="svg-style">
<text id="yPropLength" y="10">
text
</text>
<text id="yPropPercentage" y="100%">
text
</text>
<text id="yPropNone" y="">
text
</text>
</svg>
<text class="sub-title">
x轴偏移属性 -- dx
</text>
<svg class="svg-style">
<text id="dxPropLength" dx="30" y="10">
text
</text>
<text id="dxPropPercentage" dx="60%" y="10">
text
</text>
<text id="dxPropNone" dx="" y="10">
text
</text>
</svg>
<text class="sub-title">
y轴偏移属性 -- dy
</text>
<svg class="svg-style">
<text id="dyPropLength" dy="10">
text
</text>
<text id="dyPropPercentage" dy="100%">
text
</text>
<text id="dyPropNone" dy="0">
text
</text>
</svg>
<text class="sub-title">
旋转属性 -- rotate
</text>
<svg class="svg-style">
<text id="rotateProp" rotate="30" y="10">
text
</text>
<text id="rotatePropNone" rotate="" y="100%">
text
</text>
</svg>
<text class="sub-title">
字体大小属性 -- font-size
</text>
<svg class="svg-style">
<text id="fontSizeProp" font-size="20" y="15">
text
</text>
<text id="fontSizePropNone" font-size="" x="60" y="15">
text
</text>
</svg>
<text class="sub-title">
字体填充颜色属性 -- fill
</text>
<svg class="svg-style">
<text id="fillProp" fill="red" y="10">
text
</text>
<text id="fillPropNone" fill="" y="100%">
text
</text>
</svg>
<text class="sub-title">
字体填充透明度属性 -- fill-opacity
</text>
<svg class="svg-style">
<text id="fillOpacityProp" fill-opacity="0.5" y="10">
text
</text>
<text id="fillOpacityPropNone" fill-opacity="" y="100%">
text
</text>
</svg>
<text class="sub-title">
元素的透明度属性 -- opacity
</text>
<svg class="svg-style">
<text id="opacityProp" opacity="0.8" y="10">
text
</text>
<text id="opacityPropNone" opacity="" y="100%">
text
</text>
</svg>
<text class="sub-title">
字体边框颜色属性 -- stroke
</text>
<svg class="svg-style">
<text id="strokeProp" stroke="#ff00ff" y="10">
text
</text>
<text id="strokePropNone" stroke="" y="100%">
text
</text>
</svg>
<text class="sub-title">
字体边框宽度属性 -- stroke-width
</text>
<svg class="svg-style">
<text id="strokeWidthProp" stroke="#ff00ff" stroke-width="2" y="10">
text
</text>
<text id="strokeWidthPropNone" stroke="#ff00ff" stroke-width="" y="100%">
text
</text>
</svg>
<text class="sub-title">
字体边框透明度属性 -- stroke-opacity
</text>
<svg class="svg-style">
<text id="strokeOpacityProp" stroke-opacity="0.4" stroke-width="2" stroke="#ff00ff" y="10">
text
</text>
<text id="strokeOpacityPropNone" stroke-opacity="" stroke-width="2" stroke="#ff00ff" y="100%">
text
</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,
xPropLength : null,
xPropPercentage: null,
xPropNone : null,
yPropLength : null,
yPropPercentage : null,
yPropNone : null,
dxPropLength : null,
dxPropPercentage: null,
dxPropNone : null,
dyPropLength : null,
dyPropPercentage : null,
dyPropNone : null,
rotateProp : null,
rotatePropNone: 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,
xPropLength : this.xPropLength,
xPropPercentage: this.xPropPercentage,
xPropNone : this.xPropNone,
yPropLength : this.yPropLength,
yPropPercentage : this.yPropPercentage,
yPropNone : this.yPropNone,
dxPropLength : this.dxPropLength,
dxPropPercentage: this.dxPropPercentage,
dxPropNone : this.dxPropNone,
dyPropLength : this.dyPropLength,
dyPropPercentage : this.dyPropPercentage,
dyPropNone : this.dyPropNone,
rotateProp : this.rotateProp,
rotatePropNone : this.rotatePropNone,
fontSizeProp : this.fontSizeProp,
fontSizePropNone : this.fontSizePropNone,
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.xPropLength = this.$element("xPropLength").getInspector()
this.xPropPercentage = this.$element("xPropPercentage").getInspector()
this.xPropNone = this.$element("xPropNone").getInspector()
this.yPropLength = this.$element("yPropLength").getInspector()
this.yPropPercentage = this.$element("yPropPercentage").getInspector()
this.yPropNone = this.$element("yPropNone").getInspector()
this.dxPropLength = this.$element("dxPropLength").getInspector()
this.dxPropPercentage = this.$element("dxPropPercentage").getInspector()
this.dxPropNone = this.$element("dxPropNone").getInspector()
this.dyPropLength = this.$element("dyPropLength").getInspector()
this.dyPropPercentage = this.$element("dyPropPercentage").getInspector()
this.dyPropNone = this.$element("dyPropNone").getInspector()
this.rotateProp = this.$element("rotateProp").getInspector()
this.rotatePropNone = this.$element("rotatePropNone").getInspector()
this.fontSizeProp = this.$element("fontSizeProp").getInspector()
this.fontSizePropNone = this.$element("fontSizePropNone").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
......@@ -41,90 +41,5 @@
<text x="5%" y="60" font-size="18" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.5">stroke-opacity: 0.5</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">
svg_text动画样式1
</text>
<svg class="ani1" width="100" height="100">
<text id="text1" x="5%" y="20" font-size="18" fill="red">svg_text</text>
</svg>
<text class="sub-title">
svg_text动画样式2
</text>
<svg class="ani2" width="100" height="100">
<text id="text1" x="5%" y="20" font-size="18" fill="red">svg_text</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">
svg_text渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
<text class="sub-title">
svg_text渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
<text class="sub-title">
svg_text渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
<text class="sub-title">
svg_text渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</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">
svg_text无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<text id="text1" x="5%" y="40" font-size="18" fill="#ff00ff">svg_text</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">
svg_text多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<text id="text1" x="5%" y="20" font-size="18" fill="black">svg_text</text>
</svg>
</div>
</div>
</div>
......@@ -14,11 +14,4 @@
*/
export default {
onShow(){
// 通用属性
var prop1 = this.$element("prop1");
var name1 = prop1.dataSet.a
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.a
}
}
......@@ -260,5 +260,27 @@
<swiper id="displayModePropAutoLinear"
displaymode="autoLinear">
</swiper>
<text class="sub-title">
特有属性 -- tid
</text>
<swiper class="propNewAdd"
tid="id">
</swiper>
<swiper class="propNewAdd"
tid="">
</swiper>
<div>
<swiper id="ifPropTrue"
if="true">
</swiper>
<swiper class="propNewAdd"
elif="true">
</swiper>
<swiper class="propNewAdd"
elif="false">
</swiper>
</div>
</div>
</div>
\ No newline at end of file
......@@ -86,6 +86,7 @@
border: 1px solid #000000;
indicator-color: #cf2411;
indicator-size: 8px;
indicator-left: 1px;
indicator-bottom: 1px;
indicator-right: 30px;
indicator-top: 50%;
......
......@@ -279,6 +279,11 @@
scrolleffect="spring">
</swiper>
<text class="sub-title">
swiperOnAccessibility
</text>
<swiper onaccessibility="onAccessibility"></swiper>
<text class="sub-title">
swiper特有事件1
</text>
......
......@@ -515,6 +515,13 @@ export default {
prompt.showToast({
message: 'reachBottom'
});
},
onAccessibility(event) {
if (event.eventType == 1) {
console.log("onAccessibility" + event.eventType);
}
console.log("onAccessibility" + JSON.stringify(event));
}
}
\ No newline at end of file
......@@ -425,4 +425,64 @@
margin-right: 10px;
}
#tidProp {
flex-weight: 1;
background-color:#0e0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#tidPropNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#elifPropTrue {
flex-weight: 1;
background-color:#0e0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#elifPropFalse {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataPropOneNone {
flex-weight: 1;
background-color:#0e0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataPropOne {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
......@@ -88,6 +88,16 @@
data-switch="">
</switch>
<text class="sub-title">
通用属性 -- data
</text>
<switch id="dataPropOne"
data="通用属性 -- data-switch">
</switch>
<switch id="dataPropOneNone"
data="">
</switch>
<text class="sub-title">
通用属性 -- click-effect
</text>
......@@ -152,6 +162,29 @@
<switch id="showPropNone"
show="">
</switch>
<text class="sub-title">
属性 -- tid
</text>
<switch id="tidProp"
tid="tidProp">
</switch>
<switch id="tidPropNone"
tid="">
</switch>
<text class="sub-title">
属性 -- elif
</text>
<switch style="width: 20px;height: 20px;"
if="false">
</switch>
<switch id="elifPropTrue"
elif="true">
</switch>
<switch id="elifPropFalse"
elif="false">
</switch>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
......
......@@ -175,7 +175,7 @@
</text>
<switch id="event2" class="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
onswipe="swipe" onattached="attached" ondetached="detached" onaccessibility="attached">
</switch>
<text class="sub-title">
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册