From d2f0666a820c1906da89da0488cb0c922a9866b6 Mon Sep 17 00:00:00 2001
From: dongwei <dongwei@kaihongdigi.com>
Date: Mon, 7 Mar 2022 22:46:46 +0800
Subject: [PATCH] add test cases

Signed-off-by: dongwei <dongwei@kaihongdigi.com>
---
 ace/ace_standard/src/main/config.json         |  11 +-
 .../main/js/default/pages/circle/index.css    | 366 -------
 .../main/js/default/pages/circle/index.hml    | 189 ----
 .../js/default/pages/circle/prop/index.css    |  29 +
 .../js/default/pages/circle/prop/index.hml    | 212 ++++
 .../js/default/pages/circle/prop/index.js     | 133 +++
 .../js/default/pages/circle/router/index.css  | 113 ++
 .../js/default/pages/circle/router/index.hml  |  81 ++
 .../pages/{rect => circle/router}/index.js    |   9 +-
 .../src/main/js/default/pages/rect/index.css  | 287 -----
 .../src/main/js/default/pages/rect/index.hml  | 173 ---
 .../main/js/default/pages/rect/prop/index.css |  29 +
 .../main/js/default/pages/rect/prop/index.hml | 245 +++++
 .../main/js/default/pages/rect/prop/index.js  | 138 +++
 .../js/default/pages/rect/router/index.css    | 127 +++
 .../js/default/pages/rect/router/index.hml    |  70 ++
 .../pages/{svg => rect/router}/index.js       |  10 +-
 .../src/main/js/default/pages/svg/index.css   | 288 -----
 .../src/main/js/default/pages/svg/index.hml   | 228 ----
 .../main/js/default/pages/svg/prop/index.css  |  29 +
 .../main/js/default/pages/svg/prop/index.hml  | 231 ++++
 .../main/js/default/pages/svg/prop/index.js   | 135 +++
 .../js/default/pages/svg/router/index.css     | 109 ++
 .../js/default/pages/svg/router/index.hml     |  54 +
 .../pages/{circle => svg/router}/index.js     |   9 +-
 .../src/main/js/default/test/List.test.js     |   5 +-
 .../main/js/default/test/circleProps.test.js  | 993 ++++++++++++++++++
 .../default/test/commonComponentJsApi.test.js |  12 +-
 .../main/js/default/test/rectProps.test.js    | 974 +++++++++++++++++
 .../src/main/js/default/test/svgProps.test.js | 901 ++++++++++++++++
 30 files changed, 4627 insertions(+), 1563 deletions(-)
 delete mode 100644 ace/ace_standard/src/main/js/default/pages/circle/index.css
 delete mode 100644 ace/ace_standard/src/main/js/default/pages/circle/index.hml
 create mode 100644 ace/ace_standard/src/main/js/default/pages/circle/prop/index.css
 create mode 100644 ace/ace_standard/src/main/js/default/pages/circle/prop/index.hml
 create mode 100644 ace/ace_standard/src/main/js/default/pages/circle/prop/index.js
 create mode 100644 ace/ace_standard/src/main/js/default/pages/circle/router/index.css
 create mode 100644 ace/ace_standard/src/main/js/default/pages/circle/router/index.hml
 rename ace/ace_standard/src/main/js/default/pages/{rect => circle/router}/index.js (77%)
 delete mode 100644 ace/ace_standard/src/main/js/default/pages/rect/index.css
 delete mode 100644 ace/ace_standard/src/main/js/default/pages/rect/index.hml
 create mode 100644 ace/ace_standard/src/main/js/default/pages/rect/prop/index.css
 create mode 100644 ace/ace_standard/src/main/js/default/pages/rect/prop/index.hml
 create mode 100644 ace/ace_standard/src/main/js/default/pages/rect/prop/index.js
 create mode 100644 ace/ace_standard/src/main/js/default/pages/rect/router/index.css
 create mode 100644 ace/ace_standard/src/main/js/default/pages/rect/router/index.hml
 rename ace/ace_standard/src/main/js/default/pages/{svg => rect/router}/index.js (77%)
 delete mode 100644 ace/ace_standard/src/main/js/default/pages/svg/index.css
 delete mode 100644 ace/ace_standard/src/main/js/default/pages/svg/index.hml
 create mode 100644 ace/ace_standard/src/main/js/default/pages/svg/prop/index.css
 create mode 100644 ace/ace_standard/src/main/js/default/pages/svg/prop/index.hml
 create mode 100644 ace/ace_standard/src/main/js/default/pages/svg/prop/index.js
 create mode 100644 ace/ace_standard/src/main/js/default/pages/svg/router/index.css
 create mode 100644 ace/ace_standard/src/main/js/default/pages/svg/router/index.hml
 rename ace/ace_standard/src/main/js/default/pages/{circle => svg/router}/index.js (77%)
 create mode 100644 ace/ace_standard/src/main/js/default/test/circleProps.test.js
 create mode 100644 ace/ace_standard/src/main/js/default/test/rectProps.test.js
 create mode 100644 ace/ace_standard/src/main/js/default/test/svgProps.test.js

diff --git a/ace/ace_standard/src/main/config.json b/ace/ace_standard/src/main/config.json
index 5b0d3c055..7dd506667 100755
--- a/ace/ace_standard/src/main/config.json
+++ b/ace/ace_standard/src/main/config.json
@@ -142,9 +142,6 @@
           "pages/obj_ImageBitmap/index",
           "pages/obj_OffscreenCanvas/index",
           "pages/obj_OffscreenCanvasRenderingContext2D/index",
-          "pages/svg/index",
-          "pages/rect/index",
-          "pages/circle/index",
           "pages/ellipse/index",
           "pages/path/index",
           "pages/line/index",
@@ -164,7 +161,13 @@
           "pages/span/prop/index",
           "pages/menu/prop/index",
           "pages/switch/prop/index",
-          "pages/slider/prop/index"
+          "pages/slider/prop/index",
+          "pages/svg/prop/index",
+          "pages/svg/router/index",
+          "pages/rect/prop/index",
+          "pages/rect/router/index",
+          "pages/circle/prop/index",
+          "pages/circle/router/index"
         ],
         "name": "default",
         "window": {
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.css b/ace/ace_standard/src/main/js/default/pages/circle/index.css
deleted file mode 100644
index e81f688df..000000000
--- a/ace/ace_standard/src/main/js/default/pages/circle/index.css
+++ /dev/null
@@ -1,366 +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: 1;
-}
-
-.title{
-    width: 100%;
-    font-size: 18px;
-    margin: 2px;
-    padding: 2px;
-    font-weight: bold;
-    text-align: center;
-}
-
-.sub-title{
-    width: 100%;
-    font-size: 14px;
-    text-align: left;
-    margin: 2px;
-    padding: 2px;
-}
-
-.style1{
-    width: 100%;
-    height: 100%;
-    min-width: 25px;
-    min-height: 10px;
-    max-width: 300px;
-    max-height: 50px;
-    padding-left: 10px;
-    padding-top: 20px;
-    padding-right: 15px;
-    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: 100px;
-    height:50px;
-    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-basis: 10px;
-    flex-shrink: 1;
-}
-
-.style4{
-    width: 60%;
-    height: 10%;
-    padding: 10px;
-    margin: 5px;
-    border: 2px solid #000000;
-}
-
-.contain1{
-    width: 100%;
-    height: 70px;
-    flex-direction: column;
-}
-
-.style5{
-    width: 60%;
-    height: 70px;
-    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: 70px;
-    position: absolute;
-    left: 10px;
-    top: 80px;
-    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 {
-    margin-bottom: 50px;
-    margin-top: 10px;
-    color: green;
-    stroke-width: 30px;
-}
-
-.prop-container{
-    flex-direction: column;
-    height: 100%;
-    flex-weight: 2;
-}
-#prop1 {
-    background-color: mediumslateblue;
-    width: 100%;
-    margin: 3px 5px;
-}
-
-.prop2 {
-    background-color: pink;
-    width: 100%;
-    margin: 3px 5px;
-}
-
-.prop3 {
-    background-color: darkseagreen;
-    width: 100%;
-    margin: 3px 5px;
-}
-
-.prop4 {
-    background-color: yellowgreen;
-    width: 100%;
-    margin: 3px 5px;
-}
-
-.prop5 {
-    background-color: cornflowerblue;
-    width: 100%;
-    margin: 3px 5px;
-}
-
-.prop6 {
-    background-color: burlywood;
-    width: 100%;
-    margin: 3px 5px;
-}
-
-.prop7 {
-    background-color: crimson;
-    width: 100%;
-    margin: 3px 5px;
-}
-
-.ani-container{
-    flex-direction: column;
-    height: 100%;
-    flex-weight: 0.8;
-}
-
-.ani1{
-    color: #72ac33;
-    stroke-width: 55px;
-    margin: 5px;
-    transform-origin: 0% 0%;
-    animation: ani1Go 3s infinite;
-}
-
-@keyframes ani1Go
-{
-    from {
-        background-color: #f76160;
-        opacity:0.3;
-        width:50px;
-        height: 50px;
-        transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
-        background-position:10% 10%
-    }
-    30% {
-        background-color: #60f761;
-        opacity:0.5;
-        width:70px;
-        height: 70px;
-        background-position:12% 12%;
-        transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
-    }
-    to {
-        background-color: #6160f7;
-        opacity:1;
-        width:90px;
-        height: 90px;
-        background-position:22% 22%;
-        transform:rotate(180deg) scale(2)
-    }
-}
-
-
-.ani2{
-    color: #ad4e2a;
-    stroke-width: 55px;
-    margin: 5px;
-    transform-origin: 2% 3%;
-    animation-name:ani2Go;
-    animation-delay:5s;
-    animation-duration:10s;
-    animation-iteration-count:4;
-    animation-timing-function:ease-out;
-    animation-direction:reverse;
-    animation-fill-mode:forwards;
-    animation-play-state:running;
-    transition:all 0 ease 0;
-}
-
-@keyframes ani2Go
-{
-    from {
-        background-color: #f76160;
-        opacity:0.3;
-        width:50px;
-        height: 50px;
-        background-position:10% 10%
-    }
-    30% {
-        background-color: #60f761;
-        opacity:0.5;
-        width:70px;
-        height: 70px;
-        background-position:12% 12%;
-        transform:translateX(10px) translateY(5px)  translateZ(15px)
-        rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
-    }
-    to {
-        background-color: #6160f7;
-        opacity:1;
-        width:90px;
-        height: 90px;
-        background-position:22% 22%;
-        transform:translateX(30px) translateY(45px)  translateZ(55px)
-        rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
-    }
-}
-
-.gradient-container{
-    flex-direction: column;
-}
-
-.gradient1{
-    height:100px;
-    stroke-width:4px;
-    margin: 5px;
-    background: linear-gradient(red, #00ff00);
-}
-
-.gradient2{
-    height:100px;
-    stroke-width: 4px;
-    margin: 5px;
-    background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
-}
-
-.gradient3{
-    height:100px;
-    stroke-width: 4px;
-    margin: 5px;
-    background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
-}
-
-.gradient4{
-    height:100px;
-    stroke-width: 4px;
-    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:100px;
-    color: #321124;
-    stroke-width: 4px;
-    margin: 5px;
-}
-
-.atom-container{
-    flex-direction: column;
-}
-
-.multimode-container{
-    flex-direction: column;
-}
-
-.multimode1{
-    height:100px;
-    color: #978666;
-    stroke-width: 4px;
-    margin: 5px;
-}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.hml b/ace/ace_standard/src/main/js/default/pages/circle/index.hml
deleted file mode 100644
index 3259148fa..000000000
--- a/ace/ace_standard/src/main/js/default/pages/circle/index.hml
+++ /dev/null
@@ -1,189 +0,0 @@
-<div class="container">
-    <div class="style-container">
-        <text class="title">
-            通用样式
-        </text>
-        <text class="sub-title">
-            circle通用样式1
-        </text>
-        <circle class="style1" cx="40" cy="5" r="20" fill="white" stroke="red"  stroke="blue" stroke-width="3" ></circle>
-
-        <text  class="sub-title">
-            circle通用样式2
-        </text>
-        <circle class="style2" cx="40" cy="22" r="20" fill="white" stroke="red"  stroke="blue" stroke-width="4" fill-opacity="0"></circle>
-
-        <text  class="sub-title">
-            circle通用样式3
-        </text>
-        <svg class="style3" x="0" y="0" width="100" height="100"  >
-            <circle cx="40" cy="50" r="30" fill="white" stroke="blue"  stroke="blue" stroke-width="4" fill-opacity="0"></circle>
-        </svg>
-
-        <text  class="sub-title">
-            circle通用样式4
-        </text>
-        <circle class="style4" cx="25" cy="25" r="20" fill="white" stroke="block"  stroke="blue" stroke-width="4" fill-opacity="0"></circle>
-        <text  class="sub-title">
-            circle通用样式5
-        </text>
-        <div class="contain1">
-            <circle class="style5" cx="40" cy="30" r="20" fill="white" stroke="blue"  stroke="blue" stroke-width="4" fill-opacity="0"></circle>
-            <circle class="style6" cx="40" cy="30" r="20" fill="white" stroke="blue"  stroke="blue" stroke-width="4" fill-opacity="0"></circle>
-        </div>
-    </div>
-    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
-    </divider>
-    <div class="sub-container">
-        <div class="prop-container">
-            <text class="title">
-                通用属性
-            </text>
-            <text class="sub-title">
-                circle通用属性1
-            </text>
-            <svg x="0" y="0" width="200" height="50" >
-                <circle class="prop1" id="prop1" data-name ="prop1" cx="50" cy="20" r="15" stroke-width="3" fill="red" stroke="blue" fill-opacity="0.5"></circle>
-            </svg>
-
-            <text class="sub-title">
-                circle通用属性2
-            </text>
-            <svg x="0" y="0" width="200" height="50" >
-                <circle class="prop2" ref="prop2" data-name ="prop2" cx="50" cy="20" r="15" stroke-width="3" fill="red" stroke="blue"  opacity="0.4"></circle>
-            </svg>
-
-            <text  class="sub-title">
-                circle通用属性3
-            </text>
-            <svg x="0" y="0" width="200" height="50" fill="white">
-                <circle class="prop3" id="prop3" cx="50" cy="20" r="15" stroke-width="4" fill="red" stroke="blue"></circle>
-            </svg>
-
-            <text  class="sub-title">
-                circle通用属性4
-            </text>
-            <svg x="0" y="0" width="200" height="50" fill="white">
-                <circle class="prop4" id="prop4" cx="50" cy="20" r="15" stroke-width="5" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></circle>
-            </svg>
-
-            <text class="sub-title">
-                circle通用属性5
-            </text>
-            <svg x="0" y="0" width="200" height="50"  fill="white" fill-opacity="0">
-                <circle class="prop5" id="prop5" cx="50" cy="30" r="15" stroke="blue" stroke-width="4"  transform="rotate(-10)"></circle>
-            </svg>
-
-            <text class="sub-title">
-                circle通用属性6
-            </text>
-            <svg x="0" y="0" width="200" height="50"  fill="white" fill-opacity="0">
-                <circle class="prop6" id="prop6" cx="20" cy="30" r="15" stroke="blue" stroke-width="4" transform="translate(20)"></circle>
-            </svg>
-
-            <text class="sub-title">
-                circle通用属性7
-            </text>
-            <svg x="0" y="0" width="200" height="50"  fill="white" fill-opacity="0">
-                <circle class="prop7" id="prop7" cx="80" cy="40" r="15" stroke="blue" stroke-width="4" transform="skewY(-10)"></circle>
-            </svg>
-        </div>
-        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
-        </divider>
-        <div class="ani-container">
-            <text class="title">
-                动画样式
-            </text>
-            <text class="sub-title">
-                circle动画样式1
-            </text>
-            <svg fill="white" width="200" height="40">
-                <circle cx="100" cy="20" r="15" stroke-width="4" fill="white" stroke="blue">
-                    <animate attributeName="stroke-width" from="4" to="10" calcMode="discrete" dur="2000" repeatCount="indefinite"></animate>
-                    <animate attributeName="stroke" values="red;blue" dur="2000" repeatCount="indefinite"></animate>
-                </circle>
-                <circle cx="60" cy="20" r="15"  fill="blue">
-                    <animate attributeName="fill" values="red;blue" dur="2000" repeatCount="indefinite"></animate>
-                </circle>
-                <circle cx="20" cy="20" r="15"  fill="blue">
-                    <animate attributeName="fill-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate>
-                </circle>
-            </svg>
-            <text class="sub-title">
-                circle动画样式2
-            </text>
-            <svg fill="white" width="200" height="120">
-                <circle cx="0" cy="20" r="20" stroke-width="4" fill="white" stroke="blue">
-                    <animate attributeName="r" from="0" to="30" dur="2000" repeatCount="indefinite"></animate>
-                    <animate attributeName="cx" from="40" to="80" dur="2000" repeatCount="indefinite"></animate>
-                </circle>
-
-                <circle cx="30" cy="20" r="20" stroke-width="10" stroke="red" stroke-dasharray="60 10" stroke-dashoffset="3">
-                    <animate attributeName="stroke-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate>
-                    <animate attributeName="stroke-dashoffset" values="30;0;30" dur="500" repeatCount="indefinite"></animate>
-                    <animate attributeName="cy" from="20" to="400" dur="3000" repeatCount="indefinite"></animate>
-                </circle>
-                <circle cx="30" cy="20" r="5" fill="blue">
-                    <animate attributeName="cy" from="20" to="400" dur="3000" repeatCount="indefinite"></animate>
-                </circle>
-
-            </svg>
-        </div>
-    </div>
-
-    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
-    </divider>
-
-    <div class="sub-container">
-        <div class="gradient-container">
-            <text class="title">
-                渐变样式
-            </text>
-            <text class="sub-title">
-                circle渐变样式1
-            </text>
-            <circle class="gradient1" cx="60" cy="45" r="35" fill="white" fill-opacity="0" stroke="block" stroke-dasharray="5 3" stroke-dashoffset="3"></circle>
-            <text  class="sub-title">
-                circle渐变样式2
-            </text>
-            <circle class="gradient2" cx="60" cy="45" r="35" fill="white" fill-opacity="0" stroke="blue" ></circle>
-            <text  class="sub-title">
-                circle渐变样式3
-            </text>
-            <circle class="gradient3"  cx="60" cy="45" r="35" fill="pink" stroke="yellow"  stroke="blue" ></circle>
-            <text  class="sub-title">
-                circle渐变样式4
-            </text>
-            <circle class="gradient4" cx="60" cy="45" r="35" fill="white" stroke="red"  stroke="blue"></circle>
-        </div>
-        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
-        </divider>
-        <div class="access-container">
-            <text class="title">
-                无障碍
-            </text>
-            <text class="sub-title">
-                circle无障碍1
-            </text>
-            <circle class="access1" accessibilitygroup ="true"
-                    accessibilitytext="这是circle"
-                    accessibilitydescription="点击此按键会弹出一个对话框"
-                    accessibilityimportance="no-hide-descendants"
-                    cx="50" cy="35" r="30"  fill="#978666" stroke="#00FF00"></circle>
-        </div>
-        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
-        </divider>
-
-        <div class="multimode-container">
-            <text class="title">
-                多模输入
-            </text>
-            <text class="sub-title">
-                circle多模输入1
-            </text>
-            <circle class="multimode1" width="200" height="80" voicelabel = "voice"
-                    subscriptflag="on" subscriptlabel="circle" scenelabel="common"
-                    cx="50" cy="35" r="30" stroke-width="4" fill="#978666" stroke="block"></circle>
-        </div>
-    </div>
-</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/prop/index.css b/ace/ace_standard/src/main/js/default/pages/circle/prop/index.css
new file mode 100644
index 000000000..945452572
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/circle/prop/index.css
@@ -0,0 +1,29 @@
+.container {
+    flex-direction:row;
+    width:100%;
+    height:100%;
+    padding: 1px;
+}
+
+.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;
+    height: 100%;
+    flex-weight: 1;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/circle/prop/index.hml
new file mode 100644
index 000000000..81b4bc2c0
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/circle/prop/index.hml
@@ -0,0 +1,212 @@
+<div class="container">
+    <div class="prop-container">
+        <text class="title">
+            circle通用属性
+        </text>
+
+        <text class="sub-title">
+            通用属性 -- fill
+        </text>
+        <svg width="100" height="25" >
+            <circle id ="fillProp" cx="50" cy="12" r="10" fill="red"></circle>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- fill-opacity
+        </text>
+        <div style="height: 25px;width: 150px;">
+            <svg width="50px" height="25px">
+                <circle id ="fillOpacityPropOne" cx="30" cy="12" r="10" fill-opacity="0.5" fill="red"></circle>
+            </svg>
+            <svg width="50px" height="25px">
+                <circle id ="fillOpacityPropTwo" cx="30" cy="12" r="10" fill-opacity="1" fill="red"></circle>
+            </svg>
+            <svg width="50px" height="25px">
+                <circle id ="fillOpacityPropThree" cx="30" cy="12" r="10" fill-opacity="1.5" fill="red"></circle>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- fill-rule
+        </text>
+        <div style="height: 25px;width: 150px;">
+            <svg width="50px" height="25px">
+                <circle id ="fillRulePropOne" cx="30" cy="12" r="10" fill-rule="evenodd" fill="red"></circle>
+            </svg>
+            <svg  width="50px" height="25px">
+                <circle id ="fillRulePropTwo" cx="30" cy="12" r="10" fill-rule="nonzero" fill="red"></circle>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- opacity
+        </text>
+        <div style="height: 25px;width: 150px;">
+            <svg width="50px" height="25px">
+                <circle id ="opacityPropOne" cx="30" cy="12" r="10" fill="red" opacity="0.5"></circle>
+            </svg>
+            <svg width="50px" height="25px">
+                <circle id ="opacityPropTwo" cx="30" cy="12" r="10" fill="red" opacity="1"></circle>
+            </svg>
+            <svg width="50px" height="25px">
+                <circle id ="opacityPropThree" cx="30" cy="12" r="10" fill="red" opacity="1.5"></circle>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke
+        </text>
+        <svg width="100px" height="25px" fill="white">
+            <circle id ="strokeProp" cx="30" cy="12" r="10" stroke = "red"></circle>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-dasharray
+        </text>
+        <svg width="100px" height="25px" fill="white">
+            <circle id ="strokeDashArrayProp" cx="30" cy="12" r="10" stroke = "red" stroke-dasharray="2 3"></circle>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-dashoffset
+        </text>
+        <svg width="100px" height="25px" fill="white">
+            <circle id ="strokeDashOffsetProp" cx="30" cy="12" r="10" stroke = "red" stroke-dashoffset="23"></circle>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-linejoin
+        </text>
+        <div style="height: 25px;width: 150px;">
+            <svg  width="50px" height="25px" fill="white">
+                <circle id ="strokeDashOffsetProp" cx="30" cy="12" r="10"
+                        stroke = "red" stroke-linejoin="bevel"></circle>
+            </svg>
+            <svg  width="50px" height="25px" fill="white">
+                <circle id ="strokeLineJoinPropTwo" cx="30" cy="12" r="10"
+                        stroke = "red" stroke-linejoin="miter"></circle>
+            </svg>
+            <svg  width="50px" height="25px" fill="white">
+                <circle id ="strokeLineJoinPropThree" cx="30" cy="12" r="10"
+                        stroke = "red" stroke-linejoin="round"></circle>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke-linecap
+        </text>
+        <div style="height: 25px;width: 150px;">
+            <svg width="50px" height="25px" fill="white">
+                <circle id ="strokeLineCapPropOne" cx="30" cy="12" r="10"
+                        stroke = "red" stroke-linecap="butt"></circle>
+            </svg>
+            <svg width="50px" height="25px" fill="white">
+                <circle id ="strokeLineCapPropTwo" cx="30" cy="12" r="10"
+                        stroke = "red" stroke-linecap="round"></circle>
+            </svg>
+            <svg width="50px" height="25px" fill="white">
+                <circle id ="strokeLineCapPropThree" cx="30" cy="12" r="10"
+                        stroke = "red" stroke-linecap="square"></circle>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke-miterlimit
+        </text>
+        <svg width="100px" height="25px" fill="white">
+            <circle id ="strokeMiterLimitProp" cx="30" cy="12" r="10"
+                    stroke = "red" stroke-miterlimit="10"></circle>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-opacity
+        </text>
+        <div style="height: 25px;width: 150px;">
+            <svg width="50px" height="25px" fill="white">
+                <circle id ="strokeOpacityPropOne" cx="30" cy="12" r="10"
+                        stroke = "red" stroke-opacity="0.5"></circle>
+            </svg>
+            <svg width="50px" height="25px" fill="white">
+                <circle id ="strokeOpacityPropTwo" cx="30" cy="12" r="10"
+                      stroke = "red" stroke-opacity="1"></circle>
+            </svg>
+            <svg width="50px" height="25px" fill="white">
+                <circle id ="strokeOpacityPropThree" cx="30" cy="12" r="10"
+                      stroke = "red" stroke-opacity="1.5"></circle>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke-width
+        </text>
+        <svg width="100px" height="30px" fill="white">
+            <circle id ="strokeWidthProp" cx="30" cy="14" r="10"
+                  stroke = "red" stroke-width="6"></circle>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- transform
+        </text>
+        <svg width="100px" height="100px" fill="red">
+            <circle id ="transformProp" cx="50" cy="50" r="20"
+                    transform="translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)"></circle>
+        </svg>
+    </div>
+
+    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
+    </divider>
+
+    <div class="prop-container">
+        <text class="title">
+            circle特有属性
+        </text>
+
+        <text class="sub-title">
+            特有属性-id
+        </text>
+        <svg width="100px" height="50px">
+            <circle id ="idProp" cx="50" cy="25" r="20" fill="red"></circle>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-cx
+        </text>
+        <svg  width="200px" height="50px">
+            <circle id ="cxPropOne" cx="50" cy="25" r="20" fill="red"></circle>
+            <circle id ="cxPropTwo" cx="50%" cy="25" r="20" fill="pink"></circle>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-cy
+        </text>
+        <svg  width="200px" height="50px">
+            <circle id ="cyPropOne" cx="50" cy="25" r="20" fill="red"></circle>
+            <circle id ="cyPropTwo" cx="100" cy="50%" r="20" fill="pink"></circle>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-r
+        </text>
+        <svg width="200px" height="50px">
+            <circle id ="rPropOne" cx="50" cy="25" r="20" fill="red" ></circle>
+            <circle id ="rPropTwo" cx="100" cy="25" r="20%" fill="pink"></circle>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-if
+        </text>
+        <svg width="100px" height="50px">
+            <circle id ="ifPropTrue" cx="50" cy="25" r="20" fill="red" if="true"></circle>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-show
+        </text>
+        <svg width="200px" height="50px">
+            <circle id ="showPropTrue" cx="50" cy="25" r="20" fill="red" show="true"></circle>
+            <circle id ="showPropFalse" cx="50" cy="25" r="20" fill="red" show="false"></circle>
+            <circle id ="showPropNone" cx="50" cy="25" r="20" fill="red" show=""></circle>
+        </svg>
+    </div>
+
+</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/prop/index.js b/ace/ace_standard/src/main/js/default/pages/circle/prop/index.js
new file mode 100644
index 000000000..4f83484d1
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/circle/prop/index.js
@@ -0,0 +1,133 @@
+/**
+ * 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.
+ */
+export default {
+    data: {
+        fillProp : null,
+        fillOpacityPropTwo : null,
+        fillOpacityPropOne : null,
+        fillOpacityPropThree : null,
+        fillRulePropTwo : null,
+        fillRulePropOne : null,
+        opacityPropOne : null,
+        opacityPropTwo : null,
+        opacityPropThree : null,
+        strokeProp : null,
+        strokeDashArrayProp : null,
+        strokeDashOffsetProp : null,
+        strokeLineJoinPropTwo : null,
+        strokeLineJoinPropOne : null,
+        strokeLineJoinPropThree : null,
+        strokeLineCapPropOne : null,
+        strokeLineCapPropTwo : null,
+        strokeLineCapPropThree : null,
+        strokeMiterLimitProp : null,
+        strokeOpacityPropOne : null,
+        strokeOpacityPropTwo : null,
+        strokeOpacityPropThree : null,
+        strokeWidthProp : null,
+        transformProp : null,
+        idProp : null,
+        cxPropOne : null,
+        cxPropTwo : null,
+        cyPropOne : null,
+        cyPropTwo : null,
+        rPropOne : null,
+        rPropTwo : null,
+        ifPropTrue : null,
+        showPropTrue : null,
+        showPropFalse : null,
+        showPropNone : null
+
+    },
+
+    onShow(){
+        this.getCommonPropValues();
+        globalThis.value = {
+            fillProp : this.fillProp,
+            fillOpacityPropTwo : this.fillOpacityPropTwo,
+            fillOpacityPropOne : this.fillOpacityPropOne,
+            fillOpacityPropThree : this.fillOpacityPropThree,
+            fillRulePropTwo : this.fillRulePropTwo,
+            fillRulePropOne : this.fillRulePropOne,
+            opacityPropOne : this.opacityPropOne,
+            opacityPropTwo : this.opacityPropTwo,
+            opacityPropThree : this.opacityPropThree,
+            strokeProp : this.strokeProp,
+            strokeDashArrayProp : this.strokeDashArrayProp,
+            strokeDashOffsetProp : this.strokeDashOffsetProp,
+            strokeLineJoinPropTwo : this.strokeLineJoinPropTwo,
+            strokeLineJoinPropOne : this.strokeLineJoinPropOne,
+            strokeLineJoinPropThree : this.strokeLineJoinPropThree,
+            strokeLineCapPropOne : this.strokeLineCapPropOne,
+            strokeLineCapPropTwo : this.strokeLineCapPropTwo,
+            strokeLineCapPropThree : this.strokeLineCapPropThree,
+            strokeMiterLimitProp : this.strokeMiterLimitProp,
+            strokeOpacityPropOne : this.strokeOpacityPropOne,
+            strokeOpacityPropTwo : this.strokeOpacityPropTwo,
+            strokeOpacityPropThree : this.strokeOpacityPropThree,
+            strokeWidthProp : this.strokeWidthProp,
+            transformProp : this.transformProp,
+            idProp : this.idProp,
+            cxPropOne : this.cxPropOne,
+            cxPropTwo : this.cxPropTwo,
+            cyPropOne : this.cyPropOne,
+            cyPropTwo : this.cyPropTwo,
+            rPropOne : this.rPropOne,
+            rPropTwo : this.rPropTwo,
+            ifPropTrue : this.ifPropTrue,
+            showPropTrue : this.showPropTrue,
+            showPropFalse : this.showPropFalse,
+            showPropNone : this.showPropNone
+        }
+    },
+
+    getCommonPropValues(){
+        this.fillProp = this.$element("fillProp").getInspector()
+        this.fillOpacityPropTwo = this.$element("fillOpacityPropTwo").getInspector()
+        this.fillOpacityPropOne = this.$element("fillOpacityPropOne").getInspector()
+        this.fillOpacityPropThree = this.$element("fillOpacityPropThree").getInspector()
+        this.fillRulePropTwo = this.$element("fillRulePropTwo").getInspector()
+        this.fillRulePropOne = this.$element("fillRulePropOne").getInspector()
+        this.opacityPropOne = this.$element("opacityPropOne").getInspector()
+        this.opacityPropTwo = this.$element("opacityPropTwo").getInspector()
+        this.opacityPropThree = this.$element("opacityPropThree").getInspector()
+        this.strokeProp = this.$element("strokeProp").getInspector()
+        this.strokeDashArrayProp = this.$element("strokeDashArrayProp").getInspector()
+        this.strokeDashOffsetProp = this.$element("strokeDashOffsetProp").getInspector()
+        this.strokeLineJoinPropTwo = this.$element("strokeLineJoinPropTwo").getInspector()
+        this.strokeLineJoinPropOne = this.$element("strokeLineJoinPropOne").getInspector()
+        this.strokeLineJoinPropThree = this.$element("strokeLineJoinPropThree").getInspector()
+        this.strokeLineCapPropOne = this.$element("strokeLineCapPropOne").getInspector()
+        this.strokeLineCapPropTwo = this.$element("strokeLineCapPropTwo").getInspector()
+        this.strokeLineCapPropThree = this.$element("strokeLineCapPropThree").getInspector()
+        this.strokeMiterLimitProp = this.$element("strokeMiterLimitProp").getInspector()
+        this.strokeOpacityPropOne = this.$element("strokeOpacityPropOne").getInspector()
+        this.strokeOpacityPropTwo = this.$element("strokeOpacityPropTwo").getInspector()
+        this.strokeOpacityPropThree = this.$element("strokeOpacityPropThree").getInspector()
+        this.strokeWidthProp = this.$element("strokeWidthProp").getInspector()
+        this.transformProp = this.$element("transformProp").getInspector()
+        this.idProp = this.$element("idProp").getInspector()
+        this.cxPropOne = this.$element("cxyPropOne").getInspector()
+        this.cxPropTwo = this.$element("cxyPropTwo").getInspector()
+        this.cyPropOne = this.$element("cxyPropOne").getInspector()
+        this.cyPropTwo = this.$element("cxyPropTwo").getInspector()
+        this.rPropOne = this.$element("rPropOne").getInspector()
+        this.rPropTwo = this.$element("rPropTwo").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()
+    },
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/router/index.css b/ace/ace_standard/src/main/js/default/pages/circle/router/index.css
new file mode 100644
index 000000000..f0a8f7423
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/circle/router/index.css
@@ -0,0 +1,113 @@
+/**
+ * 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;
+}
+
+.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;
+    text-align: center;
+}
+
+.prop-container{
+    flex-direction: column;
+    height: 100%;
+    flex-weight: 2;
+    align-items: center;
+}
+#prop1 {
+    background-color: mediumslateblue;
+    width: 100%;
+    margin: 3px 5px;
+}
+
+#prop2 {
+    background-color: pink;
+    width: 100%;
+    margin: 3px 5px;
+}
+
+#prop3 {
+    background-color: darkseagreen;
+    width: 100%;
+    margin: 3px 5px;
+}
+
+#prop4 {
+    background-color: yellowgreen;
+    width: 100%;
+    margin: 3px 5px;
+}
+
+#prop5 {
+    background-color: cornflowerblue;
+    width: 100%;
+    margin: 3px 5px;
+}
+
+#prop6 {
+    background-color: burlywood;
+    width: 100%;
+    margin: 3px 5px;
+}
+
+#prop7 {
+    background-color: crimson;
+    width: 100%;
+    margin: 3px 5px;
+}
+
+#prop8{
+    background-color: khaki;
+    width: 100%;
+    margin: 3px 5px;
+}
+
+#prop9{
+    background-color: cornsilk;
+    width: 100%;
+    margin: 3px 5px;
+}
+
+#prop10{
+    background-color: yellowgreen;
+    width: 100%;
+    margin: 3px 5px;
+}
+
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/router/index.hml b/ace/ace_standard/src/main/js/default/pages/circle/router/index.hml
new file mode 100644
index 000000000..b5b48d4f2
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/circle/router/index.hml
@@ -0,0 +1,81 @@
+<div class="container">
+    <div class="sub-container">
+        <div class="prop-container">
+            <text class="title">
+                通用属性
+            </text>
+            <text class="sub-title">
+                circle通用属性1
+            </text>
+            <svg x="0" y="0" width="200" height="50" >
+                <circle id="prop1" cx="100" cy="20" r="15" stroke-width="3" fill="red" stroke="blue" fill-opacity="0.5"></circle>
+            </svg>
+
+            <text class="sub-title">
+                circle通用属性2
+            </text>
+            <svg x="0" y="0" width="200" height="50" >
+                <circle id="prop2" cx="100" cy="20" r="15" stroke-width="3" fill="red" stroke="blue"  opacity="0.4"></circle>
+            </svg>
+
+            <text  class="sub-title">
+                circle通用属性3
+            </text>
+            <svg x="0" y="0" width="200" height="50" fill="white">
+                <circle id="prop3" cx="100" cy="20" r="15" stroke-width="4" fill="red" stroke="blue"></circle>
+            </svg>
+
+            <text  class="sub-title">
+                circle通用属性4
+            </text>
+            <svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
+                <circle id="prop4" cx="100" cy="20" r="15" stroke-width="5" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></circle>
+            </svg>
+
+            <text class="sub-title">
+                circle通用属性5
+            </text>
+            <svg x="0" y="0" width="200" height="50"  fill="white" fill-opacity="0">
+                <circle id="prop5" cx="100" cy="40" r="15" stroke="blue" stroke-width="4"  transform="rotate(-10)"></circle>
+            </svg>
+
+            <text class="sub-title">
+                circle通用属性6
+            </text>
+            <svg x="0" y="0" width="200" height="50"  fill="white" fill-opacity="0">
+                <circle id="prop6" cx="100" cy="22" r="15" stroke="blue" stroke-width="4" transform="translate(20)"></circle>
+            </svg>
+
+            <text class="sub-title">
+                circle通用属性7
+            </text>
+            <svg x="0" y="0" width="200" height="50"  fill="white" fill-opacity="0">
+                <circle id="prop7" cx="80" cy="35" r="15" stroke="blue" stroke-width="4" transform="skewY(-10)"></circle>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            circle通用属性8
+        </text>
+        <svg x="0" y="0" width="200" height="50"  fill="white" >
+            <circle id="prop8" cx="100" cy="25" r="15" fill="red" fill-rule="evenodd"></circle>
+        </svg>
+
+        <text class="sub-title">
+            circle通用属性9
+        </text>
+        <svg x="0" y="0" width="200" height="50"  fill="white" >
+            <circle id="prop9" cx="100" cy="25" r="15" fill="pink" stroke-linejoin="bevel"></circle>
+        </svg>
+
+        <text class="sub-title">
+            circle通用属性10
+        </text>
+        <svg x="0" y="0" width="200" height="50"  fill="white" >
+            <circle id="prop10" cx="100" cy="25" r="15" fill="red" stroke-miterlimit="10"></circle>
+        </svg>
+        
+    </div>
+
+
+</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.js b/ace/ace_standard/src/main/js/default/pages/circle/router/index.js
similarity index 77%
rename from ace/ace_standard/src/main/js/default/pages/rect/index.js
rename to ace/ace_standard/src/main/js/default/pages/circle/router/index.js
index 260427920..72eeccf55 100644
--- a/ace/ace_standard/src/main/js/default/pages/rect/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/circle/router/index.js
@@ -12,15 +12,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import prompt from '@system.prompt';
+
 export default {
     data: {
         title: ""
     },
-    onShow(){
-        // 通用属性
-        var prop1 =  this.$element("prop1");
-        var name1 = prop1.dataSet.a
-        var prop2 =  this.$refs.prop2;
-        var name2 = prop2.dataSet.a
-    }
 }
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.css b/ace/ace_standard/src/main/js/default/pages/rect/index.css
deleted file mode 100644
index 97964431d..000000000
--- a/ace/ace_standard/src/main/js/default/pages/rect/index.css
+++ /dev/null
@@ -1,287 +0,0 @@
-.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: 1;
-}
-
-.title{
-    width: 100%;
-    font-size: 18px;
-    margin: 2px;
-    padding: 2px;
-    font-weight: bold;
-    text-align: center;
-}
-
-.sub-title{
-    width: 100%;
-    font-size: 14px;
-    text-align: left;
-    margin: 2px;
-    padding: 2px;
-}
-
-.style1{
-    width: 100%;
-    height: 100%;
-    min-width: 25px;
-    min-height: 10px;
-    max-width: 300px;
-    max-height: 50px;
-    padding-left: 10px;
-    padding-top: 20px;
-    padding-right: 15px;
-    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: 50px;
-    height: 20px;
-    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%;
-    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/bg-tv.jpg');
-    background-size:cover;
-    background-repeat: repeat-x;
-    background-position: center;
-    flex:1;
-    flex-grow: 2;
-    flex-basis: 10px;
-    flex-shrink: 1;
-}
-
-.style4{
-    width: 60%;
-    height: 5%;
-    padding: 10px;
-    margin: 5px;
-    border: 2px solid #000000;
-}
-
-.contain1{
-    width: 100%;
-    height: 70px;
-    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;
-}
-
-
-
-.prop-container{
-    flex-direction: column;
-    height: 100%;
-    flex-weight: 1.5;
-}
-
-/*#prop1 {*/
-/*    margin: 5px;*/
-/*}*/
-
-/*.prop2 {*/
-/*    color: #343524;*/
-/*    stroke-width: 15px;*/
-/*    margin: 5px;*/
-/*}*/
-/*.prop3{*/
-/*    color: #679855;*/
-/*    stroke-width: 15px;*/
-/*    margin: 5px;*/
-/*}*/
-
-/*.prop4 {*/
-/*    color: #456345;*/
-/*    stroke-width: 25px;*/
-/*    margin: 5px;*/
-/*}*/
-
-/*.prop5 {*/
-/*    color: #831834;*/
-/*    stroke-width: 40px;*/
-/*    margin: 5px;*/
-/*    height: 70px;*/
-/*}*/
-
-.ani-container{
-    flex-direction: column;
-    height: 100%;
-    flex-weight: 1;
-}
-
-.ani1{
-    background-color: #72ac33;
-    width: 55px;
-    height: 55px;
-    margin: 5px;
-    transform-origin: 0% 0%;
-    animation: ani1Go 3s infinite;
-}
-
-@keyframes ani1Go
-{
-    from {
-        background-color: #f76160;
-        opacity:0.3;
-        width:50px;
-        height: 50px;
-        transform:translate(20px) rotate(10deg) scale(0.2);
-        background-position:10% 10%
-    }
-    30% {
-        background-color: #60f761;
-        opacity:0.5;
-        width:70px;
-        height: 70px;
-        background-position:12% 12%;
-        transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
-    }
-    to {
-        background-color: #6160f7;
-        opacity:1;
-        width:90px;
-        height: 90px;
-        background-position:22% 22%;
-        transform:rotate(180deg) scale(2)
-    }
-}
-
-.ani2{
-    background-color: #ad4e2a;
-    width: 55px;
-    height: 55px;
-    margin: 5px;
-}
-
-.gradient-container{
-    flex-direction: column;
-}
-
-.gradient1{
-    stroke-width: 30px;
-    margin: 5px;
-    background: linear-gradient(red, #00ff00);
-}
-
-.gradient2{
-    stroke-width: 30px;
-    margin: 5px;
-    background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
-}
-
-.gradient3{
-    stroke-width: 30px;
-    margin: 5px;
-    background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
-}
-
-.gradient4{
-    stroke-width: 30px;
-    margin: 5px;
-    background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
-}
-
-.access-container{
-    flex-direction: column;
-}
-
-.access1{
-    color: #321124;
-    stroke-width: 30px;
-    margin: 5px;
-}
-
-.atom-container{
-    flex-direction: column;
-}
-
-.multimode-container{
-    flex-direction: column;
-}
-
-.multimode1{
-/*    color: #978666;*/
-/*    stroke-width: 30px;*/
-    margin: 5px;
-}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.hml b/ace/ace_standard/src/main/js/default/pages/rect/index.hml
deleted file mode 100644
index 1ddc05a60..000000000
--- a/ace/ace_standard/src/main/js/default/pages/rect/index.hml
+++ /dev/null
@@ -1,173 +0,0 @@
-<div class="container">
-    <div class="style-container">
-        <text class="title">
-            通用样式
-        </text>
-        <text class="sub-title">
-            rect通用样式1
-        </text>
-            <rect class="style1" id="style1" x="0" y="-5" width="30" height="30" ></rect>
-        <text  class="sub-title">
-            rect通用样式2
-        </text>
-        <svg x="0" y="0" width="100" height="100">
-            <rect class="style2" id="style2" x="0" y="10" width="30" height="30" fill="blue"></rect>
-        </svg>
-        <text  class="sub-title">
-            rect通用样式3
-        </text>
-        <svg  x="0" y="0" width="100" height="100"  >
-            <rect  class="style3" id="style3" x="0" y="0" width="30" height="30" fill="blue" fill-opacity="0.5"></rect>
-        </svg>
-        <text  class="sub-title">
-            rect通用样式4
-        </text>
-        <svg  x="0" y="0" width="100" height="80" >
-            <rect class="style4" id="style4" x="10" y="5" width="50" height="50" fill="blue" fill-opacity="0" stroke="yellow" stroke-width="4" rx="10" ry="10" ></rect>
-        </svg>
-        <text  class="sub-title">
-            rect通用样式5
-        </text>
-        <div class="contain1">
-            <svg  width="100" height="30">
-                <rect class="style5" id="style5" x="10" y="0" width="70" height="30" fill="blue" ></rect>
-            </svg>
-            <svg  width="100" height="30">
-                <rect class="style6" id="style6" x="10" y="0" width="70" height="30" fill="blue" ></rect>
-            </svg>
-        </div>
-    </div>
-    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
-    </divider>
-    <div class="sub-container">
-        <div class="prop-container">
-            <text class="title">
-                通用属性
-            </text>
-            <text class="sub-title">
-                rect通用属性1
-            </text>
-            <svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60"  id="prop1" class="prop1" data-name ="prop1">
-                <rect x="10" y="10" width="50" height="50" fill-opacity="0.5"></rect>
-                <rect x="80" y="10" width="50" height="50" opacity="0.8"></rect>
-            </svg>
-
-            <text  class="sub-title">
-                rect通用属性2
-            </text>
-            <svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" ref ="prop2" class="prop2" data-name ="prop2" >
-                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"></rect>
-                <rect x="70" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
-                <rect x="130" y="10" width="50" height="50" stroke="blue"  stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
-            </svg>
-            <text  class="sub-title">
-                rect通用属性3
-            </text>
-            <svg id="prop3" class="prop3" x="0" y="0" width="180" height="140" viewBox="0 0 180 140" >
-                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="rotate(-10)"></rect>
-                <rect x="60" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="translate(40)"></rect>
-                <rect x="10" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="skewX(10)"></rect>
-                <rect x="120" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="skewY(5)"></rect>
-            </svg>
-            <text  class="sub-title">
-                rect特有属性4
-            </text>
-            <svg id="prop4" class="prop4" x="0" y="0" width="200" height="80" viewBox="0 100 60" fill="white">
-                <rect x="0" y="10" width="50" height="50" stroke="red" stroke-width="3"></rect>
-                <rect x="60" y="10" width="50" height="50" stroke="yellow" stroke-width="3" rx="10" ry="10"></rect>
-                <rect x="120" y="10" width="50" height="50" stroke="blue" stroke-width="3" rx="10" ry="10" ></rect>
-            </svg>
-        </div>
-        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
-        </divider>
-        <div class="ani-container">
-            <text class="title">
-                动画样式
-            </text>
-            <text class="sub-title">
-                rect动画样式1
-            </text>
-            <svg width="200" height="100">
-                <rect x="20" y="10" width="60" height="60" fill="red" rx="0" ry="20">
-                    <animate attributeName="rx" values="0;20" dur="1000" repeatCount="10" fill="freeze" calcMode="linear"></animate>
-                </rect>
-            </svg>
-            <text class="sub-title">
-                rect动画样式2
-            </text>
-            <svg width="200" height="100">
-                <rect x="20" y="10" width="50" height="50" fill="red" rx="0" ry="20">
-                    <animate attributeName="fill" from="red" to="blue" dur="1000" repeatCount="indefinite"></animate>
-                    <animate attributeName="height" from="50" to="100" begin="500" end="1000" repeatCount="indefinite">  </animate>
-                </rect>
-            </svg>
-        </div>
-    </div>
-
-    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
-    </divider>
-
-    <div class="sub-container">
-        <div class="gradient-container">
-            <text class="title">
-                渐变样式
-            </text>
-            <text class="sub-title">
-                rect渐变样式1
-            </text>
-            <svg class="gradient1" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
-                <rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="block" stroke-width="4" rx="10" ry="10" stroke-dasharray="5 3" stroke-dashoffset="3"></rect>
-            </svg>
-            <text  class="sub-title">
-                rect渐变样式2
-            </text>
-            <svg class="gradient2"  x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
-                <rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="blue" stroke-width="4" rx="10" ry="10" ></rect>
-            </svg>
-            <text  class="sub-title">
-                rect渐变样式3
-            </text>
-            <svg class="gradient3"  x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
-                <rect x="10" y="5" width="50" height="50" fill="pink" fill-opacity="0" stroke="yellow" stroke-width="4" rx="10" ry="10" ></rect>
-            </svg>
-            <text  class="sub-title">
-                rect渐变样式4
-            </text>
-            <svg class="gradient4" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
-                <rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="red" stroke-width="4"></rect>
-            </svg>
-        </div>
-        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
-        </divider>
-        <div class="access-container">
-            <text class="title">
-                无障碍
-            </text>
-            <text class="sub-title">
-                rect无障碍1
-            </text>
-            <svg class="access1" accessibilitygroup ="true"
-                 accessibilitytext="这是circle"
-                 accessibilitydescription="rect"
-                 accessibilityimportance="no-hide-descendants"
-                 width="200" height="50" >
-                <rect x="10" y="5" width="200" height="50" fill="#00FF00"></rect>
-            </svg>
-        </div>
-        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
-        </divider>
-
-        <div class="multimode-container">
-            <text class="title">
-                多模输入
-            </text>
-            <text class="sub-title">
-                rect多模输入1
-            </text>
-            <svg class="multimode1" width="200" height="50"  voicelabel = "voice"
-                 subscriptflag="on" subscriptlabel="divider" scenelabel="common">
-                <rect x="10" y="5" width="200" height="50" fill="#978666"></rect>
-            </svg>
-        </div>
-    </div>
-</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/prop/index.css b/ace/ace_standard/src/main/js/default/pages/rect/prop/index.css
new file mode 100644
index 000000000..945452572
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/rect/prop/index.css
@@ -0,0 +1,29 @@
+.container {
+    flex-direction:row;
+    width:100%;
+    height:100%;
+    padding: 1px;
+}
+
+.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;
+    height: 100%;
+    flex-weight: 1;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/rect/prop/index.hml
new file mode 100644
index 000000000..26af5e3aa
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/rect/prop/index.hml
@@ -0,0 +1,245 @@
+<div class="container">
+    <div class="prop-container">
+        <text class="title">
+            rect通用属性
+        </text>
+
+        <text class="sub-title">
+            通用属性 -- fill
+        </text>
+        <svg width="100" height="20" >
+            <rect id ="fillProp" width="80" height="15" fill="red"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- fill-opacity
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg width="50px" height="20px">
+                <rect id ="fillOpacityPropOne"  width="90%" height="20px" fill-opacity="0.5" fill="red"></rect>
+            </svg>
+            <svg width="50px" height="20px">
+                <rect id ="fillOpacityPropTwo" width="90%" height="20px" fill-opacity="1" fill="red"></rect>
+            </svg>
+            <svg width="50px" height="20px">
+                <rect id ="fillOpacityPropThree" width="90%" height="20px" fill-opacity="1.5" fill="red"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- fill-rule
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg width="50px" height="20px">
+                <rect id ="fillRulePropOne" width="90%" height="20px" fill-rule="evenodd" fill="red"></rect>
+            </svg>
+            <svg  width="50px" height="20px">
+                <rect id ="fillRulePropTwo" width="90%" height="20px" fill-rule="nonzero" fill="red"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- opacity
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg width="50px" height="20px">
+                <rect id ="opacityPropOne"width="90%" height="20px" fill="red" opacity="0.5"></rect>
+            </svg>
+            <svg width="50px" height="20px">
+                <rect id ="opacityPropTwo"width="90%" height="20px" fill="red" opacity="1"></rect>
+            </svg>
+            <svg width="50px" height="20px">
+                <rect id ="opacityPropThree"width="90%" height="20px" fill="red" opacity="1.5"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke
+        </text>
+        <svg width="100px" height="20px" fill="white">
+            <rect id ="strokeProp" width="90%" height="20px" stroke = "red"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-dasharray
+        </text>
+        <svg width="100px" height="20px" fill="white">
+            <rect id ="strokeDashArrayProp" width="90%" height="20px" stroke = "red" stroke-dasharray="2 3"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-dashoffset
+        </text>
+        <svg width="100px" height="20px" fill="white">
+            <rect id ="strokeDashOffsetProp" width="90%" height="20px" stroke = "red" stroke-dashoffset="23"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-linejoin
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg  width="50px" height="20px" fill="white">
+                <rect id ="strokeLineJoinPropOne" width="90%" height="20px"
+                      stroke = "red" stroke-linejoin="bevel"></rect>
+            </svg>
+            <svg  width="50px" height="20px" fill="white">
+                <rect id ="strokeLineJoinPropTwo" width="90%" height="20px"
+                      stroke = "red" stroke-linejoin="miter"></rect>
+            </svg>
+            <svg  width="50px" height="20px" fill="white">
+                <rect id ="strokeLineJoinPropThree" width="90%" height="20px"
+                      stroke = "red" stroke-linejoin="round"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke-linecap
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg width="50px" height="20px" fill="white">
+                <rect id ="strokeLineCapPropOne" width="90%" height="20px"
+                      stroke = "red" stroke-linecap="butt"></rect>
+            </svg>
+            <svg width="50px" height="20px" fill="white">
+                <rect id ="strokeLineCapPropTwo" width="90%" height="20px"
+                      stroke = "red" stroke-linecap="round"></rect>
+            </svg>
+            <svg width="50px" height="20px" fill="white">
+                <rect id ="strokeLineCapPropThree" width="90%" height="20px"
+                      stroke = "red" stroke-linecap="square"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke-miterlimit
+        </text>
+        <svg width="100px" height="20px" fill="white">
+            <rect id ="strokeMiterLimitProp" width="90%" height="20px"
+                  stroke = "red" stroke-miterlimit="10"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-opacity
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg width="50px" height="20px" fill="white">
+                <rect id ="strokeOpacityPropOne"width="90%" height="20px"
+                      stroke = "red" stroke-opacity="0.5"></rect>
+            </svg>
+            <svg width="50px" height="20px" fill="white">
+                <rect id ="strokeOpacityPropTwo"width="90%" height="20px"
+                      stroke = "red" stroke-opacity="1"></rect>
+            </svg>
+            <svg width="50px" height="20px" fill="white">
+                <rect id ="strokeOpacityPropThree"width="90%" height="20px"
+                      stroke = "red" stroke-opacity="1.5"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke-width
+        </text>
+        <svg width="100px" height="20px" fill="white">
+            <rect id ="strokeWidthProp" width="90%" height="20px"
+                  stroke = "red" stroke-width="6"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- transform
+        </text>
+        <svg width="100px" height="100px" fill="red">
+            <rect id ="transformProp" width="90%" height="100px"
+                  transform="translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)"></rect>
+        </svg>
+    </div>
+
+    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
+    </divider>
+
+    <div class="prop-container">
+        <text class="title">
+            rect特有属性
+        </text>
+
+        <text class="sub-title">
+            特有属性-id
+        </text>
+        <svg width="100px" height="40px">
+            <rect id ="idProp" width="90px" height="20px" fill="red"></rect>
+        </svg>
+
+        <text class="sub-title">
+            特有属性- width
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg width="50px" height="20px" fill="red">
+                <rect id ="widthPropOne" width="90px" height="20px"></rect>
+            </svg>
+            <svg width="50px" height="20px" fill="pink">
+                <rect id ="widthPropTwo" width="90%" height="20px"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            特有属性- height
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg width="50px" height="20px" fill="red">
+                <rect id ="heightPropOne" width="90%" height="20px"></rect>
+            </svg>
+            <svg width="50px" height="20px" fill="pink">
+                <rect id ="heightPropTwo" width="90%" height="80%"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            特有属性-x
+        </text>
+        <svg  width="100px" height="40px">
+            <svg width="100px" height="40px" fill="red" >
+                <rect id ="xProp" width="90%" height="20px" x="20"></rect>
+            </svg>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-y
+        </text>
+        <svg  width="100px" height="40px">
+            <svg width="100px" height="40px" fill="red" >
+                <rect id ="yProp" width="90%" height="20px"  y="20"></rect>
+            </svg>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-rx
+        </text>
+        <svg width="100px" height="40px" fill="red">
+            <rect id ="rxProp"width="90%" height="20px" rx="20"></rect>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-ry
+        </text>
+        <svg width="100px" height="40px" fill="red">
+            <rect id ="rxProp"width="90%" height="20px" ry="20"></rect>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-if
+        </text>
+        <svg width="100px" height="50px">
+            <rect id ="ifPropTrue" width="90px" height="20px" fill="red" if="true"></rect>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-show
+        </text>
+        <svg width="200px" height="50px">
+            <rect id ="showPropTrue" width="90px" height="20px" fill="red" x="" y="20" show="true"></rect>
+            <rect id ="showPropFalse" width="90px" height="20px" fill="red" x="10" y="50" show="false"></rect>
+            <rect id ="showPropNone" width="90px" height="20px" fill="red" x="20" y="80" show=""></rect>
+        </svg>
+    </div>
+
+
+</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/prop/index.js b/ace/ace_standard/src/main/js/default/pages/rect/prop/index.js
new file mode 100644
index 000000000..31fc69baa
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/rect/prop/index.js
@@ -0,0 +1,138 @@
+/**
+ * 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.
+ */
+export default {
+    data: {
+        fillProp : null,
+        fillOpacityPropTwo : null,
+        fillOpacityPropOne : null,
+        fillOpacityPropThree : null,
+        fillRulePropTwo : null,
+        fillRulePropOne : null,
+        opacityPropOne : null,
+        opacityPropTwo : null,
+        opacityPropThree : null,
+        strokeProp : null,
+        strokeDashArrayProp : null,
+        strokeDashOffsetProp : null,
+        strokeLineJoinPropTwo : null,
+        strokeLineJoinPropOne : null,
+        strokeLineJoinPropThree : null,
+        strokeLineCapPropOne : null,
+        strokeLineCapPropTwo : null,
+        strokeLineCapPropThree : null,
+        strokeMiterLimitProp : null,
+        strokeOpacityPropOne : null,
+        strokeOpacityPropTwo : null,
+        strokeOpacityPropThree : null,
+        strokeWidthProp : null,
+        transformProp : null,
+        idProp : null,
+        widthPropOne : null,
+        heightPropOne : null,
+        heightPropTwo : null,
+        widthPropTwo : null,
+        xProp : null,
+        yProp : null,
+        rxProp : null,
+        ryProp : null,
+        ifPropTrue : null,
+        showPropTrue : null,
+        showPropFalse : null,
+        showPropNone : null
+    },
+
+    onShow(){
+        this.getCommonPropValues();
+        globalThis.value = {
+            fillProp : this.fillProp,
+            fillOpacityPropTwo : this.fillOpacityPropTwo,
+            fillOpacityPropOne : this.fillOpacityPropOne,
+            fillOpacityPropThree : this.fillOpacityPropThree,
+            fillRulePropTwo : this.fillRulePropTwo,
+            fillRulePropOne : this.fillRulePropOne,
+            opacityPropOne : this.opacityPropOne,
+            opacityPropTwo : this.opacityPropTwo,
+            opacityPropThree : this.opacityPropThree,
+            strokeProp : this.strokeProp,
+            strokeDashArrayProp : this.strokeDashArrayProp,
+            strokeDashOffsetProp : this.strokeDashOffsetProp,
+            strokeLineJoinPropTwo : this.strokeLineJoinPropTwo,
+            strokeLineJoinPropOne : this.strokeLineJoinPropOne,
+            strokeLineJoinPropThree : this.strokeLineJoinPropThree,
+            strokeLineCapPropOne : this.strokeLineCapPropOne,
+            strokeLineCapPropTwo : this.strokeLineCapPropTwo,
+            strokeLineCapPropThree : this.strokeLineCapPropThree,
+            strokeMiterLimitProp : this.strokeMiterLimitProp,
+            strokeOpacityPropOne : this.strokeOpacityPropOne,
+            strokeOpacityPropTwo : this.strokeOpacityPropTwo,
+            strokeOpacityPropThree : this.strokeOpacityPropThree,
+            strokeWidthProp : this.strokeWidthProp,
+            transformProp : this.transformProp,
+            idProp : this.idProp,
+            widthPropOne : this.widthPropOne,
+            heightPropOne : this.heightPropOne,
+            heightPropTwo : this.heightPropTwo,
+            widthPropTwo : this.widthPropTwo,
+            xProp : this.xProp,
+            yProp : this.yProp,
+            rxProp : this.rxProp,
+            ryProp : this.ryProp,
+            ifPropTrue: this.ifPropTrue,
+            showPropTrue: this.showPropTrue,
+            showPropFalse: this.showPropFalse,
+            showPropNone: this.showPropNone
+        }
+    },
+
+    getCommonPropValues(){
+        this.fillProp = this.$element("fillProp").getInspector()
+        this.fillOpacityPropTwo = this.$element("fillOpacityPropTwo").getInspector()
+        this.fillOpacityPropOne = this.$element("fillOpacityPropOne").getInspector()
+        this.fillOpacityPropThree = this.$element("fillOpacityPropThree").getInspector()
+        this.fillRulePropTwo = this.$element("fillRulePropTwo").getInspector()
+        this.fillRulePropOne = this.$element("fillRulePropOne").getInspector()
+        this.opacityPropOne = this.$element("opacityPropOne").getInspector()
+        this.opacityPropTwo = this.$element("opacityPropTwo").getInspector()
+        this.opacityPropThree = this.$element("opacityPropThree").getInspector()
+        this.strokeProp = this.$element("strokeProp").getInspector()
+        this.strokeDashArrayProp = this.$element("strokeDashArrayProp").getInspector()
+        this.strokeDashOffsetProp = this.$element("strokeDashOffsetProp").getInspector()
+        this.strokeLineJoinPropTwo = this.$element("strokeLineJoinPropTwo").getInspector()
+        this.strokeLineJoinPropOne = this.$element("strokeLineJoinPropOne").getInspector()
+        this.strokeLineJoinPropThree = this.$element("strokeLineJoinPropThree").getInspector()
+        this.strokeLineCapPropOne = this.$element("strokeLineCapPropOne").getInspector()
+        this.strokeLineCapPropTwo = this.$element("strokeLineCapPropTwo").getInspector()
+        this.strokeLineCapPropThree = this.$element("strokeLineCapPropThree").getInspector()
+        this.strokeMiterLimitProp = this.$element("strokeMiterLimitProp").getInspector()
+        this.strokeOpacityPropOne = this.$element("strokeOpacityPropOne").getInspector()
+        this.strokeOpacityPropTwo = this.$element("strokeOpacityPropTwo").getInspector()
+        this.strokeOpacityPropThree = this.$element("strokeOpacityPropThree").getInspector()
+        this.strokeWidthProp = this.$element("strokeWidthProp").getInspector()
+        this.transformProp = this.$element("transformProp").getInspector()
+        this.idProp = this.$element("idProp").getInspector()
+        this.widthPropOne = this.$element("widthPropOne").getInspector()
+        this.heightPropOne = this.$element("heightPropOne").getInspector()
+        this.heightPropTwo = this.$element("heightPropTwo").getInspector()
+        this.widthPropTwo = this.$element("widthPropTwo").getInspector()
+        this.xProp = this.$element("xProp").getInspector()
+        this.yProp = this.$element("yProp").getInspector()
+        this.rxProp = this.$element("rxProp").getInspector()
+        this.ryProp = this.$element("ryProp").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()
+    },
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/router/index.css b/ace/ace_standard/src/main/js/default/pages/rect/router/index.css
new file mode 100644
index 000000000..dd575e6c8
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/rect/router/index.css
@@ -0,0 +1,127 @@
+.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: 1;
+}
+
+.title{
+    width: 100%;
+    font-size: 18px;
+    margin: 2px;
+    padding: 2px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.sub-title{
+    width: 100%;
+    font-size: 14px;
+    text-align: left;
+    margin: 2px;
+    padding: 2px;
+    text-align: center;
+}
+
+
+.prop-container{
+    flex-direction: column;
+    height: 100%;
+    flex-weight: 2;
+    align-items: center;
+}
+
+
+
+.ani-container{
+    flex-direction: column;
+    height: 100%;
+    flex-weight: 1;
+    align-items: center;
+}
+
+@keyframes ani1Go
+{
+    from {
+        background-color: #f76160;
+        opacity:0.3;
+        width:50px;
+        height: 50px;
+        transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+        background-position:10% 10%
+    }
+    30% {
+        background-color: #60f761;
+        opacity:0.5;
+        width:70px;
+        height: 70px;
+        background-position:12% 12%;
+        transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+    }
+    to {
+        background-color: #6160f7;
+        opacity:1;
+        width:90px;
+        height: 90px;
+        background-position:22% 22%;
+        transform:rotate(180deg) scale(2)
+    }
+}
+
+
+.ani2{
+    color: #ad4e2a;
+    stroke-width: 55px;
+    margin: 5px;
+    transform-origin: 2% 3%;
+    animation-name:ani2Go;
+    animation-delay:5s;
+    animation-duration:10s;
+    animation-iteration-count:4;
+    animation-timing-function:ease-out;
+    animation-direction:reverse;
+    animation-fill-mode:forwards;
+    animation-play-state:running;
+    transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+    from {
+        background-color: #f76160;
+        opacity:0.3;
+        width:50px;
+        height: 50px;
+        background-position:10% 10%
+    }
+    30% {
+        background-color: #60f761;
+        opacity:0.5;
+        width:70px;
+        height: 70px;
+        background-position:12% 12%;
+        transform:translateX(10px) translateY(5px)  translateZ(15px)
+        rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+    }
+    to {
+        background-color: #6160f7;
+        opacity:1;
+        width:90px;
+        height: 90px;
+        background-position:22% 22%;
+        transform:translateX(30px) translateY(45px)  translateZ(55px)
+        rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+    }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/router/index.hml b/ace/ace_standard/src/main/js/default/pages/rect/router/index.hml
new file mode 100644
index 000000000..239d72dbd
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/rect/router/index.hml
@@ -0,0 +1,70 @@
+<div class="container">
+    <div class="sub-container">
+        <div class="prop-container">
+            <text class="title">
+                通用属性
+            </text>
+            <text class="sub-title">
+                rect通用属性1
+            </text>
+            <svg  width="400" height="80" viewBox="0 0 230 60" >
+                <rect x="10" y="10" width="50" height="50" fill-opacity="0.5"></rect>
+                <rect x="70" y="10" width="50" height="50" opacity="0.8"></rect>
+                <rect x="130" y="10" width="50" height="50" fill="red" fill-rule="evenodd"></rect>
+                <rect x="200" y="10" width="50" height="50" fill="red" stroke-linejoin="bevel"></rect>
+            </svg>
+
+            <text  class="sub-title">
+                rect通用属性2
+            </text>
+            <svg width="400" height="80" viewBox="0 0 230 60" >
+                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white" stroke-miterlimit="10"></rect>
+                <rect x="70" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"></rect>
+                <rect x="130" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
+                <rect x="200" y="10" width="50" height="50" stroke="blue"  stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
+            </svg>
+            <text  class="sub-title">
+                rect通用属性3
+            </text>
+            <svg  width="200" height="200" viewBox="0 0 180 140" >
+                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="rotate(-10)"></rect>
+                <rect x="60" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="translate(40)"></rect>
+                <rect x="10" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="skewX(10)"></rect>
+                <rect x="120" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="skewY(5)"></rect>
+            </svg>
+            <text  class="sub-title">
+                rect特有属性4
+            </text>
+            <svg fill="white" width="400" height="80" >
+                <rect width="50" height="50" x="50" y="10" stroke-width="4" stroke="blue" id="rectId"></rect>
+                <rect width="50" height="50" x="120" y="10" stroke-width="4" stroke="blue" rx="10" ry="10"></rect>
+                <rect width="50" height="50" x="190" y="10" stroke-width="10" fill="red" stroke="blue" rx="10" ry="10"></rect>
+                <rect width="50" height="50" x="260" y="10" stroke-width="10" stroke="red" rx="10" ry="10" stroke-dasharray="5 3" stroke-dashoffset="3"></rect>
+            </svg>
+        </div>
+        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
+        </divider>
+        <div class="ani-container">
+            <text class="title">
+                动画样式
+            </text>
+            <text class="sub-title">
+                rect动画样式1
+            </text>
+            <svg width="200" height="100">
+                <rect x="80" y="10" width="60" height="60" fill="red" rx="0" ry="20">
+                    <animate attributeName="rx" values="0;20" dur="1000" repeatCount="10" fill="freeze" calcMode="linear"></animate>
+                </rect>
+            </svg>
+            <text class="sub-title">
+                rect动画样式2
+            </text>
+            <svg width="200" height="100">
+                <rect x="80" y="10" width="50" height="50" fill="red" rx="0" ry="20">
+                    <animate attributeName="fill" from="red" to="blue" dur="1000" repeatCount="indefinite"></animate>
+                    <animate attributeName="height" from="50" to="100" begin="500" end="1000" repeatCount="indefinite">  </animate>
+                </rect>
+            </svg>
+        </div>
+    </div>
+</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.js b/ace/ace_standard/src/main/js/default/pages/rect/router/index.js
similarity index 77%
rename from ace/ace_standard/src/main/js/default/pages/svg/index.js
rename to ace/ace_standard/src/main/js/default/pages/rect/router/index.js
index 260427920..b7d4981b3 100644
--- a/ace/ace_standard/src/main/js/default/pages/svg/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/rect/router/index.js
@@ -12,15 +12,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import prompt from '@system.prompt';
+
 export default {
     data: {
         title: ""
     },
-    onShow(){
-        // 通用属性
-        var prop1 =  this.$element("prop1");
-        var name1 = prop1.dataSet.a
-        var prop2 =  this.$refs.prop2;
-        var name2 = prop2.dataSet.a
-    }
+
 }
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.css b/ace/ace_standard/src/main/js/default/pages/svg/index.css
deleted file mode 100644
index 458448360..000000000
--- a/ace/ace_standard/src/main/js/default/pages/svg/index.css
+++ /dev/null
@@ -1,288 +0,0 @@
-.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: 1;
-}
-
-.title{
-    width: 100%;
-    font-size: 18px;
-    margin: 2px;
-    padding: 2px;
-    font-weight: bold;
-    text-align: center;
-}
-
-.sub-title{
-    width: 100%;
-    font-size: 14px;
-    text-align: left;
-    margin: 2px;
-    padding: 2px;
-}
-
-.style1{
-/*    width: 100%;*/
-/*    height: 100%;*/
-    min-width: 25px;
-    min-height: 10px;
-    max-width: 300px;
-    max-height: 50px;
-    padding-left: 10px;
-    padding-top: 20px;
-    padding-right: 15px;
-    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: 50px;
-    height: 20px;
-    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:150px;
-    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-basis: 10px;
-    flex-shrink: 1;
-}
-
-.style4{
-/*    width: 60%;*/
-/*    height: 5%;*/
-    padding: 10px;
-    margin: 5px;
-    border: 2px solid #000000;
-}
-
-.contain1{
-    width: 100%;
-    height: 70px;
-    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;
-}
-
-
-
-.prop-container{
-    flex-direction: column;
-    height: 100%;
-    flex-weight: 1.5;
-}
-
-/*#prop1 {*/
-/*    margin: 5px;*/
-/*}*/
-
-/*.prop2 {*/
-/*    color: #343524;*/
-/*    stroke-width: 15px;*/
-/*    margin: 5px;*/
-/*}*/
-/*.prop3{*/
-/*    color: #679855;*/
-/*    stroke-width: 15px;*/
-/*    margin: 5px;*/
-/*}*/
-
-/*.prop4 {*/
-/*    color: #456345;*/
-/*    stroke-width: 25px;*/
-/*    margin: 5px;*/
-/*}*/
-
-/*.prop5 {*/
-/*    color: #831834;*/
-/*    stroke-width: 40px;*/
-/*    margin: 5px;*/
-/*    height: 70px;*/
-/*}*/
-
-.ani-container{
-    flex-direction: column;
-    height: 100%;
-    flex-weight: 1;
-}
-
-.ani1{
-    background-color: #72ac33;
-    width: 55px;
-    height: 55px;
-    margin: 5px;
-    transform-origin: 0% 0%;
-    animation: ani1Go 3s infinite;
-}
-
-@keyframes ani1Go
-{
-    from {
-        background-color: #f76160;
-        opacity:0.3;
-        width:50px;
-        height: 50px;
-        transform:translate(20px) rotate(10deg) scale(0.2);
-        background-position:10% 10%
-    }
-    30% {
-        background-color: #60f761;
-        opacity:0.5;
-        width:70px;
-        height: 70px;
-        background-position:12% 12%;
-        transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
-    }
-    to {
-        background-color: #6160f7;
-        opacity:1;
-        width:90px;
-        height: 90px;
-        background-position:22% 22%;
-        transform:rotate(180deg) scale(2)
-    }
-}
-
-.ani2{
-    background-color: #ad4e2a;
-    width: 55px;
-    height: 55px;
-    margin: 5px;
-}
-
-.gradient-container{
-    flex-direction: column;
-}
-
-.gradient1{
-    stroke-width: 30px;
-    margin: 5px;
-    background: linear-gradient(red, #00ff00);
-}
-
-.gradient2{
-    stroke-width: 30px;
-    margin: 5px;
-    background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
-}
-
-.gradient3{
-    stroke-width: 30px;
-    margin: 5px;
-    background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
-}
-
-.gradient4{
-    stroke-width: 30px;
-    margin: 5px;
-    background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
-}
-
-.access-container{
-    flex-direction: column;
-}
-
-.access1{
-    color: #321124;
-    stroke-width: 30px;
-    margin: 5px;
-}
-
-.atom-container{
-    flex-direction: column;
-}
-
-.multimode-container{
-    flex-direction: column;
-}
-
-.multimode1{
-/*    color: #978666;*/
-/*    stroke-width: 30px;*/
-    margin: 5px;
-}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.hml b/ace/ace_standard/src/main/js/default/pages/svg/index.hml
deleted file mode 100644
index e6409e5b3..000000000
--- a/ace/ace_standard/src/main/js/default/pages/svg/index.hml
+++ /dev/null
@@ -1,228 +0,0 @@
-<div class="container">
-    <div class="style-container">
-        <text class="title">
-            通用样式
-        </text>
-        <text class="sub-title">
-            svg通用样式1
-        </text>
-        <svg class="style1" id="style1" x="0" y="0" width="100" height="100" viewBox="0 0 100 60"  >
-            <rect x="10" y="0" width="70" height="70" ></rect>
-        </svg>
-
-        <text  class="sub-title">
-            svg通用样式2
-        </text>
-        <svg class="style2" id="style2" x="0" y="0" width="100" height="100" viewBox="0 0 100 60"  >
-            <rect x="10" y="0" width="70" height="70" fill="blue"></rect>
-        </svg>
-
-        <text  class="sub-title">
-            svg通用样式3
-        </text>
-        <svg class="style3" id="style3" x="0" y="0" width="100" height="100" viewBox="0 0 100 60"  >
-            <rect x="10" y="0" width="70" height="70" fill="blue" fill-opacity="0.5"></rect>
-        </svg>
-        <text  class="sub-title">
-            svg通用样式4
-        </text>
-        <svg class="style4" id="style4" x="0" y="0" width="100" height="80" viewBox="0 0 100 60"  >
-            <rect x="10" y="0" width="70" height="70" fill="blue" fill-opacity="0.5"></rect>
-        </svg>
-        <text  class="sub-title">
-            svg通用样式5
-        </text>
-        <div class="contain1">
-            <svg class="style5" id="style5" width="100" height="30">
-                <rect x="10" y="0" width="70" height="30" fill="blue" ></rect>
-            </svg>
-            <svg class="style6" id="style6" width="100" height="30">
-                <rect x="10" y="0" width="70" height="30" fill="blue" ></rect>
-            </svg>
-        </div>
-    </div>
-    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
-    </divider>
-
-    <div class="sub-container">
-        <div class="prop-container">
-            <text class="title">
-                通用属性
-            </text>
-            <text class="sub-title">
-                svg通用属性1
-            </text>
-            <svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60"  id="prop1" class="prop1" data-name ="prop1">
-                <rect x="10" y="10" width="50" height="50" fill-opacity="0.5"></rect>
-                <rect x="80" y="10" width="50" height="50" opacity="0.8"></rect>
-            </svg>
-
-            <text  class="sub-title">
-                svg通用属性2
-            </text>
-            <svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" ref ="prop2" class="prop2" data-name ="prop2" >
-                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"></rect>
-                <rect x="70" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
-                <rect x="130" y="10" width="50" height="50" stroke="blue"  stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
-            </svg>
-            <text  class="sub-title">
-                svg通用属性3
-            </text>
-            <svg x="0" y="0" width="180" height="140" viewBox="0 0 180 140" class="prop3" id="prop3">
-                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="rotate(-10)"></rect>
-                <rect x="60" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="translate(40)"></rect>
-                <rect x="10" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="skewX(10)"></rect>
-                <rect x="120" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="skewY(5)"></rect>
-            </svg>
-            <text  class="sub-title">
-                svg特有属性4
-            </text>
-            <svg x="0" y="0" width="50" height="80" viewBox="0 100 60" class="prop4" id="prop4">
-                <rect x="10" y="10" width="50" height="50" fill="red"></rect>
-            </svg>
-        </div>
-        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
-        </divider>
-        <div class="ani-container">
-            <text class="title">
-                动画样式
-            </text>
-            <text class="sub-title">
-                svg动画样式1
-            </text>
-            <svg class="ani1" width="50" height="50" viewBox="0 0 60 60">
-                <rect x="10" y="10" width="50" height="50" fill="#00FF00"></rect>
-            </svg>
-            <text class="sub-title">
-                svg动画样式2
-            </text>
-            <svg class="ani2" width="50" height="50" viewBox="0 0 60 60">
-                <rect x="10" y="10" width="50" height="50" fill="#00FF00"></rect>
-            </svg>
-        </div>
-    </div>
-
-    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
-    </divider>
-
-    <div class="sub-container">
-        <div class="gradient-container">
-            <text class="title">
-                渐变样式
-            </text>
-            <text class="sub-title">
-                svg渐变样式1
-            </text>
-            <svg class="gradient1" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
-                <rect x="10" y="5" width="50" height="50" fill="white" stroke="red" stroke-width="4" fill-opacity="0"></rect>
-            </svg>
-            <text  class="sub-title">
-                svg渐变样式2
-            </text>
-            <svg class="gradient2"  x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
-                <rect x="10" y="5" width="50" height="50" fill="white" stroke="blue" stroke-width="4" fill-opacity="0"></rect>
-            </svg>
-            <text  class="sub-title">
-                svg渐变样式3
-            </text>
-            <svg class="gradient3"  x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
-                <rect x="10" y="5" width="50" height="50" fill="white" stroke="yellow" stroke-width="4" fill-opacity="0"></rect>
-            </svg>
-            <text  class="sub-title">
-                svg渐变样式4
-            </text>
-            <svg class="gradient4" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
-                <rect x="10" y="5" width="50" height="50" fill="white" stroke="red" stroke-width="4" fill-opacity="0"></rect>
-            </svg>
-        </div>
-        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
-        </divider>
-        <div class="access-container">
-            <text class="title">
-                无障碍
-            </text>
-            <text class="sub-title">
-                svg无障碍1
-            </text>
-            <svg class="access1" accessibilitygroup ="true"
-                 accessibilitytext="这是svg"
-                 accessibilitydescription="rect"
-                 accessibilityimportance="no-hide-descendants"
-                 width="200" height="50" >
-                <rect x="10" y="5" width="200" height="50" fill="#00FF00"></rect>
-            </svg>
-        </div>
-        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
-        </divider>
-<!--        <div class="atom-container">-->
-<!--            <text class="title">-->
-<!--                原子布局-->
-<!--            </text>-->
-<!--            <text class="sub-title">-->
-<!--                svg原子布局1-->
-<!--            </text>-->
-<!--            <div style="flex-direction: row;height: 30px;width: 100%;">-->
-<!--                <divider vertical="true" style="width:20px;background-color: blue;display-index: 1;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:30px;background-color: black;display-index: 5;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:40px;background-color: yellow;display-index: 4;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:10px;background-color: red;display-index: 3;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:25px;background-color:pink;display-index: 7;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:15px;background-color: palegoldenrod;display-index: 2;">-->
-<!--                </divider>-->
-<!--            </div>-->
-<!--            <text class="sub-title">-->
-<!--                svg原子布局2-->
-<!--            </text>-->
-<!--            <div style="flex-direction: row;height: 30px;width: 100%;">-->
-<!--                <divider vertical="true" style="background-color: blue;flex-weight: 1;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="background-color: black;flex-weight: 5;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="background-color: yellow;flex-weight: 4;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="background-color: red;flex-weight: 3;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="background-color:pink;flex-weight: 7;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="background-color: palegoldenrod;flex-weight: 2;">-->
-<!--                </divider>-->
-<!--            </div>-->
-<!--            <text class="sub-title">-->
-<!--                svg原子布局3-->
-<!--            </text>-->
-<!--            <div style="flex-direction: row;height:60px;width: 100%;">-->
-<!--                <divider vertical="true" style="width:30px;background-color: blue;aspect-ratio: 0.6;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:30px;background-color: black;aspect-ratio:0.5;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:30px;background-color: yellow;aspect-ratio: 1.5;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:30px;background-color: red;aspect-ratio: 1.3;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:30px;background-color:pink;aspect-ratio: 1;">-->
-<!--                </divider>-->
-<!--                <divider vertical="true" style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">-->
-<!--                </divider>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--        <divider style="color: #000000; stroke-width: 2px;" vertical="false">-->
-<!--        </divider>-->
-        <div class="multimode-container">
-            <text class="title">
-                多模输入
-            </text>
-            <text class="sub-title">
-                svg多模输入1
-            </text>
-            <svg class="multimode1" width="200" height="50"  voicelabel = "voice"
-                 subscriptflag="on" subscriptlabel="divider" scenelabel="common">
-                <rect x="10" y="5" width="200" height="50" fill="#978666"></rect>
-            </svg>
-        </div>
-    </div>
-</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/prop/index.css b/ace/ace_standard/src/main/js/default/pages/svg/prop/index.css
new file mode 100644
index 000000000..945452572
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg/prop/index.css
@@ -0,0 +1,29 @@
+.container {
+    flex-direction:row;
+    width:100%;
+    height:100%;
+    padding: 1px;
+}
+
+.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;
+    height: 100%;
+    flex-weight: 1;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/svg/prop/index.hml
new file mode 100644
index 000000000..665462854
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg/prop/index.hml
@@ -0,0 +1,231 @@
+<div class="container">
+    <div class="prop-container">
+        <text class="title">
+            svg通用属性
+        </text>
+
+        <text class="sub-title">
+            通用属性 -- fill
+        </text>
+        <svg id ="fillProp" width="100" height="20" fill="red">
+            <rect width="80" height="15"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- fill-opacity
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg id ="fillOpacityPropOne" width="50px" height="20px" fill-opacity="0.5" fill="red">
+                <rect width="90%" height="20px" ></rect>
+            </svg>
+            <svg id ="fillOpacityPropTwo" width="50px" height="20px" fill-opacity="1" fill="red">
+                <rect width="90%" height="20px" ></rect>
+            </svg>
+            <svg id ="fillOpacityPropThree" width="50px" height="20px" fill-opacity="1.5" fill="red">
+                <rect width="90%" height="20px" ></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- fill-rule
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg id ="fillRulePropOne" width="50px" height="20px" fill-rule="evenodd" fill="red">
+                <rect width="90%" height="20px" ></rect>
+            </svg>
+            <svg id ="fillRulePropTwo" width="50px" height="20px" fill-rule="nonzero" fill="red">
+                <rect width="90%" height="20px" ></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- opacity
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg id ="opacityPropOne" width="50px" height="20px" opacity="0.5">
+                <rect width="90%" height="20px" fill="red"></rect>
+            </svg>
+            <svg id ="opacityPropTwo" width="50px" height="20px" opacity="1">
+                <rect width="90%" height="20px" fill="red"></rect>
+            </svg>
+            <svg id ="opacityPropThree" width="50px" height="20px" opacity="1.5">
+                <rect width="90%" height="20px" fill="red"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke
+        </text>
+        <svg id ="strokeProp" width="100px" height="20px" stroke = "red">
+            <rect width="90%" height="20px" fill="white"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-dasharray
+        </text>
+        <svg id ="strokeDashArrayProp" width="100px" height="20px" stroke = "red" stroke-dasharray="2 3">
+            <rect width="90%" height="20px" fill="white"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-dashoffset
+        </text>
+        <svg id ="strokeDashOffsetProp" width="100px" height="20px" stroke = "red" stroke-dashoffset="23">
+            <rect width="90%" height="20px" fill="white"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-linejoin
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg id ="strokeLineJoinPropOne" width="50px" height="20px" stroke = "red" stroke-linejoin="bevel">
+                <rect width="90%" height="20px" fill="white"></rect>
+            </svg>
+            <svg id ="strokeLineJoinPropTwo" width="50px" height="20px" stroke = "red" stroke-linejoin="miter">
+                <rect width="90%" height="20px" fill="white"></rect>
+            </svg>
+            <svg id ="strokeLineJoinPropThree" width="50px" height="20px" stroke = "red" stroke-linejoin="round">
+                <rect width="90%" height="20px" fill="white"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke-linecap
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg id ="strokeLineCapPropOne" width="50px" height="20px" stroke = "red" stroke-linecap="butt">
+                <rect width="90%" height="20px" fill="white"></rect>
+            </svg>
+            <svg id ="strokeLineCapPropTwo" width="50px" height="20px" stroke = "red" stroke-linecap="round">
+                <rect width="90%" height="20px" fill="white"></rect>
+            </svg>
+            <svg id ="strokeLineCapPropThree" width="50px" height="20px" stroke = "red" stroke-linecap="square">
+                <rect width="90%" height="20px" fill="white"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke-miterlimit
+        </text>
+        <svg id ="strokeMiterLimitProp" width="100px" height="20px" stroke = "red" stroke-miterlimit="10">
+            <rect width="90%" height="20px" fill="white"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- stroke-opacity
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg id ="strokeOpacityPropOne" width="50px" height="20px" stroke = "red" stroke-opacity="0.5">
+                <rect width="90%" height="20px" fill="white"></rect>
+            </svg>
+            <svg id ="strokeOpacityPropTwo" width="50px" height="20px" stroke = "red" stroke-opacity="1">
+                <rect width="90%" height="20px" fill="white"></rect>
+            </svg>
+            <svg id ="strokeOpacityPropThree" width="50px" height="20px" stroke = "red" stroke-opacity="1.5">
+                <rect width="90%" height="20px" fill="white"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            通用属性 -- stroke-width
+        </text>
+        <svg id ="strokeWidthProp" width="100px" height="20px" stroke = "red" stroke-width="6">
+            <rect width="90%" height="20px" fill="white"></rect>
+        </svg>
+
+        <text class="sub-title">
+            通用属性 -- transform
+        </text>
+        <svg id ="transformProp" width="100px" height="20px"
+             transform="translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)">
+            <rect width="90%" height="20px" fill="red"></rect>
+        </svg>
+    </div>
+
+    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
+    </divider>
+
+    <div class="prop-container">
+        <text class="title">
+            svg特有属性
+        </text>
+
+        <text class="sub-title">
+            特有属性-id
+        </text>
+        <svg id ="idProp" width="100px" height="40px">
+        </svg>
+
+        <text class="sub-title">
+            特有属性- width
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg id ="widthPropOne" width="50px" height="20px">
+                <rect width="90%" height="20px" fill="red"></rect>
+            </svg>
+            <svg id ="widthPropTwo" width="50%" height="20px">
+                <rect width="90%" height="20px" fill="red"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            特有属性- height
+        </text>
+        <div style="height: 20px;width: 150px;">
+            <svg id ="heightPropOne" width="50px" height="20px">
+                <rect width="90%" height="20px" fill="red"></rect>
+            </svg>
+            <svg id ="heightPropTwo" width="50px" height="20%">
+                <rect width="90%" height="20px" fill="red"></rect>
+            </svg>
+        </div>
+
+        <text class="sub-title">
+            特有属性-x
+        </text>
+        <svg  width="100px" height="40px">
+            <svg id ="xProp" width="100px" height="40px" fill="red" x="20">
+                <rect width="90%" height="20px" fill="red"></rect>
+            </svg>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-y
+        </text>
+        <svg  width="100px" height="40px">
+            <svg id ="yProp" width="100px" height="40px" fill="red" y="20">
+                <rect  width="90%" height="20px" fill="red"></rect>
+            </svg>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-viewBox
+        </text>
+        <svg  id ="viewBoxProp"  width="100px" height="40px" viewBox = "0 0 20 20">
+            <rect width="90%" height="20px" fill="red"></rect>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-if
+        </text>
+        <svg id ="ifPropTrue" width="100px" height="50px" if="true">
+            <rect width="90px" height="20px" fill="red" ></rect>
+        </svg>
+
+        <text class="sub-title">
+            特有属性-show
+        </text>
+        <svg width="200px" height="200px">
+            <svg id ="showPropTrue" width="100px" height="40px" x="" y="20" show="true">
+                <rect  width="90%" height="20px" fill="red"></rect>
+            </svg>
+            <svg id ="showPropFalse" width="100px" height="40px" x="10" y="50" show="false">
+                <rect  width="90%" height="20px" fill="red"></rect>
+            </svg>
+            <svg id ="showPropNone" width="100px" height="40px" x="20" y="80" show="">
+                <rect  width="90%" height="20px" fill="red"></rect>
+            </svg>
+        </svg>
+    </div>
+
+</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/prop/index.js b/ace/ace_standard/src/main/js/default/pages/svg/prop/index.js
new file mode 100644
index 000000000..32bfac69a
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg/prop/index.js
@@ -0,0 +1,135 @@
+/**
+ * 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.
+ */
+export default {
+    data: {
+        fillProp : null,
+        fillOpacityPropTwo : null,
+        fillOpacityPropOne : null,
+        fillOpacityPropThree : null,
+        fillRulePropTwo : null,
+        fillRulePropOne : null,
+        opacityPropOne : null,
+        opacityPropTwo : null,
+        opacityPropThree : null,
+        strokeProp : null,
+        strokeDashArrayProp : null,
+        strokeDashOffsetProp : null,
+        strokeLineJoinPropTwo : null,
+        strokeLineJoinPropOne : null,
+        strokeLineJoinPropThree : null,
+        strokeLineCapPropOne : null,
+        strokeLineCapPropTwo : null,
+        strokeLineCapPropThree : null,
+        strokeMiterLimitProp : null,
+        strokeOpacityPropOne : null,
+        strokeOpacityPropTwo : null,
+        strokeOpacityPropThree : null,
+        strokeWidthProp : null,
+        transformProp : null,
+        idProp : null,
+        widthPropOne : null,
+        heightPropOne : null,
+        heightPropTwo : null,
+        widthPropTwo : null,
+        xProp : null,
+        yProp : null,
+        viewBoxProp : null,
+        ifPropTrue : null,
+        showPropTrue : null,
+        showPropFalse : null,
+        showPropNone : null
+    },
+
+    onShow(){
+        this.getCommonPropValues();
+        globalThis.value = {
+            fillProp : this.fillProp,
+            fillOpacityPropTwo : this.fillOpacityPropTwo,
+            fillOpacityPropOne : this.fillOpacityPropOne,
+            fillOpacityPropThree : this.fillOpacityPropThree,
+            fillRulePropTwo : this.fillRulePropTwo,
+            fillRulePropOne : this.fillRulePropOne,
+            opacityPropOne : this.opacityPropOne,
+            opacityPropTwo : this.opacityPropTwo,
+            opacityPropThree : this.opacityPropThree,
+            strokeProp : this.strokeProp,
+            strokeDashArrayProp : this.strokeDashArrayProp,
+            strokeDashOffsetProp : this.strokeDashOffsetProp,
+            strokeLineJoinPropTwo : this.strokeLineJoinPropTwo,
+            strokeLineJoinPropOne : this.strokeLineJoinPropOne,
+            strokeLineJoinPropThree : this.strokeLineJoinPropThree,
+            strokeLineCapPropOne : this.strokeLineCapPropOne,
+            strokeLineCapPropTwo : this.strokeLineCapPropTwo,
+            strokeLineCapPropThree : this.strokeLineCapPropThree,
+            strokeMiterLimitProp : this.strokeMiterLimitProp,
+            strokeOpacityPropOne : this.strokeOpacityPropOne,
+            strokeOpacityPropTwo : this.strokeOpacityPropTwo,
+            strokeOpacityPropThree : this.strokeOpacityPropThree,
+            strokeWidthProp : this.strokeWidthProp,
+            transformProp : this.transformProp,
+            idProp : this.idProp,
+            widthPropOne : this.widthPropOne,
+            heightPropOne : this.heightPropOne,
+            heightPropTwo : this.heightPropTwo,
+            widthPropTwo : this.widthPropTwo,
+            xProp : this.xProp,
+            yProp : this.yProp,
+            viewBoxProp : this.viewBoxProp,
+            ifPropTrue: this.ifPropTrue,
+            showPropTrue: this.showPropTrue,
+            showPropFalse: this.showPropFalse,
+            showPropNone: this.showPropNone
+        }
+    },
+
+    getCommonPropValues(){
+        this.fillProp = this.$element("fillProp").getInspector()
+        this.fillOpacityPropTwo = this.$element("fillOpacityPropTwo").getInspector()
+        this.fillOpacityPropOne = this.$element("fillOpacityPropOne").getInspector()
+        this.fillOpacityPropThree = this.$element("fillOpacityPropThree").getInspector()
+        this.fillRulePropTwo = this.$element("fillRulePropTwo").getInspector()
+        this.fillRulePropOne = this.$element("fillRulePropOne").getInspector()
+        this.opacityPropOne = this.$element("opacityPropOne").getInspector()
+        this.opacityPropTwo = this.$element("opacityPropTwo").getInspector()
+        this.opacityPropThree = this.$element("opacityPropThree").getInspector()
+        this.strokeProp = this.$element("strokeProp").getInspector()
+        this.strokeDashArrayProp = this.$element("strokeDashArrayProp").getInspector()
+        this.strokeDashOffsetProp = this.$element("strokeDashOffsetProp").getInspector()
+        this.strokeLineJoinPropTwo = this.$element("strokeLineJoinPropTwo").getInspector()
+        this.strokeLineJoinPropOne = this.$element("strokeLineJoinPropOne").getInspector()
+        this.strokeLineJoinPropThree = this.$element("strokeLineJoinPropThree").getInspector()
+        this.strokeLineCapPropOne = this.$element("strokeLineCapPropOne").getInspector()
+        this.strokeLineCapPropTwo = this.$element("strokeLineCapPropTwo").getInspector()
+        this.strokeLineCapPropThree = this.$element("strokeLineCapPropThree").getInspector()
+        this.strokeMiterLimitProp = this.$element("strokeMiterLimitProp").getInspector()
+        this.strokeOpacityPropOne = this.$element("strokeOpacityPropOne").getInspector()
+        this.strokeOpacityPropTwo = this.$element("strokeOpacityPropTwo").getInspector()
+        this.strokeOpacityPropThree = this.$element("strokeOpacityPropThree").getInspector()
+        this.strokeWidthProp = this.$element("strokeWidthProp").getInspector()
+        this.transformProp = this.$element("transformProp").getInspector()
+        this.idProp = this.$element("idProp").getInspector()
+        this.widthPropOne = this.$element("widthPropOne").getInspector()
+        this.heightPropOne = this.$element("heightPropOne").getInspector()
+        this.heightPropTwo = this.$element("heightPropTwo").getInspector()
+        this.widthPropTwo = this.$element("widthPropTwo").getInspector()
+        this.xProp = this.$element("xProp").getInspector()
+        this.yProp = this.$element("yProp").getInspector()
+        this.viewBoxProp = this.$element("viewBoxProp").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()
+    },
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/router/index.css b/ace/ace_standard/src/main/js/default/pages/svg/router/index.css
new file mode 100644
index 000000000..d62f5d1ed
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg/router/index.css
@@ -0,0 +1,109 @@
+.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: 1;
+}
+
+.title{
+    width: 100%;
+    font-size: 18px;
+    margin: 2px;
+    padding: 2px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.sub-title{
+    width: 100%;
+    font-size: 14px;
+    text-align: left;
+    margin: 2px;
+    padding: 2px;
+    text-align: center;
+}
+
+.prop-container{
+    flex-direction: column;
+    height: 100%;
+    flex-weight: 1;
+    align-items: center;
+}
+
+
+
+
+@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)
+    }
+}
+
+
+
+
+@keyframes ani2Go
+{
+    from {
+        background-color: #f76160;
+        opacity:0.3;
+        width:50px;
+        height: 50px;
+        background-position:10% 10%
+    }
+    30% {
+        background-color: #60f761;
+        opacity:0.5;
+        width:70px;
+        height: 70px;
+        background-position:12% 12%;
+        transform:translateX(10px) translateY(5px)  translateZ(15px)
+        rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+    }
+    to {
+        background-color: #6160f7;
+        opacity:1;
+        width:90px;
+        height: 90px;
+        background-position:22% 22%;
+        transform:translateX(30px) translateY(45px)  translateZ(55px)
+        rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+    }
+}
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/router/index.hml b/ace/ace_standard/src/main/js/default/pages/svg/router/index.hml
new file mode 100644
index 000000000..df2e05a80
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg/router/index.hml
@@ -0,0 +1,54 @@
+<div class="container">
+    <div class="sub-container">
+        <div class="prop-container">
+            <text class="title">
+                通用属性
+            </text>
+            <text class="sub-title">
+                svg通用属性1
+            </text>
+            <svg x="0" y="0" width="400" height="80" viewBox="0 0 230 60" >
+                <rect x="10" y="10" width="50" height="50" fill-opacity="0.5"></rect>
+                <rect x="70" y="10" width="50" height="50" opacity="0.8"></rect>
+                <rect x="130" y="10" width="50" height="50" fill="red" fill-rule="evenodd"></rect>
+                <rect x="190" y="10" width="50" height="50" fill="red" stroke-linejoin="bevel"></rect>
+            </svg>
+
+            <text  class="sub-title">
+                svg通用属性2
+            </text>
+            <svg x="0" y="0" width="400" height="80" viewBox="0 0 230 60" >
+                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white" stroke-miterlimit="10"></rect>
+                <rect x="70" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"></rect>
+                <rect x="130" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
+                <rect x="190" y="10" width="50" height="50" stroke="blue"  stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
+            </svg>
+            <text  class="sub-title">
+                svg通用属性3
+            </text>
+            <svg x="0" y="0" width="180" height="200" viewBox="0 0 180 140">
+                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="rotate(-10)"></rect>
+                <rect x="60" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="translate(40)"></rect>
+                <rect x="10" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="skewX(10)"></rect>
+                <rect x="120" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="skewY(5)"></rect>
+            </svg>
+            <text  class="sub-title">
+                svg特有属性4
+            </text>
+            <svg  width="400" height="300">
+                <svg width="400" height="200" viewBox="0 0 100 100">
+                    <rect x="10" y="10" width="80" height="80" fill="#00FF00"></rect>
+                </svg>
+                <svg x="0" y="0" width="400" height="200" viewBox="0 0 200 200">
+                    <rect x="10" y="10" width="80" height="80" fill="red"></rect>
+                </svg>
+                <svg x="0" y="0" width="400" height="200" viewBox="0 0 400 400">
+                    <rect x="10" y="10" width="80" height="80" fill="blue"></rect>
+                </svg>
+            </svg>
+        </div>
+
+
+    </div>
+
+</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.js b/ace/ace_standard/src/main/js/default/pages/svg/router/index.js
similarity index 77%
rename from ace/ace_standard/src/main/js/default/pages/circle/index.js
rename to ace/ace_standard/src/main/js/default/pages/svg/router/index.js
index 260427920..46953ce06 100644
--- a/ace/ace_standard/src/main/js/default/pages/circle/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/svg/router/index.js
@@ -12,15 +12,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import prompt from '@system.prompt';
+
 export default {
     data: {
         title: ""
-    },
-    onShow(){
-        // 通用属性
-        var prop1 =  this.$element("prop1");
-        var name1 = prop1.dataSet.a
-        var prop2 =  this.$refs.prop2;
-        var name2 = prop2.dataSet.a
     }
 }
\ No newline at end of file
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 f1bd19969..9034dd0ba 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
@@ -56,4 +56,7 @@ 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
+require('./gridContainerProps.test.js')
+require('./svgProps.test.js')
+require('./rectProps.test.js')
+require('./circleProps.test.js')
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/test/circleProps.test.js b/ace/ace_standard/src/main/js/default/test/circleProps.test.js
new file mode 100644
index 000000000..83286f2c0
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/circleProps.test.js
@@ -0,0 +1,993 @@
+/**
+ * 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('circlePropsJsTest', 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('[circlePropsJsTest] before each called')
+ 
+         let result;
+         let options = {
+             uri: 'pages/circle/prop/index'
+         }
+         try {
+             result = router.push(options)
+             console.info("push circleProps page success " + JSON.stringify(result));
+         } catch (err) {
+             console.error("push circleProps page error " + JSON.stringify(result));
+         }
+         await sleep(4000)
+         done()
+     });
+ 
+     /**
+     * run after testcase
+     */
+     afterAll(async function () {
+         console.info('[circlePropsJsTest] after each called')
+         await backToIndex()
+         await sleep(1000)
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircletFillProp
+      * @tc.desc      ACE
+      */
+     it('testCircleFillProp', 0, async function (done) { 
+         console.info('testCircleFillProp START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillProp);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillProp')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('50')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[circleProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleFillOpacityPropOne
+      * @tc.desc      ACE
+      */
+     it('testCircleFillOpacityPropOne', 0, async function (done) {
+         console.info('testCircleFillOpacityPropOne START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillOpacityPropOne);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillOpacityPropOne')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[circleProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillOpacity).assertEqual('0.5')
+         console.info("[circleProps] get inspector fill-opacity value is: " + JSON.stringify(obj.$attrs.fillOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleFillOpacityPropTwo
+      * @tc.desc      ACE
+      */
+     it('testCircleFillOpacityPropTwo', 0, async function (done) {
+         console.info('testCircleFillOpacityPropTwo START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillOpacityPropTwo);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillOpacityPropTwo')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[circleProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillOpacity).assertEqual('1')
+         console.info("[circleProps] get inspector fill-opacity value is: " + JSON.stringify(obj.$attrs.fillOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleFillOpacityPropThree
+      * @tc.desc      ACE
+      */
+     it('testCircleFillOpacityPropThree', 0, async function (done) {
+         console.info('testCircleFillOpacityPropThree START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillOpacityPropThree);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillOpacityPropThree')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[circleProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillOpacity).assertEqual('1.5')
+         console.info("[circleProps] get inspector fill-opacity value is: " + JSON.stringify(obj.$attrs.fillOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleFillRulePropOne
+      * @tc.desc      ACE
+      */
+     it('testCircleFillRulePropOne', 0, async function (done) {
+         console.info('testCircleFillRulePropOne START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillRulePropOne);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillRulePropOne')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[circleProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillRule).assertEqual('evenodd')
+         console.info("[circleProps] get inspector fill-rule value is: " + JSON.stringify(obj.$attrs.fillRule));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleFillRulePropTwo
+      * @tc.desc      ACE
+      */
+     it('testCircleFillRulePropTwo', 0, async function (done) {
+         console.info('testCircleFillRulePropTwo START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillRulePropTwo);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillRulePropTwo')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[circleProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillRule).assertEqual('nonzero')
+         console.info("[circleProps] get inspector fill-rule value is: " + JSON.stringify(obj.$attrs.fillRule));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleOpacityPropOne
+      * @tc.desc      ACE
+      */
+     it('testCircleOpacityPropOne', 0, async function (done) {
+         console.info('testCircleOpacityPropOne START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.opacityPropOne);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('opacityPropOne')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[circleProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.opacity).assertEqual('0.5')
+         console.info("[lineProps] get inspector opacity value is: " + JSON.stringify(obj.$attrs.opacity));;
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleOpacityPropTwo
+      * @tc.desc      ACE
+      */
+     it('testCircleOpacityPropTwo', 0, async function (done) {
+         console.info('testCircleOpacityPropTwo START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.opacityPropTwo);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('opacityPropTwo')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[circleProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.opacity).assertEqual('1')
+         console.info("[circleProps] get inspector opacity value is: " + JSON.stringify(obj.$attrs.opacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleOpacityPropThree
+      * @tc.desc      ACE
+      */
+     it('testCircleOpacityPropThree', 0, async function (done) {
+         console.info('testCircleOpacityPropThree START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.opacityPropThree);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('opacityPropThree')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[circleProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.opacity).assertEqual('1.5')
+         console.info("[circleProps] get inspector opacity value is: " + JSON.stringify(obj.$attrs.opacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeProp
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeProp', 0, async function (done) {
+         console.info('testCircleStrokeProp START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeProp);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeProp')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeDashArrayProp
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeDashArrayProp', 0, async function (done) {
+         console.info('testCircleStrokeDashArrayProp START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeDashArrayProp);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeDashArrayProp')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeDasharray).assertEqual('2 3')
+         console.info("[circleProps] get inspector stroke-dasharray value is: " + JSON.stringify(obj.$attrs.strokeDasharray));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeDashOffsetProp
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeDashOffsetProp', 0, async function (done) {
+         console.info('testCircleStrokeDashOffsetProp START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeDashOffsetProp);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeDashOffsetProp')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeDashoffset).assertEqual('23')
+         console.info("[circleProps] get inspector stroke-dashoffset value is: " + JSON.stringify(obj.$attrs.strokeDashoffset));
+         done();
+     });
+ 
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeLineJoinPropOne
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeLineJoinPropOne', 0, async function (done) {
+         console.info('testCircleStrokeLineJoinPropOne START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineJoinPropOne);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineJoinPropOne')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLinejoin).assertEqual('bevel')
+         console.info("[circleProps] get inspector stroke-linejoin value is: " + JSON.stringify(obj.$attrs.strokeLinejoin));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeLineJoinPropTwo
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeLineJoinPropTwo', 0, async function (done) {
+         console.info('testCircleStrokeLineJoinPropTwo START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineJoinPropTwo);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineJoinPropTwo')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLinejoin).assertEqual('miter')
+         console.info("[circleProps] get inspector stroke-linejoin value is: " + JSON.stringify(obj.$attrs.strokeLinejoin));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeLineJoinPropThree
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeLineJoinPropThree', 0, async function (done) {
+         console.info('testCircleStrokeLineJoinPropThree START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineJoinPropThree);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineJoinPropThree')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLinejoin).assertEqual('round')
+         console.info("[circleProps] get inspector stroke-linejoin value is: " + JSON.stringify(obj.$attrs.strokeLinejoin));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeLineJoinPropOne
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeLineCapPropOne', 0, async function (done) {
+         console.info('testCircleStrokeLineCapPropOne START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineCapPropOne);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineCapPropOne')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLineCap).assertEqual('butt')
+         console.info("[circleProps] get inspector stroke-lineCap value is: " + JSON.stringify(obj.$attrs.strokeLineCap));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeLineCapPropTwo
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeLineCapPropTwo', 0, async function (done) {
+         console.info('testCircleStrokeLineCapPropTwo START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineCapPropTwo);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineCapPropTwo')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLineCap).assertEqual('round')
+         console.info("[circleProps] get inspector stroke-lineCap value is: " + JSON.stringify(obj.$attrs.strokeLineCap));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeLineCapPropThree
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeLineCapPropThree', 0, async function (done) {
+         console.info('testCircleStrokeLineCapPropThree START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineCapPropThree);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineCapPropThree')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLineCap).assertEqual('square')
+         console.info("[circleProps] get inspector stroke-lineCap value is: " + JSON.stringify(obj.$attrs.strokeLineCap));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeMiterLimitProp
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeMiterLimitProp', 0, async function (done) {
+         console.info('testCircleStrokeMiterLimitProp START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeMiterLimitProp);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeMiterLimitProp')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeMiterlimit).assertEqual('10')
+         console.info("[circleProps] get inspector stroke-miterlimit value is: " + JSON.stringify(obj.$attrs.strokeMiterlimit));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeOpacityPropOne
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeOpacityPropOne', 0, async function (done) {
+         console.info('testCircleStrokeOpacityPropOne START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeOpacityPropOne);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeOpacityPropOne')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeOpacity).assertEqual('0.5')
+         console.info("[circleProps] get inspector stroke-opacity value is: " + JSON.stringify(obj.$attrs.strokeOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeOpacityPropTwo
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeOpacityPropTwo', 0, async function (done) {
+         console.info('testCircleStrokeOpacityPropTwo START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeOpacityPropTwo);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeOpacityPropTwo')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeOpacity).assertEqual('1')
+         console.info("[circleProps] get inspector stroke-opacity value is: " + JSON.stringify(obj.$attrs.strokeOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeOpacityPropThree
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeOpacityPropThree', 0, async function (done) {
+         console.info('testCircleStrokeOpacityPropThree START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeOpacityPropThree);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeOpacityPropThree')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeOpacity).assertEqual('1.5')
+         console.info("[circleProps] get inspector stroke-opacity value is: " + JSON.stringify(obj.$attrs.strokeOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleStrokeWidthProp
+      * @tc.desc      ACE
+      */
+     it('testCircleStrokeWidthProp', 0, async function (done) {
+         console.info('testCircleStrokeWidthProp START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeWidthProp);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeWidthProp')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[circleProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeWidth).assertEqual('6')
+         console.info("[circleProps] get inspector stroke-width value is: " + JSON.stringify(obj.$attrs.strokeWidth));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testCircleTransformProp
+      * @tc.desc      ACE
+      */
+     it('testCircleTransformProp', 0, async function (done) {
+         console.info('testCircleTransformProp START');
+         console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.transformProp);
+         console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('circle')
+         console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('transformProp')
+         console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.cx).assertEqual('30')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('12')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('10')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+         expect(obj.$attrs.transform).assertEqual('translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)')
+         console.info("[circleProps] get inspector transform value is: " + JSON.stringify(obj.$attrs.transform));
+         done();
+     });
+
+     /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testCircleIdProp
+     * @tc.desc      ACE
+     */
+      it('testCircleIdProp', 0, async function (done) {
+        console.info('testCircleIdProp START');
+        console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.idProp);
+        console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('circle')
+        console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('idProp')
+        console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.cx).assertEqual('50')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('25')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('20')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testCircleCxPropOne
+     * @tc.desc      ACE
+     */
+     it('testCircleCxPropOne', 0, async function (done) {
+        console.info('testCircleCxPropOne START');
+        console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.cxPropOne);
+        console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('circle')
+        console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('cxPropOne')
+        console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.cx).assertEqual('50')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('25')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('20')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testCircleCxPropTwo
+     * @tc.desc      ACE
+     */
+     it('testCircleCxPropTwo', 0, async function (done) {
+        console.info('testCircleCxPropTwo START');
+        console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.cxPropTwo);
+        console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('circle')
+        console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('cxPropTwo')
+        console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.cx).assertEqual('50%')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('25')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('20')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+        expect(obj.$attrs.fill).assertEqual('pink')
+        console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testCircleCyPropOne
+     * @tc.desc      ACE
+     */
+     it('testCircleCyPropOne', 0, async function (done) {
+        console.info('testCircleCyPropOne START');
+        console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.cyPropOne);
+        console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('circle')
+        console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('cyPropOne')
+        console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.cx).assertEqual('50')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('25')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('20')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testCircleCyPropTwo
+     * @tc.desc      ACE
+     */
+     it('testCircleCyPropTwo', 0, async function (done) {
+        console.info('testCircleCyPropTwo START');
+        console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.cxPropTwo);
+        console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('circle')
+        console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('cxPropTwo')
+        console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.cx).assertEqual('100')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('25%')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('20')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+        expect(obj.$attrs.fill).assertEqual('pink')
+        console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testCircleRPropOne
+     * @tc.desc      ACE
+     */
+     it('testCircleRPropOne', 0, async function (done) {
+        console.info('testCircleRPropOne START');
+        console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.rPropOne);
+        console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('circle')
+        console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('rPropOne')
+        console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.cx).assertEqual('50')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('25')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('20')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testCircleRPropTwo
+     * @tc.desc      ACE
+     */
+     it('testCircleRPropTwo', 0, async function (done) {
+        console.info('testCircleRPropTwo START');
+        console.info("[circleProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.rPropTwo);
+        console.info("[circleProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[circleProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('circle')
+        console.info("[circleProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('rPropTwo')
+        console.info("[circleProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.cx).assertEqual('100')
+         console.info("[circleProps] get inspector cx value is: " + JSON.stringify(obj.$attrs.cx));
+         expect(obj.$attrs.cy).assertEqual('25')
+         console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.cy));
+         expect(obj.$attrs.r).assertEqual('20%')
+         console.info("[circleProps] get inspector r value is: " + JSON.stringify(obj.$attrs.r));
+        expect(obj.$attrs.fill).assertEqual('pink')
+        console.info("[circleProps] get inspector cy value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+  
+ });
+ 
\ 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 29544db2f..929a0df9a 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
@@ -1318,7 +1318,7 @@ describe('aceJsTest', function () {
     it('testSvgComponent', 0, async function (done) {
         let result;
         let options = {
-            uri: 'pages/svg/index'
+            uri: 'pages/svg/router/index'
         }
         try {
             result = router.push(options)
@@ -1329,7 +1329,7 @@ describe('aceJsTest', function () {
         await sleep(5000)
         let pages = router.getState();
         console.info("[router.svg] getState" + JSON.stringify(pages));
-        expect("pages/svg/").assertEqual(pages.path);
+        expect("pages/svg/router/").assertEqual(pages.path);
         done();
     });
 
@@ -1341,7 +1341,7 @@ describe('aceJsTest', function () {
     it('testRectComponent', 0, async function (done) {
         let result;
         let options = {
-            uri: 'pages/rect/index'
+            uri: 'pages/rect/router/index'
         }
         try {
             result = router.push(options)
@@ -1352,7 +1352,7 @@ describe('aceJsTest', function () {
         await sleep(5000)
         let pages = router.getState();
         console.info("[router.rect] getState" + JSON.stringify(pages));
-        expect("pages/rect/").assertEqual(pages.path);
+        expect("pages/rect/router/").assertEqual(pages.path);
         done();
     });
 
@@ -1364,7 +1364,7 @@ describe('aceJsTest', function () {
     it('testCircleComponent', 0, async function (done) {
         let result;
         let options = {
-            uri: 'pages/circle/index'
+            uri: 'pages/circle/router/index'
         }
         try {
             result = router.push(options)
@@ -1375,7 +1375,7 @@ describe('aceJsTest', function () {
         await sleep(5000)
         let pages = router.getState();
         console.info("[router.circle] getState" + JSON.stringify(pages));
-        expect("pages/circle/").assertEqual(pages.path);
+        expect("pages/circle/router/").assertEqual(pages.path);
         done();
     });
 
diff --git a/ace/ace_standard/src/main/js/default/test/rectProps.test.js b/ace/ace_standard/src/main/js/default/test/rectProps.test.js
new file mode 100644
index 000000000..5f11f59aa
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/rectProps.test.js
@@ -0,0 +1,974 @@
+/**
+ * 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('rectPropsJsTest', 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('[rectPropsJsTest] before each called')
+ 
+         let result;
+         let options = {
+             uri: 'pages/rect/prop/index'
+         }
+         try {
+             result = router.push(options)
+             console.info("push rectProps page success " + JSON.stringify(result));
+         } catch (err) {
+             console.error("push rectProps page error " + JSON.stringify(result));
+         }
+         await sleep(4000)
+         done()
+     })
+ 
+     /**
+     * run after testcase
+     */
+     afterAll(async function () {
+         console.info('[rectPropsJsTest] after each called')
+         await backToIndex()
+         await sleep(1000)
+     })
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectFillProp
+      * @tc.desc      ACE
+      */
+     it('testRectFillProp', 0, async function (done) {
+         console.info('testRectFillProp START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillProp);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillProp')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('100')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[rectProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectFillOpacityPropOne
+      * @tc.desc      ACE
+      */
+     it('testRectFillOpacityPropOne', 0, async function (done) {
+         console.info('testRectFillOpacityPropOne START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillOpacityPropOne);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillOpacityPropOne')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[rectProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillOpacity).assertEqual('0.5')
+         console.info("[rectProps] get inspector fill-opacity value is: " + JSON.stringify(obj.$attrs.fillOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectFillOpacityPropTwo
+      * @tc.desc      ACE
+      */
+     it('testRectFillOpacityPropTwo', 0, async function (done) {
+         console.info('testRectFillOpacityPropTwo START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillOpacityPropTwo);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillOpacityPropTwo')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[rectProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillOpacity).assertEqual('1')
+         console.info("[rectProps] get inspector fill-opacity value is: " + JSON.stringify(obj.$attrs.fillOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectFillOpacityPropThree
+      * @tc.desc      ACE
+      */
+     it('testRectFillOpacityPropThree', 0, async function (done) {
+         console.info('testRectFillOpacityPropThree START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillOpacityPropThree);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillOpacityPropThree')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[rectProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillOpacity).assertEqual('1.5')
+         console.info("[rectProps] get inspector fill-opacity value is: " + JSON.stringify(obj.$attrs.fillOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectFillRulePropOne
+      * @tc.desc      ACE
+      */
+     it('testRectFillRulePropOne', 0, async function (done) {
+         console.info('testRectFillRulePropOne START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillRulePropOne);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillRulePropOne')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[rectProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillRule).assertEqual('evenodd')
+         console.info("[rectProps] get inspector fill-rule value is: " + JSON.stringify(obj.$attrs.fillRule));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectFillRulePropTwo
+      * @tc.desc      ACE
+      */
+     it('testRectFillRulePropTwo', 0, async function (done) {
+         console.info('testRectFillRulePropTwo START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.fillRulePropTwo);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('fillRulePropTwo')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[rectProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.fillRule).assertEqual('nonzero')
+         console.info("[rectProps] get inspector fill-rule value is: " + JSON.stringify(obj.$attrs.fillRule));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectOpacityPropOne
+      * @tc.desc      ACE
+      */
+     it('testRectOpacityPropOne', 0, async function (done) {
+         console.info('testRectOpacityPropOne START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.opacityPropOne);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('opacityPropOne')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[rectProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.opacity).assertEqual('0.5')
+         console.info("[rectProps] get inspector opacity value is: " + JSON.stringify(obj.$attrs.opacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectOpacityPropTwo
+      * @tc.desc      ACE
+      */
+     it('testRectOpacityPropTwo', 0, async function (done) {
+         console.info('testRectOpacityPropTwo START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.opacityPropTwo);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('opacityPropTwo')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[rectProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.opacity).assertEqual('1')
+         console.info("[rectProps] get inspector opacity value is: " + JSON.stringify(obj.$attrs.opacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectOpacityPropThree
+      * @tc.desc      ACE
+      */
+     it('testRectOpacityPropThree', 0, async function (done) {
+         console.info('testRectOpacityPropThree START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.opacityPropThree);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('opacityPropThree')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.fill).assertEqual('red')
+         console.info("[rectProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+         expect(obj.$attrs.opacity).assertEqual('1.5')
+         console.info("[rectProps] get inspector opacity value is: " + JSON.stringify(obj.$attrs.opacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeProp
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeProp', 0, async function (done) {
+         console.info('testRectStrokeProp START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeProp);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeProp')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('100px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeDashArrayProp
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeDashArrayProp', 0, async function (done) {
+         console.info('testRectStrokeDashArrayProp START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeDashArrayProp);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeDashArrayProp')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('100px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeDasharray).assertEqual('2 3')
+         console.info("[rectProps] get inspector stroke-dasharray value is: " + JSON.stringify(obj.$attrs.strokeDasharray));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeDashOffsetProp
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeDashOffsetProp', 0, async function (done) {
+         console.info('testRectStrokeDashOffsetProp START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeDashOffsetProp);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeDashOffsetProp')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('100px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeDashoffset).assertEqual('23')
+         console.info("[rectProps] get inspector stroke-dashoffset value is: " + JSON.stringify(obj.$attrs.strokeDashoffset));
+         done();
+     });
+ 
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeLineJoinPropOne
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeLineJoinPropOne', 0, async function (done) {
+         console.info('testRectStrokeLineJoinPropOne START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineJoinPropOne);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineJoinPropOne')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLinejoin).assertEqual('bevel')
+         console.info("[rectProps] get inspector stroke-linejoin value is: " + JSON.stringify(obj.$attrs.strokeLinejoin));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeLineJoinPropTwo
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeLineJoinPropTwo', 0, async function (done) {
+         console.info('testRectStrokeLineJoinPropTwo START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineJoinPropTwo);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineJoinPropTwo')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLinejoin).assertEqual('miter')
+         console.info("[rectProps] get inspector stroke-linejoin value is: " + JSON.stringify(obj.$attrs.strokeLinejoin));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeLineJoinPropThree
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeLineJoinPropThree', 0, async function (done) {
+         console.info('testRectStrokeLineJoinPropThree START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineJoinPropThree);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineJoinPropThree')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLinejoin).assertEqual('round')
+         console.info("[rectProps] get inspector stroke-linejoin value is: " + JSON.stringify(obj.$attrs.strokeLinejoin));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeLineJoinPropOne
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeLineJoinPropOne', 0, async function (done) {
+         console.info('testRectStrokeLineJoinPropOne START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineCapPropOne);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineCapPropOne')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLineCap).assertEqual('butt')
+         console.info("[rectProps] get inspector stroke-lineCap value is: " + JSON.stringify(obj.$attrs.strokeLineCap));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeLineCapPropTwo
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeLineCapPropTwo', 0, async function (done) {
+         console.info('testRectStrokeLineCapPropTwo START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineCapPropTwo);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineCapPropTwo')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLineCap).assertEqual('round')
+         console.info("[rectProps] get inspector stroke-lineCap value is: " + JSON.stringify(obj.$attrs.strokeLineCap));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeLineCapPropThree
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeLineCapPropThree', 0, async function (done) {
+         console.info('testRectStrokeLineCapPropThree START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeLineCapPropThree);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeLineCapPropThree')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeLineCap).assertEqual('square')
+         console.info("[rectProps] get inspector stroke-lineCap value is: " + JSON.stringify(obj.$attrs.strokeLineCap));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeMiterLimitProp
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeMiterLimitProp', 0, async function (done) {
+         console.info('testRectStrokeMiterLimitProp START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeMiterLimitProp);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeMiterLimitProp')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('100px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeMiterlimit).assertEqual('10')
+         console.info("[rectProps] get inspector stroke-miterlimit value is: " + JSON.stringify(obj.$attrs.strokeMiterlimit));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeOpacityPropOne
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeOpacityPropOne', 0, async function (done) {
+         console.info('testRectStrokeOpacityPropOne START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeOpacityPropOne);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeOpacityPropOne')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeOpacity).assertEqual('0.5')
+         console.info("[rectProps] get inspector stroke-opacity value is: " + JSON.stringify(obj.$attrs.strokeOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeOpacityPropTwo
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeOpacityPropTwo', 0, async function (done) {
+         console.info('testRectStrokeOpacityPropTwo START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeOpacityPropTwo);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeOpacityPropTwo')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeOpacity).assertEqual('1')
+         console.info("[rectProps] get inspector stroke-opacity value is: " + JSON.stringify(obj.$attrs.strokeOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeOpacityPropThree
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeOpacityPropThree', 0, async function (done) {
+         console.info('testRectStrokeOpacityPropThree START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeOpacityPropThree);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeOpacityPropThree')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('50px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeOpacity).assertEqual('1.5')
+         console.info("[rectProps] get inspector stroke-opacity value is: " + JSON.stringify(obj.$attrs.strokeOpacity));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectStrokeWidthProp
+      * @tc.desc      ACE
+      */
+     it('testRectStrokeWidthProp', 0, async function (done) {
+         console.info('testRectStrokeWidthProp START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.strokeWidthProp);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('strokeWidthProp')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('100px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('20px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.stroke).assertEqual('red')
+         console.info("[rectProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+         expect(obj.$attrs.strokeWidth).assertEqual('6')
+         console.info("[rectProps] get inspector stroke-width value is: " + JSON.stringify(obj.$attrs.strokeWidth));
+         done();
+     });
+ 
+     /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectTransformProp
+      * @tc.desc      ACE
+      */
+     it('testRectTransformProp', 0, async function (done) {
+         console.info('testRectTransformProp START');
+         console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ 
+         let obj = JSON.parse(globalThis.value.transformProp);
+         console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+         console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ 
+         expect(obj.$type).assertEqual('rect')
+         console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+         expect(obj.$attrs.id).assertEqual('transformProp')
+         console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+         expect(obj.$attrs.width).assertEqual('100px')
+         console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+         expect(obj.$attrs.height).assertEqual('100px')
+         console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+         expect(obj.$attrs.transform).assertEqual('translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)')
+         console.info("[rectProps] get inspector transform value is: " + JSON.stringify(obj.$attrs.transform));
+         done();
+     });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testRectIdProp
+     * @tc.desc      ACE
+     */
+     it('testRectIdProp', 0, async function (done) {
+        console.info('testRectIdProp START');
+        console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.idProp);
+        console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('rect')
+        console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('idProp')
+        console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('90px')
+        console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectWidthPropOne
+      * @tc.desc      ACE
+      */
+    it('testRectWidthPropOne', 0, async function (done) {
+        console.info('testRectWidthPropOne START');
+        console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.widthPropOne);
+        console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('rect')
+        console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('widthPropOne')
+        console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('90px')
+        console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectWidthPropTwo
+      * @tc.desc      ACE
+      */
+    it('testRectWidthPropTwo', 0, async function (done) {
+        console.info('testRectWidthPropTwo START');
+        console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.widthPropTwo);
+        console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('rect')
+        console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('widthPropTwo')
+        console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('90%')
+        console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectHeightPropOne
+      * @tc.desc      ACE
+      */
+    it('testRectHeightPropOne', 0, async function (done) {
+        console.info('testRectHeightPropOne START');
+        console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.heightPropOne);
+        console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('rect')
+        console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('heightPropOne')
+        console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('90%')
+        console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectHeightPropTwo
+      * @tc.desc      ACE
+      */
+    it('testRectHeightPropTwo', 0, async function (done) {
+        console.info('testRectHeightPropTwo START');
+        console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.heightPropTwo);
+        console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('rect')
+        console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('heightPropTwo')
+        console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('90%')
+        console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('80%')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectXProp
+      * @tc.desc      ACE
+      */
+    it('testRectXProp', 0, async function (done) {
+        console.info('testRectXProp START');
+        console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.xProp);
+        console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('rect')
+        console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('xProp')
+        console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('90%')
+        console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.x).assertEqual('20')
+        console.info("[rectProps] get inspector x value is: " + JSON.stringify(obj.$attrs.x));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectYProp
+      * @tc.desc      ACE
+      */
+    it('testRectYProp', 0, async function (done) {
+        console.info('testRectYProp START');
+        console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.yProp);
+        console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('rect')
+        console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('yProp')
+        console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('90%')
+        console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.y).assertEqual('20')
+        console.info("[rectProps] get inspector y value is: " + JSON.stringify(obj.$attrs.y));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectRxProp
+      * @tc.desc      ACE
+      */
+    it('testRectRxProp', 0, async function (done) {
+        console.info('testRectRxProp START');
+        console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.rxProp);
+        console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('rect')
+        console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('rxProp')
+        console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('90%')
+        console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.rx).assertEqual('20')
+        console.info("[rectProps] get inspector rx value is: " + JSON.stringify(obj.$attrs.rx));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testRectRyProp
+      * @tc.desc      ACE
+      */
+     it('testRectRyProp', 0, async function (done) {
+        console.info('testRectRyProp START');
+        console.info("[rectProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.ryProp);
+        console.info("[rectProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[rectProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('rect')
+        console.info("[rectProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('ryProp')
+        console.info("[rectProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('90%')
+        console.info("[rectProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[rectProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.ry).assertEqual('20')
+        console.info("[rectProps] get inspector ry value is: " + JSON.stringify(obj.$attrs.ry));
+        done();
+    });
+ });
+ 
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/test/svgProps.test.js b/ace/ace_standard/src/main/js/default/test/svgProps.test.js
new file mode 100644
index 000000000..6212acbda
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/svgProps.test.js
@@ -0,0 +1,901 @@
+/**
+ * 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('svgPropsJsTest', 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('[svgPropsJsTest] before each called')
+
+        let result;
+        let options = {
+            uri: 'pages/svg/prop/index'
+        }
+        try {
+            result = router.push(options)
+            console.info("push svgProps page success " + JSON.stringify(result));
+        } catch (err) {
+            console.error("push svgProps page error " + JSON.stringify(result));
+        }
+        await sleep(4000)
+        done()
+    });
+
+    /**
+    * run after testcase
+    */
+    afterAll(async function () {
+        console.info('[svgPropsJsTest] after each called')
+        await backToIndex()
+        await sleep(1000)
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgFillProp
+     * @tc.desc      ACE
+     */
+    it('testSvgFillProp', 0, async function (done) {
+        console.info('testSvgFillProp START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.fillProp);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('fillProp')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('100')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgFillOpacityPropOne
+     * @tc.desc      ACE
+     */
+    it('testSvgFillOpacityPropOne', 0, async function (done) {
+        console.info('testSvgFillOpacityPropOne START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.fillOpacityPropOne);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('fillOpacityPropOne')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        expect(obj.$attrs.fillOpacity).assertEqual('0.5')
+        console.info("[svgProps] get inspector fill-opacity value is: " + JSON.stringify(obj.$attrs.fillOpacity));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgFillOpacityPropTwo
+     * @tc.desc      ACE
+     */
+    it('testSvgFillOpacityPropTwo', 0, async function (done) {
+        console.info('testSvgFillOpacityPropTwo START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.fillOpacityPropTwo);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('fillOpacityPropTwo')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        expect(obj.$attrs.fillOpacity).assertEqual('1')
+        console.info("[svgProps] get inspector fill-opacity value is: " + JSON.stringify(obj.$attrs.fillOpacity));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgFillOpacityPropThree
+     * @tc.desc      ACE
+     */
+    it('testSvgFillOpacityPropThree', 0, async function (done) {
+        console.info('testSvgFillOpacityPropThree START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.fillOpacityPropThree);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('fillOpacityPropThree')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        expect(obj.$attrs.fillOpacity).assertEqual('1.5')
+        console.info("[svgProps] get inspector fill-opacity value is: " + JSON.stringify(obj.$attrs.fillOpacity));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgFillRulePropOne
+     * @tc.desc      ACE
+     */
+    it('testSvgFillRulePropOne', 0, async function (done) {
+        console.info('testSvgFillRulePropOne START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.fillRulePropOne);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('fillRulePropOne')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        expect(obj.$attrs.fillRule).assertEqual('evenodd')
+        console.info("[svgProps] get inspector fill-rule value is: " + JSON.stringify(obj.$attrs.fillRule));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgFillRulePropTwo
+     * @tc.desc      ACE
+     */
+    it('testSvgFillRulePropTwo', 0, async function (done) {
+        console.info('testSvgFillRulePropTwo START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.fillRulePropTwo);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('fillRulePropTwo')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        expect(obj.$attrs.fillRule).assertEqual('nonzero')
+        console.info("[svgProps] get inspector fill-rule value is: " + JSON.stringify(obj.$attrs.fillRule));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgOpacityPropOne
+     * @tc.desc      ACE
+     */
+    it('testSvgOpacityPropOne', 0, async function (done) {
+        console.info('testSvgOpacityPropOne START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.opacityPropOne);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('opacityPropOne')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        expect(obj.$attrs.opacity).assertEqual('0.5')
+         console.info("[lineProps] get inspector opacity value is: " + JSON.stringify(obj.$attrs.opacity));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgOpacityPropTwo
+     * @tc.desc      ACE
+     */
+    it('testSvgOpacityPropTwo', 0, async function (done) {
+        console.info('testSvgOpacityPropTwo START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.opacityPropTwo);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('opacityPropTwo')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        expect(obj.$attrs.opacity).assertEqual('1')
+        console.info("[svgProps] get inspector opacity value is: " + JSON.stringify(obj.$attrs.opacity));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgOpacityPropThree
+     * @tc.desc      ACE
+     */
+    it('testSvgOpacityPropThree', 0, async function (done) {
+        console.info('testSvgOpacityPropThree START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.opacityPropThree);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('opacityPropThree')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        expect(obj.$attrs.opacity).assertEqual('1.5')
+        console.info("[svgProps] get inspector opacity value is: " + JSON.stringify(obj.$attrs.opacity));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeProp
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeProp', 0, async function (done) {
+        console.info('testSvgStrokeProp START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeProp);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeProp')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('100px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeDashArrayProp
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeDashArrayProp', 0, async function (done) {
+        console.info('testSvgStrokeDashArrayProp START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeDashArrayProp);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeDashArrayProp')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('100px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeDasharray).assertEqual('2 3')
+        console.info("[svgProps] get inspector stroke-dasharray value is: " + JSON.stringify(obj.$attrs.strokeDasharray));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeDashOffsetProp
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeDashOffsetProp', 0, async function (done) {
+        console.info('testSvgStrokeDashOffsetProp START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeDashOffsetProp);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeDashOffsetProp')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('100px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeDashoffset).assertEqual('23')
+        console.info("[svgProps] get inspector stroke-dashoffset value is: " + JSON.stringify(obj.$attrs.strokeDashoffset));
+        done();
+    });
+
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeLineJoinPropOne
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeLineJoinPropOne', 0, async function (done) {
+        console.info('testSvgStrokeLineJoinPropOne START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeLineJoinPropOne);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeLineJoinPropOne')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeLinejoin).assertEqual('bevel')
+        console.info("[svgProps] get inspector stroke-linejoin value is: " + JSON.stringify(obj.$attrs.strokeLinejoin));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeLineJoinPropTwo
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeLineJoinPropTwo', 0, async function (done) {
+        console.info('testSvgStrokeLineJoinPropTwo START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeLineJoinPropTwo);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeLineJoinPropTwo')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeLinejoin).assertEqual('miter')
+        console.info("[svgProps] get inspector stroke-linejoin value is: " + JSON.stringify(obj.$attrs.strokeLinejoin));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeLineJoinPropThree
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeLineJoinPropThree', 0, async function (done) {
+        console.info('testSvgStrokeLineJoinPropThree START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeLineJoinPropThree);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeLineJoinPropThree')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeLinejoin).assertEqual('round')
+        console.info("[svgProps] get inspector stroke-linejoin value is: " + JSON.stringify(obj.$attrs.strokeLinejoin));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeLineJoinPropOne
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeLineCapPropOne', 0, async function (done) {
+        console.info('testSvgStrokeLineCapPropOne START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeLineCapPropOne);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeLineCapPropOne')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeLineCap).assertEqual('butt')
+        console.info("[svgProps] get inspector stroke-lineCap value is: " + JSON.stringify(obj.$attrs.strokeLineCap));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeLineCapPropTwo
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeLineCapPropTwo', 0, async function (done) {
+        console.info('testSvgStrokeLineCapPropTwo START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeLineCapPropTwo);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeLineCapPropTwo')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeLineCap).assertEqual('round')
+        console.info("[svgProps] get inspector stroke-lineCap value is: " + JSON.stringify(obj.$attrs.strokeLineCap));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeLineCapPropThree
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeLineCapPropThree', 0, async function (done) {
+        console.info('testSvgStrokeLineCapPropThree START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeLineCapPropThree);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeLineCapPropThree')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeLineCap).assertEqual('square')
+        console.info("[svgProps] get inspector stroke-lineCap value is: " + JSON.stringify(obj.$attrs.strokeLineCap));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeMiterLimitProp
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeMiterLimitProp', 0, async function (done) {
+        console.info('testSvgStrokeMiterLimitProp START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeMiterLimitProp);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeMiterLimitProp')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('100px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeMiterlimit).assertEqual('10')
+        console.info("[svgProps] get inspector stroke-miterlimit value is: " + JSON.stringify(obj.$attrs.strokeMiterlimit));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeOpacityPropOne
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeOpacityPropOne', 0, async function (done) {
+        console.info('testSvgStrokeOpacityPropOne START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeOpacityPropOne);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeOpacityPropOne')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeOpacity).assertEqual('0.5')
+        console.info("[svgProps] get inspector stroke-opacity value is: " + JSON.stringify(obj.$attrs.strokeOpacity));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeOpacityPropTwo
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeOpacityPropTwo', 0, async function (done) {
+        console.info('testSvgStrokeOpacityPropTwo START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeOpacityPropTwo);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeOpacityPropTwo')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeOpacity).assertEqual('1')
+        console.info("[svgProps] get inspector stroke-opacity value is: " + JSON.stringify(obj.$attrs.strokeOpacity));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeOpacityPropThree
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeOpacityPropThree', 0, async function (done) {
+        console.info('testSvgStrokeOpacityPropThree START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeOpacityPropThree);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeOpacityPropThree')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeOpacity).assertEqual('1.5')
+        console.info("[svgProps] get inspector stroke-opacity value is: " + JSON.stringify(obj.$attrs.strokeOpacity));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgStrokeWidthProp
+     * @tc.desc      ACE
+     */
+    it('testSvgStrokeWidthProp', 0, async function (done) {
+        console.info('testSvgStrokeWidthProp START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.strokeWidthProp);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('strokeWidthProp')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('100px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.stroke).assertEqual('red')
+        console.info("[svgProps] get inspector stroke value is: " + JSON.stringify(obj.$attrs.stroke));
+        expect(obj.$attrs.strokeWidth).assertEqual('6')
+        console.info("[svgProps] get inspector stroke-width value is: " + JSON.stringify(obj.$attrs.strokeWidth));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgTransformProp
+     * @tc.desc      ACE
+     */
+    it('testSvgTransformProp', 0, async function (done) {
+        console.info('testSvgTransformProp START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.transformProp);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('transformProp')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('100px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.transform).assertEqual('translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)')
+        console.info("[svgProps] get inspector transform value is: " + JSON.stringify(obj.$attrs.transform));
+        done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+     * @tc.name      testSvgIdProp
+     * @tc.desc      ACE
+     */
+    it('testSvgIdProp', 0, async function (done) {
+        console.info('testSvgIdProp START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.idProp);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('idProp')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('100px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('40px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testSvgWidthPropOne
+      * @tc.desc      ACE
+      */
+    it('testSvgWidthPropOne', 0, async function (done) {
+        console.info('testSvgWidthPropOne START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.widthPropOne);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('widthPropOne')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testSvgWidthPropTwo
+      * @tc.desc      ACE
+      */
+    it('testSvgWidthPropTwo', 0, async function (done) {
+        console.info('testSvgWidthPropTwo START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.widthPropTwo);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('widthPropTwo')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50%')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testSvgHeightPropOne
+      * @tc.desc      ACE
+      */
+    it('testSvgHeightPropOne', 0, async function (done) {
+        console.info('testSvgHeightPropOne START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.heightPropOne);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('heightPropOne')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testSvgHeightPropTwo
+      * @tc.desc      ACE
+      */
+    it('testSvgHeightPropTwo', 0, async function (done) {
+        console.info('testSvgHeightPropTwo START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.heightPropTwo);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('heightPropTwo')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('50px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('20%')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.fill).assertEqual('red')
+        console.info("[svgProps] get inspector fill value is: " + JSON.stringify(obj.$attrs.fill));
+        done();
+    });
+
+    /**
+      * @tc.number    SUB_ACE_BASIC_COMPONENT_JS_API_0100
+      * @tc.name      testSvgViewBoxProp
+      * @tc.desc      ACE
+      */
+    it('testSvgViewBoxProp', 0, async function (done) {
+        console.info('testSvgViewBoxProp START');
+        console.info("[svgProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+        let obj = JSON.parse(globalThis.value.viewBoxProp);
+        console.info("[svgProps] get inspector value is: " + JSON.stringify(obj));
+        console.info("[svgProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+        expect(obj.$type).assertEqual('svg')
+        console.info("[svgProps] get inspector $type value is: " + JSON.stringify(obj.$attrs.$type));
+        expect(obj.$attrs.id).assertEqual('viewBoxProp')
+        console.info("[svgProps] get inspector id value is: " + JSON.stringify(obj.$attrs.id));
+        expect(obj.$attrs.width).assertEqual('100px')
+        console.info("[svgProps] get inspector width value is: " + JSON.stringify(obj.$attrs.width));
+        expect(obj.$attrs.height).assertEqual('40px')
+        console.info("[svgProps] get inspector height value is: " + JSON.stringify(obj.$attrs.height));
+        expect(obj.$attrs.viewBox).assertEqual('0 0 20 20')
+        console.info("[svgProps] get inspector viewBox value is: " + JSON.stringify(obj.$attrs.viewBox));
+        done();
+    });
+});
-- 
GitLab