Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
1 年多 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts
提交 cd18e976 编写于 作者: D dongwei 提交者： wanggang
浏览文件
操作

add test cases 

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 ebea2cf9
隐藏空白更改
内联 并排
Showing with 245 addition and 201 deletion
ace/ace_standard/src/main/js/default/pages/popup/prop/index.hml
浏览文件 @ cd18e976
......@@ -114,6 +114,15 @@
<popup id="ifPropTrue" target="target1"
if="true">
</popup>
<popup id="ifPropFalse" target="target1"
if="false">
</popup>
<popup id="elifPropTrue" target="target1"
elif="true">
</popup>
<popup id="elifPropFalse" target="target1"
elif="false">
</popup>
<text class="sub-title">
渲染属性 -- show
......@@ -127,6 +136,16 @@
<popup id="showPropNone" target="target1"
show="">
</popup>
<text class="sub-title">
特有属性 -- tid
</text>
<popup class="propNewAdd" target="target1"
tid="id">
</popup>
<popup class="propNewAdd" target="target1"
tid="">
</popup>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
......@@ -151,6 +170,16 @@
</popup>
<popup id="placementPropTop" target="target1" placement="top">
</popup>
<popup id="placementPropBottom" target="target1" placement="bottom">
</popup>
<popup id="placementPropTopLeft" target="target1" placement="topLeft">
</popup>
<popup id="placementPropTopRight" target="target1" placement="topRight">
</popup>
<popup id="placementPropBottomLeft" target="target1" placement="bottomLeft">
</popup>
<popup id="placementPropBottomRight" target="target1" placement="bottomRight">
</popup>
<text class="sub-title">
特有属性 -- keepalive
......
ace/ace_standard/src/main/js/default/pages/popup/router/index.hml
浏览文件 @ cd18e976
......@@ -381,6 +381,9 @@
<text class="text">popupEvent-4</text>
</popup>
<popup target="event1" onaccessibility="onAccessibility">
</popup>
<popup id="func1"
class="function1"
ontouchstart="functionTest1"
......
ace/ace_standard/src/main/js/default/pages/popup/router/index.js
浏览文件 @ cd18e976
......@@ -631,13 +631,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
ace/ace_standard/src/main/js/default/pages/popup/style/index.css
浏览文件 @ cd18e976
......@@ -71,6 +71,7 @@
border-top-right-radius: 0px;
opacity: 0.5;
align-self:flex-end;
transform: none;
}
#styleTwo{
......@@ -86,6 +87,7 @@
border-radius:5px;
opacity: 1.5;
align-self:flex-start;
transform: translateZ(5);
}
#styleThree{
......@@ -99,6 +101,7 @@
border-bottom: 2.5px dotted #fff000;
opacity: 1;
align-self:baseline;
transform: scale(1.2);
}
#styleFour{
......@@ -106,6 +109,7 @@
height: 20px;
align-self:center;
border: 2px solid #00ff00;
transform: scale3d(1.2,1.2,1.2);
}
#styleFive{
......@@ -117,6 +121,7 @@
border-image-width: 10px 5px 5px 10px;
border-image-outset: 10px 5px 10px 5px;
border-image-repeat: repeat;
transform: scaleX(1.2);
}
#styleSix{
......@@ -131,6 +136,8 @@
margin-top: 2%;
margin-right: 1.5%;
margin-bottom: 0.5%;
align-self: stretch;
transform: scaleY(1.5);
}
#styleSeven{
......@@ -141,6 +148,7 @@
margin-start: 1%;
margin-end: 2%;
background-color: #00ff00;
transform: scaleZ(1.5);
}
#styleEight{
......@@ -149,12 +157,14 @@
margin: 1%;
padding: 2%;
background-color: #0000ff;
transform: rotate3d(1.5,1.5,1.5,10);
}
#styleNine{
width: 100%;
height: 40px;
display:flex;
transform: rotateX(20);
}
#styleFive{
......@@ -166,6 +176,7 @@
border-image-width: 10px 5px 5px 10px;
border-image-outset: 10px 5px 10px 5px;
border-image-repeat: repeat;
transform: rotateY(30);
}
#styleTen{
......@@ -173,6 +184,7 @@
height: 400%;
display: none;
background-color: #ff0000;
transform: rotateZ(5);
}
#styleEleven{
......@@ -180,6 +192,7 @@
background-color: #00ff00;
flex:1 1 20px;
z-index:10;
transform: skew(10,10);
}
#styleTwelve{
......@@ -189,6 +202,7 @@
flex-shrink: 3;
flex-basis: 30px;
z-index:13;
transform: skewX(10);
}
#styleThirteen{
......@@ -199,6 +213,7 @@
height: 10px;
background-color: #00ff00;
z-index:12;
transform: skewY(10);
}
#styleFourteen{
......@@ -209,6 +224,7 @@
height: 10px;
background-color: #0000ff;
z-index:3;
transform: perspective(20);
}
#styleFifteen{
......@@ -219,6 +235,7 @@
height: 10px;
background-color: #fff000;
z-index:5;
transform: translate3d(10,2,2);
}
#styleSixteen{
......@@ -229,6 +246,7 @@
height: 10px;
background-color: #00ffff;
z-index:15;
transform: translateY(5);
}
#styleSeventeen{
......@@ -340,6 +358,7 @@
background-size:10% 20%;
background-repeat: repeat;
background-position: 30% 40%;
mask-image: linear-gradient(to left, black, white);
}
#styleThirtyTwo{
......@@ -511,3 +530,92 @@
background-color: #fff000;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
color: #72ac33;
stroke-width: 55px;
line-cap: square;
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;
line-cap: square;
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);
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/popup/style/index.hml
浏览文件 @ cd18e976
<!--/**
* 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="style-container">
<text class="title">
div通用样式
popup通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<div id="styleOne">
</div>
<div id="styleTwo">
</div>
<div id="styleThree">
</div>
<div id="styleFour">
</div>
<div id="styleFive">
</div>
<div id="styleSix">
</div>
<div id="styleSeven">
</div>
<div id="styleEight">
</div>
<popup id="styleOne" target="text1">
</popup>
<popup id="styleTwo" target="text1">
</popup>
<popup id="styleThree" target="text1">
</popup>
<popup id="styleFour" target="text1">
</popup>
<popup id="styleFive" target="text1">
</popup>
<popup id="styleSix" target="text1">
</popup>
<popup id="styleSeven" target="text1">
</popup>
<popup id="styleEight" target="text1">
</popup>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<div id="styleNine">
<div id="styleTen">
</div>
<div id="styleEleven">
</div>
<div id="styleTwelve">
</div>
<div id="styleThirteen">
</div>
<div id="styleFourteen">
</div>
<div id="styleFifteen">
</div>
<div id="styleSixteen">
</div>
<div id="styleSeventeen">
</div>
<div id="styleEighteen">
</div>
<div id="styleNineteen">
</div>
<div id="styleTwenty">
</div>
<popup id="styleTen" target="text1">
</popup>
<popup id="styleEleven" target="text1">
</popup>
<popup id="styleTwelve" target="text1">
</popup>
<popup id="styleThirteen" target="text1">
</popup>
<popup id="styleFourteen" target="text1">
</popup>
<popup id="styleFifteen" target="text1">
</popup>
<popup id="styleSixteen" target="text1">
</popup>
<popup id="styleSeventeen" target="text1">
</popup>
<popup id="styleEighteen" target="text1">
</popup>
<popup id="styleNineteen" target="text1">
</popup>
<popup id="styleTwenty" target="text1">
</popup>
</div>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<div id="styleTwentyOne">
</div>
<div id="styleTwentyTwo">
</div>
<div id="styleTwentyThree">
</div>
<popup id="styleTwentyOne" target="text1">
</popup>
<popup id="styleTwentyTwo" target="text1">
</popup>
<popup id="styleTwentyThree" target="text1">
</popup>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<div id="styleTwentyFour">
</div>
<div id="styleTwentyFive">
</div>
<popup id="styleTwentyFour" target="text1">
</popup>
<popup id="styleTwentyFive" target="text1">
</popup>
<text class="sub-title">
通用样式26-31 background
</text>
<div id="styleTwentySix">
</div>
<div id="styleTwentySeven">
</div>
<div id="styleTwentyNine">
</div>
<div id="styleThirty">
</div>
<div id="styleThirtyOne">
</div>
<popup id="styleTwentySix" target="text1">
</popup>
<popup id="styleTwentySeven" target="text1">
</popup>
<popup id="styleTwentyNine" target="text1">
</popup>
<popup id="styleThirty" target="text1">
</popup>
<popup id="styleThirtyOne" target="text1">
</popup>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<div id="styleThirtyTwo">
</div>
<popup id="styleThirtyTwo" target="text1">
</popup>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
div特有样式
</text>
<div class="ani-container">
<text class="sub-title">
特有样式 flex-direction flex-wrap justify-content align-items align-content
<text class="title">
动画样式
</text>
<div id="specificOne">
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
</div>
<div id="specificTwo">
<div id="specificThree" >
<div class="flex-item red-item">
</div>
</div>
<div id="specificFour" >
<div class="flex-item blue-item">
</div>
</div>
<div id="specificFive" >
<div class="flex-item yellow-item">
</div>
<div class="flex-item blue-item">
</div>
</div>
<div id="specificSix" >
<text style="font-size: 6px;">
文本
</text>
<div class="flex-item blue-item">
</div>
</div>
</div>
<text class="sub-title">
特有样式 overflow scrollbar-color scrollbar-width overscroll-effect
<text id="textani1" class="sub-title">
popup动画样式1
</text>
<div id="specificSeven" >
<div id="specificEight" >
<div style="margin-left:10px;width: 80px; height: 10px; background-color: #0000ff;"></div>
</div>
</div>
<div id="specificNine">
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
</div>
<div id="specificTen">
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
</div>
<div id="specificEleven">
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
</div>
<text class="sub-title">
特有样式 grid
<text id="textani2" class="sub-title">
popup动画样式2
</text>
<div id="specificTwelve">
</div>
<div id="specificThirteen">
</div>
<!-- <div id="specificEight" >-->
<!-- <div class="flex-item yellow-item">-->
<!-- </div>-->
<!-- <div class="flex-item blue-item" style="width: 45%; align-content:flex-end;">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div id="specificNine" >-->
<!-- <div class="flex-item yellow-item">-->
<!-- </div>-->
<!-- <div class="flex-item blue-item">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div id="specificTen" >-->
<!-- <div class="flex-item yellow-item">-->
<!-- </div>-->
<!-- <div class="flex-item blue-item">-->
<!-- </div>-->
<!-- </div>-->
</div>
<popup id="popupani1"
class="ani1"
target="textani1"
placement="top"
keepalive="true"
clickable="true"
arrowoffset="100px"
onvisibilitychange="visibilitychange"
onclick="hidepopupani1">
<text class="text">popupani-1</text>
</popup>
<popup id="popupani2"
class="ani2"
target="textani2"
placement="top"
keepalive="false"
clickable="true"
arrowoffset="100px"
onvisibilitychange="visibilitychange"
onclick="hidepopupani2">
<text class="text">popupani-2</text>
</popup>
</div>
ace/ace_standard/src/main/js/default/pages/popup/style/index.js
浏览文件 @ cd18e976
......@@ -14,6 +14,10 @@
*/
export default {
hidepopupani1() {
this.$element("popupani1").hide()
},
hidepopupani2() {
this.$element("popupani2").hide()
},
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或