From 84df713761c458f8866734e62645a1b01deb4aea Mon Sep 17 00:00:00 2001 From: shenchunping Date: Thu, 3 Mar 2022 18:00:25 +0800 Subject: [PATCH 01/11] add test cases Signed-off-by: shenchunping --- .../js/default/pages/gridContainer/index.css | 483 ----------------- .../js/default/pages/gridContainer/index.hml | 324 ------------ .../js/default/pages/gridContainer/index.js | 495 ------------------ .../pages/gridContainer/prop/index.css | 491 +++++++++++++++++ .../pages/gridContainer/prop/index.hml | 205 ++++++++ .../default/pages/gridContainer/prop/index.js | 161 ++++++ 6 files changed, 857 insertions(+), 1302 deletions(-) delete mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/index.css delete mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml delete mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css deleted file mode 100644 index 5d1b535a41a..00000000000 --- a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css +++ /dev/null @@ -1,483 +0,0 @@ -/** - * 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. - */ - -/* xxx.css */ -.container { - flex-direction:row; - width:100%; - height:100%; - padding: 1px; -} - -.sub-container{ - flex-direction: column; - height: 100%; - flex-weight: 1; -} - -.style-container{ - flex-direction: column; - height: 100%; - flex-weight: 2; -} - -.title{ - width: 100%; - font-size: 18px; - margin: 2px; - padding: 2px; - font-weight: bold; - text-align: center; -} - -.sub-title{ - width: 100%; - height: 50px; - font-size: 14px; - text-align: left; - margin: 2px; - padding: 2px; -} - -.style1{ - width: 100%; - height: 100%; - min-width: 25px; - min-height: 10px; - max-width: 300px; - max-height: 50px; - padding-left: 3px; - padding-top: 3px; - padding-right: 3px; - padding-bottom: 5px; - margin-left: 10px; - margin-top: 20px; - margin-right: 15px; - margin-bottom: 5px; - border-left-style: solid; - border-right-style: dashed; - border-top-style: dashed; - border-bottom-style: dotted; - border-left-width: 1px; - border-right-width: 2px; - border-top-width: 2px; - border-bottom-width: 1px; - border-left-color: #ff0000; - border-right-color: #00ff00; - border-top-color: #0000ff; - border-bottom-color: #fff000; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 15px; - border-top-left-radius: 8px; - border-top-right-radius: 12px; - background: linear-gradient(pink,#fff000); - box-shadow: 2px 4px 6px 8px #888888; - opacity: 0.5; - display: flex; - visibility: visible; - align-self: center; - image-fill: #000fff; - clip-path: margin-box; -} - -.style2{ - width: 60px; - height: 30px; - padding-start: 2px; - padding-end: 2px; - margin-start: 5px; - margin-end: 10px; - border-style: dotted; - border-width: 2px; - border-color:#000000; - border-radius:5px; - background-color:#ffaa00; - mask-image: url('common/images/icon.png'); - mask-size: cover; - mask-position: center; -} - - -.style3{ - width: 100%; - height:10%; - padding: 0px; - margin: 5px; - border-left: 1px solid #000000; - border-right: 2px dashed #00ff00; - border-top: 1.5px dotted #0000ff; - border-bottom: 2.5px dotted #fff000; - background-image:url('common/images/bg-tv.jpg'); - background-size:cover; - background-repeat: repeat-x; - background-position: center; - flex:1; - flex-grow: 2; - flex-basis:50px; - flex-shrink: 1; -} -.style4{ - width: 60%; - height: 6%; - padding: 2px; - margin: 5px; - border: 2px solid #000000; -} - -.contain1{ - width: 100%; - height: 150px; - flex-direction: column; -} - -.style5{ - width: 50%; - height: 30px; - background-color: yellow; - border-image-source: url('/common/images/image.png'); - border-image-slice: 1px 2px 3px 4px; - border-image-width: 2px 3px 4px 5px; - border-image-outset: 3px 4px 5px 6px; - border-image-repeat: repeat; -} - -.style6{ - width: 70px; - height: 30px; - position: absolute; - left: 10px; - top: 35px; - bottom: 5px; - right: 10px; - background-color: pink; - border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; -} - -.style7 { - width: 100%; - height:60px; - margin-top: 10px; - flex-direction: row; - justify-content: space-around; - align-items: center; - align-content: flex-start; -} - -.flex-item { - width: 20px; - height: 20px; - border-radius: 16px; -} - -.style8{ - flex-direction: row; - flex-wrap:nowrap; - scrollbar-color: yellow; - scrollbar-width: 10px; - overscroll-effect:spring; - height: 40px; - overflow:scroll; -} - -.style9{ - display: grid; - height: 40px; - grid-template-columns: 20% 20%; - grid-columns-gap: 14px; - grid-rows-gap: 4px; - grid-template-rows: 15% 15%; -} - -.color-primary { - background-color: mediumpurple; -} - -.color-warning { - background-color: pink; -} - -.color-success { - background-color: cornflowerblue; -} - -.grid-child { - width: 100%; - border-radius: 2px; -} - -.grid-left-top { - width: 20px; - height: 20px; - border-radius: 10px; - border: 1px solid plum; - background: linear-gradient(pink, purple); - box-shadow: 0px 0px 1px 1px pink; - grid-row-start: 0; - grid-column-start: 0; - grid-row-end: 0; - grid-column-end: 0; -} - -.grid-left-bottom { - width: 20px; - height: 20px; - border-radius: 5px; - border: 1px solid plum; - background: linear-gradient(pink, #00aaee); - box-shadow: 0px 0px 1px 1px pink; - grid-row-start: 1; - grid-column-start: 0; - grid-row-end: 1; - grid-column-end: 0; -} - -.grid-right-top { - width: 20px; - height: 20px; - border-radius: 3px; - border: 1px dotted plum; - background: linear-gradient(mediumpurple, #00aaee); - box-shadow: 0px 0px 1px 1px pink; - grid-row-start: 0; - grid-column-start: 1; - grid-row-end: 0; - grid-column-end: 1; -} - -.grid-right-bottom { - width: 20px; - height: 20px; - border-radius: 5px; - border: 1px dotted plum; - background: linear-gradient(pink, mediumpurple); - box-shadow: 0px 0px 2px 2px pink; - grid-row-start: 1; - grid-column-start: 1; - grid-row-end: 1; - grid-column-end: 1; -} - -.event-container{ - flex-direction: column; - flex-weight:1; -} - -.event1{ - width: 60%; - flex-weight: 1; - background-color: yellow; -} - -.event2{ - width: 70%; - flex-weight: 1; - background-color: red; -} - -.event3{ - width: 80%; - flex-weight: 1; - background-color: #ad4e2a; -} - -.event4{ - flex-direction: row; - width: 90%; - flex-weight: 1; - overflow:scroll; -} - -.event5{ - width: 100%; - height: 30px; -} - - -.prop-container{ - flex-direction: column; - height: 100%; - flex-weight: 1; -} - -#prop1 { - width: 80%; - height:20px; - background-color: #ad4e2a; - margin: 2px; -} - -.prop2 { - width: 80%; - height:20px; - background-color: #343524; - margin: 2px; -} -.prop3{ - width: 80%; - height: 20px; -} -.prop4 { - width: 80%; - height:20px; - background-color: #456345; - margin: 2px; -} - - -.ani-container{ - flex-direction: column; - height: 100%; - flex-weight: 1; -} - -.ani1{ - color: #72ac33; - 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; - width: 55px; - height: 55px; - margin: 5px; -} - - -.gradient-container{ - flex-direction: column; -} - -.gradient1{ - height:20px; - margin: 5px; - background: linear-gradient(red, #00ff00); -} - -.gradient2{ - height:20px; - margin: 5px; - background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); -} - -.gradient3{ - height:20px; - margin: 5px; - background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); -} - -.gradient4{ - height:20px; - 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{ - height:20px; - background-color: #321124; - margin: 5px; -} - -.atom-container{ - flex-direction: column; -} - -.multimode-container{ - flex-direction: column; -} - -.multimode1{ - color: #978666; - margin: 5px; -} -.function-container{ - flex-direction: column; -} - -.function1{ - background-color: #ff0000; - width: 60%; - height: 20px; -} - -.function2{ - background-color: #00ff00; - width: 60%; - height: 20px; -} - -.function3{ - background-color: #0000ff; - width: 100%; - height: 20px; -} - -.function4{ - flex-direction: row; - width: 80%; - height: 40px; - background-color: #c4c4f8; - flex-direction: row; - justify-content: space-around; - align-items: center; - align-content: flex-start; -} -.flex-class{ - margin-top: 5px; - width: 100%; - height: 30px; - display: flex; -/* background-color: #ee6363;*/ - justify-content: center; - align-items: center; -} -.row-style{ - width:40px; - height: 10px; - background-color: blue; -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml deleted file mode 100644 index f9befa686d6..00000000000 --- a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml +++ /dev/null @@ -1,324 +0,0 @@ - - -
-
-
- - 通用样式 - - - container通用样式1 - - - - - - - container通用样式2 - - - - - - - container通用样式3 - - - - - - - container通用样式4 - - - - - - - container通用样式5 - -
- - - - - - - - -
- - container特有样式 - - - - - - - - - -
- - -
- - 动画样式 - - - container动画样式1 - - - - - - - container动画样式2 - - - - - -
-
- -
-
- -
-
- - 通用属性 - - - container通用属性1 - - - - - - - container通用属性2 - - - - - - - container通用属性3 - - - - - - - container特有属性4 - - - -
-
-
-
- - 通用事件 - - - container通用事件1 - - - - - container通用事件2 - - - - - container通用事件3 - - - - -
-
-
-
- - 通用方法 - - - div通用方法1 - -
-
- - div通用方法2 - - - - - div通用方法3 - - - - - div特有方法 - - - - - - - - - -
-
- -
-
- -
-
- - 渐变样式 - - - div渐变样式1 - - - - - div渐变样式2 - - - - - div渐变样式3 - - - - - div渐变样式4 - - - -
-
-
-
- - 无障碍 - - - div无障碍1 - - - -
-
-
-
- - 原子布局 - - - div原子布局1 - -
- - - - - - - - - - - - -
- - div原子布局2 - -
- - - - - - - - - - - - -
- - div原子布局3 - -
- - - - - - - - - - - - -
-
-
-
- - 多模输入 - - - div多模输入1 - - - -
-
-
-
diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js deleted file mode 100644 index 660daee8652..00000000000 --- a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js +++ /dev/null @@ -1,495 +0,0 @@ -/** - * 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'; - -var options = { - duration: 1500, - easing: 'friction', - delay: 100, - fill: 'forwards', - iterations: 2, - direction: 'normal', -}; -var frames = [ - { - transform: { - translate: '-120px', - rotate:'10deg', - scale:0.2, - skew:'40deg' - }, - opacity: 0.1, - offset: 0.0, - width: '40%', - height:'20px', - backgroundColor:'#ff0000', - backgroundPosition:'10px 20px', - transformOrigin:'left top' - }, - { - transform: { - translateX: '0px', - translateY: '5px', - rotateX:'10deg', - rotateY:'10deg', - scaleX:0.5, - scaleY:0.7, - skewX:'22deg', - skewY:'30deg' - }, - opacity: 0.6, - offset: 2.0, - width: '60%', - height:'30px', - backgroundColor:'#ff00ff', - backgroundPosition:'15px 25px', - transformOrigin:'center top' - }, - { - transform: { - translateX: '100px', - translateY: '0px', - translateZ: '20px', - rotateX:'0deg', - rotateY:'0deg', - rotateZ:'30deg', - scaleX:1, - scaleY:1, - scaleZ:2, - skewX:'0', - skewY:'0', - skewZ:'30deg' - }, - opacity: 1, - offset: 0.0, - width: '100%', - height:'30px', - backgroundColor:'#ffff00', - backgroundPosition:'0px', - transformOrigin:'center center' - }, -]; -export default { - onShow(){ - // 通用属性 - var prop1 = this.$element('prop1'); - this.get() - - var name1 = prop1.dataSet.name - var prop2 = this.$refs.prop2; - var name2 = prop2.dataSet.name - prompt.showToast({ - message: 'prop1--' + name1 + '\nprop2--' + name2 - }); - }, - - get(){ - console.info("getColumns:"+this.$element('function4').getColumns()) - console.info("getGutterWidth:"+this.$element('function4').getGutterWidth()) - console.info("getColumnWidth:"+this.$element('function4').getColumnWidth()) - console.info("getSizeType:"+this.$element('function4').getSizeType()) - }, - touchStart(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchstart:\n' + message - }); - }, - - touchMove(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchMove:\n' +message - }); - }, - - touchEnd(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchEnd:\n' +message - }); - }, - - touchCancel(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchCancel:\n' +message - }); - }, - - click(){ - prompt.showToast({ - message: 'click' - }); - }, - - doubleClick(){ - prompt.showToast({ - message: 'doubleClick' - }); - }, - - longPress(){ - prompt.showToast({ - message: 'longPress' - }); - }, - - focus(){ - prompt.showToast({ - message: 'focus' - }); - }, - - blur(){ - prompt.showToast({ - message: 'blur' - }); - }, - - key(event){ - var code = event.code; - var action = event.action; - var repeatCount = event.repeatCount; - var timestampStart = event.timestampStart; - var message = 'code--' + code + ',action--' + action + - ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; - prompt.showToast({ - message: 'key:\n' + message - }); - }, - - swipe(event){ - var direction = event.direction; - var distance = event.distance; - var message = 'direction--' + direction + ',distance--' + distance; - prompt.showToast({ - message: 'swipe:\n' + message - }); - }, - - attached(){ - prompt.showToast({ - message: 'attached' - }); - }, - - detached(){ - prompt.showToast({ - message: 'detached' - }); - }, - - pinchStart(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchStart:\n' + message - }); - }, - - pinchUpdate(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchUpdate:\n' + message - }); - }, - - pinchEnd(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchUpdate:\n' + message - }); - }, - - pinchCancel(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchCancel:\n' + message - }); - }, - - dragStart(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragStart:\n' + message - }); - }, - - drag(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'drag:\n' + message - }); - }, - - dragEnd(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragEnd:\n' + message - }); - }, - - dragEnter(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragEnter:\n' + message - }); - }, - - dragOver(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragOver:\n' + message - }); - }, - - dragLeave(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragLeave:\n' + message - }); - }, - - drop(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'drop:\n' + message - }); - }, - - functionTest1(event){ - var function1 = this.$element('function1'); - function1.focus(true) - var rect = function1.getBoundingClientRect(); - var width = rect.width; - var height = rect.height; - var left = rect.left; - var top = rect.top; - var message = 'width--' + width + ',height--' + height + - ',left--' + left + ',top--' + top; - prompt.showToast({ - message: 'function1 rect:\n' + message - }); - }, - - functionTest2(event){ - var function2 = this.$element('function2'); - let observer = function2.createIntersectionObserver({ - ratios: [0.2, 0], // number - }); - observer.observe((isVisible, ratio)=> { - console.info('this element is ' + isVisible + 'ratio is ' + ratio) - prompt.showToast({ - message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio - }); - }) - - observer.unobserve() - }, - - functionTest3(event){ - var function3 = this.$element('function3'); - var animation = function3.animate(frames, options); - animation.play() - animation.onfinish = function(){ - prompt.showToast({ - message: 'The animation is finished.' - }); - }; - - animation.oncancel = function(){ - prompt.showToast({ - message: 'The animation is canceled.' - }); - }; - - animation.onrepeat = function(){ - prompt.showToast({ - message: 'The animation is repeated.' - }); - }; - - setTimeout(() => { - animation.reverse() - }, 500) - - setTimeout(() => { - animation.pause() - }, 1000) - - setTimeout(() => { - animation.cancel() - }, 1500) - }, - - functionTest4(event){ - var function4 = this.$element('function4'); - var scrollOffset = function4.getScrollOffset(); - var x = scrollOffset.x; - var y = scrollOffset.y; - var message = 'x--' + x + ',y--' + y; - prompt.showToast({ - message: 'functionTest4 scrollOffset:\n' + message - }); - - var scrollParam = { - dx:60, - dy:0, - smooth:true - } - function4.scrollBy(scrollParam) - }, - - reachStart(){ - prompt.showToast({ - message: 'reachStart' - }); - }, - - reachEnd(){ - prompt.showToast({ - message: 'reachEnd' - }); - }, - - reachTop(){ - prompt.showToast({ - message: 'reachTop' - }); - }, - - reachBottom(){ - prompt.showToast({ - message: 'reachBottom' - }); - } -} diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.css b/ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.css new file mode 100644 index 00000000000..a5e78eb4ff7 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.css @@ -0,0 +1,491 @@ +/** + * 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; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + flex-weight: 1; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + flex-weight: 1; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + flex-weight: 1; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + flex-weight: 1; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + flex-weight: 1; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + flex-weight: 1; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + flex-weight: 1; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + flex-weight: 1; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + flex-weight: 1; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + flex-weight: 1; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + flex-weight: 1; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + flex-weight: 1; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + flex-weight: 1; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + flex-weight: 1; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + flex-weight: 1; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + flex-weight: 1; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + flex-weight: 1; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + flex-weight: 1; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + flex-weight: 1; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropFalse { + flex-weight: 1; + background-color:#00ffff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropNone { + flex-weight: 1; + background-color:#00000d; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + flex-weight: 1; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#typeColumnsNull { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeColumnsXs { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeColumnsSm { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeColumnsMd { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeColumnsLg { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeSizetypeNull { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeSizetypeXs { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeSizetypeSm { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeSizetypeMd { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeSizetypeLg { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeGutter16 { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeGutter30 { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} +#typeGridtemplateDefault{ + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; + margin-bottom: 4px; + +} diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.hml new file mode 100644 index 00000000000..36ce3341884 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.hml @@ -0,0 +1,205 @@ + + +
+
+ + div通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + + + + + + + + + 通用属性 -- style + + + + + + 通用属性 -- ref + + + + + + + + 通用属性 -- disabled + + + + + + + + + + 通用属性 -- focusable + + + + + + + + + + 通用属性 -- data-* + + + + + + + + 通用属性 -- click-effect + + + + + + + + + + + + 通用属性 -- dir + + + + + + + + + + + + 渲染属性 -- for + + + + + + + + + + 渲染属性 -- if + + + + + + 渲染属性 -- show + + + + + + + +
+ +
+
+
+ + grid-container特有属性 + + + grid-container特有属性 -- columns + + + + + + + + + + + + + grid-container特有属性 -- sizetype + + + + + + + + + + + + + grid-container特有属性 -- gutter + + + + + + + grid-container特有属性 -- gridtemplate + + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.js b/ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.js new file mode 100644 index 00000000000..407d5701fb2 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.js @@ -0,0 +1,161 @@ +/** + * 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, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + typeColumnsNull : null, + typeColumnsSm : null, + typeColumnsXs : null, + typeColumnsMd : null, + typeColumnsLg : null, + typeSizetypeNull : null, + typeSizetypeXs : null, + typeSizetypeSm : null, + typeSizetypeMd : null, + typeSizetypeLg : null, + typeGutter16 : null, + typeGutter30 : null, + typeGridtemplateDefault : null, + }, + + onShow(){ + this.getCommonPropValues(); + globalThis.value = { + idProp : this.idProp, + classProp : this.classProp, + classPropNone : this.classPropNone, + styleProp : this.styleProp, + refProp : this.refProp, + refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, + disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, + focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, + focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, + dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, + dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, + dirPropNone : this.dirPropNone, + forPropNull : this.forPropNull, + forPropOne : this.forPropOne, + forPropThree : this.forPropThree, + ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, + showPropFalse : this.showPropFalse, + showPropNone : this.showPropNone, + typeColumnsNull : this.typeColumnsNull, + typeColumnsSm : this.typeColumnsSm, + typeColumnsXs : this.typeColumnsXs, + typeColumnsMd : this.typeColumnsMd, + typeColumnsLg : this.typeColumnsLg, + typeSizetypeNull : this.typeSizetypeNull, + typeSizetypeXs : this.typeSizetypeXs, + typeSizetypeSm : this.typeSizetypeSm, + typeSizetypeMd : this.typeSizetypeMd, + typeSizetypeLg : this.typeSizetypeLg, + typeGutter16 : this.typeGutter16, + typeGutter30 : this.typeGutter30, + typeGridtemplateDefault : this.typeGridtemplateDefault, + } + }, + + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + + //特有属性 + this.typeColumnsNull = this.$element("typeColumnsNull").getInspector() + this.typeColumnsXs = this.$element("typeColumnsXs").getInspector() + this.typeColumnsSm = this.$element("typeColumnsSm").getInspector() + this.typeColumnsMd = this.$element("typeColumnsMd").getInspector() + this.typeColumnsLg = this.$element("typeColumnsLg").getInspector() + this.typeSizetypeNull = this.$element("typeSizetypeNull").getInspector() + this.typeSizetypeXs = this.$element("typeSizetypeXs").getInspector() + this.typeSizetypeSm = this.$element("typeSizetypeSm").getInspector() + this.typeSizetypeMd = this.$element("typeSizetypeMd").getInspector() + this.typeSizetypeLg = this.$element("typeSizetypeLg").getInspector() + this.typeGutter16 = this.$element("typeGutter16").getInspector() + this.typeGutter30 = this.$element("typeGutter30").getInspector() + this.typeGridtemplateDefault = this.$element("typeGridtemplateDefault").getInspector() + + }, +} -- Gitee From 67e542f28477e4eab8d4fcc3ee1964f78bf73ba8 Mon Sep 17 00:00:00 2001 From: shenchunping Date: Thu, 3 Mar 2022 18:05:39 +0800 Subject: [PATCH 02/11] add test cases Signed-off-by: shenchunping --- .../pages/gridContainer/router/index.css | 483 +++++++++++++++++ .../pages/gridContainer/router/index.hml | 324 ++++++++++++ .../pages/gridContainer/router/index.js | 495 ++++++++++++++++++ 3 files changed, 1302 insertions(+) create mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.css b/ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.css new file mode 100644 index 00000000000..5d1b535a41a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.css @@ -0,0 +1,483 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + height: 50px; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 3px; + padding-top: 3px; + padding-right: 3px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 60px; + height: 30px; + padding-start: 2px; + padding-end: 2px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + + +.style3{ + width: 100%; + height:10%; + padding: 0px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis:50px; + flex-shrink: 1; +} +.style4{ + width: 60%; + height: 6%; + padding: 2px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 150px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + width: 100%; + height:60px; + margin-top: 10px; + flex-direction: row; + justify-content: space-around; + align-items: center; + align-content: flex-start; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + +.style8{ + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 40px; + overflow:scroll; +} + +.style9{ + display: grid; + height: 40px; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 100%; + border-radius: 2px; +} + +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} + +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} + +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} + +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + flex-weight:1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + width: 100%; + height: 30px; +} + + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +#prop1 { + width: 80%; + height:20px; + background-color: #ad4e2a; + margin: 2px; +} + +.prop2 { + width: 80%; + height:20px; + background-color: #343524; + margin: 2px; +} +.prop3{ + width: 80%; + height: 20px; +} +.prop4 { + width: 80%; + height:20px; + background-color: #456345; + margin: 2px; +} + + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + 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; + width: 55px; + height: 55px; + margin: 5px; +} + + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + height:20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + height:20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + height:20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + height:20px; + 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{ + height:20px; + background-color: #321124; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + margin: 5px; +} +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} + +.function4{ + flex-direction: row; + width: 80%; + height: 40px; + background-color: #c4c4f8; + flex-direction: row; + justify-content: space-around; + align-items: center; + align-content: flex-start; +} +.flex-class{ + margin-top: 5px; + width: 100%; + height: 30px; + display: flex; +/* background-color: #ee6363;*/ + justify-content: center; + align-items: center; +} +.row-style{ + width:40px; + height: 10px; + background-color: blue; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.hml b/ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.hml new file mode 100644 index 00000000000..f9befa686d6 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.hml @@ -0,0 +1,324 @@ + + +
+
+
+ + 通用样式 + + + container通用样式1 + + + + + + + container通用样式2 + + + + + + + container通用样式3 + + + + + + + container通用样式4 + + + + + + + container通用样式5 + +
+ + + + + + + + +
+ + container特有样式 + + + + + + + + + +
+ + +
+ + 动画样式 + + + container动画样式1 + + + + + + + container动画样式2 + + + + + +
+
+ +
+
+ +
+
+ + 通用属性 + + + container通用属性1 + + + + + + + container通用属性2 + + + + + + + container通用属性3 + + + + + + + container特有属性4 + + + +
+
+
+
+ + 通用事件 + + + container通用事件1 + + + + + container通用事件2 + + + + + container通用事件3 + + + + +
+
+
+
+ + 通用方法 + + + div通用方法1 + +
+
+ + div通用方法2 + + + + + div通用方法3 + + + + + div特有方法 + + + + + + + + + +
+
+ +
+
+ +
+
+ + 渐变样式 + + + div渐变样式1 + + + + + div渐变样式2 + + + + + div渐变样式3 + + + + + div渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + div无障碍1 + + + +
+
+
+
+ + 原子布局 + + + div原子布局1 + +
+ + + + + + + + + + + + +
+ + div原子布局2 + +
+ + + + + + + + + + + + +
+ + div原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + div多模输入1 + + + +
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.js b/ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.js new file mode 100644 index 00000000000..660daee8652 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/router/index.js @@ -0,0 +1,495 @@ +/** + * 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'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; +export default { + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + this.get() + + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + get(){ + console.info("getColumns:"+this.$element('function4').getColumns()) + console.info("getGutterWidth:"+this.$element('function4').getGutterWidth()) + console.info("getColumnWidth:"+this.$element('function4').getColumnWidth()) + console.info("getSizeType:"+this.$element('function4').getSizeType()) + }, + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} -- Gitee From 86755dfc8ae27c1c34e6221ece3975f73bf583f8 Mon Sep 17 00:00:00 2001 From: shenchunping Date: Thu, 3 Mar 2022 18:06:44 +0800 Subject: [PATCH 03/11] add test cases Signed-off-by: shenchunping --- .../js/default/pages/gridContainer/style/index.css | 0 .../js/default/pages/gridContainer/style/index.hml | 0 .../js/default/pages/gridContainer/style/index.js | 14 ++++++++++++++ 3 files changed, 14 insertions(+) create mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.css b/ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.hml b/ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.hml new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.js b/ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.js new file mode 100644 index 00000000000..336492c8796 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.js @@ -0,0 +1,14 @@ +/** + * 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. + */ -- Gitee From 444a30361a806db2c86872f7274fe20a527d3830 Mon Sep 17 00:00:00 2001 From: shenchunping Date: Thu, 3 Mar 2022 18:08:04 +0800 Subject: [PATCH 04/11] add test cases Signed-off-by: shenchunping --- .../default/test/gridContainerProps.test.js | 883 ++++++++++++++++++ 1 file changed, 883 insertions(+) create mode 100644 ace/ace_standard/src/main/js/default/test/gridContainerProps.test.js diff --git a/ace/ace_standard/src/main/js/default/test/gridContainerProps.test.js b/ace/ace_standard/src/main/js/default/test/gridContainerProps.test.js new file mode 100644 index 00000000000..c884a2548ff --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/gridContainerProps.test.js @@ -0,0 +1,883 @@ +/** + * 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 router from '@system.router'; +import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('gridContainerPropsJsTest', 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 before testcase + */ + beforeAll(async function (done) { + console.info('[gridContainerPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/gridContainer/prop/index' + } + try { + result = router.push(options) + console.info("push gridContainerProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push gridContainerProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }); + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[gridContainerPropsJsTest] after each called') + await backToIndex() + await sleep(1000) + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerIdProp + * @tc.desc ACE + */ + it('testgridContainerIdProp', 0, async function (done) { + console.info('testgridContainerIdProp START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerClassProp + * @tc.desc ACE + */ + it('testgridContainerClassProp', 0, async function (done) { + console.info('testgridContainerClassProp START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerClassPropNone + * @tc.desc ACE + */ + it('testgridContainerClassPropNone', 0, async function (done) { + console.info('testgridContainerClassPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[gridContainerProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerRefProp + * @tc.desc ACE + */ + it('testgridContainerRefProp', 0, async function (done) { + console.info('testgridContainerRefProp START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerRefPropNone + * @tc.desc ACE + */ + it('testgridContainerRefPropNone', 0, async function (done) { + console.info('testgridContainerRefPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[gridContainerProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerDisabledPropTrue + * @tc.desc ACE + */ + it('testgridContainerDisabledPropTrue', 0, async function (done) { + console.info('testgridContainerDisabledPropTrue START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropTrue); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('disabledPropTrue') + expect(obj.$attrs.disabled).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerDisabledPropFalse + * @tc.desc ACE + */ + it('testgridContainerDisabledPropFalse', 0, async function (done) { + console.info('testgridContainerDisabledPropFalse START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropFalse); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('disabledPropFalse') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerDisabledPropNone + * @tc.desc ACE + */ + it('testgridContainerDisabledPropNone', 0, async function (done) { + console.info('testgridContainerDisabledPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropNone); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('disabledPropNone') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerFocusablePropTrue + * @tc.desc ACE + */ + it('testgridContainerFocusablePropTrue', 0, async function (done) { + console.info('testgridContainerFocusablePropTrue START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropTrue); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('focusablePropTrue') + expect(obj.$attrs.focusable).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerFocusablePropFalse + * @tc.desc ACE + */ + it('testgridContainerFocusablePropFalse', 0, async function (done) { + console.info('testgridContainerFocusablePropFalse START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropFalse); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('focusablePropFalse') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerFocusablePropNone + * @tc.desc ACE + */ + it('testgridContainerFocusablePropNone', 0, async function (done) { + console.info('testgridContainerFocusablePropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropNone); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('focusablePropNone') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerDataProp + * @tc.desc ACE + */ + it('testgridContainerDataProp', 0, async function (done) { + console.info('testgridContainerDataProp START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.datagridContainer).assertEqual(undefined); + console.info("[gridContainerProps] get datagridContainer value is: " + JSON.stringify(obj.$attrs.datagridContainer)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerDataPropNone + * @tc.desc ACE + */ + it('testgridContainerDataPropNone', 0, async function (done) { + console.info('testgridContainerDataPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.datagridContainer).assertEqual(undefined) + console.info("[gridContainerProps] get datagridContainer value is: " + JSON.stringify(obj.$attrs.datagridContainer)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerClickEffectPropSmall + * @tc.desc ACE + */ + it('testgridContainerClickEffectPropSmall', 0, async function (done) { + console.info('testgridContainerClickEffectPropSmall START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') + expect(obj.$attrs.clickEffect).assertEqual('spring-small') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerClickEffectPropMedium + * @tc.desc ACE + */ + it('testgridContainerClickEffectPropMedium', 0, async function (done) { + console.info('testgridContainerClickEffectPropMedium START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') + expect(obj.$attrs.clickEffect).assertEqual('spring-medium') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerClickEffectPropLarge + * @tc.desc ACE + */ + it('testgridContainerClickEffectPropLarge', 0, async function (done) { + console.info('testgridContainerClickEffectPropLarge START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') + expect(obj.$attrs.clickEffect).assertEqual('spring-large') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerClickEffectPropNone + * @tc.desc ACE + */ + it('testgridContainerClickEffectPropNone', 0, async function (done) { + console.info('testgridContainerClickEffectPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[gridContainerProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerDirPropRtl + * @tc.desc ACE + */ + it('testgridContainerDirPropRtl', 0, async function (done) { + console.info('testgridContainerDirPropRtl START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerDirPropLtr + * @tc.desc ACE + */ + it('testgridContainerDirPropLtr', 0, async function (done) { + console.info('testgridContainerDirPropLtr START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerDirPropAuto + * @tc.desc ACE + */ + it('testgridContainerDirPropAuto', 0, async function (done) { + console.info('testgridContainerDirPropAuto START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerDirPropNone + * @tc.desc ACE + */ + it('testgridContainerDirPropNone', 0, async function (done) { + console.info('testgridContainerDirPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerForPropNull + * @tc.desc ACE + */ + it('testgridContainerForPropNull', 0, async function (done) { + console.info('testgridContainerForPropNull START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[gridContainerProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerForPropOne + * @tc.desc ACE + */ + it('testgridContainerForPropOne', 0, async function (done) { + console.info('testgridContainerForPropOne START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[gridContainerProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerForPropThree + * @tc.desc ACE + */ + it('testgridContainerForPropThree', 0, async function (done) { + console.info('testgridContainerForPropThree START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[gridContainerProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerIfPropTrue + * @tc.desc ACE + */ + it('testgridContainerIfPropTrue', 0, async function (done) { + console.info('testgridContainerIfPropTrue START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[gridContainerProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropTrue + * @tc.desc ACE + */ + it('testgridContainerShowPropTrue', 0, async function (done) { + console.info('testgridContainerShowPropTrue START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[gridContainerProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropFalse + * @tc.desc ACE + */ + it('testgridContainerShowPropFalse', 0, async function (done) { + console.info('testgridContainerShowPropFalse START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[gridContainerProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerShowPropNone', 0, async function (done) { + console.info('testgridContainerShowPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual("true") + console.info("[gridContainerProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerColumnsPropNone', 0, async function (done) { + console.info('testgridContainerXsPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeColumnsNull); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeColumnsNull') + expect(obj.$attrs.columns).assertEqual('auto') + console.info("[gridContainerProps] get columns value is: " + JSON.stringify(obj.$attrs.columns)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerColumnsPropXs', 0, async function (done) { + console.info('testgridContainerXsProp1 START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeColumnsXs); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeColumnsXs') + expect(obj.$attrs.columns).assertEqual('xs') + console.info("[gridContainerProps] get columns value is: " + JSON.stringify(obj.$attrs.columns)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerColumnsPropSm', 0, async function (done) { + console.info('testgridContainerXsProp1 START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeColumnsSm); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeColumnsSm') + expect(obj.$attrs.columns).assertEqual('sm') + console.info("[gridContainerProps] get columns value is: " + JSON.stringify(obj.$attrs.columns)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerColumnsPropMd', 0, async function (done) { + console.info('testgridContainerXsPropObject START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeColumnsMd); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeColumnsMd') + expect(obj.$attrs.columns).assertEqual("md") + console.info("[gridContainerProps] get columns value is: " + JSON.stringify(obj.$attrs.columns)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerColumnsPropLg', 0, async function (done) { + console.info('testgridContainerXsPropObject START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeColumnsLg); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeColumnsLg') + expect(obj.$attrs.columns).assertEqual("lg") + console.info("[gridContainerProps] get columns value is: " + JSON.stringify(obj.$attrs.columns)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerSizePropNone', 0, async function (done) { + console.info('testgridContainerXsPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeSizetypeNull); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeSizetypeNull') + expect(obj.$attrs.sizetype).assertEqual("auto") + console.info("[gridContainerProps] get size value is: " + JSON.stringify(obj.$attrs.sizetype)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerSizePropXs', 0, async function (done) { + console.info('testgridContainerXsProp1 START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeSizetypeXs); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeSizetypeXs') + expect(obj.$attrs.sizetype).assertEqual("xs" ) + console.info("[gridContainerProps] get size value is: " + JSON.stringify(obj.$attrs.sizetype)); + done(); + }); + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerSizePropSm', 0, async function (done) { + console.info('testgridContainerXsProp1 START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeSizetypeSm); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeSizetypeSm') + expect(obj.$attrs.sizetype).assertEqual('sm') + console.info("[gridContainerProps] get size value is: " + JSON.stringify(obj.$attrs.sizetype)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerSizePropMd', 0, async function (done) { + console.info('testgridContainerXsPropObject START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeSizetypeMd); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeSizetypeMd') + expect(obj.$attrs.sizetype).assertEqual("md") + console.info("[gridContainerProps] get size value is: " + JSON.stringify(obj.$attrs.sizetype)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerSizePropLg', 0, async function (done) { + console.info('testgridContainerXsPropObject START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeSizetypeLg); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeSizetypeLg') + expect(obj.$attrs.sizetype).assertEqual("lg") + console.info("[gridContainerProps] get size value is: " + JSON.stringify(obj.$attrs.sizetype)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerGutterProp16', 0, async function (done) { + console.info('testgridContainerSmPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeGutter16); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeGutter16') + expect(obj.$attrs.gutter).assertEqual("16px") + console.info("[gridContainerProps] get gutter value is: " + JSON.stringify(obj.$attrs.gutter)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerGutterProp30', 0, async function (done) { + console.info('testgridContainerSmPropNone START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeGutter30); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeGutter30') + expect(obj.$attrs.gutter).assertEqual("30px") + console.info("[gridContainerProps] get gutter value is: " + JSON.stringify(obj.$attrs.gutter)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testgridContainerShowPropNone + * @tc.desc ACE + */ + it('testgridContainerGridtemplatePropDefault', 0, async function (done) { + console.info('testgridContainerSmProp1 START'); + console.info("[gridContainerProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeGridtemplateDefault); + console.info("[gridContainerProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[gridContainerProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('grid-container') + expect(obj.$attrs.id).assertEqual('typeGridtemplateDefault') + expect(obj.$attrs.gridtemplate).assertEqual("default") + console.info("[gridContainerProps] get gridtemplate value is: " + JSON.stringify(obj.$attrs.gridtemplate)); + done(); + }); + +}); -- Gitee From 22b78f40dd2941672d35b69f4e2eb097049381e4 Mon Sep 17 00:00:00 2001 From: shenchunping Date: Thu, 3 Mar 2022 18:19:21 +0800 Subject: [PATCH 05/11] add test cases Signed-off-by: shenchunping --- ace/ace_standard/src/main/config.json | 6 ++++-- ace/ace_standard/src/main/js/default/test/List.test.js | 2 ++ .../src/main/js/default/test/commonComponentJsApi.test.js | 8 ++++---- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/ace/ace_standard/src/main/config.json b/ace/ace_standard/src/main/config.json index fd114ab31e1..5b0d3c055f4 100755 --- a/ace/ace_standard/src/main/config.json +++ b/ace/ace_standard/src/main/config.json @@ -127,8 +127,10 @@ "pages/tab-content/router/index", "pages/tab-content/prop/index", "pages/svg_text/index", - "pages/video/index", - "pages/gridContainer/index", + "pages/video/prop/index", + "pages/video/router/index", + "pages/gridContainer/prop/index", + "pages/gridContainer/router/index", "pages/gridRow/index", "pages/gridCol/index", "pages/canvas/index", diff --git a/ace/ace_standard/src/main/js/default/test/List.test.js b/ace/ace_standard/src/main/js/default/test/List.test.js index 7b085e61850..f1bd1996999 100755 --- a/ace/ace_standard/src/main/js/default/test/List.test.js +++ b/ace/ace_standard/src/main/js/default/test/List.test.js @@ -55,3 +55,5 @@ require('./ratingProps.test.js') require('./inputProps.test.js') require('./imageAnimatorProps.test.js') require('./textareaProps.test.js') +require('./videoProps.test.js') +require('./gridContainerProps.test.js') \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js b/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js index 7d6847d51c7..29544db2f6c 100644 --- a/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js +++ b/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js @@ -996,7 +996,7 @@ describe('aceJsTest', function () { it('testVideoComponent', 0, async function (done) { let result; let options = { - uri: 'pages/video/index' + uri: 'pages/video/router/index' } try { result = router.push(options) @@ -1007,7 +1007,7 @@ describe('aceJsTest', function () { await sleep(5000) let pages = router.getState(); console.info("[router.video] getState" + JSON.stringify(pages)); - expect("pages/video/").assertEqual(pages.path); + expect("pages/video/router/").assertEqual(pages.path); done(); }); @@ -1042,7 +1042,7 @@ describe('aceJsTest', function () { it('testGridContainerComponent', 0, async function (done) { let result; let options = { - uri: 'pages/gridContainer/index' + uri: 'pages/gridContainer/router/index' } try { result = router.push(options) @@ -1053,7 +1053,7 @@ describe('aceJsTest', function () { await sleep(5000) let pages = router.getState(); console.info("[router.gridContainer] getState" + JSON.stringify(pages)); - expect("pages/gridContainer/").assertEqual(pages.path); + expect("pages/gridContainer/router/").assertEqual(pages.path); done(); }); -- Gitee From 60aa615cd81d9194e585c6bd1ee20f95160acea7 Mon Sep 17 00:00:00 2001 From: miaojianan Date: Thu, 3 Mar 2022 18:29:22 +0800 Subject: [PATCH 06/11] Add test cases Signed-off-by: miaojianan --- .../main/js/default/test/videoProps.test.js | 1170 +++++++++++++++++ 1 file changed, 1170 insertions(+) create mode 100644 ace/ace_standard/src/main/js/default/test/videoProps.test.js diff --git a/ace/ace_standard/src/main/js/default/test/videoProps.test.js b/ace/ace_standard/src/main/js/default/test/videoProps.test.js new file mode 100644 index 00000000000..f84a29ba2b2 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/videoProps.test.js @@ -0,0 +1,1170 @@ +/** + * 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 router from '@system.router'; +import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('videoPropsJsTest', 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 before testcase + */ + beforeAll(async function (done) { + console.info('[videoPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/video/prop/index' + } + try { + result = router.push(options) + console.info("push videoProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push videoProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }); + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[videoPropsJsTest] after each called') + await backToIndex() + await sleep(1000) + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoIdProp + * @tc.desc ACE + */ + it('testVideoIdProp', 0, async function (done) { + console.info('testVideoIdProp START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoClassProp + * @tc.desc ACE + */ + it('testVideoClassProp', 0, async function (done) { + console.info('testVideoClassProp START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoClassPropNone + * @tc.desc ACE + */ + it('testVideoClassPropNone', 0, async function (done) { + console.info('testVideoClassPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[videoProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivStyleProp + * @tc.desc ACEs + */ +// it('testDivStyleProp', 0, async function (done) { +// console.info('testDivStyleProp START'); +// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.styleProp); +// console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('div') +// expect(obj.$attrs.id).assertEqual('styleProp') +// expect(obj.$attrs.style).assertEqual(undefined) +// console.info("[divProps] get style value is: " + JSON.stringify(obj.$attrs.style)); +// +// expect(obj.$styles.width).assertEqual(undefined); +// console.info("[divProps] get style width value is: " + JSON.stringify(obj.$styles.width)); +// expect(obj.$styles.height).assertEqual(undefined); +// console.info("[divProps] get style height value is: " + JSON.stringify(obj.$styles.height)); +// expect(obj.$styles.get('background-color')).assertEqual(undefined); +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoRefProp + * @tc.desc ACE + */ + it('testVideoRefProp', 0, async function (done) { + console.info('testVideoRefProp START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoRefPropNone + * @tc.desc ACE + */ + it('testVideoRefPropNone', 0, async function (done) { + console.info('testVideoRefPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[videoProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDisabledPropTrue + * @tc.desc ACE + */ + it('testVideoDisabledPropTrue', 0, async function (done) { + console.info('testVideoDisabledPropTrue START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropTrue); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('disabledPropTrue') + expect(obj.$attrs.disabled).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDisabledPropFalse + * @tc.desc ACE + */ + it('testVideoDisabledPropFalse', 0, async function (done) { + console.info('testVideoDisabledPropFalse START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropFalse); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('disabledPropFalse') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDisabledPropNone + * @tc.desc ACE + */ + it('testVideoDisabledPropNone', 0, async function (done) { + console.info('testVideoDisabledPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('disabledPropNone') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoFocusablePropTrue + * @tc.desc ACE + */ + it('testVideoFocusablePropTrue', 0, async function (done) { + console.info('testVideoFocusablePropTrue START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropTrue); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('focusablePropTrue') + expect(obj.$attrs.focusable).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoFocusablePropFalse + * @tc.desc ACE + */ + it('testVideoFocusablePropFalse', 0, async function (done) { + console.info('testVideoFocusablePropFalse START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropFalse); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('focusablePropFalse') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoFocusablePropNone + * @tc.desc ACE + */ + it('testVideoFocusablePropNone', 0, async function (done) { + console.info('testVideoFocusablePropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('focusablePropNone') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDataProp + * @tc.desc ACE + */ + it('testVideoDataProp', 0, async function (done) { + console.info('testVideoDataProp START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.dataDiv).assertEqual(undefined); + console.info("[videoProps] get dataDiv value is: " + JSON.stringify(obj.$attrs.dataDiv)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDataPropNone + * @tc.desc ACE + */ + it('testVideoDataPropNone', 0, async function (done) { + console.info('testVideoDataPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.dataDiv).assertEqual(undefined) + console.info("[videoProps] get dataDiv value is: " + JSON.stringify(obj.$attrs.dataDiv)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClickEffectPropSmall + * @tc.desc ACE + */ +// it('testVideoClickEffectPropSmall', 0, async function (done) { +// console.info('testVideoClickEffectPropSmall START'); +// console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.clickEffectPropSmall); +// console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('video') +// expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') +// expect(obj.$attrs.clickEffect).assertEqual('spring-small') +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClickEffectPropMedium + * @tc.desc ACE + */ +// it('testDivClickEffectPropMedium', 0, async function (done) { +// console.info('testDivClickEffectPropMedium START'); +// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.clickEffectPropMedium); +// console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('div') +// expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') +// expect(obj.$attrs.clickEffect).assertEqual('spring-medium') +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClickEffectPropLarge + * @tc.desc ACE + */ +// it('testDivClickEffectPropLarge', 0, async function (done) { +// console.info('testDivClickEffectPropLarge START'); +// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.clickEffectPropLarge); +// console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('div') +// expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') +// expect(obj.$attrs.clickEffect).assertEqual('spring-large') +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClickEffectPropNone + * @tc.desc ACE + */ +// it('testDivClickEffectPropNone', 0, async function (done) { +// console.info('testDivClickEffectPropNone START'); +// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.clickEffectPropNone); +// console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('div') +// expect(obj.$attrs.id).assertEqual('clickEffectPropNone') +// expect(obj.$attrs.clickEffect).assertEqual(undefined) +// console.info("[divProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDirPropRtl + * @tc.desc ACE + */ +// it('testDivDirPropRtl', 0, async function (done) { +// console.info('testDivDirPropRtl START'); +// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.dirPropRtl); +// console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('div') +// expect(obj.$attrs.id).assertEqual('dirPropRtl') +// expect(obj.$attrs.dir).assertEqual('rtl') +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDirPropLtr + * @tc.desc ACE + */ +// it('testDivDirPropLtr', 0, async function (done) { +// console.info('testDivDirPropLtr START'); +// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.dirPropLtr); +// console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('div') +// expect(obj.$attrs.id).assertEqual('dirPropLtr') +// expect(obj.$attrs.dir).assertEqual('ltr') +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDirPropAuto + * @tc.desc ACE + */ +// it('testDivDirPropAuto', 0, async function (done) { +// console.info('testDivDirPropAuto START'); +// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.dirPropAuto); +// console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('div') +// expect(obj.$attrs.id).assertEqual('dirPropAuto') +// expect(obj.$attrs.dir).assertEqual('auto') +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDirPropNone + * @tc.desc ACE + */ +// it('testDivDirPropNone', 0, async function (done) { +// console.info('testDivDirPropNone START'); +// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.dirPropNone); +// console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('div') +// expect(obj.$attrs.id).assertEqual('dirPropNone') +// expect(obj.$attrs.dir).assertEqual('auto') +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoForPropNull + * @tc.desc ACE + */ + it('testVideoForPropNull', 0, async function (done) { + console.info('testVideoForPropNull START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[videoProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoForPropOne + * @tc.desc ACE + */ + it('testVideoForPropOne', 0, async function (done) { + console.info('testVideoForPropOne START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[videoProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoForPropThree + * @tc.desc ACE + */ + it('testVideoForPropThree', 0, async function (done) { + console.info('testVideoForPropThree START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[videoProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoIfPropTrue + * @tc.desc ACE + */ + it('testVideoIfPropTrue', 0, async function (done) { + console.info('testVideoIfPropTrue START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[videoProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivIfPropFalse + * @tc.desc ACE + */ + // it('testDivIfPropFalse', 0, async function (done) { + // console.info('testDivIfPropFalse START'); + // console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + // + // let obj = JSON.parse(globalThis.value.ifPropFalse); + // console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + // console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + // + // expect(obj.$type).assertEqual('div') + // expect(obj.$attrs.id).assertEqual('ifPropFalse') + // expect(obj.$attrs.if).assertEqual(false) + // done(); + // }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivIfPropNone + * @tc.desc ACE + */ + // it('testDivIfPropNone', 0, async function (done) { + // console.info('testDivIfPropNone START'); + // console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + // + // let obj = JSON.parse(globalThis.value.ifPropNone); + // console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + // console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + // + // expect(obj.$type).assertEqual('div') + // expect(obj.$attrs.id).assertEqual('ifPropNone') + // expect(obj.$attrs.if).assertEqual(false) + // done(); + // }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoShowPropTrue + * @tc.desc ACE + */ + it('testVideoShowPropTrue', 0, async function (done) { + console.info('testVideoShowPropTrue START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[videoProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoShowPropFalse + * @tc.desc ACE + */ + it('testVideoShowPropFalse', 0, async function (done) { + console.info('testVideoShowPropFalse START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[videoProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoShowPropNone + * @tc.desc ACE + */ + it('testVideoShowPropNone', 0, async function (done) { + console.info('testVideoShowPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual('true') + console.info("[videoProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoMutedPropFalse + * @tc.desc ACE + */ + it('testVideoMutedPropFalse', 0, async function (done) { + console.info('testVideoMutedPropFalse START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.mutedPropFalse); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('mutedPropFalse') + expect(obj.$attrs.muted).assertEqual('false') + console.info("[videoProps] get muted value is: " + JSON.stringify(obj.$attrs.muted)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoMutedPropTrue + * @tc.desc ACE + */ + it('testVideoMutedPropTrue', 0, async function (done) { + console.info('testVideoMutedPropTrue START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.mutedPropTrue); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('mutedPropTrue') + expect(obj.$attrs.muted).assertEqual('true') + console.info("[videoProps] get muted value is: " + JSON.stringify(obj.$attrs.muted)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoMutedPropNone + * @tc.desc ACE + */ + it('testVideoMutedPropNone', 0, async function (done) { + console.info('testVideoMutedPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.mutedPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('mutedPropNone') + expect(obj.$attrs.muted).assertEqual('false') + console.info("[videoProps] get muted value is: " + JSON.stringify(obj.$attrs.muted)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoSrcProp + * @tc.desc ACE + */ + it('testVideoSrcProp', 0, async function (done) { + console.info('testVideoSrcProp START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.srcProp); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('srcProp') + expect(obj.$attrs.src).assertEqual('/common/images/video.mp4') + console.info("[videoProps] get src value is: " + JSON.stringify(obj.$attrs.src)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoSrcPropNone + * @tc.desc ACE + */ + it('testVideoSrcPropNone', 0, async function (done) { + console.info('testVideoSrcPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.srcPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('srcPropNone') + expect(obj.$attrs.src).assertEqual(undefined) + console.info("[videoProps] get src value is: " + JSON.stringify(obj.$attrs.src)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoAutoplayPropFalse + * @tc.desc ACE + */ + it('testVideoAutoplayPropFalse', 0, async function (done) { + console.info('testVideoAutoplayPropFalse START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.autoplayPropFalse); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('autoplayPropFalse') + expect(obj.$attrs.autoplay).assertEqual('false') + console.info("[videoProps] get autoplay value is: " + JSON.stringify(obj.$attrs.autoplay)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoAutoplayPropTrue + * @tc.desc ACE + */ + it('testVideoAutoplayPropFalse', 0, async function (done) { + console.info('testVideoAutoplayPropTrue START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.autoplayPropTrue); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('autoplayPropTrue') + expect(obj.$attrs.autoplay).assertEqual('true') + console.info("[videoProps] get autoplay value is: " + JSON.stringify(obj.$attrs.autoplay)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoAutoplayPropNone + * @tc.desc ACE + */ + it('testVideoAutoplayPropNone', 0, async function (done) { + console.info('testVideoAutoplayPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.autoplayPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('autoplayPropNone') + expect(obj.$attrs.autoplay).assertEqual('false') + console.info("[videoProps] get autoplay value is: " + JSON.stringify(obj.$attrs.autoplay)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoPosterProp + * @tc.desc ACE + */ + it('testVideoPosterProp', 0, async function (done) { + console.info('testVideoPosterProp START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.posterProp); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('posterProp') + expect(obj.$attrs.poster).assertEqual('/common/images/image.png') + console.info("[videoProps] get poster value is: " + JSON.stringify(obj.$attrs.poster)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoPosterPropNone + * @tc.desc ACE + */ + it('testVideoPosterPropNone', 0, async function (done) { + console.info('testVideoPosterPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.posterPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('posterPropNone') + expect(obj.$attrs.poster).assertEqual(undefined) + console.info("[videoProps] get poster value is: " + JSON.stringify(obj.$attrs.poster)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoControlsPropFalse + * @tc.desc ACE + */ + it('testVideoControlsPropFalse', 0, async function (done) { + console.info('testVideoControlsPropFalse START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.controlsPropFalse); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('controlsPropFalse') + expect(obj.$attrs.controls).assertEqual('false') + console.info("[videoProps] get controls value is: " + JSON.stringify(obj.$attrs.controls)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoControlsPropTrue + * @tc.desc ACE + */ + it('testVideoControlsPropTrue', 0, async function (done) { + console.info('testVideoControlsPropTrue START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.controlsPropTrue); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('controlsPropTrue') + expect(obj.$attrs.controls).assertEqual('true') + console.info("[videoProps] get controls value is: " + JSON.stringify(obj.$attrs.controls)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoControlsPropNone + * @tc.desc ACE + */ + it('testVideoControlsPropNone', 0, async function (done) { + console.info('testVideoControlsPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.controlsPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('controlsPropNone') + expect(obj.$attrs.controls).assertEqual('true') + console.info("[videoProps] get controls value is: " + JSON.stringify(obj.$attrs.controls)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoLoopPropFalse + * @tc.desc ACE + */ + it('testVideoLoopPropFalse', 0, async function (done) { + console.info('testVideoLoopPropFalse START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.loopPropFalse); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('loopPropFalse') + expect(obj.$attrs.loop).assertEqual('false') + console.info("[videoProps] get loop value is: " + JSON.stringify(obj.$attrs.loop)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoLoopPropTrue + * @tc.desc ACE + */ + it('testVideoLoopPropTrue', 0, async function (done) { + console.info('testVideoLoopPropTrue START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.loopPropTrue); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('loopPropTrue') + expect(obj.$attrs.loop).assertEqual('true') + console.info("[videoProps] get loop value is: " + JSON.stringify(obj.$attrs.loop)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoLoopPropNone + * @tc.desc ACE + */ + it('testVideoLoopPropNone', 0, async function (done) { + console.info('testVideoLoopPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.loopPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('loopPropNone') + expect(obj.$attrs.loop).assertEqual('false') + console.info("[videoProps] get loop value is: " + JSON.stringify(obj.$attrs.loop)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoStarttimeProp + * @tc.desc ACE + */ + it('testVideoStarttimeProp', 0, async function (done) { + console.info('testVideoStarttimeProp START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.starttimeProp); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('starttimeProp') + expect(obj.$attrs.starttime).assertEqual('3') + console.info("[videoProps] get starttime value is: " + JSON.stringify(obj.$attrs.starttime)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDirectionPropAuto + * @tc.desc ACE + */ + it('testVideoDirectionPropAuto', 0, async function (done) { + console.info('testVideoDirectionPropAuto START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.directionPropAuto); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('directionPropAuto') + expect(obj.$attrs.direction).assertEqual('auto') + console.info("[videoProps] get direction value is: " + JSON.stringify(obj.$attrs.direction)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDirectionPropVertical + * @tc.desc ACE + */ + it('testVideoDirectionPropVertical', 0, async function (done) { + console.info('testVideoDirectionPropVertical START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.directionPropVertical); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('directionPropVertical') + expect(obj.$attrs.direction).assertEqual('vertical') + console.info("[videoProps] get direction value is: " + JSON.stringify(obj.$attrs.direction)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDirectionPropHorizontal + * @tc.desc ACE + */ + it('testVideoDirectionPropHorizontal', 0, async function (done) { + console.info('testVideoDirectionPropHorizontal START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.directionPropHorizontal); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('directionPropHorizontal') + expect(obj.$attrs.direction).assertEqual('horizontal') + console.info("[videoProps] get direction value is: " + JSON.stringify(obj.$attrs.direction)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDirectionPropAdapt + * @tc.desc ACE + */ + it('testVideoDirectionPropAdapt', 0, async function (done) { + console.info('testVideoDirectionPropAdapt START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.directionPropAdapt); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('directionPropAdapt') + expect(obj.$attrs.direction).assertEqual('adapt') + console.info("[videoProps] get direction value is: " + JSON.stringify(obj.$attrs.direction)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoDirectionPropNone + * @tc.desc ACE + */ + it('testVideoDirectionPropNone', 0, async function (done) { + console.info('testVideoDirectionPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.directionPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('directionPropNone') + expect(obj.$attrs.direction).assertEqual('auto') + console.info("[videoProps] get direction value is: " + JSON.stringify(obj.$attrs.direction)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoSpeedProp + * @tc.desc ACE + */ + it('testVideoSpeedProp', 0, async function (done) { + console.info('testVideoSpeedProp START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.speedProp); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('speedProp') + expect(obj.$attrs.speed).assertEqual('1.0') + console.info("[videoProps] get speed value is: " + JSON.stringify(obj.$attrs.speed)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoSpeedPropNone + * @tc.desc ACE + */ + it('testVideoSpeedPropNone', 0, async function (done) { + console.info('testVideoSpeedPropNone START'); + console.info("[videoProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.speedPropNone); + console.info("[videoProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[videoProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('video') + expect(obj.$attrs.id).assertEqual('speedPropNone') + expect(obj.$attrs.speed).assertEqual('1') + console.info("[videoProps] get speed value is: " + JSON.stringify(obj.$attrs.speed)); + done(); + }); +}); + + + -- Gitee From b6efba70906053d574b4f25d8fda7d8a2f370630 Mon Sep 17 00:00:00 2001 From: miaojianan Date: Thu, 3 Mar 2022 18:31:18 +0800 Subject: [PATCH 07/11] Add props files for video Signed-off-by: miaojianan --- .../src/main/js/default/pages/video/index.css | 376 ----------- .../src/main/js/default/pages/video/index.hml | 183 ------ .../src/main/js/default/pages/video/index.js | 610 ------------------ .../js/default/pages/video/prop/index.css | 573 ++++++++++++++++ .../js/default/pages/video/prop/index.hml | 241 +++++++ .../main/js/default/pages/video/prop/index.js | 170 +++++ 6 files changed, 984 insertions(+), 1169 deletions(-) delete mode 100644 ace/ace_standard/src/main/js/default/pages/video/index.css delete mode 100644 ace/ace_standard/src/main/js/default/pages/video/index.hml delete mode 100644 ace/ace_standard/src/main/js/default/pages/video/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/video/prop/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/video/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/video/prop/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.css b/ace/ace_standard/src/main/js/default/pages/video/index.css deleted file mode 100644 index 19cd84b30f2..00000000000 --- a/ace/ace_standard/src/main/js/default/pages/video/index.css +++ /dev/null @@ -1,376 +0,0 @@ -/** - * 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%; - padding: 1px; -} - -.sub-container{ - flex-direction: column; - height: 100%; - flex-weight: 1; -} - -.title{ - width: 100%; - height: 50px; - font-size: 18px; - margin: 2px; - padding: 2px; - font-weight: bold; - text-align: center; -} -.title-style-2{ - height: 30px; -} - -.sub-title{ - width: 100%; - height: 50px; - font-size: 14px; - text-align: left; - margin: 2px; - padding: 2px; -} -.sub-title-2{ - height: 20px; -} -.sub-title-3{ - font-size: 12px; -} - -.style1{ - width: 100%; - height: 100%; - min-width: 25px; - min-height: 10px; - max-width: 300px; - max-height: 100px; - padding-left: 5px; - padding-top: 5px; - padding-right: 5px; - padding-bottom: 5px; - margin-left: 5px; - margin-top: 5px; - margin-right: 5px; - margin-bottom: 5px; - border-left-style: solid; - border-right-style: dashed; - border-top-style: dashed; - border-bottom-style: dotted; - border-left-width: 1px; - border-right-width: 2px; - border-top-width: 2px; - border-bottom-width: 1px; - border-left-color: #ff0000; - border-right-color: #00ff00; - border-top-color: #0000ff; - border-bottom-color: #fff000; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 15px; - border-top-left-radius: 8px; - border-top-right-radius: 12px; - background: linear-gradient(pink,#fff000); - box-shadow: 2px 4px 6px 8px #888888; - opacity: 0.5; - display: flex; - visibility: visible; - align-self: center; - image-fill: #000fff; - clip-path: margin-box; -} - -.style2{ - width: 300px; - height: 100px; - padding-start: 10px; - padding-end: 15px; - margin-start: 5px; - margin-end: 10px; - border-style: dotted; - border-width: 2px; - border-color:#000000; - border-radius:5px; - background-color:#ffaa00; - mask-image: url('common/images/icon.png'); - mask-size: cover; - mask-position: center; -} - -.style3{ - width: 100%; - height: 100px; - padding: 10px; - margin: 5px; - border-left: 1px solid #000000; - border-right: 2px dashed #00ff00; - border-top: 1.5px dotted #0000ff; - border-bottom: 2.5px dotted #fff000; - background-image:url('common/images/image.png'); - background-size:cover; - background-repeat: repeat-x; - background-position: center; - flex:1; - flex-grow: 2; - flex-shrink: 1; -} - -.style4{ - width: 100%; - height: 15%; - padding: 10px; - margin: 5px; - border: 2px solid #000000; -} - -.contain1{ - width: 100%; -} - -.style5{ - width: 90%; - height: 60px; - background-color: yellow; - border-image-source: url('/common/images/image.png'); - border-image-slice: 1px 2px 3px 4px; - border-image-width: 2px 3px 4px 5px; - border-image-outset: 3px 4px 5px 6px; - border-image-repeat: repeat; -} - -.style6{ - width: 100px; - height: 70px; - position: absolute; - left: 10px; - top: 70px; - bottom: 5px; - right: 10px; - background-color: pink; - border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; -} - -.style7 { - width: 100px; - height: 100px; - border: 1px solid #000000; - object-fit: fill; -} - -.color-primary { - background-color: mediumpurple; -} - -.color-warning { - background-color: pink; -} - -.color-success { - background-color: cornflowerblue; -} - -.grid-child { - width: 100%; - border-radius: 2px; -} - -.grid-left-top { - width: 20px; - height: 20px; - border-radius: 10px; - border: 1px solid plum; - background: linear-gradient(pink, purple); - box-shadow: 0px 0px 1px 1px pink; - grid-row-start: 0; - grid-column-start: 0; - grid-row-end: 0; - grid-column-end: 0; -} - -.grid-left-bottom { - width: 20px; - height: 20px; - border-radius: 5px; - border: 1px solid plum; - background: linear-gradient(pink, #00aaee); - box-shadow: 0px 0px 1px 1px pink; - grid-row-start: 1; - grid-column-start: 0; - grid-row-end: 1; - grid-column-end: 0; -} - -.grid-right-top { - width: 20px; - height: 20px; - border-radius: 3px; - border: 1px dotted plum; - background: linear-gradient(mediumpurple, #00aaee); - box-shadow: 0px 0px 1px 1px pink; - grid-row-start: 0; - grid-column-start: 1; - grid-row-end: 0; - grid-column-end: 1; -} - -.grid-right-bottom { - width: 20px; - height: 20px; - border-radius: 5px; - border: 1px dotted plum; - background: linear-gradient(pink, mediumpurple); - box-shadow: 0px 0px 2px 2px pink; - grid-row-start: 1; - grid-column-start: 1; - grid-row-end: 1; - grid-column-end: 1; -} - -.event-container{ - flex-direction: column; - flex-weight: 1; -} - -.event1{ - width: 90%; - flex-weight: 1; - background-color: yellow; -} - -.event2{ - width: 90%; - flex-weight: 1; - background-color: red; -} - -.event3{ - width: 90%; - flex-weight: 1; - background-color: #ad4e2a; -} - -.event4{ - flex-direction: row; - width: 90%; - flex-weight: 1; - overflow:scroll; -} - -.event5{ - flex-direction: column; - width: 100%; - height: 90px; - overflow:scroll; -} - -.prop-container{ - flex-direction: column; -} - -#prop1 { - height: 20px; - background-color: mediumslateblue; - width: 100%; - margin: 5px; -} - -.prop2 { - height: 20px; - background-color: pink; - width: 100%; - margin: 5px; -} - -.prop3 { - height: 20px; - background-color: darkseagreen; - width: 100%; - margin: 5px; -} - -.prop4 { - height: 50px; - background-color: darkseagreen; - width: 100%; - margin: 5px; -} - -.prop5 { - height: 50px; - background-color: darkseagreen; - width: 100%; - margin: 5px; -} - -.atom-container{ - flex-direction: column; -} - -.function-container{ - flex-direction: column; -} - -.function1{ - background-color: #ff0000; - width: 90%; - height: 45px; -} - -.function2{ - background-color: #00ff00; - width: 90%; - height: 45px; -} - -.function3{ - background-color: #0000ff; - width: 90%; - height: 45px; -} - -.function4{ - flex-direction: row; - width: 90%; - height: 45px; -} - -.function5{ - flex-direction: row; - width: 90%; - height: 45px; -} -.function6{ - flex-direction: row; - width: 90%; - height: 45px; -} -.function7{ - flex-direction: row; - width: 90%; - height: 45px; -} -.function8{ - flex-direction: row; - width: 90%; - height: 45px; -} -.function9{ - flex-direction: row; - width: 90%; - height: 45px; -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.hml b/ace/ace_standard/src/main/js/default/pages/video/index.hml deleted file mode 100644 index 7a3b0aa7df7..00000000000 --- a/ace/ace_standard/src/main/js/default/pages/video/index.hml +++ /dev/null @@ -1,183 +0,0 @@ -
-
- - 通用样式 - - - video通用样式1 - - - - video通用样式2 - - - - video通用样式3 - - - - video通用样式4 - - - - div通用样式5 - -
- - -
- - video特有样式 - - -
-
-
-
-
- - 通用属性 - - - video通用属性1 - - - - video通用属性2 - - - - video通用属性3 - - - - video特有属性 - - - -
-
-
-
- - 通用事件 - - - video通用事件1 - - - - video通用事件2 - - - - video通用事件3 - - - - video特有事件1 - - -
-
- -
-
- -
-
- - 特有方法 - - - video特有方法1 - - - - video特有方法2 - - - - video特有方法3 - - - - video特有方法4 - - - - video特有方法5 - - - - video特有方法6 - - -
- -
-
-
- - 通用方法 - - - video通用方法1 - - - - div通用方法2 - - - - div通用方法3 - - -
-
-
diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.js b/ace/ace_standard/src/main/js/default/pages/video/index.js deleted file mode 100644 index e8a9bb9ebed..00000000000 --- a/ace/ace_standard/src/main/js/default/pages/video/index.js +++ /dev/null @@ -1,610 +0,0 @@ -// @ts-nocheck -/** - * 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'; - -var options = { - duration: 1500, - easing: 'friction', - delay: 100, - fill: 'forwards', - iterations: 2, - direction: 'normal', -}; -var frames = [ - { - transform: { - translate: '-120px', - rotate:'10deg', - scale:0.2, - skew:'40deg' - }, - opacity: 0.1, - offset: 0.0, - width: '40%', - height:'20px', - backgroundColor:'#ff0000', - backgroundPosition:'10px 20px', - transformOrigin:'left top' - }, - { - transform: { - translateX: '0px', - translateY: '5px', - rotateX:'10deg', - rotateY:'10deg', - scaleX:0.5, - scaleY:0.7, - skewX:'22deg', - skewY:'30deg' - }, - opacity: 0.6, - offset: 2.0, - width: '60%', - height:'30px', - backgroundColor:'#ff00ff', - backgroundPosition:'15px 25px', - transformOrigin:'center top' - }, - { - transform: { - translateX: '100px', - translateY: '0px', - translateZ: '20px', - rotateX:'0deg', - rotateY:'0deg', - rotateZ:'30deg', - scaleX:1, - scaleY:1, - scaleZ:2, - skewX:'0', - skewY:'0', - skewZ:'30deg' - }, - opacity: 1, - offset: 0.0, - width: '100%', - height:'30px', - backgroundColor:'#ffff00', - backgroundPosition:'0px', - transformOrigin:'center center' - }, -]; - -export default { - - onShow(){ - // 通用属性 - var prop1 = this.$element('prop1'); - var name1 = prop1.dataSet.name - var prop2 = this.$refs.prop2; - var name2 = prop2.dataSet.name - prompt.showToast({ - message: 'prop1--' + name1 + '\nprop2--' + name2 - }); - - var styleValues = this.getStyleValues(); - var propsValues = this.getPropValues(); - - globalThis.value = { - styleValues:styleValues, - propsValues:propsValues - } - }, - - getStyleValues(){ - var styleValue1 = this.$element("style1").getInspector() - var styleValue2 = this.$element("style2").getInspector() - var styleValue3 = this.$element("style3").getInspector() - var styleValue4 = this.$element("style4").getInspector() - var styleValue5 = this.$element("style5").getInspector() - var styleValue6 = this.$element("style6").getInspector() - var styleValue7 = this.$element("style7").getInspector() - - return { - style1:styleValue1, - style2:styleValue2, - style3:styleValue3, - style4:styleValue4, - style5:styleValue5, - style6:styleValue6, - style7:styleValue7 - } - }, - - getPropValues(){ - var propValue1 = this.$element("prop1").getInspector() - var propValue2 = this.$element("prop2").getInspector() - var propValue3 = this.$element("prop3").getInspector() - - return { - prop1:propValue1, - prop2:propValue2, - prop3:propValue3 - } - }, - - touchStart(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchstart:\n' + message - }); - }, - - touchMove(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchMove:\n' +message - }); - }, - - touchEnd(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchEnd:\n' +message - }); - }, - - touchCancel(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchCancel:\n' +message - }); - }, - - click(){ - prompt.showToast({ - message: 'click' - }); - }, - - doubleClick(){ - prompt.showToast({ - message: 'doubleClick' - }); - }, - - longPress(){ - prompt.showToast({ - message: 'longPress' - }); - }, - - focus(){ - prompt.showToast({ - message: 'focus' - }); - }, - - blur(){ - prompt.showToast({ - message: 'blur' - }); - }, - - key(event){ - var code = event.code; - var action = event.action; - var repeatCount = event.repeatCount; - var timestampStart = event.timestampStart; - var message = 'code--' + code + ',action--' + action + - ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; - prompt.showToast({ - message: 'key:\n' + message - }); - }, - - swipe(event){ - var direction = event.direction; - var distance = event.distance; - var message = 'direction--' + direction + ',distance--' + distance; - prompt.showToast({ - message: 'swipe:\n' + message - }); - }, - - attached(){ - prompt.showToast({ - message: 'attached' - }); - }, - - detached(){ - prompt.showToast({ - message: 'detached' - }); - }, - - pinchStart(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchStart:\n' + message - }); - }, - - pinchUpdate(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchUpdate:\n' + message - }); - }, - - pinchEnd(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchUpdate:\n' + message - }); - }, - - pinchCancel(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchCancel:\n' + message - }); - }, - - dragStart(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragStart:\n' + message - }); - }, - - drag(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'drag:\n' + message - }); - }, - - dragEnd(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragEnd:\n' + message - }); - }, - - dragEnter(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragEnter:\n' + message - }); - }, - - dragOver(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragOver:\n' + message - }); - }, - - dragLeave(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragLeave:\n' + message - }); - }, - - drop(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'drop:\n' + message - }); - }, - - functionTest1(event){ - var function1 = this.$element('function1'); - function1.focus(true) - var rect = function1.getBoundingClientRect(); - var width = rect.width; - var height = rect.height; - var left = rect.left; - var top = rect.top; - var message = 'width--' + width + ',height--' + height + - ',left--' + left + ',top--' + top; - prompt.showToast({ - message: 'function1 rect:\n' + message - }); - }, - - functionTest2(event){ - var function2 = this.$element('function2'); - let observer = function2.createIntersectionObserver({ - ratios: [0.2, 0], // number - }); - observer.observe((isVisible, ratio)=> { - console.info('this element is ' + isVisible + 'ratio is ' + ratio) - prompt.showToast({ - message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio - }); - }) - - observer.unobserve() - }, - - functionTest3(event){ - var function3 = this.$element('function3'); - - var animation = function3.animate(frames, options); - animation.play() - animation.onfinish = function(){ - prompt.showToast({ - message: 'The animation is finished.' - }); - }; - - animation.oncancel = function(){ - prompt.showToast({ - message: 'The animation is canceled.' - }); - }; - - animation.onrepeat = function(){ - prompt.showToast({ - message: 'The animation is repeated.' - }); - }; - - setTimeout(() => { - animation.reverse() - }, 500) - - setTimeout(() => { - animation.pause() - }, 1000) - - setTimeout(() => { - animation.cancel() - }, 1500) - }, - - functionTest4(){ - var function4 = this.$element('function4'); - function4.start(); - prompt.showToast({ - message: 'function4 video start.' - }); - }, - functionTest5(){ - var function5 = this.$element('function5'); - function5.pause(); - prompt.showToast({ - message: 'function5 video pause.' - }) - }, - functionTest6(){ - var function6 = this.$element('function6'); - function6.setCurrentTime({ - currenttime: 2 - }); - prompt.showToast({ - message: 'function6 video setCurrentTime.' - }) - }, - functionTest7(){ - var function7 = this.$element('function7'); - function7.requestFullscreen({ - screenOrientation : "default" - }); - prompt.showToast({ - message: 'function7 video requestFullscreen.' - }) - - }, - functionTest8(){ - var function8 = this.$element('function8'); - function8.exitFullscreen(); - prompt.showToast({ - message: 'function8 video exitFullscreen.' - }) - }, - functionTest9(){ - var function9 = this.$element('function9'); - function9.stop(); - prompt.showToast({ - message: 'function9 video stop.' - }) - }, - - reachStart(){ - prompt.showToast({ - message: 'reachStart' - }); - }, - - reachEnd(){ - prompt.showToast({ - message: 'reachEnd' - }); - }, - - reachTop(){ - prompt.showToast({ - message: 'reachTop' - }); - }, - - reachBottom(){ - prompt.showToast({ - message: 'reachBottom' - }); - }, - prepared() { - prompt.showToast({ - message: 'prepared' - }); - }, - start() { - prompt.showToast({ - message: 'start' - }); - }, - pause() { - prompt.showToast({ - message: 'pause' - }); - }, - finish() { - prompt.showToast({ - message: 'finish' - }); - }, - error() { - prompt.showToast({ - message: 'error' - }); - }, - seeking() { - prompt.showToast({ - message: 'seeking' - }); - }, - seeked() { - prompt.showToast({ - message: 'seeked' - }); - }, - timeupdate() { - prompt.showToast({ - message: 'timeupdate' - }); - }, - fullscreenchange() { - prompt.showToast({ - message: 'fullscreenchange' - }); - }, - stop() { - prompt.showToast({ - message: 'stop' - }); - } -} diff --git a/ace/ace_standard/src/main/js/default/pages/video/prop/index.css b/ace/ace_standard/src/main/js/default/pages/video/prop/index.css new file mode 100644 index 00000000000..e4d31190459 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/prop/index.css @@ -0,0 +1,573 @@ +/** + * 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; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + flex-weight: 1; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + flex-weight: 1; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + flex-weight: 1; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + flex-weight: 1; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + flex-weight: 1; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + flex-weight: 1; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + flex-weight: 1; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + flex-weight: 1; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + flex-weight: 1; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + flex-weight: 1; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + flex-weight: 1; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + flex-weight: 1; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + flex-weight: 1; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + flex-weight: 1; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + flex-weight: 1; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + flex-weight: 1; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + flex-weight: 1; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + flex-weight: 1; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + flex-weight: 1; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropFalse { + flex-weight: 1; + background-color:#00ffff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropNone { + flex-weight: 1; + background-color:#00000d; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + flex-weight: 1; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#mutedPropFalse { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#mutedPropTrue { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#mutedPropNone { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#srcProp { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#srcPropNone { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#autoplayPropFalse { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#autoplayPropTrue { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#autoplayPropNone { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#posterProp { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#posterPropNone { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#controlsPropFalse { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#controlsPropTrue { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#controlsPropNone { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#loopPropFalse { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#loopPropTrue { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#loopPropNone { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#starttimeProp { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#directionPropAuto { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#directionPropVertical { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#directionPropHorizontal { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#directionPropAdapt { + flex-weight: 1; + background-color:#000ee0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#directionPropNone{ + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#speedProp { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#speedPropNone { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/video/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/video/prop/index.hml new file mode 100644 index 00000000000..96d14fc3361 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/prop/index.hml @@ -0,0 +1,241 @@ + + +
+
+ + video通用属性 + + + + 通用属性 -- id + + + + + 通用属性 -- class + + + + + + + 通用属性 -- style + + + + + 通用属性 -- ref + + + + + + 通用属性 -- disabled + + + + + + + 通用属性 -- focusable + + + + + + + 通用属性 -- data-* + + + + + + 渲染属性 -- for + + + + + + + 渲染属性 -- if + + + + + 渲染属性 -- show + + + + +
+ +
+
+
+ + video特有属性 + + + 静音播放属性 -- muted + + + + + + + 视频路径属性 -- src + + + + + + 自动播放属性 -- autoplay + + + + + + + 预览海报属性 -- poster + + + + + + 显隐控制栏属性 -- controls + + + + + + + 重头循环属性 -- loop + + + + + + + 起始时间属性 -- starttime + + + + + 全屏下布局属性 -- direction + + + + + + + + + 播放速度属性 -- speed + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/video/prop/index.js b/ace/ace_standard/src/main/js/default/pages/video/prop/index.js new file mode 100644 index 00000000000..3fffd01d41c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/prop/index.js @@ -0,0 +1,170 @@ +/** + * 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, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + ifPropFalse : null, + ifPropNone : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + mutedPropFalse : null, + mutedPropTrue : null, + mutedPropNone : null, + srcProp : null, + srcPropNone : null, + autoplayPropFalse : null, + autoplayPropTrue : null, + autoplayPropNone : null, + posterProp : null, + posterPropNone : null, + controlsPropFalse : null, + controlsPropTrue : null, + controlsPropNone : null, + loopPropFalse : null, + loopPropTrue : null, + loopPropNone : null, + starttimeProp : null, + directionPropAuto : null, + directionPropVertical : null, + directionPropHorizontal : null, + directionPropAdapt : null, + directionPropNone : null, + speedProp : null, + speedPropNone : null, + }, + + onShow(){ + this.getCommonPropValues(); + globalThis.value = { + idProp : this.idProp, + classProp : this.classProp, + classPropNone : this.classPropNone, + styleProp : this.styleProp, + refProp : this.refProp, + refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, + disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, + focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, + focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, + dataPropNone : this.dataPropNone, + forPropNull : this.forPropNull, + forPropOne : this.forPropOne, + forPropThree : this.forPropThree, + ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, + showPropFalse : this.showPropFalse, + showPropNone : this.showPropNone, + mutedPropFalse : this.mutedPropFalse, + mutedPropTrue : this.mutedPropTrue, + mutedPropNone : this.mutedPropNone, + srcProp : this.srcProp, + srcPropNone : this.srcPropNone, + autoplayPropFalse : this.autoplayPropFalse, + autoplayPropTrue : this.autoplayPropTrue, + autoplayPropNone : this.autoplayPropNone, + posterProp : this.posterProp, + posterPropNone : this.posterPropNone, + controlsPropFalse : this.controlsPropFalse, + controlsPropTrue : this.controlsPropTrue, + controlsPropNone : this.controlsPropNone, + loopPropFalse : this.loopPropFalse, + loopPropTrue : this.loopPropTrue, + loopPropNone : this.loopPropNone, + starttimeProp : this.starttimeProp, + directionPropAuto : this.directionPropAuto, + directionPropVertical : this.directionPropVertical, + directionPropHorizontal : this.directionPropHorizontal, + directionPropAdapt : this.directionPropAdapt, + directionPropNone : this.directionPropNone, + speedProp : this.speedProp, + speedPropNone : this.speedPropNone, + } + }, + + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + this.mutedPropFalse = this.$element("mutedPropFalse").getInspector() + this.mutedPropTrue = this.$element("mutedPropTrue").getInspector() + this.mutedPropNone = this.$element("mutedPropNone").getInspector() + this.srcProp = this.$element("srcProp").getInspector() + this.srcPropNone = this.$element("srcPropNone").getInspector() + this.autoplayPropFalse = this.$element("autoplayPropFalse").getInspector() + this.autoplayPropTrue = this.$element("autoplayPropTrue").getInspector() + this.autoplayPropNone = this.$element("autoplayPropNone").getInspector() + this.posterProp = this.$element("posterProp").getInspector() + this.posterPropNone = this.$element("posterPropNone").getInspector() + this.controlsPropFalse = this.$element("controlsPropFalse").getInspector() + this.controlsPropTrue = this.$element("controlsPropTrue").getInspector() + this.controlsPropNone = this.$element("controlsPropNone").getInspector() + this.loopPropFalse = this.$element("loopPropFalse").getInspector() + this.loopPropTrue = this.$element("loopPropTrue").getInspector() + this.loopPropNone = this.$element("loopPropNone").getInspector() + this.starttimeProp = this.$element("starttimeProp").getInspector() + this.directionPropAuto = this.$element("directionPropAuto").getInspector() + this.directionPropVertical = this.$element("directionPropVertical").getInspector() + this.directionPropHorizontal = this.$element("directionPropHorizontal").getInspector() + this.directionPropAdapt = this.$element("directionPropAdapt").getInspector() + this.directionPropNone = this.$element("directionPropNone").getInspector() + this.speedProp = this.$element("speedProp").getInspector() + this.speedPropNone = this.$element("speedPropNone").getInspector() + return + }, +} -- Gitee From da4347cfedbf3eb40902a8a5a2215f27454500d0 Mon Sep 17 00:00:00 2001 From: miaojianan Date: Thu, 3 Mar 2022 18:35:05 +0800 Subject: [PATCH 08/11] Add router files for video Signed-off-by: miaojianan --- .../js/default/pages/video/router/index.css | 376 +++++++++++ .../js/default/pages/video/router/index.hml | 183 ++++++ .../js/default/pages/video/router/index.js | 609 ++++++++++++++++++ 3 files changed, 1168 insertions(+) create mode 100644 ace/ace_standard/src/main/js/default/pages/video/router/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/video/router/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/video/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/video/router/index.css b/ace/ace_standard/src/main/js/default/pages/video/router/index.css new file mode 100644 index 00000000000..19cd84b30f2 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/router/index.css @@ -0,0 +1,376 @@ +/** + * 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%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + height: 50px; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} +.title-style-2{ + height: 30px; +} + +.sub-title{ + width: 100%; + height: 50px; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} +.sub-title-2{ + height: 20px; +} +.sub-title-3{ + font-size: 12px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 100px; + padding-left: 5px; + padding-top: 5px; + padding-right: 5px; + padding-bottom: 5px; + margin-left: 5px; + margin-top: 5px; + margin-right: 5px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 300px; + height: 100px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + height: 100px; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-shrink: 1; +} + +.style4{ + width: 100%; + height: 15%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; +} + +.style5{ + width: 90%; + height: 60px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 100px; + height: 70px; + position: absolute; + left: 10px; + top: 70px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + width: 100px; + height: 100px; + border: 1px solid #000000; + object-fit: fill; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 100%; + border-radius: 2px; +} + +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} + +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} + +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} + +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + flex-weight: 1; +} + +.event1{ + width: 90%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 90%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 90%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + flex-direction: column; + width: 100%; + height: 90px; + overflow:scroll; +} + +.prop-container{ + flex-direction: column; +} + +#prop1 { + height: 20px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + height: 20px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + height: 20px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop4 { + height: 50px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + height: 50px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 90%; + height: 45px; +} + +.function2{ + background-color: #00ff00; + width: 90%; + height: 45px; +} + +.function3{ + background-color: #0000ff; + width: 90%; + height: 45px; +} + +.function4{ + flex-direction: row; + width: 90%; + height: 45px; +} + +.function5{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function6{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function7{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function8{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function9{ + flex-direction: row; + width: 90%; + height: 45px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/video/router/index.hml b/ace/ace_standard/src/main/js/default/pages/video/router/index.hml new file mode 100644 index 00000000000..7a3b0aa7df7 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/router/index.hml @@ -0,0 +1,183 @@ +
+
+ + 通用样式 + + + video通用样式1 + + + + video通用样式2 + + + + video通用样式3 + + + + video通用样式4 + + + + div通用样式5 + +
+ + +
+ + video特有样式 + + +
+
+
+
+
+ + 通用属性 + + + video通用属性1 + + + + video通用属性2 + + + + video通用属性3 + + + + video特有属性 + + + +
+
+
+
+ + 通用事件 + + + video通用事件1 + + + + video通用事件2 + + + + video通用事件3 + + + + video特有事件1 + + +
+
+ +
+
+ +
+
+ + 特有方法 + + + video特有方法1 + + + + video特有方法2 + + + + video特有方法3 + + + + video特有方法4 + + + + video特有方法5 + + + + video特有方法6 + + +
+ +
+
+
+ + 通用方法 + + + video通用方法1 + + + + div通用方法2 + + + + div通用方法3 + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/video/router/index.js b/ace/ace_standard/src/main/js/default/pages/video/router/index.js new file mode 100644 index 00000000000..4e85c27ab8a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/router/index.js @@ -0,0 +1,609 @@ +/** + * 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'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + + var styleValues = this.getStyleValues(); + var propsValues = this.getPropValues(); + + globalThis.value = { + styleValues:styleValues, + propsValues:propsValues + } + }, + + getStyleValues(){ + var styleValue1 = this.$element("style1").getInspector() + var styleValue2 = this.$element("style2").getInspector() + var styleValue3 = this.$element("style3").getInspector() + var styleValue4 = this.$element("style4").getInspector() + var styleValue5 = this.$element("style5").getInspector() + var styleValue6 = this.$element("style6").getInspector() + var styleValue7 = this.$element("style7").getInspector() + + return { + style1:styleValue1, + style2:styleValue2, + style3:styleValue3, + style4:styleValue4, + style5:styleValue5, + style6:styleValue6, + style7:styleValue7 + } + }, + + getPropValues(){ + var propValue1 = this.$element("prop1").getInspector() + var propValue2 = this.$element("prop2").getInspector() + var propValue3 = this.$element("prop3").getInspector() + + return { + prop1:propValue1, + prop2:propValue2, + prop3:propValue3 + } + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(){ + var function4 = this.$element('function4'); + function4.start(); + prompt.showToast({ + message: 'function4 video start.' + }); + }, + functionTest5(){ + var function5 = this.$element('function5'); + function5.pause(); + prompt.showToast({ + message: 'function5 video pause.' + }) + }, + functionTest6(){ + var function6 = this.$element('function6'); + function6.setCurrentTime({ + currenttime: 2 + }); + prompt.showToast({ + message: 'function6 video setCurrentTime.' + }) + }, + functionTest7(){ + var function7 = this.$element('function7'); + function7.requestFullscreen({ + screenOrientation : "default" + }); + prompt.showToast({ + message: 'function7 video requestFullscreen.' + }) + + }, + functionTest8(){ + var function8 = this.$element('function8'); + function8.exitFullscreen(); + prompt.showToast({ + message: 'function8 video exitFullscreen.' + }) + }, + functionTest9(){ + var function9 = this.$element('function9'); + function9.stop(); + prompt.showToast({ + message: 'function9 video stop.' + }) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + }, + prepared() { + prompt.showToast({ + message: 'prepared' + }); + }, + start() { + prompt.showToast({ + message: 'start' + }); + }, + pause() { + prompt.showToast({ + message: 'pause' + }); + }, + finish() { + prompt.showToast({ + message: 'finish' + }); + }, + error() { + prompt.showToast({ + message: 'error' + }); + }, + seeking() { + prompt.showToast({ + message: 'seeking' + }); + }, + seeked() { + prompt.showToast({ + message: 'seeked' + }); + }, + timeupdate() { + prompt.showToast({ + message: 'timeupdate' + }); + }, + fullscreenchange() { + prompt.showToast({ + message: 'fullscreenchange' + }); + }, + stop() { + prompt.showToast({ + message: 'stop' + }); + } +} -- Gitee From 8ae6f6f117723d5894eb48e6243c893caca9ed85 Mon Sep 17 00:00:00 2001 From: miaojianan Date: Fri, 4 Mar 2022 13:47:30 +0800 Subject: [PATCH 09/11] Fixed code check error Signed-off-by: miaojianan --- ace/ace_standard/src/main/js/default/pages/video/prop/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ace/ace_standard/src/main/js/default/pages/video/prop/index.js b/ace/ace_standard/src/main/js/default/pages/video/prop/index.js index 3fffd01d41c..cb2497c6299 100644 --- a/ace/ace_standard/src/main/js/default/pages/video/prop/index.js +++ b/ace/ace_standard/src/main/js/default/pages/video/prop/index.js @@ -165,6 +165,5 @@ export default { this.directionPropNone = this.$element("directionPropNone").getInspector() this.speedProp = this.$element("speedProp").getInspector() this.speedPropNone = this.$element("speedPropNone").getInspector() - return }, } -- Gitee From e183bc46cc7fe352488d5a85001d8b1ae2b13b0c Mon Sep 17 00:00:00 2001 From: shenchunping Date: Fri, 4 Mar 2022 13:49:56 +0800 Subject: [PATCH 10/11] add test cases Signed-off-by: shenchunping --- .../src/main/js/default/test/gridContainerProps.test.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ace/ace_standard/src/main/js/default/test/gridContainerProps.test.js b/ace/ace_standard/src/main/js/default/test/gridContainerProps.test.js index c884a2548ff..e91992b9fe4 100644 --- a/ace/ace_standard/src/main/js/default/test/gridContainerProps.test.js +++ b/ace/ace_standard/src/main/js/default/test/gridContainerProps.test.js @@ -304,7 +304,7 @@ describe('gridContainerPropsJsTest', function () { expect(obj.$type).assertEqual('grid-container') expect(obj.$attrs.id).assertEqual('dataProp') expect(obj.$attrs.datagridContainer).assertEqual(undefined); - console.info("[gridContainerProps] get datagridContainer value is: " + JSON.stringify(obj.$attrs.datagridContainer)); + console.info("[gridConProp] get data value is: " + JSON.stringify(obj.$attrs.datagridContainer)); done(); }); @@ -324,7 +324,7 @@ describe('gridContainerPropsJsTest', function () { expect(obj.$type).assertEqual('grid-container') expect(obj.$attrs.id).assertEqual('dataPropNone') expect(obj.$attrs.datagridContainer).assertEqual(undefined) - console.info("[gridContainerProps] get datagridContainer value is: " + JSON.stringify(obj.$attrs.datagridContainer)); + console.info("[gridConProp] get data value is: " + JSON.stringify(obj.$attrs.datagridContainer)); done(); }); @@ -760,6 +760,7 @@ describe('gridContainerPropsJsTest', function () { console.info("[gridContainerProps] get size value is: " + JSON.stringify(obj.$attrs.sizetype)); done(); }); + /** * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 * @tc.name testgridContainerShowPropNone -- Gitee From f998bba30b470e33451d9adaa59001b9c938a5f9 Mon Sep 17 00:00:00 2001 From: miaojianan Date: Fri, 4 Mar 2022 14:29:07 +0800 Subject: [PATCH 11/11] Fixed code check error Signed-off-by: miaojianan --- ace/ace_standard/src/main/js/default/test/videoProps.test.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/ace/ace_standard/src/main/js/default/test/videoProps.test.js b/ace/ace_standard/src/main/js/default/test/videoProps.test.js index f84a29ba2b2..974d67da65c 100644 --- a/ace/ace_standard/src/main/js/default/test/videoProps.test.js +++ b/ace/ace_standard/src/main/js/default/test/videoProps.test.js @@ -27,7 +27,7 @@ describe('videoPropsJsTest', function () { }).then(() => { console.info(`sleep ${time} over...`) }) - }; + } async function backToIndex() { let backToIndexPromise = new Promise((resolve, reject) => { @@ -1165,6 +1165,3 @@ describe('videoPropsJsTest', function () { done(); }); }); - - - -- Gitee