!2196 add attribute testcase

Merge pull request !2196 from bayanxing/master

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",

ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.css

+/**
+ * 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;
+
+}

ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.hml

+<!--/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */-->
+
+<div class="container">
+    <div class="prop-container">
+        <text class="title">
+            div通用属性
+        </text>
+
+        <text class="sub-title">
+            通用属性 -- id
+        </text>
+        <grid-container id="idProp">
+        </grid-container>
+
+        <text class="sub-title">
+            通用属性 -- class
+        </text>
+        <grid-container id="classProp"
+             class="classProp">
+        </grid-container>
+        <grid-container id="classPropNone"
+             class="">
+        </grid-container>
+
+
+        <text class="sub-title">
+            通用属性 -- style
+        </text>
+        <grid-container id="styleProp"
+             style="width:10%;height:20px;background-color:red">
+        </grid-container>
+
+        <text class="sub-title">
+            通用属性 -- ref
+        </text>
+        <grid-container id="refProp"
+             ref="refProp">
+        </grid-container>
+        <grid-container id="refPropNone"
+             ref="">
+        </grid-container>
+
+        <text class="sub-title">
+            通用属性 -- disabled
+        </text>
+        <grid-container id="disabledPropTrue"
+             disabled="true">
+        </grid-container>
+        <grid-container id="disabledPropFalse"
+             disabled="false">
+        </grid-container>
+        <grid-container id="disabledPropNone"
+             disabled="">
+        </grid-container>
+
+        <text class="sub-title">
+            通用属性 -- focusable
+        </text>
+        <grid-container id="focusablePropTrue"
+             focusable="true">
+        </grid-container>
+        <grid-container id="focusablePropFalse"
+             focusable="false">
+        </grid-container>
+        <grid-container id="focusablePropNone"
+             focusable="">
+        </grid-container>
+
+        <text class="sub-title">
+            通用属性 -- data-*
+        </text>
+        <grid-container id="dataProp"
+             data-div="通用属性 -- data-*">
+        </grid-container>
+        <grid-container id="dataPropNone"
+             data-div="">
+        </grid-container>
+
+        <text class="sub-title">
+            通用属性 -- click-effect
+        </text>
+        <grid-container id="clickEffectPropSmall"
+             click-effect="spring-small">
+        </grid-container>
+        <grid-container id="clickEffectPropMedium"
+             click-effect="spring-medium">
+        </grid-container>
+        <grid-container id="clickEffectPropLarge"
+             click-effect="spring-large">
+        </grid-container>
+        <grid-container id="clickEffectPropNone"
+             click-effect="">
+        </grid-container>
+
+        <text class="sub-title">
+            通用属性 -- dir
+        </text>
+        <grid-container id="dirPropRtl"
+             dir="rtl">
+        </grid-container>
+        <grid-container id="dirPropAuto"
+             dir="auto">
+        </grid-container>
+        <grid-container id="dirPropLtr"
+             dir="ltr">
+        </grid-container>
+        <grid-container id="dirPropNone"
+             dir="">
+        </grid-container>
+
+        <text class="sub-title">
+            渲染属性 -- for
+        </text>
+        <grid-container id="forPropNull"
+             for="">
+        </grid-container>
+        <grid-container id="forPropOne"
+             for="{{listOne}}">
+        </grid-container>
+        <grid-container id="forPropThree"
+             for="{{listThree}}">
+        </grid-container>
+
+        <text class="sub-title">
+            渲染属性 -- if
+        </text>
+        <grid-container id="ifPropTrue"
+             if="true">
+        </grid-container>
+
+        <text class="sub-title">
+            渲染属性 -- show
+        </text>
+        <grid-container id="showPropTrue"
+             show="true">
+        </grid-container>
+        <grid-container id="showPropFalse"
+             show="false">
+        </grid-container>
+        <grid-container id="showPropNone"
+             show="">
+        </grid-container>
+    </div>
+
+    <div style="background-color: #000000; width: 2px; height: 100%;">
+    </div>
+    <div class="specific-container">
+        <text class="title">
+            grid-container特有属性
+        </text>
+        <text class="title">
+            grid-container特有属性 -- columns
+        </text>
+        <grid-container id="typeColumnsNull" columns="">
+        </grid-container>
+        <grid-container id="typeColumnsXs" columns="xs">
+        </grid-container>
+        <grid-container id="typeColumnsSm" columns="sm">
+        </grid-container>
+        <grid-container id="typeColumnsMd" columns="md">
+        </grid-container>
+        <grid-container id="typeColumnsLg" columns="lg">
+        </grid-container>
+        <text class="title">
+            grid-container特有属性 -- sizetype
+        </text>
+        <grid-container id="typeSizetypeNull" sizetype="">
+        </grid-container>
+        <grid-container id="typeSizetypeXs" sizetype="xs">
+        </grid-container>
+        <grid-container id="typeSizetypeSm" sizetype="sm">
+        </grid-container>
+        <grid-container id="typeSizetypeMd" sizetype="md">
+        </grid-container>
+        <grid-container id="typeSizetypeLg" sizetype="lg">
+        </grid-container>
+        <text class="title">
+            grid-container特有属性 -- gutter
+        </text>
+        <grid-container id="typeGutter16" gutter="16">
+        </grid-container>
+        <grid-container id="typeGutter30" gutter="30">
+        </grid-container>
+        <text class="title">
+            grid-container特有属性 -- gridtemplate
+        </text>
+
+        <grid-container id="typeGridtemplateDefault" gridtemplate="default">
+        </grid-container>
+
+    </div>
+</div>

ace/ace_standard/src/main/js/default/pages/gridContainer/prop/index.js

+/**
+ * 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()
+
+    },
+}

ace/ace_standard/src/main/js/default/pages/gridContainer/style/index.js

+/**
+ * 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.
+ */

ace/ace_standard/src/main/js/default/pages/video/prop/index.css

+/**
+ * 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

ace/ace_standard/src/main/js/default/pages/video/prop/index.hml

+<!--/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */-->
+
+<div class="container">
+    <div class="prop-container">
+        <text class="title">
+            video通用属性
+        </text>
+
+        <text class="sub-title">
+            通用属性 -- id
+        </text>
+        <video id="idProp">
+        </video>
+
+        <text class="sub-title">
+            通用属性 -- class
+        </text>
+        <video id="classProp"
+               class="classProp">
+        </video>
+        <video id="classPropNone"
+               class="">
+        </video>
+
+
+        <text class="sub-title">
+            通用属性 -- style
+        </text>
+        <video id="styleProp"
+               style="width:10%;height:20px;background-color:red">
+        </video>
+
+        <text class="sub-title">
+            通用属性 -- ref
+        </text>
+        <video id="refProp"
+               ref="refProp">
+        </video>
+        <video id="refPropNone"
+               ref="">
+        </video>
+
+        <text class="sub-title">
+            通用属性 -- disabled
+        </text>
+        <video id="disabledPropTrue"
+               disabled="true">
+        </video>
+        <video id="disabledPropFalse"
+               disabled="false">
+        </video>
+        <video id="disabledPropNone"
+               disabled="">
+        </video>
+
+        <text class="sub-title">
+            通用属性 -- focusable
+        </text>
+        <video id="focusablePropTrue"
+               focusable="true">
+        </video>
+        <video id="focusablePropFalse"
+               focusable="false">
+        </video>
+        <video id="focusablePropNone"
+               focusable="">
+        </video>
+
+        <text class="sub-title">
+            通用属性 -- data-*
+        </text>
+        <video id="dataProp"
+               data-div="通用属性 -- data-*">
+        </video>
+        <video id="dataPropNone"
+               data-div="">
+        </video>
+
+        <text class="sub-title">
+            渲染属性 -- for
+        </text>
+        <video id="forPropNull"
+               for="">
+        </video>
+        <video id="forPropOne"
+               for="{{listOne}}">
+        </video>
+        <video id="forPropThree"
+               for="{{listThree}}">
+        </video>
+
+        <text class="sub-title">
+            渲染属性 -- if
+        </text>
+        <video id="ifPropTrue"
+               if="true">
+        </video>
+
+        <text class="sub-title">
+            渲染属性 -- show
+        </text>
+        <video id="showPropTrue"
+               show="true">
+        </video>
+        <video id="showPropFalse"
+               show="false">
+        </video>
+        <video id="showPropNone"
+               show="">
+        </video>
+    </div>
+
+    <div style="background-color: #000000; width: 2px; height: 100%;">
+    </div>
+    <div class="specific-container">
+        <text class="title">
+            video特有属性
+        </text>
+        <text class="sub-title">
+            静音播放属性 -- muted
+        </text>
+        <video id="mutedPropFalse"
+               muted="false">
+        </video>
+        <video id="mutedPropTrue"
+               muted="true">
+        </video>
+        <video id="mutedPropNone"
+               muted="">
+        </video>
+
+        <text class="sub-title">
+            视频路径属性 -- src
+        </text>
+        <video id="srcProp"
+               src="/common/images/video.mp4">
+        </video>
+        <video id="srcPropNone"
+               src="">
+        </video>
+
+        <text class="sub-title">
+            自动播放属性 -- autoplay
+        </text>
+        <video id="autoplayPropFalse"
+               autoplay="false">
+        </video>
+        <video id="autoplayPropTrue"
+               autoplay="true">
+        </video>
+        <video id="autoplayPropNone"
+               autoplay="">
+        </video>
+
+        <text class="sub-title">
+            预览海报属性 -- poster
+        </text>
+        <video id="posterProp"
+               poster="/common/images/image.png">
+        </video>
+        <video id="posterPropNone"
+               poster="">
+        </video>
+
+        <text class="sub-title">
+            显隐控制栏属性 -- controls
+        </text>
+        <video id="controlsPropFalse"
+               controls="false">
+        </video>
+        <video id="controlsPropTrue"
+               controls="true">
+        </video>
+        <video id="controlsPropNone"
+               controls="">
+        </video>
+
+        <text class="sub-title">
+            重头循环属性 -- loop
+        </text>
+        <video id="loopPropFalse"
+               loop="false">
+        </video>
+        <video id="loopPropTrue"
+               loop="true">
+        </video>
+        <video id="loopPropNone"
+               loop="">
+        </video>
+
+        <text class="sub-title">
+            起始时间属性 -- starttime
+        </text>
+        <video id="starttimeProp"
+               starttime="3">
+        </video>
+
+        <text class="sub-title">
+            全屏下布局属性 -- direction
+        </text>
+        <video id="directionPropAuto"
+               direction="auto">
+        </video>
+        <video id="directionPropVertical"
+               direction="vertical">
+        </video>
+        <video id="directionPropHorizontal"
+               direction="horizontal">
+        </video>
+        <video id="directionPropAdapt"
+               direction="adapt">
+        </video>
+        <video id="directionPropNone"
+               direction="">
+        </video>
+
+        <text class="sub-title">
+            播放速度属性 -- speed
+        </text>
+        <video id="speedProp"
+               speed="1.0">
+        </video>
+        <video id="speedPropNone"
+               speed="">
+        </video>
+
+    </div>
+</div>

ace/ace_standard/src/main/js/default/pages/video/prop/index.js

+/**
+ * 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()
+    },
+}

ace/ace_standard/src/main/js/default/pages/video/index.js → ace/ace_standard/src/main/js/default/pages/video/router/index.js

-// @ts-nocheck
 /**
  * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");

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

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();
     });