diff --git a/.clang-format b/.clang-format
old mode 100755
new mode 100644
index f07283e..b29ebe3
--- a/.clang-format
+++ b/.clang-format
@@ -122,7 +122,7 @@ PenaltyBreakComment: 300
 PenaltyBreakFirstLessLess: 120
 # 在一个字符串字面量中引入换行的penalty
 PenaltyBreakString: 1000
-# 对于每个在行字符数限制之外的字符的penalt
+# 对于每个在行字符数限制之外的字符的penalty
 PenaltyExcessCharacter: 1000000
 # 将函数的返回类型放到它自己的行的penalty
 PenaltyReturnTypeOnItsOwnLine: 60
diff --git a/.gitignore b/.gitignore
old mode 100755
new mode 100644
index e09a3a0..bd6195f
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,4 @@ x32
 
 target/
 node_modules/
-moduletest/
+frameworks/test/
diff --git a/BUILD.gn b/BUILD.gn
deleted file mode 100755
index 738cb8e..0000000
--- a/BUILD.gn
+++ /dev/null
@@ -1,222 +0,0 @@
-#Copyright (c) 2020 Huawei Device 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("//build/lite/config/component/lite_component.gni")
-import("//build/lite/config/subsystem/aafwk/config.gni")
-
-declare_args() {
-  LOSCFG_TEST_JS_BUILD = false
-}
-
-lite_component("jsfwk") {
-  features = [ ":ace_lite" ]
-}
-
-config("ace_lite_config") {
-  include_dirs = [
-    "//foundation/graphic/lite/interfaces/innerkits/ui",
-    "//foundation/graphic/lite/interfaces/innerkits/ui/dock",
-    "//foundation/graphic/lite/interfaces/innerkits/ui/common",
-    "//foundation/graphic/lite/interfaces/kits",
-    "//foundation/graphic/lite/interfaces/kits/config",
-    "//foundation/graphic/lite/interfaces/kits/surface",
-    "//foundation/graphic/lite/interfaces/kits/ui",
-    "//foundation/graphic/lite/interfaces/kits/ui/animator",
-    "//foundation/graphic/lite/interfaces/kits/ui/common",
-    "//foundation/graphic/lite/interfaces/kits/ui/components",
-    "//foundation/graphic/lite/interfaces/kits/ui/dfx",
-    "//foundation/graphic/lite/interfaces/kits/ui/events",
-    "//foundation/graphic/lite/interfaces/kits/ui/font",
-    "//foundation/graphic/lite/interfaces/kits/ui/layout",
-    "//foundation/graphic/lite/interfaces/kits/ui/themes",
-    "//foundation/graphic/lite/interfaces/kits/utils",
-    "//utils/native/lite/include",
-    "//foundation/aafwk/interfaces/kits/ability_lite",
-    "//foundation/aafwk/interfaces/kits/want_lite",
-    "//foundation/aafwk/interfaces/innerkits/abilitymgr_lite",
-    "//foundation/appexecfwk/interfaces/kits/bundle_lite",
-    "//foundation/appexecfwk/utils/bundle_lite",
-    "//foundation/ace/lite/tools/simulator/config",
-  ]
-
-  include_dirs += [
-    "//third_party/bounds_checking_function/include",
-    "//foundation/ace/interfaces/innerkits/builtin/async",
-    "//foundation/ace/interfaces/innerkits/builtin/base",
-    "//foundation/ace/interfaces/innerkits/builtin/jsi",
-    "include/context",
-    "include/base",
-    "include/modules",
-    "include/resource",
-    "src/core",
-    "src/core/animation",
-    "src/core/base",
-    "src/core/components",
-    "src/core/context",
-    "src/core/directive",
-    "src/core/router",
-    "src/core/jsi",
-    "src/core/modules",
-    "src/core/router",
-    "src/core/stylemgr",
-    "src/core/wrapper",
-    "targets",
-    "//kernel/liteos_a/kernel/include/",
-    "//kernel/liteos_a/kernel/common",
-    "//third_party/jerryscript/jerry-core/include",
-    "//third_party/jerryscript/jerry-ext/include/jerryscript-ext",
-    "///third_party/jerryscript/jerry-port/default/include",
-    "//third_party/cJSON",
-    "//utils/native/lite/timer_task/include/",
-    "//third_party/freetype/include",
-  ]
-  if (ohos_kernel_type == "liteos_a" || ohos_kernel_type == "liteos_m") {
-    include_dirs += [ "targets/liteos_a" ]
-  } else if (ohos_kernel_type == "linux") {
-    include_dirs += [ "targets/linux" ]
-  }
-
-  ldflags = [ "-lstdc++" ]
-  ldflags += [ "-lpthread" ]
-  ldflags += [ "-Wl,-rpath-link=$ohos_root_path/$root_out_dir" ]
-}
-
-shared_library("ace_lite") {
-  configs -= [ "//build/lite/config:language_cpp" ]
-  cflags = [
-    "-Wall",
-    "-Wno-format",
-    "-Wno-format-extra-args",
-  ]
-  cflags_cc = [ "-std=c++14" ]
-  cflags_cc += cflags
-  configs += [ ":ace_lite_config" ]
-
-  sources = [
-    "src/core/animation/transition_impl.cpp",
-    "src/core/async/js_async_work.cpp",
-    "src/core/async/message_queue_utils.cpp",
-    "src/core/base/ace_log.cpp",
-    "src/core/base/ace_mem_base.cpp",
-    "src/core/base/js_debugger_config.cpp",
-    "src/core/base/js_fwk_common.cpp",
-    "src/core/base/key_parser.cpp",
-    "src/core/base/memory_heap.cpp",
-    "src/core/base/string_util.cpp",
-    "src/core/base/time_util.cpp",
-    "src/core/components/analog_clock_component.cpp",
-    "src/core/components/camera_component.cpp",
-    "src/core/components/canvas_component.cpp",
-    "src/core/components/chart_component.cpp",
-    "src/core/components/clock_hand_component.cpp",
-    "src/core/components/component.cpp",
-    "src/core/components/component_utils.cpp",
-    "src/core/components/div_component.cpp",
-    "src/core/components/event_listener.cpp",
-    "src/core/components/image_animator_component.cpp",
-    "src/core/components/image_component.cpp",
-    "src/core/components/input_component.cpp",
-    "src/core/components/list_adapter.cpp",
-    "src/core/components/list_component.cpp",
-    "src/core/components/marquee_component.cpp",
-    "src/core/components/panel_view.cpp",
-    "src/core/components/picker_view_component.cpp",
-    "src/core/components/progress_component.cpp",
-    "src/core/components/scroll_layer.cpp",
-    "src/core/components/slider_component.cpp",
-    "src/core/components/swiper_component.cpp",
-    "src/core/components/switch_component.cpp",
-    "src/core/components/tab_bar_component.cpp",
-    "src/core/components/tab_content_component.cpp",
-    "src/core/components/tabs_component.cpp",
-    "src/core/components/text_component.cpp",
-    "src/core/components/video_component.cpp",
-    "src/core/components/video_view.cpp",
-    "src/core/context/ace_ability.cpp",
-    "src/core/context/ace_event_error_code.cpp",
-    "src/core/context/fatal_handler.cpp",
-    "src/core/context/js_ability.cpp",
-    "src/core/context/js_ability_impl.cpp",
-    "src/core/context/js_app_context.cpp",
-    "src/core/context/js_app_environment.cpp",
-    "src/core/context/js_framework_raw.cpp",
-    "src/core/context/js_profiler.cpp",
-    "src/core/context/js_timer_list.cpp",
-    "src/core/directive/descriptor_utils.cpp",
-    "src/core/directive/directive_watcher_callback.cpp",
-    "src/core/jsi/jsi.cpp",
-    "src/core/modules/app_module.cpp",
-    "src/core/modules/dfx_module.cpp",
-    "src/core/modules/module_manager.cpp",
-    "src/core/modules/presets/cjson_parser.cpp",
-    "src/core/modules/presets/console_log_impl.cpp",
-    "src/core/modules/presets/console_module.cpp",
-    "src/core/modules/presets/localization_module.cpp",
-
-    #"src/core/modules/presets/feature_ability_module.cpp",
-    "src/core/modules/presets/preset_module.cpp",
-    "src/core/modules/presets/profiler_module.cpp",
-    "src/core/modules/presets/render_module.cpp",
-    "src/core/modules/presets/require_module.cpp",
-
-    #"src/core/modules/presets/jstest_module.cpp",
-    "src/core/modules/presets/timer_module.cpp",
-    "src/core/modules/presets/version_module.cpp",
-    "src/core/modules/router_module.cpp",
-    "src/core/modules/sample_module.cpp",
-    "src/core/resource/video_muted_image_res.cpp",
-    "src/core/resource/video_play_image_res.cpp",
-    "src/core/router/js_page_state.cpp",
-    "src/core/router/js_page_state_machine.cpp",
-    "src/core/router/js_router.cpp",
-    "src/core/stylemgr/app_style.cpp",
-    "src/core/stylemgr/app_style_item.cpp",
-    "src/core/stylemgr/app_style_list.cpp",
-    "src/core/stylemgr/app_style_manager.cpp",
-    "src/core/stylemgr/app_style_sheet.cpp",
-    "src/core/wrapper/js.cpp",
-    "targets/platform_adapter.cpp",
-  ]
-
-  public_deps = [
-    "//base/security/frameworks/crypto_lite/js/builtin:ace_kit_cipher",
-    "//foundation/graphic/lite/frameworks/surface:surface",
-    "//foundation/multimedia/frameworks/camera_lite:camera",
-    "//foundation/multimedia/frameworks/player_lite:player",
-    "//foundation/multimedia/interfaces/kits/player_lite/js/builtin:audio_api",
-    "//third_party/bounds_checking_function:libsec_shared",
-    "//third_party/cJSON:cjson_shared",
-    "//third_party/jerryscript/jerry-core:jerry-core_shared",
-    "//third_party/jerryscript/jerry-ext:jerry-ext_shared",
-    "//third_party/jerryscript/jerry-libm:jerry-libm_shared",
-    "//third_party/jerryscript/jerry-port/default:jerry-port-default_shared",
-    "//utils/native/lite/js/builtin:ace_utils_kits",
-    "//utils/native/lite/timer_task:ace_kit_timer",
-  ]
-
-  defines = []
-
-  if (ohos_build_type == "debug") {
-    defines += [ "JS_PROFILER=1" ]
-  } else {
-    defines += [ "JS_PROFILER=0" ]
-  }
-
-  if (LOSCFG_TEST_JS_BUILD) {
-    defines += [ "JSFWK_TEST" ]
-  }
-
-  if (enable_ohos_appexecfwk_feature_ability == true) {
-    defines += [ "ABILITY_WINDOW_SUPPORT" ]
-  }
-}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3c84c88
--- /dev/null
+++ b/README.md
@@ -0,0 +1,66 @@
+# JS Application Framework<a name="EN-US_TOPIC_0000001125689015"></a>
+
+-   [Introduction](#section11660541593)
+-   [Directory Structure](#section1464106163817)
+-   [Available APIs](#section1096322014288)
+-   [Usage](#section1529834174016)
+-   [Repositories Involved](#section11683135113011)
+
+## Introduction<a name="section11660541593"></a>
+
+The JS application framework is provided for you to develop OpenHarmony JavaScript applications. The following figure shows the framework architecture.
+
+**Figure  1**  Framework architecture<a name="fig11520531310"></a>
+
+![](figures/framework-architecture.png "framework-architecture")
+
+The JS application framework consists of the JavaScript data binding framework, JavaScript runtime, and JavaScript framework.
+
+-   **JavaScript data binding**
+
+    Provides a set of basic data binding capabilities through JavaScript.
+
+
+-   **JavaScript runtime**
+
+    Supports parsing and execution of JavaScript code.
+
+
+-   **JavaScript framework**
+
+    Provides the framework mechanism of JavaScript APIs and components through the C++ language.
+
+
+## Directory Structure<a name="section1464106163817"></a>
+
+The source code of the framework is stored in  **/foundation/ace/ace\_engine\_lite**. The directory structure is as follows:
+
+```
+/foundation/ace/ace_engine_lite
+├── frameworks      # Framework code
+│   ├── examples    # Sample code
+│   ├── include     # Header files
+│   ├── packages    # JavaScript implementation
+│   ├── src         # Source code
+│   ├── targets     # Configuration files of target devices
+│   └── tools       # Tool code
+├── interfaces      # APIs exposed externally
+│   └── innerkits   # Header files for internal subsystems
+│       └── builtin # JavaScript third-party module APIs exposed by the JS application framework
+└── test            # Test cases
+```
+
+## Available APIs<a name="section1096322014288"></a>
+
+For details about the APIs, see the  [JS Application Development](https://device.harmonyos.com/en/docs/apiref/js-framework-file-0000000000616658).
+
+## Usage<a name="section1529834174016"></a>
+
+For details, go to the  **readme**  repository:
+
+[https://gitee.com/openharmony/docs/blob/master/docs-en/readme/js-application-framework.md](https://gitee.com/openharmony/docs/blob/master/docs-en/readme/js-application-framework.md)
+
+## Repositories Involved<a name="section11683135113011"></a>
+
+ace\_engine\_lite
+
diff --git a/README_zh.md b/README_zh.md
new file mode 100644
index 0000000..49b6dc4
--- /dev/null
+++ b/README_zh.md
@@ -0,0 +1,65 @@
+# JS应用开发框架组件<a name="ZH-CN_TOPIC_0000001125689015"></a>
+
+-   [简介](#section11660541593)
+-   [目录](#section1464106163817)
+-   [接口](#section1096322014288)
+-   [使用](#section1529834174016)
+-   [相关仓](#section11683135113011)
+
+## 简介<a name="section11660541593"></a>
+
+**JS应用开发框架**，是OpenHarmony为开发者提供的一套开发OpenHarmony JS应用的开发框架。其组成如下所示：
+
+**图 1**  JS应用开发框架<a name="fig11520531310"></a>
+![](figures/JS应用开发框架.png "JS应用开发框架")
+
+JS应用开发框架包括JS数据绑定框架（JS Data binding）、JS运行时（JS runtime）和JS框架（JS framework）。
+
+-   **JS Data binding**
+
+    JS数据绑定框架使用JavaScript语言提供一套基础的数据绑定能力。
+
+
+-   **JS runtime**
+
+    JS运行时用以支持JS代码的解析和执行。
+
+
+-   **JS framework**
+
+    JS框架部分使用C++语言提供JS API和组件的框架机制。
+
+
+## 目录<a name="section1464106163817"></a>
+
+JS应用开发框架源代码在/foundation/ace/ace\_engine\_lite下，目录结构如下图所示：
+
+```
+/foundation/ace/ace_engine_lite
+├── frameworks      # 框架代码目录
+│   ├── examples    # 示例代码目录
+│   ├── include     # 头文件目录
+│   ├── packages    # 框架JS实现存放目录
+│   ├── src         # 源代码存放目录
+│   ├── targets     # 各目标设备配置文件存放目录
+│   └── tools       # 工具代码存放目录
+├── interfaces      # 对外接口存放目录
+│   └── innerkits   # 对内部子系统暴露的头文件存放目录
+│       └── builtin # JS应用框架对外暴露JS三方module API接口存放目录
+└── test            # 测试用例目录
+```
+
+## 接口<a name="section1096322014288"></a>
+
+API介绍请参考[《OpenHarmony Device开发API参考》](https://device.harmonyos.com/cn/docs/develop/apiref/js-framework-file-0000000000611396)
+
+## 使用<a name="section1529834174016"></a>
+
+详见：
+
+[https://gitee.com/openharmony/docs/blob/master/readme/JS应用开发框架README.md](https://gitee.com/openharmony/docs/blob/master/readme/JS应用开发框架README.md)
+
+## 相关仓<a name="section11683135113011"></a>
+
+ace\_engine\_lite
+
diff --git a/ace_lite.gni b/ace_lite.gni
new file mode 100755
index 0000000..680b94d
--- /dev/null
+++ b/ace_lite.gni
@@ -0,0 +1,191 @@
+#Copyright (c) 2020 Huawei Device 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("//build/lite/config/subsystem/aafwk/path.gni")
+
+ACE_LITE_PATH = "//foundation/ace/ace_engine_lite/frameworks"
+GRAPHIC_LITE_PATH = "//foundation/graphic/ui"
+
+ace_lite_include_dirs = [
+  "$GRAPHIC_LITE_PATH/interfaces/kits/config",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/animator",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/common",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/components",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/dfx",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/events",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/font",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/layout",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/themes",
+  "$GRAPHIC_LITE_PATH/interfaces/innerkits/common",
+  "//foundation/communication/ipc_lite/interfaces/kits",
+  "//utils/native/lite/include",
+  "${aafwk_lite_path}/interfaces/kits/ability_lite",
+  "${aafwk_lite_path}/interfaces/kits/want_lite",
+  "${aafwk_lite_path}/interfaces/innerkits/abilitymgr_lite",
+  "${appexecfwk_lite_path}/interfaces/kits/bundle_lite",
+  "${appexecfwk_lite_path}/utils/bundle_lite",
+]
+
+ace_lite_include_dirs += [
+  "//third_party/bounds_checking_function/include",
+  "//foundation/ace/ace_engine_lite/interfaces/innerkits/builtin/async",
+  "//foundation/ace/ace_engine_lite/interfaces/innerkits/builtin/base",
+  "//foundation/ace/ace_engine_lite/interfaces/innerkits/builtin/jsi",
+  "$ACE_LITE_PATH/include/context",
+  "$ACE_LITE_PATH/include/base",
+  "$ACE_LITE_PATH/include/modules",
+  "$ACE_LITE_PATH/include/resource",
+  "$ACE_LITE_PATH/src/core",
+  "$ACE_LITE_PATH/src/core/animation",
+  "$ACE_LITE_PATH/src/core/base",
+  "$ACE_LITE_PATH/src/core/base/cache",
+  "$ACE_LITE_PATH/src/core/components",
+  "$ACE_LITE_PATH/src/core/context",
+  "$ACE_LITE_PATH/src/core/directive",
+  "$ACE_LITE_PATH/src/core/router",
+  "$ACE_LITE_PATH/src/core/jsi",
+  "$ACE_LITE_PATH/src/core/modules",
+  "$ACE_LITE_PATH/src/core/router",
+  "$ACE_LITE_PATH/src/core/stylemgr",
+  "$ACE_LITE_PATH/src/core/wrapper",
+  "$ACE_LITE_PATH/targets",
+  "//kernel/liteos_a/kernel/include/",
+  "//kernel/liteos_a/kernel/common",
+  "//third_party/jerryscript/jerry-core/include",
+  "//third_party/jerryscript/jerry-ext/include/jerryscript-ext",
+  "///third_party/jerryscript/jerry-port/default/include",
+  "//third_party/cJSON",
+  "//utils/native/lite/timer_task/include/",
+  "//third_party/freetype/include",
+  "//base/global/resmgr_lite/interfaces/innerkits/include",
+  "//base/global/i18n_lite/interfaces/kits/i18n/include",
+]
+
+ace_lite_include_dirs_simulator = [
+  "$GRAPHIC_LITE_PATH/interfaces/kits/config",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/ui/animator",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/ui/common",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/ui/components",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/ui/dfx",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/ui/events",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/ui/font",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/ui/layout",
+  "$GRAPHIC_LITE_PATH/interfaces/kits/ui/themes",
+  "$GRAPHIC_LITE_PATH/interfaces/innerkits/ui/common",
+  "//foundation/communication/ipc_lite/interfaces/kits",
+  "//base/hiviewdfx/hilog_lite/interfaces/native/kits",
+  "${aafwk_lite_path}/frameworks/abilitymgr_lite/include",
+  "//foundation/communication/ipc_lite/liteipc/include",
+]
+
+ace_lite_sources = [
+  "$ACE_LITE_PATH/src/core/animation/transition_impl.cpp",
+  "$ACE_LITE_PATH/src/core/async/js_async_work.cpp",
+  "$ACE_LITE_PATH/src/core/async/message_queue_utils.cpp",
+  "$ACE_LITE_PATH/src/core/base/ace_log.cpp",
+  "$ACE_LITE_PATH/src/core/base/ace_mem_base.cpp",
+  "$ACE_LITE_PATH/src/core/base/async_task_manager.cpp",
+  "$ACE_LITE_PATH/src/core/base/cache/cache_manager.cpp",
+  "$ACE_LITE_PATH/src/core/base/dfx_assist.cpp",
+  "$ACE_LITE_PATH/src/core/base/event_util.cpp",
+  "$ACE_LITE_PATH/src/core/base/js_debugger_config.cpp",
+  "$ACE_LITE_PATH/src/core/base/js_fwk_common.cpp",
+  "$ACE_LITE_PATH/src/core/base/key_parser.cpp",
+  "$ACE_LITE_PATH/src/core/base/lazy_load_manager.cpp",
+  "$ACE_LITE_PATH/src/core/base/lazy_load_watcher.cpp",
+  "$ACE_LITE_PATH/src/core/base/locale_util.cpp",
+  "$ACE_LITE_PATH/src/core/base/mem_proc.cpp",
+  "$ACE_LITE_PATH/src/core/base/memory_heap.cpp",
+  "$ACE_LITE_PATH/src/core/base/number_parser.cpp",
+  "$ACE_LITE_PATH/src/core/base/product_adapter.cpp",
+  "$ACE_LITE_PATH/src/core/base/string_util.cpp",
+  "$ACE_LITE_PATH/src/core/base/time_util.cpp",
+  "$ACE_LITE_PATH/src/core/components/analog_clock_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/camera_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/canvas_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/chart_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/circle_progress_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/clock_hand_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/component.cpp",
+  "$ACE_LITE_PATH/src/core/components/component_utils.cpp",
+  "$ACE_LITE_PATH/src/core/components/div_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/event_listener.cpp",
+  "$ACE_LITE_PATH/src/core/components/horizon_progress_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/image_animator_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/image_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/input_button_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/input_checkbox_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/input_radio_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/list_adapter.cpp",
+  "$ACE_LITE_PATH/src/core/components/list_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/marquee_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/panel_view.cpp",
+  "$ACE_LITE_PATH/src/core/components/picker_view_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/qrcode_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/scroll_layer.cpp",
+  "$ACE_LITE_PATH/src/core/components/slider_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/stack_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/swiper_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/switch_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/tab_bar_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/tab_content_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/tabs_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/text_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/video_component.cpp",
+  "$ACE_LITE_PATH/src/core/components/video_view.cpp",
+  "$ACE_LITE_PATH/src/core/context/ace_ability.cpp",
+  "$ACE_LITE_PATH/src/core/context/ace_event_error_code.cpp",
+  "$ACE_LITE_PATH/src/core/context/fatal_handler.cpp",
+  "$ACE_LITE_PATH/src/core/context/js_ability.cpp",
+  "$ACE_LITE_PATH/src/core/context/js_ability_impl.cpp",
+  "$ACE_LITE_PATH/src/core/context/js_app_context.cpp",
+  "$ACE_LITE_PATH/src/core/context/js_app_environment.cpp",
+  "$ACE_LITE_PATH/src/core/context/js_framework_raw.cpp",
+  "$ACE_LITE_PATH/src/core/context/js_profiler.cpp",
+  "$ACE_LITE_PATH/src/core/context/js_timer_list.cpp",
+  "$ACE_LITE_PATH/src/core/dialog/js_dialog.cpp",
+  "$ACE_LITE_PATH/src/core/directive/descriptor_utils.cpp",
+  "$ACE_LITE_PATH/src/core/directive/directive_watcher_callback.cpp",
+  "$ACE_LITE_PATH/src/core/jsi/jsi.cpp",
+  "$ACE_LITE_PATH/src/core/modules/app_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/dfx_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/dialog_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/module_manager.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/cjson_parser.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/console_log_impl.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/console_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/date_time_format_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/intl_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/localization_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/number_format_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/preset_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/profiler_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/render_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/require_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/timer_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/presets/version_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/router_module.cpp",
+  "$ACE_LITE_PATH/src/core/modules/sample_module.cpp",
+  "$ACE_LITE_PATH/src/core/resource/video_muted_image_res.cpp",
+  "$ACE_LITE_PATH/src/core/resource/video_play_image_res.cpp",
+  "$ACE_LITE_PATH/src/core/router/js_page_state.cpp",
+  "$ACE_LITE_PATH/src/core/router/js_page_state_machine.cpp",
+  "$ACE_LITE_PATH/src/core/router/js_router.cpp",
+  "$ACE_LITE_PATH/src/core/stylemgr/app_style.cpp",
+  "$ACE_LITE_PATH/src/core/stylemgr/app_style_item.cpp",
+  "$ACE_LITE_PATH/src/core/stylemgr/app_style_list.cpp",
+  "$ACE_LITE_PATH/src/core/stylemgr/app_style_manager.cpp",
+  "$ACE_LITE_PATH/src/core/stylemgr/app_style_sheet.cpp",
+  "$ACE_LITE_PATH/src/core/wrapper/js.cpp",
+  "$ACE_LITE_PATH/targets/platform_adapter.cpp",
+]
diff --git a/examples/calculator/src/main/js/default/app.js b/examples/calculator/src/main/js/default/app.js
deleted file mode 100644
index 3184448..0000000
--- a/examples/calculator/src/main/js/default/app.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-    onCreate() {
-        console.info("Application onCreate");
-    },
-    onDestroy() {
-        console.info("Application onDestroy");
-    }
-};
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.hml
deleted file mode 100755
index a2676d9..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.hml
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device Co., Ltd.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<div style="width: 454; height: 454; left: 0; top: 0; flex-direction: column">
-  <stack style="width: 454; height: 80; margin-top: 80">
-    <input type="button" style="left: 85; width: 130; height: 60; top: 10" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60; top: 10" value="上一页" onclick="backSuperior" />
-  </stack>
-  <canvas
-    ref="canvas1"
-    show="{{ status }}"
-    style="margin-left: 130; width: 200; height: 150; background-color: #ffff00"
-  >
-  </canvas>
-  <div style="width: 454; height: 60; margin-left: 85">
-    <input type="button" style="width: 140; height: 60" value="fillRect" onclick="fillRectFunc" />
-    <input type="button" style="width: 140; height: 60" value="show" onclick="changeStatus" />
-  </div>
-  <text class="text" style="margin-left: 105">
-    {{ text1 }}
-  </text>
-</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.hml
deleted file mode 100755
index 6302adb..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.hml
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device Co., Ltd.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<div style="width: 454; height: 454; left: 0; top: 0; flex-direction: column">
-  <stack style="width: 454; height: 80; margin-top: 80">
-    <input type="button" style="left: 85; width: 130; height: 60; top: 10" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60; top: 10" value="上一页" onclick="backSuperior" />
-  </stack>
-  <canvas
-    ref="canvas1"
-    if="{{ ifStatus }}"
-    style="margin-left: 130; width: 200; height: 150; background-color: #ffff00"
-  >
-  </canvas>
-  <div style="width: 454; height: 60; margin-left: 85">
-    <input type="button" style="width: 140; height: 60" value="fillRect" onclick="fillRectFunc" />
-    <input type="button" style="width: 140; height: 60" value="if" onclick="changeIf" />
-  </div>
-  <text class="text" style="margin-left: 105">
-    {{ text1 }}
-  </text>
-</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.hml
deleted file mode 100755
index 4fdb0c7..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.hml
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device Co., Ltd.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<div style="width: 454; height: 454; left: 0; top: 0; flex-direction: column">
-  <stack style="width: 454; height: 80; margin-top: 80">
-    <input type="button" style="left: 85; width: 130; height: 60; top: 10" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60; top: 10" value="上一页" onclick="backSuperior" />
-  </stack>
-  <canvas
-    ref="canvas{{ $item }}"
-    for="{{ listData }}"
-    style="margin-left: 130; margin-top: 10; width: 200; height: 75; background-color: #ffff00"
-  >
-  </canvas>
-  <div style="width: 454; height: 60; margin-left: 160">
-    <input type="button" style="width: 140; height: 60" value="fillRect" onclick="fillRectFunc" />
-  </div>
-  <text class="text" style="margin-left: 105">
-    {{ text1 }}
-  </text>
-</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.hml
deleted file mode 100755
index 3d94e6c..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.hml
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device Co., Ltd.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<div style="height: 450; width: 450; border-width: 1; border-color: #ff0000; flex-direction: column">
-  <stack style="width: 454; height: 80; margin-top: 80; border-width: 1; border-color: #0000ff">
-    <input type="button" style="left: 85; width: 130; height: 60" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60" value="上一页" onclick="backSuperior" />
-  </stack>
-  <canvas ref="canvasObj" style="width: 280; height: 80; margin: 20; background-color: #ffff00"> </canvas>
-  <text class="text" style="margin-left: 40; width: 360">
-    {{ text1 }}
-  </text>
-  <text class="text" style="margin-left: 40; width: 360">
-    {{ text2 }}
-  </text>
-  <text class="text" style="margin-left: 40; width: 360">
-    {{ text3 }}
-  </text>
-</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.hml
deleted file mode 100755
index f5f7302..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.hml
+++ /dev/null
@@ -1,44 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device Co., Ltd.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<div style="height: 450; width: 450; flex-direction: column; border-width: 1; border-color: #ff0000">
-  <stack style="width: 454; height: 80; margin-top: 80; border-width: 1; border-color: #0000ff">
-    <input type="button" style="left: 85; width: 130; height: 60" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60" value="上一页" onclick="backSuperior" />
-  </stack>
-  <canvas
-    style="
-      width: 280;
-      height: 60;
-      margin-left: 40;
-      margin-top: 15;
-      margin-right: 10;
-      margin-bottom: 20;
-      background-color: #00ff00;
-      border-width: 1;
-      border-color: #ffa500;
-    "
-  >
-  </canvas>
-  <text class="text" style="margin-left: 40; width: 320">
-    {{ text1 }}
-  </text>
-  <text class="text" style="margin-left: 40; width: 320">
-    {{ text2 }}
-  </text>
-  <text class="text" style="margin-left: 40; width: 320">
-    {{ text3 }}
-  </text>
-</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.hml
deleted file mode 100755
index feb00db..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.hml
+++ /dev/null
@@ -1,37 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device Co., Ltd.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<div style="height: 454; width: 454; flex-direction: column">
-  <stack style="width: 454; height: 80; margin-top: 80; border-width: 1; border-color: #0000ff">
-    <input type="button" style="left: 85; width: 130; height: 60" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60" value="上一页" onclick="backSuperior" />
-  </stack>
-  <canvas
-    style="width:280;height:60;margin-left:85;background-color:#00ff00;border-width:1;border-color:#ffa500;display:{{
-      displayValue
-    }}"
-  >
-  </canvas>
-  <input type="button" style="width: 140; height: 60; margin-left: 160" value="display" onclick="changeDisplay" />
-  <text class="text" style="margin-left: 45; width: 330">
-    {{ text1 }}
-  </text>
-  <text class="text" style="margin-left: 45; width: 330">
-    {{ text2 }}
-  </text>
-  <text class="text" style="margin-left: 45; width: 330">
-    {{ text3 }}
-  </text>
-</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.hml
deleted file mode 100755
index 77db2c5..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.hml
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device 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.
--->
-
-<stack style="left: 0; right: 0; width: 454; height: 454">
-  <list style="left: 0; right: 0; width: 454; height: 454; flex-direction: column">
-    <list-item style="width: 454; height: 60"> </list-item>
-    <list-item style="width: 454; height: 80">
-      <input type="button" style="margin-left: 85; width: 130; height: 60" value="返回首页" onclick="backMain" />
-      <input type="button" style="margin-left: 20; width: 130; height: 60" value="返回上级" onclick="backSuperior" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item class="titleContainerStyle">
-      <text class="titleTextStyle"> canvas属性接口 </text>
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <canvas id="cvs1" ref="canvas1" style="margin-left: 45; width: 200; height: 150; background-color: #ffff00">
-      </canvas>
-      <input type="button" style="margin-left: 10; width: 180; height: 60" value="fillStyle" onclick="fillStyleFunc" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <canvas ref="canvas2" style="margin-left: 45; width: 200; height: 150; background-color: #ffff00"> </canvas>
-      <input
-        type="button"
-        style="margin-left: 10; width: 180; height: 60"
-        value="strokeStyle"
-        onclick="strokeStyleFunc"
-      />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <canvas ref="canvas3" style="margin-left: 45; width: 200; height: 150; background-color: #ffff00"> </canvas>
-      <input type="button" style="margin-left: 10; width: 180; height: 60" value="lineWidth" onclick="lineWidthFunc" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <canvas ref="canvas4" style="margin-left: 45; width: 200; height: 150; background-color: #ffff00"> </canvas>
-      <input type="button" style="margin-left: 10; width: 180; height: 60" value="font" onclick="fontFunc" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <canvas ref="canvas5" style="margin-left: 45; width: 200; height: 150; background-color: #ffff00"> </canvas>
-      <input type="button" style="margin-left: 10; width: 180; height: 60" value="textAlign" onclick="textAlignFunc" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <input type="button" style="margin-left: 10; width: 180; height: 60" value="jump" onclick="jumpFunc" />
-    </list-item>
-  </list>
-</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.hml
deleted file mode 100755
index 1abc77e..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.hml
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device 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.
--->
-
-<stack style="left: 0; right: 0; width: 454; height: 454">
-  <list style="left: 0; right: 0; width: 454; height: 454; flex-direction: column">
-    <list-item style="width: 454; height: 60"> </list-item>
-    <list-item style="width: 454; height: 80">
-      <input type="button" style="margin-left: 85; width: 130; height: 60" value="返回首页" onclick="backMain" />
-      <input type="button" style="margin-left: 20; width: 130; height: 60" value="返回上级" onclick="backSuperior" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item class="titleContainerStyle">
-      <text class="titleTextStyle"> canvas绘图接口 </text>
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <canvas ref="canvas1" style="margin-left: 45; width: 200; height: 150; background-color: #ffff00"> </canvas>
-      <input type="button" style="margin-left: 10; width: 180; height: 60" value="fillRect" onclick="fillRectFunc" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <canvas ref="canvas2" style="margin-left: 45; width: 200; height: 150; background-color: #ffff00"> </canvas>
-      <input
-        type="button"
-        style="margin-left: 10; width: 180; height: 60"
-        value="strokeRect"
-        onclick="strokeRectFunc"
-      />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <canvas ref="canvas3" style="margin-left: 45; width: 200; height: 150; background-color: #ffff00"> </canvas>
-      <input type="button" style="margin-left: 10; width: 180; height: 60" value="fillText" onclick="fillTextFunc" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <canvas ref="canvas4" style="margin-left: 45; width: 200; height: 150; background-color: #ffff00"> </canvas>
-      <input type="button" style="margin-left: 10; width: 180; height: 60" value="arc" onclick="arcFunc" />
-    </list-item>
-  </list>
-</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.hml
deleted file mode 100755
index 62f8bf3..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.hml
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device 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.
--->
-
-<stack style="left: 0; right: 0; width: 454; height: 454">
-  <list style="left: 0; right: 0; width: 454; height: 454; flex-direction: column">
-    <list-item style="width: 454; height: 60"> </list-item>
-    <list-item style="width: 454; height: 80">
-      <input type="button" style="margin-left: 85; width: 130; height: 60" value="返回首页" onclick="backMain" />
-      <input type="button" style="margin-left: 20; width: 130; height: 60" value="返回上级" onclick="backSuperior" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item class="titleContainerStyle">
-      <text class="titleTextStyle"> canvas通用属性 </text>
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 120">
-      <stack style="width: 200; height: 120; margin-left: 30">
-        <text style="width: 200; height: 40; top: 40"> show </text>
-      </stack>
-      <input type="button" style="width: 140; height: 60; margin-right: 30" value="点击进入" onclick="changePage1" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 120">
-      <stack style="width: 200; height: 120; margin-left: 30">
-        <text style="width: 200; height: 40; top: 40"> if </text>
-      </stack>
-      <input type="button" style="width: 140; height: 60; margin-right: 30" value="点击进入" onclick="changePage2" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 120">
-      <stack style="width: 200; height: 120; margin-left: 30">
-        <text style="width: 200; height: 40; top: 40"> for </text>
-      </stack>
-      <input type="button" style="width: 140; height: 60; margin-right: 30" value="点击进入" onclick="changePage3" />
-    </list-item>
-  </list>
-</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.hml
deleted file mode 100755
index cfec120..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.hml
+++ /dev/null
@@ -1,71 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device 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.
--->
-
-<stack style="left: 0; right: 0; width: 454; height: 454">
-  <list style="left: 0; right: 0; width: 454; height: 454; flex-direction: column">
-    <list-item style="width: 454; height: 60"> </list-item>
-    <list-item style="width: 454; height: 80">
-      <input type="button" style="margin-left: 85; width: 130; height: 60" value="返回首页" onclick="backMain" />
-      <input type="button" style="margin-left: 20; width: 130; height: 60" value="返回上级" onclick="backSuperior" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item class="titleContainerStyle">
-      <text class="titleTextStyle"> canvas通用样式 </text>
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 200">
-      <stack style="width: 200; height: 160; margin-left: 30">
-        <text style="width: 200; height: 40; top: 20"> 背景色 </text>
-        <text style="width: 200; height: 40; top: 60"> left </text>
-        <text style="width: 200; height: 40; top: 100"> top </text>
-      </stack>
-      <input type="button" style="width: 140; height: 60; margin-right: 30" value="点击进入" onclick="changePage1" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 200">
-      <stack style="width: 200; height: 160; margin-left: 30">
-        <text style="width: 200; height: 40; top: 20"> margin </text>
-        <text style="width: 200; height: 40; top: 60"> height </text>
-        <text style="width: 200; height: 40; top: 100"> width </text>
-      </stack>
-      <input type="button" style="width: 140; height: 60; margin-right: 30" value="点击进入" onclick="changePage2" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 200">
-      <stack style="width: 200; height: 160; margin-left: 30">
-        <text style="width: 200; height: 40; top: 40"> border </text>
-        <text style="width: 200; height: 40; top: 80"> padding </text>
-      </stack>
-      <input type="button" style="width: 140; height: 60; margin-right: 30" value="点击进入" onclick="changePage3" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 200">
-      <stack style="width: 260; height: 160; margin-left: 30">
-        <text style="width: 260; height: 40; top: 0"> margin-left </text>
-        <text style="width: 260; height: 40; top: 40"> margin-top </text>
-        <text style="width: 260; height: 40; top: 80"> margin-right </text>
-        <text style="width: 260; height: 40; top: 120"> margin-bottom </text>
-      </stack>
-      <input type="button" style="width: 140; height: 60; margin-right: 30" value="点击进入" onclick="changePage4" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 200">
-      <stack style="width: 200; height: 160; margin-left: 30">
-        <text style="width: 200; height: 40; top: 80"> display </text>
-      </stack>
-      <input type="button" style="width: 140; height: 60; margin-right: 30" value="点击进入" onclick="changePage5" />
-    </list-item>
-  </list>
-</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.hml b/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.hml
deleted file mode 100755
index b760f48..0000000
--- a/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.hml
+++ /dev/null
@@ -1,37 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device 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.
--->
-
-<stack style="left: 0; right: 0; width: 454; height: 454">
-  <list style="left: 0; right: 0; width: 454; height: 454; flex-direction: column">
-    <list-item style="width: 454; height: 60"> </list-item>
-    <list-item style="width: 454; height: 80">
-      <input type="button" style="margin-left: 85; width: 130; height: 60" value="返回首页" onclick="backMain" />
-      <input type="button" style="margin-left: 20; width: 130; height: 60" value="返回上级" onclick="backSuperior" />
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item class="titleContainerStyle">
-      <text class="titleTextStyle"> canvas通用事件 </text>
-    </list-item>
-    <list-item class="separatorContainerStyle"> </list-item>
-    <list-item style="width: 454; height: 170">
-      <stack style="width: 200; height: 160; margin-left: 30">
-        <text style="width: 200; height: 40; top: 40"> click </text>
-        <text style="width: 200; height: 40; top: 80"> longpress </text>
-        <text style="width: 200; height: 40; top: 120"> swipe </text>
-      </stack>
-      <input type="button" style="width: 140; height: 60; margin-right: 30" value="点击进入" onclick="changePage1" />
-    </list-item>
-  </list>
-</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.hml b/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.hml
deleted file mode 100755
index bee344f..0000000
--- a/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.hml
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device Co., Ltd.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<div style="width: 454; height: 454; left: 0; top: 0; flex-direction: column">
-  <stack style="width: 454; height: 80; margin-top: 80">
-    <input type="button" style="left: 85; width: 130; height: 60; top: 10" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60; top: 10" value="上一页" onclick="backSuperior" />
-  </stack>
-  <list
-    id="list1"
-    ref="listObj"
-    style="width: 280; height: 200; margin-left: 85; flex-direction: column; border-width: 1; border-color: #ff0000"
-    onclick="listClick"
-    onscrollend="scrollEnd"
-  >
-    <list-item style="width: 280; height: 50" for="{{ listData }}">
-      <text style="width: 280; height: 50"> item-{{ $idx }} </text>
-    </list-item>
-  </list>
-  <input type="button" style="width: 130; height: 40; margin-left: 170" value="scrollTo" onclick="clickscrollTo" />
-  <text class="text" style="margin-left: 45"> 点击button回到item-2 </text>
-</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.hml b/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.hml
deleted file mode 100755
index 81ddffa..0000000
--- a/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.hml
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--
-Copyright (c) 2020 Huawei Device 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.
--->
-
-<stack class="stack" >
-    <stack style="width:454px;height:80px;top:80px;">
-      <input type="button" style="left:85px;width:130px;height:60px;top:10px;" value="首页" onclick=backMain/>
-      <input type="button" style="left:235px;width:130px;height:60px;top:10px;" value="上一页" onclick=backSuperior/>
-    </stack>
-    <stack style="width:280px;height:60px;top:170px;left:85px;background-color:#00ff00;">
-      <text style="width:280px;height:50px;font-size:30px;">
-        stack已设置样式
-      </text>
-    </stack>
-    <text class="text" style="left:105px;width:280px;top:260px;">
-      {{text1}}
-    </text>
-    <text class="text" style="left:105px;width:280px;top:300px;">
-      {{text2}}
-    </text>
-    <text class="text" style="left:105px;width:280px;top:340px;">
-      {{text3}}
-    </text>
-</stack>
diff --git a/figures/JS应用开发框架.png b/figures/JS应用开发框架.png
new file mode 100644
index 0000000..f9984dd
Binary files /dev/null and b/figures/JS应用开发框架.png differ
diff --git a/figures/framework-architecture.png b/figures/framework-architecture.png
new file mode 100644
index 0000000..3230a1b
Binary files /dev/null and b/figures/framework-architecture.png differ
diff --git a/frameworks/BUILD.gn b/frameworks/BUILD.gn
new file mode 100755
index 0000000..babc045
--- /dev/null
+++ b/frameworks/BUILD.gn
@@ -0,0 +1,87 @@
+#Copyright (c) 2020-2021 Huawei Device 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("//build/lite/config/component/lite_component.gni")
+import("//build/lite/config/subsystem/aafwk/config.gni")
+import("//foundation/ace/ace_engine_lite/ace_lite.gni")
+
+declare_args() {
+  LOSCFG_TEST_JS_BUILD = false
+}
+
+lite_component("jsfwk") {
+  features = [ ":ace_lite" ]
+}
+
+config("ace_lite_config") {
+  include_dirs = ace_lite_include_dirs
+  if (ohos_kernel_type == "liteos_a" || ohos_kernel_type == "liteos_m") {
+    include_dirs += [ "targets/liteos_a" ]
+  } else if (ohos_kernel_type == "linux") {
+    include_dirs += [ "targets/linux" ]
+  }
+  cflags_cc = [ "-std=c++14" ]
+  ldflags = [ "-lstdc++" ]
+  ldflags += [ "-lpthread" ]
+  ldflags += [ "-Wl,-rpath-link=$ohos_root_path/$root_out_dir" ]
+}
+
+shared_library("ace_lite") {
+  configs -= [ "//build/lite/config:language_cpp" ]
+  cflags = [
+    "-Wall",
+    "-Wno-format",
+    "-Wno-format-extra-args",
+  ]
+  cflags_cc = cflags
+  configs += [ ":ace_lite_config" ]
+  public_configs = configs
+
+  sources = ace_lite_sources
+
+  public_deps = [
+    "${appexecfwk_lite_path}/interfaces/kits/bundle_lite/js/builtin:capability_api",
+    "//base/global/i18n_lite/frameworks/i18n:global_i18n",
+    "//base/global/resmgr_lite/frameworks/resmgr_lite:global_resmgr",
+    "//base/security/huks/frameworks/crypto_lite/js/builtin:ace_kit_cipher",
+    "//build/lite/config/component/cJSON:cjson_shared",
+    "//foundation/graphic/surface:lite_surface",
+    "//foundation/graphic/ui:lite_ui",
+    "//foundation/multimedia/camera_lite/frameworks:camera_lite",
+    "//foundation/multimedia/media_lite/frameworks/player_lite:player_lite",
+    "//foundation/multimedia/media_lite/interfaces/kits/player_lite/js/builtin:audio_lite_api",
+    "//third_party/bounds_checking_function:libsec_shared",
+    "//third_party/jerryscript/jerry-core:jerry-core_shared",
+    "//third_party/jerryscript/jerry-ext:jerry-ext_shared",
+    "//third_party/jerryscript/jerry-libm:jerry-libm_shared",
+    "//third_party/jerryscript/jerry-port/default:jerry-port-default_shared",
+    "//utils/native/lite/js/builtin:ace_utils_kits",
+    "//utils/native/lite/timer_task:ace_kit_timer",
+  ]
+
+  defines = []
+
+  if (ohos_build_type == "debug") {
+    defines += [ "JS_PROFILER=1" ]
+  } else {
+    defines += [ "JS_PROFILER=0" ]
+  }
+
+  if (LOSCFG_TEST_JS_BUILD) {
+    defines += [ "JSFWK_TEST" ]
+  }
+
+  if (enable_ohos_appexecfwk_feature_ability == true) {
+    defines += [ "ABILITY_WINDOW_SUPPORT" ]
+  }
+}
diff --git a/CMakeLists.txt b/frameworks/CMakeLists.txt
similarity index 90%
rename from CMakeLists.txt
rename to frameworks/CMakeLists.txt
index ada23aa..69ac460 100755
--- a/CMakeLists.txt
+++ b/frameworks/CMakeLists.txt
@@ -1,4 +1,4 @@
-# Copyright (c) 2020 Huawei Device Co., Ltd.
+# Copyright (c) 2020-2021 Huawei Device 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
@@ -23,19 +23,19 @@ set(CMAKE_INCLUDE_CURRENT_DIR ON)
 add_compile_options(-fpermissive -Wno-narrowing)
 
 set(ACE_LITE_CONFIG_PATH "${CMAKE_CURRENT_SOURCE_DIR}/targets/simulator")
-set(ACE_LITE_INNERKITS_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../interfaces/innerkits/builtin")
+set(ACE_LITE_INNERKITS_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../interfaces/innerkits/builtin")
 set(JSFWK_INCLUDE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/include")
-set(JSFWK_INNERKITS_BUILTIN_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../../foundation/ace/interfaces/innerkits/builtin")
+set(JSFWK_INNERKITS_BUILTIN_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../../foundation/ace/ace_engine_lite/interfaces/innerkits/builtin")
 set(JSFWK_SOURCE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/src/core")
-set(UIKIT_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../../foundation/graphic/lite")
+set(UIKIT_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../../foundation/graphic/ui")
 set(THIRTY_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../../third_party")
 set(JSFWK_SIMULATOR_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../../tools/developer_tools_lite/graphic_tool/simulator")
-set(AAFWK_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../aafwk")
+set(AAFWK_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../aafwk/aafwk_lite")
 set(UTILS_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../../utils/native/lite")
 
 # add definitions
 # temporarily set, when ui and graphic unifid, this can be removed
-add_definitions(-DSCREENRESOLUTION_CMAKE)
+add_definitions(-DSCREENSIZE_SPECIFIED)
 
 # setup jerryscript
 include(${CMAKE_ROOT}/Modules/ExternalProject.cmake)
@@ -66,6 +66,7 @@ include_directories(
     ${JSFWK_SOURCE_PATH}
     ${JSFWK_SOURCE_PATH}/animation
     ${JSFWK_SOURCE_PATH}/base
+    ${JSFWK_SOURCE_PATH}/base/cache
     ${JSFWK_SOURCE_PATH}/components
     ${JSFWK_SOURCE_PATH}/context
     ${JSFWK_SOURCE_PATH}/directive
@@ -92,6 +93,7 @@ include_directories(
 # source files
 aux_source_directory(${JSFWK_SOURCE_PATH}/animation ANIMATION)
 aux_source_directory(${JSFWK_SOURCE_PATH}/base BASE)
+aux_source_directory(${JSFWK_SOURCE_PATH}/base/cache CACHE)
 aux_source_directory(${JSFWK_SOURCE_PATH}/components COMPONENTS)
 aux_source_directory(${JSFWK_SOURCE_PATH}/context CONTEXT)
 aux_source_directory(${JSFWK_SOURCE_PATH}/directive DIRECTIVE)
@@ -102,8 +104,8 @@ aux_source_directory(${JSFWK_SOURCE_PATH}/router ROUTER)
 aux_source_directory(${JSFWK_SOURCE_PATH}/stylemgr STYLEMGR)
 aux_source_directory(${JSFWK_SOURCE_PATH}/wrapper WRAPPER)
 aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/targets TARGETS)
-aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/test TEST)
-aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/test/unittest UNITTEST)
+#aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/test TEST)
+#aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/test/unittest UNITTEST)
 
 list(REMOVE_ITEM CONTEXT "${JSFWK_SOURCE_PATH}/context/ace_ability.cpp")
 list(REMOVE_ITEM MODULES_PRESETS "${JSFWK_SOURCE_PATH}/modules/presets/jstest_module.cpp")
@@ -115,6 +117,7 @@ list(REMOVE_ITEM UNITTEST
 add_library(jsfwk STATIC
     ${ANIMATION}
     ${BASE}
+    ${CACHE}
     ${COMPONENTS}
     ${CONTEXT}
     ${DIRECTIVE}
@@ -124,7 +127,7 @@ add_library(jsfwk STATIC
     ${ROUTER}
     ${STYLEMGR}
     ${WRAPPER}
-    ${TEST}
+    #${TEST}
     ${TARGETS}
     )
 target_include_directories(jsfwk PUBLIC
@@ -142,7 +145,7 @@ target_link_directories(jsfwk PUBLIC ${CMAKE_CURRENT_BINARY_DIR}/jerryscript/lib
 if(UNIX)
     target_link_libraries(jsfwk global_resmgr ui jerry-port-default jerry-ext jerry-core)
 else()
-    target_link_libraries(jsfwk global_resmgr ui -Wl,--whole-archive jerry-port-default jerry-ext jerry-core -Wl,--no-whole-archive)
+    target_link_libraries(jsfwk global_resmgr ui -Wl,--whole-archive jerry-port-default jerry-ext jerry-core -Wl,--no-whole-archive psapi)
 endif()
 
 if (${JERRY_EXTERNAL_CONTEXT} STREQUAL ON)
diff --git a/examples/airquality/src/main/config.json b/frameworks/examples/airquality/src/main/config.json
old mode 100755
new mode 100644
similarity index 97%
rename from examples/airquality/src/main/config.json
rename to frameworks/examples/airquality/src/main/config.json
index d78468c..e6a6e19
--- a/examples/airquality/src/main/config.json
+++ b/frameworks/examples/airquality/src/main/config.json
@@ -17,7 +17,6 @@
     },
     "module": {
         "deviceType": [
-            "liteWearable",
             "smartVision"
         ],
         "distro": {
diff --git a/examples/airquality/src/main/js/default/app.js b/frameworks/examples/airquality/src/main/js/default/app.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/app.js
rename to frameworks/examples/airquality/src/main/js/default/app.js
diff --git a/examples/airquality/src/main/js/default/common/cloud.png b/frameworks/examples/airquality/src/main/js/default/common/cloud.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/common/cloud.png
rename to frameworks/examples/airquality/src/main/js/default/common/cloud.png
diff --git a/examples/airquality/src/main/js/default/common/cloud_green.png b/frameworks/examples/airquality/src/main/js/default/common/cloud_green.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/common/cloud_green.png
rename to frameworks/examples/airquality/src/main/js/default/common/cloud_green.png
diff --git a/examples/airquality/src/main/js/default/common/cloud_red.png b/frameworks/examples/airquality/src/main/js/default/common/cloud_red.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/common/cloud_red.png
rename to frameworks/examples/airquality/src/main/js/default/common/cloud_red.png
diff --git a/examples/airquality/src/main/js/default/common/cloud_yellow.png b/frameworks/examples/airquality/src/main/js/default/common/cloud_yellow.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/common/cloud_yellow.png
rename to frameworks/examples/airquality/src/main/js/default/common/cloud_yellow.png
diff --git a/examples/airquality/src/main/js/default/common/week.png b/frameworks/examples/airquality/src/main/js/default/common/week.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/common/week.png
rename to frameworks/examples/airquality/src/main/js/default/common/week.png
diff --git a/examples/airquality/src/main/js/default/i18n/en-US.json b/frameworks/examples/airquality/src/main/js/default/i18n/en-US.json
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/i18n/en-US.json
rename to frameworks/examples/airquality/src/main/js/default/i18n/en-US.json
diff --git a/examples/airquality/src/main/js/default/i18n/zh-CN.json b/frameworks/examples/airquality/src/main/js/default/i18n/zh-CN.json
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/i18n/zh-CN.json
rename to frameworks/examples/airquality/src/main/js/default/i18n/zh-CN.json
diff --git a/examples/airquality/src/main/js/default/pages/detail/detail.css b/frameworks/examples/airquality/src/main/js/default/pages/detail/detail.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/pages/detail/detail.css
rename to frameworks/examples/airquality/src/main/js/default/pages/detail/detail.css
diff --git a/examples/airquality/src/main/js/default/pages/detail/detail.hml b/frameworks/examples/airquality/src/main/js/default/pages/detail/detail.hml
old mode 100755
new mode 100644
similarity index 96%
rename from examples/airquality/src/main/js/default/pages/detail/detail.hml
rename to frameworks/examples/airquality/src/main/js/default/pages/detail/detail.hml
index 8117ceb..e8e268f
--- a/examples/airquality/src/main/js/default/pages/detail/detail.hml
+++ b/frameworks/examples/airquality/src/main/js/default/pages/detail/detail.hml
@@ -47,7 +47,7 @@
     <div
       style="width: 321px; height: 220px; background-color: #000000; flex-direction: column; align-items: flex-start"
     >
-      <text class="config-info">{{ updated }}:{{ udpateStatus }}</text>
+      <text class="config-info">{{ updated }}:{{ updateStatus }}</text>
       <text class="config-info">{{ dataSourceName }}:{{ dataSource }}</text>
       <div class="line-div"></div>
       <div style="width: 321px; height: 55px; align-items: center; margin-top: 20px">
@@ -55,7 +55,7 @@
           type="button"
           value="History"
           style="border-width: 3px; margin-left: 10px; border-color: #90ee90; width: 146px; height: 50px"
-          onclick="openHistroy"
+          onclick="openHistory"
         />
         <input
           type="button"
diff --git a/examples/airquality/src/main/js/default/pages/detail/detail.js b/frameworks/examples/airquality/src/main/js/default/pages/detail/detail.js
old mode 100755
new mode 100644
similarity index 96%
rename from examples/airquality/src/main/js/default/pages/detail/detail.js
rename to frameworks/examples/airquality/src/main/js/default/pages/detail/detail.js
index dde38e2..077193c
--- a/examples/airquality/src/main/js/default/pages/detail/detail.js
+++ b/frameworks/examples/airquality/src/main/js/default/pages/detail/detail.js
@@ -17,7 +17,7 @@ import router from "@system.router";
 export default {
   data: {
     location: "HangZhou",
-    udpateStatus: "15:13",
+    updateStatus: "15:13",
     dataSource: "tianqi.com",
     updated: "Updated",
     dataSourceName: "Data Source",
@@ -32,7 +32,7 @@ export default {
     this.monitoringStation = this.$t("monitoringStation");
     this.selectedIndex = this.selectedCityIndex;
   },
-  openHistroy() {
+  openHistory() {
     router.replace({
       uri: "pages/history/history"
     });
diff --git a/examples/airquality/src/main/js/default/pages/history/history.css b/frameworks/examples/airquality/src/main/js/default/pages/history/history.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/pages/history/history.css
rename to frameworks/examples/airquality/src/main/js/default/pages/history/history.css
diff --git a/examples/airquality/src/main/js/default/pages/history/history.hml b/frameworks/examples/airquality/src/main/js/default/pages/history/history.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/pages/history/history.hml
rename to frameworks/examples/airquality/src/main/js/default/pages/history/history.hml
diff --git a/examples/airquality/src/main/js/default/pages/history/history.js b/frameworks/examples/airquality/src/main/js/default/pages/history/history.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/pages/history/history.js
rename to frameworks/examples/airquality/src/main/js/default/pages/history/history.js
diff --git a/examples/airquality/src/main/js/default/pages/index/index.css b/frameworks/examples/airquality/src/main/js/default/pages/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/pages/index/index.css
rename to frameworks/examples/airquality/src/main/js/default/pages/index/index.css
diff --git a/examples/airquality/src/main/js/default/pages/index/index.hml b/frameworks/examples/airquality/src/main/js/default/pages/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/pages/index/index.hml
rename to frameworks/examples/airquality/src/main/js/default/pages/index/index.hml
diff --git a/examples/airquality/src/main/js/default/pages/index/index.js b/frameworks/examples/airquality/src/main/js/default/pages/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/airquality/src/main/js/default/pages/index/index.js
rename to frameworks/examples/airquality/src/main/js/default/pages/index/index.js
diff --git a/examples/alarm/src/main/config.json b/frameworks/examples/alarm/src/main/config.json
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/config.json
rename to frameworks/examples/alarm/src/main/config.json
diff --git a/examples/alarm/src/main/js/default/app.js b/frameworks/examples/alarm/src/main/js/default/app.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/app.js
rename to frameworks/examples/alarm/src/main/js/default/app.js
diff --git a/examples/alarm/src/main/js/default/common/A016_017.png b/frameworks/examples/alarm/src/main/js/default/common/A016_017.png
similarity index 100%
rename from examples/alarm/src/main/js/default/common/A016_017.png
rename to frameworks/examples/alarm/src/main/js/default/common/A016_017.png
diff --git a/examples/alarm/src/main/js/default/common/A016_018.png b/frameworks/examples/alarm/src/main/js/default/common/A016_018.png
similarity index 100%
rename from examples/alarm/src/main/js/default/common/A016_018.png
rename to frameworks/examples/alarm/src/main/js/default/common/A016_018.png
diff --git a/examples/alarm/src/main/js/default/common/A016_019.png b/frameworks/examples/alarm/src/main/js/default/common/A016_019.png
similarity index 100%
rename from examples/alarm/src/main/js/default/common/A016_019.png
rename to frameworks/examples/alarm/src/main/js/default/common/A016_019.png
diff --git a/examples/alarm/src/main/js/default/common/A016_020.png b/frameworks/examples/alarm/src/main/js/default/common/A016_020.png
similarity index 100%
rename from examples/alarm/src/main/js/default/common/A016_020.png
rename to frameworks/examples/alarm/src/main/js/default/common/A016_020.png
diff --git a/examples/alarm/src/main/js/default/common/A016_021.png b/frameworks/examples/alarm/src/main/js/default/common/A016_021.png
similarity index 100%
rename from examples/alarm/src/main/js/default/common/A016_021.png
rename to frameworks/examples/alarm/src/main/js/default/common/A016_021.png
diff --git a/examples/alarm/src/main/js/default/common/add_alarm.png b/frameworks/examples/alarm/src/main/js/default/common/add_alarm.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/common/add_alarm.png
rename to frameworks/examples/alarm/src/main/js/default/common/add_alarm.png
diff --git a/examples/alarm/src/main/js/default/common/alarmClock.png b/frameworks/examples/alarm/src/main/js/default/common/alarmClock.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/common/alarmClock.png
rename to frameworks/examples/alarm/src/main/js/default/common/alarmClock.png
diff --git a/examples/alarm/src/main/js/default/common/back.png b/frameworks/examples/alarm/src/main/js/default/common/back.png
similarity index 100%
rename from examples/alarm/src/main/js/default/common/back.png
rename to frameworks/examples/alarm/src/main/js/default/common/back.png
diff --git a/examples/alarm/src/main/js/default/common/cancel.png b/frameworks/examples/alarm/src/main/js/default/common/cancel.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/common/cancel.png
rename to frameworks/examples/alarm/src/main/js/default/common/cancel.png
diff --git a/examples/alarm/src/main/js/default/common/ic_clock_btn_off.png b/frameworks/examples/alarm/src/main/js/default/common/ic_clock_btn_off.png
similarity index 100%
rename from examples/alarm/src/main/js/default/common/ic_clock_btn_off.png
rename to frameworks/examples/alarm/src/main/js/default/common/ic_clock_btn_off.png
diff --git a/examples/alarm/src/main/js/default/common/ic_clock_btn_on.png b/frameworks/examples/alarm/src/main/js/default/common/ic_clock_btn_on.png
similarity index 100%
rename from examples/alarm/src/main/js/default/common/ic_clock_btn_on.png
rename to frameworks/examples/alarm/src/main/js/default/common/ic_clock_btn_on.png
diff --git a/examples/alarm/src/main/js/default/common/jiantou.png b/frameworks/examples/alarm/src/main/js/default/common/jiantou.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/common/jiantou.png
rename to frameworks/examples/alarm/src/main/js/default/common/jiantou.png
diff --git a/examples/alarm/src/main/js/default/common/postpone.png b/frameworks/examples/alarm/src/main/js/default/common/postpone.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/common/postpone.png
rename to frameworks/examples/alarm/src/main/js/default/common/postpone.png
diff --git a/examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.css b/frameworks/examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.css
rename to frameworks/examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.css
diff --git a/examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.hml b/frameworks/examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.hml
rename to frameworks/examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.hml
diff --git a/examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.js b/frameworks/examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.js
rename to frameworks/examples/alarm/src/main/js/default/pages/editAlarm/edit_alarm.js
diff --git a/examples/alarm/src/main/js/default/pages/index/index.css b/frameworks/examples/alarm/src/main/js/default/pages/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/pages/index/index.css
rename to frameworks/examples/alarm/src/main/js/default/pages/index/index.css
diff --git a/examples/alarm/src/main/js/default/pages/index/index.hml b/frameworks/examples/alarm/src/main/js/default/pages/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/pages/index/index.hml
rename to frameworks/examples/alarm/src/main/js/default/pages/index/index.hml
diff --git a/examples/alarm/src/main/js/default/pages/index/index.js b/frameworks/examples/alarm/src/main/js/default/pages/index/index.js
old mode 100755
new mode 100644
similarity index 95%
rename from examples/alarm/src/main/js/default/pages/index/index.js
rename to frameworks/examples/alarm/src/main/js/default/pages/index/index.js
index 7be7c35..4c41989
--- a/examples/alarm/src/main/js/default/pages/index/index.js
+++ b/frameworks/examples/alarm/src/main/js/default/pages/index/index.js
@@ -57,11 +57,11 @@ export default {
         console.log("[mainPage init] mode: " + this.dataWrapper.alarmItemIndex);
       }
 
-      this.unPackOriginData(); // apply origin data to current enviroment
+      this.unPackOriginData(); // apply origin data to current environment
 
       var modeDeleteAlarmIndex = 3;
       if (this.dataWrapper.mode === this.mode[0] && typeof (this.cancelAlarm) == "undefined") { // add alarm
-        this.time.push(this.transforTimeToTwelvehour(this.dataWrapper.time));
+        this.time.push(this.transformTimeToTwelveHour(this.dataWrapper.time));
         this.repeat.push(this.dataWrapper.repeat);
         this.switchStatus.push(false);
       } else if (this.dataWrapper.mode === this.mode[1]) { // edit alarm
@@ -70,7 +70,7 @@ export default {
           this.repeat.splice(this.dataWrapper.alarmItemIndex, 1);
           this.switchStatus.splice(this.dataWrapper.alarmItemIndex, 1);
         } else {
-          this.time[this.dataWrapper.alarmItemIndex] = this.transforTimeToTwelvehour(this.dataWrapper.time);
+          this.time[this.dataWrapper.alarmItemIndex] = this.transformTimeToTwelveHour(this.dataWrapper.time);
           this.repeat[this.dataWrapper.alarmItemIndex] = this.dataWrapper.repeat;
           this.switchStatus[this.dataWrapper.alarmItemIndex] = true;
         }
@@ -79,10 +79,10 @@ export default {
         this.switchStatus[this.dataWrapper.alarmItemIndex] = switchValue;
       }
 
-      this.packOriginData(); // wrap current enviroment data as origin data
+      this.packOriginData(); // wrap current environment data as origin data
     }
   },
-  transforTimeToTwelvehour(time) {
+  transformTimeToTwelveHour(time) {
     var timeArray = time.split(" ")[0].split(":");
     var hour = timeArray[0];
     var minute = timeArray[1];
diff --git a/examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.css b/frameworks/examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.css
rename to frameworks/examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.css
diff --git a/examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.hml b/frameworks/examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.hml
rename to frameworks/examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.hml
diff --git a/examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.js b/frameworks/examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.js
rename to frameworks/examples/alarm/src/main/js/default/pages/timeArrive/time_arrive.js
diff --git a/examples/alarm/src/main/resources/base/media/icon.png b/frameworks/examples/alarm/src/main/resources/base/media/icon.png
similarity index 100%
rename from examples/alarm/src/main/resources/base/media/icon.png
rename to frameworks/examples/alarm/src/main/resources/base/media/icon.png
diff --git a/examples/alarm/src/main/resources/base/media/icon_small.png b/frameworks/examples/alarm/src/main/resources/base/media/icon_small.png
similarity index 100%
rename from examples/alarm/src/main/resources/base/media/icon_small.png
rename to frameworks/examples/alarm/src/main/resources/base/media/icon_small.png
diff --git a/frameworks/examples/calculator/src/main/js/default/app.js b/frameworks/examples/calculator/src/main/js/default/app.js
new file mode 100644
index 0000000..7524814
--- /dev/null
+++ b/frameworks/examples/calculator/src/main/js/default/app.js
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 Huawei Device 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 {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+};
diff --git a/examples/calculator/src/main/js/default/common/calculator.js b/frameworks/examples/calculator/src/main/js/default/common/calculator.js
similarity index 83%
rename from examples/calculator/src/main/js/default/common/calculator.js
rename to frameworks/examples/calculator/src/main/js/default/common/calculator.js
index 4211565..7d5b85b 100644
--- a/examples/calculator/src/main/js/default/common/calculator.js
+++ b/frameworks/examples/calculator/src/main/js/default/common/calculator.js
@@ -1,3 +1,17 @@
+/*
+ * Copyright (c) 2020 Huawei Device 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.
+ */
 const OperatorLevels = {
     "+": 0,
     "-": 0,
diff --git a/examples/calculator/src/main/js/default/common/ic_back.png b/frameworks/examples/calculator/src/main/js/default/common/ic_back.png
similarity index 100%
rename from examples/calculator/src/main/js/default/common/ic_back.png
rename to frameworks/examples/calculator/src/main/js/default/common/ic_back.png
diff --git a/examples/calculator/src/main/js/default/common/ic_cal_delete.png b/frameworks/examples/calculator/src/main/js/default/common/ic_cal_delete.png
similarity index 100%
rename from examples/calculator/src/main/js/default/common/ic_cal_delete.png
rename to frameworks/examples/calculator/src/main/js/default/common/ic_cal_delete.png
diff --git a/examples/calculator/src/main/js/default/common/ic_cal_devide.png b/frameworks/examples/calculator/src/main/js/default/common/ic_cal_devide.png
similarity index 100%
rename from examples/calculator/src/main/js/default/common/ic_cal_devide.png
rename to frameworks/examples/calculator/src/main/js/default/common/ic_cal_devide.png
diff --git a/examples/calculator/src/main/js/default/common/ic_cal_equal.png b/frameworks/examples/calculator/src/main/js/default/common/ic_cal_equal.png
similarity index 100%
rename from examples/calculator/src/main/js/default/common/ic_cal_equal.png
rename to frameworks/examples/calculator/src/main/js/default/common/ic_cal_equal.png
diff --git a/examples/calculator/src/main/js/default/common/ic_cal_minus.png b/frameworks/examples/calculator/src/main/js/default/common/ic_cal_minus.png
similarity index 100%
rename from examples/calculator/src/main/js/default/common/ic_cal_minus.png
rename to frameworks/examples/calculator/src/main/js/default/common/ic_cal_minus.png
diff --git a/examples/calculator/src/main/js/default/common/ic_cal_multiply.png b/frameworks/examples/calculator/src/main/js/default/common/ic_cal_multiply.png
similarity index 100%
rename from examples/calculator/src/main/js/default/common/ic_cal_multiply.png
rename to frameworks/examples/calculator/src/main/js/default/common/ic_cal_multiply.png
diff --git a/examples/calculator/src/main/js/default/common/ic_cal_plus.png b/frameworks/examples/calculator/src/main/js/default/common/ic_cal_plus.png
similarity index 100%
rename from examples/calculator/src/main/js/default/common/ic_cal_plus.png
rename to frameworks/examples/calculator/src/main/js/default/common/ic_cal_plus.png
diff --git a/examples/calculator/src/main/js/default/pages/index/index.css b/frameworks/examples/calculator/src/main/js/default/pages/index/index.css
similarity index 68%
rename from examples/calculator/src/main/js/default/pages/index/index.css
rename to frameworks/examples/calculator/src/main/js/default/pages/index/index.css
index 708c588..a6e7a11 100644
--- a/examples/calculator/src/main/js/default/pages/index/index.css
+++ b/frameworks/examples/calculator/src/main/js/default/pages/index/index.css
@@ -1,3 +1,17 @@
+/*
+ * Copyright (c) 2020 Huawei Device 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.
+ */
 .calc-container {
     height: 480px;
     width: 960px;
diff --git a/examples/calculator/src/main/js/default/pages/index/index.hml b/frameworks/examples/calculator/src/main/js/default/pages/index/index.hml
similarity index 82%
rename from examples/calculator/src/main/js/default/pages/index/index.hml
rename to frameworks/examples/calculator/src/main/js/default/pages/index/index.hml
index 6dc10ae..80be18b 100644
--- a/examples/calculator/src/main/js/default/pages/index/index.hml
+++ b/frameworks/examples/calculator/src/main/js/default/pages/index/index.hml
@@ -1,3 +1,18 @@
+<!--
+Copyright (c) 2020 Huawei Device 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.
+-->
+
 <stack class="calc-container" @swipe="handleTerminate">
     <stack class="calc-titlebar" @click="handleExist">
         <image class="calc-icon calc-back-btn" src="/common/ic_back.png" />
diff --git a/examples/calculator/src/main/js/default/pages/index/index.js b/frameworks/examples/calculator/src/main/js/default/pages/index/index.js
similarity index 73%
rename from examples/calculator/src/main/js/default/pages/index/index.js
rename to frameworks/examples/calculator/src/main/js/default/pages/index/index.js
index 30fd21a..0d374ca 100644
--- a/examples/calculator/src/main/js/default/pages/index/index.js
+++ b/frameworks/examples/calculator/src/main/js/default/pages/index/index.js
@@ -1,3 +1,17 @@
+/*
+ * Copyright (c) 2020 Huawei Device 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 {calc, isOperator} from '../../common/calculator.js';
 import app from '@system.app';
 
diff --git a/examples/music/src/main/config.json b/frameworks/examples/music/src/main/config.json
old mode 100755
new mode 100644
similarity index 97%
rename from examples/music/src/main/config.json
rename to frameworks/examples/music/src/main/config.json
index c312fec..cf48482
--- a/examples/music/src/main/config.json
+++ b/frameworks/examples/music/src/main/config.json
@@ -17,7 +17,6 @@
   },
   "module": {
     "deviceType": [
-      "liteWearable",
       "smartVision"
     ],
     "abilities": [
diff --git a/examples/music/src/main/js/default/app.js b/frameworks/examples/music/src/main/js/default/app.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/app.js
rename to frameworks/examples/music/src/main/js/default/app.js
diff --git a/examples/music/src/main/js/default/common/ic_back.png b/frameworks/examples/music/src/main/js/default/common/ic_back.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_back.png
rename to frameworks/examples/music/src/main/js/default/common/ic_back.png
diff --git a/examples/music/src/main/js/default/common/ic_music_list.png b/frameworks/examples/music/src/main/js/default/common/ic_music_list.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_list.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_list.png
diff --git a/examples/music/src/main/js/default/common/ic_music_listcycle.png b/frameworks/examples/music/src/main/js/default/common/ic_music_listcycle.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_listcycle.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_listcycle.png
diff --git a/examples/music/src/main/js/default/common/ic_music_listorder.png b/frameworks/examples/music/src/main/js/default/common/ic_music_listorder.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_listorder.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_listorder.png
diff --git a/examples/music/src/main/js/default/common/ic_music_mode.png b/frameworks/examples/music/src/main/js/default/common/ic_music_mode.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_mode.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_mode.png
diff --git a/examples/music/src/main/js/default/common/ic_music_next.png b/frameworks/examples/music/src/main/js/default/common/ic_music_next.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_next.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_next.png
diff --git a/examples/music/src/main/js/default/common/ic_music_pause.png b/frameworks/examples/music/src/main/js/default/common/ic_music_pause.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_pause.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_pause.png
diff --git a/examples/music/src/main/js/default/common/ic_music_play.png b/frameworks/examples/music/src/main/js/default/common/ic_music_play.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_play.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_play.png
diff --git a/examples/music/src/main/js/default/common/ic_music_previous.png b/frameworks/examples/music/src/main/js/default/common/ic_music_previous.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_previous.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_previous.png
diff --git a/examples/music/src/main/js/default/common/ic_music_shuffle.png b/frameworks/examples/music/src/main/js/default/common/ic_music_shuffle.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_shuffle.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_shuffle.png
diff --git a/examples/music/src/main/js/default/common/ic_music_singlecycle.png b/frameworks/examples/music/src/main/js/default/common/ic_music_singlecycle.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/js/default/common/ic_music_singlecycle.png
rename to frameworks/examples/music/src/main/js/default/common/ic_music_singlecycle.png
diff --git a/examples/music/src/main/js/default/pages/index/index.css b/frameworks/examples/music/src/main/js/default/pages/index/index.css
old mode 100755
new mode 100644
similarity index 99%
rename from examples/music/src/main/js/default/pages/index/index.css
rename to frameworks/examples/music/src/main/js/default/pages/index/index.css
index 03120ba..0064160
--- a/examples/music/src/main/js/default/pages/index/index.css
+++ b/frameworks/examples/music/src/main/js/default/pages/index/index.css
@@ -56,7 +56,7 @@
     text-align: center;
 }
 
-.songer {
+.singer {
     width: 114px;
     height: 42px;
     margin-left: 423px;
diff --git a/examples/music/src/main/js/default/pages/index/index.hml b/frameworks/examples/music/src/main/js/default/pages/index/index.hml
old mode 100755
new mode 100644
similarity index 95%
rename from examples/music/src/main/js/default/pages/index/index.hml
rename to frameworks/examples/music/src/main/js/default/pages/index/index.hml
index f2596b7..9efaf65
--- a/examples/music/src/main/js/default/pages/index/index.hml
+++ b/frameworks/examples/music/src/main/js/default/pages/index/index.hml
@@ -20,7 +20,7 @@ limitations under the License.
            <text class="title">音乐</text>
        </div>
        <marquee class="musicName" scrollamount="15">{{curMusic.curMusicName}}</marquee>
-       <marquee class="songer" scrollamount="15">{{curMusic.songer}}</marquee>
+       <marquee class="singer" scrollamount="15">{{curMusic.singer}}</marquee>
        <div class="progress-Wrapper">
            <text class="playTime">{{curMusic.playTime}}</text>
            <slider class="progressBar" min="0" max="100" value="{{playProgress}}" onchange="changeProgress"></slider>
@@ -44,7 +44,7 @@ limitations under the License.
                             {{$item.name}}
                         </text>
                         <text class="itemSonger">
-                            {{$item.songer}}
+                            {{$item.singer}}
                         </text>
                     </div>
                 </div>
diff --git a/examples/music/src/main/js/default/pages/index/index.js b/frameworks/examples/music/src/main/js/default/pages/index/index.js
old mode 100755
new mode 100644
similarity index 97%
rename from examples/music/src/main/js/default/pages/index/index.js
rename to frameworks/examples/music/src/main/js/default/pages/index/index.js
index 22cce37..df8efb9
--- a/examples/music/src/main/js/default/pages/index/index.js
+++ b/frameworks/examples/music/src/main/js/default/pages/index/index.js
@@ -30,7 +30,7 @@ export default {
     playStatus: 2,  //0:play,1:pause,2:stop
     curMusic: {  //current music info
       curMusicName: "",
-      songer: "",
+      singer: "",
       playTime: "00:00",
       allTime: "00:00"
     },
@@ -45,6 +45,9 @@ export default {
     };
     //update play progress
     audio.ontimeupdate = () => {
+      if (audio.duration == null || audio.duration <= 0) {
+        return;
+      }
       console.log("ontime update:");
       this.curMusic.playTime = this.timeChange(audio.currentTime);
       console.log("ontime update:" + this.curMusic.playTime);
@@ -126,7 +129,7 @@ export default {
     if (music != null) {
       this.playProgress = 0;
       this.curMusic.curMusicName = music.name;
-      this.curMusic.songer = music.songer;
+      this.curMusic.singer = music.singer;
       audio.src = music.src;
       console.log("playMusic:src:" + music.src);
       audio.play();
@@ -181,7 +184,7 @@ export default {
       console.log("ChangeSong:next" + this.curMusicIndex);
     }
     this.curMusic.curMusicName = this.musicList[this.curMusicIndex].name;
-    this.curMusic.songer = this.musicList[this.curMusicIndex].songer;
+    this.curMusic.singer = this.musicList[this.curMusicIndex].singer;
     this.playMusic(this.curMusicIndex);
     if(this.showMusicList){
       this.$refs.musicList.scrollTo({ index: (this.curMusicIndex == 0?0:this.curMusicIndex-1) });
diff --git a/examples/music/src/main/resources/base/media/icon.png b/frameworks/examples/music/src/main/resources/base/media/icon.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/resources/base/media/icon.png
rename to frameworks/examples/music/src/main/resources/base/media/icon.png
diff --git a/examples/music/src/main/resources/base/media/icon_small.png b/frameworks/examples/music/src/main/resources/base/media/icon_small.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/music/src/main/resources/base/media/icon_small.png
rename to frameworks/examples/music/src/main/resources/base/media/icon_small.png
diff --git a/examples/showcase/src/main/config.json b/frameworks/examples/showcase/src/main/config.json
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/config.json
rename to frameworks/examples/showcase/src/main/config.json
index 3500860..d030d3b
--- a/examples/showcase/src/main/config.json
+++ b/frameworks/examples/showcase/src/main/config.json
@@ -13,7 +13,7 @@
   },
   "deviceConfig": {},
   "module": {
-    "deviceType": ["liteWearable", "smartVision"],
+    "deviceType": ["smartVision"],
     "distro": {
       "deliveryWithInstall": true,
       "moduleName": "entry",
diff --git a/examples/showcase/src/main/js/default/app.js b/frameworks/examples/showcase/src/main/js/default/app.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/app.js
rename to frameworks/examples/showcase/src/main/js/default/app.js
diff --git a/examples/showcase/src/main/js/default/common/js/chart.js b/frameworks/examples/showcase/src/main/js/default/common/js/chart.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/chart.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/chart.js
diff --git a/examples/showcase/src/main/js/default/common/js/general.js b/frameworks/examples/showcase/src/main/js/default/common/js/general.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/general.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/general.js
diff --git a/examples/showcase/src/main/js/default/common/js/image.js b/frameworks/examples/showcase/src/main/js/default/common/js/image.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/image.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/image.js
diff --git a/examples/showcase/src/main/js/default/common/js/input.js b/frameworks/examples/showcase/src/main/js/default/common/js/input.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/input.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/input.js
diff --git a/examples/showcase/src/main/js/default/common/js/list.js b/frameworks/examples/showcase/src/main/js/default/common/js/list.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/list.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/list.js
diff --git a/examples/showcase/src/main/js/default/common/js/marquee.js b/frameworks/examples/showcase/src/main/js/default/common/js/marquee.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/marquee.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/marquee.js
diff --git a/examples/showcase/src/main/js/default/common/js/picker_view.js b/frameworks/examples/showcase/src/main/js/default/common/js/picker_view.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/picker_view.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/picker_view.js
diff --git a/examples/showcase/src/main/js/default/common/js/progress.js b/frameworks/examples/showcase/src/main/js/default/common/js/progress.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/progress.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/progress.js
diff --git a/examples/showcase/src/main/js/default/common/js/stack.js b/frameworks/examples/showcase/src/main/js/default/common/js/stack.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/stack.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/stack.js
diff --git a/examples/showcase/src/main/js/default/common/js/swiper.js b/frameworks/examples/showcase/src/main/js/default/common/js/swiper.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/swiper.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/swiper.js
diff --git a/examples/showcase/src/main/js/default/common/js/text.js b/frameworks/examples/showcase/src/main/js/default/common/js/text.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/js/text.js
rename to frameworks/examples/showcase/src/main/js/default/common/js/text.js
diff --git a/examples/showcase/src/main/js/default/common/leftHead.png b/frameworks/examples/showcase/src/main/js/default/common/leftHead.png
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/common/leftHead.png
rename to frameworks/examples/showcase/src/main/js/default/common/leftHead.png
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation1/animation1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation2/animation2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation3/animation3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation4/animation4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation5/animation5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation6/animation6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/animation7/animation7.js
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/index1/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/index1/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/index1/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/index1/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/index1/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/index1/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/index1/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/index1/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/index1/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/index1/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/index1/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/index1/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/index2/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/index2/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/index2/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/index2/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/index2/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/index2/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/index2/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/index2/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/animation/index2/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/animation/index2/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/animation/index2/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/animation/index2/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.css
index 37a167c..1349468
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.css
@@ -18,5 +18,5 @@
   height: 50px;
   margin-top: 10px;
   margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
 }
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.hml
new file mode 100644
index 0000000..57cc334
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="width: 454px; height: 454px; left: 0px; top: 0px; flex-direction: column">
+  <stack style="width: 454px; height: 80px; margin-top: 80px">
+    <input type="button" style="left: 85px; width: 130px; height: 60px; top: 10px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px; top: 10px" value="上一页" onclick="backSuperior" />
+  </stack>
+  <canvas
+    ref="canvas1"
+    show="{{ status }}"
+    style="margin-left: 130px; width: 200px; height: 150px; background-color: #ffff00"
+  >
+  </canvas>
+  <div style="width: 454px; height: 60px; margin-left: 85px">
+    <input type="button" style="width: 140px; height: 60px" value="fillRect" onclick="fillRectFunc" />
+    <input type="button" style="width: 140px; height: 60px" value="show" onclick="changeStatus" />
+  </div>
+  <text class="text" style="margin-left: 105px">
+    {{ text1 }}
+  </text>
+</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas1/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.css
index 37a167c..1349468
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.css
@@ -18,5 +18,5 @@
   height: 50px;
   margin-top: 10px;
   margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
 }
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.hml
new file mode 100644
index 0000000..7067c31
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="width: 454px; height: 454px; left: 0px; top: 0px; flex-direction: column">
+  <stack style="width: 454px; height: 80px; margin-top: 80px">
+    <input type="button" style="left: 85px; width: 130px; height: 60px; top: 10px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px; top: 10px" value="上一页" onclick="backSuperior" />
+  </stack>
+  <canvas
+    ref="canvas1"
+    if="{{ ifStatus }}"
+    style="margin-left: 130px; width: 200px; height: 150px; background-color: #ffff00"
+  >
+  </canvas>
+  <div style="width: 454px; height: 60px; margin-left: 85px">
+    <input type="button" style="width: 140px; height: 60px" value="fillRect" onclick="fillRectFunc" />
+    <input type="button" style="width: 140px; height: 60px" value="if" onclick="changeIf" />
+  </div>
+  <text class="text" style="margin-left: 105px">
+    {{ text1 }}
+  </text>
+</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.css
index 37a167c..1349468
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas2/index.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.css
@@ -18,5 +18,5 @@
   height: 50px;
   margin-top: 10px;
   margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
 }
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.hml
new file mode 100644
index 0000000..6c63498
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.hml
@@ -0,0 +1,33 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="width: 454px; height: 454px; left: 0px; top: 0px; flex-direction: column">
+  <stack style="width: 454px; height: 80px; margin-top: 80px">
+    <input type="button" style="left: 85px; width: 130px; height: 60px; top: 10px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px; top: 10px" value="上一页" onclick="backSuperior" />
+  </stack>
+  <canvas
+    ref="canvas{{ $item }}"
+    for="{{ listData }}"
+    style="margin-left: 130px; margin-top: 10px; width: 200px; height: 75px; background-color: #ffff00"
+  >
+  </canvas>
+  <div style="width: 454px; height: 60px; margin-left: 160px">
+    <input type="button" style="width: 140px; height: 60px" value="fillRect" onclick="fillRectFunc" />
+  </div>
+  <text class="text" style="margin-left: 105px">
+    {{ text1 }}
+  </text>
+</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas3/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.css
old mode 100755
new mode 100644
similarity index 92%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.css
index 999830a..5ecae92
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.css
@@ -16,9 +16,7 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
 }
 
 .stack {
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.hml
old mode 100755
new mode 100644
similarity index 53%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.hml
index 0ea7e02..4d86787
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.hml
@@ -14,18 +14,18 @@ limitations under the License.
 -->
 
 <stack class="stack">
-  <stack style="width: 454; height: 80; top: 50">
-    <input type="button" style="left: 85; width: 130; height: 60" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60" value="上一页" onclick="backSuperior" />
+  <stack style="width: 454px; height: 80px; top: 50px">
+    <input type="button" style="left: 85px; width: 130px; height: 60px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px" value="上一页" onclick="backSuperior" />
   </stack>
-  <canvas ref="canvasObj" style="width: 280; height: 130; top: 120; left: 85; background-color: #00ff00"> </canvas>
-  <text class="text" style="left: 85; width: 280; top: 260">
+  <canvas ref="canvasObj" style="width: 280px; height: 130px; top: 120px; left: 85px; background-color: #00ff00"> </canvas>
+  <text class="text" style="left: 85px; width: 280px; top: 260px">
     {{ text1 }}
   </text>
-  <text class="text" style="left: 85; width: 280; top: 310">
+  <text class="text" style="left: 85px; width: 280px; top: 310px">
     {{ text2 }}
   </text>
-  <text class="text" style="left: 85; width: 300; top: 360">
+  <text class="text" style="left: 85px; width: 300px; top: 360px">
     {{ text3 }}
   </text>
 </stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas4/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.css
index 3412d2e..fbc215c
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.css
@@ -18,7 +18,7 @@
   height: 50px;
   margin-top: 10px;
   margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
   border-width: 1px;
   border-color: red;
 }
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.hml
new file mode 100644
index 0000000..6b51687
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.hml
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="height: 450px; width: 450px; border-width: 1px; border-color: #ff0000; flex-direction: column">
+  <stack style="width: 454px; height: 80px; margin-top: 80px; border-width: 1px; border-color: #0000ff">
+    <input type="button" style="left: 85px; width: 130px; height: 60px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px" value="上一页" onclick="backSuperior" />
+  </stack>
+  <canvas ref="canvasObj" style="width: 280px; height: 80px; margin: 20; background-color: #ffff00"> </canvas>
+  <text class="text" style="margin-left: 40px; width: 360px">
+    {{ text1 }}
+  </text>
+  <text class="text" style="margin-left: 40px; width: 360px">
+    {{ text2 }}
+  </text>
+  <text class="text" style="margin-left: 40px; width: 360px">
+    {{ text3 }}
+  </text>
+</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas5/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.css
index 285f457..b20c2ce
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.css
@@ -18,5 +18,5 @@
   height: 50px;
   margin-top: 10px;
   margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.hml
old mode 100755
new mode 100644
similarity index 53%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.hml
index eadc0d4..cbf6c59
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.hml
@@ -13,29 +13,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div style="height: 454; width: 454; flex-direction: column">
-  <stack style="width: 454; height: 80; margin-top: 80">
-    <input type="button" style="left: 85; width: 130; height: 60" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60" value="上一页" onclick="backSuperior" />
+<div style="height: 454px; width: 454px; flex-direction: column">
+  <stack style="width: 454px; height: 80px; margin-top: 80px">
+    <input type="button" style="left: 85px; width: 130px; height: 60px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px" value="上一页" onclick="backSuperior" />
   </stack>
   <canvas
     id="cvs1"
     ref="canvas1"
     style="
-      width: 260;
-      height: 120;
-      margin-top: 10;
-      margin-left: 85;
+      width: 260px;
+      height: 120px;
+      margin-top: 10px;
+      margin-left: 85px;
       background-color: #ffff00;
       padding: 10;
-      border-width: 10;
+      border-width: 10px;
       border-color: #ff0000;
-      border-radius: 10;
+      border-radius: 10px;
     "
   >
   </canvas>
-  <input type="button" style="margin-left: 150; width: 180; height: 60" value="fillStyle" onclick="fillStyleFunc" />
-  <text class="text" style="margin-left: 140; width: 280">
+  <input type="button" style="margin-left: 150px; width: 180px; height: 60px" value="fillStyle" onclick="fillStyleFunc" />
+  <text class="text" style="margin-left: 140px; width: 280px">
     {{ text1 }}
   </text>
 </div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas6/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.css
index 818750a..aae6f49
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.css
@@ -18,7 +18,7 @@
   height: 50px;
   margin-bottom: 10px;
   margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
   border-width: 1px;
   border-color: red;
 }
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.hml
new file mode 100644
index 0000000..6de5625
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.hml
@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="height: 450px; width: 450px; flex-direction: column; border-width: 1px; border-color: #ff0000">
+  <stack style="width: 454px; height: 80px; margin-top: 80px; border-width: 1px; border-color: #0000ff">
+    <input type="button" style="left: 85px; width: 130px; height: 60px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px" value="上一页" onclick="backSuperior" />
+  </stack>
+  <canvas
+    style="
+      width: 280px;
+      height: 60px;
+      margin-left: 40px;
+      margin-top: 15px;
+      margin-right: 10px;
+      margin-bottom: 20px;
+      background-color: #00ff00;
+      border-width: 1px;
+      border-color: #ffa500;
+    "
+  >
+  </canvas>
+  <text class="text" style="margin-left: 40px; width: 320px">
+    {{ text1 }}
+  </text>
+  <text class="text" style="margin-left: 40px; width: 320px">
+    {{ text2 }}
+  </text>
+  <text class="text" style="margin-left: 40px; width: 320px">
+    {{ text3 }}
+  </text>
+</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas7/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.css
index 3412d2e..fbc215c
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.css
@@ -18,7 +18,7 @@
   height: 50px;
   margin-top: 10px;
   margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
   border-width: 1px;
   border-color: red;
 }
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.hml
new file mode 100644
index 0000000..05319d1
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.hml
@@ -0,0 +1,37 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="height: 454px; width: 454px; flex-direction: column">
+  <stack style="width: 454px; height: 80px; margin-top: 80px; border-width: 1px; border-color: #0000ff">
+    <input type="button" style="left: 85px; width: 130px; height: 60px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px" value="上一页" onclick="backSuperior" />
+  </stack>
+  <canvas
+    style="width:280px;height:60px;margin-left:85px;background-color:#00ff00;border-width:1px;border-color:#ffa500;display:{{
+      displayValue
+    }}"
+  >
+  </canvas>
+  <input type="button" style="width: 140px; height: 60px; margin-left: 160px" value="display" onclick="changeDisplay" />
+  <text class="text" style="margin-left: 45px; width: 330px">
+    {{ text1 }}
+  </text>
+  <text class="text" style="margin-left: 45px; width: 330px">
+    {{ text2 }}
+  </text>
+  <text class="text" style="margin-left: 45px; width: 330px">
+    {{ text3 }}
+  </text>
+</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas8/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.css
old mode 100755
new mode 100644
similarity index 92%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.css
index 21072ca..8611914
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.css
@@ -23,8 +23,6 @@
 .text {
   width: 400px;
   height: 100px;
-  margin-top: 10px;
-  margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
   text-overflow: ellipsis;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.hml
old mode 100755
new mode 100644
similarity index 52%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.hml
index fb6c531..735f17d
--- a/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.hml
@@ -14,21 +14,21 @@ limitations under the License.
 -->
 
 <stack class="stack">
-  <stack style="width: 454; height: 80; top: 80">
-    <input type="button" style="left: 85; width: 130; height: 60" value="首页" onclick="backMain" />
-    <input type="button" style="left: 235; width: 130; height: 60" value="上一页" onclick="backSuperior" />
+  <stack style="width: 454px; height: 80px; top: 80px">
+    <input type="button" style="left: 85px; width: 130px; height: 60px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px" value="上一页" onclick="backSuperior" />
   </stack>
   <canvas
     ref="canvas1"
-    style="width: 280; height: 80; top: 170; left: 85; background-color: #00ff00"
+    style="width: 280px; height: 80px; top: 170px; left: 85px; background-color: #00ff00"
     onclick="clickFunc"
     onlongpress="longPressFunc"
     onswipe="swipeFunc"
   >
   </canvas>
-  <text style="left: 40; height: 40; width: 400; top: 260; color: #ffa500">
+  <text style="left: 40px; height: 40px; width: 400px; top: 260px; color: #ffa500">
     {{ text1 }}
   </text>
-  <text class="text" style="left: 40; width: 400; top: 310"> 矩形为canvas组件 </text>
-  <text class="text" style="left: 40; width: 400; top: 360"> 点击/长按/滑动canvas内部任意位置触发事件 </text>
+  <text class="text" style="left: 40px; width: 400px; top: 310px"> 矩形为canvas组件 </text>
+  <text class="text" style="left: 40px; width: 400px; top: 360px"> 点击/长按/滑动canvas内部任意位置触发事件 </text>
 </stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/canvas9/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/index/index.hml
old mode 100755
new mode 100644
similarity index 75%
rename from examples/showcase/src/main/js/default/pages/component/canvas/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/index/index.hml
index c7dc122..07697b1
--- a/examples/showcase/src/main/js/default/pages/component/canvas/index/index.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/index/index.hml
@@ -13,12 +13,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<stack style="left: 0; right: 0; width: 454; height: 454">
-  <list style="left: 0; right: 0; width: 454; height: 454; flex-direction: column">
-    <list-item style="width: 454; height: 60"> </list-item>
-    <list-item style="width: 454; height: 80">
-      <input type="button" style="margin-left: 85; width: 130; height: 60" onclick="goHome" value="返回首页" />
-      <input type="button" style="margin-left: 20; width: 130; height: 60" onclick="goPrevious" value="返回上页" />
+<stack style="left: 0px; right: 0px; width: 454px; height: 454px">
+  <list style="left: 0px; right: 0px; width: 454px; height: 454px; flex-direction: column">
+    <list-item style="width: 454px; height: 60px"> </list-item>
+    <list-item style="width: 454px; height: 80px">
+      <input type="button" style="margin-left: 85px; width: 130px; height: 60px" onclick="goHome" value="返回首页" />
+      <input type="button" style="margin-left: 20px; width: 130px; height: 60px" onclick="goPrevious" value="返回上页" />
     </list-item>
     <list-item class="separatorContainerStyle"> </list-item>
     <list-item class="titleContainerStyle">
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.hml
old mode 100755
new mode 100644
similarity index 70%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.hml
index a1e8587..5a5e40c
--- a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.hml
@@ -13,12 +13,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<stack style="left: 0; right: 0; width: 454; height: 454">
-  <list style="left: 0; right: 0; width: 454; height: 454; flex-direction: column">
-    <list-item style="width: 454; height: 60"> </list-item>
-    <list-item style="width: 454; height: 80">
-      <input type="button" style="margin-left: 85; width: 130; height: 60" onclick="goHome" value="返回首页" />
-      <input type="button" style="margin-left: 20; width: 130; height: 60" onclick="goPrevious" value="返回上页" />
+<stack style="left: 0px; right: 0px; width: 454px; height: 454px">
+  <list style="left: 0px; right: 0px; width: 454px; height: 454px; flex-direction: column">
+    <list-item style="width: 454px; height: 60px"> </list-item>
+    <list-item style="width: 454px; height: 80px">
+      <input type="button" style="margin-left: 85px; width: 130px; height: 60px" onclick="goHome" value="返回首页" />
+      <input type="button" style="margin-left: 20px; width: 130px; height: 60px" onclick="goPrevious" value="返回上页" />
     </list-item>
     <list-item class="separatorContainerStyle"> </list-item>
     <list-item class="titleContainerStyle">
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPI/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.css
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.hml
new file mode 100644
index 0000000..f586bce
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.hml
@@ -0,0 +1,63 @@
+<!--
+Copyright (c) 2020 Huawei Device 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.
+-->
+
+<stack style="left: 0px; right: 0px; width: 454px; height: 454px">
+  <list style="left: 0px; right: 0px; width: 454px; height: 454px; flex-direction: column">
+    <list-item style="width: 454px; height: 60px"> </list-item>
+    <list-item style="width: 454px; height: 80px">
+      <input type="button" style="margin-left: 85px; width: 130px; height: 60px" value="返回首页" onclick="backMain" />
+      <input type="button" style="margin-left: 20px; width: 130px; height: 60px" value="返回上级" onclick="backSuperior" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item class="titleContainerStyle">
+      <text class="titleTextStyle"> canvas属性接口 </text>
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <canvas id="cvs1" ref="canvas1" style="margin-left: 45px; width: 200px; height: 150px; background-color: #ffff00">
+      </canvas>
+      <input type="button" style="margin-left: 10px; width: 180px; height: 60px" value="fillStyle" onclick="fillStyleFunc" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <canvas ref="canvas2" style="margin-left: 45px; width: 200px; height: 150px; background-color: #ffff00"> </canvas>
+      <input
+        type="button"
+        style="margin-left: 10px; width: 180px; height: 60px"
+        value="strokeStyle"
+        onclick="strokeStyleFunc"
+      />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <canvas ref="canvas3" style="margin-left: 45px; width: 200px; height: 150px; background-color: #ffff00"> </canvas>
+      <input type="button" style="margin-left: 10px; width: 180px; height: 60px" value="lineWidth" onclick="lineWidthFunc" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <canvas ref="canvas4" style="margin-left: 45px; width: 200px; height: 150px; background-color: #ffff00"> </canvas>
+      <input type="button" style="margin-left: 10px; width: 180px; height: 60px" value="font" onclick="fontFunc" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <canvas ref="canvas5" style="margin-left: 45px; width: 200px; height: 150px; background-color: #ffff00"> </canvas>
+      <input type="button" style="margin-left: 10px; width: 180px; height: 60px" value="textAlign" onclick="textAlignFunc" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <input type="button" style="margin-left: 10px; width: 180px; height: 60px" value="jump" onclick="jumpFunc" />
+    </list-item>
+  </list>
+</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.css
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.hml
new file mode 100644
index 0000000..6e5a13c
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.hml
@@ -0,0 +1,53 @@
+<!--
+Copyright (c) 2020 Huawei Device 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.
+-->
+
+<stack style="left: 0px; right: 0px; width: 454px; height: 454px">
+  <list style="left: 0px; right: 0px; width: 454px; height: 454px; flex-direction: column">
+    <list-item style="width: 454px; height: 60px"> </list-item>
+    <list-item style="width: 454px; height: 80px">
+      <input type="button" style="margin-left: 85px; width: 130px; height: 60px" value="返回首页" onclick="backMain" />
+      <input type="button" style="margin-left: 20px; width: 130px; height: 60px" value="返回上级" onclick="backSuperior" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item class="titleContainerStyle">
+      <text class="titleTextStyle"> canvas绘图接口 </text>
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <canvas ref="canvas1" style="margin-left: 45px; width: 200px; height: 150px; background-color: #ffff00"> </canvas>
+      <input type="button" style="margin-left: 10px; width: 180px; height: 60px" value="fillRect" onclick="fillRectFunc" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <canvas ref="canvas2" style="margin-left: 45px; width: 200px; height: 150px; background-color: #ffff00"> </canvas>
+      <input
+        type="button"
+        style="margin-left: 10px; width: 180px; height: 60px"
+        value="strokeRect"
+        onclick="strokeRectFunc"
+      />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <canvas ref="canvas3" style="margin-left: 45px; width: 200px; height: 150px; background-color: #ffff00"> </canvas>
+      <input type="button" style="margin-left: 10px; width: 180px; height: 60px" value="fillText" onclick="fillTextFunc" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <canvas ref="canvas4" style="margin-left: 45px; width: 200px; height: 150px; background-color: #ffff00"> </canvas>
+      <input type="button" style="margin-left: 10px; width: 180px; height: 60px" value="arc" onclick="arcFunc" />
+    </list-item>
+  </list>
+</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.css
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.hml
new file mode 100644
index 0000000..584cebb
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.hml
@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 2020 Huawei Device 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.
+-->
+
+<stack style="left: 0px; right: 0px; width: 454px; height: 454px">
+  <list style="left: 0px; right: 0px; width: 454px; height: 454px; flex-direction: column">
+    <list-item style="width: 454px; height: 60px"> </list-item>
+    <list-item style="width: 454px; height: 80px">
+      <input type="button" style="margin-left: 85px; width: 130px; height: 60px" value="返回首页" onclick="backMain" />
+      <input type="button" style="margin-left: 20px; width: 130px; height: 60px" value="返回上级" onclick="backSuperior" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item class="titleContainerStyle">
+      <text class="titleTextStyle"> canvas通用属性 </text>
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 120px">
+      <stack style="width: 200px; height: 120px; margin-left: 30px">
+        <text style="width: 200px; height: 40px; top: 40px"> show </text>
+      </stack>
+      <input type="button" style="width: 140px; height: 60px; margin-right: 30px" value="点击进入" onclick="changePage1" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 120px">
+      <stack style="width: 200px; height: 120px; margin-left: 30px">
+        <text style="width: 200px; height: 40px; top: 40px"> if </text>
+      </stack>
+      <input type="button" style="width: 140px; height: 60px; margin-right: 30px" value="点击进入" onclick="changePage2" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 120px">
+      <stack style="width: 200px; height: 120px; margin-left: 30px">
+        <text style="width: 200px; height: 40px; top: 40px"> for </text>
+      </stack>
+      <input type="button" style="width: 140px; height: 60px; margin-right: 30px" value="点击进入" onclick="changePage3" />
+    </list-item>
+  </list>
+</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.css
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.hml
new file mode 100644
index 0000000..9c1aea6
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.hml
@@ -0,0 +1,71 @@
+<!--
+Copyright (c) 2020 Huawei Device 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.
+-->
+
+<stack style="left: 0px; right: 0px; width: 454px; height: 454px">
+  <list style="left: 0px; right: 0px; width: 454px; height: 454px; flex-direction: column">
+    <list-item style="width: 454px; height: 60px"> </list-item>
+    <list-item style="width: 454px; height: 80px">
+      <input type="button" style="margin-left: 85px; width: 130px; height: 60px" value="返回首页" onclick="backMain" />
+      <input type="button" style="margin-left: 20px; width: 130px; height: 60px" value="返回上级" onclick="backSuperior" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item class="titleContainerStyle">
+      <text class="titleTextStyle"> canvas通用样式 </text>
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 200px">
+      <stack style="width: 200px; height: 160px; margin-left: 30px">
+        <text style="width: 200px; height: 40px; top: 20px"> 背景色 </text>
+        <text style="width: 200px; height: 40px; top: 60px"> left </text>
+        <text style="width: 200px; height: 40px; top: 100px"> top </text>
+      </stack>
+      <input type="button" style="width: 140px; height: 60px; margin-right: 30px" value="点击进入" onclick="changePage1" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 200px">
+      <stack style="width: 200px; height: 160px; margin-left: 30px">
+        <text style="width: 200px; height: 40px; top: 20px"> margin </text>
+        <text style="width: 200px; height: 40px; top: 60px"> height </text>
+        <text style="width: 200px; height: 40px; top: 100px"> width </text>
+      </stack>
+      <input type="button" style="width: 140px; height: 60px; margin-right: 30px" value="点击进入" onclick="changePage2" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 200px">
+      <stack style="width: 200px; height: 160px; margin-left: 30px">
+        <text style="width: 200px; height: 40px; top: 40px"> border </text>
+        <text style="width: 200px; height: 40px; top: 80px"> padding </text>
+      </stack>
+      <input type="button" style="width: 140px; height: 60px; margin-right: 30px" value="点击进入" onclick="changePage3" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 200px">
+      <stack style="width: 260px; height: 160px; margin-left: 30px">
+        <text style="width: 260px; height: 40px; top: 0px"> margin-left </text>
+        <text style="width: 260px; height: 40px; top: 40px"> margin-top </text>
+        <text style="width: 260px; height: 40px; top: 80px"> margin-right </text>
+        <text style="width: 260px; height: 40px; top: 120px"> margin-bottom </text>
+      </stack>
+      <input type="button" style="width: 140px; height: 60px; margin-right: 30px" value="点击进入" onclick="changePage4" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 200px">
+      <stack style="width: 200px; height: 160px; margin-left: 30px">
+        <text style="width: 200px; height: 40px; top: 80px"> display </text>
+      </stack>
+      <input type="button" style="width: 140px; height: 60px; margin-right: 30px" value="点击进入" onclick="changePage5" />
+    </list-item>
+  </list>
+</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexCommonStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.css
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.hml
new file mode 100644
index 0000000..83cf172
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.hml
@@ -0,0 +1,37 @@
+<!--
+Copyright (c) 2020 Huawei Device 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.
+-->
+
+<stack style="left: 0px; right: 0px; width: 454px; height: 454px">
+  <list style="left: 0px; right: 0px; width: 454px; height: 454px; flex-direction: column">
+    <list-item style="width: 454px; height: 60px"> </list-item>
+    <list-item style="width: 454px; height: 80px">
+      <input type="button" style="margin-left: 85px; width: 130px; height: 60px" value="返回首页" onclick="backMain" />
+      <input type="button" style="margin-left: 20px; width: 130px; height: 60px" value="返回上级" onclick="backSuperior" />
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item class="titleContainerStyle">
+      <text class="titleTextStyle"> canvas通用事件 </text>
+    </list-item>
+    <list-item class="separatorContainerStyle"> </list-item>
+    <list-item style="width: 454px; height: 170px">
+      <stack style="width: 200px; height: 160px; margin-left: 30px">
+        <text style="width: 200px; height: 40px; top: 40px"> click </text>
+        <text style="width: 200px; height: 40px; top: 80px"> longpress </text>
+        <text style="width: 200px; height: 40px; top: 120px"> swipe </text>
+      </stack>
+      <input type="button" style="width: 140px; height: 60px; margin-right: 30px" value="点击进入" onclick="changePage1" />
+    </list-item>
+  </list>
+</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/canvas/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart1/barChart1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.css
index 7a5644b..213527d
--- a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.css
@@ -22,7 +22,5 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.hml
old mode 100755
new mode 100644
similarity index 92%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.hml
index 762e7b1..b801d01
--- a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.hml
@@ -15,8 +15,8 @@ limitations under the License.
 
     <stack class="stack" >
         <stack style="width:454px;height:80px;top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <chart type="bar" datasets="{{datasets}}" options="{{options}}" style="type:bar;width:280px;height:60px;top:170px;left:85px;background-color:#00ff00;">
         </chart>
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart2/barChart2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart3/barChart3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart4/barChart4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart5/barChart5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart6/barChart6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart7/barChart7.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/barChart8/barChart8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/barChart/indexStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/indexStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart1/lineChart1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.css
index 7a5644b..213527d
--- a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.css
@@ -22,7 +22,5 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.hml
old mode 100755
new mode 100644
similarity index 91%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.hml
index efae822..90dd530
--- a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.hml
@@ -15,8 +15,8 @@ limitations under the License.
 
     <stack class="stack" >
         <stack style="width:454px;height:80px;top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <chart type="line" datasets="{{datasets}}" options="{{options}}" style="width:280px;height:60px;top:170px;left:85px;background-color:#00ff00;">
         </chart>
@@ -29,4 +29,4 @@ limitations under the License.
         <text class="text" style="left:105px;width:280px;top:340px;">
           {{text3}}
         </text>
-    </div>
+    </stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart2/lineChart2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart3/lineChart3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart4/lineChart4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart5/lineChart5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart6/lineChart6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart7/lineChart7.js
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/chart/lineChart/lineChart8/lineChart8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div1/div1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div1/div1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div1/div1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div1/div1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div1/div1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div1/div1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div1/div1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div1/div1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div1/div1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div1/div1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div1/div1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div1/div1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div10/div10.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div10/div10.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div10/div10.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div10/div10.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div10/div10.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div10/div10.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div10/div10.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div10/div10.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div10/div10.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div10/div10.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div10/div10.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div10/div10.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div11/div11.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div11/div11.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div11/div11.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div11/div11.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div11/div11.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div11/div11.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div11/div11.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div11/div11.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div11/div11.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div11/div11.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div11/div11.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div11/div11.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div12/div12.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div12/div12.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div12/div12.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div12/div12.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div12/div12.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div12/div12.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div12/div12.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div12/div12.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div12/div12.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div12/div12.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div12/div12.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div12/div12.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div2/div2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div2/div2.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/div/div2/div2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div2/div2.css
index 7a5644b..213527d
--- a/examples/showcase/src/main/js/default/pages/component/div/div2/div2.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div2/div2.css
@@ -22,7 +22,5 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div2/div2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div2/div2.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div2/div2.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div2/div2.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div2/div2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div2/div2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div2/div2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div2/div2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div3/div3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div3/div3.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div3/div3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div3/div3.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div3/div3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div3/div3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div3/div3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div3/div3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div3/div3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div3/div3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div3/div3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div3/div3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div4/div4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div4/div4.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div4/div4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div4/div4.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div4/div4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div4/div4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div4/div4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div4/div4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div4/div4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div4/div4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div4/div4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div4/div4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div5/div5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div5/div5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div5/div5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div5/div5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div5/div5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div5/div5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div5/div5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div5/div5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div5/div5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div5/div5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div5/div5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div5/div5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div6/div6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div6/div6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div6/div6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div6/div6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div6/div6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div6/div6.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div6/div6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div6/div6.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div6/div6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div6/div6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div6/div6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div6/div6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div7/div7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div7/div7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div7/div7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div7/div7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div7/div7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div7/div7.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div7/div7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div7/div7.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div7/div7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div7/div7.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div7/div7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div7/div7.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div8/div8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div8/div8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div8/div8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div8/div8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div8/div8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div8/div8.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div8/div8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div8/div8.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div8/div8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div8/div8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div8/div8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div8/div8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div9/div9.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div9/div9.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div9/div9.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div9/div9.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div9/div9.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div9/div9.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div9/div9.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div9/div9.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/div9/div9.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/div9/div9.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/div9/div9.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/div9/div9.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexCommonStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/div/indexSpecStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image1/image1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image1/image1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image1/image1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image1/image1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image1/image1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image1/image1.hml
old mode 100755
new mode 100644
similarity index 91%
rename from examples/showcase/src/main/js/default/pages/component/image/image1/image1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image1/image1.hml
index 953d8f9..516e709
--- a/examples/showcase/src/main/js/default/pages/component/image/image1/image1.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image1/image1.hml
@@ -15,8 +15,8 @@ limitations under the License.
 
     <div style="height:454px;width:454px;flex-direction:column;" >
         <stack style="width:454px;height:80px;margin-top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <image src="common/leftHead.png" style="margin-top:10px;margin-left:160px;height:100px;width:100px;"/>
         <text style="margin-top:10px;margin-left:100px;width:260px;height:40px;">
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image1/image1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image1/image1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image1/image1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image1/image1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image2/image2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image2/image2.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image2/image2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image2/image2.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image2/image2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image2/image2.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image2/image2.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image2/image2.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image2/image2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image2/image2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image2/image2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image2/image2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image3/image3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image3/image3.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/image/image3/image3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image3/image3.css
index c56bf1d..66bbf1d
--- a/examples/showcase/src/main/js/default/pages/component/image/image3/image3.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image3/image3.css
@@ -15,8 +15,6 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
 
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image3/image3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image3/image3.hml
old mode 100755
new mode 100644
similarity index 90%
rename from examples/showcase/src/main/js/default/pages/component/image/image3/image3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image3/image3.hml
index db3f5e3..8245e76
--- a/examples/showcase/src/main/js/default/pages/component/image/image3/image3.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image3/image3.hml
@@ -15,12 +15,12 @@ limitations under the License.
 
     <stack class="stack" >
         <stack style="width:454px;height:80px;top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <image src="common/leftHead.png" style="width:100px;height:100px;top:170px;left:160px;background-color:#00ff00;">
         </image>
         <text class="text" style="left:105px;width:280px;top:320px;">
           {{text1}}
         </text>
-    </div>
+    </stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image3/image3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image3/image3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image3/image3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image3/image3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image4/image4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image4/image4.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image4/image4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image4/image4.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image4/image4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image4/image4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image4/image4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image4/image4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image4/image4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image4/image4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image4/image4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image4/image4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image5/image5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image5/image5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image5/image5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image5/image5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image5/image5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image5/image5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image5/image5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image5/image5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image5/image5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image5/image5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image5/image5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image5/image5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image6/image6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image6/image6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image6/image6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image6/image6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image6/image6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image6/image6.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image6/image6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image6/image6.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image6/image6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image6/image6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image6/image6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image6/image6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image7/image7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image7/image7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image7/image7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image7/image7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image7/image7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image7/image7.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image7/image7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image7/image7.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image7/image7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image7/image7.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image7/image7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image7/image7.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image8/image8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image8/image8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image8/image8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image8/image8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image8/image8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image8/image8.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image8/image8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image8/image8.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/image8/image8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/image8/image8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/image8/image8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/image8/image8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/image/indexStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/index/formIndex/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/index/formIndex/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/formIndex/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/formIndex/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/index/formIndex/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/index/formIndex/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/formIndex/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/formIndex/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/index/formIndex/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/index/formIndex/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/formIndex/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/formIndex/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/index/otherIndex/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.css
index a842ca3..81fe2e5
--- a/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.css
@@ -67,23 +67,18 @@
 .two-right-div {
   width: 230px;
   height: 150px;
-  top: 40px;
-  left: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 150px;
-  left: 0px;
-  top: 0px;
+
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 150px;
-  left: 0px;
-  top: 0px;
 }
 
 .item-attribute {
@@ -92,8 +87,6 @@
 }
 
 .attribute-div {
-  left: 0px;
-  top: 0px;
   height: 100px;
   width: 450px;
   flex-direction: row;
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/attr/attr.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/event/event.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/event/event.css
old mode 100755
new mode 100644
similarity index 95%
rename from examples/showcase/src/main/js/default/pages/component/input/button/event/event.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/event/event.css
index 4e4ae1c..b587ee2
--- a/examples/showcase/src/main/js/default/pages/component/input/button/event/event.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/event/event.css
@@ -67,23 +67,17 @@
 .two-right-div {
   width: 230px;
   height: 200px;
-  top: 40px;
-  left: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .text2 {
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/event/event.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/event/event.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/button/event/event.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/event/event.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/event/event.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/event/event.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/button/event/event.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/event/event.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/button/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/button/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/button/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/style/style.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/style/style.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/button/style/style.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/style/style.css
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/style/style.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/style/style.hml
old mode 100755
new mode 100644
similarity index 99%
rename from examples/showcase/src/main/js/default/pages/component/input/button/style/style.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/style/style.hml
index 8ebc5e3..33d7a52
--- a/examples/showcase/src/main/js/default/pages/component/input/button/style/style.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/style/style.hml
@@ -45,7 +45,7 @@ limitations under the License.
         <text class="text">width</text>
       </div>
       <div class="general-stack">
-        <input type="button" value="点击" style="margin: 20px; width: 100px; height: 60" />
+        <input type="button" value="点击" style="margin: 20px; width: 100px; height: 60px" />
       </div>
     </div>
   </list-item>
diff --git a/examples/showcase/src/main/js/default/pages/component/input/button/style/style.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/button/style/style.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/button/style/style.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/button/style/style.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.css
old mode 100755
new mode 100644
similarity index 95%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.css
index f46f348..976ade6
--- a/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.css
@@ -67,23 +67,17 @@
 .two-right-div {
   width: 230px;
   height: 150px;
-  top: 40px;
-  left: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 150px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 150px;
-  left: 0px;
-  top: 0px;
 }
 
 .item-attribute {
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.css
old mode 100755
new mode 100644
similarity index 91%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.css
index 910baf8..1a67856
--- a/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.css
@@ -76,23 +76,17 @@
 .two-right-div {
   width: 230px;
   height: 200px;
-  top: 40px;
-  left: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .item-change {
@@ -101,22 +95,16 @@
 }
 
 .change-div {
-  left: 0px;
   width: 450px;
   height: 200px;
-  top: 0px;
 }
 
 .change-left-div {
-  left: 10px;
   width: 200px;
   height: 200px;
-  top: 20px;
 }
 
 .change-right-div {
-  left: 10px;
-  top: 10px;
   width: 250px;
   height: 200px;
   flex-direction: column;
@@ -130,8 +118,6 @@
 }
 
 .right-div {
-  left: 0px;
-  top: 0px;
   width: 200px;
   height: 200px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/event/event.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/style/style.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.css
index ca9e352..1845d0f
--- a/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.css
@@ -95,8 +95,6 @@
 .three-right-div {
   width: 230px;
   height: 190px;
-  top: 40px;
-  left: 0px;
 }
 
 .general-stack {
@@ -116,8 +114,6 @@
 }
 
 .right-div {
-  left: 0px;
-  top: 0px;
   width: 150px;
   height: 200px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/input/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.css
old mode 100755
new mode 100644
similarity index 95%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.css
index 3712436..270a2d3
--- a/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.css
@@ -67,23 +67,17 @@
 .two-right-div {
   width: 230px;
   height: 150px;
-  top: 40px;
-  left: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 150px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 150px;
-  left: 0px;
-  top: 0px;
 }
 
 .item-attribute {
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.css
old mode 100755
new mode 100644
similarity index 91%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/event/event.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.css
index eb41b4f..8510988
--- a/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.css
@@ -76,23 +76,17 @@
 .two-right-div {
   width: 230px;
   height: 200px;
-  top: 40px;
-  left: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .item-change {
@@ -101,22 +95,16 @@
 }
 
 .change-div {
-  left: 0px;
   width: 450px;
   height: 150px;
-  top: 0px;
 }
 
 .change-left-div {
-  left: 10px;
   width: 200px;
   height: 150px;
-  top: 20px;
 }
 
 .change-right-div {
-  left: 10px;
-  top: 10px;
   width: 250px;
   height: 150px;
   flex-direction: column;
@@ -130,8 +118,6 @@
 }
 
 .right-div {
-  left: 0px;
-  top: 0px;
   width: 150px;
   height: 200px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/event/event.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/event/event.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/event/event.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.css b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.css
old mode 100755
new mode 100644
similarity index 93%
rename from examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.css
index ca9e352..762fe0e
--- a/examples/showcase/src/main/js/default/pages/component/input/checkbox/style/style.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.css
@@ -60,15 +60,11 @@
 .three-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .three-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
@@ -80,8 +76,6 @@
 .two-left-div {
   width: 220px;
   height: 150px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
@@ -95,8 +89,6 @@
 .three-right-div {
   width: 230px;
   height: 190px;
-  top: 40px;
-  left: 0px;
 }
 
 .general-stack {
@@ -116,8 +108,6 @@
 }
 
 .right-div {
-  left: 0px;
-  top: 0px;
   width: 150px;
   height: 200px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/style/style.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.js b/frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/input/radio/style/style.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/style/style.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexCommonStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.css
index 31facbb..a5d9270
--- a/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.css
@@ -22,8 +22,6 @@
 .text {
   width: 400px;
   height: 100px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
   text-overflow: ellipsis;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item1/item1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.hml
old mode 100755
new mode 100644
similarity index 98%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.hml
index 8f49750..06d5907
--- a/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.hml
@@ -25,7 +25,7 @@ limitations under the License.
       background-color: #00ff00;
       border-width: 1px;
       border-color: #ffa500;
-      margin-left: 85;
+      margin-left: 85px;
     "
   >
     <list-item style="width:270px;height:60px;border-width:5px;border-color:#ffa500;display:{{ displayValue }}">
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item11/item11.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.hml
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.hml
index 3ee0ca3..6d2dbd9
--- a/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.hml
@@ -35,7 +35,7 @@ limitations under the License.
     "
   >
     <list-item for="{{ listData }}" style="width: 280px; height: 50px">
-      <text style="width: 250px; height: 50"> {{ $idx }}--{{ $item }} </text>
+      <text style="width: 250px; height: 50px"> {{ $idx }}--{{ $item }} </text>
     </list-item>
   </list>
   <text class="text" style="margin-left: 45px">
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item12/item12.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.css
index c56bf1d..66bbf1d
--- a/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.css
@@ -15,8 +15,6 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
 
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item3/item3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item5/item5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item8/item8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list-item/item9/item9.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexCommonStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexOperation/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/indexSpecStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list1/list1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list10/list10.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list11/list11.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list12/list12.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.css
index 231d8ff..092642b
--- a/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.css
@@ -17,5 +17,5 @@
   height: 50px;
   margin-top: 10px;
   margin-left: 10px;
-  font-size: 30;
+  font-size: 30px;
 }
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.hml
new file mode 100644
index 0000000..95ddce9
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="width: 454px; height: 454px; left: 0px; top: 0px; flex-direction: column">
+  <stack style="width: 454px; height: 80px; margin-top: 80px">
+    <input type="button" style="left: 85px; width: 130px; height: 60px; top: 10px" value="首页" onclick="backMain" />
+    <input type="button" style="left: 235px; width: 130px; height: 60px; top: 10px" value="上一页" onclick="backSuperior" />
+  </stack>
+  <list
+    id="list1"
+    ref="listObj"
+    style="width: 280px; height: 200px; margin-left: 85px; flex-direction: column; border-width: 1px; border-color: #ff0000"
+    onclick="listClick"
+    onscrollend="scrollEnd"
+  >
+    <list-item style="width: 280px; height: 50px" for="{{ listData }}">
+      <text style="width: 280px; height: 50px"> item-{{ $idx }} </text>
+    </list-item>
+  </list>
+  <input type="button" style="width: 130px; height: 40px; margin-left: 170px" value="scrollTo" onclick="clickscrollTo" />
+  <text class="text" style="margin-left: 45px"> 点击button回到item-2 </text>
+</div>
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list13/list13.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list2/list2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.css
index c56bf1d..66bbf1d
--- a/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.css
@@ -15,8 +15,6 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
 
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list3/list3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list4/list4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list5/list5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list6/list6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list7/list7.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list8/list8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.css b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.css
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.js b/frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/list/list/list9/list9.js
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.css b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.css
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.js b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.js
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.css b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.css
old mode 100755
new mode 100644
similarity index 93%
rename from examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.css
index eb7dde2..6e00e0f
--- a/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.css
@@ -62,23 +62,17 @@
 .three-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .three-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .three-right-div {
   width: 230px;
   height: 190px;
-  top: 40px;
-  left: 0px;
 }
 
 .item-two {
@@ -89,16 +83,12 @@
 .two-left-div {
   width: 220px;
   height: 150px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 150px;
-  left: 0px;
-  top: 0px;
 }
 
 .general-stack {
@@ -121,8 +111,6 @@
   width: 250px;
   height: 200px;
   background-color: springgreen;
-  left: 0px;
-  top: 0px;
 }
 
 .show {
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.js b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/commonStyle/commonStyle.js
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/event/event.css b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/event/event.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/marquee/event/event.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/event/event.css
index d396d80..b13016e
--- a/examples/showcase/src/main/js/default/pages/component/marquee/event/event.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/event/event.css
@@ -62,23 +62,17 @@
 .two-right-div {
   width: 230px;
   height: 200px;
-  top: 40px;
-  left: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .click-text {
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/event/event.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/event/event.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/event/event.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/event/event.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/event/event.js b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/event/event.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/event/event.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/event/event.js
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.css b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.css
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.js b/frameworks/examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/marquee/specStyle/specStyle.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/indexStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker1/text_picker1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker10/text_picker10.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.css
index 7a5644b..213527d
--- a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.css
@@ -22,7 +22,5 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.hml
old mode 100755
new mode 100644
similarity index 91%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.hml
index f05c83b..713a3ee
--- a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.hml
@@ -15,8 +15,8 @@ limitations under the License.
 
     <stack class="stack" >
         <stack style="width:454px;height:80px;top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <picker-view type="text" range="{{textContent}}" style="width:280px;height:60px;top:170px;left:85px;background-color:#00ff00;">
         </picker-view>
@@ -29,4 +29,4 @@ limitations under the License.
         <text class="text" style="left:105px;width:280px;top:340px;">
           {{text3}}
         </text>
-    </div>
+    </stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker2/text_picker2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker3/text_picker3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker4/text_picker4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker5/text_picker5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker6/text_picker6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker7/text_picker7.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker8/text_picker8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/text_picker/text_picker9/text_picker9.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/indexStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker1/time_picker1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.hml
old mode 100755
new mode 100644
similarity index 92%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.hml
index 0c88404..a5f352a
--- a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.hml
@@ -15,8 +15,8 @@ limitations under the License.
 
     <div style="width:454px;height:454px;left:0px;top:0px;flex-direction:column;" >
         <stack style="width:454px;height:80px;margin-top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <picker-view type="time" selected="0:0" style="width:280px;height:120px;margin-top:10px;margin-left:85px;display:{{status}}">
         </picker-view>
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker10/time_picker10.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.css
index 7a5644b..213527d
--- a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.css
@@ -22,7 +22,5 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.hml
old mode 100755
new mode 100644
similarity index 91%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.hml
index b60fa88..069dd08
--- a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.hml
@@ -15,8 +15,8 @@ limitations under the License.
 
     <stack class="stack" >
         <stack style="width:454px;height:80px;top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <picker-view type="time" style="width:280px;height:60px;top:170px;left:85px;background-color:#00ff00;">
         </picker-view>
@@ -29,4 +29,4 @@ limitations under the License.
         <text class="text" style="left:105px;width:280px;top:340px;">
           {{text3}}
         </text>
-    </div>
+    </stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker2/time_picker2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker3/time_picker3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker4/time_picker4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker5/time_picker5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.hml
old mode 100755
new mode 100644
similarity index 92%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.hml
index 9ecbc34..c1caba4
--- a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.hml
@@ -15,8 +15,8 @@ limitations under the License.
 
     <div style="width:454px;height:454px;left:0px;top:0px;flex-direction:column;" >
         <stack style="width:454px;height:80px;margin-top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <picker-view type="time" selected="0:0" show="{{status}}" style="width:280px;height:120px;margin-top:10px;margin-left:85px;">
         </picker-view>
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker6/time_picker6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.hml
old mode 100755
new mode 100644
similarity index 89%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.hml
index 1f67fca..5c9a7ec
--- a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.hml
@@ -15,12 +15,12 @@ limitations under the License.
 
     <div style="width:454px;height:454px;left:0px;top:0px;flex-direction:column;" >
         <stack style="width:454px;height:80px;margin-top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <picker-view type="time" selected="0:0" if="{{status}}" style="width:280px;height:120px;margin-top:10px;margin-left:85px;">
         </picker-view>
-        <input type="button" class="text" style="margin-left:105px;width:230px;" value="if" onclick=changeStatus>
+        <input type="button" class="text" style="margin-left:105px;width:230px;" value="if" onclick="changeStatus">
           show
         </input>
         <text class="text" style="margin-left:105px;width:280px;">
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker7/time_picker7.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker8/time_picker8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.css b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.css
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.js b/frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/picker_view/time_picker/time_picker9/time_picker9.js
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.css b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.css
index f5649f6..d15c720
--- a/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.css
@@ -71,8 +71,8 @@
   center-x: 50px;
   center-y: 50px;
   radius: 50px;
-  start-angle: 0;
-  total-angle: 360;
+  start-angle: 0deg;
+  total-angle: 360deg;
   stroke-width: 6px;
   background-color: #8b8b7a;
   color: #ff0000;
@@ -84,8 +84,8 @@
   center-x: 15px;
   center-y: 15px;
   radius: 15px;
-  start-angle: 0;
-  total-angle: 360;
+  start-angle: 0deg;
+  total-angle: 360deg;
   stroke-width: 6px;
   background-color: #8b8b7a;
   color: #ff0000;
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.js b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/attr/attr.js
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.css b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.css
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.css
index b5952b5..a60de29
--- a/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.css
@@ -50,8 +50,8 @@
   center-x: 50px;
   center-y: 50px;
   radius: 50px;
-  start-angle: 0;
-  total-angle: 360;
+  start-angle: 0deg;
+  total-angle: 360deg;
 }
 
 .item-click {
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.js b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/event/event.js
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.css b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.css
old mode 100755
new mode 100644
similarity index 89%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.css
index b85e5fb..1d8e2a9
--- a/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.css
@@ -52,23 +52,17 @@
 .three-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .three-left-div {
   width: 240px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .three-right-div {
   width: 230px;
   height: 210px;
-  top: 40px;
-  left: 0px;
 }
 
 .general-stack {
@@ -84,8 +78,8 @@
   center-x: 50px;
   center-y: 50px;
   radius: 50px;
-  start-angle: 0;
-  total-angle: 120;
+  start-angle: 0deg;
+  total-angle: 120deg;
   left: 20px;
   top: 20px;
   background-color: #ff0000;
@@ -106,8 +100,8 @@
   height: 70px;
   center-x: 35px;
   center-y: 35px;
-  start-angle: 0;
-  total-angle: 360;
+  start-angle: 0deg;
+  total-angle: 360deg;
   radius: 35px;
   stroke-width: 5px;
 }
@@ -119,8 +113,8 @@
   padding: 10px;
   center-x: 65px;
   center-y: 65px;
-  start-angle: 0;
-  total-angle: 360;
+  start-angle: 0deg;
+  total-angle: 360deg;
   radius: 50px;
   width: 130px;
   height: 130px;
@@ -132,8 +126,8 @@
 .special-style {
   center-x: 50px;
   center-y: 50px;
-  start-angle: 10;
-  total-angle: 180;
+  start-angle: 10deg;
+  total-angle: 180deg;
   radius: 50px;
   width: 100px;
   height: 100px;
@@ -146,14 +140,10 @@
 .two-right-div {
   width: 230px;
   height: 150px;
-  top: 40px;
-  left: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 150px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.js b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/circle/style/style.js
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.css b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.css
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.hml
old mode 100755
new mode 100644
similarity index 97%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.hml
index f216fc0..bb32f71
--- a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.hml
@@ -40,7 +40,7 @@ limitations under the License.
           for="{{ listData }}"
           type="horizontal"
           percent="{{ show }}"
-          style="width: 100px; height: 50px; stroke-width: 5"
+          style="width: 100px; height: 50px; stroke-width: 5px"
         ></progress>
       </div>
     </div>
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.js b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.js
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.css b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.css
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.js b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/event/event.js
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.css b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.css
old mode 100755
new mode 100644
similarity index 92%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.css
index 53adbc3..3866bfb
--- a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.css
@@ -52,23 +52,17 @@
 .three-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .three-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .three-right-div {
   width: 230px;
   height: 190px;
-  top: 40px;
-  left: 0px;
 }
 
 .general-stack {
@@ -131,29 +125,21 @@
 .two-right-div {
   width: 230px;
   height: 150px;
-  top: 40px;
-  left: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 150px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 150px;
-  left: 0px;
-  top: 0px;
 }
 
 .style-right-div {
   width: 250px;
   height: 200px;
-  left: 10px;
-  top: 10px;
   flex-direction: column;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.js b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/style/style.js
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/progress/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/progress/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/progress/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/progress/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.css b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.css
old mode 100755
new mode 100644
similarity index 91%
rename from examples/showcase/src/main/js/default/pages/component/slider/attr/attr.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.css
index 2929d28..0985799
--- a/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.css
@@ -38,23 +38,17 @@
 .two-div {
   width: 450px;
   height: 150px;
-  left: 0px;
-  top: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 150px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-right-div {
   width: 230px;
   height: 150px;
-  top: 40px;
-  left: 0px;
 }
 
 .item-three {
@@ -65,23 +59,17 @@
 .three-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .three-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .three-right-div {
   width: 230px;
   height: 190px;
-  top: 40px;
-  left: 0px;
 }
 
 .slider {
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/slider/attr/attr.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.js b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/slider/attr/attr.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/attr/attr.js
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/event/event.css b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/event/event.css
old mode 100755
new mode 100644
similarity index 95%
rename from examples/showcase/src/main/js/default/pages/component/slider/event/event.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/event/event.css
index 71c47bd..d57c01f
--- a/examples/showcase/src/main/js/default/pages/component/slider/event/event.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/event/event.css
@@ -38,23 +38,17 @@
 .two-div {
   width: 450px;
   height: 300px;
-  left: 0px;
-  top: 0px;
 }
 
 .two-left-div {
   width: 220px;
   height: 300px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .three-right-div {
   width: 230px;
   height: 300px;
-  top: 40px;
-  left: 0px;
 }
 
 .slider {
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/event/event.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/event/event.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/slider/event/event.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/event/event.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/event/event.js b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/event/event.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/slider/event/event.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/event/event.js
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/slider/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/slider/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/slider/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/style/style.css b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/style/style.css
old mode 100755
new mode 100644
similarity index 95%
rename from examples/showcase/src/main/js/default/pages/component/slider/style/style.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/style/style.css
index 8c5adfc..39d737e
--- a/examples/showcase/src/main/js/default/pages/component/slider/style/style.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/style/style.css
@@ -53,8 +53,6 @@
 .two-right-div {
   width: 230px;
   height: 150px;
-  top: 40px;
-  left: 0px;
 }
 
 .item-three {
@@ -65,23 +63,17 @@
 .three-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .three-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .three-right-div {
   width: 230px;
   height: 190px;
-  top: 40px;
-  left: 0px;
 }
 
 .slider {
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/style/style.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/style/style.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/slider/style/style.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/style/style.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/slider/style/style.js b/frameworks/examples/showcase/src/main/js/default/pages/component/slider/style/style.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/slider/style/style.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/slider/style/style.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEffect/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/indexStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack1/stack1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.css
index 7a5644b..213527d
--- a/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.css
@@ -22,7 +22,5 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
diff --git a/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.hml
new file mode 100644
index 0000000..da246b0
--- /dev/null
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.hml
@@ -0,0 +1,35 @@
+    <!--
+    Copyright (c) 2020 Huawei Device 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.
+    -->
+
+<stack class="stack" >
+    <stack style="width:454px;height:80px;top:80px;">
+      <input type="button" style="left:85px;width:130px;height:60px;top:10px;" value="首页" onclick="backMain"/>
+      <input type="button" style="left:235px;width:130px;height:60px;top:10px;" value="上一页" onclick="backSuperior"/>
+    </stack>
+    <stack style="width:280px;height:60px;top:170px;left:85px;background-color:#00ff00;">
+      <text style="width:280px;height:50px;font-size:30px;">
+        stack已设置样式
+      </text>
+    </stack>
+    <text class="text" style="left:105px;width:280px;top:260px;">
+      {{text1}}
+    </text>
+    <text class="text" style="left:105px;width:280px;top:300px;">
+      {{text2}}
+    </text>
+    <text class="text" style="left:105px;width:280px;top:340px;">
+      {{text3}}
+    </text>
+</stack>
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack2/stack2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack3/stack3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.css
old mode 100755
new mode 100644
similarity index 94%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.css
index 1426740..31cb152
--- a/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.css
@@ -15,7 +15,5 @@
 .text {
   width: 200px;
   height: 50px;
-  margin-top: 10px;
-  margin-left: 10px;
   font-size: 30px;
 }
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack4/stack4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.hml
old mode 100755
new mode 100644
similarity index 91%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.hml
index dad4463..67f6be9
--- a/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.hml
@@ -15,8 +15,8 @@ limitations under the License.
 
     <div style="height:454px;width:454px;flex-direction:column;" >
         <stack style="width:454px;height:80px;margin-top:80px;">
-          <input type="button" style="left:85px;width:130px;height:60px;top:10px;" value="首页" onclick=backMain/>
-          <input type="button" style="left:235px;width:130px;height:60px;top:10px;" value="上一页" onclick=backSuperior/>
+          <input type="button" style="left:85px;width:130px;height:60px;top:10px;" value="首页" onclick="backMain"/>
+          <input type="button" style="left:235px;width:130px;height:60px;top:10px;" value="上一页" onclick="backSuperior"/>
         </stack>
         <stack style="width:260px;height:200px;margin-top:10px;margin-left:85px;background-color:#00ff00;">
           <image src="common/leftHead.png" style="left:10px;top:10px;height:100px;width:100px;"/>
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack5/stack5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack6/stack6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack7/stack7.js
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.hml
old mode 100755
new mode 100644
similarity index 98%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.hml
index acaeaa3..5e477fe
--- a/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.hml
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div style="width: 454px; height: 454px; left: 0px; top: 0px; flex-direction: column">
+<div style="width: 454px; height: 454px; left: 0px; top: 0px; flex-direction: column;">
   <stack style="width: 454px; height: 80px; margin-top: 80px">
     <input type="button" style="left: 85px; width: 130px; height: 60px; top: 10px" value="首页" onclick="backMain" />
     <input
diff --git a/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/stack/stack8/stack8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexAttr/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexEvent/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexSpecSet/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/indexStyle/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper1/swiper1.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper10/swiper10.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper11/swiper11.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper2/swiper2.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper3/swiper3.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper4/swiper4.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper5/swiper5.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper6/swiper6.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.js
old mode 100755
new mode 100644
similarity index 93%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.js
index f030ff1..370aeb8
--- a/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.js
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper7/swiper7.js
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { backPage } from "../../../../common/js/general";
 import { changeStatus } from "../../../../common/js/swiper";
 export default {
   data: {
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper8/swiper8.js
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.css b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.css
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.js b/frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/swiper/swiper9/swiper9.js
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/attr/attr.css b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/attr/attr.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/attr/attr.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/attr/attr.css
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/attr/attr.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/attr/attr.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/attr/attr.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/attr/attr.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/attr/attr.js b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/attr/attr.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/attr/attr.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/attr/attr.js
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/event/event.css b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/event/event.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/event/event.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/event/event.css
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/event/event.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/event/event.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/event/event.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/event/event.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/event/event.js b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/event/event.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/event/event.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/event/event.js
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/style/style.css b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/style/style.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/style/style.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/style/style.css
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/style/style.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/style/style.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/style/style.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/style/style.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/switch/style/style.js b/frameworks/examples/showcase/src/main/js/default/pages/component/switch/style/style.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/switch/style/style.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/switch/style/style.js
diff --git a/examples/showcase/src/main/js/default/pages/component/text/attr/attr.css b/frameworks/examples/showcase/src/main/js/default/pages/component/text/attr/attr.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/attr/attr.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/attr/attr.css
diff --git a/examples/showcase/src/main/js/default/pages/component/text/attr/attr.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/text/attr/attr.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/attr/attr.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/attr/attr.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/text/attr/attr.js b/frameworks/examples/showcase/src/main/js/default/pages/component/text/attr/attr.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/attr/attr.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/attr/attr.js
diff --git a/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.css b/frameworks/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.css
old mode 100755
new mode 100644
similarity index 93%
rename from examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.css
index ca33b51..c09fa43
--- a/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.css
+++ b/frameworks/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.css
@@ -62,23 +62,17 @@
 .three-div {
   width: 450px;
   height: 200px;
-  left: 0px;
-  top: 0px;
 }
 
 .three-left-div {
   width: 220px;
   height: 200px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .three-right-div {
   width: 230px;
   height: 190px;
-  top: 40px;
-  left: 0px;
 }
 
 .item-two {
@@ -89,16 +83,12 @@
 .two-left-div {
   width: 220px;
   height: 150px;
-  left: 0px;
-  top: 0px;
   flex-direction: column;
 }
 
 .two-div {
   width: 450px;
   height: 150px;
-  left: 0px;
-  top: 0px;
 }
 
 .general-stack {
@@ -121,8 +111,6 @@
   width: 250px;
   height: 200px;
   background-color: springgreen;
-  left: 0px;
-  top: 0px;
 }
 
 .show {
diff --git a/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.js b/frameworks/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/commonStyle/commonStyle.js
diff --git a/examples/showcase/src/main/js/default/pages/component/text/event/event.css b/frameworks/examples/showcase/src/main/js/default/pages/component/text/event/event.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/event/event.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/event/event.css
diff --git a/examples/showcase/src/main/js/default/pages/component/text/event/event.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/text/event/event.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/event/event.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/event/event.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/text/event/event.js b/frameworks/examples/showcase/src/main/js/default/pages/component/text/event/event.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/event/event.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/event/event.js
diff --git a/examples/showcase/src/main/js/default/pages/component/text/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/component/text/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/component/text/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/text/index/index.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/index/index.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/text/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/component/text/index/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/index/index.js
diff --git a/examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.css b/frameworks/examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.css
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.css
diff --git a/examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.hml b/frameworks/examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.hml
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.hml
diff --git a/examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.js b/frameworks/examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.js
rename to frameworks/examples/showcase/src/main/js/default/pages/component/text/specStyle/specStyle.js
diff --git a/examples/showcase/src/main/js/default/pages/index/index.css b/frameworks/examples/showcase/src/main/js/default/pages/index/index.css
old mode 100755
new mode 100644
similarity index 100%
rename from examples/showcase/src/main/js/default/pages/index/index.css
rename to frameworks/examples/showcase/src/main/js/default/pages/index/index.css
diff --git a/examples/showcase/src/main/js/default/pages/index/index.hml b/frameworks/examples/showcase/src/main/js/default/pages/index/index.hml
old mode 100755
new mode 100644
similarity index 90%
rename from examples/showcase/src/main/js/default/pages/index/index.hml
rename to frameworks/examples/showcase/src/main/js/default/pages/index/index.hml
index 88e58a9..a5469ef
--- a/examples/showcase/src/main/js/default/pages/index/index.hml
+++ b/frameworks/examples/showcase/src/main/js/default/pages/index/index.hml
@@ -34,5 +34,9 @@ limitations under the License.
   <list-item class="buttonContainerStyle">
     <input type="button" class="buttonStyle" value="其他" onclick="changeComponent4" />
   </list-item>
+  <list-item class="separatorContainerStyle"> </list-item>
+  <list-item class="buttonContainerStyle">
+    <input type="button" class="buttonStyle" value="退出" onclick="exit" />
+  </list-item>
   <list-item style="height: 40px; width: 454px"> </list-item>
 </list>
diff --git a/examples/showcase/src/main/js/default/pages/index/index.js b/frameworks/examples/showcase/src/main/js/default/pages/index/index.js
old mode 100755
new mode 100644
similarity index 92%
rename from examples/showcase/src/main/js/default/pages/index/index.js
rename to frameworks/examples/showcase/src/main/js/default/pages/index/index.js
index 8a0740e..83b3754
--- a/examples/showcase/src/main/js/default/pages/index/index.js
+++ b/frameworks/examples/showcase/src/main/js/default/pages/index/index.js
@@ -13,9 +13,13 @@
  * limitations under the License.
  */
 import { backPage, routePage } from "../../common/js/general";
+import app from '@system.app';
 export default {
   changeComponent1: routePage("pages/component/index/containerIndex/index").changePage,
   changeComponent2: routePage("pages/component/index/baseIndex/index").changePage,
   changeComponent3: routePage("pages/component/index/formIndex/index").changePage,
-  changeComponent4: routePage("pages/component/index/otherIndex/index").changePage
+  changeComponent4: routePage("pages/component/index/otherIndex/index").changePage,
+  exit(){
+    app.terminate();
+  }
 };
diff --git a/include/base/dft_impl.h b/frameworks/include/base/dft_impl.h
similarity index 72%
rename from include/base/dft_impl.h
rename to frameworks/include/base/dft_impl.h
index e5dcd60..bd9b7af 100755
--- a/include/base/dft_impl.h
+++ b/frameworks/include/base/dft_impl.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -18,13 +18,20 @@
 
 #include "acelite_config.h"
 
-#ifdef OHOS_ACELITE_PRODUCT_WATCH
+#if (defined(OHOS_ACELITE_PRODUCT_WATCH)) || (defined(CHANGE_START_PAGE))
 #include "memory_heap.h"
 
 namespace OHOS {
 namespace ACELite {
 typedef void (*PageReplacedCallback)(const char *path, int state);
 
+struct Param {
+    const char *routerParam = nullptr;
+    const char *path = nullptr;
+};
+
+typedef void (*PageInfoFunc)(const Param param);
+
 class DftImpl final : public MemoryHeap {
 public:
     static DftImpl *GetInstance();
@@ -36,15 +43,17 @@ public:
      */
     void RegisterPageReplaced(PageReplacedCallback handler);
 
+    void RegisterPageChangedCallback(PageInfoFunc pageInfoFunc);
+
     /**
      * @fn DftImpl::CallbackPageReplaced()
      *
      * @brief Call the path handler if it's set
      */
-    void CallbackPageReplaced(int state);
+    void CallbackPageReplaced(int state, const char *param = nullptr);
 
 private:
-    DftImpl() : pageReplacedCallback_(nullptr) {}
+    DftImpl() : pageReplacedCallback_(nullptr), pageInfoFunc_(nullptr) {}
 
     ~DftImpl() = default;
 
@@ -56,8 +65,9 @@ private:
     char *GetPagePath();
 
     PageReplacedCallback pageReplacedCallback_;
+    PageInfoFunc pageInfoFunc_;
 };
 } // namespace ACELite
 } // namespace OHOS
 #endif // OHOS_ACELITE_PRODUCT_WATCH
-#endif // OHOS_ACELITE_DFT_IMPL_H
\ No newline at end of file
+#endif // OHOS_ACELITE_DFT_IMPL_H
diff --git a/include/base/js_config.h b/frameworks/include/base/js_config.h
old mode 100755
new mode 100644
similarity index 72%
rename from include/base/js_config.h
rename to frameworks/include/base/js_config.h
index 0c9e5d8..e7c0257
--- a/include/base/js_config.h
+++ b/frameworks/include/base/js_config.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -20,34 +20,12 @@
 
 /*
  * Usage:
- *     #if ENABLED(SECURE_C_FUNCTION)
- *     #if DISABLED(SECURE_C_FUNCTION)
- *     #if ENABLED(SECURE_C_FUNCTION) && DISABLED(LOG_OUTPUT)
- *     #if ENABLED(SECURE_C_FUNCTION) || ENABLED(LOG_OUTPUT)
+ *     #if DISABLED(LOG_OUTPUT)
+ *     #if ENABLED(LOG_OUTPUT)
  */
 #define ENABLED(CONFIGURATION) ((CONFIGURATION) == 1)
 #define DISABLED(CONFIGURATION) ((CONFIGURATION) != 1)
 
-/**
- * Enable secure C functions on real device, and disable on PC simulator for
- * windows sdk version issue.
- *
- * Allowed values:
- *  0: Disable the secure C functions.
- *  1: Enable the secure C functions.
- *
- * Default: 1 on real device and 0 on PC simulator.
- */
-#if (!defined _WIN32) && (!defined _WIN64)
-#ifndef SECURE_C_FUNCTION
-#define SECURE_C_FUNCTION 1 // modify here for real device case
-#endif
-#else
-#ifndef SECURE_C_FUNCTION
-#define SECURE_C_FUNCTION 0 // modify here for PC simulator case
-#endif
-#endif
-
 /**
  * Enable/Disable JS framework runtime performance measurement.
  *
diff --git a/include/base/js_debugger_config.h b/frameworks/include/base/js_debugger_config.h
old mode 100755
new mode 100644
similarity index 75%
rename from include/base/js_debugger_config.h
rename to frameworks/include/base/js_debugger_config.h
index 3afe749..134ea33
--- a/include/base/js_debugger_config.h
+++ b/frameworks/include/base/js_debugger_config.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -25,8 +25,16 @@
  */
 namespace OHOS {
 namespace ACELite {
-enum DebugProtocol { TCP, SERIAL };
-enum DebugChannel { WEBSOCKET, RAWPACKET };
+// the protocol type the engine supports
+enum DebugProtocol : uint8_t {
+    TCP,
+    SERIAL
+};
+// the protocol channel type the engine supports
+enum DebugChannel : uint8_t {
+    WEBSOCKET,
+    RAWPACKET
+};
 const uint16_t DEFAULT_PORT = 5001; // default port
 struct DebuggerConfig : public MemoryHeap {
     DebugProtocol protocol;   // use tcp as default
@@ -34,18 +42,28 @@ struct DebuggerConfig : public MemoryHeap {
     uint32_t heapSize;        // the JS heap size want to setup, count in bytes
     uint16_t port;            // used for tcp, default is 5001
     bool startDebuggerServer; // default is false
-    bool logToFile;           // default print to stdout
     bool snapshotMode;        // if run in snapshot mode
-    char *logFilePath;        // the log file path
     DebuggerConfig()
         : protocol(TCP),
           channel(WEBSOCKET),
           heapSize(0),
           port(DEFAULT_PORT),
           startDebuggerServer(false),
-          logToFile(false),
-          snapshotMode(false),
-          logFilePath(nullptr)
+          snapshotMode(false)
+    {
+    }
+    DebuggerConfig(DebugProtocol debugProtocol,
+                   DebugChannel debugChannel,
+                   uint32_t size,
+                   uint16_t debuggerPort,
+                   bool startServer,
+                   bool isSnapshotMode)
+        : protocol(debugProtocol),
+          channel(debugChannel),
+          heapSize(size),
+          port(debuggerPort),
+          startDebuggerServer(startServer),
+          snapshotMode(isSnapshotMode)
     {
     }
 };
@@ -64,27 +82,10 @@ public:
      *
      * @return an instance of debugger
      */
-    static Debugger &GetInstance()
-    {
-        static Debugger instance;
-        return instance;
-    }
-    Debugger()
-#if ENABLED(ENGINE_DEBUGGER)
-        : consoleLogFileHandler_(nullptr),
-#ifdef JS_ENGINE_EXTERNAL_CONTEXT
-          engineContext_(nullptr),
-#endif // JS_ENGINE_EXTERNAL_CONTEXT
-          debuggerStarted_(false)
-#endif // ENABLED(ENGINE_DEBUGGER)
-          {}
+    static Debugger &GetInstance();
+    Debugger() = default;
     ~Debugger() = default;
 
-    /**
-     * @brief Configure related debugger
-     */
-    void ConfigDebugger();
-
     /**
      * @brief Get state of the debugger
      *
@@ -132,13 +133,12 @@ public:
     void ReleaseJSContext();
 private:
 #if ENABLED(ENGINE_DEBUGGER)
-    FILE *consoleLogFileHandler_;
 #ifdef JS_ENGINE_EXTERNAL_CONTEXT
-    void *engineContext_;
+    void *engineContext_ = nullptr;
 #endif // JS_ENGINE_EXTERNAL_CONTEXT
-    bool debuggerStarted_;
+    bool debuggerStarted_ = false;
+    DebuggerConfig debuggerConfig_ = {TCP, WEBSOCKET, 0, DEFAULT_PORT, false, false};
 #endif // ENABLED(ENGINE_DEBUGGER)
-    DebuggerConfig debuggerConfig_;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/frameworks/include/base/product_adapter.h b/frameworks/include/base/product_adapter.h
new file mode 100644
index 0000000..ed60067
--- /dev/null
+++ b/frameworks/include/base/product_adapter.h
@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_ACE_DFX_ADAPTER_H
+#define OHOS_ACELITE_ACE_DFX_ADAPTER_H
+
+#include <cstdint>
+#include "jsi_types.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * This handler type is so specific for product, should be designed from OS dfx level.
+ */
+typedef void (*EventPrintHandler)(uint8_t info1, uint8_t info2, uint8_t info3, uint8_t info4);
+typedef void (*ErrCodePrintHandler)(uint8_t info1, uint8_t info2, uint8_t info3, uint16_t info4);
+
+/**
+ * The hook for outputing user's console log.
+ */
+typedef void (*JSLogOutputHandler)(uint8_t level, const char *content);
+
+/**
+ * The wrapper data structure for get native memory pool info.
+ */
+struct NativeMemInfo {
+    uint32_t totalSize; /* mem pool total size */
+    uint32_t freeSize;  /* total free size */
+};
+
+/**
+ * Native memory pool info getter.
+ */
+typedef void (*NativeMemInfoGetter)(NativeMemInfo *memInfo);
+
+/**
+ * Product modules hook.
+ */
+typedef Module* (*ProductModulesGetter)(uint16_t& moduleCount);
+
+/**
+ * Private modules hook.
+ */
+typedef PrivateModule* (*PrivateModulesGetter)(uint16_t& moduleCount);
+
+/**
+ * The hook for terminating ability.
+ */
+typedef void (*TerminateAbilityHandler)(uint32_t token, bool forceStop);
+
+/**
+ * As all the UI event handling is driven by the render tick, and to make sure the the event handling is
+ * in JS task, the HAL layer will transfer the TE event into the loop of JS task, when JS application go forground.
+ */
+typedef void (*RenderTEHandler)();
+typedef void (*VoidFuncHook)();
+
+/**
+ * The wrapper data structure for get native memory pool info.
+ */
+struct TEHandlingHooks {
+    RenderTEHandler renderTEHandler;
+    VoidFuncHook renderEndHandler;
+};
+
+enum TEDispatchingResult : uint8_t {
+    REFUSED = 0, // not on forground, will refuse TE, vsync should send it to other
+    ACCEPTED, // on forground, and TE event is received successfully
+    ACCEPT_FAILED, // on forground, but TE event can not be received, vsync should be retried to send to ACE again
+};
+
+/**
+ * The wrapper class for some product feature implementation, since some interfaces are provided by specific product.
+ */
+class ProductAdapter final {
+public:
+    ProductAdapter(const ProductAdapter &) = delete;
+    ProductAdapter &operator=(const ProductAdapter &) = delete;
+    ProductAdapter(ProductAdapter &&) = delete;
+    ProductAdapter &operator=(ProductAdapter &&) = delete;
+    ProductAdapter() = delete;
+    ~ProductAdapter() = delete;
+
+    // initialization functions
+    static void InitTraceHandlers(EventPrintHandler eventHandler, ErrCodePrintHandler errCodeHandler);
+    static void InitAceTags(uint8_t *aceTags, uint8_t tagCount);
+    static void InitConsoleNativeHandler(JSLogOutputHandler handler);
+    static void InitNativeMemPoolHook(NativeMemInfoGetter getter);
+    static void InitExtraModulesGetter(ProductModulesGetter productModuleGetter,
+                                       PrivateModulesGetter privateModuleGetter);
+    static void RegTerminatingHandler(TerminateAbilityHandler handler);
+    static void RegTEHandlers(const TEHandlingHooks &teHandlingHooks);
+    static TEDispatchingResult DispatchTEMessage();
+    static void SetDefaultFontStyle(const char *defaultFontFamily, uint8_t defaultFontSize);
+    static void SetScreenSize(uint16_t width, uint16_t height);
+
+    // wrapper functions, for ace internal calling
+    static void PrintEventTrace(uint8_t info2, uint8_t info3, uint8_t info4);
+    static void PrintErrCode(uint8_t info2, uint16_t rfu);
+    static void OutputJSConsoleLog(uint8_t level, const char *content);
+    static void GetNativeMemInfo(NativeMemInfo *memInfo);
+    static void SendTerminatingRequest(uint32_t token, bool forceStop);
+    static bool IsTEHandlersRegisted();
+    static void ProcessOneTE();
+    static void NotifyRenderEnd();
+    static const char *GetDefaultFontFamilyName();
+    static uint8_t GetDefaultFontSize();
+    static void UpdateShowingState(bool forground);
+    static void GetScreenSize(uint16_t &width, uint16_t &height);
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_ACE_DFX_ADAPTER_H
diff --git a/include/context/js_ability.h b/frameworks/include/context/js_ability.h
similarity index 85%
rename from include/context/js_ability.h
rename to frameworks/include/context/js_ability.h
index 8cb34b3..dc1671d 100755
--- a/include/context/js_ability.h
+++ b/frameworks/include/context/js_ability.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -23,12 +23,6 @@
 
 namespace OHOS {
 namespace ACELite {
-/**
- * As all the UI event handling is driven by the render tick, and to make sure the the event handling is
- * in JS task, the HAL layer will transfer the TE event into the loop of JS task, when JS application go forground.
- */
-typedef int32_t (*RenderTickHandler)();
-
 class JSAbility final : public MemoryHeap {
 public:
     JSAbility(const JSAbility &) = delete;
@@ -57,7 +51,7 @@ public:
      *        the JS framework and eval abilityPath/src/index.js as well
      * @param [in] the ability path to bundle name and token of this ability
      */
-    void Launch(const char *abilityPath, const char *bundleName, uint16_t token);
+    void Launch(const char *abilityPath, const char *bundleName, uint16_t token, const char *pageInfo = nullptr);
 
     /**
      * @fn JSAbility::Show()
@@ -101,13 +95,6 @@ public:
      */
     void ForceDestroy();
 
-    /**
-     * @fn JSAbility::RegisterTEHandler()
-     *
-     * @brief Register render tick event handler
-     */
-    static void RegisterTEHandler(RenderTickHandler handler);
-
     /**
      * @fn JSAbility::HandleRenderTick()
      *
@@ -115,6 +102,13 @@ public:
      */
     void HandleRenderTick();
 
+    /**
+     * @fn JSAbility::LazyLoadHandleRenderTick()
+     *
+     * @brief Call the lazy load tick if it's set
+     */
+    static void LazyLoadHandleRenderTick(void *data);
+
 private:
     // the holder of JS runtime and user' JS related environment
     void *jsAbilityImpl_;
diff --git a/include/resource/video_panel_image_res.h b/frameworks/include/resource/video_panel_image_res.h
old mode 100755
new mode 100644
similarity index 100%
rename from include/resource/video_panel_image_res.h
rename to frameworks/include/resource/video_panel_image_res.h
diff --git a/packages/runtime-core/.babelrc b/frameworks/packages/runtime-core/.babelrc
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/.babelrc
rename to frameworks/packages/runtime-core/.babelrc
diff --git a/packages/runtime-core/.editorconfig b/frameworks/packages/runtime-core/.editorconfig
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/.editorconfig
rename to frameworks/packages/runtime-core/.editorconfig
diff --git a/packages/runtime-core/.eslintignore b/frameworks/packages/runtime-core/.eslintignore
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/.eslintignore
rename to frameworks/packages/runtime-core/.eslintignore
diff --git a/packages/runtime-core/.eslintrc.js b/frameworks/packages/runtime-core/.eslintrc.js
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/.eslintrc.js
rename to frameworks/packages/runtime-core/.eslintrc.js
diff --git a/packages/runtime-core/.gitignore b/frameworks/packages/runtime-core/.gitignore
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/.gitignore
rename to frameworks/packages/runtime-core/.gitignore
diff --git a/packages/runtime-core/.prettierrc b/frameworks/packages/runtime-core/.prettierrc
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/.prettierrc
rename to frameworks/packages/runtime-core/.prettierrc
diff --git a/packages/runtime-core/.size-snapshot.json b/frameworks/packages/runtime-core/.size-snapshot.json
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/.size-snapshot.json
rename to frameworks/packages/runtime-core/.size-snapshot.json
diff --git a/packages/runtime-core/contribution.md b/frameworks/packages/runtime-core/contribution.md
similarity index 93%
rename from packages/runtime-core/contribution.md
rename to frameworks/packages/runtime-core/contribution.md
index 8d43fbf..02d9f02 100644
--- a/packages/runtime-core/contribution.md
+++ b/frameworks/packages/runtime-core/contribution.md
@@ -27,7 +27,7 @@
  > cd packages/runtime-core/build/
  > ./../../../tools/snapshot/jerry_bin/linux/jerry-snapshot generate -o framework.min.bc ./framework.min.js
 
- ## 5. Update the JS and sanpshot array in C++ code
+ ## 5. Update the JS and snapshot array in C++ code
  > cd tools/snapshot/
  > python framework2char.py
 
diff --git a/packages/runtime-core/package-lock.json b/frameworks/packages/runtime-core/package-lock.json
similarity index 100%
rename from packages/runtime-core/package-lock.json
rename to frameworks/packages/runtime-core/package-lock.json
diff --git a/packages/runtime-core/package.json b/frameworks/packages/runtime-core/package.json
similarity index 100%
rename from packages/runtime-core/package.json
rename to frameworks/packages/runtime-core/package.json
diff --git a/packages/runtime-core/scripts/build.js b/frameworks/packages/runtime-core/scripts/build.js
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/scripts/build.js
rename to frameworks/packages/runtime-core/scripts/build.js
diff --git a/packages/runtime-core/scripts/configs.js b/frameworks/packages/runtime-core/scripts/configs.js
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/scripts/configs.js
rename to frameworks/packages/runtime-core/scripts/configs.js
diff --git a/packages/runtime-core/src/__test__/index.test.js b/frameworks/packages/runtime-core/src/__test__/index.test.js
similarity index 100%
rename from packages/runtime-core/src/__test__/index.test.js
rename to frameworks/packages/runtime-core/src/__test__/index.test.js
diff --git a/packages/runtime-core/src/core/index.js b/frameworks/packages/runtime-core/src/core/index.js
similarity index 100%
rename from packages/runtime-core/src/core/index.js
rename to frameworks/packages/runtime-core/src/core/index.js
diff --git a/packages/runtime-core/src/index.js b/frameworks/packages/runtime-core/src/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/src/index.js
rename to frameworks/packages/runtime-core/src/index.js
diff --git a/packages/runtime-core/src/observer/index.js b/frameworks/packages/runtime-core/src/observer/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/src/observer/index.js
rename to frameworks/packages/runtime-core/src/observer/index.js
diff --git a/packages/runtime-core/src/observer/observer.js b/frameworks/packages/runtime-core/src/observer/observer.js
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/src/observer/observer.js
rename to frameworks/packages/runtime-core/src/observer/observer.js
diff --git a/packages/runtime-core/src/observer/subject.js b/frameworks/packages/runtime-core/src/observer/subject.js
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/src/observer/subject.js
rename to frameworks/packages/runtime-core/src/observer/subject.js
diff --git a/packages/runtime-core/src/observer/utils.js b/frameworks/packages/runtime-core/src/observer/utils.js
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/src/observer/utils.js
rename to frameworks/packages/runtime-core/src/observer/utils.js
diff --git a/packages/runtime-core/src/profiler/index.js b/frameworks/packages/runtime-core/src/profiler/index.js
old mode 100755
new mode 100644
similarity index 100%
rename from packages/runtime-core/src/profiler/index.js
rename to frameworks/packages/runtime-core/src/profiler/index.js
diff --git a/src/core/animation/transition_impl.cpp b/frameworks/src/core/animation/transition_impl.cpp
similarity index 80%
rename from src/core/animation/transition_impl.cpp
rename to frameworks/src/core/animation/transition_impl.cpp
index 3f0afec..6b31fd4 100755
--- a/src/core/animation/transition_impl.cpp
+++ b/frameworks/src/core/animation/transition_impl.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -12,16 +12,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-#include "transition_impl.h"
 
+#include "transition_impl.h"
 #include <stdlib.h>
-#if ENABLED(SECURE_C_FUNCTION)
-#include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 #include "ace_log.h"
 #include "ace_mem_base.h"
 #include "easing_equation.h"
 #include "root_view.h"
+#include "securec.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -40,6 +38,7 @@ void TransitionImpl::Init()
 
 void TransitionImpl::Callback(UIView* view)
 {
+    (void)(view);
     if (animator_ == nullptr) {
         return;
     }
@@ -56,27 +55,27 @@ void TransitionImpl::Callback(UIView* view)
 
 void TransitionImpl::Start()
 {
-    if (animator_) {
-        uint8_t state = animator_->GetState();
-        if (((state == Animator::STOP) || (state == Animator::PAUSE)) && (params_.during > 0)) {
-            RecordViewStatus();
-            InitTransitionParams();
-            animator_->Start();
-        }
-    } else {
+    if (animator_ == nullptr) {
         HILOG_INFO(HILOG_MODULE_ACE, "animator not initial or has been started");
+        return;
+    }
+    uint8_t state = animator_->GetState();
+    if (((state == Animator::STOP) || (state == Animator::PAUSE)) && (params_.during > 0)) {
+        RecordViewStatus();
+        InitTransitionParams();
+        animator_->Start();
     }
 }
 
 void TransitionImpl::Stop() const
 {
-    if (animator_) {
-        uint8_t state = animator_->GetState();
-        if (state == Animator::START || state == Animator::RUNNING) {
-            animator_->Stop();
-        }
-    } else {
+    if (animator_ == nullptr) {
         HILOG_INFO(HILOG_MODULE_ACE, "animator not initial or is not running");
+        return;
+    }
+    uint8_t state = animator_->GetState();
+    if (state == Animator::START || state == Animator::RUNNING) {
+        animator_->Stop();
     }
 }
 
@@ -106,7 +105,7 @@ void TransitionImpl::InitTransitionParamsStyle()
         widthSrc_ = params_.width_from;
     }
     if (params_.opacity_from >= 0 && params_.opacity_to >= 0) {
-        isTransitionSet_[GeneralType::IS_OPCITY_TRANSITION_SET] = true;
+        isTransitionSet_[GeneralType::IS_OPACITY_TRANSITION_SET] = true;
         opacitySrc_ = (params_.opacity_from <= OPA_OPAQUE) ? params_.opacity_from : OPA_OPAQUE;
         params_.opacity_to = (params_.opacity_to <= OPA_OPAQUE) ? params_.opacity_to : OPA_OPAQUE;
     }
@@ -123,6 +122,7 @@ void TransitionImpl::InitTransitionParamsStyle()
 void TransitionImpl::InitTransitionParamsTransform()
 {
     if (params_.transformType == nullptr) {
+        HILOG_INFO(HILOG_MODULE_ACE, "transformType not set");
         return;
     }
     if (!strcmp(params_.transformType, TRANSITION_TRANSFORM_X)) {
@@ -201,9 +201,9 @@ void TransitionImpl::RotateAroundCenterPoint(int16_t angle)
     TransformMap transMap(view_->GetOrigRect());
     const int circleRate = 360;
     angle = angle % circleRate;
-    uint8_t halfVal = 2;
-    pivot_.x_ = view_->GetWidth() / halfVal;
-    pivot_.y_ = view_->GetHeight() / halfVal;
+    float halfVal = 2.0f;
+    pivot_.x_ = (view_->GetWidth() - 1) / halfVal;
+    pivot_.y_ = (view_->GetHeight() - 1) / halfVal;
     transMap.Rotate((angle), pivot_);
     view_->SetTransformMap(transMap);
 }
@@ -239,7 +239,7 @@ void TransitionImpl::Perform(int32_t elapsedTime)
         PerformTransition(params_.width_from, params_.width_to, TransitionType::WIDTH, widthSrc_, elapsedTime);
     }
 
-    if (isTransitionSet_[GeneralType::IS_OPCITY_TRANSITION_SET]) {
+    if (isTransitionSet_[GeneralType::IS_OPACITY_TRANSITION_SET]) {
         PerformTransition(params_.opacity_from, params_.opacity_to, TransitionType::OPACITY, opacitySrc_, elapsedTime);
     }
 
@@ -247,7 +247,7 @@ void TransitionImpl::Perform(int32_t elapsedTime)
         PerformTransitionBgColorLinear(elapsedTime);
     }
 
-    if (fill_ == OptionsFill::FNONE && timeArrivaled_) {
+    if ((fill_ == OptionsFill::FNONE) && timeArrivaled_) {
         RecoveryViewStatus(view_->GetRect());
     }
 
@@ -282,88 +282,83 @@ void TransitionImpl::PerformTransition(int16_t from,
                                        int16_t& updateAttrValue,
                                        int32_t elapsedTime)
 {
-    bool needUpdate = true;
-
     if (timeArrivaled_) {
         updateAttrValue = to;
     } else {
-        int16_t prefectchedValue = 0;
-        prefectchedValue = GetNextFrameValue(from, to, elapsedTime);
-        int16_t diffDistance = prefectchedValue - updateAttrValue;
+        int16_t prefetchedValue = 0;
+        prefetchedValue = GetNextFrameValue(from, to, elapsedTime);
+        int16_t diffDistance = prefetchedValue - updateAttrValue;
         if (((diffDistance < 1) && (diffDistance > -1)) || (elapsedTime > params_.during)) {
-            needUpdate = false;
-        } else {
-            updateAttrValue = static_cast<int16_t>(prefectchedValue);
+            return;
         }
+        updateAttrValue = static_cast<int16_t>(prefetchedValue);
     }
 
-    if (needUpdate) {
-        Rect invalidatedArea = view_->GetRect();
-
-        switch (transitionType) {
-            case TransitionType::TTRANSLATE_X:
-                view_->SetPosition((updateAttrValue + viewStatus_.x), viewStatus_.y);
-                break;
-            case TransitionType::TTRANSLATE_Y:
-                view_->SetPosition(viewStatus_.x, (updateAttrValue + viewStatus_.y));
-                break;
-            case TransitionType::TROTATE: {
-                RotateAroundCenterPoint(updateAttrValue);
-                break;
-            }
-            case TransitionType::HEIGHT:
-                view_->SetHeight(updateAttrValue);
-                break;
-            case TransitionType::WIDTH:
-                view_->SetWidth(updateAttrValue);
-                break;
-            case TransitionType::OPACITY: {
-                double rate = (double)updateAttrValue / ALPHA_MAX;
-                view_->SetStyle(STYLE_BACKGROUND_OPA, viewStatus_.rectOpacity * rate);
-                view_->SetStyle(STYLE_IMAGE_OPA, viewStatus_.imageOpacity * rate);
-                view_->SetStyle(STYLE_LINE_OPA, viewStatus_.lineOpacity * rate);
-                view_->SetStyle(STYLE_TEXT_OPA, viewStatus_.textOpacity * rate);
-                break;
-            }
-            default:
-                HILOG_INFO(HILOG_MODULE_ACE, "animation nothing to do.");
-                break;
+    Rect invalidatedArea = view_->GetRect();
+    switch (transitionType) {
+        case TransitionType::TTRANSLATE_X:
+            view_->SetPosition((updateAttrValue + viewStatus_.x), viewStatus_.y);
+            break;
+        case TransitionType::TTRANSLATE_Y:
+            view_->SetPosition(viewStatus_.x, (updateAttrValue + viewStatus_.y));
+            break;
+        case TransitionType::TROTATE: {
+            RotateAroundCenterPoint(updateAttrValue);
+            break;
         }
-
-        invalidatedArea.Join(invalidatedArea, view_->GetRect());
-        view_->InvalidateRect(invalidatedArea);
+        case TransitionType::HEIGHT:
+            view_->SetHeight(updateAttrValue);
+            break;
+        case TransitionType::WIDTH:
+            view_->SetWidth(updateAttrValue);
+            break;
+        case TransitionType::OPACITY: {
+            double rate = (double)updateAttrValue / ALPHA_MAX;
+            view_->SetStyle(STYLE_BACKGROUND_OPA, viewStatus_.rectOpacity * rate);
+            view_->SetStyle(STYLE_IMAGE_OPA, viewStatus_.imageOpacity * rate);
+            view_->SetStyle(STYLE_LINE_OPA, viewStatus_.lineOpacity * rate);
+            view_->SetStyle(STYLE_TEXT_OPA, viewStatus_.textOpacity * rate);
+            break;
+        }
+        default:
+            HILOG_INFO(HILOG_MODULE_ACE, "animation nothing to do.");
+            break;
     }
+
+    invalidatedArea.Join(invalidatedArea, view_->GetRect());
+    view_->InvalidateRect(invalidatedArea);
 }
 int8_t TransitionImpl::GetNumIterations(const char* iterations)
 {
+    int8_t min = 1;
+    int8_t max = 127;
+    if (iterations == nullptr) {
+        return min;
+    }
     if (!strcmp(iterations, "infinite")) {
         return TransitionImpl::ITERATIONS_INFINITY;
     }
-
-    int8_t min = 1;
-    int8_t max = 127;
     long value = strtol(iterations, nullptr, DEC);
     if ((value < min) || (value > max)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "animation iterations should set between 1 and 127");
         return min;
-    } else {
-        return (int8_t)value;
     }
+    return (int8_t)value;
 }
 
 bool TransitionImpl::IsEndWith(const char* src, const char* end)
 {
-    if (src == nullptr || end == nullptr) {
+    if ((src == nullptr) || (end == nullptr)) {
         return false;
     }
 
     size_t strLen = strlen(src);
     size_t endLen = strlen(end);
-    if (strLen < endLen || strLen == 0 || endLen == 0) {
+    if ((strLen < endLen) || (strLen == 0) || (endLen == 0)) {
         return false;
     }
 
-    while ((endLen > 0) && (strLen > 0)) {
+    while (endLen > 0) {
         if (src[strLen - 1] != end[endLen - 1]) {
             return false;
         }
diff --git a/src/core/animation/transition_impl.h b/frameworks/src/core/animation/transition_impl.h
similarity index 94%
rename from src/core/animation/transition_impl.h
rename to frameworks/src/core/animation/transition_impl.h
index 864feb1..fb669f5 100755
--- a/src/core/animation/transition_impl.h
+++ b/frameworks/src/core/animation/transition_impl.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -23,9 +23,9 @@
 
 namespace OHOS {
 namespace ACELite {
-enum EasingType { LINEAR, EASE_IN, EASE_OUT, EASE_IN_OUT, EEND };
+enum EasingType : uint8_t { LINEAR, EASE_IN, EASE_OUT, EASE_IN_OUT, EEND };
 
-enum OptionsFill { FNONE, FORWARDS };
+enum OptionsFill : uint8_t { FNONE, FORWARDS };
 
 struct TransitionParams {
     /* animation execution time (ms), default is 0, means no animation effect. */
@@ -91,17 +91,22 @@ struct ViewStatus {
                    oriRect(), background_color() {};
 };
 
-enum TransformType { TRANSLATE_X, TRANSLATE_Y, ROTATE, NONE }; // rotate only support image
+enum TransformType : uint8_t {
+    TRANSLATE_X,
+    TRANSLATE_Y,
+    ROTATE, // rotate only support image
+    NONE
+};
 
-enum GeneralType {
+enum GeneralType : uint8_t {
     IS_HEIGHT_TRANSITION_SET,
     IS_WIDTH_TRANSITION_SET,
     IS_BACKGROUND_COLOR_TRANSITION_SET,
-    IS_OPCITY_TRANSITION_SET,
+    IS_OPACITY_TRANSITION_SET,
     END
 };
 
-enum TransitionType {
+enum TransitionType : uint8_t {
     TTRANSLATE_X,
     TTRANSLATE_Y,
     TROTATE,
@@ -183,7 +188,7 @@ private:
     TransitionParams& params_;
     int8_t oriIteration_;
     Animator* animator_;
-    Vector2<int16_t> pivot_;
+    Vector2<float> pivot_;
     int16_t xSrc_;
     int16_t ySrc_;
     int16_t rotateSrc_;
diff --git a/src/core/async/js_async_work.cpp b/frameworks/src/core/async/js_async_work.cpp
similarity index 98%
rename from src/core/async/js_async_work.cpp
rename to frameworks/src/core/async/js_async_work.cpp
index 6765bd7..f1cd37c 100755
--- a/src/core/async/js_async_work.cpp
+++ b/frameworks/src/core/async/js_async_work.cpp
@@ -90,7 +90,8 @@ bool JsAsyncWork::DispatchAsyncWorkInner(AsyncWorkHandler workHandler, AsyncHand
 
     bool ret = DispatchToLoop(ASYNCWORK, static_cast<void *>(asyncWork));
     if (!ret) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "JsAsyncWork:DispatchAsyncWork failed!, handler[%p]", asyncWork->workHandler);
+        HILOG_ERROR(HILOG_MODULE_ACE, "JsAsyncWork:DispatchAsyncWork failed!, handler[%{private}p]",
+            asyncWork->workHandler);
         delete(asyncWork);
         asyncWork = nullptr;
     }
diff --git a/src/core/async/message_queue_utils.cpp b/frameworks/src/core/async/message_queue_utils.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/async/message_queue_utils.cpp
rename to frameworks/src/core/async/message_queue_utils.cpp
diff --git a/frameworks/src/core/base/ace_event_id.h b/frameworks/src/core/base/ace_event_id.h
new file mode 100644
index 0000000..90e1e71
--- /dev/null
+++ b/frameworks/src/core/base/ace_event_id.h
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_ACE_EVENT_ID_H
+#define OHOS_ACELITE_ACE_EVENT_ID_H
+
+// ACE framework event codes
+#define MT_ACE_RELEASE_HISTORY_PAGE  0x01
+#define MT_ACE_FEATUREABILITY  0x08
+#define MT_ACE_FEATUREABILITY_SUBSCRIBEMSG  0x00
+#define MT_ACE_FEATUREABILITY_UNSUBSCRIBEMSG  0x01
+
+// ACE framework error codes
+#define EXCE_ACE_FWK_LAUNCH_FAILED  0x01
+#define EXCE_ACE_ROUTER_REPLACE_FAILED  0x02
+#define EXCE_ACE_ASYNC_WORK_FAILED  0x03
+#define EXCE_ACE_LOCALIZATION_FAILED  0x04
+#define EXCE_ACE_ENGINE_RUNTIME_ERROR  0x05
+
+// ACE framework error code : engine runtime error
+#define EXCE_ACE_JS_HEAP_OOM  0x0001
+#define EXCE_ACE_JS_REF_COUNT_LIMIT  0x0002
+#define EXCE_ACE_JS_DISABLED_BYTE_CODE  0x0003
+#define EXCE_ACE_JS_FAILED_INTERNAL_ASSERTION  0x0004
+
+// ACE framework error code : fwk launch error
+#define EXCE_ACE_INVALID_APP_PATH  0x0001
+#define EXCE_ACE_INVALID_BUNDLE_NAME  0x0002
+#define EXCE_ACE_INIT_FWK_FAILED  0x0003
+#define EXCE_ACE_APP_ENTRY_MISSING  0x0004
+#define EXCE_ACE_APP_ENTRY_FILE_TOO_HUGE  0x0005
+#define EXCE_ACE_APP_ALREADY_LAUNCHED  0x0006
+#define EXCE_ACE_APP_INDEX_MISSING  0x0007
+#define EXCE_ACE_APP_FILE_TOO_HUGE  0x0008
+#define EXCE_ACE_APP_FILE_READ_FAILED  0x0009
+#define EXCE_ACE_APP_JS_EVAL_FAILED  0x000A
+#define EXCE_ACE_APP_NO_RENDER_FUNC  0x000B
+#define EXCE_ACE_APP_RENDER_FAILED  0x000C
+
+// ACE framework error code : router replace
+#define EXCE_ACE_ROUTER_REPLACE_BIND_URI_FAILED  0x0001
+#define EXCE_ACE_PAGE_INDEX_MISSING  0x0002
+#define EXCE_ACE_PAGE_FILE_TOO_HUGE  0x0003
+#define EXCE_ACE_PAGE_FILE_READ_FAILED  0x0004
+#define EXCE_ACE_PAGE_JS_EVAL_FAILED  0x0005
+#define EXCE_ACE_PAGE_NO_RENDER_FUNC  0x0006
+#define EXCE_ACE_PAGE_RENDER_FAILED  0x0007
+
+// ACE framework error code : async work
+#define EXCE_ACE_ASYNC_WORK_DISPATCH_FAILED  0x0001
+
+// ACE framework error code : localization
+#define EXCE_ACE_LOCALIZATION_SYSTEM_LANGUAGE_NOT_INITIALIZED  0x0001
+#define EXCE_ACE_LOCALIZATION_CJSON_CREATE_FAILED  0x0002
+#define EXCE_ACE_LOCALIZATION_VALUE_FAILED  0x0003
+
+#endif // OHOS_ACELITE_ACE_EVENT_ID_H
\ No newline at end of file
diff --git a/src/core/base/ace_log.cpp b/frameworks/src/core/base/ace_log.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/base/ace_log.cpp
rename to frameworks/src/core/base/ace_log.cpp
diff --git a/src/core/base/ace_log.h b/frameworks/src/core/base/ace_log.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/base/ace_log.h
rename to frameworks/src/core/base/ace_log.h
diff --git a/frameworks/src/core/base/ace_mem_base.cpp b/frameworks/src/core/base/ace_mem_base.cpp
new file mode 100755
index 0000000..9552526
--- /dev/null
+++ b/frameworks/src/core/base/ace_mem_base.cpp
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2020-2021 Huawei Device 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.
+ */
+#include "ace_mem_base.h"
+
+#include <cstdlib>
+#include "cache_manager.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * @brief g_customHookSet
+ * Record the memory hooks used for ACE, only can be setup once when system start-up.
+ * The standard memory allocating methods are used as default.
+ */
+static ACEMemHooks g_memoryHooks = {malloc, free, calloc};
+/**
+ * @brief g_customHookSet flag for representing if the customer hooks are set
+ */
+static bool g_customHookSet = false;
+
+void InitMemHooks(const ACEMemHooks &hooks)
+{
+    if (g_customHookSet) {
+        // only can be configured once
+        return;
+    }
+    if ((hooks.malloc_func == nullptr) || (hooks.free_func == nullptr)) {
+        // the malloc and free must be given
+        return;
+    }
+    g_memoryHooks.malloc_func = hooks.malloc_func;
+    g_memoryHooks.free_func = hooks.free_func;
+    g_memoryHooks.calloc_func = hooks.calloc_func;
+    // set the flag
+    g_customHookSet = true;
+}
+
+void InitCacheBuf(uintptr_t bufAddress, size_t bufSize)
+{
+    CacheManager::GetInstance().SetupCacheMemInfo(bufAddress, bufSize);
+}
+
+void *ace_malloc(size_t size)
+{
+    return g_memoryHooks.malloc_func(size);
+}
+
+void *ace_calloc(size_t num, size_t size)
+{
+    return (g_memoryHooks.calloc_func != nullptr) ? (g_memoryHooks.calloc_func(num, size)) : nullptr;
+}
+
+void ace_free(void *ptr)
+{
+    g_memoryHooks.free_func(ptr);
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/src/core/base/ace_version.h b/frameworks/src/core/base/ace_version.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/base/ace_version.h
rename to frameworks/src/core/base/ace_version.h
diff --git a/frameworks/src/core/base/async_task_manager.cpp b/frameworks/src/core/base/async_task_manager.cpp
new file mode 100755
index 0000000..5f0d4e1
--- /dev/null
+++ b/frameworks/src/core/base/async_task_manager.cpp
@@ -0,0 +1,170 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "async_task_manager.h"
+#include "ace_log.h"
+#include "fatal_handler.h"
+
+#if (defined(__LINUX__) || defined(__LITEOS_A__))
+#define TRY_LOCK()                  \
+    {                               \
+        pthread_mutex_lock(&lock_); \
+    }
+
+#define TRY_UNLOCK()                  \
+    {                                 \
+        pthread_mutex_unlock(&lock_); \
+    }
+#elif defined(__LITEOS_M__)
+#define TRY_LOCK()      \
+    {                   \
+        LOS_TaskLock(); \
+    }
+#define TRY_UNLOCK()      \
+    {                     \
+        LOS_TaskUnlock(); \
+    }
+#else
+#define TRY_LOCK() \
+    {              \
+    }
+#define TRY_UNLOCK() \
+    {                \
+    }
+#endif
+
+namespace OHOS {
+namespace ACELite {
+AsyncTaskManager::AsyncTaskManager()
+    : head_(nullptr),
+      tail_(nullptr),
+#if (defined(__LINUX__) || defined(__LITEOS_A__))
+      lock_(PTHREAD_MUTEX_INITIALIZER),
+#endif
+      uniqueTaskID_(0),
+      front_(true)
+{
+#if (defined(__LINUX__) || defined(__LITEOS_A__))
+    pthread_mutex_init(&lock_, nullptr);
+#endif
+}
+
+AsyncTaskManager::~AsyncTaskManager()
+{
+    while (head_ != nullptr) {
+        AsyncTask *task = head_;
+        head_ = head_->next;
+        delete task;
+        task = nullptr;
+    }
+    tail_ = nullptr;
+}
+
+AsyncTaskManager &AsyncTaskManager::GetInstance()
+{
+    static AsyncTaskManager instance;
+    return instance;
+}
+
+void AsyncTaskManager::Init()
+{
+    Task::Init();
+}
+
+void AsyncTaskManager::Callback()
+{
+    if (!front_) {
+        return;
+    }
+
+    while (head_ != nullptr) {
+        AsyncTask *task = head_;
+        task->handler(task->data);
+        if (head_ == tail_) {
+            tail_ = nullptr;
+        }
+        head_ = head_->next;
+        delete task;
+        task = nullptr;
+    }
+}
+
+uint16_t AsyncTaskManager::Dispatch(AsyncTaskHandler handler, void *data)
+{
+    if (handler == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "AsyncTaskManager::Dispatch failed: handler is null.");
+        return DISPATCH_FAILURE;
+    }
+    if (FatalHandler::GetInstance().IsFatalErrorHitted()) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "AsyncTaskManager::Dispatch failed: Fatal error is hitted.");
+        return DISPATCH_FAILURE;
+    }
+    TRY_LOCK();
+    auto *task = new AsyncTask();
+    if (task == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "AsyncTaskManager::Dispatch failed: out of memory.");
+        TRY_UNLOCK();
+        return DISPATCH_FAILURE;
+    }
+    task->handler = handler;
+    task->data = data;
+    task->id = (++uniqueTaskID_);
+    task->next = nullptr;
+    if (head_ == nullptr) {
+        head_ = task;
+        tail_ = task;
+    } else {
+        tail_->next = task;
+        tail_ = task;
+    }
+    TRY_UNLOCK();
+    return uniqueTaskID_;
+}
+
+void AsyncTaskManager::Cancel(uint16_t taskID)
+{
+    if (DISPATCH_FAILURE == taskID) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "AsyncTaskManager::Cancel failed: invalid task ID.");
+        return;
+    }
+    TRY_LOCK();
+    AsyncTask *node = head_;
+    AsyncTask *prev = nullptr;
+    while (node != nullptr) {
+        if (node->id == taskID) {
+            if (prev == nullptr) {
+                head_ = head_->next;
+            } else {
+                prev->next = node->next;
+                if (node == tail_) {
+                    tail_ = prev;
+                }
+            }
+            delete node;
+            node = nullptr;
+            break;
+        }
+        prev = node;
+        node = node->next;
+    }
+    TRY_UNLOCK();
+}
+
+void AsyncTaskManager::SetFront(bool front)
+{
+    front_ = front;
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/base/async_task_manager.h b/frameworks/src/core/base/async_task_manager.h
new file mode 100755
index 0000000..7d8a0a9
--- /dev/null
+++ b/frameworks/src/core/base/async_task_manager.h
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_ASYNC_TASK_MANAGER_H
+#define OHOS_ACELITE_ASYNC_TASK_MANAGER_H
+
+#if (defined(__LINUX__) || defined(__LITEOS_A__))
+#include <pthread.h>
+#elif defined(__LITEOS_M__)
+#include "los_task.h"
+#endif
+
+#include "common/task_manager.h"
+#include "memory_heap.h"
+#include "non_copyable.h"
+
+namespace OHOS {
+namespace ACELite {
+using AsyncTaskHandler = void (*)(void *);
+
+struct AsyncTask final : public MemoryHeap {
+    uint16_t id;
+    AsyncTaskHandler handler;
+    void *data;
+    AsyncTask *next;
+};
+
+constexpr uint16_t DISPATCH_FAILURE = 0;
+
+class AsyncTaskManager final : public Task {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(AsyncTaskManager);
+
+    static AsyncTaskManager &GetInstance();
+
+    virtual void Init() override;
+
+    virtual void Callback() override;
+
+    uint16_t Dispatch(AsyncTaskHandler handler, void *data);
+
+    void Cancel(uint16_t taskID);
+
+    void SetFront(bool front);
+
+private:
+    AsyncTaskManager();
+
+    ~AsyncTaskManager();
+
+    AsyncTask *head_;
+    AsyncTask *tail_;
+#if (defined(__LINUX__) || defined(__LITEOS_A__))
+    pthread_mutex_t lock_;
+#endif
+    uint16_t uniqueTaskID_;
+    bool front_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif
\ No newline at end of file
diff --git a/frameworks/src/core/base/cache/cache_config.h b/frameworks/src/core/base/cache/cache_config.h
new file mode 100644
index 0000000..0c8c9f1
--- /dev/null
+++ b/frameworks/src/core/base/cache/cache_config.h
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_CACHE_CONFIG_H
+#define OHOS_ACELITE_CACHE_CONFIG_H
+
+#include <cstdint>
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * The magic number used at the beginning of every cache memory area.
+ */
+constexpr uint8_t MAGIC_NUMBER_LENGTH = 4; // count in bytes
+constexpr uint32_t CACHE_MEM_MAGIC_NUMBER = 0xCCCCCCCC;
+
+constexpr uint8_t ALIGNMENT_SIZE = 8;
+
+/**
+ * Every cache user can not use more than the max length buffer.
+ * Count in KB.
+ */
+constexpr uint8_t CACHE_UNIT_MAX_KBS = 128; // max 128KB
+constexpr uint32_t CACHE_UNIT_MAX_BYTES = CACHE_UNIT_MAX_KBS * 1024;
+
+/**
+ * Define the purpose of the specific cache memory range.
+ */
+enum CacheUser : uint8_t {
+    USER_LOCALICATION,
+    USER_PAGE_FILE,
+    USER_MAX_COUNT
+};
+
+/**
+ * Records the cache requester info.
+ */
+struct CacheUnit {
+    // the cache unit owner
+    CacheUser cacheUser_;
+    // the required min buffer length, count in KB, max is 255KB
+    uint8_t minLength_;
+    // constructors
+    CacheUnit() : cacheUser_(USER_MAX_COUNT), minLength_(CACHE_UNIT_MAX_KBS) {}
+    CacheUnit(CacheUser user, uint8_t length) : cacheUser_(user), minLength_(length) {}
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_CACHE_CONFIG_H
\ No newline at end of file
diff --git a/frameworks/src/core/base/cache/cache_manager.cpp b/frameworks/src/core/base/cache/cache_manager.cpp
new file mode 100644
index 0000000..32d663a
--- /dev/null
+++ b/frameworks/src/core/base/cache/cache_manager.cpp
@@ -0,0 +1,188 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "cache_manager.h"
+
+#include "ace_log.h"
+#include "securec.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * This table will decide the cache usage distribution. If one module want to use cache functionality,
+ * it must config here first. The cache manager will assign buffer according to the actual whole
+ * buffer rang, if the buffer supplement is rich, every cache user might be assigned one buffer
+ * rang bigger than its lowest requirement.
+ *
+ * NOTE: the user must not be duplicated in this list
+ */
+const CacheUnit CacheManager::DEFAULT_CONFIG_TABLE[] = {
+    {USER_LOCALICATION, 16}, // localication key-value cache, lowest 16KB
+};
+
+CacheManager::CacheManager() : cacheState_(STATE_NORMAL)
+{
+    configTable_ = DEFAULT_CONFIG_TABLE;
+    configTableLen_ = sizeof(DEFAULT_CONFIG_TABLE) / sizeof(CacheUnit);
+    ResetDistributedInfo();
+}
+
+CacheManager &CacheManager::GetInstance()
+{
+    static CacheManager cacheManager;
+    return cacheManager;
+}
+
+void CacheManager::ResetDistributedInfo()
+{
+    wholeCacheMemInfo_.cacheStartAddr = 0;
+    wholeCacheMemInfo_.cacheLength = 0;
+    if (EOK !=
+        memset_s(cacheUnitInfo_, sizeof(CacheMemInfo) * USER_MAX_COUNT, 0, sizeof(CacheMemInfo) * USER_MAX_COUNT)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "reset cache info failed");
+    }
+}
+
+void CacheManager::SetConfigTable(const CacheUnit *table, size_t count)
+{
+    if (cacheState_ == STATE_SUCCESS) {
+        // reset
+        cacheState_ = STATE_NORMAL;
+        ResetDistributedInfo();
+    }
+    configTable_ = table;
+    configTableLen_ = count;
+}
+
+void CacheManager::SetupCacheMemInfo(uintptr_t startAddr, size_t length)
+{
+    // only can be setup once
+    if (cacheState_ == STATE_SUCCESS) {
+        return;
+    }
+    // try to distribute the whole buffer, and if the buffer length can not meet the lowest requirement, just give up
+    cacheState_ = DistributeCacheRange(startAddr, length);
+    if (cacheState_ != STATE_SUCCESS) {
+        return;
+    }
+    wholeCacheMemInfo_.cacheStartAddr = startAddr;
+    wholeCacheMemInfo_.cacheLength = length;
+}
+
+CacheSetupState CacheManager::DistributeCacheRange(uintptr_t startAddr, size_t totalBytes)
+{
+    if (configTableLen_ == 0 || configTable_ == nullptr) {
+        // no user, return normal as no one cares
+        return STATE_NORMAL;
+    }
+    if (startAddr == 0 || totalBytes == 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "error cache buffer rang!");
+        return STATE_FAILURE;
+    }
+    // count in KB
+    size_t lowestRequirement = 0;
+    size_t index = 0;
+    while (index < configTableLen_) {
+        lowestRequirement = lowestRequirement + configTable_[index].minLength_;
+        index++;
+    }
+    constexpr uint16_t bytesOneKB = 1024;
+    size_t totalKBs = totalBytes / bytesOneKB;
+    if (lowestRequirement > totalKBs) {
+        // the given buffer is less than the lowest requirement
+        HILOG_ERROR(HILOG_MODULE_ACE, "the cache buffer length can not meet the lowest requirement!");
+        return STATE_FAILURE;
+    }
+
+    index = 0;
+    // will put one magic number at the begin and end of every buffer
+    constexpr uint8_t magicNumberCount = 2;
+    size_t offset = 0;
+    while (index < configTableLen_) {
+        size_t requestBytes = (configTable_[index].minLength_ * bytesOneKB) + (MAGIC_NUMBER_LENGTH * magicNumberCount);
+        uintptr_t startPos = startAddr + offset;
+        cacheUnitInfo_[configTable_[index].cacheUser_].cacheStartAddr = startPos;
+        cacheUnitInfo_[configTable_[index].cacheUser_].cacheLength = requestBytes;
+        // set magic number
+        *(reinterpret_cast<uint32_t *>(startPos)) = CACHE_MEM_MAGIC_NUMBER;
+        *(reinterpret_cast<uint32_t *>(startPos + requestBytes - MAGIC_NUMBER_LENGTH)) = CACHE_MEM_MAGIC_NUMBER;
+        offset = offset + requestBytes;
+        index++;
+    }
+    return STATE_SUCCESS;
+}
+
+bool CacheManager::IsEnvReady(CacheUser user) const
+{
+    if (cacheState_ != STATE_SUCCESS) {
+        return false;
+    }
+    return ((user < USER_MAX_COUNT) && (cacheUnitInfo_[user].cacheStartAddr != 0));
+}
+
+uintptr_t CacheManager::GetCacheBufAddress(CacheUser user) const
+{
+    if (!IsEnvReady(user)) {
+        return 0;
+    }
+    return cacheUnitInfo_[user].cacheStartAddr + MAGIC_NUMBER_LENGTH;
+}
+
+size_t CacheManager::GetCacheBufLength(CacheUser user) const
+{
+    if (!IsEnvReady(user)) {
+        return 0;
+    }
+    return cacheUnitInfo_[user].cacheLength;
+}
+
+bool CacheManager::IsCacheOverflow(CacheUser user) const
+{
+    if (!IsEnvReady(user)) {
+        return false;
+    }
+    // get head and tail magic number
+    uint32_t *bufferHead = reinterpret_cast<uint32_t *>(cacheUnitInfo_[user].cacheStartAddr);
+    uint32_t headMagicNumber = reinterpret_cast<uint32_t>(*(bufferHead));
+    uint32_t *bufferTail = reinterpret_cast<uint32_t *>(cacheUnitInfo_[user].cacheStartAddr +
+                                                        cacheUnitInfo_[user].cacheLength - MAGIC_NUMBER_LENGTH);
+    uint32_t tailMagicNumber = reinterpret_cast<uint32_t>(*(bufferTail));
+    // if the head magic number was over write, it means someone else overflow this area
+    if (headMagicNumber != CACHE_MEM_MAGIC_NUMBER) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the cache buffer[%d] was overflown by someone else?", user);
+        return true;
+    }
+    // if the tail magic number was over write, it means the user itself overflow this area
+    if (tailMagicNumber != CACHE_MEM_MAGIC_NUMBER) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the cache buffer[%d] was overflown by self?", user);
+        return true;
+    }
+    return false;
+}
+
+bool CacheManager::IsWholeCacheHealthy() const
+{
+    if (cacheState_ != STATE_SUCCESS) {
+        return false;
+    }
+    for (int i = 0; i < USER_MAX_COUNT; i++) {
+        if (IsCacheOverflow(CacheUser(i))) {
+            return false;
+        }
+    }
+    return true;
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/base/cache/cache_manager.h b/frameworks/src/core/base/cache/cache_manager.h
new file mode 100644
index 0000000..49a2376
--- /dev/null
+++ b/frameworks/src/core/base/cache/cache_manager.h
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_CACHE_MANAGER_H
+#define OHOS_ACELITE_CACHE_MANAGER_H
+
+#include "cache_config.h"
+
+#include <cstddef>
+#include <cstdint>
+#include "non_copyable.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * The structure used for recording the cache memory detail information.
+ */
+struct CacheMemInfo {
+    // the cache memory start address, including the magic number at beginning
+    uintptr_t cacheStartAddr;
+    // count in bytes, and the max capability is 4M, including the maginc number at the beginning and ending
+    size_t cacheLength;
+};
+
+enum CacheSetupState : uint8_t {
+    STATE_NORMAL, // the cache is not initialized ever, or no user is configured
+    STATE_SUCCESS, // the cache was initialized and distributed to all users successfully
+    STATE_FAILURE, // the cache was tried be initialized but failed to distributed to all users
+};
+
+/**
+ * This is one singleton instance for cache memory management. It can be used
+ * out of the applications' lifecycle. It records the memory area for all kinds
+ * of caching purpose in the frameworks. If the cache memory rang is not setup,
+ * the cache functionality will not work.
+ */
+class CacheManager final {
+public:
+    static CacheManager &GetInstance();
+    void SetupCacheMemInfo(uintptr_t startAddr, size_t length);
+    uintptr_t GetCacheBufAddress(CacheUser user) const;
+    size_t GetCacheBufLength(CacheUser user) const;
+    bool IsCacheAvailable(CacheUser user) const;
+    bool IsCacheOverflow(CacheUser user) const;
+    bool IsWholeCacheHealthy() const;
+    /**
+     * @brief SetConfigTable give the config table from outside, call this function carefully
+     * @param table the config table
+     * @param count the actual user count
+     */
+    void SetConfigTable(const CacheUnit *table, size_t count);
+
+private:
+    ACE_DISALLOW_COPY_AND_MOVE(CacheManager);
+    CacheManager();
+    ~CacheManager() = default;
+    /**
+     * @brief ResetDistributedInfo clean up all assigned buffer info
+     */
+    void ResetDistributedInfo();
+    /**
+     * @brief DistributeCacheRange called once to assign proper memory rang to all the user in the config table
+     * @param startAddr the entire cache buffer start address
+     * @param length the entire cache length
+     * @return the result of the assignment process, if the memory size can not meet the  lowest request, the process
+     * will return false as failure
+     */
+    CacheSetupState DistributeCacheRange(uintptr_t startAddr, size_t length);
+    bool IsEnvReady(CacheUser user) const;
+    CacheMemInfo wholeCacheMemInfo_;
+    CacheMemInfo cacheUnitInfo_[USER_MAX_COUNT]; // count in bytes
+    const CacheUnit *configTable_;
+    size_t configTableLen_;
+    CacheSetupState cacheState_;
+    static const CacheUnit DEFAULT_CONFIG_TABLE[];
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_CACHE_MANAGER_H
\ No newline at end of file
diff --git a/src/core/async/BUILD.gn b/frameworks/src/core/base/cache/test/unittest/BUILD.gn
similarity index 53%
rename from src/core/async/BUILD.gn
rename to frameworks/src/core/base/cache/test/unittest/BUILD.gn
index 4e95508..3780b5d 100755
--- a/src/core/async/BUILD.gn
+++ b/frameworks/src/core/base/cache/test/unittest/BUILD.gn
@@ -1,4 +1,4 @@
-#Copyright (c) 2020 Huawei Device Co., Ltd.
+#Copyright (c) 2021 Huawei Device 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
@@ -9,16 +9,19 @@
 #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.
+#limitations under the License.
 
-source_set("async") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-    sources = [
-        "js_async_work.cpp",
-        "message_queue_utils.cpp",
-    ]
-    include_dirs = [
-    ]
+import("//build/lite/config/test.gni")
+import("//foundation/ace/ace_engine_lite/test/ace_test_config.gni")
+
+unittest("js_frameworks_test_cache_manager") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [ "common/cache_manager_tdd_test.cpp" ]
+  deps = ace_test_deps
+}
+
+group("cache_manager_unittest") {
+  deps = [ ":js_frameworks_test_cache_manager" ]
 }
diff --git a/frameworks/src/core/base/cache/test/unittest/common/cache_manager_tdd_test.cpp b/frameworks/src/core/base/cache/test/unittest/common/cache_manager_tdd_test.cpp
new file mode 100755
index 0000000..190446d
--- /dev/null
+++ b/frameworks/src/core/base/cache/test/unittest/common/cache_manager_tdd_test.cpp
@@ -0,0 +1,232 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "cache_manager_tdd_test.h"
+
+#include "ace_mem_base.h"
+
+namespace OHOS {
+namespace ACELite {
+const CacheUnit CacheManagerTddTest::TEST_CONFIG_TABLE[] = {
+    {USER_LOCALICATION, 16}, // localication key-value cache, lowest 16KB
+};
+
+void CacheManagerTddTest::SetUp()
+{
+    const size_t count = 1;
+    CacheManager::GetInstance().SetConfigTable(TEST_CONFIG_TABLE, count);
+}
+
+/**
+ * @tc.name: CacheDistributeTest001
+ * @tc.desc: Verify the cache distribution process
+ * @tc.require: AR000F8FOG
+ */
+HWTEST_F(CacheManagerTddTest, CacheDistribute001, TestSize.Level1)
+{
+    /**
+     * @tc.steps: step1. prepare cache buffer
+     */
+    const size_t totalSize = 20 * 1024; // 20KB
+    char *buffer = static_cast<char *>(ace_malloc(sizeof(char) * totalSize));
+    if (buffer == nullptr) {
+        return;
+    }
+    /**
+     * @tc.steps: step2. trigger the cache setup
+     */
+    uintptr_t startAddr = reinterpret_cast<uintptr_t>(buffer);
+    CacheManager::GetInstance().SetupCacheMemInfo(startAddr, totalSize);
+    /**
+     * @tc.steps: step3. verify the result
+     */
+    uintptr_t localicationPos = CacheManager::GetInstance().GetCacheBufAddress(CacheUser::USER_LOCALICATION);
+    size_t localicationBufSize = CacheManager::GetInstance().GetCacheBufLength(CacheUser::USER_LOCALICATION);
+    const uintptr_t targetPos = startAddr + MAGIC_NUMBER_LENGTH;
+    const size_t unit = 1024;
+    const uint8_t magicNumberCount = 2;
+    const uint8_t localicationMin = 16;
+    const size_t targetLength = (localicationMin * unit) + (magicNumberCount * MAGIC_NUMBER_LENGTH);
+    EXPECT_EQ(localicationPos, targetPos);
+    EXPECT_EQ(localicationBufSize, targetLength);
+    ace_free(buffer);
+    buffer = nullptr;
+}
+
+/**
+ * @tc.name: CacheDistributeTest002
+ * @tc.desc: Verify the cache distribution process
+ * @tc.require: AR000F8FOG
+ */
+HWTEST_F(CacheManagerTddTest, CacheDistribute002, TestSize.Level1)
+{
+    /**
+     * @tc.steps: step1. prepare cache buffer
+     */
+    const size_t totalSize = 20 * 1024; // 40KB
+    char *buffer = static_cast<char *>(ace_malloc(sizeof(char) * totalSize));
+    if (buffer == nullptr) {
+        return;
+    }
+    const uint8_t pageFileBufLength = 6;
+    const uint8_t localicationBufLength = 8;
+    const CacheUnit customerCacheUnitTable[] = {
+        {USER_PAGE_FILE, pageFileBufLength},
+        {USER_LOCALICATION, localicationBufLength},
+    };
+    /**
+     * @tc.steps: step2. trigger the cache setup
+     */
+    const size_t count = 2;
+    CacheManager::GetInstance().SetConfigTable(customerCacheUnitTable, count);
+    uintptr_t startAddr = reinterpret_cast<uintptr_t>(buffer);
+    CacheManager::GetInstance().SetupCacheMemInfo(startAddr, totalSize);
+    /**
+     * @tc.steps: step3. verify the result
+     */
+    uintptr_t bufferPos = CacheManager::GetInstance().GetCacheBufAddress(CacheUser::USER_LOCALICATION);
+    size_t bufSize = CacheManager::GetInstance().GetCacheBufLength(CacheUser::USER_LOCALICATION);
+    const size_t unit = 1024;
+    const uint8_t magicNumberCount = 2;
+    uintptr_t targetPos =
+        startAddr + (pageFileBufLength * unit) + (magicNumberCount * MAGIC_NUMBER_LENGTH) + MAGIC_NUMBER_LENGTH;
+    const size_t targetLength = (localicationBufLength * unit) + (magicNumberCount * MAGIC_NUMBER_LENGTH);
+    EXPECT_EQ(bufferPos, targetPos);
+    EXPECT_EQ(bufSize, targetLength);
+    ace_free(buffer);
+    buffer = nullptr;
+}
+
+/**
+ * @tc.name: CacheDistributeTest003
+ * @tc.desc: Verify the cache distribution process
+ * @tc.require: AR000F8FOG
+ */
+HWTEST_F(CacheManagerTddTest, CacheDistribute003, TestSize.Level1)
+{
+    /**
+     * @tc.steps: step1. prepare cache buffer
+     */
+    const size_t totalSize = 2 * 1024; // 2KB
+    char *buffer = static_cast<char *>(ace_malloc(sizeof(char) * totalSize));
+    if (buffer == nullptr) {
+        return;
+    }
+
+    /**
+     * @tc.steps: step2. trigger the cache setup
+     */
+    uintptr_t startAddr = reinterpret_cast<uintptr_t>(buffer);
+    CacheManager::GetInstance().SetupCacheMemInfo(startAddr, totalSize);
+    /**
+     * @tc.steps: step3. verify the result
+     */
+    uintptr_t localPos = CacheManager::GetInstance().GetCacheBufAddress(CacheUser::USER_LOCALICATION);
+    size_t localBufSize = CacheManager::GetInstance().GetCacheBufLength(CacheUser::USER_LOCALICATION);
+    EXPECT_EQ(localPos, 0);
+    EXPECT_EQ(localBufSize, 0);
+    ace_free(buffer);
+    buffer = nullptr;
+}
+
+/**
+ * @tc.name: CacheDistributeTest004
+ * @tc.desc: Verify the cache distribution process
+ * @tc.require: AR000F8FOG
+ */
+HWTEST_F(CacheManagerTddTest, CacheDistribute004, TestSize.Level1)
+{
+    /**
+     * @tc.steps: step1. prepare cache buffer
+     */
+    const size_t totalSize = 20 * 1024; // 20KB
+    char *buffer = static_cast<char *>(ace_malloc(sizeof(char) * totalSize));
+    if (buffer == nullptr) {
+        return;
+    }
+
+    /**
+     * @tc.steps: step2. trigger the cache setup
+     */
+    uintptr_t startAddr = reinterpret_cast<uintptr_t>(buffer);
+    CacheManager::GetInstance().SetupCacheMemInfo(startAddr, totalSize);
+    /**
+     * @tc.steps: step3. verify the result
+     */
+    uintptr_t bufStartPos = CacheManager::GetInstance().GetCacheBufAddress(CacheUser::USER_LOCALICATION);
+    size_t bufLength = CacheManager::GetInstance().GetCacheBufLength(CacheUser::USER_LOCALICATION);
+    uint32_t headMagicNumber = *(uint32_t *)(bufStartPos - MAGIC_NUMBER_LENGTH);
+    EXPECT_EQ(headMagicNumber, CACHE_MEM_MAGIC_NUMBER);
+    const uint8_t magicNumberCount = 2;
+    uint32_t tailMagicNumber = *(uint32_t *)(bufStartPos + bufLength - (magicNumberCount * MAGIC_NUMBER_LENGTH));
+    EXPECT_EQ(tailMagicNumber, CACHE_MEM_MAGIC_NUMBER);
+    ace_free(buffer);
+    buffer = nullptr;
+}
+
+/**
+ * @tc.name: CacheDistributeTest005
+ * @tc.desc: Verify the cache distribution process and overflow checking
+ * @tc.require: AR000F8FOG
+ */
+HWTEST_F(CacheManagerTddTest, CacheDistribute005, TestSize.Level1)
+{
+    /**
+     * @tc.steps: step1. prepare cache buffer
+     */
+    const size_t totalSize = 20 * 1024; // 20KB
+    char *buffer = static_cast<char *>(ace_malloc(sizeof(char) * totalSize));
+    if (buffer == nullptr) {
+        return;
+    }
+
+    /**
+     * @tc.steps: step2. trigger the cache setup
+     */
+    uintptr_t startAddr = reinterpret_cast<uintptr_t>(buffer);
+    CacheManager::GetInstance().SetupCacheMemInfo(startAddr, totalSize);
+    size_t bufLength = CacheManager::GetInstance().GetCacheBufLength(CacheUser::USER_LOCALICATION);
+    if (bufLength < MAGIC_NUMBER_LENGTH) {
+        ace_free(buffer);
+        buffer = nullptr;
+        return;
+    }
+    /**
+     * @tc.steps: step3. overflow the cache head and tail
+     */
+    buffer[0] = 0x11;
+    size_t tailPos = bufLength - MAGIC_NUMBER_LENGTH;
+    buffer[tailPos] = 0x22;
+    EXPECT_TRUE(CacheManager::GetInstance().IsCacheOverflow(CacheUser::USER_LOCALICATION));
+    EXPECT_FALSE(CacheManager::GetInstance().IsWholeCacheHealthy());
+    ace_free(buffer);
+    buffer = nullptr;
+}
+
+/**
+ * used for debugging TDD implementation on simulator
+ */
+void CacheManagerTddTest::RunTests()
+{
+#ifndef TDD_ASSERTIONS
+    CacheDistribute001();
+    CacheDistribute002();
+    CacheDistribute003();
+    CacheDistribute004();
+    CacheDistribute005();
+#endif // TDD_ASSERTIONS
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/base/cache/test/unittest/common/cache_manager_tdd_test.h b/frameworks/src/core/base/cache/test/unittest/common/cache_manager_tdd_test.h
new file mode 100755
index 0000000..ddbaff6
--- /dev/null
+++ b/frameworks/src/core/base/cache/test/unittest/common/cache_manager_tdd_test.h
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_CACHE_MANAGER_TDD_TEST_H
+#define OHOS_ACELITE_CACHE_MANAGER_TDD_TEST_H
+
+#include "acelite_config.h"
+#include "cache_config.h"
+#include "cache_manager.h"
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#endif
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class CacheManagerTddTest : public testing::Test {
+#else
+class CacheManagerTddTest {
+#endif
+public:
+    CacheManagerTddTest() = default;
+    ~CacheManagerTddTest() = default;
+    void SetUp();
+    void CacheDistribute001();
+    void CacheDistribute002();
+    void CacheDistribute003();
+    void CacheDistribute004();
+    void CacheDistribute005();
+    void RunTests();
+
+private:
+    static const CacheUnit TEST_CONFIG_TABLE[];
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_CACHE_MANAGER_TDD_TEST_H
\ No newline at end of file
diff --git a/src/core/base/dft_impl.cpp b/frameworks/src/core/base/dft_impl.cpp
similarity index 77%
rename from src/core/base/dft_impl.cpp
rename to frameworks/src/core/base/dft_impl.cpp
index 2815504..fa97af2 100755
--- a/src/core/base/dft_impl.cpp
+++ b/frameworks/src/core/base/dft_impl.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -15,7 +15,7 @@
 
 #include "dft_impl.h"
 
-#ifdef OHOS_ACELITE_PRODUCT_WATCH
+#if (defined(OHOS_ACELITE_PRODUCT_WATCH))||(defined(CHANGE_START_PAGE))
 #include "ace_log.h"
 #include "js_app_context.h"
 
@@ -57,13 +57,24 @@ void DftImpl::RegisterPageReplaced(PageReplacedCallback handler)
     pageReplacedCallback_ = handler;
 }
 
-void DftImpl::CallbackPageReplaced(int state)
+void DftImpl::RegisterPageChangedCallback(PageInfoFunc pageInfoFunc)
+{
+    pageInfoFunc_ = pageInfoFunc;
+}
+
+void DftImpl::CallbackPageReplaced(int state, const char *param)
 {
     if (pageReplacedCallback_ != nullptr) {
         char *currentPath = DftImpl::GetPagePath();
         pageReplacedCallback_(currentPath, state);
         ACE_FREE(currentPath);
     }
+    if ((pageInfoFunc_ != nullptr) && (param != nullptr)) {
+        Param value;
+        value.routerParam = param;
+        value.path = JsAppContext::GetInstance()->GetCurrentJsPath();
+        pageInfoFunc_(value);
+    }
 }
 } // namespace ACELite
 } // namespace OHOS
diff --git a/frameworks/src/core/base/dfx_assist.cpp b/frameworks/src/core/base/dfx_assist.cpp
new file mode 100644
index 0000000..ed2fff9
--- /dev/null
+++ b/frameworks/src/core/base/dfx_assist.cpp
@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "dfx_assist.h"
+#include "ace_log.h"
+#include "jerryscript-core.h"
+#include "presets/console_log_impl.h"
+
+namespace OHOS {
+namespace ACELite {
+void DfxAssist::DumpErrorCode(const jerry_value_t errorValue)
+{
+    const uint16_t errorMsgMaxLength = 128;
+    if (!jerry_is_feature_enabled(JERRY_FEATURE_ERROR_MESSAGES)) {
+        return;
+    }
+
+    jerry_value_t errValue = jerry_get_value_from_error(errorValue, false);
+    jerry_value_t errStrVal = jerry_value_to_string(errValue);
+    jerry_release_value(errValue);
+
+    if (jerry_value_is_error(errStrVal)) {
+        /* Avoid recursive error throws. */
+        HILOG_ERROR(HILOG_MODULE_ACE, "[Error value to string failed]");
+        jerry_release_value(errStrVal);
+        return;
+    }
+
+    jerry_size_t errStrSize = jerry_get_utf8_string_size(errStrVal);
+    if (errStrSize >= errorMsgMaxLength) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "[Error message too long]");
+        jerry_release_value(errStrVal);
+        return;
+    }
+
+    jerry_char_t *errStrBuffer = static_cast<jerry_char_t *>(ace_malloc(sizeof(jerry_char_t) * (errStrSize + 1)));
+    if (errStrBuffer == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "malloc memory failed!");
+        jerry_release_value(errStrVal);
+        return;
+    }
+    jerry_size_t stringEnd = jerry_string_to_utf8_char_buffer(errStrVal, errStrBuffer, errStrSize);
+    errStrBuffer[stringEnd] = '\0';
+    // output to platform trace
+    HILOG_ERROR(HILOG_MODULE_ACE, " [JS Error]: %s", reinterpret_cast<char *>(errStrBuffer));
+    // output to user console
+    LogString(LogLevel::LOG_LEVEL_ERR, "[JS Exception]: ");
+    LogString(LogLevel::LOG_LEVEL_ERR, reinterpret_cast<char *>(errStrBuffer));
+    // output line separator to trigger trace output
+    LogString(LogLevel::LOG_LEVEL_ERR, "\n");
+    ace_free(errStrBuffer);
+    errStrBuffer = nullptr;
+    jerry_release_value(errStrVal);
+}
+
+void DfxAssist::DumpErrorMessage(const jerry_value_t errorValue)
+{
+    const uint16_t stackMsgMaxLength = 256;
+    const uint8_t arrMaxLength = 32;
+    jerry_value_t stackStr = jerry_create_string((const jerry_char_t *) "stack");
+    jerry_value_t errorVal = jerry_get_value_from_error(errorValue, false);
+
+    jerry_value_t backtraceVal = jerry_get_property(errorVal, stackStr);
+    jerry_release_value(stackStr);
+    jerry_release_value(errorVal);
+
+    if (jerry_value_is_error(backtraceVal) || !(jerry_value_is_array(backtraceVal))) {
+        jerry_release_value(backtraceVal);
+        return;
+    }
+
+    uint32_t length = jerry_get_array_length(backtraceVal);
+    if (length == 0) {
+        jerry_release_value(backtraceVal);
+        return;
+    }
+    if (length > arrMaxLength) {
+        length = arrMaxLength;
+    }
+
+    jerry_char_t *errStrBuffer = static_cast<jerry_char_t *>(ace_malloc(sizeof(jerry_char_t) * (stackMsgMaxLength)));
+    if (errStrBuffer == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "malloc memory failed!");
+        jerry_release_value(backtraceVal);
+        return;
+    }
+    HILOG_ERROR(HILOG_MODULE_ACE, "[Exception backtrace]:");
+    for (uint8_t i = 0; i < length; i++) {
+        jerry_value_t itemVal = jerry_get_property_by_index(backtraceVal, i);
+        jerry_size_t strSize = 0;
+        if (!jerry_value_is_error(itemVal) && jerry_value_is_string(itemVal)) {
+            strSize = jerry_get_utf8_string_size(itemVal);
+        }
+
+        if (strSize >= stackMsgMaxLength) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "%u: [Backtrace string too long]", i);
+        } else {
+            jerry_size_t stringEnd = jerry_string_to_utf8_char_buffer(itemVal, errStrBuffer, strSize);
+            errStrBuffer[stringEnd] = '\0';
+            HILOG_ERROR(HILOG_MODULE_ACE, "%u: %s", i, reinterpret_cast<char *>(errStrBuffer));
+        }
+        jerry_release_value(itemVal);
+    }
+    ace_free(errStrBuffer);
+    errStrBuffer = nullptr;
+    jerry_release_value(backtraceVal);
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/base/dfx_assist.h b/frameworks/src/core/base/dfx_assist.h
new file mode 100644
index 0000000..e960ad8
--- /dev/null
+++ b/frameworks/src/core/base/dfx_assist.h
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_DFX_ASSIST_H
+#define OHOS_ACELITE_DFX_ASSIST_H
+
+#include "acelite_config.h"
+#include "js_app_context.h"
+#include "memory_heap.h"
+#include "non_copyable.h"
+
+namespace OHOS {
+namespace ACELite {
+class DfxAssist final : public MemoryHeap {
+public:
+    DfxAssist() = default;
+
+    ~DfxAssist() = default;
+
+    /**
+     * @fn DfxAssist::DumpErrorCode()
+     *
+     * @brief dump js error error code
+     */
+    void DumpErrorCode(const jerry_value_t errorValue);
+
+    /**
+     * @fn DfxAssist::DumpErrorMessage()
+     *
+     * @brief dump js stack error message
+     */
+    void DumpErrorMessage(const jerry_value_t errorValue);
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_DFX_ASSIST_H
diff --git a/frameworks/src/core/base/event_util.cpp b/frameworks/src/core/base/event_util.cpp
new file mode 100755
index 0000000..3da9381
--- /dev/null
+++ b/frameworks/src/core/base/event_util.cpp
@@ -0,0 +1,150 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "event_util.h"
+#include "ace_log.h"
+#include "async_task_manager.h"
+
+namespace OHOS {
+namespace ACELite {
+constexpr char ATTR_TYPE[] = "type";
+constexpr char ATTR_TARGET[] = "target";
+constexpr char ATTR_CURRENT_TARGET[] = "currentTarget";
+constexpr char ATTR_TIMESTAMP[] = "timestamp";
+constexpr char ATTR_GLOBAL_X[] = "globalX";
+constexpr char ATTR_GLOBAL_Y[] = "globalY";
+constexpr char ATTR_DIRECTION[] = "direction";
+constexpr char ATTR_DIRECTION_RIGHT[] = "right";
+constexpr char ATTR_DIRECTION_LEFT[] = "left";
+constexpr char ATTR_DIRECTION_UP[] = "up";
+constexpr char ATTR_DIRECTION_DOWN[] = "down";
+const char *EventUtil::EVENT_CLICK = "click";
+const char *EventUtil::EVENT_LONGPRESS = "longpress";
+const char *EventUtil::EVENT_SWIPE = "swipe";
+
+void CallbackExecutor(void *data)
+{
+    if (data == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "failed to execute the callback function of event.");
+        return;
+    }
+
+    auto *params = static_cast<CallbackParams *>(data);
+    if (!JSFunction::Is(params->fn)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "failed to execute the callback function of event.");
+        delete params;
+        params = nullptr;
+        return;
+    }
+    constexpr uint8_t argsLength = 1;
+    JSValue args[argsLength] = {params->arg};
+    JSRelease(JSFunction::Call(params->fn, params->vm, args, argsLength));
+    JSRelease(params->arg);
+    delete params;
+    params = nullptr;
+}
+
+JSValue EventUtil::CreateEvent(const char *type, UIView &view, const Event &event)
+{
+    // create a JAVASCRIPT plain object that is used as the input parameter of
+    // the callback function for click or longpress event.
+    JSValue arg = JSObject::Create();
+    // set the 'type' attribute value
+    JSObject::SetString(arg, ATTR_TYPE, type);
+    // set the 'target' attribute value
+    UIView *target = nullptr;
+    UIView *currentTarget = nullptr;
+    Point point = event.GetCurrentPos();
+    view.GetTargetView(point, &currentTarget, &target);
+    JSObject::Set(arg, ATTR_TARGET, GetElementByUIView(target));
+    // set the 'currentTarget' attribute value
+    JSObject::Set(arg, ATTR_CURRENT_TARGET, GetElementByUIView(currentTarget));
+    // set the 'timestamp' attribute value
+    JSObject::SetNumber(arg, ATTR_TIMESTAMP, event.GetTimeStamp());
+    // set the 'globalX' attribute
+    JSObject::SetNumber(arg, ATTR_GLOBAL_X, point.x);
+    // set the 'globalY' attribute
+    JSObject::SetNumber(arg, ATTR_GLOBAL_Y, point.y);
+    return arg;
+}
+JSValue EventUtil::CreateSwipeEvent(UIView &view, const DragEvent &event)
+{
+    // create a JAVASCRIPT plain object that is used as the input parameter of
+    // the event callback function.
+    JSValue arg = EventUtil::CreateEvent(EVENT_SWIPE, view, event);
+    // set the 'direction' attribute for the input parameter of the swipe event callback function.
+    switch (event.GetDragDirection()) {
+        case DragEvent::DIRECTION_LEFT_TO_RIGHT: {
+            JSObject::SetString(arg, ATTR_DIRECTION, ATTR_DIRECTION_RIGHT);
+            break;
+        }
+        case DragEvent::DIRECTION_RIGHT_TO_LEFT: {
+            JSObject::SetString(arg, ATTR_DIRECTION, ATTR_DIRECTION_LEFT);
+            break;
+        }
+        case DragEvent::DIRECTION_TOP_TO_BOTTOM: {
+            JSObject::SetString(arg, ATTR_DIRECTION, ATTR_DIRECTION_DOWN);
+            break;
+        }
+        case DragEvent::DIRECTION_BOTTOM_TO_TOP: {
+            JSObject::SetString(arg, ATTR_DIRECTION, ATTR_DIRECTION_UP);
+            break;
+        }
+        default: {
+            HILOG_ERROR(HILOG_MODULE_ACE, "failed to set direction attribute for event argument.");
+            break;
+        }
+    }
+    return arg;
+}
+void EventUtil::InvokeCallback(JSValue vm, JSValue callback, JSValue event)
+{
+    auto *params = new CallbackParams();
+    if (params == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "fail to invoke event callback.");
+        return;
+    }
+    params->vm = vm;
+    params->fn = callback;
+    params->arg = event;
+    // The views may be destroyed or recreated in conditional or list rendering.
+    // If we directly call the event callback function, the program will crash.
+    if (DISPATCH_FAILURE == AsyncTaskManager::GetInstance().Dispatch(CallbackExecutor, static_cast<void *>(params))) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "EventUtil::InvokeCallback failed: Async task dispatch failure.");
+        delete params;
+        params = nullptr;
+        JSRelease(event);
+    }
+}
+JSValue EventUtil::GetElementByUIView(UIView *view)
+{
+    if (view == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "fail to get element by UI view.");
+        return JSUndefined::Create();
+    }
+    UIView::ViewExtraMsg *extraMsg = view->GetExtraMsg();
+    if (extraMsg == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "fail to get element by UI view.");
+        return JSUndefined::Create();
+    }
+    JSValue *elementPtr = reinterpret_cast<JSValue *>(extraMsg->elementPtr);
+    if (elementPtr == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "fail to get element by UI view.");
+        return JSUndefined::Create();
+    }
+    return *elementPtr;
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/base/event_util.h b/frameworks/src/core/base/event_util.h
new file mode 100755
index 0000000..e4fa6d0
--- /dev/null
+++ b/frameworks/src/core/base/event_util.h
@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_EVENT_UTIL_H
+#define OHOS_ACELITE_EVENT_UTIL_H
+
+#include "non_copyable.h"
+#include "ui_view.h"
+#include "wrapper/js.h"
+
+namespace OHOS {
+namespace ACELite {
+struct CallbackParams : public MemoryHeap {
+    JSValue vm;
+    JSValue fn;
+    JSValue arg;
+};
+class EventUtil final : public MemoryHeap {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(EventUtil);
+
+    /**
+     * @brief Create a JAVASCRIPT plain object that is used as the input parameter of
+     * the callback function for click or longpress event.
+     */
+    static JSValue CreateEvent(const char *type, UIView &view, const Event &event);
+
+    /**
+     * @brief Create a JAVASCRIPT plain object that is used as the input parameter of
+     * the callback function for swipe event.
+     */
+    static JSValue CreateSwipeEvent(UIView &view, const DragEvent &event);
+
+    /**
+     * @brief Invoke the callback function of event.
+     */
+    static void InvokeCallback(JSValue vm, JSValue callback, JSValue event);
+
+    static const char *EVENT_CLICK;
+    static const char *EVENT_LONGPRESS;
+    static const char *EVENT_SWIPE;
+
+private:
+    EventUtil() {}
+    ~EventUtil() {}
+
+    /**
+     * @brief Get the DOM element that is reference to view
+     */
+    static JSValue GetElementByUIView(UIView *view);
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_EVENT_UTIL_H
diff --git a/src/core/base/framework_min_bc.h b/frameworks/src/core/base/framework_min_bc.h
old mode 100755
new mode 100644
similarity index 99%
rename from src/core/base/framework_min_bc.h
rename to frameworks/src/core/base/framework_min_bc.h
index f29b227..6c357d5
--- a/src/core/base/framework_min_bc.h
+++ b/frameworks/src/core/base/framework_min_bc.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -15,13 +15,15 @@
 
 // AUTO GENERATED, PLEASE DO NOT EDIT DIRECTLY
 
+#include <stdint.h>
+
 #ifndef ACELITE_FRAMEWORK_RAW_BUFFER
 #error THIS FILE CAN ONLY BE INCLUDED BY RAW BUFFER CPP
 #endif
 
 #ifndef OHOS_ACELITE_FRAMEWORK_MIN_SNAPSHOT_BUFFER
 #define OHOS_ACELITE_FRAMEWORK_MIN_SNAPSHOT_BUFFER
-const char g_frameworkBCBuffer[] =
+const uint8_t g_frameworkBCBuffer[] =
 {
     0x4a, 0x52, 0x52, 0x59, 0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x70, 0x0a, 0x00, 0x00,
     0x01, 0x00, 0x00, 0x00, 0x18, 0x00, 0x00, 0x00, 0x04, 0x00, 0x01, 0x00, 0x01, 0x00, 0x03, 0x00,
diff --git a/src/core/base/framework_min_js.h b/frameworks/src/core/base/framework_min_js.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/base/framework_min_js.h
rename to frameworks/src/core/base/framework_min_js.h
diff --git a/src/core/base/js_debugger_config.cpp b/frameworks/src/core/base/js_debugger_config.cpp
old mode 100755
new mode 100644
similarity index 76%
rename from src/core/base/js_debugger_config.cpp
rename to frameworks/src/core/base/js_debugger_config.cpp
index dc1488c..ec0a912
--- a/src/core/base/js_debugger_config.cpp
+++ b/frameworks/src/core/base/js_debugger_config.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -23,6 +23,12 @@
 
 namespace OHOS {
 namespace ACELite {
+Debugger &Debugger::GetInstance()
+{
+    static Debugger instance;
+    return instance;
+}
+
 #if ENABLED(ENGINE_DEBUGGER)
 bool Debugger::IsDebuggerEnabled()
 {
@@ -32,7 +38,6 @@ bool Debugger::IsDebuggerEnabled()
 void Debugger::ConfigEngineDebugger(DebuggerConfig &config)
 {
     debuggerConfig_ = config;
-    ConfigDebugger();
 }
 
 void Debugger::StartDebugger()
@@ -54,12 +59,9 @@ void Debugger::StartDebugger()
     jerryx_debugger_after_connect(protocol && connected);
     debuggerStarted_ = true;
 }
+
 void Debugger::TearDownDebugger()
 {
-    if (consoleLogFileHandler_ != nullptr) {
-        fclose(consoleLogFileHandler_);
-        consoleLogFileHandler_ = nullptr;
-    }
     if ((!debuggerConfig_.startDebuggerServer) || !(jerry_is_feature_enabled(JERRY_FEATURE_DEBUGGER))) {
         return;
     }
@@ -68,41 +70,14 @@ void Debugger::TearDownDebugger()
     debuggerStarted_ = false;
 }
 
-void Debugger::ConfigDebugger()
-{
-    if (consoleLogFileHandler_ != nullptr) {
-        fclose(consoleLogFileHandler_);
-        consoleLogFileHandler_ = nullptr;
-    }
-
-    if ((debuggerConfig_.logToFile)) {
-        if ((debuggerConfig_.logFilePath != nullptr) && (strlen(debuggerConfig_.logFilePath) > 0)) {
-            consoleLogFileHandler_ = fopen(debuggerConfig_.logFilePath, "w+");
-            if (consoleLogFileHandler_ == nullptr) {
-                HILOG_ERROR(HILOG_MODULE_ACE, "can not open the console log output file");
-            }
-        }
-    }
-}
-
 void Debugger::Output(const char * const str)
 {
-    // if debugger enabled, get config from debugger config
-    if (consoleLogFileHandler_ != nullptr) {
-        int res = fputs(str, consoleLogFileHandler_);
-        if (res == EOF) {
-            // write file error
-            HILOG_ERROR(HILOG_MODULE_ACE, "write log file failed");
-        }
-    }
     // print out the log into stdout anyway
     printf("%s", str);
 }
+
 void Debugger::FlushOutput()
 {
-    if (consoleLogFileHandler_ != nullptr) {
-        fflush(consoleLogFileHandler_);
-    }
     fflush(stdout);
 }
 
@@ -150,29 +125,33 @@ bool Debugger::IsDebuggerEnabled()
 {
     return true;
 }
+
 void Debugger::ConfigEngineDebugger(DebuggerConfig &config)
 {
     UNUSED(config);
 }
+
 void Debugger::StartDebugger()
 {
 }
+
 void Debugger::TearDownDebugger()
 {
 }
-void Debugger::ConfigDebugger()
-{
-}
+
 void Debugger::Output(const char * const str)
 {
     UNUSED(str);
 }
+
 void Debugger::FlushOutput()
 {
 }
+
 void Debugger::SetupJSContext()
 {
 }
+
 void Debugger::ReleaseJSContext()
 {
 }
diff --git a/src/core/base/js_fwk_common.cpp b/frameworks/src/core/base/js_fwk_common.cpp
similarity index 83%
rename from src/core/base/js_fwk_common.cpp
rename to frameworks/src/core/base/js_fwk_common.cpp
index 4d411ab..9683239 100755
--- a/src/core/base/js_fwk_common.cpp
+++ b/frameworks/src/core/base/js_fwk_common.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -13,32 +13,33 @@
  * limitations under the License.
  */
 #include "js_fwk_common.h"
+#include <climits>
+#include <fcntl.h>
+#include <sys/stat.h>
+#include <sys/types.h>
+#include <unistd.h>
+#if ((defined(__WIN32)) || (defined(__WIN64)))
+#include <shlwapi.h>
+#endif
 #include "ace_event_error_code.h"
 #include "ace_log.h"
 #include "ace_mem_base.h"
 #include "component.h"
 #include "component_utils.h"
+#include "dfx_assist.h"
 #include "fatal_handler.h"
-#include "file.h"
 #include "js_app_context.h"
 #include "js_app_environment.h"
 #include "js_profiler.h"
 #if ENABLED(CONSOLE_LOG_OUTPUT)
 #include "presets/console_module.h"
 #endif
-#if ENABLED(SECURE_C_FUNCTION)
-#include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 #include "presets/console_log_impl.h"
+#include "product_adapter.h"
+#include "securec.h"
 #include "task_manager.h"
 
-#if defined(__LITEOS__)
-#include <limits.h>
-#include <sys/stat.h>
-#include <unistd.h>
-#endif
-
-#if ((defined __LITEOS__) || (defined __linux__) || (defined SCREENRESOLUTION_CMAKE))
+#if ((defined __LITEOS__) || (defined __linux__) || (defined SCREENSIZE_SPECIFIED))
 #include <screen.h>
 #endif
 
@@ -90,6 +91,19 @@ int16_t JerryGetIntegerProperty(jerry_value_t object, const char * const name)
     return result;
 }
 
+bool JerryGetBoolProperty(jerry_value_t object, const char * const name, bool &outValue)
+{
+    jerry_value_t value = jerryx_get_property_str(object, name);
+    if (!jerry_value_is_boolean(value)) {
+        jerry_release_value(value);
+        HILOG_ERROR(HILOG_MODULE_ACE, "js value is not bool.");
+        return false;
+    }
+    outValue = jerry_value_to_boolean(value);
+    jerry_release_value(value);
+    return true;
+}
+
 void JerrySetFuncProperty(jerry_value_t object, const char * const name, jerry_external_handler_t handler)
 {
     if (name == nullptr || !strlen(name)) {
@@ -116,57 +130,56 @@ char *MallocStringOf(jerry_value_t source)
 
 char *MallocStringOf(jerry_value_t source, uint16_t *strLength)
 {
-    if (strLength == nullptr) {
+    if ((IS_UNDEFINED(source)) || (strLength == nullptr)) {
         return nullptr;
     }
+
     *strLength = 0;
-    if (IS_UNDEFINED(source)) {
-        return nullptr;
-    }
-    jerry_value_t target;
-    if (jerry_value_is_symbol(source)) {
-        target = jerry_get_symbol_descriptive_string(source);
-    } else {
-        target = jerry_value_to_string(source);
-    }
-    if (IS_ERROR_VALUE(target)) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "jerry_value_to_string failed, can not continue to generate char buffer");
-        jerry_release_value(target);
-        return nullptr;
-    }
-    jerry_size_t size = jerry_get_string_size(target);
-    if (size == 0) {
-        jerry_release_value(target);
-        // return empty char instead of nullptr, so caller can free safely if source is JS empty string
-        char *emptyStr = static_cast<char *>(ace_malloc(sizeof(char)));
-        if (emptyStr == nullptr) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "malloc buffer failed for empty str");
-            return nullptr;
+    bool success = false;
+    jerry_value_t target = UNDEFINED;
+    jerry_char_t *buffer = nullptr;
+    jerry_size_t length = 0;
+    do {
+        if (jerry_value_is_symbol(source)) {
+            target = jerry_get_symbol_descriptive_string(source);
+        } else {
+            target = jerry_value_to_string(source);
         }
-        emptyStr[0] = '\0';
-        return emptyStr;
-    }
-    if (size >= UINT16_MAX) {
-        jerry_release_value(target);
-        return nullptr;
-    }
-    jerry_char_t *buffer = static_cast<jerry_char_t *>(ace_malloc(sizeof(jerry_char_t) * (size + 1)));
-    if (buffer == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "malloc buffer for convert jerry string failed");
-        jerry_release_value(target);
-        return nullptr;
-    }
-    jerry_size_t length = jerry_string_to_char_buffer(target, buffer, size);
-    if ((length == 0) || (length >= UINT16_MAX) || (length > size)) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "jerry string to char buffer failed, target size[%d]", size);
-        jerry_release_value(target);
-        ace_free(buffer);
-        buffer = nullptr;
-        return nullptr;
-    }
-    // end character
-    buffer[length] = '\0';
+        if (IS_ERROR_VALUE(target)) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "jerry_value_to_string failed, can not continue to generate char buffer");
+            break;
+        }
+
+        jerry_size_t size = jerry_get_string_size(target);
+        if (size >= UINT16_MAX) {
+            break;
+        }
+        buffer = static_cast<jerry_char_t *>(ace_malloc(sizeof(jerry_char_t) * (size + 1)));
+        if (buffer == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "malloc buffer for convert jerry string failed");
+            break;
+        }
+        if (size == 0) {
+            // if here got matched, it means the JS string is empty itself
+            success = true;
+            break;
+        }
+
+        length = jerry_string_to_char_buffer(target, buffer, size);
+        if ((length == 0) || (length >= UINT16_MAX) || (length > size)) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "jerry string to char buffer failed, target size[%d]", size);
+            break;
+        }
+        success = true;
+    } while (0);
+
     jerry_release_value(target);
+    if (!success) {
+        ACE_FREE(buffer);
+        return nullptr;
+    }
+    // successful scenario, add end character
+    buffer[length] = '\0';
     *strLength = length;
     return reinterpret_cast<char *>(buffer);
 }
@@ -240,43 +253,12 @@ jerry_value_t WatcherCallbackFunc(const jerry_value_t func,
 // print out error information from jerry value
 void PrintErrorMessage(const jerry_value_t errorValue)
 {
-    const uint8_t errorMsgMaxLength = 128;
-    if (!jerry_is_feature_enabled(JERRY_FEATURE_ERROR_MESSAGES)) {
-        return;
-    }
-
-    jerry_value_t errValue = jerry_get_value_from_error(errorValue, false);
-    jerry_value_t errStrVal = jerry_value_to_string(errValue);
-    jerry_release_value(errValue);
-
-    if (jerry_value_is_error(errStrVal)) {
-        /* Avoid recursive error throws. */
-        HILOG_ERROR(HILOG_MODULE_ACE, "[Error value to string failed]");
-        jerry_release_value(errStrVal);
-        return;
-    }
-
-    jerry_size_t errStrSize = jerry_get_utf8_string_size(errStrVal);
-    if (errStrSize >= errorMsgMaxLength) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "[Error message too long]");
-        jerry_release_value(errStrVal);
-        return;
-    }
-
-    jerry_char_t errStrBuffer[errorMsgMaxLength];
-    jerry_size_t stringEnd = jerry_string_to_utf8_char_buffer(errStrVal, errStrBuffer, errStrSize);
-    errStrBuffer[stringEnd] = 0;
-    // output to platform trace
-    HILOG_ERROR(HILOG_MODULE_ACE, " [JS Error]: %s", reinterpret_cast<char *>(errStrBuffer));
-    // output to user console
-    LogString(LogLevel::LOG_LEVEL_ERR, "[JS Exception]: ");
-    LogString(LogLevel::LOG_LEVEL_ERR, reinterpret_cast<char *>(errStrBuffer));
-    // output line seperator to trigger trace output
-    LogString(LogLevel::LOG_LEVEL_ERR, "\n");
+    DfxAssist dfxAssist;
+    dfxAssist.DumpErrorCode(errorValue);
+    dfxAssist.DumpErrorMessage(errorValue);
 #if ENABLED(ENGINE_DEBUGGER)
     FlushOutput();
 #endif
-    jerry_release_value(errStrVal);
 }
 
 // wrapper function for jerry_call_function
@@ -286,7 +268,7 @@ jerry_value_t CallJSFunction(const jerry_value_t func,
                              jerry_size_t argsCount)
 {
     jerry_value_t ret = jerry_call_function(func, context, args, argsCount);
-    // trace out error infomation if the result contains error
+    // trace out error information if the result contains error
     if (jerry_value_is_error(ret)) {
         PrintErrorMessage(ret);
     }
@@ -422,16 +404,15 @@ static size_t AppendTwoPath(char * const first, uint8_t startIndex, const char *
 
     size_t copiedLength = 0;
     // we dont append '/' at the first index
-    bool sepNeeded = (first[startIndex - 1] != PATH_SEPERATOR);
+    bool sepNeeded = (first[startIndex - 1] != PATH_SEPARATOR);
     if (sepNeeded) {
-        first[startIndex] = PATH_SEPERATOR;
+        first[startIndex] = PATH_SEPARATOR;
         copiedLength++;
         startIndex++;
     }
 
-    if (sec[0] == PATH_SEPERATOR) {
+    if (sec[0] == PATH_SEPARATOR) {
         if (secLength > 1) {
-            // we have make sure '/' appened to the target already, skip it
             if (memcpy_s(first + startIndex, (destSize - startIndex), (sec + 1), (secLength - 1)) != 0) {
                 HILOG_ERROR(HILOG_MODULE_ACE, "append path error");
                 return 0;
@@ -470,7 +451,7 @@ char *RelocateFilePath(const char *appRootPath, const char *subPath, const char
         HILOG_ERROR(HILOG_MODULE_ACE, "input path or fileName is too long");
         return nullptr;
     }
-    // alawys consume subPath does not have '/'
+    // always consume subPath does not have '/'
     const uint8_t addedLength = 2;
     size_t totalLength = appRootPathLength + subPathLength + fileNameLength + addedLength;
     char *fullPath = static_cast<char *>(ace_malloc(totalLength + 1));
@@ -505,7 +486,7 @@ char *RelocateFilePathRelative(const char * const appRootPath, const char * cons
     if (jsPath == nullptr) {
         return nullptr;
     }
-    const char * const ret = strrchr(jsPath, RESOURCE_SEPERATOR);
+    const char * const ret = strrchr(jsPath, RESOURCE_SEPARATOR);
     if (ret == nullptr) {
         return nullptr;
     }
@@ -567,7 +548,7 @@ char *RelocateJSSourceFilePath(const char * const appRootPath, const char * cons
 char *ReadJSFile(const char * const appPath, const char * const jsFileName)
 {
     uint32_t contentLength = 0;
-    return ReadJSFile(appPath, jsFileName, &contentLength);
+    return ReadJSFile(appPath, jsFileName, contentLength);
 }
 
 /**
@@ -578,17 +559,10 @@ bool IsFileExisted(const char * const filePath)
     if (filePath == nullptr) {
         return false;
     }
-#if defined(__LITEOS__)
-    struct stat info;
+    struct stat info = {0};
     if (stat(filePath, &info) != 0) {
         return false;
     }
-#else
-    FileStatInfo fileStat;
-    if (FileStat(filePath, &fileStat) != 0) {
-        return false;
-    }
-#endif
     return true;
 }
 
@@ -600,109 +574,103 @@ int32_t GetFileSize(const char * const filePath)
     if (filePath == nullptr) {
         return 0;
     }
-#if defined(__LITEOS__)
-    struct stat info;
-    info.st_size = 0;
+    struct stat info = {0};
     int32_t ret = stat(filePath, &info);
-    if ((ret != 0) || (info.st_size == 0)) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "file [%s], file.size =%lld", filePath, info.st_size);
-    }
-    return info.st_size;
-#else
-    FileStatInfo fileStat;
-    fileStat.size = 0;
-    int32_t ret = FileStat(filePath, &fileStat);
-    if ((ret == FILE_RET_FAIL) || (fileStat.size == 0)) {
+    if (ret < 0) {
         HILOG_ERROR(HILOG_MODULE_ACE, "file doesn't exit or it's empty, [%s]", filePath);
     }
-    return fileStat.size;
-#endif
+    return info.st_size;
 }
 
 static int32_t OpenFileInternal(const char * const orgFullPath, bool binary = false)
 {
-#if defined(__LITEOS__)
+    const char *path = orgFullPath;
+#ifndef __LITEOS_M__ // no path canonicalization on M core
     char fullPath[PATH_MAX + 1] = {0};
+#if ((defined(__WIN32)) || (defined(__WIN64)))
+    if (!PathCanonicalize(fullPath, orgFullPath)) {
+        return -1;
+    }
+#else
     if (realpath(orgFullPath, fullPath) == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "realpath handle failed, [%s]", orgFullPath);
-        return FILE_RET_FAIL;
+        return -1;
     }
-    return open(fullPath, O_RDONLY, S_IREAD | S_IWRITE);
 #endif
-
-#if (defined(_WIN32) || defined(_WIN64))
-    return FileOpen(orgFullPath, (binary ? _O_BINARY : DEFAULT_FILE_PERMISSION));
-#else
-    return FileOpen(orgFullPath, O_RDONLY);
-#endif // (defined(_WIN32) || defined(_WIN64))
+    path = fullPath;
+#endif
+    return open(path, O_RDONLY);
 }
 
-static int32_t ReadFileInternal(const int32_t fd, void *buffer, const uint32_t targetLength)
+/**
+ * Check if the file length is under MAX limitation.
+ */
+static bool CheckFileLength(const char * const fullPath, int32_t &outFileSize)
 {
-#if defined(__LITEOS__)
-    int32_t count = read(fd, buffer, targetLength);
-#else
-    int32_t count = FileRead(fd, buffer, targetLength);
-#endif
-    return count;
-}
-
-static void CloseFileInternal(int32_t fd)
-{
-#if defined(__LITEOS__)
-    close(fd);
-#else
-    FileClose(fd);
-#endif
+    outFileSize = 0;
+    int32_t fileSize = GetFileSize(fullPath);
+    if (fileSize <= 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "open file[%s] failed for reading.", fullPath);
+        return false;
+    }
+    if (fileSize > FILE_CONTENT_LENGTH_MAX) {
+        ACE_ERROR_CODE_PRINT(EXCE_ACE_ROUTER_REPLACE_FAILED, EXCE_ACE_PAGE_FILE_TOO_HUGE);
+        return false;
+    }
+    outFileSize = fileSize;
+    return true;
 }
 
 /**
  * Read file content from one give full file path.
  * Return value must be freed by caller.
  */
-char *ReadFile(const char * const fullPath, uint32_t *fileSize, const bool binary)
+char *ReadFile(const char * const fullPath, uint32_t &fileSize, const bool binary)
 {
-    if (fileSize == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "open file[%s] failed for reading, fileSize == nullptr", fullPath);
-        return nullptr;
-    }
-    int32_t scriptLength = GetFileSize(fullPath);
-    if (scriptLength <= 0) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "open file[%s] failed for reading, scriptLength has error.", fullPath);
-        return nullptr;
-    }
+    UNUSED(binary);
+    char *scriptBuffer = nullptr;
+    int32_t fd = -1;
+    bool success = false;
 
-    if (scriptLength > FILE_CONTENT_LENGTH_MAX) {
-        ACE_ERROR_CODE_PRINT(EXCE_ACE_ROUTER_REPLACE_FAILED, EXCE_ACE_PAGE_FILE_TOO_HUGE);
-        return nullptr;
-    }
+    do {
+        int32_t scriptLength = 0;
+        if (!CheckFileLength(fullPath, scriptLength)) {
+            break;
+        }
 
-    *fileSize = 0;
-    // open file
-    int32_t fd = OpenFileInternal(fullPath, binary);
-    if (fd == FILE_RET_FAIL) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "open file[fd: %d] failed for reading", fd);
-        HILOG_ERROR(HILOG_MODULE_ACE, "open file[path: %s] failed for reading", fullPath);
+        fileSize = 0;
+        fd = OpenFileInternal(fullPath, O_RDONLY);
+        if (fd < 0) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "open file[fd: %d] failed for reading", fd);
+            HILOG_ERROR(HILOG_MODULE_ACE, "open file[path: %s] failed for reading", fullPath);
+            break;
+        }
+        scriptBuffer = static_cast<char *>(ace_malloc(scriptLength + 1));
+        if (scriptBuffer == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "malloc buffer for file content failed, file length[%d]", scriptLength);
+            break;
+        }
+        if (EOK != memset_s(scriptBuffer, (scriptLength + 1), 0, (scriptLength + 1))) {
+            break;
+        }
+        int32_t count = read(fd, scriptBuffer, scriptLength);
+        if ((count <= 0) || (count > scriptLength)) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "read fail, count(%d), length(%u), path(%s)", count, scriptLength, fullPath);
+            break;
+        }
+        scriptBuffer[count] = '\0';
+        fileSize = count;
+        success = true;
+    } while (0);
+
+    if (fd >= 0) {
+        close(fd);
+    }
+    if (!success) {
+        // failed, free buffer if it's already malloced out
+        ACE_FREE(scriptBuffer);
         return nullptr;
     }
-    char *scriptBuffer = static_cast<char *>(ace_malloc(scriptLength + 1));
-    if (scriptBuffer == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "malloc buffer for file content failed, file length[%d]", scriptLength);
-        CloseFileInternal(fd);
-        return nullptr;
-    }
-    int32_t count = ReadFileInternal(fd, scriptBuffer, scriptLength);
-    if ((count <= 0) || (count > scriptLength)) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "FileRead failed, count(%d), targetLength(%u), filePath(%s)", count, scriptLength,
-                    fullPath);
-        CloseFileInternal(fd);
-        ace_free(scriptBuffer);
-        scriptBuffer = nullptr;
-        return nullptr;
-    }
-    scriptBuffer[count] = '\0';
-    CloseFileInternal(fd);
-    *fileSize = binary ? scriptLength : count;
     return scriptBuffer;
 }
 
@@ -710,12 +678,9 @@ char *ReadFile(const char * const fullPath, uint32_t *fileSize, const bool binar
  * give app path, such as /system/app/uuid/, read script string from /system/app/uuid/src/index.js,
  * return value must be freed by caller.
  */
-char *ReadJSFile(const char * const appPath, const char * const jsFileName, uint32_t *fileSize)
+char *ReadJSFile(const char * const appPath, const char * const jsFileName, uint32_t &fileSize)
 {
-    if (fileSize == nullptr) {
-        return nullptr;
-    }
-    *fileSize = 0;
+    fileSize = 0;
     // RelocateFilePath() will check the input parameters
     char *fullPath = RelocateJSSourceFilePath(appPath, jsFileName);
     if (fullPath == nullptr) {
@@ -1051,7 +1016,8 @@ bool ParseRgbaColor(const char * const source, uint32_t &color, uint8_t &alpha)
     }
     buffer[bufSize] = 0;
     char *token;
-    int8_t move = 16;
+    // BITS_PER_BYTE is unsigned, result always equals to 16, can't overflow
+    int8_t move = BITS_PER_BYTE << 1;
     char *next = nullptr;
     token = strtok_s(buffer, DELIMITER, &next);
     color = 0;
@@ -1100,21 +1066,25 @@ struct JSPageSpecific jsPageSpecific;
 
 uint16_t GetHorizontalResolution()
 {
-// SCREENRESOLUTION_CMAKE is temporarily set, when ui and graphic unifid, this can be removed
-#if ((defined __LITEOS__) || (defined __linux__) || (defined SCREENRESOLUTION_CMAKE))
+// SCREENSIZE_SPECIFIED is temporarily set, when ui and graphic unifid, this can be removed
+#if ((defined __LITEOS__) || (defined __linux__) || (defined SCREENSIZE_SPECIFIED))
     return Screen::GetInstance().GetWidth();
 #else
     uint16_t horizontalResolution = 454;
+    uint16_t verticalResolution = 454;
+    ProductAdapter::GetScreenSize(horizontalResolution, verticalResolution);
     return horizontalResolution;
 #endif // OHOS_ACELITE_PRODUCT_WATCH
 }
 
 uint16_t GetVerticalResolution()
 {
-#if ((defined __LITEOS__) || (defined __linux__) || (defined SCREENRESOLUTION_CMAKE))
+#if ((defined __LITEOS__) || (defined __linux__) || (defined SCREENSIZE_SPECIFIED))
     return Screen::GetInstance().GetHeight();
 #else
+    uint16_t horizontalResolution = 454;
     uint16_t verticalResolution = 454;
+    ProductAdapter::GetScreenSize(horizontalResolution, verticalResolution);
     return verticalResolution;
 #endif // OHOS_ACELITE_PRODUCT_WATCH
 }
@@ -1202,7 +1172,7 @@ void CureImagePath(char *&imagePath)
         }
 
         if (lastPathPos < 0) {
-            if (*(imagePath + index) == PATH_SEPERATOR) {
+            if (*(imagePath + index) == PATH_SEPARATOR) {
                 lastPathPos = index;
             }
         }
@@ -1254,7 +1224,7 @@ const char *ParseImageSrc(jerry_value_t source)
     }
 
     if ((strstr(rawSrc, PATH_RELATIVE_WHOLE) != nullptr) || (strstr(rawSrc, PATH_RELATIVE_PART) != nullptr)) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "Ralative path is not allowed in image src.");
+        HILOG_ERROR(HILOG_MODULE_ACE, "Relative path is not allowed in image src.");
         ace_free(rawSrc);
         rawSrc = nullptr;
         return nullptr;
@@ -1269,11 +1239,13 @@ const char *ParseImageSrc(jerry_value_t source)
     return imageSrc;
 }
 
-bool CopyFontFamily(char *&destination, const char * const fontFamily)
+bool CopyFontFamily(char *&destination, const char * const fontFamily, uint32_t fontFamilyNameLen)
 {
+    // unused parameter for now, added for clean up warning
+    UNUSED(fontFamilyNameLen);
     ACE_FREE(destination);
     if (fontFamily == nullptr) {
-        return true; // the destination is alread nullptr
+        return true; // the destination is already nullptr
     }
     size_t fontFamilyLen = strlen(fontFamily);
     if (fontFamilyLen >= UINT8_MAX) {
diff --git a/src/core/base/js_fwk_common.h b/frameworks/src/core/base/js_fwk_common.h
similarity index 93%
rename from src/core/base/js_fwk_common.h
rename to frameworks/src/core/base/js_fwk_common.h
index 1fc3b06..875a53a 100755
--- a/src/core/base/js_fwk_common.h
+++ b/frameworks/src/core/base/js_fwk_common.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -157,6 +157,11 @@ constexpr char TRANSITION_TRANSFORM_Y[] = "translateY";
 constexpr char CONSTRUCTOR_VIEW_MODEL[] = "ViewModel";
 constexpr char CONSTRUCTOR_ABILITY_SLICE[] = "AbilitySlice";
 
+#ifdef FEATURE_ROTATION_API
+constexpr char FUNC_ROTATION_NAME[] = "rotation";
+constexpr char ATTR_NAME_FOCUS[] = "focus";
+#endif // FEATURE_ROTATION_API
+
 // get screen horizontal resolution
 uint16_t GetHorizontalResolution();
 // get screen vertical resolution
@@ -170,6 +175,14 @@ void JerrySetStringProperty(jerry_value_t object, const char * const name, const
 // value returned should be freed by caller when it's not nullptr and won't be used any more
 char *JerryMallocStringProperty(const jerry_value_t object, const char * const name, uint16_t &length);
 int16_t JerryGetIntegerProperty(jerry_value_t object, const char * const name);
+/**
+ * @brief try to parse bool property from one JS object, caller should check the returned result before using outValue.
+ * @param object the given object
+ * @param name the target property name
+ * @param outValue the target property value
+ * @return true if the parse successfully
+ */
+bool JerryGetBoolProperty(jerry_value_t object, const char * const name, bool &outValue);
 void JerrySetFuncProperty(jerry_value_t object, const char * const name, jerry_external_handler_t handler);
 char *MallocStringOf(jerry_value_t source);
 // convert one jerry string value to char*, and return the string length
@@ -191,9 +204,9 @@ char *RelocateJSSourceFilePath(const char * const appRootPath, const char * cons
 // read from src file, return value must be freed by caller
 char *ReadJSFile(const char * const appPath, const char * const jsFileName);
 // read the given file and return the whole file content
-char *ReadJSFile(const char * const appPath, const char * const jsFileName, uint32_t *fileSize);
+char *ReadJSFile(const char * const appPath, const char * const jsFileName, uint32_t &fileSize);
 // read the given file and return the whole file content
-char *ReadFile(const char * const fullPath, uint32_t *fileSize, const bool binary);
+char *ReadFile(const char * const fullPath, uint32_t &fileSize, const bool binary);
 // check whether the given file exists
 bool IsFileExisted(const char * const filePath);
 // Whether file existed and return the file size. 0 represents file not existed.
@@ -281,7 +294,7 @@ constexpr uint8_t ALPHA_MAX = 255;
 constexpr char BRACE_OPEN = '(';
 constexpr char BRACE_CLOSE = ')';
 constexpr char DELIMITER[] = ",";
-constexpr char RESOURCE_SEPERATOR = '/';
+constexpr char RESOURCE_SEPARATOR = '/';
 
 bool StartWith(const char *sequence, const char *prefix);
 bool IsHexColor(const char * const target);
@@ -290,16 +303,16 @@ bool IsRgbaColor(const char * const target);
 bool ParseHexColor(const char * const source, uint32_t &color, uint8_t &alpha);
 bool ParseRgbaColor(const char * const source, uint32_t &color, uint8_t &alpha);
 bool ParseColor(const char * const source, uint32_t &color, uint8_t &alpha);
-bool CopyFontFamily(char *&destination, const char * const fontFamily);
+bool CopyFontFamily(char *&destination, const char * const fontFamily, uint32_t fontFamilyNameLen = 0);
 
 #if (defined(_WIN32) || defined(_WIN64))
-constexpr char PATH_SEPERATOR = '\\';
+constexpr char PATH_SEPARATOR = '\\';
 constexpr char PATH_RELATIVE_WHOLE[] = "\\..\\";
 constexpr char PATH_RELATIVE_PART[] = "..\\";
 constexpr char SRC_SUB_FOLDER_NAME[] = "";
 constexpr char JS_INDEX_FILE_PATH[] = "pages\\index\\index";
 #else
-constexpr char PATH_SEPERATOR = '/';
+constexpr char PATH_SEPARATOR = '/';
 constexpr char PATH_RELATIVE_WHOLE[] = "/../";
 constexpr char PATH_RELATIVE_PART[] = "../";
 constexpr char SRC_SUB_FOLDER_NAME[] = "";
@@ -317,6 +330,7 @@ enum {
 };
 
 constexpr int VA_ARG_END_FLAG = -1;
+constexpr int INVALID_PIXEL_VALUE = -1;
 
 // switch on random path
 #ifndef JS_PAGE_SPECIFIC
diff --git a/src/core/base/key_parser.cpp b/frameworks/src/core/base/key_parser.cpp
similarity index 91%
rename from src/core/base/key_parser.cpp
rename to frameworks/src/core/base/key_parser.cpp
index 02d3631..d37cb61 100755
--- a/src/core/base/key_parser.cpp
+++ b/frameworks/src/core/base/key_parser.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -205,10 +205,16 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
                 return K_CLOCK_HAND;
             }
 #endif // FEATURE_COMPONENT_ANALOG_CLOCK
+            break;
         case 'd':
             if (!strcmp(s, "atasets")) {
                 return K_DATASETS;
             }
+#ifdef FEATURE_DATE_FORMAT
+            if (!strcmp(s, "ay")) {
+                return K_DAY;
+            }
+#endif
 #ifdef FEATURE_COMPONENT_DATE_PICKER
             if (!strcmp(s, "ate")) {
                 return K_DATE;
@@ -261,6 +267,9 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
             if (!strcmp(s, "alse")) {
                 return K_FALSE;
             }
+            if (!strcmp(s, "illmode")) {
+                return K_FILL_MODE;
+            }
             if (!strcmp(s, "ixedsize")) {
                 return K_FIXED_SIZE;
             }
@@ -295,11 +304,16 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
             if (!strcmp(s, "eight")) {
                 return K_HEIGHT;
             }
-#ifdef FEATURE_COMPONENT_ANALOG_CLOCK
+#if (defined(FEATURE_COMPONENT_ANALOG_CLOCK)) || (defined(FEATURE_DATE_FORMAT))
             if (!strcmp(s, "our")) {
                 return K_HOUR;
             }
 #endif // FEATURE_COMPONENT_ANALOG_CLOCK
+#ifdef FEATURE_DATE_FORMAT
+            if (!strcmp(s, "our12")) {
+                return K_HOUR12;
+            }
+#endif
             break;
         case 'i':
             if (!strcmp(s, "d")) {
@@ -367,6 +381,11 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
             if (!strcmp(s, "oop")) {
                 return K_LOOP;
             }
+#ifdef FEATURE_DATE_FORMAT
+            if (!strcmp(s, "ong")) {
+                return K_LONG;
+            }
+#endif
             break;
         case 'm':
             if (!strcmp(s, "argin")) {
@@ -401,6 +420,22 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
                 return K_MUTED;
             }
 #endif // FEATURE_COMPONENT_VIDEO
+#ifdef FEATURE_NUMBER_FORMAT
+            if (!strcmp(s, "inimumFractionDigits")) {
+                return K_MINIMUMFRACTIONDIGITS;
+            }
+            if (!strcmp(s, "aximumFractionDigits")) {
+                return K_MAXIMUMFRACTIONDIGITS;
+            }
+#endif
+#ifdef FEATURE_DATE_FORMAT
+            if (!strcmp(s, "inute")) {
+                return K_MINUTE;
+            }
+            if (!strcmp(s, "onth")) {
+                return K_MONTH;
+            }
+#endif
             break;
         case 'n':
             if (!strcmp(s, "ame")) {
@@ -409,13 +444,18 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
             if (!strcmp(s, "one")) {
                 return K_NONE;
             }
+#ifdef FEATURE_DATE_FORMAT
+            if (!strcmp(s, "umeric")) {
+                return K_NUMERIC;
+            }
+#endif
             break;
         case 'o':
             if (!strcmp(s, "pacity")) {
                 return K_OPACITY;
             }
             if (!strcmp(s, "ptions")) {
-                return K_OPATIONS;
+                return K_OPTIONS;
             }
             break;
         case 'p':
@@ -462,6 +502,13 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
                 return K_PROGRESS;
             }
             break;
+#ifdef FEATURE_COMPONENT_QRCODE
+        case 'q':
+            if (!strcmp(s, "rcode")) {
+                return K_QRCODE;
+            }
+            break;
+#endif // FEATURE_COMPONENT_QRCODE
         case 'r':
             if (!strcmp(s, "adio")) {
                 return K_RADIO;
@@ -529,6 +576,11 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
             if (!strcmp(s, "how")) {
                 return K_SHOW;
             }
+#ifdef FEATURE_DATE_FORMAT
+            if (!strcmp(s, "hort")) {
+                return K_SHORT;
+            }
+#endif
             if (!strcmp(s, "lider")) {
                 return K_SLIDER;
             }
@@ -561,6 +613,11 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
             if (!strcmp(s, "trokeWidth")) {
                 return K_STROKE_WIDTH;
             }
+#ifdef FEATURE_NUMBER_FORMAT
+            if (!strcmp(s, "tyle")) {
+                return K_STYLE;
+            }
+#endif // FEATURE_NUMBER_FORMAT
             if (!strcmp(s, "wipe")) {
                 return K_SWIPE;
             }
@@ -635,6 +692,13 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
             }
 #endif // FEATURE_COMPONENT_ANALOG_CLOCK
             break;
+        case 'u':
+#ifdef FEATURE_NUMBER_FORMAT
+        if (!strcmp(s, "seGrouping")) {
+            return K_USEGROUP;
+        }
+#endif // FEATURE_NUMBER_FORMAT
+            break;
         case 'v':
             if (!strcmp(s, "alue")) {
                 return K_VALUE;
@@ -656,6 +720,13 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
                 return K_WRAP;
             }
             break;
+        case '2':
+#ifdef FEATURE_DATE_FORMAT
+            if (!strcmp(s, "-digit")) {
+                return K_DIGIT2;
+            }
+            break;
+#endif
         default:
             break;
             // clang-format on
diff --git a/src/core/base/key_parser.h b/frameworks/src/core/base/key_parser.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/base/key_parser.h
rename to frameworks/src/core/base/key_parser.h
diff --git a/src/core/base/keys.h b/frameworks/src/core/base/keys.h
similarity index 91%
rename from src/core/base/keys.h
rename to frameworks/src/core/base/keys.h
index e0f379d..0fbeb8e 100755
--- a/src/core/base/keys.h
+++ b/frameworks/src/core/base/keys.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -94,6 +94,10 @@ enum {
 #ifdef FEATURE_COMPONENT_DATE_PICKER
     KEYWORD(DATE, date) // picker-view attr value
 #endif // FEATURE_COMPONENT_DATE_PICKER
+#ifdef FEATURE_DATE_FORMAT
+    KEYWORD(DAY, day)
+    KEYWORD(DIGIT2, digit2)
+#endif
     KEYWORD(DIRECTION, direction) // progress direction
     KEYWORD(DISPLAY, display) // div layout
     KEYWORD(DIV, div) // tag name
@@ -114,6 +118,7 @@ enum {
 #ifdef FEATURE_COMPONENT_VIDEO
     KEYWORD(FINISH, finish) // video component finish event tag
 #endif // FEATURE_COMPONENT_VIDEO
+    KEYWORD(FILL_MODE, fillmode) // image-animator attribtue
     KEYWORD(FIXED_SIZE, fixedsize) // image-animator attribute
     KEYWORD(FLEX_DIRECTION, flexDirection) // layout style
     KEYWORD(FLEX_END, flex-end) // layout style
@@ -123,9 +128,12 @@ enum {
     KEYWORD(FONT_FAMILY, fontFamily) // text style type
     KEYWORD(FORWARDS, forwards) // animation fill value
     KEYWORD(HEIGHT, height) // common attributes
-#ifdef FEATURE_COMPONENT_ANALOG_CLOCK
+#if (defined(FEATURE_COMPONENT_ANALOG_CLOCK)) || (defined(FEATURE_DATE_FORMAT))
     KEYWORD(HOUR, hour) // analog-clock hour
-#endif // FEATURE_COMPONENT_ANALOG_CLOCK
+#endif // FEATURE_COMPONENT_ANALOG_CLOCK FEATURE_DATE_FORMAT
+#ifdef FEATURE_DATE_FORMAT
+    KEYWORD(HOUR12, hour12)
+#endif
     KEYWORD(ID, id) // common attributes
     KEYWORD(IMAGE, image) // tag name
     KEYWORD(IMAGE_ANIMATOR, image-animator) // tag name
@@ -145,6 +153,9 @@ enum {
     KEYWORD(LINE_HEIGHT, lineHeight) // text style type
     KEYWORD(LIST, list) // list tag name
     KEYWORD(LIST_ITEM, list-item) // list-item tag name
+#ifdef FEATURE_DATE_FORMAT
+    KEYWORD(LONG, long)
+#endif
     KEYWORD(LONGPRESS, longpress) // long progress event listener
     KEYWORD(LOOP, loop) // swiper loop attribute
     KEYWORD(MARGIN, margin) // common style margin
@@ -156,13 +167,20 @@ enum {
     KEYWORD(MAX, max) // common attributes
     KEYWORD(MIN, min) // common attributes, analog-clock minute
     KEYWORD(MINI, mini) // text font size type
+#ifdef FEATURE_DATE_FORMAT
+    KEYWORD(MINUTE, minute)
+    KEYWORD(MONTH, month)
+#endif
 #ifdef FEATURE_COMPONENT_VIDEO
     KEYWORD(MUTED, muted) // video component muted attribute
 #endif // FEATURE_COMPONENT_VIDEO
     KEYWORD(NAME, name) // the attribute name
     KEYWORD(NONE, none) // animation fill value
+#ifdef FEATURE_DATE_FORMAT
+    KEYWORD(NUMERIC, numeric)
+#endif
     KEYWORD(OPACITY, opacity) // common style opacity
-    KEYWORD(OPATIONS, opations) // chart options
+    KEYWORD(OPTIONS, options) // chart options
     KEYWORD(PADDING, padding)
     KEYWORD(PADDING_BOTTOM, paddingBottom)
     KEYWORD(PADDING_LEFT, paddingLeft)
@@ -179,6 +197,9 @@ enum {
     KEYWORD(PIVOT_Y, pivotY) // clock-hand pivot-y
 #endif // FEATURE_COMPONENT_ANALOG_CLOCK
     KEYWORD(PROGRESS, progress) // progress tag name
+#ifdef FEATURE_COMPONENT_QRCODE
+    KEYWORD(QRCODE, qrcode) // qrcode tag name
+#endif
     KEYWORD(RADIO, radio) // the type in input
     KEYWORD(RADIUS, radius) // circle progress radius
     KEYWORD(RANGE, range) // picker-view attr
@@ -196,6 +217,9 @@ enum {
 #ifdef FEATURE_COMPONENT_ANALOG_CLOCK
     KEYWORD(SEC, sec) // analog-clock second
 #endif // FEATURE_COMPONENT_ANALOG_CLOCK
+#ifdef FEATURE_DATE_FORMAT
+    KEYWORD(SECOND, second)
+#endif
 #ifdef FEATURE_COMPONENT_VIDEO
     KEYWORD(SEEKING, seeking) // // video component seeking event tag
     KEYWORD(SEEKED, seeked) // // video component seeked event tag
@@ -204,6 +228,9 @@ enum {
     KEYWORD(SELECTED_COLOR, selectedColor) // picker-view style
     KEYWORD(SELECTED_FONT_FAMILY, selectedFontFamily) // picker-view style
     KEYWORD(SELECTED_FONT_SIZE, selectedFontSize) // picker-view style
+#ifdef FEATURE_DATE_FORMAT
+    KEYWORD(SHORT, short)
+#endif
     KEYWORD(SHOW, show)
     KEYWORD(SLIDER, slider) // tag name
     KEYWORD(SPACE_AROUND, space-around) // layout style
@@ -254,6 +281,16 @@ enum {
 #endif // FEATURE_COMPONENT_VIDEO
     KEYWORD(WIDTH, width) // common attributes
     KEYWORD(WRAP, wrap) // flex wrap
+#ifdef FEATURE_DATE_FORMAT
+    KEYWORD(WEEKDAY, weekday)
+    KEYWORD(YEAR, year)
+#endif
+#ifdef FEATURE_NUMBER_FORMAT
+    KEYWORD(STYLE, style)
+    KEYWORD(USEGROUP, useGroup)
+    KEYWORD(MINIMUMFRACTIONDIGITS, minimumFractionDigits)
+    KEYWORD(MAXIMUMFRACTIONDIGITS, maximumFractionDigits)
+#endif
     // Reused by the struct end
 // clang-format on
 #ifdef KEYWORDS_ENUM_DEFINE
diff --git a/frameworks/src/core/base/lazy_load_manager.cpp b/frameworks/src/core/base/lazy_load_manager.cpp
new file mode 100755
index 0000000..00001f2
--- /dev/null
+++ b/frameworks/src/core/base/lazy_load_manager.cpp
@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "lazy_load_manager.h"
+#include "ace_log.h"
+#include "component.h"
+#include "component_utils.h"
+#include "lazy_load_watcher.h"
+
+namespace OHOS {
+namespace ACELite {
+LazyLoadManager::LazyLoadManager() : firstWatcher_(nullptr), lastWatcher_(nullptr), state_(LazyLoadState::INIT)
+{
+}
+
+LazyLoadManager::~LazyLoadManager()
+{
+    ResetWatchers();
+}
+
+void LazyLoadManager::ResetWatchers()
+{
+    LazyLoadWatcher *next = nullptr;
+    while (firstWatcher_ != nullptr) {
+        next = const_cast<LazyLoadWatcher *>(firstWatcher_->GetNext());
+        delete firstWatcher_;
+        firstWatcher_ = next;
+    }
+
+    lastWatcher_ = nullptr;
+    state_ = LazyLoadState::INIT;
+}
+
+void LazyLoadManager::RenderLazyLoadWatcher()
+{
+    LazyLoadWatcher *next = nullptr;
+    while (firstWatcher_ != nullptr) {
+        Component *componet = ComponentUtils::GetComponentFromBindingObject(firstWatcher_->GetNativeElement());
+        if (componet != nullptr) {
+            componet->AddWatcherItem(firstWatcher_->GetAttrName(), firstWatcher_->GetAttrGetter());
+        }
+        next = const_cast<LazyLoadWatcher *>(firstWatcher_->GetNext());
+        delete firstWatcher_;
+        firstWatcher_ = next;
+    }
+    state_ = LazyLoadState::DONE;
+}
+
+void LazyLoadManager::AddLazyLoadWatcher(jerry_value_t nativeElement, jerry_value_t attrName, jerry_value_t getter)
+{
+    if (nativeElement == UNDEFINED || attrName == UNDEFINED || getter == UNDEFINED) {
+        return;
+    }
+
+    LazyLoadWatcher *watcher =
+            new LazyLoadWatcher(nativeElement, jerry_acquire_value(attrName), jerry_acquire_value(getter));
+    if (watcher == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create watcher errpr");
+        return;
+    }
+    if (firstWatcher_ == nullptr) {
+        firstWatcher_ = watcher;
+        lastWatcher_ = watcher;
+    } else {
+        lastWatcher_->SetNext(*watcher);
+        lastWatcher_ = watcher;
+    }
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/base/lazy_load_manager.h b/frameworks/src/core/base/lazy_load_manager.h
new file mode 100755
index 0000000..514ad17
--- /dev/null
+++ b/frameworks/src/core/base/lazy_load_manager.h
@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_LAZY_LOAD_MANAGER_H
+#define OHOS_ACELITE_LAZY_LOAD_MANAGER_H
+
+#include "lazy_load_watcher.h"
+#include "non_copyable.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * lazy load state
+ */
+enum class LazyLoadState : uint8_t {
+    INIT,
+    READY,
+    DONE,
+    ABANDON
+};
+
+class LazyLoadManager final : public MemoryHeap {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(LazyLoadManager);
+    LazyLoadManager();
+
+    ~LazyLoadManager();
+
+    void ResetWatchers();
+
+    /**
+     * @brief Cache watcher
+     */
+    void AddLazyLoadWatcher(jerry_value_t nativeElement, jerry_value_t attrName, jerry_value_t getter);
+
+    /**
+     * @brief Render watcher at next TE task
+     */
+    void RenderLazyLoadWatcher();
+
+    const LazyLoadWatcher *GetLazyWatcher() const
+    {
+        return firstWatcher_;
+    }
+
+    void SetState(LazyLoadState state)
+    {
+        state_ = state;
+    }
+
+    LazyLoadState GetState() const
+    {
+        return state_;
+    }
+private:
+    LazyLoadWatcher *firstWatcher_;
+    LazyLoadWatcher *lastWatcher_;
+    LazyLoadState state_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_LAZY_LOAD_MANAGER_H
diff --git a/frameworks/src/core/base/lazy_load_watcher.cpp b/frameworks/src/core/base/lazy_load_watcher.cpp
new file mode 100755
index 0000000..d9cbda8
--- /dev/null
+++ b/frameworks/src/core/base/lazy_load_watcher.cpp
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "lazy_load_watcher.h"
+namespace OHOS {
+namespace ACELite {
+LazyLoadWatcher::LazyLoadWatcher(jerry_value_t nativeElement, jerry_value_t attrName, jerry_value_t getter)
+    : nativeElement_(nativeElement),
+      attrName_(attrName),
+      getter_(getter),
+      next_(nullptr)
+{
+}
+
+LazyLoadWatcher::~LazyLoadWatcher()
+{
+    jerry_release_value(attrName_);
+    jerry_release_value(getter_);
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/base/lazy_load_watcher.h b/frameworks/src/core/base/lazy_load_watcher.h
new file mode 100755
index 0000000..8a9329b
--- /dev/null
+++ b/frameworks/src/core/base/lazy_load_watcher.h
@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_LAZY_LOAD_WATCHER_H
+#define OHOS_ACELITE_LAZY_LOAD_WATCHER_H
+
+#include "jerryscript-core.h"
+#include "js_fwk_common.h"
+#include "non_copyable.h"
+
+namespace OHOS {
+namespace ACELite {
+class LazyLoadWatcher final : public MemoryHeap {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(LazyLoadWatcher);
+
+    LazyLoadWatcher(jerry_value_t nativeElement, jerry_value_t attrName, jerry_value_t getter);
+
+    ~LazyLoadWatcher();
+
+    void SetNext(LazyLoadWatcher &next)
+    {
+        next_ = &next;
+    }
+
+    const LazyLoadWatcher *GetNext() const
+    {
+        return next_;
+    }
+
+    jerry_value_t GetNativeElement() const
+    {
+        return nativeElement_;
+    }
+
+    jerry_value_t GetAttrName() const
+    {
+        return attrName_;
+    }
+
+    jerry_value_t GetAttrGetter() const
+    {
+        return getter_;
+    }
+private:
+    jerry_value_t nativeElement_;
+    jerry_value_t attrName_;
+    jerry_value_t getter_;
+    LazyLoadWatcher *next_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_LAZY_LOAD_WATCHER_H
diff --git a/frameworks/src/core/base/locale_util.cpp b/frameworks/src/core/base/locale_util.cpp
new file mode 100755
index 0000000..ee145cb
--- /dev/null
+++ b/frameworks/src/core/base/locale_util.cpp
@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "locale_util.h"
+#ifdef FEATURE_INTL_MODULE
+#include "ace_log.h"
+#include "global.h"
+#include "js_fwk_common.h"
+#include "memory_heap.h"
+#include "securec.h"
+#include "string.h"
+
+namespace OHOS {
+namespace ACELite {
+using namespace I18N;
+LocaleInfo *LocaleUtil::GetLocaleInfo(char* locale)
+{
+    if (locale == nullptr) {
+        return GetSystemLocaleInfo();
+    }
+    LocaleInfo *localeInfo = nullptr;
+    // the locale info is used '-' as separator
+    const char *delemeter = "-";
+    char *country = nullptr;
+    char *next = nullptr;
+    if (strstr(locale, delemeter)) {
+        country = strtok_s(locale, delemeter, &next);
+    }
+    if (country == nullptr) {
+        localeInfo = new LocaleInfo(locale, nullptr);
+    } else {
+        char *origion = strtok_s(nullptr, delemeter, &next);
+        if ((next == nullptr) || (!strcmp("", next))) {
+            // set the language and region info
+            localeInfo = new LocaleInfo(country, origion);
+        } else {
+            // set the language, region and script info
+            localeInfo = new LocaleInfo(country, origion, next);
+        }
+    }
+    // if the locale info is nullptr or set locale info failed, set the system locale info
+    if ((localeInfo == nullptr) || (localeInfo->GetId() == nullptr)) {
+        ACE_DELETE(localeInfo);
+        localeInfo = GetSystemLocaleInfo();
+    }
+    return localeInfo;
+}
+
+LocaleInfo *LocaleUtil::GetSystemLocaleInfo()
+{
+    LocaleInfo *info = nullptr;
+    char *language = nullptr;
+    char *region = nullptr;
+    do {
+        language = reinterpret_cast<char *>(ace_malloc(MAX_LANGUAGE_LENGTH));
+        region = reinterpret_cast<char *>(ace_malloc(MAX_REGION_LENGTH));
+        if ((language == nullptr) || (region == nullptr)) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "malloc system info failed");
+            break;
+        }
+        int langRet = GLOBAL_GetLanguage(language, MAX_LANGUAGE_LENGTH);
+        int regionRet = GLOBAL_GetRegion(region, MAX_REGION_LENGTH);
+        if ((langRet != 0) || (regionRet != 0)) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "get system language info failed");
+            break;
+        }
+        info = new LocaleInfo(language, region);
+    } while (0);
+    ACE_FREE(language);
+    ACE_FREE(region);
+    return info;
+}
+} // namespace ACELite
+} // namespace OHOS
+#endif
diff --git a/frameworks/src/core/base/locale_util.h b/frameworks/src/core/base/locale_util.h
new file mode 100644
index 0000000..8a8bd76
--- /dev/null
+++ b/frameworks/src/core/base/locale_util.h
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_LOCALE_UTIL_H
+#define OHOS_ACELITE_LOCALE_UTIL_H
+#include "acelite_config.h"
+#ifdef FEATURE_INTL_MODULE
+#include "locale_info.h"
+#include "non_copyable.h"
+namespace OHOS {
+namespace ACELite {
+class LocaleUtil final {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(LocaleUtil);
+    LocaleUtil() = delete;
+    ~LocaleUtil() = delete;
+
+    /**
+     * @brief split the locale info by '-', set the language, region, and script info
+     * @param locale the locale string
+     * @return the localeInfo object which has set the language, region and script
+     */
+    static I18N::LocaleInfo *GetLocaleInfo(char *locale);
+
+    /**
+     * @brief get the system language and region info
+     * @return the locale object which has set the language and region info
+     */
+    static I18N::LocaleInfo *GetSystemLocaleInfo();
+};
+}
+}
+#endif // FEATURE_INTL_MODULE
+#endif
diff --git a/frameworks/src/core/base/mem_proc.cpp b/frameworks/src/core/base/mem_proc.cpp
new file mode 100644
index 0000000..1b09282
--- /dev/null
+++ b/frameworks/src/core/base/mem_proc.cpp
@@ -0,0 +1,176 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "mem_proc.h"
+#ifdef SIMULATOR_MEMORY_ANALYSIS
+#include <cstdio>
+#include <windows.h>
+#include <psapi.h>
+#include "ace_log.h"
+#include "file.h"
+#include "jerryscript-core.h"
+#include "jerryscript.h"
+#include "js_fwk_common.h"
+#include "securec.h"
+#include "time.h"
+
+namespace OHOS {
+namespace ACELite {
+constexpr uint8_t MSG_LENGTH = 100;
+
+constexpr uint32_t UNIT = 1024;
+
+AceMemProc *AceMemProc::GetInstance()
+{
+    static AceMemProc instance;
+    return &instance;
+}
+
+void AceMemProc::ClearUp()
+{
+    if (!IsEnabled()) {
+        return;
+    }
+    // backup prev txt, create a new txt
+    struct stat fileStat;
+
+    int32_t state = stat(MEM_LOG_FILE_PATH, &fileStat);
+    if ((state != 0) || (fileStat.st_size == 0)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Back up file error.");
+        return;
+    }
+    // it exists and not empty
+    time_t seconds = time(NULL);
+    char markdata[MSG_LENGTH];
+    if (sprintf_s(markdata, MSG_LENGTH, "%ti.txt", seconds) < 0) {
+        close(state);
+        state = -1;
+        return;
+    }
+    char *fullPath = RelocateJSSourceFilePath(MEM_BACK_UP_LOG_FILE_PREFIX, markdata);
+    if (fullPath == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Back up file error.");
+    } else {
+        rename(MEM_LOG_FILE_PATH, fullPath);
+        ace_free(fullPath);
+        fullPath = nullptr;
+    }
+    close(state);
+    state = -1;
+}
+
+void AceMemProc::SysMemTracing()
+{
+    if (!IsEnabled()) {
+        return;
+    }
+    HANDLE handle = GetCurrentProcess();
+    PROCESS_MEMORY_COUNTERS pmc = {0};
+    if (!GetProcessMemoryInfo(handle, (PROCESS_MEMORY_COUNTERS *)&pmc, sizeof(pmc))) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Get process memory error.");
+        return;
+    }
+
+    FILE *fp = fopen(MEM_LOG_FILE_PATH, "a+");
+    if (fp == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Get file error.");
+        return;
+    }
+
+    // physical memory
+    char markdata[MSG_LENGTH];
+    if (sprintf_s(markdata, MSG_LENGTH, "Phy:%d(KB)\n", uint32_t(pmc.WorkingSetSize / UNIT)) < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Output file error.");
+        fclose(fp);
+        fp = nullptr;
+        return;
+    }
+    fputs(markdata, fp);
+
+    // virtual memory
+    if (sprintf_s(markdata, MSG_LENGTH, "Vir:%d(KB)\n", uint32_t(pmc.PagefileUsage / UNIT)) < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Output file error.");
+        fclose(fp);
+        fp = nullptr;
+        return;
+    }
+    fputs(markdata, fp);
+
+    fflush(fp);
+    fclose(fp);
+    fp = nullptr;
+}
+
+void AceMemProc::JerryMemTracing()
+{
+    if (!IsEnabled()) {
+        return;
+    }
+    jerry_heap_stats_t stats = {0};
+    if (!jerry_get_memory_stats(&stats)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Get jerry heap stats error.");
+        return;
+    }
+
+    FILE *fp = nullptr;
+    fp = fopen(MEM_LOG_FILE_PATH, "a+");
+    if (fp == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Get file error");
+        return;
+    }
+
+    size_t total = stats.size;
+    size_t current = stats.allocated_bytes;
+    size_t peak = stats.peak_allocated_bytes;
+    // jerry total memory
+    char markdata[MSG_LENGTH];
+    if (sprintf_s(markdata, MSG_LENGTH, "jerry heap total:%d(KB)\n", uint32_t(total / UNIT)) < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Output file error.");
+        fclose(fp);
+        fp = nullptr;
+        return;
+    }
+    fputs(markdata, fp);
+
+    // jerry current memory
+    if (sprintf_s(markdata, MSG_LENGTH, "jerry heap current:%d(KB)\n", uint32_t(current / UNIT)) < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Output file error.");
+        fclose(fp);
+        fp = nullptr;
+        return;
+    }
+    fputs(markdata, fp);
+
+    // jerry peak memory
+    if (sprintf_s(markdata, MSG_LENGTH, "jerry heap peak:%d(KB)\n", uint32_t(peak / UNIT)) < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Output file error.");
+        fclose(fp);
+        fp = nullptr;
+        return;
+    }
+    fputs(markdata, fp);
+
+    fflush(fp);
+    fclose(fp);
+    fp = nullptr;
+}
+
+bool AceMemProc::IsEnabled()
+{
+    return IsFileExisted(MEM_PROC_ENABLE_FLAG_FILE);
+}
+} // namespace ACELite
+} // namespace OHOS
+#endif // SIMULATOR_MEMORY_ANALYSIS
diff --git a/frameworks/src/core/base/mem_proc.h b/frameworks/src/core/base/mem_proc.h
new file mode 100644
index 0000000..21036b5
--- /dev/null
+++ b/frameworks/src/core/base/mem_proc.h
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_MEM_PROC_H
+#define OHOS_ACELITE_MEM_PROC_H
+
+#include "acelite_config.h"
+#ifdef SIMULATOR_MEMORY_ANALYSIS
+#define CLEAR_UP() AceMemProc::GetInstance()->ClearUp()
+#define SYS_MEMORY_TRACING() AceMemProc::GetInstance()->SysMemTracing()
+#define JERRY_MEMORY_TRACING() AceMemProc::GetInstance()->JerryMemTracing()
+#else
+#define CLEAR_UP()
+#define SYS_MEMORY_TRACING()
+#define JERRY_MEMORY_TRACING()
+#endif // SIMULATOR_MEMORY_ANALYSIS
+
+#ifdef SIMULATOR_MEMORY_ANALYSIS
+namespace OHOS {
+namespace ACELite {
+class AceMemProc {
+public:
+    /**
+     * @brief Use static global variable for easy access in different source code file.
+     *
+     * @return global singleton AceMemProc object
+     */
+    static AceMemProc *GetInstance();
+
+    /**
+     * @brief Check if the memory proc is enabled or not.
+     *
+     * @return true for enabled, false for not
+     */
+    static bool IsEnabled();
+
+    /**
+     * @brief Clear up the previous analysis file.
+     */
+    void ClearUp();
+
+    /**
+     * @brief Output the system memory.
+     */
+    void SysMemTracing();
+
+    /**
+     * @brief Output the jerry memory.
+     *
+     */
+    void JerryMemTracing();
+
+private:
+    /**
+     * @brief Default constructor.
+     */
+    AceMemProc() = default;
+
+    /**
+     * @brief Default destructor.
+     */
+    ~AceMemProc() = default;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // SIMULATOR_MEMORY_ANALYSIS
+#endif // OHOS_ACELITE_MEM_PROC_H
\ No newline at end of file
diff --git a/src/core/base/memory_heap.cpp b/frameworks/src/core/base/memory_heap.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/base/memory_heap.cpp
rename to frameworks/src/core/base/memory_heap.cpp
diff --git a/src/core/base/non_copyable.h b/frameworks/src/core/base/non_copyable.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/base/non_copyable.h
rename to frameworks/src/core/base/non_copyable.h
diff --git a/frameworks/src/core/base/number_parser.cpp b/frameworks/src/core/base/number_parser.cpp
new file mode 100644
index 0000000..751646d
--- /dev/null
+++ b/frameworks/src/core/base/number_parser.cpp
@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#include "number_parser.h"
+#include <cstdlib>
+#include <cstring>
+#include "ace_log.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * @brief ParseDoubleValue convert one string to number(int32_t) value
+ * @param percentStr the under processing string
+ * @param strLength the given string length
+ * @param outValue the converted result
+ * @return the process result, false for converting failed, true for success, caller
+ * should check the returned value before using outValue.
+ */
+bool NumberParser::ParseDoubleValue(const char *str, uint16_t strLength, double &outValue)
+{
+    if (!IsValidString(str, strLength)) {
+        return false;
+    }
+
+    outValue = strtod(str, nullptr);
+    return true;
+}
+
+/**
+ * @brief ParsePercentValue convert percent string to number value
+ * @param percentStr the under processing percent string, for example "10%"
+ * @param strLength the given percent string length
+ * @param outValue the converted result
+ * @return the process result, false for converting failed, true for success, caller
+ * should check the returned value before using outValue.
+ */
+bool NumberParser::ParsePercentValue(const char *percentStr, uint16_t strLength, float &outValue)
+{
+    constexpr uint16_t minLength = 2;
+    // check input parameters
+    if (!(IsValidString(percentStr, strLength)) || (strLength < minLength)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "parse percent value failed, invalid input parameters");
+        return false;
+    }
+    size_t originalStrLen = strlen(percentStr);
+    uint16_t ensuredStrLength = (strLength > originalStrLen) ? originalStrLen : strLength;
+    // only support max 15 bytes length string
+    constexpr uint16_t maxLength = 16;
+    if (ensuredStrLength > maxLength) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "parse percent value failed, input string too long [%d]", ensuredStrLength);
+        return false;
+    }
+    // the latest charater must be %, and the first digit must not be "."
+    if ((percentStr[0] == '.') || (percentStr[ensuredStrLength - 1] != '%')) {
+        return false;
+    }
+    // check if the string is one valid number format
+    uint16_t index = (percentStr[0] == '-') ? 1 : 0;
+    constexpr uint16_t minNegativeLength = minLength + 1;
+    if ((index == 1) && (ensuredStrLength < minNegativeLength)) {
+        // for negative number, the min length is 3
+        return false;
+    }
+    while ((index < ensuredStrLength) && (percentStr[index] != '%')) {
+        if ((percentStr[index] != '.') && ((percentStr[index] < '0') || (percentStr[index] > '9'))) {
+            // give up the parsing, it's not digit format
+            return false;
+        }
+        index++;
+    }
+    // do the parsing
+    outValue = (float)(strtod(percentStr, nullptr));
+    return true;
+}
+
+/**
+ * @brief IsValidString check if the input target string is valid
+ * @param str the given under processing string
+ * @param strLength the given string's length
+ * @return true for valid string, false for not
+ */
+bool NumberParser::IsValidString(const char *str, uint16_t strLength)
+{
+    return ((str != nullptr) && (strLength != 0));
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/base/number_parser.h b/frameworks/src/core/base/number_parser.h
new file mode 100644
index 0000000..a12063c
--- /dev/null
+++ b/frameworks/src/core/base/number_parser.h
@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_NUMBER_PARSER_H
+#define OHOS_ACELITE_NUMBER_PARSER_H
+
+#include <cstdint>
+#include "non_copyable.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * Utils class for number formating operations.
+ */
+class NumberParser final {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(NumberParser);
+    NumberParser() = delete;
+    ~NumberParser() = delete;
+
+    /**
+     * @brief ParseDoubleValue convert one string to number(double) value
+     * @param percentStr the under processing string
+     * @param strLength the given string length
+     * @param outValue the converted result
+     * @return the process result, false for converting failed, true for success, caller
+     * should check the returned value before using outValue.
+     */
+    static bool ParseDoubleValue(const char *str, uint16_t strLength, double &outValue);
+
+    /**
+     * @brief ParsePercentValue convert percent string to number value
+     * @param percentStr the under processing percent string, for example "10%"
+     * @param strLength the given percent string length
+     * @param outValue the converted result
+     * @return the process result, false for converting failed, true for success, caller
+     * should check the returned value before using outValue.
+     */
+    static bool ParsePercentValue(const char *percentStr, uint16_t strLength, float &outValue);
+
+private:
+    /**
+     * @brief IsValidString check if the input target string is valid
+     * @param str the given under processing string
+     * @param strLength the given string's length
+     * @return true for valid string, false for not
+     */
+    static bool IsValidString(const char *str, uint16_t strLength);
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_NUMBER_PARSER_H
diff --git a/frameworks/src/core/base/product_adapter.cpp b/frameworks/src/core/base/product_adapter.cpp
new file mode 100644
index 0000000..7c6ca96
--- /dev/null
+++ b/frameworks/src/core/base/product_adapter.cpp
@@ -0,0 +1,225 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "product_adapter.h"
+
+#include "acelite_config.h"
+#include "graphic_config.h"
+#include "js_async_work.h"
+#include "message_queue_utils.h"
+#include "module_manager.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * Used for holding all the related dfx interfaces assigned from specific implementation.
+ */
+struct DFXWrapper {
+    DFXWrapper()
+        : eventTag_(0),
+          eventSubTag_(0),
+          errCodeTag_(0),
+          errCodeSubTag_(0),
+          eventPrintHandler_(nullptr),
+          errCodePrintHandler_(nullptr),
+          jsLogOutputHandler_(nullptr),
+          nativeMemInfoGetter_(nullptr)
+    {
+    }
+    uint8_t eventTag_;
+    uint8_t eventSubTag_;
+    uint8_t errCodeTag_;
+    uint8_t errCodeSubTag_;
+    EventPrintHandler eventPrintHandler_;
+    ErrCodePrintHandler errCodePrintHandler_;
+    JSLogOutputHandler jsLogOutputHandler_;
+    NativeMemInfoGetter nativeMemInfoGetter_;
+};
+
+static DFXWrapper g_dfxWrapper;
+static TEHandlingHooks g_teHandlingHooks = {nullptr, nullptr};
+static TerminateAbilityHandler g_termiantingHandler = nullptr;
+// default font styles
+static char *g_defaultFontFamilyName = nullptr;
+static uint8_t g_defaultFontSize = 30;
+static uint16_t g_screenWidth = 454;
+static uint16_t g_screenHeight = 454;
+
+// indicating if the ace application is on forground
+static bool g_isAceForground = false;
+
+void ProductAdapter::InitAceTags(uint8_t *aceTags, uint8_t tagCount)
+{
+    const uint8_t minCount = 4;
+    if (aceTags == nullptr || tagCount < minCount) {
+        return;
+    }
+    uint8_t index = 0;
+    g_dfxWrapper.eventTag_ = aceTags[index++];
+    g_dfxWrapper.eventSubTag_ = aceTags[index++];
+    g_dfxWrapper.errCodeTag_ = aceTags[index++];
+    g_dfxWrapper.errCodeSubTag_ = aceTags[index++];
+}
+
+void ProductAdapter::InitTraceHandlers(EventPrintHandler eventHandler, ErrCodePrintHandler errCodeHandler)
+{
+    g_dfxWrapper.eventPrintHandler_ = eventHandler;
+    g_dfxWrapper.errCodePrintHandler_ = errCodeHandler;
+}
+
+void ProductAdapter::InitConsoleNativeHandler(JSLogOutputHandler handler)
+{
+    g_dfxWrapper.jsLogOutputHandler_ = handler;
+}
+
+void ProductAdapter::InitNativeMemPoolHook(NativeMemInfoGetter getter)
+{
+    g_dfxWrapper.nativeMemInfoGetter_ = getter;
+}
+
+void ProductAdapter::InitExtraModulesGetter(ProductModulesGetter productModuleGetter,
+                                            PrivateModulesGetter privateModuleGetter)
+{
+    ModuleManager::GetInstance()->SetProductModulesGetter(productModuleGetter);
+    ModuleManager::GetInstance()->SetPrivateModulesGetter(privateModuleGetter);
+}
+
+void ProductAdapter::PrintEventTrace(uint8_t info2, uint8_t info3, uint8_t info4)
+{
+    if (g_dfxWrapper.eventPrintHandler_ == nullptr || g_dfxWrapper.eventTag_ == 0 || g_dfxWrapper.eventSubTag_ == 0) {
+        return;
+    }
+
+    uint8_t subTag = (info2 == 0) ? g_dfxWrapper.eventSubTag_ : info2;
+    g_dfxWrapper.eventPrintHandler_(g_dfxWrapper.eventTag_, subTag, info3, info4);
+}
+
+void ProductAdapter::PrintErrCode(uint8_t info2, uint16_t rfu)
+{
+    if (g_dfxWrapper.errCodePrintHandler_ == nullptr || g_dfxWrapper.errCodeTag_ == 0 ||
+        g_dfxWrapper.errCodeSubTag_ == 0) {
+        return;
+    }
+    g_dfxWrapper.errCodePrintHandler_(g_dfxWrapper.errCodeTag_, g_dfxWrapper.errCodeSubTag_, info2, rfu);
+}
+
+void ProductAdapter::OutputJSConsoleLog(uint8_t level, const char *content)
+{
+    if (g_dfxWrapper.jsLogOutputHandler_ == nullptr) {
+        return;
+    }
+    g_dfxWrapper.jsLogOutputHandler_(level, content);
+}
+
+void ProductAdapter::GetNativeMemInfo(NativeMemInfo *memInfo)
+{
+    if (g_dfxWrapper.nativeMemInfoGetter_ == nullptr) {
+        return;
+    }
+
+    g_dfxWrapper.nativeMemInfoGetter_(memInfo);
+}
+
+void ProductAdapter::RegTerminatingHandler(TerminateAbilityHandler handler)
+{
+    g_termiantingHandler = handler;
+}
+
+void ProductAdapter::RegTEHandlers(const TEHandlingHooks &teHandlingHooks)
+{
+    g_teHandlingHooks.renderTEHandler = teHandlingHooks.renderTEHandler;
+    g_teHandlingHooks.renderEndHandler = teHandlingHooks.renderEndHandler;
+}
+
+// NOTE: This TE function will be called in VSYNC interrupt, and
+// as no any task can be switched to during an interrupt, so it's safe to
+// read the global value directly here.
+TEDispatchingResult ProductAdapter::DispatchTEMessage()
+{
+#ifdef OHOS_ACELITE_PRODUCT_WATCH // only some specific products support TE dispatching
+    if (!g_isAceForground) {
+        return TEDispatchingResult::REFUSED;
+    }
+
+    if (JsAsyncWork::DispatchToLoop(TE_EVENT, nullptr)) {
+        return TEDispatchingResult::ACCEPTED;
+    }
+    // if the ACE application is on forground and the dispatching failed, should retry sending to ACE again
+    return TEDispatchingResult::ACCEPT_FAILED;
+#else
+    return TEDispatchingResult::REFUSED;
+#endif // OHOS_ACELITE_PRODUCT_WATCH
+}
+
+void ProductAdapter::SendTerminatingRequest(uint32_t token, bool forceStop)
+{
+    if (g_termiantingHandler != nullptr) {
+        g_termiantingHandler(token, forceStop);
+    }
+}
+
+bool ProductAdapter::IsTEHandlersRegisted()
+{
+    return (g_teHandlingHooks.renderTEHandler != nullptr);
+}
+
+void ProductAdapter::ProcessOneTE()
+{
+    if (g_teHandlingHooks.renderTEHandler != nullptr) {
+        (void)(g_teHandlingHooks.renderTEHandler());
+    }
+}
+
+void ProductAdapter::NotifyRenderEnd()
+{
+    if (g_teHandlingHooks.renderEndHandler != nullptr) {
+        g_teHandlingHooks.renderEndHandler();
+    }
+}
+
+void ProductAdapter::SetDefaultFontStyle(const char *defaultFontFamily, uint8_t defaultFontSize)
+{
+    g_defaultFontFamilyName = const_cast<char *>(defaultFontFamily);
+    g_defaultFontSize = defaultFontSize;
+}
+
+const char *ProductAdapter::GetDefaultFontFamilyName()
+{
+    return (g_defaultFontFamilyName != nullptr) ? g_defaultFontFamilyName : DEFAULT_VECTOR_FONT_FILENAME;
+}
+
+uint8_t ProductAdapter::GetDefaultFontSize()
+{
+    return g_defaultFontSize;
+}
+
+void ProductAdapter::UpdateShowingState(bool forground)
+{
+    g_isAceForground = forground;
+}
+
+void ProductAdapter::SetScreenSize(uint16_t width, uint16_t height)
+{
+    g_screenWidth = width;
+    g_screenHeight = height;
+}
+
+void ProductAdapter::GetScreenSize(uint16_t &width, uint16_t &height)
+{
+    width = g_screenWidth;
+    height = g_screenHeight;
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/src/core/base/string_util.cpp b/frameworks/src/core/base/string_util.cpp
old mode 100644
new mode 100755
similarity index 91%
rename from src/core/base/string_util.cpp
rename to frameworks/src/core/base/string_util.cpp
index 5fe0d9f..5650417
--- a/src/core/base/string_util.cpp
+++ b/frameworks/src/core/base/string_util.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -15,10 +15,8 @@
 
 #include "ace_mem_base.h"
 #include "js_config.h"
-#include "string_util.h"
-#if ENABLED(SECURE_C_FUNCTION)
 #include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
+#include "string_util.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -28,6 +26,9 @@ char *StringUtil::Copy(const char *sequence)
         return nullptr;
     }
     size_t size = strlen(sequence);
+    if (size >= UINT16_MAX) {
+        return nullptr;
+    }
     char *buffer = StringUtil::Malloc(size);
     if (buffer == nullptr) {
         return nullptr;
@@ -66,7 +67,7 @@ char *StringUtil::Slice(const char *sequence, const int32_t start, const int32_t
     if (startIdx < endIdx || endIdx < 0) {
         return nullptr;
     }
-    uint32_t diffSize = endIdx - startIdx;
+    int32_t diffSize = endIdx - startIdx;
     if (diffSize < 0) {
         return nullptr;
     }
@@ -74,7 +75,7 @@ char *StringUtil::Slice(const char *sequence, const int32_t start, const int32_t
     if (buffer == nullptr) {
         return nullptr;
     }
-    if (strncpy_s(buffer, size + 1, sequence + startIdx, diffSize) == 0) {
+    if (strncpy_s(buffer, diffSize + 1, sequence + startIdx, diffSize) == 0) {
         return buffer;
     }
     ace_free(buffer);
diff --git a/src/core/base/string_util.h b/frameworks/src/core/base/string_util.h
similarity index 100%
rename from src/core/base/string_util.h
rename to frameworks/src/core/base/string_util.h
diff --git a/src/core/base/time_util.cpp b/frameworks/src/core/base/time_util.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/base/time_util.cpp
rename to frameworks/src/core/base/time_util.cpp
diff --git a/src/core/base/time_util.h b/frameworks/src/core/base/time_util.h
old mode 100755
new mode 100644
similarity index 88%
rename from src/core/base/time_util.h
rename to frameworks/src/core/base/time_util.h
index ad6b0e9..6cb6c7a
--- a/src/core/base/time_util.h
+++ b/frameworks/src/core/base/time_util.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -17,9 +17,7 @@
 #define OHOS_ACELITE_TIME_UTIL_H
 #include <cstdint>
 #include "js_config.h"
-#if ENABLED(SECURE_C_FUNCTION)
 #include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 
 namespace OHOS {
 namespace ACELite {
diff --git a/src/core/components/analog_clock_component.cpp b/frameworks/src/core/components/analog_clock_component.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/components/analog_clock_component.cpp
rename to frameworks/src/core/components/analog_clock_component.cpp
diff --git a/src/core/components/analog_clock_component.h b/frameworks/src/core/components/analog_clock_component.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/components/analog_clock_component.h
rename to frameworks/src/core/components/analog_clock_component.h
diff --git a/src/core/components/camera_component.cpp b/frameworks/src/core/components/camera_component.cpp
similarity index 87%
rename from src/core/components/camera_component.cpp
rename to frameworks/src/core/components/camera_component.cpp
index b6ca76c..b04e8f1 100755
--- a/src/core/components/camera_component.cpp
+++ b/frameworks/src/core/components/camera_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -17,6 +17,7 @@
 #ifdef FEATURE_COMPONENT_CAMERA
 
 #include "camera_component.h"
+#include <climits>
 #include <fstream>
 #include <sstream>
 #include <string>
@@ -39,13 +40,11 @@ jerry_value_t CameraComponent::jsContext_;
 bool CameraComponent::lastCaptureCompleted_ = true;
 
 const char * const CameraComponent::TAKE_PHOTO = "takePhoto";
-
-const uint32_t CameraComponent::IMAG_W_PIXELS_LOW = 720;
-const uint32_t CameraComponent::IMAG_H_PIXELS_LOW = 576;
-const uint32_t CameraComponent::IMAG_W_PIXELS_NORMAL = 1280;
-const uint32_t CameraComponent::IMAG_H_PIXELS_NORMAL = 720;
-const uint32_t CameraComponent::IMAG_W_PIXELS_HIGH = 1920;
-const uint32_t CameraComponent::IMAG_H_PIXELS_HIGH = 1080;
+const uint32_t CameraComponent::IMAG_W_PIXELS = 1920;
+const uint32_t CameraComponent::IMAG_H_PIXELS = 1080;
+const int32_t CameraComponent::IMAG_QFACTOR_LOW = 50;
+const int32_t CameraComponent::IMAG_QFACTOR_NORMAL = 85;
+const int32_t CameraComponent::IMAG_QFACTOR_HIGH = 90;
 
 void FrameCallback::OnFrameFinished(Media::Camera &camera,
                                     Media::FrameConfig &frameConfig,
@@ -141,9 +140,16 @@ string *FrameCallback::CreateFilePath() const
 {
     const char *dataPath = GetDataPath();
     if (dataPath == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "FrameCallback: get data path failed!");
         return nullptr;
     }
-    string dataPathStr(dataPath);
+    char fullDataPath[PATH_MAX + 1] = {0};
+    if (realpath(dataPath, fullDataPath) == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "FrameCallback: invalid data path!");
+        return nullptr;
+    }
+
+    string dataPathStr(fullDataPath);
     string prefix = dataPathStr + "/Img_";
     ostringstream oss;
     struct timeval timeVal;
@@ -272,6 +278,8 @@ bool CameraComponent::CreateNativeViews()
     cameraCallback_ = make_unique<CameraCallback>();
     frameConfig_ = new Media::FrameConfig(Media::FRAME_CONFIG_CAPTURE);
     if (frameConfig_ != nullptr) {
+        captureSurface_->SetWidthAndHeight(IMAG_W_PIXELS, IMAG_H_PIXELS);
+        captureSurface_->SetUsage(BUFFER_CONSUMER_USAGE_HARDWARE);
         frameConfig_->AddSurface(*captureSurface_);
     }
     return true;
@@ -301,7 +309,9 @@ inline UIView *CameraComponent::GetComponentRootView() const
     return static_cast<UIView *>(cameraView_.get());
 }
 
-bool CameraComponent::RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
+bool CameraComponent::RegisterPrivateEventListener(uint16_t eventTypeId,
+                                                   jerry_value_t funcValue,
+                                                   bool isStopPropagation)
 {
     bool result = false;
     switch (eventTypeId) {
@@ -326,12 +336,32 @@ void CameraComponent::PostRender()
     }
     list<string> camList = cameraKit_->GetCameraIds();
     if (camList.empty()) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "CameraComponent: empty camera list!");
         return;
     }
     const string cameraId = camList.front();
+    const Media::CameraAbility *ability = cameraKit_->GetCameraAbility(cameraId);
+    if (ability == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "CameraComponent: get camera ability failed!");
+        return;
+    }
+    bool isSizeSupported = false;
+    list<CameraPicSize> sizeList = ability->GetSupportedSizes(0);
+    for (auto &pic : sizeList) {
+        if (pic.width == IMAG_W_PIXELS && pic.height == IMAG_H_PIXELS) {
+            isSizeSupported = true;
+            break;
+        }
+    }
+    if (!isSizeSupported) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "CameraComponent: capture resolution unsupported!");
+        return;
+    }
+
     Surface *previewSurface = cameraView_->GetSurface();
     if (previewSurface != nullptr) {
-        previewSurface->SetWidthAndHeight(IMAG_W_PIXELS_NORMAL, IMAG_H_PIXELS_NORMAL);
+        previewSurface->SetWidthAndHeight(IMAG_W_PIXELS, IMAG_H_PIXELS);
+        previewSurface->SetUsage(BUFFER_CONSUMER_USAGE_HARDWARE);
         cameraCallback_->SetPreviewSurface(*previewSurface);
     }
     cameraKit_->CreateCamera(cameraId, *cameraCallback_.get(), *cameraCallback_->GetEventHandler());
@@ -388,26 +418,20 @@ void CameraComponent::ReleaseStaticResources()
 bool CameraComponent::CaptureFrame(const CameraComponent *component, const char *quality)
 {
     Media::FrameConfig *frameConfig = component->GetFrameConfig();
-    Surface *surface = const_cast<Surface *>(component->GetCaptureSurface());
-    if ((frameConfig == nullptr) || (surface == nullptr)) {
+    if (frameConfig == nullptr) {
         return false;
     }
-
-    uint32_t surfWidth = IMAG_W_PIXELS_NORMAL;  // corresponding to default resolution
-    uint32_t surfHeight = IMAG_H_PIXELS_NORMAL; // corresponding to default resolution
+    int32_t qfactor = IMAG_QFACTOR_NORMAL;
     if (quality != nullptr) {
         const char * const qualityLow = "low";
         const char * const qualityHigh = "high";
         if (strcmp(quality, qualityLow) == 0) {
-            surfWidth = IMAG_W_PIXELS_LOW;
-            surfHeight = IMAG_H_PIXELS_LOW;
+            qfactor = IMAG_QFACTOR_LOW;
         } else if (strcmp(quality, qualityHigh) == 0) {
-            surfWidth = IMAG_W_PIXELS_HIGH;
-            surfHeight = IMAG_H_PIXELS_HIGH;
+            qfactor = IMAG_QFACTOR_HIGH;
         }
     }
-    surface->SetWidthAndHeight(surfWidth, surfHeight);
-
+    frameConfig->SetParameter(PARAM_KEY_IMAGE_ENCODE_QFACTOR, qfactor);
     const CameraCallback *cameraCallback = component->GetCameraCallback();
     if (cameraCallback == nullptr) {
         return false;
diff --git a/src/core/components/camera_component.h b/frameworks/src/core/components/camera_component.h
similarity index 91%
rename from src/core/components/camera_component.h
rename to frameworks/src/core/components/camera_component.h
index b090467..71ab07b 100755
--- a/src/core/components/camera_component.h
+++ b/frameworks/src/core/components/camera_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -149,7 +149,9 @@ protected:
     bool CreateNativeViews() override;
     void ReleaseNativeViews() override;
     UIView *GetComponentRootView() const override;
-    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId,
+                                      jerry_value_t funcValue,
+                                      bool isStopPropagation) override;
     void PostRender() override;
 
 private:
@@ -159,23 +161,17 @@ private:
     Media::FrameConfig *frameConfig_;
     Surface *captureSurface_;
     static const char * const TAKE_PHOTO;
-    static const uint32_t IMAG_W_PIXELS_LOW;
-    static const uint32_t IMAG_H_PIXELS_LOW;
-    static const uint32_t IMAG_W_PIXELS_NORMAL;
-    static const uint32_t IMAG_H_PIXELS_NORMAL;
-    static const uint32_t IMAG_W_PIXELS_HIGH;
-    static const uint32_t IMAG_H_PIXELS_HIGH;
+    static const uint32_t IMAG_W_PIXELS;
+    static const uint32_t IMAG_H_PIXELS;
+    static const int32_t IMAG_QFACTOR_LOW;
+    static const int32_t IMAG_QFACTOR_NORMAL;
+    static const int32_t IMAG_QFACTOR_HIGH;
 
     Media::FrameConfig *GetFrameConfig() const
     {
         return frameConfig_;
     }
 
-    const Surface *GetCaptureSurface() const
-    {
-        return captureSurface_;
-    }
-
     static bool CaptureFrame(const CameraComponent *component, const char *quality);
     static jerry_value_t TakePhoto(const jerry_value_t func,
                                    const jerry_value_t context,
diff --git a/frameworks/src/core/components/canvas_component.cpp b/frameworks/src/core/components/canvas_component.cpp
new file mode 100644
index 0000000..e78c09e
--- /dev/null
+++ b/frameworks/src/core/components/canvas_component.cpp
@@ -0,0 +1,960 @@
+/*
+ * Copyright (c) 2020-2021 Huawei Device 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.
+ */
+
+#include "acelite_config.h"
+
+#ifdef FEATURE_COMPONENT_CANVAS
+#include "canvas_component.h"
+#include "js_fwk_common.h"
+#include "product_adapter.h"
+#include "securec.h"
+
+namespace OHOS {
+namespace ACELite {
+// default fill style color=black
+const char * const CanvasComponent::DEFAULT_FILLSTYLE = "#000000";
+// default stroke style color=black
+const char * const CanvasComponent::DEFAULT_STROKESTYLE = "#000000";
+// default text align=left
+const char * const CanvasComponent::DEFAULT_TEXTALIGN = "left";
+
+// API-attribute
+const char * const CanvasComponent::ATTR_FILLSTYLE = "fillStyle";
+const char * const CanvasComponent::ATTR_STROKESTYLE = "strokeStyle";
+const char * const CanvasComponent::ATTR_LINEWIDTH = "lineWidth";
+const char * const CanvasComponent::ATTR_FONT = "font";
+const char * const CanvasComponent::ATTR_TEXTALIGN = "textAlign";
+
+// API-method
+const char * const CanvasComponent::FUNC_GETCONTEXT = "getContext";
+const char * const CanvasComponent::FUNC_FILLRECT = "fillRect";
+const char * const CanvasComponent::FUNC_STROKERECT = "strokeRect";
+const char * const CanvasComponent::FUNC_FILLTEXT = "fillText";
+const char * const CanvasComponent::FUNC_BEGINPATH = "beginPath";
+const char * const CanvasComponent::FUNC_MOVETO = "moveTo";
+const char * const CanvasComponent::FUNC_LINETO = "lineTo";
+const char * const CanvasComponent::FUNC_RECT = "rect";
+const char * const CanvasComponent::FUNC_ARC = "arc";
+const char * const CanvasComponent::FUNC_CLOSEPATH = "closePath";
+const char * const CanvasComponent::FUNC_STROKE = "stroke";
+
+// create canvas draw attribute-callback mapping
+const AttrMap CanvasComponent::attrMap_[] = {
+    {ATTR_FILLSTYLE, FillStyleSetter, FillStyleGetter},
+    {ATTR_STROKESTYLE, StrokeStyleSetter, StrokeStyleGetter},
+    {ATTR_LINEWIDTH, LineWidthSetter, LineWidthGetter},
+    {ATTR_FONT, FontSetter, FontGetter},
+    {ATTR_TEXTALIGN, TextAlignSetter, TextAlignGetter}
+};
+
+// create canvas draw method-callback mapping
+const MethodMap CanvasComponent::methodMap_[] = {
+    {FUNC_GETCONTEXT, GetContext},
+    {FUNC_FILLRECT, FillRect},
+    {FUNC_STROKERECT, StrokeRect},
+    {FUNC_FILLTEXT, FillText},
+    {FUNC_BEGINPATH, BeginPath},
+    {FUNC_MOVETO, MoveTo},
+    {FUNC_LINETO, LineTo},
+    {FUNC_RECT, Rect},
+    {FUNC_ARC, Arc},
+    {FUNC_CLOSEPATH, ClosePath},
+    {FUNC_STROKE, Stroke}
+};
+
+CanvasComponent::CanvasComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *styleManager)
+    : Component(options, children, styleManager),
+      context_(UNDEFINED),
+      fillStyleValue_(nullptr),
+      strokeStyleValue_(nullptr),
+      fontValue_(nullptr),
+      textAlignValue_(nullptr),
+      lineWidthValue_(1)
+{
+    SetComponentName(K_CANVAS);
+    // set default paint pattern
+    paint_.SetFillColor(Color::Black());
+    paint_.SetOpacity(OPA_OPAQUE);
+    paint_.SetStrokeColor(Color::Black());
+    paint_.SetStrokeWidth(1);
+
+    // set default text font pattern
+    fontStyle_.align = TEXT_ALIGNMENT_LEFT;
+    fontStyle_.direct = TEXT_DIRECT_LTR;
+    fontStyle_.fontSize = ProductAdapter::GetDefaultFontSize();
+    char *defaultFontName = nullptr;
+    CopyFontFamily(defaultFontName, ProductAdapter::GetDefaultFontFamilyName());
+    fontStyle_.fontName = defaultFontName;
+    fontStyle_.letterSpace = DEFAULT_FONT_LETTERSPACE;
+
+    RegisterNamedFunction(methodMap_[0].methodName, methodMap_[0].callbackName);
+}
+
+// Create UICanvas
+bool CanvasComponent::CreateNativeViews()
+{
+    return true;
+}
+
+void CanvasComponent::ReleaseNativeViews()
+{
+    ACE_FREE(fillStyleValue_);
+    ACE_FREE(strokeStyleValue_);
+    ACE_FREE(fontValue_);
+    ACE_FREE(textAlignValue_);
+    // free fontStyle_.fontName memory which malloc in FontSetter method.
+    if (fontStyle_.fontName != nullptr) {
+        ace_free(const_cast<char *>(fontStyle_.fontName));
+        fontStyle_.fontName = nullptr;
+    }
+    if (!IS_UNDEFINED(context_)) {
+        bool deleted = jerry_delete_object_native_pointer(context_, nullptr);
+        if (!deleted) {
+            HILOG_WARN(HILOG_MODULE_ACE, "canvas_component: delete object native pointer context_ failed!");
+        }
+        jerry_release_value(context_);
+    }
+}
+
+UIView *CanvasComponent::GetComponentRootView() const
+{
+    return (const_cast<UICanvas *>(&canvas_));
+}
+
+jerry_value_t CanvasComponent::GetContext(const jerry_value_t func,
+                                          const jerry_value_t context,
+                                          const jerry_value_t args[],
+                                          const jerry_length_t argsNum)
+{
+    (void)func;
+    (void)args;
+    if (argsNum != ArgsCount::NUM_1) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of getContext method parameter error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("getContext method parameter error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    if (IS_UNDEFINED(component->context_)) {
+        component->context_ = jerry_create_object();
+        jerry_set_object_native_pointer(component->context_, component, nullptr);
+
+        // register fillStyle, strokeStyle, lineWidth, font, textAlign attribute
+        uint16_t attrMapLength = sizeof(attrMap_) / sizeof(attrMap_[0]);
+        for (uint16_t index = 0; index < attrMapLength; index++) {
+            RegisterAttributeFunc(component->context_, attrMap_[index].attrName, attrMap_[index].setterName,
+                                  attrMap_[index].getterName);
+        }
+
+        // register fillRect, strokeRect, fillText, beginPath, moveTo, lineTo, rect, arc, closePath, stroke method
+        uint16_t methodMapLength = sizeof(methodMap_) / sizeof(methodMap_[0]);
+        for (uint16_t index = 1; index < methodMapLength; index++) {
+            RegisterDrawMethodFunc(component->context_, methodMap_[index].methodName, methodMap_[index].callbackName);
+        }
+    }
+
+    // BeginPath function need to be called after getting canvas API object
+    component->canvas_.BeginPath();
+
+    jerry_acquire_value(component->context_);
+    return component->context_;
+}
+
+jerry_value_t CanvasComponent::FillStyleSetter(const jerry_value_t func,
+                                               const jerry_value_t context,
+                                               const jerry_value_t args[],
+                                               const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_1) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: fillStyle value error!");
+        return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("fillStyle value error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    ACE_FREE(component->fillStyleValue_);
+
+    component->fillStyleValue_ = MallocStringOf(args[ArgsIndex::IDX_0]);
+    if (component->fillStyleValue_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: fillStyle value error!");
+        return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("fillStyle value erro!"));
+    }
+
+    uint32_t color = 0;
+    uint8_t alpha = OPA_OPAQUE;
+    ParseColor(component->fillStyleValue_, color, alpha);
+    component->paint_.SetFillColor(component->GetRGBColor(color));
+    component->paint_.SetOpacity(alpha);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::FillStyleGetter(const jerry_value_t func,
+                                               const jerry_value_t dom,
+                                               const jerry_value_t args[],
+                                               const jerry_length_t argsNum)
+{
+    (void)func;
+    (void)args;
+    (void)argsNum;
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    if (component->fillStyleValue_ == nullptr) {
+        CopyFontFamily(component->fillStyleValue_, DEFAULT_FILLSTYLE);
+    }
+
+    if (component->fillStyleValue_ != nullptr) {
+        return jerry_create_string(reinterpret_cast<const jerry_char_t *>(component->fillStyleValue_));
+    }
+    return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("fillStyle value error"));
+}
+
+jerry_value_t CanvasComponent::StrokeStyleSetter(const jerry_value_t func,
+                                                 const jerry_value_t context,
+                                                 const jerry_value_t args[],
+                                                 const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_1) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: strokeStyle value error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("the value of strokeStyle is null"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    ACE_FREE(component->strokeStyleValue_);
+
+    component->strokeStyleValue_ = MallocStringOf(args[ArgsIndex::IDX_0]);
+    if (component->strokeStyleValue_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: strokeStyle value error");
+        return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("strokeStyle value error"));
+    }
+
+    uint32_t color = 0;
+    uint8_t alpha = OPA_OPAQUE;
+    ParseColor(component->strokeStyleValue_, color, alpha);
+    component->paint_.SetStrokeColor(component->GetRGBColor(color));
+    component->paint_.SetOpacity(alpha);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::StrokeStyleGetter(const jerry_value_t func,
+                                                 const jerry_value_t dom,
+                                                 const jerry_value_t args[],
+                                                 const jerry_length_t argsNum)
+{
+    (void)func;
+    (void)args;
+    (void)argsNum;
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    if (component->strokeStyleValue_ == nullptr) {
+        CopyFontFamily(component->strokeStyleValue_, DEFAULT_STROKESTYLE);
+    }
+
+    if (component->strokeStyleValue_ != nullptr) {
+        return jerry_create_string(reinterpret_cast<const jerry_char_t *>(component->strokeStyleValue_));
+    }
+    return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("strokeStyle value error"));
+}
+
+jerry_value_t CanvasComponent::LineWidthSetter(const jerry_value_t func,
+                                               const jerry_value_t context,
+                                               const jerry_value_t args[],
+                                               const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_1) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: lineWidth value error!");
+        return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("lineWidth value error!"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    component->lineWidthValue_ = IntegerOf(args[ArgsIndex::IDX_0]);
+    component->paint_.SetStrokeWidth(component->lineWidthValue_);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::LineWidthGetter(const jerry_value_t func,
+                                               const jerry_value_t dom,
+                                               const jerry_value_t args[],
+                                               const jerry_length_t argsNum)
+{
+    (void)func;
+    (void)args;
+    (void)argsNum;
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+    return jerry_create_number(component->lineWidthValue_);
+}
+
+jerry_value_t CanvasComponent::FontSetter(const jerry_value_t func,
+                                          const jerry_value_t context,
+                                          const jerry_value_t args[],
+                                          const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_1) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: font value error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("font value error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    ACE_FREE(component->fontValue_);
+
+    component->fontValue_ = MallocStringOf(args[ArgsIndex::IDX_0]);
+    if (component->fontValue_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: text font value error!");
+        return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("text font value error"));
+    }
+
+    const int8_t maxParamCount = 2;
+    for (int8_t index = 0; index < maxParamCount; index++) {
+        // get font size or font family from fontValue.
+        char *mallocSubFont = nullptr;
+        component->GetSubFont(component->fontValue_, index, mallocSubFont);
+        if (mallocSubFont == nullptr) {
+            HILOG_WARN(HILOG_MODULE_ACE, "canvas_component: get text font size or font family failed");
+            ace_free(component->fontValue_);
+            component->fontValue_ = nullptr;
+            return UNDEFINED;
+        }
+
+        // if it is a font size
+        if (*mallocSubFont >= '0' && *mallocSubFont <= '9') {
+            component->fontStyle_.fontSize = strtol(mallocSubFont, nullptr, DEC);
+            ace_free(mallocSubFont);
+            mallocSubFont = nullptr;
+        } else { // if it is a font family
+            // free default component->fontStyle_.fontName memory.
+            if (component->fontStyle_.fontName != nullptr) {
+                ace_free(const_cast<char *>(component->fontStyle_.fontName));
+                component->fontStyle_.fontName = nullptr;
+            }
+            // set customized font name, the memory of mallocFontFamily need be free in CanvasFillText method.
+            component->fontStyle_.fontName = mallocSubFont;
+        }
+    }
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::FontGetter(const jerry_value_t func,
+                                          const jerry_value_t dom,
+                                          const jerry_value_t args[],
+                                          const jerry_length_t argsNum)
+{
+    (void)func;
+    (void)args;
+    (void)argsNum;
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    if (component->fontValue_ == nullptr) {
+        uint8_t defaultFontSize = ProductAdapter::GetDefaultFontSize();
+        const char *defaultFontName = ProductAdapter::GetDefaultFontFamilyName();
+        size_t nameLength = (defaultFontName != nullptr) ? strlen(defaultFontName) : 0;
+        const uint8_t maxNameLen = 32;
+        const uint8_t maxFontSizeLen = 16;
+        const uint8_t maxBufferLen = maxNameLen + maxFontSizeLen;
+        if (nameLength > 0 && (nameLength < maxNameLen) && (defaultFontSize < UINT8_MAX)) {
+            char defaultFont[maxBufferLen] = {0};
+            int length = sprintf_s(defaultFont, (maxBufferLen - 1), "%dpx %s", defaultFontSize, defaultFontName);
+            if (length > 0 && length < maxBufferLen) {
+                CopyFontFamily(component->fontValue_, defaultFont, length);
+            }
+        }
+    }
+
+    if (component->fontValue_ != nullptr) {
+        return jerry_create_string(reinterpret_cast<const jerry_char_t *>(component->fontValue_));
+    }
+    return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("text font value error"));
+}
+
+jerry_value_t CanvasComponent::TextAlignSetter(const jerry_value_t func,
+                                               const jerry_value_t context,
+                                               const jerry_value_t args[],
+                                               const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_1) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: textAlign value error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("textAlign value error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    ACE_FREE(component->textAlignValue_);
+
+    uint16_t textAlignLength = 0;
+    component->textAlignValue_ = MallocStringOf(args[ArgsIndex::IDX_0], &textAlignLength);
+    if (component->textAlignValue_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: text align value error!");
+        return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("text align value error"));
+    }
+
+    uint16_t textAlignId = KeyParser::ParseKeyId(component->textAlignValue_, textAlignLength);
+    if (textAlignId == K_LEFT) {
+        component->fontStyle_.align = TEXT_ALIGNMENT_LEFT;
+    } else if (textAlignId == K_RIGHT) {
+        component->fontStyle_.align = TEXT_ALIGNMENT_RIGHT;
+    } else if (textAlignId == K_CENTER) {
+        component->fontStyle_.align = TEXT_ALIGNMENT_CENTER;
+    } else {
+        // do nothing(use default align=TEXT_ALIGNMENT_LEFT)
+    }
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::TextAlignGetter(const jerry_value_t func,
+                                               const jerry_value_t dom,
+                                               const jerry_value_t args[],
+                                               const jerry_length_t argsNum)
+{
+    (void)func;
+    (void)args;
+    (void)argsNum;
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    if (component->textAlignValue_ == nullptr) {
+        CopyFontFamily(component->textAlignValue_, DEFAULT_TEXTALIGN);
+    }
+
+    if (component->textAlignValue_ != nullptr) {
+        return jerry_create_string(reinterpret_cast<const jerry_char_t *>(component->textAlignValue_));
+    }
+    return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("textAlign value error"));
+}
+
+jerry_value_t CanvasComponent::FillRect(const jerry_value_t func,
+                                        const jerry_value_t context,
+                                        const jerry_value_t args[],
+                                        const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_4) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of fillRect method parameter error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("fillRect method parameter error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    int16_t startX = IntegerOf(args[ArgsIndex::IDX_0]);
+    int16_t startY = IntegerOf(args[ArgsIndex::IDX_1]);
+    int16_t width = IntegerOf(args[ArgsIndex::IDX_2]);
+    int16_t height = IntegerOf(args[ArgsIndex::IDX_3]);
+
+    // FILL_STYLE: fill rect support fill shapses only
+    component->paint_.SetStyle(component->paint_.FILL_STYLE);
+
+    Point startPoint;
+    startPoint.x = startX;
+    startPoint.y = startY;
+    component->canvas_.DrawRect(startPoint, height, width, component->paint_);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::StrokeRect(const jerry_value_t func,
+                                          const jerry_value_t context,
+                                          const jerry_value_t args[],
+                                          const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_4) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of strokeRect method parameter error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("strokeRect method parameter error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    int16_t startX = IntegerOf(args[ArgsIndex::IDX_0]);
+    int16_t startY = IntegerOf(args[ArgsIndex::IDX_1]);
+    int16_t width = IntegerOf(args[ArgsIndex::IDX_2]);
+    int16_t height = IntegerOf(args[ArgsIndex::IDX_3]);
+
+    // STROKE_STYLE: stroke rect support draw borders only
+    component->paint_.SetStyle(component->paint_.STROKE_STYLE);
+
+    Point startPoint;
+    startPoint.x = startX;
+    startPoint.y = startY;
+    component->canvas_.DrawRect(startPoint, height, width, component->paint_);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::FillText(const jerry_value_t func,
+                                        const jerry_value_t context,
+                                        const jerry_value_t args[],
+                                        const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_3) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of fillText method parameter error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("fillText method parameter error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    char *textValue = MallocStringOf(args[ArgsIndex::IDX_0]);
+    if (textValue == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get text value failed");
+        return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("get text value failed"));
+    }
+
+    int16_t startX = IntegerOf(args[ArgsIndex::IDX_1]);
+    int16_t startY = IntegerOf(args[ArgsIndex::IDX_2]);
+    int16_t maxWidth = component->canvas_.GetWidth();
+
+    // FILL_STYLE: fillText support fill shapses only
+    component->paint_.SetStyle(component->paint_.FILL_STYLE);
+
+    Point startPoint;
+    const int8_t half = 2;
+    startPoint.x = startX;
+    startPoint.y = startY;
+
+    // if textAlign=left, not need transfer startX, if textAlign=right or center, need transfer startX
+    if (component->fontStyle_.align == TEXT_ALIGNMENT_RIGHT) {
+        startPoint.x = startX - maxWidth;
+    } else if (component->fontStyle_.align == TEXT_ALIGNMENT_CENTER) {
+        startPoint.x = (startX + startX - maxWidth) / half;
+    } else {
+        startPoint.x = startX;
+    }
+
+    component->canvas_.DrawLabel(startPoint, textValue, maxWidth, component->fontStyle_, component->paint_);
+
+    ACE_FREE(textValue);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::BeginPath(const jerry_value_t func,
+                                         const jerry_value_t context,
+                                         const jerry_value_t args[],
+                                         const jerry_length_t argsNum)
+{
+    (void)func;
+    (void)args;
+    (void)argsNum;
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    component->canvas_.BeginPath();
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::MoveTo(const jerry_value_t func,
+                                      const jerry_value_t context,
+                                      const jerry_value_t args[],
+                                      const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_2) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of moveTo method parameter error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("moveTo method parameter error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    int16_t x = IntegerOf(args[ArgsIndex::IDX_0]);
+    int16_t y = IntegerOf(args[ArgsIndex::IDX_1]);
+
+    Point point;
+    point.x = x;
+    point.y = y;
+    component->canvas_.MoveTo(point);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::LineTo(const jerry_value_t func,
+                                      const jerry_value_t context,
+                                      const jerry_value_t args[],
+                                      const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_2) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of lineTo method parameter error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("lineTo method parameter error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    int16_t x = IntegerOf(args[ArgsIndex::IDX_0]);
+    int16_t y = IntegerOf(args[ArgsIndex::IDX_1]);
+
+    Point point;
+    point.x = x;
+    point.y = y;
+    component->canvas_.LineTo(point);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::Rect(const jerry_value_t func,
+                                    const jerry_value_t context,
+                                    const jerry_value_t args[],
+                                    const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_4) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of rect method parameter error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("rect method parameter error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    int16_t x = IntegerOf(args[ArgsIndex::IDX_0]);
+    int16_t y = IntegerOf(args[ArgsIndex::IDX_1]);
+    int16_t width = IntegerOf(args[ArgsIndex::IDX_2]);
+    int16_t height = IntegerOf(args[ArgsIndex::IDX_3]);
+
+    Point point;
+    point.x = x;
+    point.y = y;
+    component->canvas_.AddRect(point, height, width);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::Arc(const jerry_value_t func,
+                                   const jerry_value_t context,
+                                   const jerry_value_t args[],
+                                   const jerry_length_t argsNum)
+{
+    (void)func;
+    if (argsNum != ArgsCount::NUM_5 && argsNum != ArgsCount::NUM_6) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of arc method parameter error!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("arc method parameter error"));
+    }
+
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    int16_t centerX = IntegerOf(args[ArgsIndex::IDX_0]);
+    int16_t centerY = IntegerOf(args[ArgsIndex::IDX_1]);
+    int16_t radius = IntegerOf(args[ArgsIndex::IDX_2]);
+    double sAngle = jerry_get_number_value(args[ArgsIndex::IDX_3]);
+    double eAngle = jerry_get_number_value(args[ArgsIndex::IDX_4]);
+
+    bool counterClockwise = false;
+    if (argsNum == ArgsCount::NUM_6) {
+        if (jerry_value_is_boolean(args[ArgsIndex::IDX_5])) {
+            counterClockwise = BoolOf(args[ArgsIndex::IDX_5]);
+        }
+    }
+
+    Point centerPoint;
+    centerPoint.x = centerX;
+    centerPoint.y = centerY;
+    int16_t startAngle = 0;
+    int16_t endAngle = 0;
+
+    bool result = component->FormatArcAngle(sAngle, eAngle, startAngle, endAngle, counterClockwise);
+    if (!result) {
+        return jerry_create_error(JERRY_ERROR_TYPE, reinterpret_cast<const jerry_char_t *>("arc angle error"));
+    }
+
+    // 0 degree is at the 3 o'clock position of the arc's circle at JS layer,
+    // but which is at the 12 o'clock position at Native layer.
+    constexpr int16_t DEGREES_OFFSET = 90;
+    constexpr int16_t DEGREES_360 = 360;
+    if (((startAngle + DEGREES_OFFSET) <= INT16_MAX) && ((endAngle + DEGREES_OFFSET) <= INT16_MAX)) {
+        startAngle = startAngle + DEGREES_OFFSET;
+        endAngle = endAngle + DEGREES_OFFSET;
+    } else {
+        startAngle = startAngle + DEGREES_OFFSET - DEGREES_360;
+        endAngle = endAngle + DEGREES_OFFSET - DEGREES_360;
+    }
+
+    component->canvas_.ArcTo(centerPoint, radius, startAngle, endAngle);
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::ClosePath(const jerry_value_t func,
+                                         const jerry_value_t context,
+                                         const jerry_value_t args[],
+                                         const jerry_length_t argsNum)
+{
+    (void)func;
+    (void)args;
+    (void)argsNum;
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    component->canvas_.ClosePath();
+    return UNDEFINED;
+}
+
+jerry_value_t CanvasComponent::Stroke(const jerry_value_t func,
+                                      const jerry_value_t context,
+                                      const jerry_value_t args[],
+                                      const jerry_length_t argsNum)
+{
+    (void)func;
+    (void)args;
+    (void)argsNum;
+    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
+        return jerry_create_error(JERRY_ERROR_TYPE,
+                                  reinterpret_cast<const jerry_char_t *>("get canvas component from js object failed"));
+    }
+
+    component->canvas_.DrawPath(component->paint_);
+    return UNDEFINED;
+}
+
+void CanvasComponent::GetSubFont(const char *font, const uint8_t index, char *&subFont) const
+{
+    if (font == nullptr || *font == '\0') {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get font attribute failed");
+        return;
+    }
+
+    if (strlen(font) >= UINT16_MAX) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: font size overflow.");
+        return;
+    }
+
+    // skip space character at the head of string.
+    while ((*font != '\0') && (*font == ' ')) {
+        font++;
+    }
+
+    uint8_t currentIndex = 0;
+    const char *currentPos = font;
+    const char *endPos = font;
+    while (*currentPos != '\0') {
+        // find the sub font string
+        if (currentIndex == index) {
+            if (*endPos != ' ' && *endPos != '\0') {
+                endPos++;
+                continue;
+            }
+            uint16_t len = endPos - currentPos;
+            uint16_t startIndex = currentPos - font;
+            subFont = static_cast<char *>(ace_malloc(len + 1));
+            if (subFont == nullptr) {
+                HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: malloc buffer failed for subFont");
+                return;
+            }
+            errno_t error = strncpy_s(subFont, len + 1, font + startIndex, len);
+            if (error != 0) {
+                HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: copy string failed");
+                ace_free(subFont);
+                subFont = nullptr;
+                return;
+            }
+            subFont[len] = '\0';
+            break;
+        }
+        // go forward to next sub font string.
+        if (*(currentPos) == ' ' && *(currentPos + 1) != ' ') {
+            currentIndex = currentIndex + 1;
+            endPos = currentPos + 1;
+        }
+        currentPos++;
+    }
+}
+
+bool CanvasComponent::FormatArcAngle(double sAngle,
+                                     double eAngle,
+                                     int16_t &startAngle,
+                                     int16_t &endAngle,
+                                     bool counterClockwise) const
+{
+    constexpr int16_t DEGREES_180 = 180;
+    constexpr int16_t DEGREES_360 = 360;
+
+    // calculate start-angle and end-angle degrees
+    if (((DEGREES_180 * sAngle / UI_PI) > INT16_MAX) || ((DEGREES_180 * sAngle / UI_PI) < INT16_MIN) ||
+        ((DEGREES_180 * eAngle / UI_PI) > INT16_MAX) || ((DEGREES_180 * eAngle / UI_PI) < INT16_MIN)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: startAngle or endAngle overflow.");
+        return false;
+    }
+
+    startAngle = DEGREES_180 * sAngle / UI_PI;
+    endAngle = DEGREES_180 * eAngle / UI_PI;
+
+    if (!counterClockwise) {
+        // reset end-angle degrees when (endAngle - startAngle) > 360
+        if ((endAngle - startAngle) > DEGREES_360) {
+            endAngle = startAngle + DEGREES_360;
+        }
+        // reset start-angle or end-angle degrees when startAngle > endAngle
+        if (startAngle <= endAngle) {
+            return true;
+        }
+        while (startAngle >= endAngle) {
+            if ((endAngle + DEGREES_360) > INT16_MAX) {
+                startAngle = startAngle - DEGREES_360;
+                break;
+            }
+            endAngle = endAngle + DEGREES_360;
+        }
+    } else {
+        // reset end-angle degrees when (endAngle - startAngle) > 360
+        if ((startAngle - endAngle) > DEGREES_360) {
+            endAngle = startAngle - DEGREES_360;
+        }
+        // reset start-angle or end-angle degrees when startAngle < endAngle
+        if (startAngle >= endAngle) {
+            return true;
+        }
+        while (startAngle <= endAngle) {
+            if ((endAngle - DEGREES_360) < INT16_MIN) {
+                startAngle = startAngle + DEGREES_360;
+                break;
+            }
+            endAngle = endAngle - DEGREES_360;
+        }
+    }
+
+    return true;
+}
+
+void CanvasComponent::RegisterAttributeFunc(jerry_value_t canvas2dContext,
+                                            const char *attributeName,
+                                            jerry_external_handler_t setterHandler,
+                                            jerry_external_handler_t getterHandler)
+{
+    // register canvas js attribute setter property via the jerry_define_own_property method
+    jerry_value_t propName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(attributeName));
+    jerry_property_descriptor_t desc;
+    jerry_init_property_descriptor_fields(&desc);
+    desc.is_set_defined = true;
+    desc.setter = jerry_create_external_function(setterHandler);
+    desc.is_get_defined = true;
+    desc.getter = jerry_create_external_function(getterHandler);
+    jerry_value_t returnValue = jerry_define_own_property(canvas2dContext, propName, &desc);
+    jerry_free_property_descriptor_fields(&desc);
+    ReleaseJerryValue(propName, returnValue, VA_ARG_END_FLAG);
+}
+
+void CanvasComponent::RegisterDrawMethodFunc(jerry_value_t canvas2dContext,
+                                             const char *drawMethodName,
+                                             jerry_external_handler_t handler)
+{
+    JerrySetFuncProperty(canvas2dContext, drawMethodName, handler);
+}
+} // namespace ACELite
+} // namespace OHOS
+#endif // FEATURE_COMPONENT_CANVAS
diff --git a/src/core/components/canvas_component.h b/frameworks/src/core/components/canvas_component.h
old mode 100755
new mode 100644
similarity index 62%
rename from src/core/components/canvas_component.h
rename to frameworks/src/core/components/canvas_component.h
index 335ee18..46ec159
--- a/src/core/components/canvas_component.h
+++ b/frameworks/src/core/components/canvas_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -25,6 +25,8 @@
 
 namespace OHOS {
 namespace ACELite {
+enum ArgsCount : uint8_t { NUM_1 = 1, NUM_2, NUM_3, NUM_4, NUM_5, NUM_6 };
+enum ArgsIndex : uint8_t { IDX_0, IDX_1, IDX_2, IDX_3, IDX_4, IDX_5 };
 struct AttrMap {
     ACE_DISALLOW_COPY_AND_MOVE(AttrMap);
     const char *attrName;
@@ -51,6 +53,11 @@ protected:
 
 private:
     void GetSubFont(const char *font, const uint8_t index, char *&subFont) const;
+    bool FormatArcAngle(double sAngle,
+                        double eAngle,
+                        int16_t &startAngle,
+                        int16_t &endAngle,
+                        bool counterClockwise) const;
 
     static void RegisterAttributeFunc(jerry_value_t canvas2dContext,
                                       const char *attributeName,
@@ -61,10 +68,10 @@ private:
                                        const char *drawMethodName,
                                        jerry_external_handler_t handler);
 
-    static jerry_value_t CanvasGetContext(const jerry_value_t func,
-                                          const jerry_value_t dom,
-                                          const jerry_value_t args[],
-                                          const jerry_length_t argsNum);
+    static jerry_value_t GetContext(const jerry_value_t func,
+                                    const jerry_value_t dom,
+                                    const jerry_value_t args[],
+                                    const jerry_length_t argsNum);
 
     static jerry_value_t FillStyleSetter(const jerry_value_t func,
                                          const jerry_value_t dom,
@@ -116,23 +123,58 @@ private:
                                          const jerry_value_t args[],
                                          const jerry_length_t argsNum);
 
-    static jerry_value_t CanvasFillRect(const jerry_value_t func,
-                                        const jerry_value_t dom,
-                                        const jerry_value_t args[],
-                                        const jerry_length_t argsNum);
+    static jerry_value_t FillRect(const jerry_value_t func,
+                                  const jerry_value_t dom,
+                                  const jerry_value_t args[],
+                                  const jerry_length_t argsNum);
 
-    static jerry_value_t CanvasStrokeRect(const jerry_value_t func,
-                                          const jerry_value_t dom,
-                                          const jerry_value_t args[],
-                                          const jerry_length_t argsNum);
+    static jerry_value_t StrokeRect(const jerry_value_t func,
+                                    const jerry_value_t dom,
+                                    const jerry_value_t args[],
+                                    const jerry_length_t argsNum);
 
-    static jerry_value_t CanvasFillText(const jerry_value_t func,
-                                        const jerry_value_t context,
-                                        const jerry_value_t args[],
-                                        const jerry_length_t argsNum);
+    static jerry_value_t FillText(const jerry_value_t func,
+                                  const jerry_value_t context,
+                                  const jerry_value_t args[],
+                                  const jerry_length_t argsNum);
 
-    UICanvas *canvas_;
-    jerry_value_t canvas2dContext_;
+    static jerry_value_t BeginPath(const jerry_value_t func,
+                                   const jerry_value_t context,
+                                   const jerry_value_t args[],
+                                   const jerry_length_t argsNum);
+
+    static jerry_value_t MoveTo(const jerry_value_t func,
+                                const jerry_value_t context,
+                                const jerry_value_t args[],
+                                const jerry_length_t argsNum);
+
+    static jerry_value_t LineTo(const jerry_value_t func,
+                                const jerry_value_t context,
+                                const jerry_value_t args[],
+                                const jerry_length_t argsNum);
+
+    static jerry_value_t Rect(const jerry_value_t func,
+                              const jerry_value_t context,
+                              const jerry_value_t args[],
+                              const jerry_length_t argsNum);
+
+    static jerry_value_t Arc(const jerry_value_t func,
+                             const jerry_value_t context,
+                             const jerry_value_t args[],
+                             const jerry_length_t argsNum);
+
+    static jerry_value_t ClosePath(const jerry_value_t func,
+                                   const jerry_value_t context,
+                                   const jerry_value_t args[],
+                                   const jerry_length_t argsNum);
+
+    static jerry_value_t Stroke(const jerry_value_t func,
+                                const jerry_value_t context,
+                                const jerry_value_t args[],
+                                const jerry_length_t argsNum);
+
+    UICanvas canvas_;
+    jerry_value_t context_;
     Paint paint_;
     UICanvas::FontStyle fontStyle_;
     char *fillStyleValue_;
@@ -142,17 +184,9 @@ private:
     int16_t lineWidthValue_;
     static const char * const DEFAULT_FILLSTYLE;
     static const char * const DEFAULT_STROKESTYLE;
-    static const char * const DEFAULT_FONT;
     static const char * const DEFAULT_TEXTALIGN;
     static const AttrMap attrMap_[];
     static const MethodMap methodMap_[];
-    static const uint8_t ARGS_COUNT_ONE;
-    static const uint8_t ARGS_COUNT_THREE;
-    static const uint8_t ARGS_COUNT_FOUR;
-    static const uint8_t ARGS_INDEX_0;
-    static const uint8_t ARGS_INDEX_1;
-    static const uint8_t ARGS_INDEX_2;
-    static const uint8_t ARGS_INDEX_3;
     static const char * const ATTR_FILLSTYLE;
     static const char * const ATTR_STROKESTYLE;
     static const char * const ATTR_LINEWIDTH;
@@ -162,6 +196,13 @@ private:
     static const char * const FUNC_FILLRECT;
     static const char * const FUNC_STROKERECT;
     static const char * const FUNC_FILLTEXT;
+    static const char * const FUNC_BEGINPATH;
+    static const char * const FUNC_MOVETO;
+    static const char * const FUNC_LINETO;
+    static const char * const FUNC_RECT;
+    static const char * const FUNC_ARC;
+    static const char * const FUNC_CLOSEPATH;
+    static const char * const FUNC_STROKE;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/chart_component.cpp b/frameworks/src/core/components/chart_component.cpp
similarity index 87%
rename from src/core/components/chart_component.cpp
rename to frameworks/src/core/components/chart_component.cpp
index fa80556..5d1dfcb 100755
--- a/src/core/components/chart_component.cpp
+++ b/frameworks/src/core/components/chart_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -17,10 +17,10 @@
 #include "ace_log.h"
 #include "ace_mem_base.h"
 #include "flex_layout.h"
+#include "font/ui_font_header.h"
 #include "keys.h"
 #include "ui_chart.h"
 #include "ui_circle_progress.h"
-#include "font/ui_font_header.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -69,7 +69,9 @@ ChartComponent::ChartComponent(jerry_value_t options, jerry_value_t children, Ap
       chartType_(const_cast<char *>(LINE)),
       headPointStyle_(nullptr),
       topPointStyle_(nullptr),
-      bottomPointStyle_(nullptr){}
+      bottomPointStyle_(nullptr)
+{
+}
 
 bool ChartComponent::CreateNativeViews()
 {
@@ -94,10 +96,7 @@ bool ChartComponent::CreateNativeViews()
         HILOG_ERROR(HILOG_MODULE_ACE, "create chart view error");
         return false;
     }
-    if (!Init()) {
-        return false;
-    }
-    return true;
+    return Init();
 }
 
 bool ChartComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
@@ -111,7 +110,7 @@ bool ChartComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrV
             dataSetsRecord_ = attrValue;
             break;
         }
-        case K_OPATIONS: {
+        case K_OPTIONS: {
             SetOptions(attrValue);
             break;
         }
@@ -122,7 +121,7 @@ bool ChartComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrV
     return false;
 }
 
-void ChartComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
+void ChartComponent::PostUpdate(uint16_t attrKeyId)
 {
     chartView_->ClearDataSerial();
     chartView_->Invalidate();
@@ -201,54 +200,54 @@ void ChartComponent::UpdateStrokeSmoothToSerial(UIChartDataSerial& dataserial)
     dataserial.EnableSmooth(seriesOptions_->smooth);
 }
 
+UIChartDataSerial::PointStyle *ChartComponent::UpdatePointStyle(UIChartDataSerial::PointStyle *pointStyle,
+    uint32_t fillColor, uint32_t strokeColor, uint32_t radius, uint32_t strokeWidth)
+{
+    if (pointStyle == nullptr) {
+        pointStyle = new UIChartDataSerial::PointStyle();
+        if (pointStyle == nullptr) {
+            return nullptr;
+        }
+    }
+    pointStyle->fillColor = GetRGBColor(fillColor);
+    pointStyle->strokeColor = GetRGBColor(strokeColor);
+    pointStyle->strokeWidth = 1;
+    pointStyle->radius = radius;
+    pointStyle->strokeWidth = strokeWidth;
+    return pointStyle;
+}
+
 bool ChartComponent::UpdatePointToSerial(UIChartDataSerial* dataserial, PointType type)
 {
     switch (type) {
         case PointType::HEAD: {
+            headPointStyle_ = UpdatePointStyle(headPointStyle_, seriesOptions_->head->fillColor,
+                seriesOptions_->head->strokeColor, seriesOptions_->head->size, seriesOptions_->head->strokeWidth);
             if (headPointStyle_ == nullptr) {
-                headPointStyle_ = new UIChartDataSerial::PointStyle();
-                if (headPointStyle_ == nullptr) {
-                    HILOG_ERROR(HILOG_MODULE_ACE, "malloc headPointStyle heap error");
-                    return false;
-                }
+                HILOG_ERROR(HILOG_MODULE_ACE, "malloc headPointStyle heap error");
+                return false;
             }
-            headPointStyle_->fillColor = GetRGBColor(seriesOptions_->head->fillColor);
-            headPointStyle_->strokeColor = GetRGBColor(seriesOptions_->head->strokeColor);
-            headPointStyle_->strokeWidth = 1;
-            headPointStyle_->radius = seriesOptions_->head->size;
-            headPointStyle_->strokeWidth = seriesOptions_->head->strokeWidth;
             dataserial->SetHeadPointStyle(*headPointStyle_);
             break;
         }
         case PointType::TOP: {
+            topPointStyle_ = UpdatePointStyle(topPointStyle_, seriesOptions_->top->fillColor,
+                seriesOptions_->top->strokeColor, seriesOptions_->top->size, seriesOptions_->top->strokeWidth);
             if (topPointStyle_ == nullptr) {
-                topPointStyle_ = new UIChartDataSerial::PointStyle();
-                if (topPointStyle_ == nullptr) {
-                    HILOG_ERROR(HILOG_MODULE_ACE, "malloc topPointStyle heap error");
-                    return false;
-                }
+                HILOG_ERROR(HILOG_MODULE_ACE, "malloc topPointStyle heap error");
+                return false;
             }
-            topPointStyle_->fillColor = GetRGBColor(seriesOptions_->top->fillColor);
-            topPointStyle_->strokeColor = GetRGBColor(seriesOptions_->top->strokeColor);
-            topPointStyle_->strokeWidth = 1;
-            topPointStyle_->radius = seriesOptions_->top->size;
-            topPointStyle_->strokeWidth = seriesOptions_->top->strokeWidth;
             dataserial->SetTopPointStyle(*topPointStyle_);
             break;
         }
         case PointType::BOTTOM: {
+            bottomPointStyle_ = UpdatePointStyle(bottomPointStyle_,
+                seriesOptions_->bottom->fillColor, seriesOptions_->bottom->strokeColor,
+                seriesOptions_->bottom->size, seriesOptions_->bottom->strokeWidth);
             if (bottomPointStyle_ == nullptr) {
-                bottomPointStyle_ = new UIChartDataSerial::PointStyle();
-                if (bottomPointStyle_ == nullptr) {
-                    HILOG_ERROR(HILOG_MODULE_ACE, "malloc bottomPointStyle heap error");
-                    return false;
-                }
+                HILOG_ERROR(HILOG_MODULE_ACE, "malloc bottomPointStyle heap error");
+                return false;
             }
-            bottomPointStyle_->fillColor = GetRGBColor(seriesOptions_->bottom->fillColor);
-            bottomPointStyle_->strokeColor = GetRGBColor(seriesOptions_->bottom->strokeColor);
-            bottomPointStyle_->strokeWidth = 1;
-            bottomPointStyle_->radius = seriesOptions_->bottom->size;
-            bottomPointStyle_->strokeWidth = seriesOptions_->bottom->strokeWidth;
             dataserial->SetBottomPointStyle(*bottomPointStyle_);
             break;
         }
@@ -262,29 +261,26 @@ bool ChartComponent::UpdatePointToSerial(UIChartDataSerial* dataserial, PointTyp
 bool ChartComponent::UpdatePoints(UIChartDataSerial* dataserial)
 {
     if (seriesOptions_->isTopSet) {
-        if (UpdatePointToSerial(dataserial, PointType::TOP)) {
-            dataserial->EnableTopPoint(true);
-        } else {
+        if (!UpdatePointToSerial(dataserial, PointType::TOP)) {
             return false;
         }
+        dataserial->EnableTopPoint(true);
     } else {
         dataserial->EnableTopPoint(false);
     }
     if (seriesOptions_->isHeadSet) {
-        if (UpdatePointToSerial(dataserial, PointType::HEAD)) {
-            dataserial->EnableHeadPoint(true);
-        } else {
+        if (!UpdatePointToSerial(dataserial, PointType::HEAD)) {
             return false;
         }
+        dataserial->EnableHeadPoint(true);
     } else {
         dataserial->EnableHeadPoint(false);
     }
     if (seriesOptions_->isBottomSet) {
-        if (UpdatePointToSerial(dataserial, PointType::BOTTOM)) {
-            dataserial->EnableBottomPoint(true);
-        } else {
+        if (!UpdatePointToSerial(dataserial, PointType::BOTTOM)) {
             return false;
         }
+        dataserial->EnableBottomPoint(true);
     } else {
         dataserial->EnableBottomPoint(false);
     }
@@ -318,7 +314,7 @@ bool ChartComponent::UpdateValuesToSerial(jerry_value_t dataSet, UIChartDataSeri
             if ((xMaxValue_ >= (UINT16_MAX - 1)) || (dataLen < xMinValue_)) {
                 HILOG_WARN(HILOG_MODULE_ACE, "customMaxCount or customMinValue is set out of boundary");
             }
-            uint16_t customMaxCount = xMaxValue_ + 1; // the max data count speciafied by user
+            uint16_t customMaxCount = xMaxValue_ + 1; // the max data count specified by user
             uint16_t actualMaxCount = dataLen - xMinValue_; // the actual max data count setted in data array
             len = (customMaxCount < actualMaxCount) ? customMaxCount : actualMaxCount;
         }
@@ -346,8 +342,7 @@ bool ChartComponent::UpdateValuesToSerial(jerry_value_t dataSet, UIChartDataSeri
     }
     ReleaseJerryValue(hasDataProp, jData, VA_ARG_END_FLAG);
     // need to set after datas setted
-    isSetOk = isSetOk ? UpdatePoints(dataserial) : false;
-    return isSetOk;
+    return (isSetOk ? UpdatePoints(dataserial) : false);
 }
 
 bool ChartComponent::AppendValuesToSerial(jerry_value_t dataSet, UIChartDataSerial* dataserial, uint16_t dataLen)
@@ -475,7 +470,7 @@ jerry_value_t ChartComponent::AppendDatas(const jerry_value_t func,
     const jerry_value_t *args,
     const jerry_length_t argsNum)
 {
-    uint8_t functionParamsNum = 1; // js append function just recieve 1 number params
+    uint8_t functionParamsNum = 1; // js append function just receive 1 number params
     if (argsNum != functionParamsNum) {
         HILOG_ERROR(HILOG_MODULE_ACE, "append function params error");
     } else {
@@ -519,7 +514,7 @@ void ChartComponent::UpdateData(jerry_value_t dataSets, jerry_value_t keyName, u
     bool isSetOk = false;
     for (uint8_t index = 0; index < serialsCount; index++) { // every data set
         jerry_value_t dataSet = jerry_get_property_by_index(dataSets, index);
-        // check data is set correctlly, if the data is not set correctly, need not to set other attribute left
+        // check data is set correctly, if the data is not set correctly, need not to set other attribute left
         jerry_value_t dataValue = jerry_get_property(dataSet, keyName);
         if ((!jerry_value_is_undefined(dataValue)) && jerry_value_is_array(dataValue)) {
             uint16_t dataLen = jerry_get_array_length(dataValue);
@@ -566,8 +561,7 @@ bool ChartComponent::UpdataDataInOrder(jerry_value_t dataSet, UIChartDataSerial&
     UpdateFillColorToSerial(dataSet, dataserial);
     UpdateGradientToSerial(dataSet, &dataserial);
     UpdateStrokeSmoothToSerial(dataserial);
-    bool isSetOk = UpdateValuesToSerial(dataSet, &dataserial, dataLen);
-    return isSetOk;
+    return UpdateValuesToSerial(dataSet, &dataserial, dataLen);
 }
 
 void ChartComponent::AppendData(jerry_value_t dataSet, DataSerials* dataSerialNode)
@@ -597,7 +591,7 @@ void ChartComponent::UpdateColorToSerial(jerry_value_t dataSet, UIChartDataSeria
             isColorSet = true;
         }
     }
-    uint32_t defaultColorVal = 0xFF6384; // pink
+    const uint32_t defaultColorVal = 0xFF6384; // pink
     uint32_t colorVal = defaultColorVal;
     if (isColorSet) {
         colorVal = GetColor(dataSet, const_cast<char *>(styleName), defaultColorVal);
@@ -613,12 +607,7 @@ void ChartComponent::UpdateColorToSerial(jerry_value_t dataSet, UIChartDataSeria
 bool ChartComponent::SetOptionsAxis(jerry_value_t attrValue, bool isXAxis)
 {
     bool isSetOk = false;
-    jerry_value_t jAxisName;
-    if (isXAxis) {
-        jAxisName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(X_AXIS));
-    } else {
-        jAxisName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(Y_AXIS));
-    }
+    jerry_value_t jAxisName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(isXAxis ? X_AXIS : Y_AXIS));
     jerry_value_t hasXAxisProp = jerry_has_property(attrValue, jAxisName);
     if (!jerry_get_boolean_value(hasXAxisProp)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "xAxis and yAxis param must set");
@@ -641,12 +630,21 @@ bool ChartComponent::SetOptionsAxis(jerry_value_t attrValue, bool isXAxis)
 bool ChartComponent::SetOptionsAxisDataRange(jerry_value_t xAxisValue, bool isXAxis)
 {
     bool isSetOk = true;
-    uint8_t defaultMinValue = 0;
-    uint8_t defaultMaxValue = 100;
+    const uint8_t defaultMinValue = 0;
+    const uint8_t defaultMaxValue = 100;
     jerry_value_t jMinValue = jerryx_get_property_str(xAxisValue, MIN);
     jerry_value_t jMaxValue = jerryx_get_property_str(xAxisValue, MAX);
-    uint16_t minValue = (uint16_t)(jerry_get_number_value(jMinValue));
-    uint16_t maxValue = (uint16_t)(jerry_get_number_value(jMaxValue));
+    double tempMinVal = jerry_get_number_value(jMinValue);
+    double tempMaxVal = jerry_get_number_value(jMaxValue);
+    uint16_t minValue = defaultMinValue;
+    uint16_t maxValue = defaultMaxValue;
+    if ((tempMinVal >= 0) && (tempMinVal <= UINT16_MAX)) {
+        minValue = static_cast<uint16_t>(tempMinVal);
+    }
+    if ((tempMaxVal >= 0) && (tempMaxVal <= UINT16_MAX)) {
+        maxValue = static_cast<uint16_t>(tempMaxVal);
+    }
+
     if (maxValue == 0) {
         if (!jerryx_has_property_str(xAxisValue, "max")) {
             HILOG_WARN(HILOG_MODULE_ACE,
@@ -706,12 +704,15 @@ bool ChartComponent::SetOptionsAxisDataRange(uint16_t minValue, uint16_t maxValu
 void ChartComponent::SetOptionsAxisTick(jerry_value_t xAxisValue, bool isXAxis)
 {
     jerry_value_t jAxisTickValue = jerryx_get_property_str(xAxisValue, "axisTick");
-    int16_t axisTickValue = (int16_t)(jerry_get_number_value(jAxisTickValue));
+    double tempAxisTickVal = jerry_get_number_value(jAxisTickValue);
+    int16_t axisTickValue;
     const int8_t minTickValue = 1;
     const int8_t maxTickValue = 20;
-    if ((axisTickValue < minTickValue) || (axisTickValue > maxTickValue)) {
+    if ((tempAxisTickVal < minTickValue) || (tempAxisTickVal > maxTickValue)) {
         int16_t defaultValue = 10; // default value, means total number of ticks
         axisTickValue = defaultValue;
+    } else {
+        axisTickValue = static_cast<int16_t>(tempAxisTickVal);
     }
     jerry_release_value(jAxisTickValue);
     if (isXAxis) {
@@ -725,12 +726,15 @@ bool ChartComponent::SetOptionsAxisDisplay(jerry_value_t xAxisValue, bool isXAxi
 {
     bool displayValue = false; // default value, means not show axis
     jerry_value_t jDisplayValue = jerryx_get_property_str(xAxisValue, DISPLAY);
-    displayValue = jerry_get_boolean_value(jDisplayValue);
+    if (!jerry_value_is_undefined(jDisplayValue)) {
+        displayValue = jerry_get_boolean_value(jDisplayValue);
+    }
     if (isXAxis) {
         xAxis_->SetVisible(displayValue);
     } else {
         yAxis_->SetVisible(displayValue);
     }
+    jerry_release_value(jDisplayValue);
     return true;
 }
 
@@ -755,9 +759,7 @@ void ChartComponent::SetOptionsAxisColor(jerry_value_t xAxisValue, bool isXAxis)
 
 void ChartComponent::RecordOptionsSeries(jerry_value_t options)
 {
-    if (!jerryx_has_property_str(options, SERIES)) {
-        return;
-    } else {
+    if (jerryx_has_property_str(options, SERIES)) {
         jerry_value_t jSeriesVal = jerryx_get_property_str(options, SERIES);
         RecordOptionsSeriesLineStyle(jSeriesVal);
         RecordOptionsSeriesPoint(jSeriesVal, PointType::HEAD);
@@ -773,20 +775,19 @@ void ChartComponent::RecordOptionsSeriesLineStyle(jerry_value_t jSeriesVal)
     char* styleName = const_cast<char *>(LINE_STYLE);
     if (!jerryx_has_property_str(jSeriesVal, styleName)) {
         return;
-    } else {
-        jerry_value_t jLineStyleVal = jerryx_get_property_str(jSeriesVal, styleName);
-        styleName = const_cast<char *>(WIDTH);
-        uint16_t widthVal = GetSizeVal(jLineStyleVal, styleName, 1);
-        chartView_->SetStyle(STYLE_LINE_WIDTH, widthVal); // chart width set can affect all the series
-        seriesOptions_->width = widthVal;
-        styleName = const_cast<char *>(SMOOTH);
-        if (jerryx_has_property_str(jLineStyleVal, styleName)) {
-            jerry_value_t jSmoothVal = jerryx_get_property_str(jLineStyleVal, styleName);
-            seriesOptions_->smooth = jerry_get_boolean_value(jSmoothVal);
-            jerry_release_value(jSmoothVal);
-        }
-        jerry_release_value(jLineStyleVal);
     }
+    jerry_value_t jLineStyleVal = jerryx_get_property_str(jSeriesVal, styleName);
+    styleName = const_cast<char *>(WIDTH);
+    uint16_t widthVal = GetSizeVal(jLineStyleVal, styleName, 1);
+    chartView_->SetStyle(STYLE_LINE_WIDTH, widthVal); // chart width set can affect all the series
+    seriesOptions_->width = widthVal;
+    styleName = const_cast<char *>(SMOOTH);
+    if (jerryx_has_property_str(jLineStyleVal, styleName)) {
+        jerry_value_t jSmoothVal = jerryx_get_property_str(jLineStyleVal, styleName);
+        seriesOptions_->smooth = jerry_get_boolean_value(jSmoothVal);
+        jerry_release_value(jSmoothVal);
+    }
+    jerry_release_value(jLineStyleVal);
 }
 
 void ChartComponent::RecordOptionsSeriesPoint(jerry_value_t jSeriesVal, PointType type)
@@ -816,14 +817,14 @@ void ChartComponent::RecordOptionsSeriesPoint(jerry_value_t jSeriesVal, PointTyp
     styleName = const_cast<char *>(SIZE);
     uint8_t defaultValue = 4;
     uint8_t size = GetSizeVal(jPointStyleVal, styleName, defaultValue);
-    uint32_t defalutColorVal = 0xff0000;
+    uint32_t defaultColorVal = 0xff0000;
     styleName = const_cast<char *>(STROKE_COLOR);
-    uint32_t strokeColor = GetColor(jPointStyleVal, styleName, defalutColorVal);
+    uint32_t strokeColor = GetColor(jPointStyleVal, styleName, defaultColorVal);
     defaultValue = 1;
     styleName = const_cast<char *>(STROKE_WIDTH);
     uint8_t strokeWidth = GetSizeVal(jPointStyleVal, styleName, defaultValue);
     styleName = const_cast<char *>(FILL_COLOR);
-    uint32_t fillColor = GetColor(jPointStyleVal, styleName, defalutColorVal);
+    uint32_t fillColor = GetColor(jPointStyleVal, styleName, defaultColorVal);
     bool isDisplay = GetDisplayStatus(jPointStyleVal);
 
     jerry_release_value(jPointStyleVal);
@@ -931,17 +932,16 @@ void ChartComponent::ClearDataSerialsNode(DataSerials* serial)
 {
     if (serial == nullptr) {
         return;
-    } else {
-        if (serial->next) {
-            ClearDataSerialsNode(serial->next);
-        }
-        if (serial->dataSerial) {
-            delete (serial->dataSerial);
-            serial->dataSerial = nullptr;
-        }
-        delete (serial);
-        serial = nullptr;
     }
+    if (serial->next) {
+        ClearDataSerialsNode(serial->next);
+    }
+    if (serial->dataSerial) {
+        delete (serial->dataSerial);
+        serial->dataSerial = nullptr;
+    }
+    delete (serial);
+    serial = nullptr;
 }
 
 void ChartComponent::ClearAllDataSerials()
@@ -984,10 +984,9 @@ bool ChartComponent::GetDisplayStatus(jerry_value_t obj)
 {
     if (!jerryx_has_property_str(obj, DISPLAY)) {
         return true;
-    } else {
-        jerry_value_t jDisplayValue = jerryx_get_property_str(obj, DISPLAY);
-        return jerry_get_boolean_value(jDisplayValue);
     }
+    jerry_value_t jDisplayValue = jerryx_get_property_str(obj, DISPLAY);
+    return jerry_get_boolean_value(jDisplayValue);
 }
 
 bool ChartComponent::Init()
diff --git a/src/core/components/chart_component.h b/frameworks/src/core/components/chart_component.h
similarity index 95%
rename from src/core/components/chart_component.h
rename to frameworks/src/core/components/chart_component.h
index 1713656..5f5a9fc 100755
--- a/src/core/components/chart_component.h
+++ b/frameworks/src/core/components/chart_component.h
@@ -30,7 +30,7 @@ struct DataSerials : public MemoryHeap {
     DataSerials() : dataSerial(nullptr), next(nullptr) {}
 };
 
-enum class PointType { HEAD, TOP, BOTTOM };
+enum class PointType : uint8_t { HEAD, TOP, BOTTOM };
 
 struct PointOptions : public MemoryHeap {
     uint8_t size;
@@ -65,7 +65,7 @@ public:
     ~ChartComponent() {}
     virtual bool CreateNativeViews() override;
     virtual bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
-    virtual void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
+    virtual void PostUpdate(uint16_t attrKeyId) override;
     virtual void PostRender() override;
     virtual void ReleaseNativeViews() override;
 
@@ -96,6 +96,8 @@ private:
     void SetOptionsAxisTick(jerry_value_t options, bool isXAxis);
     bool SetOptionsAxisDisplay(jerry_value_t options, bool isXAxis);
     void SetOptionsAxisColor(jerry_value_t options, bool isXAxis);
+    UIChartDataSerial::PointStyle *UpdatePointStyle(UIChartDataSerial::PointStyle *pointStyle, uint32_t fillColor,
+        uint32_t strokeColor, uint32_t radius, uint32_t strokeWidth);
     /**
      * @brief record series options in seriesOptions_
      *
diff --git a/frameworks/src/core/components/circle_progress_component.cpp b/frameworks/src/core/components/circle_progress_component.cpp
new file mode 100644
index 0000000..77a27c1
--- /dev/null
+++ b/frameworks/src/core/components/circle_progress_component.cpp
@@ -0,0 +1,211 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "circle_progress_component.h"
+
+namespace OHOS {
+namespace ACELite {
+CircleProgressComponent::CircleProgressComponent(jerry_value_t options,
+                                                 jerry_value_t children, AppStyleManager *styleManager)
+    : Component(options, children, styleManager),
+    centerX_(INT16_MAX),
+    centerY_(INT16_MAX),
+    radius_(INT16_MAX),
+    startAngle_(DEFAULT_START_ANGLE),
+    totalAngle_(DEFAULT_TOTAL_ANGLE)
+{
+}
+
+bool CircleProgressComponent::CreateNativeViews()
+{
+    // set default value
+    progressView_.SetBackgroundStyle(StyleDefault::GetBrightStyle());
+    const int8_t defaultLineWidth = 32;
+    progressView_.SetBackgroundStyle(STYLE_LINE_WIDTH, defaultLineWidth); // Compatible with rich devices
+    progressView_.SetBackgroundStyle(STYLE_LINE_CAP, CapType::CAP_ROUND);
+    uint32_t color = 0;
+    uint8_t alpha = OPA_OPAQUE;
+    const char * const defaultBackgroundColor = "rgba(255,255,255,0.15)";
+    if (ParseColor(defaultBackgroundColor, color, alpha)) {
+        progressView_.SetBackgroundStyle(STYLE_LINE_COLOR, GetRGBColor(color).full);
+    }
+    progressView_.SetForegroundStyle(StyleDefault::GetBrightColorStyle());
+    progressView_.SetForegroundStyle(STYLE_BACKGROUND_OPA, 0);
+    progressView_.SetForegroundStyle(STYLE_BORDER_OPA, 0);
+    progressView_.SetForegroundStyle(STYLE_LINE_WIDTH, defaultLineWidth);
+    progressView_.SetForegroundStyle(STYLE_LINE_CAP, CapType::CAP_ROUND);
+    const char * const defaultColor = "#5EA1FF";
+    if (ParseColor(defaultColor, color, alpha)) {
+        progressView_.SetForegroundStyle(STYLE_LINE_COLOR, GetRGBColor(color).full);
+        progressView_.SetForegroundStyle(STYLE_LINE_OPA, OPA_OPAQUE);
+    }
+    return true;
+}
+
+bool CircleProgressComponent::ApplyPrivateStyle(const AppStyleItem *style)
+{
+    return SetArcProgressStyle(style);
+}
+
+UIView *CircleProgressComponent::GetComponentRootView() const
+{
+    return const_cast<UICircleProgress *>(&progressView_);
+}
+
+bool CircleProgressComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
+{
+    switch (attrKeyId) {
+        case K_PERCENT: {
+            // set the specific attribute of this progress view
+            int16_t rangeMax = 100;
+            int16_t rangeMin = 0;
+            progressView_.SetRange(rangeMax, rangeMin);
+            progressView_.SetValue(IntegerOf(attrValue));
+            return true;
+        }
+        default: {
+            return false;
+        }
+    }
+}
+
+void CircleProgressComponent::SetAngles()
+{
+    if (centerX_ == INT16_MAX) {
+        centerX_ = static_cast<uint16_t>(progressView_.GetWidth()) >> 1;
+    }
+    if (centerY_ == INT16_MAX) {
+        centerY_ = static_cast<uint16_t>(progressView_.GetHeight()) >> 1;
+    }
+    if (radius_ == INT16_MAX) {
+        if (progressView_.GetWidth() <= progressView_.GetHeight()) {
+            radius_ = static_cast<uint16_t>(progressView_.GetWidth()) >> 1;
+        } else {
+            radius_ = static_cast<uint16_t>(progressView_.GetHeight()) >> 1;
+        }
+    }
+
+    progressView_.SetCenterPosition(centerX_, centerY_);
+    progressView_.SetRadius(radius_);
+    progressView_.SetStartAngle(startAngle_);
+    progressView_.SetEndAngle(startAngle_ + totalAngle_);
+}
+
+void CircleProgressComponent::SetStartAngle(const AppStyleItem *style)
+{
+    const int16_t minStartAngle = 0;
+    const int16_t maxStartAngle = 360;
+    startAngle_ = GetStyleDegValue(style); // Compatible with rich devices, value should between -180 and 0
+    if (startAngle_ > maxStartAngle) {
+        startAngle_ = maxStartAngle;
+    } else if (startAngle_ < minStartAngle) {
+        startAngle_ = minStartAngle;
+    }
+}
+
+void CircleProgressComponent::SetTotalAngle(const AppStyleItem *style)
+{
+    const int16_t minStartAngle = -360;
+    const int16_t maxStartAngle = 360;
+    totalAngle_ = GetStyleDegValue(style); // Compatible with rich devices, value should between 0 and 180
+    if (totalAngle_ < minStartAngle) {
+        totalAngle_ = minStartAngle;
+    } else if (totalAngle_ > maxStartAngle) {
+        totalAngle_ = maxStartAngle;
+    }
+}
+
+bool CircleProgressComponent::SetArcColor(const AppStyleItem *style)
+{
+    uint32_t color = 0;
+    uint8_t alpha = OPA_OPAQUE;
+    if (!GetStyleColorValue(style, color, alpha)) {
+        return false;
+    }
+    progressView_.SetForegroundStyle(STYLE_LINE_COLOR, GetRGBColor(color).full);
+    progressView_.SetForegroundStyle(STYLE_LINE_OPA, alpha);
+    return true;
+}
+
+bool CircleProgressComponent::SetArcBackgroundColor(const AppStyleItem *style)
+{
+    uint32_t color = 0;
+    uint8_t alpha = OPA_OPAQUE;
+    if (!GetStyleColorValue(style, color, alpha)) {
+        return false;
+    }
+    progressView_.SetBackgroundStyle(STYLE_LINE_COLOR, GetRGBColor(color).full);
+    progressView_.SetBackgroundStyle(STYLE_LINE_OPA, alpha);
+    return true;
+}
+
+bool CircleProgressComponent::SetArcProgressStyle(const AppStyleItem *style)
+{
+    uint16_t stylePropNameId = GetStylePropNameId(style);
+    switch (stylePropNameId) {
+        case K_CENTER_X: {
+            centerX_ = GetStylePixelValue(style);
+            return true;
+        }
+        case K_CENTER_Y: {
+            centerY_ = GetStylePixelValue(style);
+            return true;
+        }
+        case K_RADIUS: {
+            radius_ = GetStylePixelValue(style);
+            return true;
+        }
+        case K_START_ANGLE: {
+            SetStartAngle(style);
+            return true;
+        }
+        case K_TOTAL_ANGLE: {
+            SetTotalAngle(style);
+            return true;
+        }
+        case K_COLOR: {
+            return SetArcColor(style);
+        }
+        case K_STROKE_WIDTH: {
+            progressView_.SetBackgroundStyle(STYLE_LINE_WIDTH, GetStylePixelValue(style));
+            progressView_.SetForegroundStyle(STYLE_LINE_WIDTH, GetStylePixelValue(style));
+            return true;
+        }
+        case K_BACKGROUND_COLOR: {
+            return SetArcBackgroundColor(style);
+        }
+        default: {
+            return false;
+        }
+    }
+}
+
+void CircleProgressComponent::OnViewAttached()
+{
+    HandleExtraUpdate();
+}
+
+void CircleProgressComponent::PostUpdate(uint16_t attrKeyId)
+{
+    UNUSED(attrKeyId);
+    HandleExtraUpdate();
+}
+
+void CircleProgressComponent::HandleExtraUpdate()
+{
+    SetAngles();
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/src/core/components/progress_component.h b/frameworks/src/core/components/circle_progress_component.h
old mode 100755
new mode 100644
similarity index 56%
rename from src/core/components/progress_component.h
rename to frameworks/src/core/components/circle_progress_component.h
index 4609e0e..6f660f6
--- a/src/core/components/progress_component.h
+++ b/frameworks/src/core/components/circle_progress_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2021 Huawei Device 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
@@ -13,48 +13,44 @@
  * limitations under the License.
  */
 
-#ifndef OHOS_ACELITE_PROGRESS_COMPONENT_H
-#define OHOS_ACELITE_PROGRESS_COMPONENT_H
+#ifndef OHOS_ACELITE_CIRCLE_PROGRESS_COMPONENT_H
+#define OHOS_ACELITE_CIRCLE_PROGRESS_COMPONENT_H
+
 
 #include "component.h"
 #include "non_copyable.h"
-#include "ui_abstract_progress.h"
+#include "ui_circle_progress.h"
 
 namespace OHOS {
 namespace ACELite {
-enum ProgressType { ARC = 0x01, HORIZONTAL = 0x02 };
-
 constexpr int16_t DEFAULT_START_ANGLE = 240;
 constexpr int16_t DEFAULT_TOTAL_ANGLE = 240;
 constexpr int16_t DEFAULT_STROKE_WIDTH = 32;
 
-class ProgressComponent final : public Component {
+class CircleProgressComponent final : public Component {
 public:
-    ACE_DISALLOW_COPY_AND_MOVE(ProgressComponent);
-    ProgressComponent() = delete;
-    ProgressComponent(jerry_value_t options, jerry_value_t children, AppStyleManager* styleManager);
-    ~ProgressComponent() override {}
+    ACE_DISALLOW_COPY_AND_MOVE(CircleProgressComponent);
+    CircleProgressComponent() = delete;
+    CircleProgressComponent(jerry_value_t options, jerry_value_t children, AppStyleManager* styleManager);
+    ~CircleProgressComponent() override {}
 
 protected:
-    bool CreateNativeViews() override;
-    void ReleaseNativeViews() override;
     UIView *GetComponentRootView() const override;
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
     bool ApplyPrivateStyle(const AppStyleItem* style) override;
-    void PostRender() override;
-    void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
+    void PostUpdate(uint16_t attrKeyId) override;
+    void OnViewAttached() override;
+    void HandleExtraUpdate();
+    bool CreateNativeViews() override;
 
 private:
-    ProgressType GetType() const;
-    char* GetStringAttrByName(const char * const name, uint16_t* len) const;
     void SetAngles();
-    void HorizonProgressPostDeal() const;
     bool SetArcProgressStyle(const AppStyleItem* style);
-    bool SetHorizonProgressStyle(const AppStyleItem* style);
-    jerry_value_t options_;
-    UIAbstractProgress* progressView_;
-    ProgressType type_;
-    int16_t hStrokeWidth_;
+    void SetStartAngle(const AppStyleItem *style);
+    void SetTotalAngle(const AppStyleItem *style);
+    bool SetArcColor(const AppStyleItem *style);
+    bool SetArcBackgroundColor(const AppStyleItem *style);
+    UICircleProgress progressView_;
     int16_t centerX_;
     int16_t centerY_;
     int16_t radius_;
@@ -64,4 +60,4 @@ private:
 } // namespace ACELite
 } // namespace OHOS
 
-#endif // OHOS_ACELITE_PROGRESS_COMPONENT_H
+#endif // OHOS_ACELITE_CIRCLE_PROGRESS_COMPONENT_H
diff --git a/src/core/components/clock_hand_component.cpp b/frameworks/src/core/components/clock_hand_component.cpp
old mode 100755
new mode 100644
similarity index 99%
rename from src/core/components/clock_hand_component.cpp
rename to frameworks/src/core/components/clock_hand_component.cpp
index c2cc253..c0af38f
--- a/src/core/components/clock_hand_component.cpp
+++ b/frameworks/src/core/components/clock_hand_component.cpp
@@ -100,6 +100,7 @@ void ClockHandComponent::PostRender()
 
     jerry_value_t nativeObj = GetNativeElement();
     if (jerry_value_is_undefined(nativeObj)) {
+        ReleaseJerryValue(pivotXValue, pivotYValue, typeIdValue, VA_ARG_END_FLAG);
         return;
     }
     SetNamedProperty(nativeObj, stylePivotX, pivotXValue);
diff --git a/src/core/components/clock_hand_component.h b/frameworks/src/core/components/clock_hand_component.h
old mode 100755
new mode 100644
similarity index 98%
rename from src/core/components/clock_hand_component.h
rename to frameworks/src/core/components/clock_hand_component.h
index 2af26c3..ef784a2
--- a/src/core/components/clock_hand_component.h
+++ b/frameworks/src/core/components/clock_hand_component.h
@@ -46,7 +46,7 @@ protected:
     *
     * @brief   Values that represent different clock-hand layout types
     */
-    enum class LayoutType {
+    enum class LayoutType : uint8_t {
         // UIImageView layout
         IMAGE,
         // Rectangle layout
diff --git a/src/core/components/component.cpp b/frameworks/src/core/components/component.cpp
similarity index 66%
rename from src/core/components/component.cpp
rename to frameworks/src/core/components/component.cpp
index c81b189..e0df537 100755
--- a/src/core/components/component.cpp
+++ b/frameworks/src/core/components/component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -25,13 +25,12 @@
 #include "js_router.h"
 #include "key_parser.h"
 #include "keys.h"
+#include "lazy_load_manager.h"
+#include "securec.h"
 #include "stylemgr/app_style.h"
 #include "stylemgr/app_style_manager.h"
 #include "time_util.h"
 #include "wrapper/js.h"
-#if ENABLED(SECURE_C_FUNCTION)
-#include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 
 namespace OHOS {
 namespace ACELite {
@@ -40,7 +39,7 @@ static bool g_isAnimatorStarted = false;
 void Component::HandlerAnimations()
 {
     Component::AnimationsNode *point = g_animationListHead;
-    while (point != nullptr) {
+    while (point != nullptr && point->transitionImpl != nullptr) {
         point->transitionImpl->Start();
         point = point->next;
     }
@@ -54,6 +53,7 @@ void Component::ReleaseAnimations()
         Component::AnimationsNode *temp = point->next;
         if (point->transitionImpl) {
             delete (point->transitionImpl);
+            point->transitionImpl = nullptr;
         }
         delete (point);
         point = temp;
@@ -63,7 +63,10 @@ void Component::ReleaseAnimations()
 }
 
 Component::Component(jerry_value_t options, jerry_value_t children, AppStyleManager *styleManager)
-    : styleManager_(styleManager),
+    : childHead_(nullptr),
+      nextSibling_(nullptr),
+      parent_(nullptr),
+      styleManager_(styleManager),
       options_(options),
       children_(UNDEFINED),
       onClickListener_(nullptr),
@@ -84,21 +87,20 @@ Component::Component(jerry_value_t options, jerry_value_t children, AppStyleMana
       trans_(nullptr),
       descriptors_(jerry_acquire_value(children)),
       watchersHead_(nullptr),
-      height_(-1),
-      width_(-1)
+      height_(-1, DimensionType::TYPE_UNKNOWN),
+      width_(-1, DimensionType::TYPE_UNKNOWN),
+      top_(-1, DimensionType::TYPE_UNKNOWN),
+      left_(-1, DimensionType::TYPE_UNKNOWN),
+      marginTop_(-1, DimensionType::TYPE_UNKNOWN),
+      marginLeft_(-1, DimensionType::TYPE_UNKNOWN),
+      marginRight_(-1, DimensionType::TYPE_UNKNOWN),
+      marginBottom_(-1, DimensionType::TYPE_UNKNOWN)
 {
     // create native element object before combining styles, as style data binding need it
     nativeElement_ = jerry_create_object();
     jerry_value_t global = jerry_get_global_object();
     viewModel_ = jerryx_get_property_str(global, ATTR_ROOT);
     jerry_release_value(global);
-    if (styleManager_) {
-        // combine app style for this component by app style list.
-        // style apply priority: inline(static style) > #id > .class
-        START_TRACING_WITH_COMPONENT_NAME(RENDER_COMBINE_STYLE, componentName_);
-        styleManager_->CombineStylesForCurrentTag(options_, *this);
-        STOP_TRACING();
-    }
 }
 
 /**
@@ -120,15 +122,16 @@ bool Component::Render()
     }
 
     PreRender();
-    bool renderResult = false;
     // step1: create native view/views
     START_TRACING_WITH_COMPONENT_NAME(RENDER_CREATE_COMPONENT, componentName_);
-    renderResult = CreateNativeViews();
+    bool renderResult = CreateNativeViews();
     if (!renderResult) {
         return false;
     }
     STOP_TRACING();
 
+    SetViewExtraMsg();
+
     // step2: binding js object with this component
     jerry_set_object_native_pointer(nativeElement_, this, nullptr);
 
@@ -136,7 +139,7 @@ bool Component::Render()
     ParseOptions();
     // step4: apply styles
     START_TRACING_WITH_COMPONENT_NAME(RENDER_APPLY_STYLE, componentName_);
-    ApplyStyles();
+    ApplyStyles(options_, *this);
     STOP_TRACING();
 
     // step5:process this component's children
@@ -145,23 +148,55 @@ bool Component::Render()
     STOP_TRACING();
     if (!renderResult) {
         return false;
-    } else {
-        RecordAnimation();
     }
+    RecordAnimation();
     PostRender();
     rendered_ = true;
 
     return renderResult;
 }
 
+void Component::SetViewExtraMsg()
+{
+    UIView *view = GetComponentRootView();
+    if (view == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "failed to set the extra message for view.");
+        return;
+    }
+    UIView::ViewExtraMsg *extraMsg = new UIView::ViewExtraMsg();
+    if (extraMsg == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Failed to mapping native view with DOM element.");
+        return;
+    }
+    extraMsg->elementPtr = (void *)&nativeElement_;
+    view->SetExtraMsg(extraMsg);
+}
+
+void Component::ReleaseViewExtraMsg()
+{
+    UIView *view = GetComponentRootView();
+    if (view == nullptr) {
+        return;
+    }
+    UIView::ViewExtraMsg *extraMsg = view->GetExtraMsg();
+    ACE_DELETE(extraMsg);
+    view->SetExtraMsg(nullptr);
+}
+
 void Component::Release()
 {
     // detach self from fatal handler monitoring
     FatalHandler::GetInstance().DetachComponentNode(this);
+    if (parent_ != nullptr) {
+        parent_->RemoveChild(this);
+    }
+
     // stop view animation
     if (curTransitionImpl_) {
         curTransitionImpl_->Stop();
     }
+    ReleaseViewExtraMsg();
+    jerry_delete_object_native_pointer(nativeElement_, nullptr);
     // release all native views
     ReleaseNativeViews();
     // release transition param
@@ -200,11 +235,17 @@ bool Component::UpdateView(uint16_t attrKeyId, jerry_value_t attrValue)
         }
     }
 
-    RefreshRect();
+    if (parent_ != nullptr) {
+        ConstrainedParameter parentParam;
+        parent_->GetConstrainedParam(parentParam);
+        AlignDimensions(parentParam);
+    }
+    AdaptBoxSizing();
     // force parent to relayout the children in case component's area is changed
     InvalidateIfNeeded(attrKeyId, false);
-
-    PostUpdate(attrKeyId, updateResult);
+    if (updateResult) {
+        PostUpdate(attrKeyId);
+    }
     StartAnimation();
     STOP_TRACING();
 
@@ -240,6 +281,7 @@ bool Component::SetCommonAttribute(UIView &view, const uint16_t attrKeyId, const
             ACE_FREE(viewId_);
             viewId_ = MallocStringOf(attrValue);
             if (viewId_ == nullptr) {
+                HILOG_ERROR(HILOG_MODULE_ACE, "failed to set `id` attribute.");
                 return false;
             }
             view.SetViewId(viewId_);
@@ -253,7 +295,8 @@ bool Component::SetCommonAttribute(UIView &view, const uint16_t attrKeyId, const
             uint16_t length = 0;
             char *refName = MallocStringOf(attrValue, &length);
             if (refName == nullptr) {
-                break;
+                HILOG_ERROR(HILOG_MODULE_ACE, "failed to set `ref` attribute.");
+                return false;
             }
             if (length != 0) {
                 jerry_value_t refs = jerryx_get_property_str(viewModel_, ATTR_REFS);
@@ -278,66 +321,174 @@ bool Component::SetCommonAttribute(UIView &view, const uint16_t attrKeyId, const
     return true;
 }
 
-void Component::ApplyStyles()
+void Component::ApplyStyles(const jerry_value_t options, Component &curr) const
 {
-    const AppStyle *combinedStyle = GetStyleManager()->GetCombinedStyle();
-    if (combinedStyle != nullptr) {
-        const AppStyleItem *style = combinedStyle->GetFirst();
-        while (style != nullptr) {
-            START_TRACING_WITH_EXTRA_INFO(APPLY_STYLE_ITEM, componentName_, GetStylePropNameId(style));
-            // call children's apply method
-            ApplyStyle(style);
-            STOP_TRACING();
-            style = style->GetNext();
-        }
+    if (jerry_value_is_undefined(options)) {
+        return;
     }
-    RefreshRect();
+    styleManager_->ApplyComponentStyles(options, curr);
 }
 
-bool Component::RefreshRect() const
+void Component::GetDimensionFromStyle(Dimension &dimension, const AppStyleItem &styleItem) const
+{
+    if (styleItem.GetValueType() == STYLE_PROP_VALUE_TYPE_PERCENT) {
+        // percent format
+        dimension.value.percentage = styleItem.GetPercentValue();
+        dimension.type = DimensionType::TYPE_PERCENT;
+        return;
+    }
+    // number or string format
+    // use INT32_MIN as the impossible default value
+    int32_t pixelValue = GetStylePixelValue(&styleItem, INT32_MIN);
+    if (pixelValue == INT32_MIN) {
+        // get pixel failed, reset to unknown type
+        dimension.type = DimensionType::TYPE_UNKNOWN;
+        return;
+    }
+    dimension.value.pixel = (int16_t)(pixelValue);
+    dimension.type = DimensionType::TYPE_PIXEL;
+}
+
+void Component::CalculateDimensionPixel(Dimension &dimension, int16_t base) const
+{
+    const uint8_t hundred = 100;
+    if (dimension.type == DimensionType::TYPE_PERCENT) {
+        dimension.value.pixel = (int16_t)((dimension.value.percentage * base) / hundred);
+        dimension.type = DimensionType::TYPE_PIXEL;
+    }
+}
+
+const Dimension &Component::GetDimension(uint16_t keyNameId) const
+{
+    const static Dimension unknownDimension = {0, DimensionType::TYPE_UNKNOWN};
+    switch (keyNameId) {
+        case K_WIDTH:
+            return width_;
+        case K_HEIGHT:
+            return height_;
+        case K_TOP:
+            return top_;
+        case K_LEFT:
+            return left_;
+        case K_MARGIN_TOP:
+            return marginTop_;
+        case K_MARGIN_BOTTOM:
+            return marginBottom_;
+        case K_MARGIN_RIGHT:
+            return marginRight_;
+        case K_MARGIN_LEFT:
+            return marginLeft_;
+        default: {
+            return unknownDimension;
+        }
+    }
+}
+
+void Component::AlignDimensions(const ConstrainedParameter &param)
+{
+    // width
+    CalculateDimensionPixel(width_, param.maxWidth);
+    CalculateDimensionPixel(height_, param.maxHeight);
+    // top & left
+    CalculateDimensionPixel(top_, param.maxHeight);
+    CalculateDimensionPixel(left_, param.maxWidth);
+    // margin
+    CalculateDimensionPixel(marginTop_, param.maxHeight);
+    CalculateDimensionPixel(marginLeft_, param.maxHeight);
+    CalculateDimensionPixel(marginRight_, param.maxHeight);
+    CalculateDimensionPixel(marginBottom_, param.maxHeight);
+    // notify
+    OnDimensionsAligned();
+}
+
+void Component::GetConstrainedParam(ConstrainedParameter &param) const
+{
+    param.maxWidth = width_.value.pixel;
+    param.maxHeight = height_.value.pixel;
+}
+
+void Component::ApplyAlignedMargin(UIView &uiView) const
+{
+    if (marginTop_.type == DimensionType::TYPE_PIXEL) {
+        uiView.SetStyle(STYLE_MARGIN_TOP, marginTop_.value.pixel);
+    }
+    if (marginBottom_.type == DimensionType::TYPE_PIXEL) {
+        uiView.SetStyle(STYLE_MARGIN_BOTTOM, marginBottom_.value.pixel);
+    }
+    if (marginLeft_.type == DimensionType::TYPE_PIXEL) {
+        uiView.SetStyle(STYLE_MARGIN_LEFT, marginLeft_.value.pixel);
+    }
+    if (marginRight_.type == DimensionType::TYPE_PIXEL) {
+        uiView.SetStyle(STYLE_MARGIN_RIGHT, marginRight_.value.pixel);
+    }
+}
+
+void Component::ApplyAlignedPosition(UIView &uiView) const
+{
+    if (top_.type == DimensionType::TYPE_PIXEL) {
+        uiView.SetY(top_.value.pixel);
+    }
+    if (left_.type == DimensionType::TYPE_PIXEL) {
+        uiView.SetX(left_.value.pixel);
+    }
+}
+
+void Component::AdapteBoxRectArea(UIView &uiView) const
+{
+    // set view height and width
+    uint8_t borderNum = 2;
+    int16_t height = (height_.type == DimensionType::TYPE_PIXEL) ? height_.value.pixel : -1;
+    int16_t width = (width_.type == DimensionType::TYPE_PIXEL) ? width_.value.pixel : -1;
+    if (height >= 0) {
+        // as uiView->GetStyle(STYLE_PADDING_TOP) and uiView->GetStyle(STYLE_PADDING_BOTTOM) is defined
+        // as uint16_t, so do not need to judge whether less than 0
+        if (uiView.GetStyle(STYLE_BORDER_WIDTH) < 0) {
+            HILOG_WARN(HILOG_MODULE_ACE, "border and padding size should not less than 0");
+        }
+        int16_t contentHeight = height - (uiView.GetStyle(STYLE_BORDER_WIDTH) * borderNum) -
+                                uiView.GetStyle(STYLE_PADDING_TOP) - uiView.GetStyle(STYLE_PADDING_BOTTOM);
+        if (contentHeight <= 0) {
+            HILOG_WARN(HILOG_MODULE_ACE,
+                "component height can not include padding and border width, padding and border will be set 0");
+            uiView.SetStyle(STYLE_BORDER_WIDTH, 0);
+            uiView.SetStyle(STYLE_PADDING_TOP, 0);
+            uiView.SetStyle(STYLE_PADDING_BOTTOM, 0);
+            uiView.SetHeight(height);
+        } else {
+            uiView.SetHeight(contentHeight);
+        }
+    }
+    if (width >= 0) {
+        if (uiView.GetStyle(STYLE_BORDER_WIDTH) < 0) {
+            HILOG_WARN(HILOG_MODULE_ACE, "border and padding size should not less than 0");
+        }
+        int16_t contentWidth = width - (uiView.GetStyle(STYLE_BORDER_WIDTH) * borderNum) -
+                               uiView.GetStyle(STYLE_PADDING_LEFT) - uiView.GetStyle(STYLE_PADDING_RIGHT);
+        if (contentWidth <= 0) {
+            HILOG_WARN(HILOG_MODULE_ACE,
+                "component width can not include padding and border width, padding and border will be set 0");
+            uiView.SetStyle(STYLE_BORDER_WIDTH, 0);
+            uiView.SetStyle(STYLE_PADDING_LEFT, 0);
+            uiView.SetStyle(STYLE_PADDING_RIGHT, 0);
+            uiView.SetWidth(width);
+        } else {
+            uiView.SetWidth(contentWidth);
+        }
+    }
+}
+
+bool Component::AdaptBoxSizing() const
 {
     UIView *uiView = GetComponentRootView();
     if (uiView == nullptr) {
         return false;
     }
-    // set view height and width
-    uint8_t borderNum = 2;
-    if (height_ >= 0) {
-        // as uiView->GetStyle(STYLE_PADDING_TOP) and uiView->GetStyle(STYLE_PADDING_BOTTOM) is defined
-        // as uint16_t, so do not need to judge whether less than 0
-        if (uiView->GetStyle(STYLE_BORDER_WIDTH) < 0) {
-            HILOG_WARN(HILOG_MODULE_ACE, "border and padding size should not less than 0");
-        }
-        int16_t contentHeight = height_ - (uiView->GetStyle(STYLE_BORDER_WIDTH) * borderNum) -
-                                uiView->GetStyle(STYLE_PADDING_TOP) - uiView->GetStyle(STYLE_PADDING_BOTTOM);
-        if (contentHeight <= 0) {
-            HILOG_WARN(HILOG_MODULE_ACE,
-                "component height can not include padding and border width, padding and border will be set 0");
-            uiView->SetStyle(STYLE_BORDER_WIDTH, 0);
-            uiView->SetStyle(STYLE_PADDING_TOP, 0);
-            uiView->SetStyle(STYLE_PADDING_BOTTOM, 0);
-            uiView->SetHeight(height_);
-        } else {
-            uiView->SetHeight(contentHeight);
-        }
-    }
-    if (width_ >= 0) {
-        if (uiView->GetStyle(STYLE_BORDER_WIDTH) < 0) {
-            HILOG_WARN(HILOG_MODULE_ACE, "border and padding size should not less than 0");
-        }
-        int16_t contentWidth = width_ - (uiView->GetStyle(STYLE_BORDER_WIDTH) * borderNum) -
-                               uiView->GetStyle(STYLE_PADDING_LEFT) - uiView->GetStyle(STYLE_PADDING_RIGHT);
-        if (contentWidth <= 0) {
-            HILOG_WARN(HILOG_MODULE_ACE,
-                "component width can not include padding and border width, padding and border will be set 0");
-            uiView->SetStyle(STYLE_BORDER_WIDTH, 0);
-            uiView->SetStyle(STYLE_PADDING_LEFT, 0);
-            uiView->SetStyle(STYLE_PADDING_RIGHT, 0);
-            uiView->SetWidth(width_);
-        } else {
-            uiView->SetWidth(contentWidth);
-        }
-    }
+    // apply aligned top and left
+    ApplyAlignedPosition(*uiView);
+    // apply aligned magin
+    ApplyAlignedMargin(*uiView);
+    // adjust the box sizing
+    AdapteBoxRectArea(*uiView);
     return true;
 }
 
@@ -354,8 +505,7 @@ bool Component::ApplyStyle(const AppStyleItem *style)
         // one private style get matched, no need to try private style ones
         return true;
     }
-    applyResult = ApplyCommonStyle(*uiView, style);
-    return applyResult;
+    return ApplyCommonStyle(*uiView, style);
 }
 
 /*
@@ -393,11 +543,11 @@ bool Component::ApplyCommonStyle(UIView &view, const AppStyleItem *style)
 
     switch (styleNameId) {
         case K_HEIGHT: {
-            SetHeight(style);
+            GetDimensionFromStyle(height_, *style);
             break;
         }
         case K_WIDTH: {
-            SetWidth(style);
+            GetDimensionFromStyle(width_, *style);
             break;
         }
         case K_DISPLAY: {
@@ -405,23 +555,26 @@ bool Component::ApplyCommonStyle(UIView &view, const AppStyleItem *style)
             break;
         }
         case K_MARGIN: {
-            SetMargin(view, *style);
+            GetDimensionFromStyle(marginBottom_, *style);
+            GetDimensionFromStyle(marginLeft_, *style);
+            GetDimensionFromStyle(marginRight_, *style);
+            GetDimensionFromStyle(marginTop_, *style);
             break;
         }
         case K_MARGIN_BOTTOM: {
-            SetBottomMargin(view, *style);
+            GetDimensionFromStyle(marginBottom_, *style);
             break;
         }
         case K_MARGIN_LEFT: {
-            SetLeftMargin(view, *style);
+            GetDimensionFromStyle(marginLeft_, *style);
             break;
         }
         case K_MARGIN_RIGHT: {
-            SetRightMargin(view, *style);
+            GetDimensionFromStyle(marginRight_, *style);
             break;
         }
         case K_MARGIN_TOP: {
-            SetTopMargin(view, *style);
+            GetDimensionFromStyle(marginTop_, *style);
             break;
         }
         case K_PADDING:
@@ -465,11 +618,11 @@ bool Component::ApplyCommonStyle(UIView &view, const AppStyleItem *style)
             break;
         }
         case K_LEFT: {
-            SetLeft(view, style);
+            GetDimensionFromStyle(left_, *style);
             break;
         }
         case K_TOP: {
-            SetTop(view, style);
+            GetDimensionFromStyle(top_, *style);
             break;
         }
         case K_ANIMATION_DURATION: {
@@ -496,6 +649,10 @@ bool Component::ApplyCommonStyle(UIView &view, const AppStyleItem *style)
             SetAnimationKeyFrames(view, style);
             break;
         }
+        case K_OPACITY: {
+            SetOpacity(view, *style);
+            break;
+        }
         default: {
             return false;
         }
@@ -524,29 +681,18 @@ void Component::ParseOptions()
         return;
     }
 
-    jerry_value_t attrsPropValue = jerryx_get_property_str(options_, ATTR_ATTRS);
-    const char * const attrEvent = "on";
-    jerry_value_t eventPropValue = jerryx_get_property_str(options_, attrEvent);
-
-    if (!jerry_value_is_undefined(attrsPropValue)) {
-        START_TRACING(RENDER_PARSE_ATTR);
-        ParseAttrs(attrsPropValue);
-        STOP_TRACING();
-    }
-
-    if (!jerry_value_is_undefined(eventPropValue)) {
-        START_TRACING(RENDER_PARSE_EVENT);
-        ParseEvent(eventPropValue);
-        STOP_TRACING();
-    }
-    ReleaseJerryValue(eventPropValue, attrsPropValue, VA_ARG_END_FLAG);
+    START_TRACING(RENDER_PARSE_ATTR);
+    ParseAttrs();
+    STOP_TRACING();
+    START_TRACING(RENDER_PARSE_EVENT);
+    ParseEvents();
+    STOP_TRACING();
 }
 
 void Component::SetAnimationKeyFrames(const UIView &view, const AppStyleItem *styleItem)
 {
     if (trans_ == nullptr) {
         trans_ = new TransitionParams();
-
         if (trans_ == nullptr) {
             HILOG_ERROR(HILOG_MODULE_ACE, "create TransitionParams object error");
             return;
@@ -594,7 +740,7 @@ void Component::SetAnimationKeyFrames(const AppStyleItem *item)
             return;
         }
         size_t valLength = strlen(itemValue);
-        if ((valLength <= 0) || (valLength >= UINT8_MAX)) {
+        if ((valLength == 0) || (valLength >= UINT8_MAX)) {
             item = item->GetNext();
             continue;
         }
@@ -784,7 +930,7 @@ void Component::RecordAnimation()
             AddAnimationToList(curTransitionImpl_);
             isAnimationKeyFramesSet_ = false;
             // special for "if" situation, if g_isAnimatorStarted is started means the page has started all the
-            // animators, and the current component is created by "if" situation, so the animator can start immediattly
+            // animators, and the current component is created by "if" situation, so the animator can start immediately
             if (g_isAnimatorStarted) {
                 curTransitionImpl_->Start();
             }
@@ -851,8 +997,7 @@ int32_t Component::GetAnimatorValue(char *animatorValue, const int8_t index, boo
         return 0;
     }
 
-    long convertedValue = isOpacity ? (long)((strtod(value, nullptr) * ALPHA_MAX)) :
-                                      strtol(value, nullptr, DEC);
+    long convertedValue = isOpacity ? (long)((strtod(value, nullptr) * ALPHA_MAX)) : strtol(value, nullptr, DEC);
     if (TransitionImpl::IsEndWith(value, "rad")) {
         uint8_t degConversionRate = 57;
         convertedValue = convertedValue * degConversionRate;
@@ -860,12 +1005,11 @@ int32_t Component::GetAnimatorValue(char *animatorValue, const int8_t index, boo
     return convertedValue;
 }
 
-/**
- * check if the pass-in attrValue is an Expression, if it is, calculate it and bind watcher instance.
- * if it's not, just return the passed-in attrValue itself.
- */
-jerry_value_t Component::ParseExpression(jerry_value_t attrKey, jerry_value_t attrValue)
+jerry_value_t Component::AddWatcherItem(const jerry_value_t attrKey, const jerry_value_t attrValue, bool isLazyLoading)
 {
+#ifdef FEATURE_LAZY_LOADING_MODULE
+    isLazyLoading = true;
+#endif
     jerry_value_t options = jerry_create_object();
     JerrySetNamedProperty(options, ARG_WATCH_EL, nativeElement_);
     JerrySetNamedProperty(options, ARG_WATCH_ATTR, attrKey);
@@ -875,17 +1019,25 @@ jerry_value_t Component::ParseExpression(jerry_value_t attrKey, jerry_value_t at
         HILOG_ERROR(HILOG_MODULE_ACE, "Failed to create Watcher instance.");
     } else {
         InsertWatcherCommon(watchersHead_, watcher);
-        propValue = jerryx_get_property_str(watcher, "_lastValue");
+        if (!isLazyLoading) {
+            propValue = jerryx_get_property_str(watcher, "_lastValue");
+        }
     }
     jerry_release_value(options);
     return propValue;
 }
 
-void Component::ParseAttrs(jerry_value_t attrs)
+void Component::ParseAttrs()
 {
+    jerry_value_t attrs = jerryx_get_property_str(options_, ATTR_ATTRS);
+    if (jerry_value_is_undefined(attrs)) {
+        return;
+    }
+
     jerry_value_t attrKeys = jerry_get_object_keys(attrs);
     if (jerry_value_is_undefined(attrKeys)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "None attributes to parse.");
+        jerry_release_value(attrs);
         return;
     }
 
@@ -898,7 +1050,14 @@ void Component::ParseAttrs(jerry_value_t attrs)
 
         if (jerry_value_is_function(attrValue)) {
             START_TRACING_WITH_COMPONENT_NAME(SET_ATTR_PARSE_EXPRESSION, componentName_);
-            newAttrValue = ParseExpression(attrKey, attrValue);
+#ifdef FEATURE_LAZY_LOADING_MODULE
+            newAttrValue = CallJSFunction(attrValue, viewModel_, nullptr, 0);
+            JsAppContext *context = JsAppContext::GetInstance();
+            LazyLoadManager *lazyLoadManager = const_cast<LazyLoadManager *>(context->GetLazyLoadManager());
+            lazyLoadManager->AddLazyLoadWatcher(nativeElement_, attrKey, attrValue);
+#else
+            newAttrValue = AddWatcherItem(attrKey, attrValue);
+#endif
             STOP_TRACING();
         }
 
@@ -921,11 +1080,12 @@ void Component::ParseAttrs(jerry_value_t attrs)
         ReleaseJerryValue(attrKey, attrValue, VA_ARG_END_FLAG);
     }
     jerry_release_value(attrKeys);
+    jerry_release_value(attrs);
 }
 
-void Component::SetClickEventListener(UIView &view, const jerry_value_t eventFunc, const uint16_t eventTypeId)
+void Component::SetClickEventListener(UIView &view, const jerry_value_t eventFunc, bool isStopPropagation)
 {
-    onClickListener_ = new ViewOnClickListener(eventFunc, eventTypeId);
+    onClickListener_ = new ViewOnClickListener(eventFunc, isStopPropagation);
     if (onClickListener_ == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "click listener create failed");
         return;
@@ -1002,9 +1162,9 @@ void Component::SetKeyBoardEventListener(jerry_value_t eventFunc, uint16_t event
 }
 #endif
 
-void Component::SetLongPressEventListener(UIView &view, const jerry_value_t eventFunc, const uint16_t eventTypeId)
+void Component::SetLongPressEventListener(UIView &view, const jerry_value_t eventFunc, bool isStopPropagation)
 {
-    onLongPressListener_ = new ViewOnLongPressListener(eventFunc, eventTypeId);
+    onLongPressListener_ = new ViewOnLongPressListener(eventFunc, isStopPropagation);
     if (onLongPressListener_ == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "long press listener create failed");
         return;
@@ -1014,9 +1174,9 @@ void Component::SetLongPressEventListener(UIView &view, const jerry_value_t even
     view.SetTouchable(true);
 }
 
-void Component::SetSwipeEventListener(UIView &view, jerry_value_t eventFunc)
+void Component::SetSwipeEventListener(UIView &view, jerry_value_t eventFunc, bool isStopPropagation)
 {
-    onSwipeListener_ = new ViewOnSwipeListener(eventFunc);
+    onSwipeListener_ = new ViewOnSwipeListener(eventFunc, isStopPropagation);
     if (onSwipeListener_ == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "swipe listener create failed");
         return;
@@ -1029,30 +1189,43 @@ void Component::SetSwipeEventListener(UIView &view, jerry_value_t eventFunc)
 }
 
 // default implementation
-bool Component::RegisterEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
+bool Component::RegisterEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation)
 {
-    UIView *uiView = GetComponentRootView();
-    if ((uiView == nullptr) || !KeyParser::IsKeyValid(eventTypeId) || IS_UNDEFINED(funcValue)) {
+    if (!KeyParser::IsKeyValid(eventTypeId) || IS_UNDEFINED(funcValue)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "register event listener failed cause by invalid attribute name or value.");
         return false;
     }
 
-    bool registerResult = RegisterPrivateEventListener(eventTypeId, funcValue);
+    UIView *uiView = GetComponentRootView();
+    if (uiView == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "register event listener failed cause by empty view.");
+        return false;
+    }
+
+    bool registerResult = RegisterPrivateEventListener(eventTypeId, funcValue, isStopPropagation);
     if (registerResult) {
         return true;
     }
 
-    return RegisterCommonEventListener(*uiView, eventTypeId, funcValue);
+    return RegisterCommonEventListener(*uiView, eventTypeId, funcValue, isStopPropagation);
 }
 
-bool Component::RegisterCommonEventListener(UIView &view, const uint16_t eventTypeId, const jerry_value_t funcValue)
+bool Component::RegisterCommonEventListener(UIView &view,
+                                            const uint16_t eventTypeId,
+                                            const jerry_value_t funcValue,
+                                            bool isStopPropagation)
 {
     switch (eventTypeId) {
         case K_CLICK: {
-            SetClickEventListener(view, funcValue, eventTypeId);
+            SetClickEventListener(view, funcValue, isStopPropagation);
             break;
         }
         case K_LONGPRESS: {
-            SetLongPressEventListener(view, funcValue, eventTypeId);
+            SetLongPressEventListener(view, funcValue, isStopPropagation);
+            break;
+        }
+        case K_SWIPE: {
+            SetSwipeEventListener(view, funcValue, isStopPropagation);
             break;
         }
 #ifdef JS_TOUCH_EVENT_SUPPORT
@@ -1077,10 +1250,6 @@ bool Component::RegisterCommonEventListener(UIView &view, const uint16_t eventTy
             break;
         }
 #endif
-        case K_SWIPE: {
-            SetSwipeEventListener(view, funcValue);
-            break;
-        }
         default: {
             return false;
         }
@@ -1102,13 +1271,13 @@ void Component::ReleaseCommonEventListeners()
     ACE_DELETE(onSwipeListener_);
 }
 
-void Component::AppendDescriptorOrElements(UIViewGroup *viewGroup, const JSValue descriptorOrElements)
+void Component::AppendDescriptorOrElements(Component *parent, const JSValue descriptorOrElements)
 {
     if (!JSUndefined::Is(descriptorOrElements)) {
         uint16_t size = JSArray::Length(descriptorOrElements);
         for (uint16_t idx = 0; idx < size; ++idx) {
             JSValue descriptorOrElement = JSArray::Get(descriptorOrElements, idx);
-            AppendDescriptorOrElement(viewGroup, descriptorOrElement);
+            AppendDescriptorOrElement(parent, descriptorOrElement);
             JSRelease(descriptorOrElement);
         }
     }
@@ -1138,65 +1307,73 @@ void Component::InvalidateIfNeeded(uint16_t attrKeyId, bool invalidateSelf) cons
     }
 }
 
-void Component::ParseEvent(jerry_value_t events)
+void Component::ParseEvents()
 {
-    jerry_value_t eventKeys = jerry_get_object_keys(events);
-    if (jerry_value_is_undefined(eventKeys)) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "None event to parse.");
+    /*
+     New JS bundle:
+     _c('div', {
+         catchBubbleEvents: {
+             longpress: _vm.handleLongPress
+         },
+         onBubbleEvents: {
+             swipe: _vm.handleSwipe
+         }
+     });
+
+     The events bound to 'catchBubbleEvents' field should be stoped propagation,
+     but the events bound to 'onBubbleEvents' field should not.
+
+     Old JS bundle:
+     _('div', {
+         on: {
+             click: _vm.handleClick
+         },
+     });
+     The old framework does not support the event bubble mechanism.
+     Therefore, the events bound to 'on' field are processed as bound to 'onBubbleEvents' field.
+    */
+    BindEvents("on", true);
+    BindEvents("catchBubbleEvents", true);
+    BindEvents("onBubbleEvents", false);
+}
+
+void Component::BindEvents(const char *type, bool isStopPropagation)
+{
+    JSValue events = JSObject::Get(options_, type);
+    if (JSUndefined::Is(events)) {
+        JSRelease(events);
         return;
     }
-
-    uint16_t length = jerry_get_array_length(eventKeys);
+    JSValue keys = JSObject::Keys(events);
+    if (JSUndefined::Is(keys)) {
+        JSRelease(keys);
+        JSRelease(events);
+        return;
+    }
+    uint16_t length = JSArray::Length(keys);
     if (length == 0) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "None event to parse.");
-        jerry_release_value(eventKeys);
+        JSRelease(keys);
+        JSRelease(events);
         return;
     }
+    for (uint16_t idx = 0; idx < length; ++idx) {
+        JSValue key = JSArray::Get(keys, idx);
+        JSValue func = JSObject::Get(events, key);
 
-    uint16_t eventTypeStrLen = 0;
-    for (uint16_t index = 0; index < length; ++index) {
-        jerry_value_t eventKey = jerry_get_property_by_index(eventKeys, index);
-        jerry_value_t eventFunc = jerry_get_property(events, eventKey);
-
-        char *eventType = MallocStringOf(eventKey, &eventTypeStrLen);
-        if (eventType != nullptr) {
-            if (eventTypeStrLen != 0) {
-                uint16_t eventTypeId = KeyParser::ParseKeyId(eventType, eventTypeStrLen);
-                bool isSuccess = RegisterEventListener(eventTypeId, eventFunc);
-                if (!isSuccess) {
-                    HILOG_ERROR(HILOG_MODULE_ACE, "Register event listener error.");
-                }
+        uint16_t keyLength = 0;
+        char *keyName = MallocStringOf(key, &keyLength);
+        if (keyLength != 0) {
+            uint16_t keyId = KeyParser::ParseKeyId(keyName, keyLength);
+            if (!RegisterEventListener(keyId, func, isStopPropagation)) {
+                HILOG_ERROR(HILOG_MODULE_ACE, "Register event listener error.");
             }
-            ace_free(eventType);
-            eventType = nullptr;
         }
-        ReleaseJerryValue(eventKey, eventFunc, VA_ARG_END_FLAG);
+        ACE_FREE(keyName);
+        JSRelease(func);
+        JSRelease(key);
     }
-    jerry_release_value(eventKeys);
-}
-
-// set component's left coordinate relative to its parent
-void Component::SetLeft(UIView &view, const AppStyleItem *styleItem) const
-{
-    int16_t left = GetStylePixelValue(styleItem);
-    view.SetX(left);
-}
-
-// set component's top coordinate relative to its parent
-void Component::SetTop(UIView &view, const AppStyleItem *styleItem) const
-{
-    int16_t top = GetStylePixelValue(styleItem);
-    view.SetY(top);
-}
-
-void Component::SetHeight(const AppStyleItem *styleItem)
-{
-    height_ = GetStylePixelValue(styleItem);
-}
-
-void Component::SetWidth(const AppStyleItem *styleItem)
-{
-    width_ = GetStylePixelValue(styleItem);
+    JSRelease(keys);
+    JSRelease(events);
 }
 
 void Component::SetVisible(UIView &view, const AppStyleItem *styleItem) const
@@ -1211,7 +1388,7 @@ void Component::SetVisible(UIView &view, const AppStyleItem *styleItem) const
     }
 
     uint16_t valueId = KeyParser::ParseKeyId(strValue, GetStyleStrValueLen(styleItem));
-    view.SetVisible((valueId == K_NONE) ? false : true);
+    view.SetVisible(valueId != K_NONE);
 }
 
 void Component::SetBackgroundColor(UIView &view, const AppStyleItem &styleItem) const
@@ -1232,38 +1409,50 @@ void Component::SetOpacity(UIView &view, const AppStyleItem &styleItem) const
         return;
     }
     double opacity = styleItem.GetFloatingValue();
-    view.SetStyle(STYLE_BACKGROUND_OPA, view.GetStyle(STYLE_BACKGROUND_OPA) * opacity);
-    view.SetStyle(STYLE_IMAGE_OPA, view.GetStyle(STYLE_IMAGE_OPA) * opacity);
-    view.SetStyle(STYLE_LINE_OPA, view.GetStyle(STYLE_LINE_OPA) * opacity);
-    view.SetStyle(STYLE_TEXT_OPA, view.GetStyle(STYLE_TEXT_OPA) * opacity);
+    const double opacityMin = 0.0;
+    const double opacityMax = 1.0;
+    if (opacity < opacityMin) {
+        opacity = opacityMin;
+    } else if (opacity > opacityMax) {
+        opacity = opacityMax;
+    }
+    view.SetOpaScale(opacity * OPA_OPAQUE);
 }
 
-void Component::SetMargin(UIView &view, const AppStyleItem &styleItem) const
+void Component::SetMargin(UIView &view) const
 {
-    SetLeftMargin(view, styleItem);
-    SetTopMargin(view, styleItem);
-    SetRightMargin(view, styleItem);
-    SetBottomMargin(view, styleItem);
+    SetLeftMargin(view);
+    SetTopMargin(view);
+    SetRightMargin(view);
+    SetBottomMargin(view);
 }
 
-void Component::SetLeftMargin(UIView &view, const AppStyleItem &styleItem) const
+void Component::SetLeftMargin(UIView &view) const
 {
-    view.SetStyle(STYLE_MARGIN_LEFT, GetStylePixelValue(&styleItem));
+    if (marginLeft_.type == DimensionType::TYPE_PIXEL) {
+        view.SetStyle(STYLE_MARGIN_LEFT, marginLeft_.value.pixel);
+    }
 }
 
-void Component::SetTopMargin(UIView &view, const AppStyleItem &styleItem) const
+void Component::SetTopMargin(UIView &view) const
 {
-    view.SetStyle(STYLE_MARGIN_TOP, GetStylePixelValue(&styleItem));
+    if (marginTop_.type == DimensionType::TYPE_PIXEL) {
+        view.SetStyle(STYLE_MARGIN_TOP, marginTop_.value.pixel);
+    }
 }
 
-void Component::SetRightMargin(UIView &view, const AppStyleItem &styleItem) const
+void Component::SetRightMargin(UIView &view) const
 {
-    view.SetStyle(STYLE_MARGIN_RIGHT, GetStylePixelValue(&styleItem));
+    if (marginRight_.type == DimensionType::TYPE_PIXEL) {
+        view.SetStyle(STYLE_MARGIN_RIGHT, marginRight_.value.pixel);
+    }
 }
 
-void Component::SetBottomMargin(UIView &view, const AppStyleItem &styleItem) const
+void Component::SetBottomMargin(UIView &view) const
 {
-    view.SetStyle(STYLE_MARGIN_BOTTOM, GetStylePixelValue(&styleItem));
+    if (marginBottom_.type == DimensionType::TYPE_PIXEL) {
+        view.SetStyle(STYLE_MARGIN_BOTTOM, marginBottom_.value.pixel);
+    }
 }
 
 void Component::SetPadding(UIView &view, const AppStyleItem &styleItem) const
@@ -1357,7 +1546,7 @@ void Component::HandleListForDireactive()
     }
 }
 
-void Component::AppendChildren(UIViewGroup *viewGroup)
+void Component::AppendChildren(Component *parent)
 {
     if (JSUndefined::Is(descriptors_)) {
         return;
@@ -1368,7 +1557,7 @@ void Component::AppendChildren(UIViewGroup *viewGroup)
     for (uint16_t index = 0; index < size; ++index) {
         JSValue descriptorOrElement = JSArray::Get(descriptors_, index);
         if (!JSUndefined::Is(descriptorOrElement)) {
-            bool isDescriptor = AppendDescriptorOrElement(viewGroup, descriptorOrElement);
+            bool isDescriptor = AppendDescriptorOrElement(parent, descriptorOrElement);
             if (isDescriptor) {
                 CreateDirectiveWatcher(descriptorOrElement);
             }
@@ -1377,34 +1566,34 @@ void Component::AppendChildren(UIViewGroup *viewGroup)
     }
 }
 
-bool Component::AppendDescriptorOrElement(UIViewGroup *viewGroup, const jerry_value_t descriptorOrElement)
+bool Component::AppendDescriptorOrElement(Component *parent, const jerry_value_t descriptorOrElement)
 {
     if (DescriptorUtils::IsIfDescriptor(descriptorOrElement)) {
-        AppendIfDescriptor(viewGroup, descriptorOrElement);
+        AppendIfDescriptor(parent, descriptorOrElement);
         return true;
     }
 
     if (DescriptorUtils::IsForDescriptor(descriptorOrElement)) {
-        AppendForDescriptor(viewGroup, descriptorOrElement);
+        AppendForDescriptor(parent, descriptorOrElement);
         return true;
     }
-    AppendElement(viewGroup, descriptorOrElement);
+    AppendElement(parent, descriptorOrElement);
     return false;
 }
 
-void Component::AppendIfDescriptor(UIViewGroup *viewGroup, const jerry_value_t descriptor)
+void Component::AppendIfDescriptor(Component *parent, const jerry_value_t descriptor)
 {
     bool isShown = DescriptorUtils::IsIfDescriptorShown(descriptor);
     if (isShown) {
         JSValue decriptorOrElement = DescriptorUtils::GetDescriptorRendered(descriptor);
         if (!JSUndefined::Is(decriptorOrElement)) {
-            AppendDescriptorOrElement(viewGroup, decriptorOrElement);
+            AppendDescriptorOrElement(parent, decriptorOrElement);
             JSRelease(decriptorOrElement);
         } else {
             // Don't release decriptorOrElement
             // because decriptorOrElement is the result of jerry_create_object but jerry_get_property
             decriptorOrElement = DescriptorUtils::RenderIfDescriptor(descriptor);
-            AppendDescriptorOrElement(viewGroup, decriptorOrElement);
+            AppendDescriptorOrElement(parent, decriptorOrElement);
 
             // does decriptorOrElement need to be release if decriptorOrElement is descriptor
         }
@@ -1412,21 +1601,24 @@ void Component::AppendIfDescriptor(UIViewGroup *viewGroup, const jerry_value_t d
         DescriptorUtils::DelIfDescriptorRendered(descriptor);
     }
 }
-void Component::AppendForDescriptor(UIViewGroup *viewGroup, const jerry_value_t descriptor)
+void Component::AppendForDescriptor(Component *parent, const jerry_value_t descriptor)
 {
     JSValue descriptorOrelements = DescriptorUtils::GetDescriptorRendered(descriptor);
     if (!JSUndefined::Is(descriptorOrelements)) {
-        AppendDescriptorOrElements(viewGroup, descriptorOrelements);
+        AppendDescriptorOrElements(parent, descriptorOrelements);
         JSRelease(descriptorOrelements);
     } else {
         // Don't release decriptorOrElements
         // because decriptorOrElements is the result of jerry_create_object but jerry_get_property
         descriptorOrelements = DescriptorUtils::RenderForDescriptor(descriptor);
-        AppendDescriptorOrElements(viewGroup, descriptorOrelements);
+        AppendDescriptorOrElements(parent, descriptorOrelements);
     }
 }
-void Component::AppendElement(UIViewGroup *viewGroup, const jerry_value_t element)
+void Component::AppendElement(Component *parent, const jerry_value_t element)
 {
+    if (parent == nullptr) {
+        return;
+    }
     Component *component = nullptr;
     if (!JSObject::GetNativePointer(element, reinterpret_cast<void **>(&component))) {
         // if get binding component native pointer failed from a child element, just release that element
@@ -1436,8 +1628,93 @@ void Component::AppendElement(UIViewGroup *viewGroup, const jerry_value_t elemen
         return;
     }
     JSArray::Push(children_, element);
-    viewGroup->Add(component->GetComponentRootView());
+    parent->AddChild(component);
 }
+
+/*
+ * NOTE: add one child will not attach the native view immediately, but
+ * when removing one child, the child native view will be detached immediately
+ */
+void Component::AddChild(Component *childNode)
+{
+    if (childNode == nullptr) {
+        return;
+    }
+
+    if (childHead_ == nullptr) {
+        childNode->SetParent(this);
+        childNode->SetNextSibling(nullptr);
+        childHead_ = childNode;
+        return;
+    }
+
+    // find the tail
+    Component *temp = childHead_;
+    while ((temp != nullptr) && (temp->GetNextSibling() != nullptr)) {
+        if (temp == childNode) {
+            // already added in the list, drop
+            return;
+        }
+        temp = const_cast<Component *>(temp->GetNextSibling());
+    }
+    childNode->SetParent(this);
+    temp->SetNextSibling(childNode);
+    childNode->SetNextSibling(nullptr);
+}
+
+void Component::RemoveChild(Component *childNode)
+{
+    if ((childNode == nullptr) || (childHead_ == nullptr)) {
+        return;
+    }
+
+    UIView *childNativeView = childNode->GetComponentRootView();
+    UIViewGroup *parentView = reinterpret_cast<UIViewGroup *>(GetComponentRootView());
+    if (childNativeView == nullptr || parentView == nullptr) {
+        return;
+    }
+
+    if (childNode == childHead_) {
+        // it is the head
+        Component *next = const_cast<Component *>(childHead_->GetNextSibling());
+        childNode->SetNextSibling(nullptr);
+        childNode->SetParent(nullptr);
+        childHead_ = next;
+        parentView->Remove(childNativeView);
+        return;
+    }
+
+    // find the target node's pre one
+    Component *temp = childHead_;
+    while (temp != nullptr) {
+        if (temp->GetNextSibling() == childNode) {
+            // found it
+            break;
+        }
+        temp = const_cast<Component *>(temp->GetNextSibling());
+    }
+    if (temp == nullptr) {
+        // not found
+        return;
+    }
+
+    // the head itself is the last one
+    if (temp == childHead_) {
+        childHead_ = nullptr;
+    }
+    temp->SetNextSibling(nullptr);
+    childNode->SetNextSibling(nullptr);
+    childNode->SetParent(nullptr);
+    parentView->Remove(childNativeView);
+}
+
+void Component::RemoveAllChildren()
+{
+    while (childHead_ != nullptr) {
+        RemoveChild(childHead_);
+    }
+}
+
 void Component::CreateDirectiveWatcher(jerry_value_t descriptor)
 {
     JSValue watcher = DescriptorUtils::CreateDescriptorWatcher(nativeElement_, descriptor);
@@ -1445,17 +1722,42 @@ void Component::CreateDirectiveWatcher(jerry_value_t descriptor)
         InsertWatcherCommon(watchersHead_, watcher);
     }
 }
-void Component::HandleChildrenChange(jerry_value_t descriptor)
-{
-    UIViewGroup *viewGroup = reinterpret_cast<UIViewGroup *>(GetComponentRootView());
 
-    if (viewGroup != nullptr) {
-        viewGroup->RemoveAll();
-    } else {
-        HILOG_ERROR(HILOG_MODULE_ACE, "Get root component error");
+void Component::BuildViewTree(Component *currComponent, Component *parent, ConstrainedParameter &parentParameter)
+{
+    if (currComponent == nullptr) {
         return;
     }
 
+    // align self dimension
+    currComponent->AlignDimensions(parentParameter);
+    // refresh rect (border box sizing -> content box sizing)
+    currComponent->AdaptBoxSizing();
+    // attach to parent
+    if (parent != nullptr) {
+        parent->AttachView(currComponent);
+        // notify view has been attached to tree, it means the parent's size is already calculated out
+        currComponent->OnViewAttached();
+    }
+
+    Component *child = const_cast<Component *>(currComponent->GetChildHead());
+    if (child == nullptr) {
+        return;
+    }
+    // the child only can layout in the content area of parent
+    ConstrainedParameter alignParameter;
+    currComponent->GetConstrainedParam(alignParameter);
+    while (child != nullptr) {
+        BuildViewTree(child, currComponent, alignParameter);
+        child = const_cast<Component *>(child->GetNextSibling());
+    }
+    // consider how to avoid layout repeatly, for example: div - div -- div
+    currComponent->LayoutChildren();
+}
+
+void Component::HandleChildrenChange(jerry_value_t descriptor)
+{
+    RemoveAllChildren();
     if (!JSUndefined::Is(children_)) {
         JSRelease(children_);
         children_ = JSArray::Create(0);
@@ -1468,49 +1770,54 @@ void Component::HandleChildrenChange(jerry_value_t descriptor)
             continue;
         }
         if (descriptorOrElement == descriptor) {
-            UpdateDescriptor(viewGroup, descriptorOrElement);
+            UpdateDescriptor(this, descriptorOrElement);
         } else {
-            ReappendDescriptorOrElement(viewGroup, descriptorOrElement);
+            ReappendDescriptorOrElement(this, descriptorOrElement);
         }
         JSRelease(descriptorOrElement);
     }
 
-    viewGroup->LayoutChildren();
-    viewGroup->Invalidate();
+    Component *parent = const_cast<Component *>(GetParent());
+    ConstrainedParameter parentParam;
+    Component *target = (parent == nullptr) ? this : parent;
+    target->GetConstrainedParam(parentParam);
+    BuildViewTree(this, nullptr, parentParam);
+    target->LayoutChildren();
+    target->Invalidate();
 }
 
-void Component::UpdateDescriptor(UIViewGroup *viewGroup, const jerry_value_t descriptor)
+void Component::UpdateDescriptor(Component *parent, const jerry_value_t descriptor)
 {
     if (DescriptorUtils::IsIfDescriptor(descriptor)) {
-        AppendIfDescriptor(viewGroup, descriptor);
+        AppendIfDescriptor(parent, descriptor);
     } else if (DescriptorUtils::IsForDescriptor(descriptor)) {
         // Release descriptor last rendered
         DescriptorUtils::DelForDescriptorRendered(descriptor);
 
         // Re-render descriptor
         JSValue descriptorOrElements = DescriptorUtils::RenderForDescriptor(descriptor);
-        AppendDescriptorOrElements(viewGroup, descriptorOrElements);
+        AppendDescriptorOrElements(parent, descriptorOrElements);
     } else {
         // never
     }
 }
 
-void Component::ReappendDescriptorOrElement(UIViewGroup *viewGroup, const jerry_value_t descriptor)
+void Component::ReappendDescriptorOrElement(Component *parent, const jerry_value_t descriptor)
 {
     if (DescriptorUtils::IsIfDescriptor(descriptor)) {
         JSValue descriptorOrElement = DescriptorUtils::GetDescriptorRendered(descriptor);
         if (!JSUndefined::Is(descriptorOrElement)) {
-            AppendDescriptorOrElement(viewGroup, descriptor);
+            AppendDescriptorOrElement(parent, descriptor);
         }
         JSRelease(descriptorOrElement);
     } else if (DescriptorUtils::IsForDescriptor(descriptor)) {
         JSValue descriptorOrElements = DescriptorUtils::GetDescriptorRendered(descriptor);
         if (!JSUndefined::Is(descriptorOrElements)) {
-            AppendDescriptorOrElements(viewGroup, descriptorOrElements);
+            AppendDescriptorOrElements(parent, descriptorOrElements);
         }
         JSRelease(descriptorOrElements);
     } else {
-        AppendElement(viewGroup, descriptor);
+        AppendElement(parent, descriptor);
     }
 }
 
@@ -1550,12 +1857,77 @@ bool Component::GetStyleColorValue(const AppStyleItem *style, uint32_t &color, u
         color = style->GetNumValue();
         alpha = OPA_OPAQUE;
         return true;
-    } else if (style->GetValueType() == STYLE_PROP_VALUE_TYPE_STRING) {
-        return ParseColor(style->GetStrValue(), color, alpha);
-    } else {
-        HILOG_ERROR(HILOG_MODULE_ACE, "invalid color format!");
-        return false;
     }
+    if (style->GetValueType() == STYLE_PROP_VALUE_TYPE_STRING) {
+        return ParseColor(style->GetStrValue(), color, alpha);
+    }
+    HILOG_ERROR(HILOG_MODULE_ACE, "invalid color format!");
+    return false;
 }
+
+bool Component::HandleBackgroundImg(const AppStyleItem &styleItem, char *&pressedImage, char *&normalImage) const
+{
+    bool result = false;
+    if (styleItem.GetValueType() == STYLE_PROP_VALUE_TYPE_STRING) {
+        const char * const url = styleItem.GetStrValue();
+        char *filePath = CreatePathStrFromUrl(url);
+        if (filePath != nullptr) {
+            char *imagePath = JsAppContext::GetInstance()->GetResourcePath(filePath);
+            if (imagePath == nullptr) {
+                ace_free(filePath);
+                filePath = nullptr;
+                return result;
+            }
+#ifdef OHOS_ACELITE_PRODUCT_WATCH
+            // convert .png/jpeg/bmp to .bin subfix
+            CureImagePath(imagePath);
+#endif // OHOS_ACELITE_PRODUCT_WATCH
+            if ((styleItem.GetPseudoClassType() == PSEUDO_CLASS_ACTIVE) ||
+                (styleItem.GetPseudoClassType() == PSEUDO_CLASS_CHECKED)) {
+                // in case we don't free the buffer after using
+                ACE_FREE(pressedImage);
+                pressedImage = imagePath;
+            } else {
+                // in case we don't free the buffer after using
+                ACE_FREE(normalImage);
+                normalImage = imagePath;
+            }
+            ace_free(filePath);
+            filePath = nullptr;
+            result = true;
+        }
+    }
+    return result;
+}
+
+#ifdef FEATURE_ROTATION_API
+jerry_value_t Component::HandleRotationRequest(const jerry_value_t func,
+                                               const jerry_value_t dom,
+                                               const jerry_value_t args[],
+                                               const jerry_length_t size)
+{
+    UNUSED(func);
+    UIView *bindedView = ComponentUtils::GetViewFromBindingObject(dom);
+    if (bindedView == nullptr) {
+        return UNDEFINED;
+    }
+
+    // default action is to request the focus even user do not pass the argument
+    bool focusRequest = true;
+    if (args != nullptr && size > 0) {
+        if (!JerryGetBoolProperty(args[0], ATTR_NAME_FOCUS, focusRequest)) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "not bool argument passed, will clear the focus!");
+            focusRequest = false;
+        }
+    }
+    if (focusRequest) {
+        bindedView->RequestFocus();
+    } else {
+        bindedView->ClearFocus();
+    }
+
+    return UNDEFINED;
+}
+#endif // FEATURE_ROTATION_API
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/component.h b/frameworks/src/core/components/component.h
similarity index 69%
rename from src/core/components/component.h
rename to frameworks/src/core/components/component.h
index 705ff8f..d15dbb9 100755
--- a/src/core/components/component.h
+++ b/frameworks/src/core/components/component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -27,6 +27,41 @@
 
 namespace OHOS {
 namespace ACELite {
+enum DimensionType : uint8_t {
+    TYPE_UNKNOWN = 0,
+    TYPE_PIXEL,
+    TYPE_PERCENT,
+};
+
+union DimensionValue {
+    float percentage;
+    int16_t pixel;
+};
+
+struct Dimension : public MemoryHeap {
+    Dimension() : type(DimensionType::TYPE_UNKNOWN)
+    {
+        value.percentage = -1;
+    }
+    Dimension(float dValue, DimensionType dType)
+    {
+        value.percentage = dValue;
+        type = dType;
+    }
+    DimensionValue value;
+    DimensionType type;
+};
+
+/**
+ * @brief The ConstrainedParameter struct record the content rang limitation
+ */
+struct ConstrainedParameter : public MemoryHeap {
+    ConstrainedParameter() : maxWidth(0), maxHeight(0) {}
+    ConstrainedParameter(int16_t width, int16_t height) : maxWidth(width), maxHeight(height) {}
+    int16_t maxWidth;
+    int16_t maxHeight;
+};
+
 class Component : public MemoryHeap {
 public:
     ACE_DISALLOW_COPY_AND_MOVE(Component);
@@ -72,6 +107,18 @@ public:
      */
     virtual UIView *GetComponentRootView() const = 0;
 
+    /**
+     * @brief This is the entry to set all combined styles into one specific component, one default
+     * implementation is provided, which calls ApplyPrivateStyle() to try the component's private special
+     * style first, if one gets matched, the appling process ends, if not, common styles will be
+     * tried by calling ApplyCommonStyle() method.
+     *
+     * NOTE: The default implementation just apply styles into the ui view returned by GetComponentRootView(),
+     * if this doesn't meet your requirement, go ahead to override this whole function as you want.
+     *
+     * @return true if the given style gets matched and is set properly, false for otherwise.
+     */
+    virtual bool ApplyStyle(const AppStyleItem *style);
     /**
      * Call this to invalidate the views this component is holding, the default implementation is just to
      * invalidate the root view of the component, if the child class has special requirement, override this
@@ -104,10 +151,39 @@ public:
         return descriptors_;
     }
 
-    jerry_value_t ParseExpression(jerry_value_t attrKey, jerry_value_t attrValue);
+    jerry_value_t AddWatcherItem(const jerry_value_t attrKey, const jerry_value_t attrValue,
+                                    bool isLazyLoading = false);
 
     void HandleChildrenChange(jerry_value_t descriptor);
 
+    /**
+     * @brief AttachView call this function to link native views together to the tree
+     */
+    virtual void AttachView(const Component *child)
+    {
+        UNUSED(child);
+    }
+    /**
+     * @brief OnViewAttached called when the native view is attached to the tree
+     */
+    virtual void OnViewAttached() {}
+    virtual void LayoutChildren() {}
+    static void BuildViewTree(Component *currComponent, Component *parent, ConstrainedParameter &alignParameter);
+
+    const Component *GetParent() const
+    {
+        return parent_;
+    }
+
+    const Component *GetChildHead() const
+    {
+        return childHead_;
+    }
+
+    const Component *GetNextSibling() const
+    {
+        return nextSibling_;
+    }
     struct AnimationsNode : public MemoryHeap {
         TransitionImpl *transitionImpl;
         AnimationsNode *next;
@@ -117,6 +193,12 @@ public:
 
     static void HandlerAnimations();
     static void ReleaseAnimations();
+    /**
+     * @brief GetDimension return the dimension data, only width, height, margin, top and left are supported
+     * @param keyNameId the key ID for representing which dimension data is wanted
+     * @return the requested dimension data
+     */
+    const Dimension &GetDimension(uint16_t keyNameId) const;
 
 protected:
     void SetComponentName(uint16_t name)
@@ -128,7 +210,7 @@ protected:
 
     /**
      * @brief The child class can implement this function to do some initialization before the whole render process
-     * begining. See PostRender() also. The default implementation just does nothing.
+     * beginning. See PostRender() also. The default implementation just does nothing.
      */
     virtual void PreRender() {}
     /**
@@ -147,7 +229,7 @@ protected:
      * @brief This function will be called when UpdateView execute finished. See PreUpdate() also.
      * The default implementation just does nothing.
      */
-    virtual void PostUpdate(uint16_t attrKeyId, bool updateResult) {}
+    virtual void PostUpdate(uint16_t attrKeyId) {}
     /**
      * @brief step1: inherited class must override this method to create the native views, it's the child class's
      * responsibility to record the native views it creates out, and they should be released properly in release
@@ -159,12 +241,20 @@ protected:
      *
      * @return true for success, false for failure
      */
-    virtual bool CreateNativeViews() = 0;
+    virtual bool CreateNativeViews()
+    {
+        return true;
+    }
     /**
      * @brief This function must be implemented by child classes. Should release all the native views it
      * creates out in CreateNativeViews() function.
      */
-    virtual void ReleaseNativeViews() = 0;
+    virtual void ReleaseNativeViews() {}
+    /**
+     * @brief Mapping native view with DOM element.
+     */
+    virtual void SetViewExtraMsg();
+    virtual void ReleaseViewExtraMsg();
     /**
      * @brief This is the entry to set all attributes into one specific component, one default
      * implementation is provided, which calls SetPrivateAttribute() to try the component's private special
@@ -204,35 +294,26 @@ protected:
      *
      * @return true if the given event gets matched and is set properly, false for otherwise.
      */
-    virtual bool RegisterEventListener(uint16_t eventTypeId, jerry_value_t funcValue);
+    virtual bool RegisterEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation);
     /**
      * @brief Child class should call this to set common event listener to a given native view.
      *
      * @return true if any common event type matchs successfully, false if no match at all
      */
-    bool RegisterCommonEventListener(UIView& view, const uint16_t eventTypeId, const jerry_value_t funcValue);
+    bool RegisterCommonEventListener(UIView& view,
+                                     const uint16_t eventTypeId,
+                                     const jerry_value_t funcValue,
+                                     bool isStopPropagation);
     /**
      * @brief Child class should call this to set own special event setting/update actions.
      *
      * @return true if any common event type matchs successfully, false if no match at all
      */
-    virtual bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
+    virtual bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation)
     {
         return false;
     }
 
-    /**
-     * @brief This is the entry to set all combined styles into one specific component, one default
-     * implementation is provided, which calls ApplyPrivateStyle() to try the component's private special
-     * style first, if one gets matched, the appling process ends, if not, common styles will be
-     * tried by calling ApplyCommonStyle() method.
-     *
-     * NOTE: The default implementation just apply styles into the ui view returned by GetComponentRootView(),
-     * if this doesn't meet your requirement, go ahead to override this whole function as you want.
-     *
-     * @return true if the given style gets matched and is set properly, false for otherwise.
-     */
-    virtual bool ApplyStyle(const AppStyleItem *style);
     /**
      * @brief Used to set all common styles for all kinds of component.
      *
@@ -284,14 +365,14 @@ protected:
 
     jerry_value_t SetListForWatcher(jerry_value_t getter, jerry_value_t children);
     void HandleListForDireactive();
-    void AppendChildren(UIViewGroup *viewGroup);
-    bool AppendDescriptorOrElement(UIViewGroup *viewGroup, const jerry_value_t descriptorOrElement);
-    void AppendIfDescriptor(UIViewGroup *viewGroup, const jerry_value_t descriptor);
-    void AppendForDescriptor(UIViewGroup *viewGroup, const jerry_value_t descriptor);
-    void AppendElement(UIViewGroup *viewGroup, const jerry_value_t element);
+    void AppendChildren(Component *parent);
+    bool AppendDescriptorOrElement(Component *parent, const jerry_value_t descriptorOrElement);
+    void AppendIfDescriptor(Component *parent, const jerry_value_t descriptor);
+    void AppendForDescriptor(Component *parent, const jerry_value_t descriptor);
+    void AppendElement(Component *parent, const jerry_value_t element);
     void CreateDirectiveWatcher(jerry_value_t descriptor);
-    void UpdateDescriptor(UIViewGroup *viewGroup, const jerry_value_t descriptor);
-    void ReappendDescriptorOrElement(UIViewGroup *viewGroup, const jerry_value_t descriptor);
+    void UpdateDescriptor(Component *parent, const jerry_value_t descriptor);
+    void ReappendDescriptorOrElement(Component *parent, const jerry_value_t descriptor);
     int32_t GetStyleNumValue(const AppStyleItem *style) const
     {
         return style->GetNumValue();
@@ -318,11 +399,16 @@ protected:
     }
     int16_t GetHeight() const
     {
-        return height_;
+        return (height_.type == TYPE_PIXEL) ? height_.value.pixel : INVALID_PIXEL_VALUE;
     }
     int16_t GetWidth() const
     {
-        return width_;
+        return (width_.type == TYPE_PIXEL) ? width_.value.pixel : INVALID_PIXEL_VALUE;
+    }
+
+    jerry_value_t *GetDomElementPointer()
+    {
+        return &nativeElement_;
     }
 
     int32_t GetStylePixelValue(const AppStyleItem *style, int32_t defaultValue = 0) const;
@@ -333,21 +419,49 @@ protected:
     void SetTopPadding(UIView &view, const AppStyleItem& styleItem) const;
     void SetRightPadding(UIView &view, const AppStyleItem& styleItem) const;
     void SetBottomPadding(UIView &view, const AppStyleItem& styleItem) const;
-    void SetLeftMargin(UIView &view, const AppStyleItem& styleItem) const;
-    void SetTopMargin(UIView &view, const AppStyleItem& styleItem) const;
-    void SetRightMargin(UIView &view, const AppStyleItem& styleItem) const;
-    void SetBottomMargin(UIView &view, const AppStyleItem& styleItem) const;
-    void SetMargin(UIView &view, const AppStyleItem& styleItem) const;
     void SetBorderWidth(UIView &view, const AppStyleItem& styleItem) const;
     void SetBorderColor(UIView &view, const AppStyleItem& styleItem) const;
     void SetBorderRadius(UIView &view, const AppStyleItem& styleItem) const;
     void SetBackgroundColor(UIView &view, const AppStyleItem& styleItem) const;
     void SetOpacity(UIView &view, const AppStyleItem &styleItem) const;
+    /**
+     * @brief GetConstrainedParam return the align parameter the children can be refer to
+     */
+    void GetConstrainedParam(ConstrainedParameter &param) const;
+    void SetLeftMargin(UIView &view) const;
+    void SetTopMargin(UIView &view) const;
+    void SetRightMargin(UIView &view) const;
+    void SetBottomMargin(UIView &view) const;
+    void SetMargin(UIView &view) const;
+    virtual void ApplyAlignedMargin(UIView &uiView) const;
 
+    /**
+     * @brief get the pressedImage url and the normal image url
+     * @param styleItem the style item which contains image info
+     * @param pressedImage the pseudo value in style item
+     * @param normalImage the normal image url
+     * @return if get the image url success return true, else false
+     */
+    bool HandleBackgroundImg(const AppStyleItem &styleItem, char *&pressedImage, char *&normalImage) const;
+
+#ifdef FEATURE_ROTATION_API
+    /**
+     * @brief the rotation API handling function, the child component can register it for rotation API supporting
+     * @param func function object
+     * @param dom the context of function execution
+     * @param args the list of arguments
+     * @param size the length of arguments list
+     * @return the handling result to caller
+     */
+    static jerry_value_t HandleRotationRequest(const jerry_value_t func,
+                                               const jerry_value_t dom,
+                                               const jerry_value_t args[],
+                                               const jerry_length_t size);
+#endif // FEATURE_ROTATION_API
 private:
     /**
      * @brief Used to set animation keyframes, such as transform, background-color, height etc.
-     * it is set as attribute, and support binding to data, so it can be changed dynamiclly.
+     * it is set as attribute, and support binding to data, so it can be changed dynamically.
      *
      * the following three functions will called in order
      */
@@ -378,36 +492,35 @@ private:
     int32_t GetAnimatorValue(char *animatorValue, const int8_t index, bool isOpacity = false) const;
 
     void ParseOptions();
-    void ParseAttrs(jerry_value_t attrs);
-    void ParseEvent(jerry_value_t events);
+    void ParseAttrs();
+    void ParseEvents();
+    void BindEvents(const char *type, bool isStopPropagation);
     /**
      * @brief Apply combined styles into native view.
      */
-    void ApplyStyles();
+    void ApplyStyles(const jerry_value_t options, Component& currentComponent) const;
     /**
      * @brief This function will be called after the ApplyCommonStyle, make padding style work.
      */
-    bool RefreshRect() const;
-    void SetHeight(const AppStyleItem *styleItem);
-    void SetWidth(const AppStyleItem *styleItem);
+    bool AdaptBoxSizing() const;
+    void ApplyAlignedPosition(UIView &uiView) const;
+    void AdapteBoxRectArea(UIView &uiView) const;
     void SetVisible(UIView& view, const AppStyleItem *styleItem) const;
-    void SetLeft(UIView& view, const AppStyleItem *styleItem) const;
-    void SetTop(UIView& view, const AppStyleItem *styleItem) const;
-    void SetClickEventListener(UIView& view, const jerry_value_t eventFunc, const uint16_t eventTypeId);
-    void SetLongPressEventListener(UIView& view, const jerry_value_t eventFunc, const uint16_t eventTypeId);
-    void SetSwipeEventListener(UIView& view, jerry_value_t eventFunc);
+    void SetClickEventListener(UIView& view, const jerry_value_t eventFunc, bool isStopPropagation);
+    void SetLongPressEventListener(UIView& view, const jerry_value_t eventFunc, bool isStopPropagation);
+    void SetSwipeEventListener(UIView& view, jerry_value_t eventFunc, bool isStopPropagation);
 #ifdef JS_TOUCH_EVENT_SUPPORT
-    void SetTouchStartEventListener(UIView &view, jerry_value_t eventFunc, const uint16_t eventTypeId);
-    void SetTouchMoveEventListener(UIView &view, jerry_value_t eventFunc, const uint16_t eventTypeId);
-    void SetTouchEndEventListener(UIView &view, jerry_value_t eventFunc, const uint16_t eventTypeId);
-    void SetTouchCancelEventListener(UIView &view, jerry_value_t eventFunc, const uint16_t eventTypeId);
-    void SetKeyBoardEventListener(jerry_value_t eventFunc, const uint16_t eventTypeId);
+    void SetTouchStartEventListener(UIView &view, jerry_value_t eventFunc, bool isStopPropagation);
+    void SetTouchMoveEventListener(UIView &view, jerry_value_t eventFunc, bool isStopPropagation);
+    void SetTouchEndEventListener(UIView &view, jerry_value_t eventFunc, bool isStopPropagation);
+    void SetTouchCancelEventListener(UIView &view, jerry_value_t eventFunc, bool isStopPropagation);
+    void SetKeyBoardEventListener(jerry_value_t eventFunc, bool isStopPropagation);
 #endif
     /**
      * @brief release common event listeners if any is set
      */
     void ReleaseCommonEventListeners();
-    void AppendDescriptorOrElements(UIViewGroup *viewGroup, const JSValue descriptorOrElements);
+    void AppendDescriptorOrElements(Component *parent, const JSValue descriptorOrElements);
     /**
      * @brief For some situations, if the component's rect(position, width, height and so on) area is changed, need
      * to force the parent container to relayout all children, and need to invalided self before the changes are
@@ -419,6 +532,54 @@ private:
     void InvalidateIfNeeded(uint16_t attrKeyId, bool invalidateSelf = false) const;
     void AddAnimationToList(const TransitionImpl *transitionImpl) const;
 
+    void GetDimensionFromStyle(Dimension &dimension, const AppStyleItem &styleItem) const;
+    void CalculateDimensionPixel(Dimension &dimension, int16_t base) const;
+    void AlignDimensions(const ConstrainedParameter &param);
+    virtual void OnDimensionsAligned() {}
+
+    /**
+     * @brief SetParent assign parent node
+     * @param parent current component's parent
+     */
+    void SetParent(Component *parent)
+    {
+        parent_ = parent;
+    }
+    void SetNextSibling(Component *next)
+    {
+        nextSibling_ = next;
+    }
+    /**
+     * @brief AddChild insert one child
+     * @param childNode child component
+     *
+     * NOTE: add one child will not attach the native view immediately, but
+     * when removing one child, the child native view will be detached immediately
+     */
+    void AddChild(Component *childNode);
+    /**
+     * @brief RemoveChild cut off the specific child from current component
+     * @param childNode the child component
+     */
+    void RemoveChild(Component *childNode);
+    /**
+     * @brief RemoveAllChildren clean all children
+     */
+    void RemoveAllChildren();
+
+    /**
+     * @brief childHead_ the child list
+     */
+    Component *childHead_;
+    /**
+     * @brief nextSibling_ next neighbor
+     */
+    Component *nextSibling_;
+    /**
+     * @brief parent_ parent component node
+     */
+    Component *parent_;
+
     AppStyleManager *styleManager_;
     jerry_value_t nativeElement_;
     jerry_value_t viewModel_;
@@ -445,8 +606,14 @@ private:
     TransitionParams *trans_;
     jerry_value_t descriptors_;
     Watcher *watchersHead_;
-    int16_t height_;
-    int16_t width_;
+    Dimension height_;
+    Dimension width_;
+    Dimension top_;
+    Dimension left_;
+    Dimension marginTop_;
+    Dimension marginLeft_;
+    Dimension marginRight_;
+    Dimension marginBottom_;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/component_factory.h b/frameworks/src/core/components/component_factory.h
similarity index 77%
rename from src/core/components/component_factory.h
rename to frameworks/src/core/components/component_factory.h
index bcc1862..c686ee8 100755
--- a/src/core/components/component_factory.h
+++ b/frameworks/src/core/components/component_factory.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -28,11 +28,16 @@
 #include "canvas_component.h"
 #endif // FEATURE_COMPONENT_CANVAS
 #include "chart_component.h"
+#include "circle_progress_component.h"
 #include "component.h"
 #include "div_component.h"
 #include "fatal_handler.h"
+#include "horizon_progress_component.h"
+#include "image_animator_component.h"
 #include "image_component.h"
-#include "input_component.h"
+#include "input_button_component.h"
+#include "input_checkbox_component.h"
+#include "input_radio_component.h"
 #include "js_fwk_common.h"
 #include "key_parser.h"
 #include "keys.h"
@@ -40,11 +45,13 @@
 #include "marquee_component.h"
 #include "non_copyable.h"
 #include "picker_view_component.h"
-#include "progress_component.h"
+#ifdef FEATURE_COMPONENT_QRCODE
+#include "qrcode_component.h"
+#endif
 #include "slider_component.h"
+#include "stack_component.h"
 #include "swiper_component.h"
 #include "switch_component.h"
-#include "image_animator_component.h"
 #ifdef FEATURE_COMPONENT_TABS
 #include "tab_bar_component.h"
 #include "tab_content_component.h"
@@ -84,10 +91,10 @@ public:
                 break;
 #endif // FEATURE_COMPONENT_CANVAS
             case K_DIV:
-                component = new DivComponent(options, children, styleManager, DivComponent::LayoutType::FLEX);
+                component = new DivComponent(options, children, styleManager);
                 break;
             case K_STACK:
-                component = new DivComponent(options, children, styleManager, DivComponent::LayoutType::POSITION);
+                component = new StackComponent(options, children, styleManager);
                 break;
             case K_IMAGE:
                 component = new ImageComponent(options, children, styleManager);
@@ -95,9 +102,16 @@ public:
             case K_IMAGE_ANIMATOR:
                 component = new ImageAnimatorComponent(options, children, styleManager);
                 break;
-            case K_PROGRESS:
-                component = new ProgressComponent(options, children, styleManager);
+            case K_PROGRESS: {
+                uint16_t id = ComponentUtils::GetComponentType(options);
+                if (id == K_ARC) {
+                    component = new CircleProgressComponent(options, children, styleManager);
+                } else {
+                    // default type is horizon progress
+                    component = new HorizonProgressComponent(options, children, styleManager);
+                }
                 break;
+            }
 #ifdef FEATURE_COMPONENT_TABS
             case K_TAB_BAR:
                 component = new TabBarComponent(options, children, styleManager);
@@ -125,7 +139,7 @@ public:
                 component = new ListComponent(options, children, styleManager);
                 break;
             case K_LIST_ITEM:
-                component = new DivComponent(options, children, styleManager, DivComponent::LayoutType::FLEX);
+                component = new DivComponent(options, children, styleManager);
                 break;
 #ifdef FEATURE_COMPONENT_ANALOG_CLOCK
             case K_CLOCK_HAND:
@@ -135,9 +149,18 @@ public:
                 component = new AnalogClockComponent(options, children, styleManager);
                 break;
 #endif // FEATURE_COMPONENT_ANALOG_CLOCK
-            case K_INPUT:
-                component = new InputComponent(options, children, styleManager);
+            case K_INPUT: {
+                uint16_t id = ComponentUtils::GetComponentType(options);
+                if (id == K_CHECKBOX) {
+                    component = new InputCheckboxComponent(options, children, styleManager);
+                } else if (id == K_RADIO) {
+                    component = new InputRadioComponent(options, children, styleManager);
+                } else {
+                    // default type is input button
+                    component = new InputButtonComponent(options, children, styleManager);
+                }
                 break;
+            }
             case K_MARQUEE:
                 component = new MarqueeComponent(options, children, styleManager);
                 break;
@@ -147,6 +170,11 @@ public:
             case K_PICKER_VIEW:
                 component = new PickerViewComponent(options, children, styleManager);
                 break;
+#ifdef FEATURE_COMPONENT_QRCODE
+            case K_QRCODE:
+                component = new QrcodeComponent(options, children, styleManager);
+                break;
+#endif // FEATURE_COMPONENT_QRCODE
 #ifdef FEATURE_COMPONENT_VIDEO
             case K_VIDEO:
                 component = new VideoComponent(options, children, styleManager);
diff --git a/frameworks/src/core/components/component_utils.cpp b/frameworks/src/core/components/component_utils.cpp
new file mode 100755
index 0000000..b144e11
--- /dev/null
+++ b/frameworks/src/core/components/component_utils.cpp
@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) 2020-2021 Huawei Device 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.
+ */
+
+#include "component_utils.h"
+#include "ace_log.h"
+#include "component.h"
+#include "descriptor_utils.h"
+
+namespace OHOS {
+namespace ACELite {
+UIView* ComponentUtils::GetViewFromBindingObject(jerry_value_t value)
+{
+    Component* component = GetComponentFromBindingObject(value);
+    return component ? component->GetComponentRootView() : nullptr;
+}
+
+Component* ComponentUtils::GetComponentFromBindingObject(jerry_value_t value)
+{
+    if (IS_UNDEFINED(value)) {
+        return nullptr;
+    }
+
+    Component* component = nullptr;
+    bool isBinded = jerry_get_object_native_pointer(value, reinterpret_cast<void**>(&component), nullptr);
+    if (!isBinded || (component == nullptr)) {
+        return nullptr;
+    }
+    return component;
+}
+
+void ComponentUtils::ReleaseComponents(Component *rootComponent)
+{
+    if (rootComponent == nullptr) {
+        return;
+    }
+    // for list component, release all the list items first
+    if (rootComponent->GetComponentName() != K_LIST) {
+        JSValue descriptors = rootComponent->GetDescriptors();
+        if (!JSUndefined::Is(descriptors)) {
+            DescriptorUtils::ReleaseDescriptorOrElements(descriptors);
+        }
+    }
+    Component *child = const_cast<Component *>(rootComponent->GetChildHead());
+    if (child == nullptr) {
+        // has no children, can be released directly
+        rootComponent->Release();
+        delete rootComponent;
+        return;
+    }
+    while (child != nullptr) {
+        ReleaseComponents(child);
+        child = const_cast<Component *>(child->GetNextSibling());
+    }
+}
+
+uint16_t ComponentUtils::GetComponentType(jerry_value_t options)
+{
+    if (IS_UNDEFINED(options)) {
+        return 0;
+    }
+    jerry_value_t attrsPropValue = jerryx_get_property_str(options, ATTR_ATTRS);
+    // create component according to attribute type
+    const char * const attrType = "type";
+    jerry_value_t typeValHandler = jerryx_get_property_str(attrsPropValue, attrType);
+    uint16_t typeId = 0;
+    if (!jerry_value_is_undefined(typeValHandler)) {
+        uint16_t len = 0;
+        char *type = MallocStringOf(typeValHandler, &len);
+        typeId = KeyParser::ParseKeyId(type, len);
+        ACE_FREE(type);
+    }
+    ReleaseJerryValue(typeValHandler, attrsPropValue, VA_ARG_END_FLAG);
+    return typeId;
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/src/core/components/component_utils.h b/frameworks/src/core/components/component_utils.h
old mode 100755
new mode 100644
similarity index 84%
rename from src/core/components/component_utils.h
rename to frameworks/src/core/components/component_utils.h
index fff9c61..8b7ee02
--- a/src/core/components/component_utils.h
+++ b/frameworks/src/core/components/component_utils.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -36,6 +36,11 @@ public:
      * @brief Easy method to get the the component binded to the given JS object.
      */
     static Component* GetComponentFromBindingObject(jerry_value_t value);
+    static void ReleaseComponents(Component *rootComponent);
+    /**
+     * @brief Easy method to get the the component type.
+     */
+    static uint16_t GetComponentType(jerry_value_t options);
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/frameworks/src/core/components/div_component.cpp b/frameworks/src/core/components/div_component.cpp
new file mode 100644
index 0000000..5468ca5
--- /dev/null
+++ b/frameworks/src/core/components/div_component.cpp
@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2020-2021 Huawei Device 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.
+ */
+
+#include "div_component.h"
+#include "ace_log.h"
+#include "key_parser.h"
+#include "keys.h"
+
+namespace OHOS {
+namespace ACELite {
+DivComponent::DivComponent(jerry_value_t options,
+                           jerry_value_t children,
+                           AppStyleManager* styleManager)
+    : Component(options, children, styleManager),
+      isSecondaryAxisAlignSet_(false)
+{
+    SetComponentName(K_DIV);
+    nativeView_.SetStyle(STYLE_BACKGROUND_OPA, 0);
+}
+
+
+inline UIView *DivComponent::GetComponentRootView() const
+{
+    return const_cast<FlexLayout *>(&nativeView_);
+}
+
+bool DivComponent::ApplyPrivateStyle(const AppStyleItem* style)
+{
+    // Set default value
+    if (!isSecondaryAxisAlignSet_) {
+        nativeView_.SetSecondaryAxisAlign(OHOS::ALIGN_START);
+    }
+    uint16_t stylePropNameId = GetStylePropNameId(style);
+    if (!KeyParser::IsKeyValid(stylePropNameId)) {
+        return false;
+    }
+    const char * const strValue = GetStyleStrValue(style);
+    if (strValue == nullptr) {
+        return false;
+    }
+
+    bool applyResult = true;
+    uint16_t valueId = KeyParser::ParseKeyId(strValue, GetStyleStrValueLen(style));
+    switch (stylePropNameId) {
+        case K_FLEX_DIRECTION: {
+            switch (valueId) {
+                case K_COLUMN:
+                    nativeView_.SetLayoutDirection(LAYOUT_VER);
+                    break;
+                case K_ROW:
+                    nativeView_.SetLayoutDirection(LAYOUT_HOR);
+                    break;
+                case K_ROW_REVERSE:
+                    nativeView_.SetLayoutDirection(LAYOUT_HOR_R);
+                    break;
+                case K_COLUMN_REVERSE:
+                    nativeView_.SetLayoutDirection(LAYOUT_VER_R);
+                    break;
+                default:
+                    applyResult = false;
+                    break;
+            }
+            break;
+        }
+        case K_JUSTIFY_CONTENT: {
+            switch (valueId) {
+                case K_FLEX_START:
+                    nativeView_.SetMajorAxisAlign(OHOS::ALIGN_START);
+                    break;
+                case K_FLEX_END:
+                    nativeView_.SetMajorAxisAlign(OHOS::ALIGN_END);
+                    break;
+                case K_CENTER:
+                    nativeView_.SetMajorAxisAlign(OHOS::ALIGN_CENTER);
+                    break;
+                case K_SPACE_BETWEEN:
+                    nativeView_.SetMajorAxisAlign(OHOS::ALIGN_BETWEEN);
+                    break;
+                case K_SPACE_AROUND:
+                    nativeView_.SetMajorAxisAlign(OHOS::ALIGN_EVENLY);
+                    break;
+                default:
+                    applyResult = false;
+                    break;
+            }
+            break;
+        }
+        case K_ALIGN_ITEMS: {
+            switch (valueId) {
+                case K_FLEX_START:
+                    nativeView_.SetSecondaryAxisAlign(OHOS::ALIGN_START);
+                    break;
+                case K_FLEX_END:
+                    nativeView_.SetSecondaryAxisAlign(OHOS::ALIGN_END);
+                    break;
+                case K_CENTER:
+                    nativeView_.SetSecondaryAxisAlign(OHOS::ALIGN_CENTER);
+                    break;
+                default:
+                    applyResult = false;
+                    break;
+            }
+            if (applyResult)
+                isSecondaryAxisAlignSet_ = true;
+            break;
+        }
+        case K_FLEX_WRAP: {
+            if (valueId == K_WRAP) {
+                nativeView_.SetFlexWrap(FlexLayout::WRAP);
+            } else {
+                nativeView_.SetFlexWrap(FlexLayout::NOWRAP);
+            }
+            break;
+        }
+        default:
+            applyResult = false;
+            break;
+    }
+
+    return applyResult;
+}
+
+bool DivComponent::ProcessChildren()
+{
+    // add all children to this container
+    AppendChildren(this);
+
+    return true;
+}
+
+void DivComponent::PostUpdate(uint16_t attrKeyId)
+{
+    nativeView_.LayoutChildren();
+}
+
+void DivComponent::AttachView(const Component *child)
+{
+    if (child == nullptr) {
+        return;
+    }
+    nativeView_.Add(child->GetComponentRootView());
+}
+
+void DivComponent::LayoutChildren()
+{
+    nativeView_.LayoutChildren();
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/src/core/components/div_component.h b/frameworks/src/core/components/div_component.h
old mode 100755
new mode 100644
similarity index 75%
rename from src/core/components/div_component.h
rename to frameworks/src/core/components/div_component.h
index 8055685..ec97481
--- a/src/core/components/div_component.h
+++ b/frameworks/src/core/components/div_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -23,29 +23,23 @@ namespace OHOS {
 namespace ACELite {
 class DivComponent final : public Component {
 public:
-    enum LayoutType {
-        POSITION,
-        FLEX
-    };
 
     ACE_DISALLOW_COPY_AND_MOVE(DivComponent);
     DivComponent() = delete;
-    DivComponent(jerry_value_t options, jerry_value_t children, AppStyleManager* styleManager, const LayoutType type);
+    DivComponent(jerry_value_t options, jerry_value_t children, AppStyleManager* styleManager);
     ~DivComponent() override {}
 
 protected:
-    bool CreateNativeViews() override;
-    void ReleaseNativeViews() override;
     UIView *GetComponentRootView() const override;
     bool ApplyPrivateStyle(const AppStyleItem* style) override;
     bool ProcessChildren() override;
-    void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
+    void PostUpdate(uint16_t attrKeyId) override;
+    void AttachView(const Component *child) override;
+    void LayoutChildren() override;
 
 private:
     bool isSecondaryAxisAlignSet_;
-    const AppStyle* combinedStyle_;
-    UIViewGroup* nativeView_;
-    LayoutType layoutType_;
+    FlexLayout nativeView_;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/event_listener.cpp b/frameworks/src/core/components/event_listener.cpp
similarity index 67%
rename from src/core/components/event_listener.cpp
rename to frameworks/src/core/components/event_listener.cpp
index e670351..220f1ec 100755
--- a/src/core/components/event_listener.cpp
+++ b/frameworks/src/core/components/event_listener.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -115,51 +115,26 @@ bool ViewOnTouchCancelListener::OnCancel(UIView &view, const CancelEvent &event)
 }
 #endif // JS_TOUCH_EVENT_SUPPORT
 
-bool ViewOnSwipeListener::OnDragStart(UIView &view, const DragEvent &event)
+bool ViewOnSwipeListener::OnDragStart(UIView& view, const DragEvent &event)
 {
-    UNUSED(view);
     UNUSED(event);
     HILOG_DEBUG(HILOG_MODULE_ACE, "OnDragStart received");
-    return true;
+    return isStopPropagation_;
 }
 
-bool ViewOnSwipeListener::OnDragEnd(UIView &view, const DragEvent &event)
+bool ViewOnSwipeListener::OnDragEnd(UIView& view, const DragEvent &event)
 {
-    UNUSED(view);
-    if (jerry_value_is_undefined(fn_)) {
+    if (JSUndefined::Is(fn_)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "OnDragEnd received, but no JS function to call");
-        return false;
+        return isStopPropagation_;
     }
 
     HILOG_DEBUG(HILOG_MODULE_ACE, "OnDragEnd received");
 
-    jerry_value_t directionValue;
-    switch (event.GetDragDirection()) {
-        case DragEvent::DIRECTION_LEFT_TO_RIGHT:
-            directionValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(SWIPE_RIGHT));
-            break;
-        case DragEvent::DIRECTION_RIGHT_TO_LEFT:
-            directionValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(SWIPE_LEFT));
-            break;
-        case DragEvent::DIRECTION_TOP_TO_BOTTOM:
-            directionValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(SWIPE_DOWN));
-            break;
-        case DragEvent::DIRECTION_BOTTOM_TO_TOP:
-            directionValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(SWIPE_UP));
-            break;
-        default:
-            directionValue = UNDEFINED;
-            break;
-    }
+    JSValue arg = EventUtil::CreateSwipeEvent(view, event);
+    EventUtil::InvokeCallback(JSUndefined::Create(), fn_, arg);
 
-    jerry_value_t args[1] = {jerry_create_object()};
-    const char * const directionName = "direction";
-    jerry_value_t result = jerryx_set_property_str(args[0], directionName, directionValue);
-    if (!jerry_value_is_error(result)) {
-        CallJSFunctionAutoRelease(fn_, UNDEFINED, args, 1);
-    }
-    ReleaseJerryValue(result, args[0], directionValue, VA_ARG_END_FLAG);
-    return true;
+    return isStopPropagation_;
 }
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/event_listener.h b/frameworks/src/core/components/event_listener.h
similarity index 64%
rename from src/core/components/event_listener.h
rename to frameworks/src/core/components/event_listener.h
index 7ff5ecf..78de13a 100755
--- a/src/core/components/event_listener.h
+++ b/frameworks/src/core/components/event_listener.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -16,6 +16,8 @@
 #ifndef OHOS_ACELITE_EVENT_LISTENER_H
 #define OHOS_ACELITE_EVENT_LISTENER_H
 
+#include "ace_log.h"
+#include "event_util.h"
 #include "js_fwk_common.h"
 #include "keys.h"
 #include "non_copyable.h"
@@ -31,43 +33,29 @@ namespace ACELite {
 class StateChangeListener final : public UICheckBox::OnChangeListener {
 public:
     ACE_DISALLOW_COPY_AND_MOVE(StateChangeListener);
-    StateChangeListener(jerry_value_t fn, uint16_t componentId)
+    StateChangeListener(jerry_value_t fn)
     {
         fn_ = jerry_acquire_value(fn);
-        componentId_ = componentId;
         isChanging_ = false;
-        radio_ = nullptr;
-        value_ = nullptr;
-        state_ = UICheckBox::UICheckBoxState::UNSELECTED;
+        state_ = false;
     }
 
     bool OnChange(UICheckBox::UICheckBoxState state) override
     {
-        if (radio_ != nullptr) {
-            state_ = state;
+        bool stateRes = (state == UICheckBox::UICheckBoxState::SELECTED);
+        if (stateRes == state_) {
+            return true;
         }
+        state_ = stateRes;
         if (isChanging_) {
             return false;
         }
         isChanging_ = true;
         jerry_value_t args[1];
-        bool result = (UICheckBox::UICheckBoxState::SELECTED == state) ? true : false;
-        jerry_value_t resultProp = jerry_create_boolean(result);
+        jerry_value_t resultProp = jerry_create_boolean(state_);
         args[0] = jerry_create_object();
         const char * const checked = "checked";
         ReleaseJerryValue(jerryx_set_property_str(args[0], checked, resultProp), resultProp, VA_ARG_END_FLAG);
-        if (radio_ != nullptr) {
-            const char * const name = "name";
-            if (radio_->GetName() != nullptr) {
-                jerry_value_t nameVal = jerry_create_string(reinterpret_cast<const jerry_char_t *>(radio_->GetName()));
-                ReleaseJerryValue(jerryx_set_property_str(args[0], name, nameVal), nameVal, VA_ARG_END_FLAG);
-            }
-        }
-        if (value_ != nullptr) {
-            const char * const valueName = "value";
-            jerry_value_t valueProp = jerry_create_string(reinterpret_cast<jerry_char_t *>(value_));
-            ReleaseJerryValue(jerryx_set_property_str(args[0], valueName, valueProp), valueProp, VA_ARG_END_FLAG);
-        }
         jerry_value_t globalObject = jerry_get_global_object();
         jerry_value_t appViewModel = jerryx_get_property_str(globalObject, ATTR_APP);
         if (jerry_value_is_function(fn_)) {
@@ -78,37 +66,9 @@ public:
         return true;
     }
 
-    void TriggerChange(UIView *view)
+    void SetState(bool state)
     {
-        UICheckBox::UICheckBoxState state = UICheckBox::UICheckBoxState::UNSELECTED;
-        if (componentId_ == K_SWITCH) {
-            UIToggleButton *toggleButton = reinterpret_cast<UIToggleButton *>(view);
-            if (toggleButton) {
-                state = (toggleButton->GetState()) ? UICheckBox::UICheckBoxState::SELECTED
-                                                    : UICheckBox::UICheckBoxState::UNSELECTED;
-            }
-        } else if (componentId_ == K_CHECKBOX) {
-            UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(view);
-            if (checkbox) {
-                state = checkbox->GetState();
-            }
-        } else if (radio_ != nullptr) {
-            state = radio_->GetState();
-            if (state == state_) {
-                return;
-            }
-        }
-        OnChange(state);
-    }
-
-    void SetView(UIRadioButton* radioButton)
-    {
-        radio_ = radioButton;
-    }
-
-    void SetValue(char* value)
-    {
-        value_ = value;
+        state_ = state;
     }
 
     ~StateChangeListener()
@@ -118,43 +78,37 @@ public:
 
 private:
     jerry_value_t fn_;
-    uint16_t componentId_;
-    char* value_;
-    UIRadioButton* radio_;
-    UICheckBox::UICheckBoxState state_;
+    bool state_;
     bool isChanging_; // the flag to avoid change event cycle execute
 };
 
 class ViewOnClickListener final : public UIView::OnClickListener {
 public:
     ACE_DISALLOW_COPY_AND_MOVE(ViewOnClickListener);
-    explicit ViewOnClickListener(jerry_value_t fn, const uint16_t id)
-        : fn_(jerry_acquire_value(fn)),
-#ifdef JS_TOUCH_EVENT_SUPPORT
-          id_(id),
-#endif
-          changeListener_(nullptr) {}
+
+    ViewOnClickListener(jerry_value_t fn, bool isStopPropagation)
+        : changeListener_(nullptr),
+          fn_(jerry_acquire_value(fn)),
+          isStopPropagation_(isStopPropagation) {}
+
     ~ViewOnClickListener()
     {
         jerry_release_value(fn_);
     }
 
-    bool OnClick(UIView &view, const ClickEvent &event) override
+    bool OnClick(UIView& view, const ClickEvent &event) override
     {
         if (changeListener_) {
-            changeListener_->TriggerChange(&view);
+            UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(&view);
+            changeListener_->OnChange(checkbox->GetState());
         }
-        if (jerry_value_is_undefined(fn_)) {
-            return false;
+        if (JSUndefined::Is(fn_)) {
+            return isStopPropagation_;
         }
-#ifdef JS_TOUCH_EVENT_SUPPORT
-        jerry_value_t *args = ConvertBaseEventInfo(event, id_);
-        jerry_release_value(CallJSFunctionOnRoot(fn_, args, 1));
-        ClearEventListener(args, 1);
-#else
-        jerry_release_value(CallJSFunctionOnRoot(fn_, nullptr, 0));
-#endif
-        return true;
+        JSValue arg = EventUtil::CreateEvent(EventUtil::EVENT_CLICK, view, event);
+        EventUtil::InvokeCallback(JSUndefined::Create(), fn_, arg);
+
+        return isStopPropagation_;
     }
 
     void SetComponentListener(StateChangeListener *changeListener)
@@ -163,54 +117,42 @@ public:
     }
 
 private:
-    jerry_value_t fn_;
-#ifdef JS_TOUCH_EVENT_SUPPORT
-    uint16_t id_;
-#endif
     StateChangeListener *changeListener_;
+    jerry_value_t fn_;
+    bool isStopPropagation_;
 };
 
 class ViewOnLongPressListener final : public UIView::OnLongPressListener {
 public:
     ACE_DISALLOW_COPY_AND_MOVE(ViewOnLongPressListener);
-    explicit ViewOnLongPressListener(jerry_value_t fn, const uint16_t id) :
-#ifdef JS_TOUCH_EVENT_SUPPORT
-        id_(id),
-#endif
-        fn_(jerry_acquire_value(fn)) {}
+    ViewOnLongPressListener(jerry_value_t fn, bool isStopPropagation)
+        : fn_(jerry_acquire_value(fn)), isStopPropagation_(isStopPropagation) {}
 
     ~ViewOnLongPressListener()
     {
         jerry_release_value(fn_);
     }
 
-    bool OnLongPress(UIView &view, const LongPressEvent &event) override
+    bool OnLongPress(UIView& view, const LongPressEvent &event) override
     {
         if (jerry_value_is_undefined(fn_)) {
-            return false;
+            return isStopPropagation_;
         }
-#ifdef JS_TOUCH_EVENT_SUPPORT
-        jerry_value_t *args = ConvertBaseEventInfo(event, id_);
-        jerry_release_value(CallJSFunctionOnRoot(fn_, args, 1));
-        ClearEventListener(args, 1);
-#else
-        jerry_release_value(CallJSFunctionOnRoot(fn_, nullptr, 0));
-#endif
-        return true;
-    }
 
-private:
-#ifdef JS_TOUCH_EVENT_SUPPORT
-    uint16_t id_;
-#endif
+        JSValue arg = EventUtil::CreateEvent(EventUtil::EVENT_LONGPRESS, view, event);
+        EventUtil::InvokeCallback(JSUndefined::Create(), fn_, arg);
+
+        return isStopPropagation_;
+    }
     jerry_value_t fn_;
+    bool isStopPropagation_;
 };
 
 #ifdef JS_TOUCH_EVENT_SUPPORT
 class ViewOnTouchStartListener final : public UIView::OnTouchListener {
 public:
     ACE_DISALLOW_COPY_AND_MOVE(ViewOnTouchStartListener);
-    explicit ViewOnTouchStartListener(jerry_value_t fn, const uint16_t id);
+    ViewOnTouchStartListener(jerry_value_t fn, const uint16_t id);
     ~ViewOnTouchStartListener();
     bool OnPress(UIView &view, const PressEvent &event) override;
 
@@ -258,7 +200,7 @@ private:
 class KeyBoardEventListener final : public RootView::OnKeyActListener {
 public:
     ACE_DISALLOW_COPY_AND_MOVE(KeyBoardEventListener);
-    explicit KeyBoardEventListener(jerry_value_t fn, const uint16_t id);
+    KeyBoardEventListener(jerry_value_t fn, const uint16_t id);
     ~KeyBoardEventListener();
     bool OnKeyAct(UIView &view, const KeyEvent &event) override;
 
@@ -271,10 +213,9 @@ private:
 class ViewOnSwipeListener final : public UIView::OnDragListener {
 public:
     ACE_DISALLOW_COPY_AND_MOVE(ViewOnSwipeListener);
-    explicit ViewOnSwipeListener(jerry_value_t fn)
-        : SWIPE_LEFT("left"), SWIPE_RIGHT("right"), SWIPE_UP("up"), SWIPE_DOWN("down")
+    ViewOnSwipeListener(jerry_value_t fn, bool isStopPropagation)
+        : fn_(jerry_acquire_value(fn)), isStopPropagation_(isStopPropagation)
     {
-        fn_ = jerry_acquire_value(fn);
     }
 
     ~ViewOnSwipeListener()
@@ -283,14 +224,11 @@ public:
     }
 
     bool OnDragStart(UIView& view, const DragEvent& event) override;
-    bool OnDragEnd(UIView &view, const DragEvent &event) override;
+    bool OnDragEnd(UIView& view, const DragEvent &event) override;
 
 private:
     jerry_value_t fn_;
-    const char * const SWIPE_LEFT;
-    const char * const SWIPE_RIGHT;
-    const char * const SWIPE_UP;
-    const char * const SWIPE_DOWN;
+    bool isStopPropagation_;
 };
 
 class SliderEventListener final : public UISlider::UISliderEventListener {
@@ -301,17 +239,18 @@ public:
     {
         jerry_release_value(bindChangeFunc_);
     }
-    void OnChange(int16_t progress) override
+    void OnChange(int32_t progress) override
     {
         jerry_value_t knobValue = jerry_create_number(progress);
         jerry_value_t args[1];
         args[0] = jerry_create_object();
-        constexpr char sliderAttrProgress[] = "progress";
-        jerry_value_t result = jerryx_set_property_str(args[0], sliderAttrProgress, knobValue);
-        if (!jerry_value_is_error(result)) {
+        jerry_value_t result1 = jerryx_set_property_str(args[0], "value", knobValue);
+        // progress will be deprecated in next versions.
+        jerry_value_t result2 = jerryx_set_property_str(args[0], "progress", knobValue);
+        if (!jerry_value_is_error(result1) && !jerry_value_is_error(result2)) {
             CallJSFunctionAutoRelease(bindChangeFunc_, UNDEFINED, args, 1);
         }
-        ReleaseJerryValue(result, args[0], knobValue, VA_ARG_END_FLAG);
+        ReleaseJerryValue(result1, result2, args[0], knobValue, VA_ARG_END_FLAG);
     }
 
     void SetBindChangeFuncName(jerry_value_t bindChageFunc)
diff --git a/frameworks/src/core/components/horizon_progress_component.cpp b/frameworks/src/core/components/horizon_progress_component.cpp
new file mode 100644
index 0000000..f55d54e
--- /dev/null
+++ b/frameworks/src/core/components/horizon_progress_component.cpp
@@ -0,0 +1,131 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "horizon_progress_component.h"
+
+namespace OHOS {
+namespace ACELite {
+HorizonProgressComponent::HorizonProgressComponent(jerry_value_t options,
+                                                   jerry_value_t children, AppStyleManager *styleManager)
+    : Component(options, children, styleManager),
+    hStrokeWidth_(0)
+{
+}
+
+bool HorizonProgressComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
+{
+    if (attrKeyId == K_PERCENT) {
+        int16_t rangeMax = 100;
+        int16_t rangeMin = 0;
+        progressView_.SetRange(rangeMax, rangeMin);
+        progressView_.SetValue(IntegerOf(attrValue));
+        return true;
+    }
+
+    return false;
+}
+
+bool HorizonProgressComponent::ApplyPrivateStyle(const AppStyleItem *style)
+{
+    return SetHorizonProgressStyle(style);
+}
+
+bool HorizonProgressComponent::CreateNativeViews()
+{
+    // set default style for progress & background
+    Style progressStyle = StyleDefault::GetBrightColorStyle();
+    Style backStyle = StyleDefault::GetBrightStyle();
+    progressView_.SetForegroundStyle(progressStyle);
+    progressView_.SetBackgroundStyle(backStyle);
+
+    // set default progress self border width
+    progressView_.SetForegroundStyle(STYLE_BORDER_WIDTH, 0);
+    progressView_.SetBackgroundStyle(STYLE_BORDER_WIDTH, 0);
+    const double alpha = 0.15;
+    progressView_.SetBackgroundStyle(STYLE_BACKGROUND_COLOR,
+                                     Color::GetColorFromRGBA(0xFF, 0xFF, 0xFF, alpha * 0xFF).full);
+    // set defaut progress stroke width & canvas width & canvas height & border width
+    const int16_t width = 4;
+    hStrokeWidth_ = width;
+    return true;
+}
+
+
+UIView *HorizonProgressComponent::GetComponentRootView() const
+{
+    return const_cast<UIBoxProgress *>(&progressView_);
+}
+
+bool HorizonProgressComponent::SetHorizonProgressStyle(const AppStyleItem *style)
+{
+    uint16_t stylePropNameId = GetStylePropNameId(style);
+
+    switch (stylePropNameId) {
+        // Get stroke width.
+        case K_STROKE_WIDTH: {
+            hStrokeWidth_ = GetStylePixelValue(style);
+            break;
+        }
+        // Set horizon progress style: color.
+        case K_COLOR: {
+            uint32_t color = 0;
+            uint8_t alpha = OPA_OPAQUE;
+            if (!GetStyleColorValue(style, color, alpha)) {
+                return false;
+            }
+            progressView_.SetForegroundStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
+            progressView_.SetForegroundStyle(STYLE_BACKGROUND_OPA, alpha);
+            break;
+        }
+        case K_BACKGROUND_COLOR: {
+            uint32_t color = 0;
+            uint8_t alpha = OPA_OPAQUE;
+            if (!GetStyleColorValue(style, color, alpha)) {
+                return false;
+            }
+            progressView_.SetBackgroundStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
+            progressView_.SetBackgroundStyle(STYLE_BACKGROUND_OPA, alpha);
+            break;
+        }
+        default: {
+            return false;
+        }
+    }
+    return true;
+}
+
+void HorizonProgressComponent::OnViewAttached()
+{
+    HandleExtraUpdate();
+}
+
+void HorizonProgressComponent::PostUpdate(uint16_t attrKeyId)
+{
+    UNUSED(attrKeyId);
+    HandleExtraUpdate();
+}
+
+void HorizonProgressComponent::HandleExtraUpdate()
+{
+    // set width & height of progress
+    if (progressView_.GetWidth() < 0) {
+        progressView_.SetValidWidth(0);
+    } else {
+        progressView_.SetValidWidth(progressView_.GetWidth());
+    }
+    progressView_.SetValidHeight(hStrokeWidth_);
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/horizon_progress_component.h b/frameworks/src/core/components/horizon_progress_component.h
new file mode 100644
index 0000000..774160e
--- /dev/null
+++ b/frameworks/src/core/components/horizon_progress_component.h
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_HORIZON_PROGRESS_COMPONENT_H
+#define OHOS_ACELITE_HORIZON_PROGRESS_COMPONENT_H
+
+#include "component.h"
+#include "non_copyable.h"
+#include "ui_abstract_progress.h"
+
+namespace OHOS {
+namespace ACELite {
+class HorizonProgressComponent final : public Component {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(HorizonProgressComponent);
+    HorizonProgressComponent() = delete;
+    HorizonProgressComponent(jerry_value_t options, jerry_value_t children, AppStyleManager* styleManager);
+    ~HorizonProgressComponent() override {}
+
+protected:
+    UIView *GetComponentRootView() const override;
+    bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
+    bool ApplyPrivateStyle(const AppStyleItem* style) override;
+    void PostUpdate(uint16_t attrKeyId) override;
+    void OnViewAttached() override;
+    void HandleExtraUpdate();
+    bool CreateNativeViews() override;
+
+private:
+    bool SetHorizonProgressStyle(const AppStyleItem* style);
+    UIBoxProgress progressView_;
+    int16_t hStrokeWidth_;
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_HORIZON_PROGRESS_COMPONENT_H
diff --git a/src/core/components/image_animator_component.cpp b/frameworks/src/core/components/image_animator_component.cpp
similarity index 86%
rename from src/core/components/image_animator_component.cpp
rename to frameworks/src/core/components/image_animator_component.cpp
index f06c194..6eacce0 100755
--- a/src/core/components/image_animator_component.cpp
+++ b/frameworks/src/core/components/image_animator_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -30,6 +30,8 @@ constexpr char FUNC_GET_STATE[] = "getState";
 constexpr char STATUS_PLAYING[] = "playing";
 constexpr char STATUS_PAUSED[] = "paused";
 constexpr char STATUS_STOPED[] = "stopped";
+constexpr char FILL_MODE_FORWRADS[] = "forwards";
+constexpr char FILL_MODE_NONE[] = "none";
 
 ImageAnimatorComponent::ImageAnimatorComponent(jerry_value_t options,
                                                jerry_value_t children,
@@ -53,13 +55,12 @@ ImageAnimatorComponent::ImageAnimatorComponent(jerry_value_t options,
 bool ImageAnimatorComponent::CreateNativeViews()
 {
     viewGroup_ = new UIViewGroup();
-
     if (viewGroup_ == nullptr) {
         return false;
     }
     viewGroup_->SetStyle(STYLE_BACKGROUND_OPA, OPA_TRANSPARENT);
-    imageAnimator_ = new UIImageAnimatorView();
 
+    imageAnimator_ = new UIImageAnimatorView();
     if (imageAnimator_ == nullptr) {
         delete (viewGroup_);
         viewGroup_ = nullptr;
@@ -82,6 +83,19 @@ void ImageAnimatorComponent::ReleaseNativeViews()
     ACE_DELETE(onStopListener_);
 }
 
+void ImageAnimatorComponent::SetViewExtraMsg()
+{
+    jerry_value_t *elementPtr = GetDomElementPointer();
+    UIView::ViewExtraMsg *extraMsg = new UIView::ViewExtraMsg();
+    if (extraMsg == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Failed to mapping native view with DOM element.");
+        return;
+    }
+    extraMsg->elementPtr = (void *)elementPtr;
+    viewGroup_->SetExtraMsg(extraMsg);
+    imageAnimator_->SetExtraMsg(extraMsg);
+}
+
 inline UIView *ImageAnimatorComponent::GetComponentRootView() const
 {
     return viewGroup_;
@@ -90,6 +104,8 @@ inline UIView *ImageAnimatorComponent::GetComponentRootView() const
 bool ImageAnimatorComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
 {
     switch (attrKeyId) {
+        case K_FILL_MODE:
+            return ParseToFillMode(attrValue);
         case K_FIXED_SIZE:
             return ParseToFixedSize(attrValue);
         case K_IMAGES:
@@ -110,14 +126,16 @@ void ImageAnimatorComponent::PostRender()
     UpdateAnimator();
 }
 
-void ImageAnimatorComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
+void ImageAnimatorComponent::PostUpdate(uint16_t attrKeyId)
 {
     if ((K_IMAGES == attrKeyId) || (K_DURATION == attrKeyId)) {
         UpdateAnimator();
     }
 }
 
-bool ImageAnimatorComponent::RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
+bool ImageAnimatorComponent::RegisterPrivateEventListener(uint16_t eventTypeId,
+                                                          jerry_value_t funcValue,
+                                                          bool isStopPropagation)
 {
     if (eventTypeId == K_STOP) {
         onStopListener_ = new ImageAnimatorStopListener(funcValue);
@@ -132,6 +150,26 @@ bool ImageAnimatorComponent::RegisterPrivateEventListener(uint16_t eventTypeId,
     return false;
 }
 
+bool ImageAnimatorComponent::ParseToFillMode(jerry_value_t value) const
+{
+    uint16_t size = 0;
+    char *fillMode = MallocStringOf(value, &size);
+    if (size == 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "fillmode is null or empty.");
+        ACE_FREE(fillMode);
+        return false;
+    }
+    if (!strcmp(fillMode, FILL_MODE_NONE)) {
+        imageAnimator_->SetFillMode(false);
+    } else if (!strcmp(fillMode, FILL_MODE_FORWRADS)) {
+        imageAnimator_->SetFillMode(true);
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "fillmode is invalid.");
+    }
+    ACE_FREE(fillMode);
+    return true;
+}
+
 bool ImageAnimatorComponent::ParseToFixedSize(jerry_value_t value) const
 {
     if (!jerry_value_is_boolean(value)) {
@@ -150,9 +188,9 @@ void ImageAnimatorComponent::ReleaseFrame()
 
     for (uint8_t idx = 0; idx < framesSize_; ++idx) {
         ImageAnimatorInfo frame = frames_[idx];
-        if (frame.imageInfo != nullptr) {
-            ace_free(const_cast<char *>(frame.imageInfo));
-            frame.imageInfo = nullptr;
+        if (frame.imagePath != nullptr) {
+            ace_free(const_cast<char *>(frame.imagePath));
+            frame.imagePath = nullptr;
         }
     }
     ACE_FREE(frames_);
@@ -194,7 +232,7 @@ bool ImageAnimatorComponent::ParseToFrames(jerry_value_t value)
         }
 
         ImageAnimatorInfo frame = {0};
-        frame.imageInfo = ParseImageSrc(src);
+        frame.imagePath = ParseImageSrc(src);
         jerry_release_value(src);
         frame.width = JerryGetIntegerProperty(image, ATTR_WIDTH);
         frame.height = JerryGetIntegerProperty(image, ATTR_HEIGHT);
@@ -202,6 +240,7 @@ bool ImageAnimatorComponent::ParseToFrames(jerry_value_t value)
         point.x = JerryGetIntegerProperty(image, ATTR_LEFT);
         point.y = JerryGetIntegerProperty(image, ATTR_TOP);
         frame.pos = point;
+        frame.imageType = IMG_SRC_FILE_PATH;
         jerry_release_value(image);
         frames_[idx] = frame;
     }
@@ -255,7 +294,7 @@ bool ImageAnimatorComponent::ParseToDuration(jerry_value_t value)
 void ImageAnimatorComponent::UpdateAnimator() const
 {
     if (frames_ != nullptr && framesSize_ != 0 && duration_ != nullptr) {
-        imageAnimator_->SetImageAnimatorSrc(reinterpret_cast<const char *>(frames_), framesSize_);
+        imageAnimator_->SetImageAnimatorSrc(frames_, framesSize_);
 
         int32_t millions = ParseToMilliseconds(duration_);
         uint16_t timeOfUpdate = 0;
@@ -275,6 +314,7 @@ jerry_value_t ImageAnimatorComponent::StartAnimator(const jerry_value_t func,
                                                     const jerry_value_t args[],
                                                     const jerry_length_t size)
 {
+    UNUSED(func);
     ImageAnimatorComponent *component =
         static_cast<ImageAnimatorComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
     if (component == nullptr) {
@@ -294,6 +334,7 @@ jerry_value_t ImageAnimatorComponent::PauseAnimator(const jerry_value_t func,
                                                     const jerry_value_t args[],
                                                     const jerry_length_t size)
 {
+    UNUSED(func);
     ImageAnimatorComponent *component =
         static_cast<ImageAnimatorComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
     if (component == nullptr) {
@@ -313,6 +354,7 @@ jerry_value_t ImageAnimatorComponent::ResumeAnimator(const jerry_value_t func,
                                                      const jerry_value_t args[],
                                                      const jerry_length_t size)
 {
+    UNUSED(func);
     ImageAnimatorComponent *component =
         static_cast<ImageAnimatorComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
     if (component == nullptr) {
@@ -332,6 +374,7 @@ jerry_value_t ImageAnimatorComponent::StopAnimator(const jerry_value_t func,
                                                    const jerry_value_t args[],
                                                    const jerry_length_t size)
 {
+    UNUSED(func);
     ImageAnimatorComponent *component =
         static_cast<ImageAnimatorComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
     if (component == nullptr) {
@@ -352,6 +395,7 @@ jerry_value_t ImageAnimatorComponent::GetAnimatorState(const jerry_value_t func,
                                                        const jerry_value_t args[],
                                                        const jerry_length_t size)
 {
+    UNUSED(func);
     ImageAnimatorComponent *component =
         static_cast<ImageAnimatorComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
     if (component == nullptr) {
diff --git a/src/core/components/image_animator_component.h b/frameworks/src/core/components/image_animator_component.h
old mode 100755
new mode 100644
similarity index 94%
rename from src/core/components/image_animator_component.h
rename to frameworks/src/core/components/image_animator_component.h
index 3926576..a571d15
--- a/src/core/components/image_animator_component.h
+++ b/frameworks/src/core/components/image_animator_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -58,14 +58,16 @@ public:
 protected:
     bool CreateNativeViews() override;
     void ReleaseNativeViews() override;
+    void SetViewExtraMsg() override;
     UIView *GetComponentRootView() const override;
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
     void PostRender() override;
-    void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
-    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue) override;
+    void PostUpdate(uint16_t attrKeyId) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation) override;
 
 private:
     void ReleaseFrame();
+    bool ParseToFillMode(jerry_value_t value) const;
     bool ParseToFixedSize(jerry_value_t value) const;
     bool ParseToFrames(jerry_value_t value);
     bool ParseToIteration(jerry_value_t value) const;
diff --git a/src/core/components/image_component.cpp b/frameworks/src/core/components/image_component.cpp
old mode 100755
new mode 100644
similarity index 62%
rename from src/core/components/image_component.cpp
rename to frameworks/src/core/components/image_component.cpp
index 9542ba0..244e550
--- a/src/core/components/image_component.cpp
+++ b/frameworks/src/core/components/image_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -24,37 +24,23 @@
 namespace OHOS {
 namespace ACELite {
 ImageComponent::ImageComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *styleManager)
-    : Component(options, children, styleManager), imageView_(nullptr)
+    : Component(options, children, styleManager)
 {
     SetComponentName(K_IMAGE);
 }
 
 bool ImageComponent::CreateNativeViews()
 {
-    imageView_ = new UIImageView();
-
-    if (imageView_ == nullptr) {
-        return false;
-    } else {
-        // set default value
-        imageView_->SetAutoEnable(false);
-        const int16_t defaultOpacity = 0;
-        imageView_->SetStyle(STYLE_BACKGROUND_OPA, defaultOpacity);
-    }
+    // set default value
+    imageView_.SetAutoEnable(false);
+    const int16_t defaultOpacity = 0;
+    imageView_.SetStyle(STYLE_BACKGROUND_OPA, defaultOpacity);
     return true;
 }
 
-void ImageComponent::ReleaseNativeViews()
-{
-    if (imageView_) {
-        delete imageView_;
-        imageView_ = nullptr;
-    }
-}
-
 inline UIView *ImageComponent::GetComponentRootView() const
 {
-    return imageView_;
+    return const_cast<UIImageView *>(&imageView_);
 }
 
 bool ImageComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
@@ -63,7 +49,7 @@ bool ImageComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrV
     switch (attrKeyId) {
         case K_SRC: {
             char *src = const_cast<char *>(ParseImageSrc(attrValue));
-            imageView_->SetSrc(src);
+            imageView_.SetSrc(src);
             ACE_FREE(src);
             break;
         }
@@ -74,18 +60,5 @@ bool ImageComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrV
 
     return setResult;
 }
-
-bool ImageComponent::ApplyPrivateStyle(const AppStyleItem *style)
-{
-    uint16_t styleKey = style->GetPropNameId();
-    switch (styleKey) {
-        case K_OPACITY: {
-            SetOpacity(*imageView_, *style);
-            return true;
-        }
-        default:
-            return false;
-    }
-}
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/image_component.h b/frameworks/src/core/components/image_component.h
old mode 100755
new mode 100644
similarity index 88%
rename from src/core/components/image_component.h
rename to frameworks/src/core/components/image_component.h
index 3f1e2ee..7fe8633
--- a/src/core/components/image_component.h
+++ b/frameworks/src/core/components/image_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -33,13 +33,11 @@ public:
 
 protected:
     bool CreateNativeViews() override;
-    void ReleaseNativeViews() override;
     UIView *GetComponentRootView() const override;
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
-    bool ApplyPrivateStyle(const AppStyleItem *style) override;
 
 private:
-    UIImageView *imageView_;
+    UIImageView imageView_;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/frameworks/src/core/components/input_button_component.cpp b/frameworks/src/core/components/input_button_component.cpp
new file mode 100755
index 0000000..6172a98
--- /dev/null
+++ b/frameworks/src/core/components/input_button_component.cpp
@@ -0,0 +1,251 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "input_button_component.h"
+#include "ace_log.h"
+#include "ace_mem_base.h"
+#include "font/ui_font_header.h"
+#include "js_app_context.h"
+#include "js_fwk_common.h"
+#include "key_parser.h"
+#include "keys.h"
+#include "product_adapter.h"
+#include "ui_button.h"
+
+namespace OHOS {
+namespace ACELite {
+bool InputButtonComponent::CreateNativeViews()
+{
+    fontSize_ = ProductAdapter::GetDefaultFontSize();
+    // set font family
+    if (!CopyFontFamily(fontFamily_, ProductAdapter::GetDefaultFontFamilyName())) {
+        return false;
+    }
+    const uint8_t defaultWidth = 100;
+    const uint8_t defaultHeight = 50;
+    button_.SetWidth(defaultWidth);
+    button_.SetHeight(defaultHeight);
+    button_.SetStateForStyle(UIButton::ButtonState::PRESSED);
+    button_.SetStyle(STYLE_BACKGROUND_OPA, OPA_OPAQUE);
+    button_.SetStateForStyle(UIButton::ButtonState::RELEASED);
+    button_.SetStyle(STYLE_BACKGROUND_OPA, OPA_OPAQUE);
+    return true;
+}
+
+void InputButtonComponent::ReleaseNativeViews()
+{
+    if (clickListener_ != nullptr) {
+        delete clickListener_;
+        clickListener_ = nullptr;
+    }
+    ACE_FREE(textValue_);
+    ACE_FREE(fontFamily_);
+    ACE_FREE(normalBackGroundImg_);
+    ACE_FREE(pressedBackGroundImg_);
+}
+bool InputButtonComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
+{
+    switch (attrKeyId) {
+        case K_VALUE:
+            ACE_FREE(textValue_);
+            textValue_ = MallocStringOf(attrValue);
+            return true;
+        default:
+            return false;
+    }
+}
+
+bool InputButtonComponent::ApplyPrivateStyle(const AppStyleItem *style)
+{
+    bool result = true;
+    uint16_t styleKey = GetStylePropNameId(style);
+    switch (styleKey) {
+        case K_FONT_SIZE:
+            result = SetFontSize(style);
+            break;
+        case K_FONT_FAMILY:
+            if (IsStyleValueTypeString(style)) {
+                // the style would be freed after this method
+                result = CopyFontFamily(fontFamily_, GetStyleStrValue(style));
+            } else {
+                result = false;
+            }
+            break;
+        case K_TEXT_ALIGN:
+            result = SetTextAlign(style);
+            break;
+        case K_COLOR:
+            result = SetColor(*style);
+            break;
+        case K_BACKGROUND_COLOR:
+            result = SetBackgroundColor(*style);
+            break;
+        case K_BACKGROUND_IMAGE:
+            result = HandleBackgroundImg(*style, pressedBackGroundImg_, normalBackGroundImg_);
+            break;
+        case K_PADDING:
+        // fall through
+        case K_PADDING_BOTTOM:
+        // fall through
+        case K_PADDING_LEFT:
+        // fall through
+        case K_PADDING_RIGHT:
+        // fall through
+        case K_PADDING_TOP:
+        // fall through
+        case K_BORDER_BOTTOM_WIDTH:
+        // fall through
+        case K_BORDER_LEFT_WIDTH:
+        // fall through
+        case K_BORDER_RIGHT_WIDTH:
+        // fall through
+        case K_BORDER_TOP_WIDTH:
+        // fall through
+        case K_BORDER_WIDTH:
+        // fall through
+        case K_BORDER_BOTTOM_COLOR:
+        // fall through
+        case K_BORDER_LEFT_COLOR:
+        // fall through
+        case K_BORDER_RIGHT_COLOR:
+        // fall through
+        case K_BORDER_TOP_COLOR:
+        // fall through
+        case K_BORDER_COLOR:
+        // fall through
+        case K_BORDER_RADIUS: {
+            button_.SetStateForStyle(UIButton::ButtonState::PRESSED);
+            bool pressResult = ApplyCommonStyle(button_, style);
+            button_.SetStateForStyle(UIButton::ButtonState::RELEASED);
+            bool releaseResult = ApplyCommonStyle(button_, style);
+            result = pressResult && releaseResult;
+            break;
+        }
+        default:
+            result = false;
+            break;
+    }
+    return result;
+}
+
+bool InputButtonComponent::SetBackgroundColor(const AppStyleItem &style)
+{
+    if (style.GetPseudoClassType() != PSEUDO_CLASS_ACTIVE) {
+        // let parent handle the normal state background color style,
+        // will be set for released state style of ui button
+        button_.SetStateForStyle(UIButton::ButtonState::PRESSED);
+        Component::SetBackgroundColor(button_, style);
+        button_.SetStateForStyle(UIButton::ButtonState::RELEASED);
+        Component::SetBackgroundColor(button_, style);
+        return true;
+    }
+    uint32_t color = 0;
+    uint8_t alpha = OPA_OPAQUE;
+    if (!GetStyleColorValue(&style, color, alpha)) {
+        return false;
+    }
+    pressedBackGroundColorValue_ = color;
+    pressedOpacityValue_ = alpha;
+    return true;
+}
+
+bool InputButtonComponent::SetColor(const AppStyleItem &style)
+{
+    uint32_t color = 0;
+    uint8_t alpha = OPA_OPAQUE;
+    if (GetStyleColorValue(&style, color, alpha)) {
+        button_.SetLabelStyle(STYLE_TEXT_COLOR, GetRGBColor(color).full);
+        button_.SetLabelStyle(STYLE_TEXT_OPA, alpha);
+        return true;
+    }
+    return false;
+}
+
+bool InputButtonComponent::SetTextAlign(const AppStyleItem *style)
+{
+    if ((!IsStyleValueTypeString(style)) || (!GetStyleStrValue(style))) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the type of style align is error");
+        return false;
+    }
+    uint16_t valueId = KeyParser::ParseKeyId(GetStyleStrValue(style), GetStyleStrValueLen(style));
+    switch (valueId) {
+        case K_LEFT:
+            button_.SetAlign(UITextLanguageAlignment::TEXT_ALIGNMENT_LEFT);
+            return true;
+        case K_CENTER:
+            button_.SetAlign(UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER);
+            return true;
+        case K_RIGHT:
+            button_.SetAlign(UITextLanguageAlignment::TEXT_ALIGNMENT_RIGHT);
+            return true;
+        default:
+            HILOG_ERROR(HILOG_MODULE_ACE, "the value of text-align in input component is error");
+            return false;
+    }
+}
+
+bool InputButtonComponent::SetFontSize(const AppStyleItem *style)
+{
+    fontSize_ = GetStylePixelValue(style);
+    return true;
+}
+void InputButtonComponent::PostRender()
+{
+    if (textValue_ != nullptr && fontFamily_ != nullptr) {
+        button_.SetFont(fontFamily_, fontSize_);
+        button_.SetText(textValue_);
+    }
+    if (clickListener_ != nullptr) {
+        button_.SetOnClickListener(clickListener_);
+    }
+    if (pressedBackGroundColorValue_ >= 0) {
+        button_.SetStateForStyle(UIButton::ButtonState::PRESSED);
+        button_.SetStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(pressedBackGroundColorValue_).full);
+        button_.SetStyle(STYLE_BACKGROUND_OPA, pressedOpacityValue_);
+    }
+    if (normalBackGroundImg_ != nullptr || pressedBackGroundImg_ != nullptr) {
+        // make sure the normal and pressed image same in case user only set one of them
+        char *normalImg = (normalBackGroundImg_ == nullptr) ? pressedBackGroundImg_ : normalBackGroundImg_;
+        char *pressedImg = (pressedBackGroundImg_ == nullptr) ? normalBackGroundImg_ : pressedBackGroundImg_;
+        button_.SetImageSrc(normalImg, pressedImg);
+    }
+    ACE_FREE(normalBackGroundImg_);
+    ACE_FREE(pressedBackGroundImg_);
+}
+
+void InputButtonComponent::PostUpdate(uint16_t attrKeyId)
+{
+    if (!KeyParser::IsKeyValid(attrKeyId)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "input component post update check args failed");
+        return;
+    }
+    switch (attrKeyId) {
+        case K_VALUE:
+            if (textValue_ != nullptr) {
+                button_.SetText(textValue_);
+            }
+            break;
+        case K_FONT_SIZE:
+        case K_FONT_FAMILY:
+            if (fontFamily_ != nullptr) {
+                button_.SetFont(fontFamily_, fontSize_);
+            }
+            break;
+        default:
+            break;
+    }
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/src/core/components/input_component.h b/frameworks/src/core/components/input_button_component.h
similarity index 61%
rename from src/core/components/input_component.h
rename to frameworks/src/core/components/input_button_component.h
index 6030319..6c39371 100755
--- a/src/core/components/input_component.h
+++ b/frameworks/src/core/components/input_button_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2021 Huawei Device 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
@@ -12,28 +12,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-#ifndef OHOS_ACELITE_INPUT_COMPONENT_H
-#define OHOS_ACELITE_INPUT_COMPONENT_H
+#ifndef OHOS_ACELITE_INPUT_BUTTON_COMPONENT_H
+#define OHOS_ACELITE_INPUT_BUTTON_COMPONENT_H
 #include "component.h"
 #include "key_parser.h"
 #include "non_copyable.h"
-#include "ui_checkbox.h"
 #include "ui_label_button.h"
-#include "ui_radio_button.h"
 
 namespace OHOS {
 namespace ACELite {
-class InputComponent final : public Component {
+class InputButtonComponent final : public Component {
 public:
-    ACE_DISALLOW_COPY_AND_MOVE(InputComponent);
-    InputComponent() = delete;
-    InputComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *manager)
+    ACE_DISALLOW_COPY_AND_MOVE(InputButtonComponent);
+    InputButtonComponent() = delete;
+    InputButtonComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *manager)
         : Component(options, children, manager),
           options_(options),
-          checkbox_(nullptr),
-          button_(nullptr),
-          radioButton_(nullptr),
-          changeListener_(nullptr),
           clickListener_(nullptr),
           pressedBackGroundColorValue_(-1),
           normalBackGroundImg_(nullptr),
@@ -46,41 +40,29 @@ public:
         pressedOpacityValue_ = pressedOpacityValue;
         SetComponentName(K_INPUT);
     }
-    ~InputComponent() override {}
+    ~InputButtonComponent() override {};
     bool CreateNativeViews() override;
     void ReleaseNativeViews() override;
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
-    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue) override;
     bool ApplyPrivateStyle(const AppStyleItem *style) override;
     void PostRender() override;
-    void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
+    void PostUpdate(uint16_t attrKeyId) override;
 
 protected:
     UIView *GetComponentRootView() const override
     {
-        if (checkbox_ != nullptr) {
-            return checkbox_;
-        } else if (radioButton_ != nullptr) {
-            return radioButton_;
-        } else {
-            return button_;
-        }
+        return const_cast<UILabelButton *>(&button_);
     }
 
 private:
-    bool SetTextAlign(const AppStyleItem *style) const;
+    bool SetTextAlign(const AppStyleItem *style);
     bool SetFontSize(const AppStyleItem *style);
-    bool HandleButtonBackGroundImg(const AppStyleItem &styleItem);
     void DealEvent();
-    void CreateCheckboxOrRadio();
     bool SetBackgroundColor(const AppStyleItem &style);
-    bool SetColor(const AppStyleItem &style) const;
+    bool SetColor(const AppStyleItem &style);
     bool HandleImage(const AppStyleItem &style);
     jerry_value_t options_;
-    UICheckBox *checkbox_;
-    UILabelButton *button_;
-    UIRadioButton *radioButton_;
-    StateChangeListener *changeListener_;
+    UILabelButton button_;
     ViewOnClickListener *clickListener_;
     int32_t pressedBackGroundColorValue_;
     uint8_t pressedOpacityValue_;
@@ -92,4 +74,4 @@ private:
 };
 } // namespace ACELite
 } // namespace OHOS
-#endif // OHOS_ACELITE_INPUT_COMPONENT_H
+#endif // OHOS_ACELITE_INPUT_BUTTON_COMPONENT_H
diff --git a/frameworks/src/core/components/input_checkbox_component.cpp b/frameworks/src/core/components/input_checkbox_component.cpp
new file mode 100755
index 0000000..f4021ca
--- /dev/null
+++ b/frameworks/src/core/components/input_checkbox_component.cpp
@@ -0,0 +1,126 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "input_checkbox_component.h"
+#include "ace_log.h"
+#include "ace_mem_base.h"
+#include "js_app_context.h"
+#include "js_fwk_common.h"
+#include "key_parser.h"
+#include "keys.h"
+
+namespace OHOS {
+namespace ACELite {
+InputCheckboxComponent::~InputCheckboxComponent()
+{
+    if (changeListener_ != nullptr) {
+        delete changeListener_;
+        changeListener_ = nullptr;
+    }
+    if (clickListener_ != nullptr) {
+        delete clickListener_;
+        clickListener_ = nullptr;
+    }
+    ACE_FREE(normalBackGroundImg_);
+    ACE_FREE(pressedBackGroundImg_);
+}
+
+bool InputCheckboxComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
+{
+    switch (attrKeyId) {
+        case K_CHECKED:
+            // set the state of checkbox and radioButton
+            if (jerry_value_is_boolean(attrValue)) {
+                bool checked = jerry_get_boolean_value(attrValue);
+                UICheckBox::UICheckBoxState state =
+                    checked ? UICheckBox::UICheckBoxState::SELECTED : UICheckBox::UICheckBoxState::UNSELECTED;
+                checkbox_.SetState(state);
+                return true;
+            }
+            HILOG_ERROR(HILOG_MODULE_ACE, "the checkbox checked is error value");
+            return false;
+        default:
+            return false;
+    }
+}
+
+bool InputCheckboxComponent::RegisterPrivateEventListener(uint16_t eventTypeId,
+                                                          jerry_value_t funcValue,
+                                                          bool isStopPropagation)
+{
+    if (eventTypeId == K_CHANGE) {
+        changeListener_ = new StateChangeListener(funcValue);
+        if (changeListener_ == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create change listener failed");
+            return false;
+        }
+        return true;
+    }
+    if (eventTypeId == K_CLICK) {
+        clickListener_ = new ViewOnClickListener(funcValue, isStopPropagation);
+        if (clickListener_ == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create click listener failed");
+            return false;
+        }
+        return true;
+    }
+    HILOG_DEBUG(HILOG_MODULE_ACE, "go to common click event");
+    return false;
+}
+
+bool InputCheckboxComponent::ApplyPrivateStyle(const AppStyleItem *style)
+{
+    uint16_t styleKey = GetStylePropNameId(style);
+    if (styleKey == K_BACKGROUND_IMAGE) {
+        return HandleBackgroundImg(*style, pressedBackGroundImg_, normalBackGroundImg_);
+    }
+
+    return false;
+}
+
+void InputCheckboxComponent::PostRender()
+{
+    DealEvent();
+    ACE_FREE(normalBackGroundImg_);
+    ACE_FREE(pressedBackGroundImg_);
+}
+
+void InputCheckboxComponent::DealEvent()
+{
+    if (changeListener_ != nullptr) {
+        bool state = (checkbox_.GetState() == UICheckBox::UICheckBoxState::SELECTED);
+        changeListener_->SetState(state);
+        checkbox_.SetOnChangeListener(changeListener_);
+        if (clickListener_ == nullptr) {
+            // trigger changeEvent
+            clickListener_ = new ViewOnClickListener(UNDEFINED, true);
+            if (clickListener_ == nullptr) {
+                HILOG_ERROR(HILOG_MODULE_ACE, "create click listener failed");
+                return;
+            }
+        }
+        clickListener_->SetComponentListener(changeListener_);
+        checkbox_.SetOnClickListener(clickListener_);
+    }
+
+    if (normalBackGroundImg_ != nullptr || pressedBackGroundImg_ != nullptr) {
+        // make sure the normal and pressed image same in case user only set one of them
+        char *normalImg = (normalBackGroundImg_ == nullptr) ? pressedBackGroundImg_ : normalBackGroundImg_;
+        char *pressedImg = (pressedBackGroundImg_ == nullptr) ? normalBackGroundImg_ : pressedBackGroundImg_;
+        checkbox_.SetImages(pressedImg, normalImg);
+    }
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/input_checkbox_component.h b/frameworks/src/core/components/input_checkbox_component.h
new file mode 100755
index 0000000..493041e
--- /dev/null
+++ b/frameworks/src/core/components/input_checkbox_component.h
@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef OHOS_ACELITE_INPUT_CHECKBOX_COMPONENT_H
+#define OHOS_ACELITE_INPUT_CHECKBOX_COMPONENT_H
+#include "component.h"
+#include "key_parser.h"
+#include "non_copyable.h"
+#include "ui_checkbox.h"
+
+namespace OHOS {
+namespace ACELite {
+class InputCheckboxComponent final : public Component {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(InputCheckboxComponent);
+    InputCheckboxComponent() = delete;
+    InputCheckboxComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *manager)
+        : Component(options, children, manager),
+          changeListener_(nullptr),
+          clickListener_(nullptr),
+          normalBackGroundImg_(nullptr),
+          pressedBackGroundImg_(nullptr)
+    {
+        SetComponentName(K_INPUT);
+    }
+    ~InputCheckboxComponent() override;
+    bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation) override;
+    bool ApplyPrivateStyle(const AppStyleItem *style) override;
+    void PostRender() override;
+
+protected:
+    UIView *GetComponentRootView() const override
+    {
+        return const_cast<UICheckBox *>(&checkbox_);
+    }
+
+private:
+    void DealEvent();
+    UICheckBox checkbox_;
+    StateChangeListener *changeListener_;
+    ViewOnClickListener *clickListener_;
+    char *normalBackGroundImg_;
+    char *pressedBackGroundImg_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_INPUT_CHECKBOX_COMPONENT_H
diff --git a/frameworks/src/core/components/input_radio_component.cpp b/frameworks/src/core/components/input_radio_component.cpp
new file mode 100755
index 0000000..ef5e64e
--- /dev/null
+++ b/frameworks/src/core/components/input_radio_component.cpp
@@ -0,0 +1,138 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "input_radio_component.h"
+#include "ace_log.h"
+#include "ace_mem_base.h"
+#include "js_app_context.h"
+#include "js_fwk_common.h"
+#include "key_parser.h"
+#include "keys.h"
+
+
+namespace OHOS {
+namespace ACELite {
+void InputRadioComponent::ReleaseNativeViews()
+{
+    if (changeListener_ != nullptr) {
+        delete changeListener_;
+        changeListener_ = nullptr;
+    }
+    if (clickListener_ != nullptr) {
+        delete clickListener_;
+        clickListener_ = nullptr;
+    }
+    ACE_FREE(normalBackGroundImg_);
+    ACE_FREE(pressedBackGroundImg_);
+}
+bool InputRadioComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
+{
+    switch (attrKeyId) {
+        case K_CHECKED: {
+            if (jerry_value_is_boolean(attrValue)) {
+                bool checked = jerry_get_boolean_value(attrValue);
+                UICheckBox::UICheckBoxState state =
+                    checked ? UICheckBox::UICheckBoxState::SELECTED : UICheckBox::UICheckBoxState::UNSELECTED;
+                radioButton_.SetState(state);
+                return true;
+            }
+            HILOG_ERROR(HILOG_MODULE_ACE, "the checkbox checked is error value");
+            return false;
+        }
+        case K_NAME: {
+            char *name = MallocStringOf(attrValue);
+            if (name == nullptr) {
+                const char * const tmpName = "";
+                radioButton_.SetName(tmpName);
+            } else {
+                radioButton_.SetName(name);
+                ACE_FREE(name);
+            }
+            return true;
+        }
+        default:
+            break;
+    }
+    return false;
+}
+
+bool InputRadioComponent::RegisterPrivateEventListener(uint16_t eventTypeId,
+                                                       jerry_value_t funcValue,
+                                                       bool isStopPropagation)
+{
+    if (eventTypeId == K_CHANGE) {
+        changeListener_ = new StateChangeListener(funcValue);
+        if (changeListener_ == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create change listener failed");
+            return false;
+        }
+        return true;
+    }
+    if (eventTypeId == K_CLICK) {
+        clickListener_ = new ViewOnClickListener(funcValue, isStopPropagation);
+        if (clickListener_ == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create click listener failed");
+            return false;
+        }
+        return true;
+    }
+    return false;
+}
+
+bool InputRadioComponent::ApplyPrivateStyle(const AppStyleItem *style)
+{
+    uint16_t styleKey = GetStylePropNameId(style);
+    if (styleKey == K_BACKGROUND_IMAGE) {
+        return HandleBackgroundImg(*style, pressedBackGroundImg_, normalBackGroundImg_);
+    }
+    return false;
+}
+
+void InputRadioComponent::PostRender()
+{
+    DealEvent();
+    ACE_FREE(normalBackGroundImg_);
+    ACE_FREE(pressedBackGroundImg_);
+}
+
+void InputRadioComponent::DealEvent()
+{
+    if (changeListener_ != nullptr) {
+        bool state = (radioButton_.GetState() == UICheckBox::UICheckBoxState::SELECTED);
+        changeListener_->SetState(state);
+        radioButton_.SetOnChangeListener(changeListener_);
+    }
+
+    if (clickListener_ == nullptr) {
+        // trigger changeEvent
+        clickListener_ = new ViewOnClickListener(UNDEFINED, true);
+        if (clickListener_ == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create click listener failed");
+            return;
+        }
+    }
+
+    clickListener_->SetComponentListener(changeListener_);
+    radioButton_.SetOnClickListener(clickListener_);
+
+    if (normalBackGroundImg_ != nullptr || pressedBackGroundImg_ != nullptr) {
+        // make sure the normal and pressed image same in case user only set one of them
+        char *normalImg = (normalBackGroundImg_ == nullptr) ? pressedBackGroundImg_ : normalBackGroundImg_;
+        char *pressedImg = (pressedBackGroundImg_ == nullptr) ? normalBackGroundImg_ : pressedBackGroundImg_;
+        radioButton_.SetImages(pressedImg, normalImg);
+    }
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/input_radio_component.h b/frameworks/src/core/components/input_radio_component.h
new file mode 100755
index 0000000..12df8ef
--- /dev/null
+++ b/frameworks/src/core/components/input_radio_component.h
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef OHOS_ACELITE_INPUT_RADIO_COMPONENT_H
+#define OHOS_ACELITE_INPUT_RADIO_COMPONENT_H
+#include "component.h"
+#include "key_parser.h"
+#include "non_copyable.h"
+#include "ui_radio_button.h"
+
+namespace OHOS {
+namespace ACELite {
+class InputRadioComponent final : public Component {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(InputRadioComponent);
+    InputRadioComponent() = delete;
+    InputRadioComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *manager)
+        : Component(options, children, manager),
+          changeListener_(nullptr),
+          clickListener_(nullptr),
+          normalBackGroundImg_(nullptr),
+          pressedBackGroundImg_(nullptr)
+    {
+        SetComponentName(K_INPUT);
+    }
+    ~InputRadioComponent() override {}
+    void ReleaseNativeViews() override;
+    bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation) override;
+    bool ApplyPrivateStyle(const AppStyleItem *style) override;
+    void PostRender() override;
+
+protected:
+    UIView *GetComponentRootView() const override
+    {
+        return const_cast<UIRadioButton *>(&radioButton_);
+    }
+
+private:
+    void DealEvent();
+    UIRadioButton radioButton_;
+    StateChangeListener *changeListener_;
+    ViewOnClickListener *clickListener_;
+    char *normalBackGroundImg_;
+    char *pressedBackGroundImg_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_INPUT_RADIO_COMPONENT_H
diff --git a/src/core/components/list_adapter.cpp b/frameworks/src/core/components/list_adapter.cpp
similarity index 90%
rename from src/core/components/list_adapter.cpp
rename to frameworks/src/core/components/list_adapter.cpp
index 70af92e..57b04f5 100755
--- a/src/core/components/list_adapter.cpp
+++ b/frameworks/src/core/components/list_adapter.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -22,14 +22,17 @@
 #include "component_utils.h"
 #include "directive/descriptor_utils.h"
 #include "fatal_handler.h"
-#if ENABLED(SECURE_C_FUNCTION)
 #include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 
 namespace OHOS {
 namespace ACELite {
 ListAdapter::ListAdapter()
-    : listItems_(nullptr), headNode_(nullptr), tailNode_(nullptr), itemsCount_(0), listItemsCount_(0)
+    : listItems_(nullptr),
+      headNode_(nullptr),
+      tailNode_(nullptr),
+      itemsCount_(0),
+      listItemsCount_(0),
+      uiListContentParam_()
 {
 }
 
@@ -182,22 +185,19 @@ int16_t ListAdapter::CalculateItemIndex(int16_t itemIndex) const
     return FAILED;
 }
 
-// 1. get UIView according to index which will show in list.
-// 2. delete inView if it is not null(if inView not null, it means this view is out of the list visible area, need
-// delete.) if the UIView found belongs to "For type" child, need create it dynamically, or else just get it from native
-// Element.
 UIView *ListAdapter::GetView(UIView *inView, int16_t index)
 {
     if (index < 0) {
         return nullptr;
     }
-
-    // find listItemsIndex according the item index
+    // 1. get UIView according to index which will show in list.
     int16_t listItemsIndex = CalculateItemIndex(index);
     if (listItemsIndex < 0) {
         return nullptr;
     }
-    // delete "For type" UIView that are not visible in list
+    // 2. delete inView if it is not null(if inView not null, it means this view is out of the list visible area, need
+    // delete.) if the UIView found belongs to "For type" child, need create it dynamically,
+    // or else just get it from native Element.
     if (inView != nullptr) {
         // this function will check whether the inView is For type UIView, if it is, delete it, or else do nothing.
         DeleteItem(inView);
@@ -234,17 +234,14 @@ JSValue ListAdapter::GetElement(int16_t listItemsIndex, int16_t index, bool &isF
     // if it is a for or for+if type list-item, we need create view dynamically.
     if (isFor) {
         // get render argument
-        const int8_t argsLen = 2;
         JSValue item = jerry_get_property_by_index(getterRetList, index - startIndex);
         if (jerry_value_is_undefined(item)) {
             HILOG_ERROR(HILOG_MODULE_ACE, "List adapter: Get item from getterRetList failed.");
             return UNDEFINED;
         }
         JSValue itemIdx = jerry_create_number(index - startIndex);
-        JSValue args[argsLen];
-        args[0] = {item};
-        args[1] = {itemIdx};
-
+        const int8_t argsLen = 2;
+        JSValue args[argsLen] = {item, itemIdx};
         // get render function
         JSValue renderPropValue = jerryx_get_property_str(descriptorOrElement, DESCRIPTOR_ATTR_RENDER);
         if (!jerry_value_is_function(renderPropValue)) {
@@ -252,15 +249,13 @@ JSValue ListAdapter::GetElement(int16_t listItemsIndex, int16_t index, bool &isF
             ReleaseJerryValue(item, itemIdx, renderPropValue, VA_ARG_END_FLAG);
             return UNDEFINED;
         }
-
         // excute render function, get nativeElement
         JSValue nativeElement = CallJSFunction(renderPropValue, UNDEFINED, args, argsLen);
         if (jerry_value_is_undefined(nativeElement)) {
             ReleaseJerryValue(item, itemIdx, renderPropValue, nativeElement, VA_ARG_END_FLAG);
             return UNDEFINED;
         }
-
-        // if it is a for+if type list-item, here will ignore if attribure
+        // if it is a for+if type list-item, here will ignore if attribute
         if (DescriptorUtils::IsIfDescriptor(nativeElement)) {
             element = DescriptorUtils::GetDescriptorRendered(nativeElement);
             if (IS_UNDEFINED(element)) {
@@ -280,14 +275,24 @@ JSValue ListAdapter::GetElement(int16_t listItemsIndex, int16_t index, bool &isF
     } else { // if it is a common list-item
         element = descriptorOrElement;
     }
+    BuildItemViewTree(element);
     return element;
 }
 
+void ListAdapter::BuildItemViewTree(const JSValue element) const
+{
+    Component *component = ComponentUtils::GetComponentFromBindingObject(element);
+    if (component == nullptr) {
+        return;
+    }
+    ConstrainedParameter parentParam = uiListContentParam_;
+    Component::BuildViewTree(component, nullptr, parentParam);
+    component->OnViewAttached();
+}
+
 void ListAdapter::InsertItem(JSValue nativeElement, UIView *uiView)
 {
-    ViewNativePair *insertNode;
-
-    insertNode = (ViewNativePair *)ace_malloc(sizeof(ViewNativePair));
+    ViewNativePair *insertNode = reinterpret_cast<ViewNativePair *>(ace_malloc(sizeof(ViewNativePair)));
     if (insertNode == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "List adapter: insertNode failed to allocate memory!");
         return;
@@ -312,12 +317,8 @@ void ListAdapter::InsertItem(JSValue nativeElement, UIView *uiView)
 
 void ListAdapter::DeleteItem(const UIView *uiView)
 {
-    ViewNativePair *delNode;
-    ViewNativePair *preNode;
-
-    // delNode point to head node.
-    delNode = headNode_;
-    preNode = nullptr;
+    ViewNativePair *delNode = headNode_;
+    ViewNativePair *preNode = nullptr;
 
     // if viewNativePair not exsit, can not confirm whether the uiView is belongs For type child or common child,
     // although it can not be deleted, does not effect rendering new View.
@@ -348,7 +349,7 @@ void ListAdapter::DeleteItem(const UIView *uiView)
                 tailNode_ = preNode;
             }
         } else {
-            // Do nothing
+            HILOG_WARN(HILOG_MODULE_ACE, "item to be deleted is not found");
         }
 
         DescriptorUtils::ReleaseDescriptorOrElement(delNode->nativeElement);
@@ -371,5 +372,10 @@ void ListAdapter::CleanUp()
         listItems_ = nullptr;
     }
 }
+
+void ListAdapter::UpdateContentAlignParam(ConstrainedParameter param)
+{
+    uiListContentParam_ = param;
+}
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/list_adapter.h b/frameworks/src/core/components/list_adapter.h
old mode 100755
new mode 100644
similarity index 83%
rename from src/core/components/list_adapter.h
rename to frameworks/src/core/components/list_adapter.h
index b88bf37..b865e91
--- a/src/core/components/list_adapter.h
+++ b/frameworks/src/core/components/list_adapter.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -17,6 +17,7 @@
 #define OHOS_ACELITE_LIST_ADAPTER_H
 
 #include "abstract_adapter.h"
+#include "component.h"
 #include "js_fwk_common.h"
 #include "non_copyable.h"
 
@@ -45,8 +46,14 @@ public:
     ListAdapter();
     ~ListAdapter();
     bool Initialize(const JSValue descriptors);
-    // Get the view from index.
-    // if inView is null, adapter will new a view. if not, adapter will delete the inView and new a view.
+
+    /**
+     * @brief get view from index.
+     * if inView is null, adapter will new a view. if not, adapter will delete the inView and new a view.
+     * @param inview the list object
+     *        index the item index
+     * @return the special number view in list
+     */
     UIView *GetView(UIView *inView, int16_t index) override;
     void DeleteView(UIView *&view) override {}
 
@@ -57,6 +64,8 @@ public:
 
     void CleanUp();
 
+    void UpdateContentAlignParam(ConstrainedParameter param);
+
 private:
     bool GenerateListItems(const JSValue descriptors, int16_t size);
     int16_t CalculateItemIndex(int16_t itemIndex) const;
@@ -64,11 +73,14 @@ private:
     bool AddForDescriptorToList(JSValue descriptorOrElement, int16_t listItemsIndex) const;
     void InsertItem(JSValue nativeElement, UIView *uiView);
     void DeleteItem(const UIView *uiView);
+    void BuildItemViewTree(const JSValue element) const;
     ListItemValue *listItems_;
     ViewNativePair *headNode_;
     ViewNativePair *tailNode_;
     int16_t itemsCount_;
     int16_t listItemsCount_;
+    // the content area
+    ConstrainedParameter uiListContentParam_;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/list_component.cpp b/frameworks/src/core/components/list_component.cpp
similarity index 62%
rename from src/core/components/list_component.cpp
rename to frameworks/src/core/components/list_component.cpp
index c01df3a..0c14417 100755
--- a/src/core/components/list_component.cpp
+++ b/frameworks/src/core/components/list_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -26,62 +26,30 @@ namespace ACELite {
 const char * const ListComponent::FUNC_SCROLLTO = "scrollTo";
 const char * const ListComponent::INDEX_SCROLLTO = "index";
 ListComponent::ListComponent(JSValue options, JSValue children, AppStyleManager *styleManager)
-    : Component(options, children, styleManager),
-      list_(nullptr),
-      adapter_(nullptr),
-      combinedStyle_(nullptr),
-      listEventListener_(nullptr),
-      flexDirectionDefault("column")
+    : Component(options, children, styleManager)
 {
     SetComponentName(K_LIST);
     RegisterNamedFunction(FUNC_SCROLLTO, ListScrollTo);
-    combinedStyle_ = styleManager->GetCombinedStyle();
+#ifdef FEATURE_ROTATION_API
+    RegisterNamedFunction(FUNC_ROTATION_NAME, HandleRotationRequest);
+#endif // FEATURE_ROTATION_API
 }
 
 // Create list
 bool ListComponent::CreateNativeViews()
 {
-    if (combinedStyle_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "get list style failed");
-        return false;
-    }
-
-    // Step1. get list flex-direction
-    const AppStyleItem *item = combinedStyle_->GetStyleItemByNameId(K_FLEX_DIRECTION);
-    const char * const directionValue = (item == nullptr) ? flexDirectionDefault : item->GetStrValue();
-    if (directionValue == nullptr) {
-        return false;
-    }
-    size_t directionValueLength = (item == nullptr) ? strlen(flexDirectionDefault) : item->GetStrValueLen();
-    uint16_t directionValueId = KeyParser::ParseKeyId(directionValue, directionValueLength);
-    // Step2. create list
-    if (directionValueId == K_ROW) {
-        list_ = new UIList(UIList::HORIZONTAL);
-    } else {
-        list_ = new UIList(UIList::VERTICAL);
-    }
-
-    if (list_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "create native list view failed");
-        return false;
-    }
-
     // set list default attributes
-    list_->SetThrowDrag(true);
+    list_.SetThrowDrag(true);
     // list event listener position
     const int16_t listenPosition = 10;
-    list_->SetSelectPosition(listenPosition);
-
+    list_.SetSelectPosition(listenPosition);
     return true;
 }
 
 void ListComponent::ReleaseNativeViews()
 {
-    if (list_) {
-        list_->RemoveAll();
-        delete list_;
-        list_ = nullptr;
-    }
+    list_.RemoveAll();
+
     // only let list component release its children when the whole application
     // is not in fatal error handling process, as FatalHandler will do the recycle
     if (!FatalHandler::GetInstance().IsFatalErrorHandling()) {
@@ -89,32 +57,36 @@ void ListComponent::ReleaseNativeViews()
             DescriptorUtils::ReleaseDescriptorOrElements(GetDescriptors());
         }
     }
-    if (adapter_) {
-        delete adapter_;
-        adapter_ = nullptr;
-    }
-    if (listEventListener_) {
-        delete listEventListener_;
-        listEventListener_ = nullptr;
-    }
 }
 
 UIView *ListComponent::GetComponentRootView() const
 {
-    return list_;
+    return const_cast<UIList *>(&list_);
 }
 
-bool ListComponent::RegisterPrivateEventListener(uint16_t eventTypeId, JSValue funcValue)
+bool ListComponent::ApplyPrivateStyle(const AppStyleItem *style)
 {
-    if (listEventListener_ == nullptr) {
-        listEventListener_ = new ListEventListener();
-        if (listEventListener_ == nullptr) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "create list listener failed");
-            return false;
-        }
-        list_->SetScrollStateListener(listEventListener_);
+    uint16_t stylePropNameId = GetStylePropNameId(style);
+    if (stylePropNameId != K_FLEX_DIRECTION) {
+        return false;
     }
 
+    const char * const strValue = GetStyleStrValue(style);
+    if (strValue == nullptr) {
+        return true;
+    }
+
+    uint16_t valueId = KeyParser::ParseKeyId(strValue, GetStyleStrValueLen(style));
+    if (valueId == K_ROW) {
+        list_.SetDirection(UIList::HORIZONTAL);
+    }
+    return true;
+}
+
+bool ListComponent::RegisterPrivateEventListener(uint16_t eventTypeId, JSValue funcValue, bool isStopPropagation)
+{
+    list_.SetScrollStateListener(&listEventListener_);
+
     switch (eventTypeId) {
 // list specific event switch
 #ifdef FEATURE_LIST_SPECIFIC_EVENT_ENABLE
@@ -129,7 +101,7 @@ bool ListComponent::RegisterPrivateEventListener(uint16_t eventTypeId, JSValue f
 #endif // FEATURE_LIST_SPECIFIC_EVENT_ENABLE
         // when scroll end, this listening event will be triggered
         case K_SCROLLEND:
-            listEventListener_->SetBindScrollEndFuncName(funcValue);
+            listEventListener_.SetBindScrollEndFuncName(funcValue);
             break;
         default:
             return false;
@@ -150,32 +122,26 @@ bool ListComponent::ProcessChildren()
     HandleListForDireactive();
 
     // Step3. create list adapter
-    adapter_ = new ListAdapter();
-    if (adapter_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "create list adapter failed");
-        return false;
-    }
-    bool ret = adapter_->Initialize(descriptors);
+    bool ret = adapter_.Initialize(descriptors);
     if (!ret) {
-        delete adapter_;
-        adapter_ = nullptr;
         HILOG_ERROR(HILOG_MODULE_ACE, "Initialize list adapter failed.");
         return false;
     }
 
-    // Step4. add children to list dynamically.
-    list_->SetAdapter(adapter_);
-
     return true;
 }
 
+void ListComponent::OnViewAttached()
+{
+    ConstrainedParameter listParameter;
+    GetConstrainedParam(listParameter);
+    adapter_.UpdateContentAlignParam(listParameter);
+    // Step4. add children to list dynamically.
+    list_.SetAdapter(&adapter_);
+}
+
 bool ListComponent::UpdateForView()
 {
-    if ((adapter_ == nullptr) || (list_ == nullptr)) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "List Component: adapter or list is null, UpdateForView failed.");
-        return false;
-    }
-
     // Step1. get new children, if not exsit, return false.
     const JSValue descriptors = GetDescriptors();
     if (jerry_value_is_undefined(descriptors)) {
@@ -186,22 +152,22 @@ bool ListComponent::UpdateForView()
     // free listItems_ array memory and reset listItemCount_.
     // here not need delete UIView and free viewNativePair_ link list memory,
     // it will be excuted in RefreshList() function.
-    adapter_->CleanUp();
+    adapter_.CleanUp();
 
     // save all children's information into listItems_ array(contain For type child and common child).
-    bool ret = adapter_->Initialize(descriptors);
+    bool ret = adapter_.Initialize(descriptors);
     if (!ret) {
         HILOG_ERROR(HILOG_MODULE_ACE, "Initialize list adapter failed.");
         return false;
     }
 
     // refresh the list, load new child dynamically in list.
-    list_->RefreshList();
+    list_.RefreshList();
     return true;
 }
 
-JSValue
-    ListComponent::ListScrollTo(const JSValue func, const JSValue dom, const JSValue args[], const jerry_length_t size)
+JSValue ListComponent::ListScrollTo(const JSValue func, const JSValue dom,
+                                    const JSValue args[], const jerry_length_t size)
 {
     if (size != 1) {
         HILOG_ERROR(HILOG_MODULE_ACE, "scrollTo function parameter error");
diff --git a/src/core/components/list_component.h b/frameworks/src/core/components/list_component.h
similarity index 84%
rename from src/core/components/list_component.h
rename to frameworks/src/core/components/list_component.h
index e059df2..59db3ad 100755
--- a/src/core/components/list_component.h
+++ b/frameworks/src/core/components/list_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -33,16 +33,16 @@ protected:
     bool CreateNativeViews() override;
     void ReleaseNativeViews() override;
     UIView *GetComponentRootView() const override;
-    bool RegisterPrivateEventListener(uint16_t eventTypeId, JSValue funcValue) override;
+    bool ApplyPrivateStyle(const AppStyleItem* style) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId, JSValue funcValue, bool isStopPropagation) override;
     bool ProcessChildren() override;
+    void OnViewAttached() override;
     bool UpdateForView() override;
 
 private:
-    UIList *list_;
-    ListAdapter *adapter_;
-    const AppStyle *combinedStyle_;
-    ListEventListener *listEventListener_;
-    const char *flexDirectionDefault;
+    UIList list_;
+    ListAdapter adapter_;
+    ListEventListener listEventListener_;
     static const char * const FUNC_SCROLLTO;
     static const char * const INDEX_SCROLLTO;
     static JSValue ListScrollTo(const JSValue func, const JSValue dom, const JSValue args[], const jerry_length_t size);
diff --git a/src/core/components/marquee_component.cpp b/frameworks/src/core/components/marquee_component.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/components/marquee_component.cpp
rename to frameworks/src/core/components/marquee_component.cpp
diff --git a/src/core/components/marquee_component.h b/frameworks/src/core/components/marquee_component.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/components/marquee_component.h
rename to frameworks/src/core/components/marquee_component.h
diff --git a/src/core/components/panel_view.cpp b/frameworks/src/core/components/panel_view.cpp
similarity index 98%
rename from src/core/components/panel_view.cpp
rename to frameworks/src/core/components/panel_view.cpp
index 38095e6..41c42b7 100755
--- a/src/core/components/panel_view.cpp
+++ b/frameworks/src/core/components/panel_view.cpp
@@ -124,8 +124,8 @@ void PanelView::SetTextInPanel(UILabel *label)
 
 void PanelView::SetVideoSlider()
 {
-    if (videoSlider_ == nullptr || curTimeLabel_ == nullptr || totalTimeLabel_ == nullptr || playImage_ == nullptr
-        || mutedImage_ == nullptr) {
+    if (videoSlider_ == nullptr || curTimeLabel_ == nullptr || totalTimeLabel_ == nullptr ||
+        playImage_ == nullptr || mutedImage_ == nullptr) {
         return;
     }
     const int8_t sliderWidth = 5; // default slider width
diff --git a/src/core/components/panel_view.h b/frameworks/src/core/components/panel_view.h
similarity index 98%
rename from src/core/components/panel_view.h
rename to frameworks/src/core/components/panel_view.h
index 50c75fd..9045ee5 100755
--- a/src/core/components/panel_view.h
+++ b/frameworks/src/core/components/panel_view.h
@@ -27,7 +27,6 @@
 #include "ui_image_view.h"
 #include "ui_label.h"
 #include "ui_slider.h"
-#include "ui_text_language.h"
 #include "video_panel_image_res.h"
 
 namespace OHOS {
diff --git a/src/core/components/picker_view_component.cpp b/frameworks/src/core/components/picker_view_component.cpp
similarity index 95%
rename from src/core/components/picker_view_component.cpp
rename to frameworks/src/core/components/picker_view_component.cpp
index f8f9632..da430eb 100755
--- a/src/core/components/picker_view_component.cpp
+++ b/frameworks/src/core/components/picker_view_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -18,6 +18,7 @@
 #include "ace_mem_base.h"
 #include "key_parser.h"
 #include "keys.h"
+#include "product_adapter.h"
 #include "ui_font.h"
 
 namespace OHOS {
@@ -42,7 +43,7 @@ void DatePickerListener::OnDatePickerStoped(UIDatePicker &picker)
 }
 #endif // FEATURE_COMPONENT_DATE_PICKER
 
-void TextPickerListener::OnPickerStoped(UIPicker& picker)
+void TextPickerListener::OnPickerStoped(UIPicker &picker)
 {
     if (!jerry_value_is_function(textCallback_)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "TextPickerListener: callback type invalid!");
@@ -97,6 +98,10 @@ PickerViewComponent::PickerViewComponent(jerry_value_t options, jerry_value_t ch
       timeSelected_(nullptr)
 {
     SetComponentName(K_PICKER_VIEW);
+    fontSize_ = ProductAdapter::GetDefaultFontSize();
+#ifdef FEATURE_ROTATION_API
+    RegisterNamedFunction(FUNC_ROTATION_NAME, HandleRotationRequest);
+#endif // FEATURE_ROTATION_API
 }
 
 bool PickerViewComponent::CreateNativeViews()
@@ -131,8 +136,8 @@ bool PickerViewComponent::CreateNativeViews()
         result = false;
     }
     if (result) {
-        result = (CopyFontFamily(fontFamily_, DEFAULT_FONT_FAMILY)) &&
-            (CopyFontFamily(selectedFontFamily_, DEFAULT_FONT_FAMILY));
+        result = (CopyFontFamily(fontFamily_, ProductAdapter::GetDefaultFontFamilyName())) &&
+                 (CopyFontFamily(selectedFontFamily_, ProductAdapter::GetDefaultFontFamilyName()));
     }
     return result;
 }
@@ -261,9 +266,9 @@ void PickerViewComponent::PostRender()
     UpdatePickerAttrs();
 }
 
-void PickerViewComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
+void PickerViewComponent::PostUpdate(uint16_t attrKeyId)
 {
-    if ((pickerView_ == nullptr) || !updateResult) {
+    if (pickerView_ == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "PickerViewComponent: post update failed!");
         return;
     }
@@ -295,12 +300,11 @@ void PickerViewComponent::UpdatePickerStyles() const
         HILOG_ERROR(HILOG_MODULE_ACE, "PickerViewComponent: update picker styles failed!");
         return;
     }
-    if ((fontFamily_ == nullptr) || (fontSize_ == 0) ||
-        (selectedFontFamily_ == nullptr) || (selectedFontSize_ == 0)) {
+    if ((fontFamily_ == nullptr) || (fontSize_ == 0) || (selectedFontFamily_ == nullptr) || (selectedFontSize_ == 0)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "PickerViewComponent: font family or size invalid!");
         return;
     }
-    UIFont* font = UIFont::GetInstance();
+    UIFont *font = UIFont::GetInstance();
     if (font == nullptr) {
         return;
     }
@@ -450,7 +454,9 @@ bool PickerViewComponent::ApplyPrivateStyle(const AppStyleItem *styleItem)
     return true;
 }
 
-bool PickerViewComponent::RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
+bool PickerViewComponent::RegisterPrivateEventListener(uint16_t eventTypeId,
+                                                       jerry_value_t funcValue,
+                                                       bool isStopPropagation)
 {
     bool result = false;
     switch (eventTypeId) {
diff --git a/src/core/components/picker_view_component.h b/frameworks/src/core/components/picker_view_component.h
old mode 100755
new mode 100644
similarity index 96%
rename from src/core/components/picker_view_component.h
rename to frameworks/src/core/components/picker_view_component.h
index cd76307..1aca88b
--- a/src/core/components/picker_view_component.h
+++ b/frameworks/src/core/components/picker_view_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -134,16 +134,16 @@ protected:
     UIView *GetComponentRootView() const override;
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
     bool ApplyPrivateStyle(const AppStyleItem* styleItem) override;
-    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation) override;
     void PostRender() override;
-    void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
+    void PostUpdate(uint16_t attrKeyId) override;
 
     /**
      * @enum    PickerType
      *
      * @brief   Values that represent different types of picker-view
      */
-    enum class PickerType {
+    enum class PickerType : uint8_t {
         UNKNOWN,
         TEXT,
         TIME,
diff --git a/frameworks/src/core/components/qrcode_component.cpp b/frameworks/src/core/components/qrcode_component.cpp
new file mode 100755
index 0000000..601ff31
--- /dev/null
+++ b/frameworks/src/core/components/qrcode_component.cpp
@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#include "acelite_config.h"
+
+#ifdef FEATURE_COMPONENT_QRCODE
+#include "qrcode_component.h"
+#include "ace_log.h"
+#include "ace_mem_base.h"
+#include "js_app_context.h"
+#include "js_fwk_common.h"
+#include "key_parser.h"
+#include "keys.h"
+
+namespace OHOS {
+namespace ACELite {
+QrcodeComponent::QrcodeComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *manager)
+    : Component(options, children, manager), qrcodeValue_(nullptr)
+{
+    qrcodeColor_ = Color::Black();
+    qrcodeBackGroundColor_ = Color::White();
+    SetComponentName(K_QRCODE);
+}
+
+void QrcodeComponent::ReleaseNativeViews()
+{
+    ACE_FREE(qrcodeValue_);
+}
+
+bool QrcodeComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
+{
+    bool setResult = true;
+    switch (attrKeyId) {
+        case K_VALUE: {
+            ACE_FREE(qrcodeValue_);
+            qrcodeValue_ = MallocStringOf(attrValue);
+            break;
+        }
+        default: {
+            setResult = false;
+            break;
+        }
+    }
+    return setResult;
+}
+
+void QrcodeComponent::PostUpdate(uint16_t attrKeyId)
+{
+    switch (attrKeyId) {
+        case K_BACKGROUND_COLOR:
+        // same as below
+        case K_BORDER_WIDTH:
+        // same as below
+        case K_COLOR:
+        // same as below
+        case K_HEIGHT:
+        // same as below
+        case K_WIDTH:
+        // same as below
+        case K_VALUE: {
+            DrawQrcode();
+            break;
+        }
+        default:
+            break;
+    }
+}
+
+bool QrcodeComponent::ApplyPrivateStyle(const AppStyleItem *style)
+{
+    bool result = true;
+    uint16_t styleKey = GetStylePropNameId(style);
+    switch (styleKey) {
+        case K_BACKGROUND_COLOR: {
+            result = SetColor(*style, qrcodeBackGroundColor_);
+            break;
+        }
+        case K_COLOR: {
+            result = SetColor(*style, qrcodeColor_);
+            break;
+        }
+        default: {
+            result = false;
+            break;
+        }
+    }
+    return result;
+}
+
+void QrcodeComponent::OnViewAttached()
+{
+    DrawQrcode();
+}
+
+bool QrcodeComponent::SetColor(const AppStyleItem &style, ColorType &colortype)
+{
+    uint32_t color = 0;
+    uint8_t alpha = 255;
+    if (!GetStyleColorValue(&style, color, alpha)) {
+        return false;
+    }
+    colortype = GetRGBColor(color);
+    return true;
+}
+
+void QrcodeComponent::DrawQrcode()
+{
+    const uint16_t defaultWidth = GetWidth();
+    const uint16_t defaultHeight = GetHeight();
+    uint16_t length = static_cast<uint16_t>(strlen(qrcodeValue_));
+    if (length > QRCODE_VAL_MAX || length == 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Invalid value. target size[%d]", length);
+        return;
+    }
+
+    qrcode_.SetQrcodeInfo(qrcodeValue_, qrcodeBackGroundColor_, qrcodeColor_);
+    qrcode_.SetWidth(defaultWidth);
+    qrcode_.SetHeight(defaultHeight);
+}
+} // namespace ACELite
+} // namespace OHOS
+#endif // FEATURE_COMPONENT_QRCODE
diff --git a/frameworks/src/core/components/qrcode_component.h b/frameworks/src/core/components/qrcode_component.h
new file mode 100755
index 0000000..406cb57
--- /dev/null
+++ b/frameworks/src/core/components/qrcode_component.h
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+
+#include "acelite_config.h"
+
+#ifdef FEATURE_COMPONENT_QRCODE
+#include "component.h"
+#include "key_parser.h"
+#include "non_copyable.h"
+#include "ui_qrcode.h"
+
+namespace OHOS {
+namespace ACELite {
+class QrcodeComponent final : public Component {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(QrcodeComponent);
+    QrcodeComponent() = delete;
+    QrcodeComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *manager);
+    ~QrcodeComponent() override {}
+    void ReleaseNativeViews() override;
+
+protected:
+    UIView *GetComponentRootView() const override
+    {
+        return (const_cast<UIQrcode *>(&qrcode_));
+    }
+    bool ApplyPrivateStyle(const AppStyleItem *style) override;
+    void OnViewAttached() override;
+    void PostUpdate(uint16_t attrKeyId) override;
+    bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
+
+private:
+    bool SetColor(const AppStyleItem &style, ColorType &colortype);
+    void DrawQrcode();
+
+    UIQrcode qrcode_;
+    char *qrcodeValue_;
+    ColorType qrcodeBackGroundColor_;
+    ColorType qrcodeColor_;
+
+    static constexpr uint16_t QRCODE_VAL_MAX = 256;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // #ifdef FEATURE_COMPONENT_QRCODE
diff --git a/src/core/components/scroll_layer.cpp b/frameworks/src/core/components/scroll_layer.cpp
similarity index 71%
rename from src/core/components/scroll_layer.cpp
rename to frameworks/src/core/components/scroll_layer.cpp
index 5490615..85b9410 100755
--- a/src/core/components/scroll_layer.cpp
+++ b/frameworks/src/core/components/scroll_layer.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -15,12 +15,14 @@
 
 #include "scroll_layer.h"
 #include "ace_log.h"
+#include "component.h"
 #include "component_utils.h"
+#include "fatal_handler.h"
 #include "root_view.h"
 
 namespace OHOS {
 namespace ACELite {
-ScrollLayer::ScrollLayer() : scroll_(nullptr), origView_(nullptr) {}
+ScrollLayer::ScrollLayer() : scroll_(nullptr), pageRootView_(nullptr) {}
 
 ScrollLayer::~ScrollLayer()
 {
@@ -28,7 +30,8 @@ ScrollLayer::~ScrollLayer()
         delete (scroll_);
         scroll_ = nullptr;
     }
-    origView_ = nullptr;
+    pageRootView_ = nullptr;
+    FatalHandler::GetInstance().SetCurrentPageRootView(nullptr);
 }
 
 UIScrollView *ScrollLayer::AddScrollLayer(UIView &view) const
@@ -69,26 +72,33 @@ UIScrollView *ScrollLayer::AddScrollLayer(UIView &view) const
         scroll->Add(&view);
         scroll->SetReboundSize(0);
         return scroll;
-    } else {
-        return nullptr;
     }
+    return nullptr;
 }
 
-void ScrollLayer::AppendScrollLayer(jerry_value_t nativeElement)
+void ScrollLayer::AppendScrollLayer(Component *rootComponent)
 {
-    if (IS_UNDEFINED(nativeElement)) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "Scroll Layer: AppendScrollLayer function parameter nativeElement error.");
+    if (rootComponent == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Scroll Layer: AppendScrollLayer function parameter rootComponent error.");
         return;
     }
 
-    UIView *view = ComponentUtils::GetViewFromBindingObject(nativeElement);
+    uint16_t horizontalResolution = GetHorizontalResolution();
+    uint16_t verticalResolution = GetVerticalResolution();
+    ConstrainedParameter rootViewParam(horizontalResolution, verticalResolution);
+    Component::BuildViewTree(rootComponent, nullptr, rootViewParam);
+    // root view will be attached soon, invoke the callback
+    rootComponent->OnViewAttached();
+
+    UIView *view = rootComponent->GetComponentRootView();
     if (view == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "Scroll Layer: Failed to get view from js object.");
         return;
     }
 
     scroll_ = AddScrollLayer(*view);
-    origView_ = view;
+    pageRootView_ = (scroll_ == nullptr) ? view : scroll_;
+    FatalHandler::GetInstance().SetCurrentPageRootView(pageRootView_);
 }
 
 void ScrollLayer::Hide() const
@@ -98,10 +108,22 @@ void ScrollLayer::Hide() const
         HILOG_ERROR(HILOG_MODULE_ACE, "get rootView is nullptr");
         return;
     }
-    rootView->RemoveAll();
+    DetachFromRootView();
     rootView->Invalidate();
 }
 
+void ScrollLayer::DetachFromRootView() const
+{
+    if (pageRootView_ == nullptr) {
+        return;
+    }
+    RootView *rootView = RootView::GetInstance();
+    if (rootView == nullptr) {
+        return;
+    }
+    rootView->Remove(pageRootView_);
+}
+
 void ScrollLayer::Show() const
 {
     RootView *rootView = RootView::GetInstance();
@@ -112,15 +134,7 @@ void ScrollLayer::Show() const
     rootView->SetPosition(0, 0);
     rootView->SetWidth(GetHorizontalResolution());
     rootView->SetHeight(GetVerticalResolution());
-#ifdef FEATURE_ROOTVIEW_CUSTOM_BACKGROUND_COLOR
-    // set no-blank background color on root view for easy using before the window's mouse showing is optimized
-    rootView->SetStyle(STYLE_BACKGROUND_COLOR, Color::Olive().full);
-#endif
-    if (scroll_ == nullptr) {
-        rootView->Add(origView_);
-    } else {
-        rootView->Add(scroll_);
-    }
+    rootView->Add(pageRootView_);
     rootView->Invalidate();
 }
 } // namespace ACELite
diff --git a/src/core/components/scroll_layer.h b/frameworks/src/core/components/scroll_layer.h
old mode 100755
new mode 100644
similarity index 81%
rename from src/core/components/scroll_layer.h
rename to frameworks/src/core/components/scroll_layer.h
index 4dcb355..2979f22
--- a/src/core/components/scroll_layer.h
+++ b/frameworks/src/core/components/scroll_layer.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -16,6 +16,7 @@
 #ifndef OHOS_ACELITE_SCROLL_LAYER_H
 #define OHOS_ACELITE_SCROLL_LAYER_H
 
+#include "component.h"
 #include "js_fwk_common.h"
 #include "non_copyable.h"
 #include "ui_scroll_view.h"
@@ -27,14 +28,15 @@ public:
     ACE_DISALLOW_COPY_AND_MOVE(ScrollLayer);
     ScrollLayer();
     ~ScrollLayer();
-    void AppendScrollLayer(jerry_value_t nativeElement);
+    void AppendScrollLayer(Component *rootComponent);
     void Hide() const;
     void Show() const;
+    void DetachFromRootView() const;
 
 private:
     UIScrollView *AddScrollLayer(UIView &view) const;
-    UIScrollView *scroll_;
-    UIView *origView_;
+    UIScrollView *scroll_ = nullptr;
+    UIView *pageRootView_ = nullptr;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/slider_component.cpp b/frameworks/src/core/components/slider_component.cpp
similarity index 50%
rename from src/core/components/slider_component.cpp
rename to frameworks/src/core/components/slider_component.cpp
index 2644f0b..31d8e7b 100755
--- a/src/core/components/slider_component.cpp
+++ b/frameworks/src/core/components/slider_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -26,47 +26,19 @@ SliderComponent::SliderComponent(jerry_value_t options, jerry_value_t children,
       minValue_(0),
       maxValue_(DEFAULT_VALUE),
       value_(0),
-      visibleWidth_(0),
-      visibleHeight_(0),
       startPosition_({0, 0}),
-      sliderView_(nullptr),
-      eventListener_(nullptr),
       direction_(UISlider::Direction::DIR_LEFT_TO_RIGHT)
 {
     SetComponentName(K_SLIDER);
+#ifdef FEATURE_ROTATION_API
+    RegisterNamedFunction(FUNC_ROTATION_NAME, HandleRotationRequest);
+#endif // FEATURE_ROTATION_API
 }
 
-bool SliderComponent::CreateNativeViews()
-{
-    sliderView_ = new UISlider();
-    if (sliderView_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "create native slider view failed");
-        return false;
-    }
-    eventListener_ = new SliderEventListener();
-    if (eventListener_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "create listener event failed");
-        return false;
-    }
-    return true;
-}
-
-void SliderComponent::ReleaseNativeViews()
-{
-    if (sliderView_) {
-        delete sliderView_;
-        sliderView_ = nullptr;
-    }
-
-    if (eventListener_) {
-        delete eventListener_;
-        eventListener_ = nullptr;
-    }
-}
 
 inline UIView *SliderComponent::GetComponentRootView() const
 {
-    return sliderView_;
+    return const_cast<UISlider *>(&sliderView_);
 }
 
 bool SliderComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
@@ -90,35 +62,21 @@ bool SliderComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attr
     return true;
 }
 
-bool SliderComponent::RegisterEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
-{
-    if ((sliderView_ == nullptr) || !KeyParser::IsKeyValid(eventTypeId) || IS_UNDEFINED(funcValue)) {
-        return false;
-    }
-
-    // slider's event type has bigger priority than common ones, so try private handler first
-    bool registerResult = RegisterPrivateEventListener(eventTypeId, funcValue);
-    if (registerResult) {
-        return true;
-    }
-    // try common ones if no private ones get hitted
-    registerResult = RegisterCommonEventListener(*sliderView_, eventTypeId, funcValue);
-    return registerResult;
-}
-
-bool SliderComponent::RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
+bool SliderComponent::RegisterPrivateEventListener(uint16_t eventTypeId,
+                                                   jerry_value_t funcValue,
+                                                   bool isStopPropagation)
 {
     switch (eventTypeId) {
         case K_CHANGE:
-            sliderView_->SetSliderEventListener(eventListener_);
-            eventListener_->SetBindChangeFuncName(funcValue);
+            sliderView_.SetSliderEventListener(&eventListener_);
+            eventListener_.SetBindChangeFuncName(funcValue);
             break;
         default:
             return false;
     }
 
-    sliderView_->SetDraggable(true);
-    sliderView_->SetTouchable(true);
+    sliderView_.SetDraggable(true);
+    sliderView_.SetTouchable(true);
     return true;
 }
 
@@ -133,8 +91,8 @@ bool SliderComponent::ApplyPrivateStyle(const AppStyleItem *style)
             if (!GetStyleColorValue(style, color, alpha)) {
                 return false;
             }
-            sliderView_->SetBackgroundStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
-            sliderView_->SetBackgroundStyle(STYLE_BACKGROUND_OPA, alpha);
+            sliderView_.SetBackgroundStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
+            sliderView_.SetBackgroundStyle(STYLE_BACKGROUND_OPA, alpha);
             break;
         }
         case K_SELECTED_COLOR: {
@@ -142,8 +100,8 @@ bool SliderComponent::ApplyPrivateStyle(const AppStyleItem *style)
             if (!GetStyleColorValue(style, color, alpha)) {
                 return false;
             }
-            sliderView_->SetForegroundStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
-            sliderView_->SetForegroundStyle(STYLE_BACKGROUND_OPA, alpha);
+            sliderView_.SetForegroundStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
+            sliderView_.SetForegroundStyle(STYLE_BACKGROUND_OPA, alpha);
             break;
         }
         case K_BLOCK_COLOR: {
@@ -151,8 +109,8 @@ bool SliderComponent::ApplyPrivateStyle(const AppStyleItem *style)
             if (!GetStyleColorValue(style, color, alpha)) {
                 return false;
             }
-            sliderView_->SetKnobStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
-            sliderView_->SetKnobStyle(STYLE_BACKGROUND_OPA, alpha);
+            sliderView_.SetKnobStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
+            sliderView_.SetKnobStyle(STYLE_BACKGROUND_OPA, alpha);
             break;
         }
         case K_LEFT: {
@@ -167,14 +125,6 @@ bool SliderComponent::ApplyPrivateStyle(const AppStyleItem *style)
             SetDirection(GetStyleStrValue(style));
             break;
         }
-        case K_HEIGHT: {
-            visibleHeight_ = GetStylePixelValue(style);
-            break;
-        }
-        case K_WIDTH: {
-            visibleWidth_ = GetStylePixelValue(style);
-            break;
-        }
         default: {
             return false;
         }
@@ -182,74 +132,75 @@ bool SliderComponent::ApplyPrivateStyle(const AppStyleItem *style)
     return true;
 }
 
-void SliderComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
+void SliderComponent::PostUpdate(uint16_t attrKeyId)
 {
-    if ((sliderView_ == nullptr) || !updateResult || !KeyParser::IsKeyValid(attrKeyId)) {
+    if (!KeyParser::IsKeyValid(attrKeyId)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "slider component post update check args failed");
         return;
     }
     switch (attrKeyId) {
         case K_LEFT:
         case K_TOP:
-            sliderView_->SetPosition(startPosition_.x, startPosition_.y);
-            sliderView_->Invalidate();
+            sliderView_.SetPosition(startPosition_.x, startPosition_.y);
+            sliderView_.Invalidate();
             break;
         case K_HEIGHT:
-        case K_WIDTH:
-            sliderView_->SetHeight(visibleHeight_);
-            sliderView_->SetWidth(visibleWidth_);
+        case K_WIDTH: {
+            int16_t visibleHeight = GetHeight();
+            int16_t visibleWidth = GetWidth();
+            sliderView_.SetHeight(visibleHeight);
+            sliderView_.SetWidth(visibleWidth);
             if (direction_ == UISlider::Direction::DIR_BOTTOM_TO_TOP) {
-                sliderView_->SetValidWidth(SLIDER_WIDTH);
-                sliderView_->SetValidHeight(visibleHeight_ - KNOB_WIDTH);
+                sliderView_.SetValidWidth(SLIDER_WIDTH);
+                sliderView_.SetValidHeight(visibleHeight - KNOB_WIDTH);
             } else {
-                sliderView_->SetValidHeight(SLIDER_WIDTH);
-                sliderView_->SetValidWidth(visibleWidth_ - KNOB_WIDTH);
+                sliderView_.SetValidHeight(SLIDER_WIDTH);
+                sliderView_.SetValidWidth(visibleWidth - KNOB_WIDTH);
             }
-            sliderView_->Invalidate();
+            sliderView_.Invalidate();
             break;
+        }
         case K_MAX:
         case K_MIN:
         case K_VALUE:
-            sliderView_->SetRange(maxValue_, minValue_);
-            sliderView_->SetValue(value_);
-            sliderView_->Invalidate();
+            sliderView_.SetRange(maxValue_, minValue_);
+            sliderView_.SetValue(value_);
+            sliderView_.Invalidate();
             break;
         default:
             break;
     }
 }
 
-void SliderComponent::PostRender()
+void SliderComponent::OnViewAttached()
 {
-    if (sliderView_ == nullptr) {
-        return;
-    }
-
     if (value_ < minValue_) {
         value_ = minValue_;
     } else if (value_ > maxValue_) {
         value_ = maxValue_;
     }
-    sliderView_->SetDirection(direction_);
-    sliderView_->SetPosition(startPosition_.x, startPosition_.y);
-    sliderView_->SetRange(maxValue_, minValue_);
-    sliderView_->SetHeight(visibleHeight_);
-    sliderView_->SetWidth(visibleWidth_);
+    sliderView_.SetDirection(direction_);
+    sliderView_.SetPosition(startPosition_.x, startPosition_.y);
+    sliderView_.SetRange(maxValue_, minValue_);
+    int16_t visibleHeight = GetHeight();
+    int16_t visibleWidth = GetWidth();
+    sliderView_.SetHeight(visibleHeight);
+    sliderView_.SetWidth(visibleWidth);
     if (direction_ == UISlider::Direction::DIR_BOTTOM_TO_TOP) {
-        sliderView_->SetValidWidth(SLIDER_WIDTH);
-        sliderView_->SetValidHeight(visibleHeight_ - KNOB_WIDTH);
+        sliderView_.SetValidWidth(SLIDER_WIDTH);
+        sliderView_.SetValidHeight(visibleHeight - KNOB_WIDTH);
     } else {
-        sliderView_->SetValidHeight(SLIDER_WIDTH);
-        sliderView_->SetValidWidth(visibleWidth_ - KNOB_WIDTH);
+        sliderView_.SetValidHeight(SLIDER_WIDTH);
+        sliderView_.SetValidWidth(visibleWidth - KNOB_WIDTH);
     }
-    sliderView_->SetKnobWidth(KNOB_WIDTH);
-    sliderView_->SetSliderRadius(DEFAULT_BORDER_RADIUS, DEFAULT_BORDER_RADIUS, KNOB_RADIUS);
-    sliderView_->SetBackgroundStyle(STYLE_LINE_CAP, CapType::CAP_ROUND);
-    sliderView_->SetForegroundStyle(STYLE_LINE_CAP, CapType::CAP_ROUND);
-    sliderView_->SetBackgroundStyle(STYLE_BORDER_WIDTH, 0);
-    sliderView_->SetForegroundStyle(STYLE_BORDER_WIDTH, 0);
-    sliderView_->SetKnobStyle(STYLE_BORDER_WIDTH, 0);
-    sliderView_->SetValue(value_);
+    sliderView_.SetKnobWidth(KNOB_WIDTH);
+    sliderView_.SetSliderRadius(DEFAULT_BORDER_RADIUS, DEFAULT_BORDER_RADIUS, KNOB_RADIUS);
+    sliderView_.SetBackgroundStyle(STYLE_LINE_CAP, CapType::CAP_ROUND);
+    sliderView_.SetForegroundStyle(STYLE_LINE_CAP, CapType::CAP_ROUND);
+    sliderView_.SetBackgroundStyle(STYLE_BORDER_WIDTH, 0);
+    sliderView_.SetForegroundStyle(STYLE_BORDER_WIDTH, 0);
+    sliderView_.SetKnobStyle(STYLE_BORDER_WIDTH, 0);
+    sliderView_.SetValue(value_);
 }
 
 void SliderComponent::SetDirection(const char * const directionValue)
diff --git a/src/core/components/slider_component.h b/frameworks/src/core/components/slider_component.h
old mode 100755
new mode 100644
similarity index 81%
rename from src/core/components/slider_component.h
rename to frameworks/src/core/components/slider_component.h
index c5fd4c0..8548a8a
--- a/src/core/components/slider_component.h
+++ b/frameworks/src/core/components/slider_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -31,15 +31,12 @@ public:
     ~SliderComponent() override {}
 
 protected:
-    bool CreateNativeViews() override;
-    void ReleaseNativeViews() override;
     UIView *GetComponentRootView() const override;
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
-    bool RegisterEventListener(uint16_t eventTypeId, jerry_value_t funcValue) override;
-    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation) override;
     bool ApplyPrivateStyle(const AppStyleItem* style) override;
-    void PostRender() override;
-    void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
+    void OnViewAttached() override;
+    void PostUpdate(uint16_t attrKeyId) override;
 
 private:
     static const int16_t DEFAULT_VALUE = 100;
@@ -52,11 +49,9 @@ private:
     int16_t minValue_;
     int16_t maxValue_;
     int16_t value_;
-    int16_t visibleWidth_;
-    int16_t visibleHeight_;
     Point startPosition_;
-    UISlider* sliderView_;
-    SliderEventListener* eventListener_;
+    UISlider sliderView_;
+    SliderEventListener eventListener_;
     UISlider::Direction direction_;
 };
 } // namespace ACELite
diff --git a/frameworks/src/core/components/stack_component.cpp b/frameworks/src/core/components/stack_component.cpp
new file mode 100644
index 0000000..b98967f
--- /dev/null
+++ b/frameworks/src/core/components/stack_component.cpp
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "stack_component.h"
+#include "ace_log.h"
+#include "key_parser.h"
+#include "keys.h"
+
+namespace OHOS {
+namespace ACELite {
+StackComponent::StackComponent(jerry_value_t options, jerry_value_t children, AppStyleManager* styleManager)
+    : Component(options, children, styleManager)
+{
+    SetComponentName(K_STACK);
+    nativeView_.SetStyle(STYLE_BACKGROUND_OPA, 0);
+}
+
+UIView *StackComponent::GetComponentRootView() const
+{
+    return const_cast<UIViewGroup *>(&nativeView_);
+}
+
+bool StackComponent::ProcessChildren()
+{
+    // add all children to this container
+    AppendChildren(this);
+    return true;
+}
+
+void StackComponent::PostUpdate(uint16_t attrKeyId)
+{
+    nativeView_.LayoutChildren();
+}
+
+void StackComponent::AttachView(const Component *child)
+{
+    if (child == nullptr) {
+        return;
+    }
+    nativeView_.Add(child->GetComponentRootView());
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/stack_component.h b/frameworks/src/core/components/stack_component.h
new file mode 100644
index 0000000..2a1ce51
--- /dev/null
+++ b/frameworks/src/core/components/stack_component.h
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_STACK_COMPONENT_H
+#define OHOS_ACELITE_STACK_COMPONENT_H
+#include "component.h"
+#include "flex_layout.h"
+#include "non_copyable.h"
+
+namespace OHOS {
+namespace ACELite {
+class StackComponent final : public Component {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(StackComponent);
+    StackComponent() = delete;
+    StackComponent(jerry_value_t options, jerry_value_t children, AppStyleManager* styleManager);
+    ~StackComponent() override {}
+
+protected:
+    UIView *GetComponentRootView() const override;
+    bool ProcessChildren() override;
+    void PostUpdate(uint16_t attrKeyId) override;
+    void AttachView(const Component *child) override;
+
+private:
+    UIViewGroup nativeView_;
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_STACK_COMPONENT_H
diff --git a/src/core/components/swiper_component.cpp b/frameworks/src/core/components/swiper_component.cpp
similarity index 68%
rename from src/core/components/swiper_component.cpp
rename to frameworks/src/core/components/swiper_component.cpp
index 325ab52..c7af27b 100755
--- a/src/core/components/swiper_component.cpp
+++ b/frameworks/src/core/components/swiper_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -21,32 +21,21 @@
 
 namespace OHOS {
 namespace ACELite {
-SwiperComponent::SwiperComponent(jerry_value_t options, jerry_value_t children, AppStyleManager* styleManager)
+SwiperComponent::SwiperComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *styleManager)
     : Component(options, children, styleManager),
-      swiperView_(nullptr),
       hasChildren_(false),
       index_(0),
       changeListener_(nullptr)
 {
     SetComponentName(K_SWIPER);
-}
-
-bool SwiperComponent::CreateNativeViews()
-{
-    swiperView_ = new UISwipeView();
-    if (swiperView_ == nullptr) {
-        return false;
-    }
-    swiperView_->SetLoopState(true);
-    return true;
+    swiperView_.SetLoopState(true);
+#ifdef FEATURE_ROTATION_API
+    RegisterNamedFunction(FUNC_ROTATION_NAME, HandleRotationRequest);
+#endif // FEATURE_ROTATION_API
 }
 
 void SwiperComponent::ReleaseNativeViews()
 {
-    if (swiperView_) {
-        delete swiperView_;
-        swiperView_ = nullptr;
-    }
     if (changeListener_) {
         delete changeListener_;
         changeListener_ = nullptr;
@@ -55,7 +44,7 @@ void SwiperComponent::ReleaseNativeViews()
 
 inline UIView *SwiperComponent::GetComponentRootView() const
 {
-    return swiperView_;
+    return const_cast<UISwipeView *>(&swiperView_);
 }
 
 bool SwiperComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
@@ -66,13 +55,13 @@ bool SwiperComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attr
             HILOG_ERROR(HILOG_MODULE_ACE, "duration value has problem.");
             return false;
         }
-        swiperView_->SetAnimatorTime(duration);
+        swiperView_.SetAnimatorTime(duration);
         return true;
     } else if (attrKeyId == K_LOOP) {
         if (jerry_value_is_boolean(attrValue)) {
-            swiperView_->SetLoopState(BoolOf(attrValue));
+            swiperView_.SetLoopState(BoolOf(attrValue));
         } else {
-            swiperView_->SetLoopState(true);
+            swiperView_.SetLoopState(true);
         }
         return true;
     } else if (attrKeyId == K_INDEX) {
@@ -85,9 +74,9 @@ bool SwiperComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attr
     } else if (attrKeyId == K_VERTICAL) {
         if (!hasChildren_) {
             if (jerry_value_is_boolean(attrValue)) {
-                swiperView_->SetDirection(BoolOf(attrValue));
+                swiperView_.SetDirection(BoolOf(attrValue));
             } else {
-                swiperView_->SetDirection(0);
+                swiperView_.SetDirection(0);
             }
         }
     }
@@ -95,64 +84,63 @@ bool SwiperComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attr
     return false;
 }
 
-void SwiperComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
-{
-    if (updateResult) {
-        SetPageIndex();
-    }
-}
-
-void SwiperComponent::PostRender()
+void SwiperComponent::PostUpdate(uint16_t attrKeyId)
 {
     SetPageIndex();
 }
 
 bool SwiperComponent::ProcessChildren()
 {
-    if (swiperView_ == nullptr) {
-        return false;
-    }
-    AppendChildren(swiperView_);
+    AppendChildren(this);
     hasChildren_ = true;
     return true;
 }
 
-bool SwiperComponent::RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
+void SwiperComponent::AttachView(const Component *child)
+{
+    if (child == nullptr) {
+        return;
+    }
+    swiperView_.Add(child->GetComponentRootView());
+    SetPageIndex();
+}
+
+bool SwiperComponent::RegisterPrivateEventListener(uint16_t eventTypeId,
+                                                   jerry_value_t funcValue,
+                                                   bool isStopPropagation)
 {
     if (eventTypeId == K_CHANGE) {
-        if (swiperView_) {
-            changeListener_ = new ChangeListener(funcValue);
-            if (changeListener_ == nullptr) {
-                HILOG_ERROR(HILOG_MODULE_ACE, "Create ChangeListener error.");
-                return false;
-            }
-            swiperView_->SetOnSwipeListener(changeListener_);
-            return true;
+        changeListener_ = new ChangeListener(funcValue);
+        if (changeListener_ == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "Create ChangeListener error.");
+            return false;
         }
+        swiperView_.SetOnSwipeListener(changeListener_);
+        return true;
     }
     return false;
 }
 
-void SwiperComponent::SetPageIndex() const
+void SwiperComponent::SetPageIndex()
 {
     if (jerry_value_is_undefined(GetChildren())) {
-        HILOG_INFO(HILOG_MODULE_ACE, "Swiper children don't exsit.");
+        HILOG_INFO(HILOG_MODULE_ACE, "Swiper children don't exist.");
         return;
     }
     uint16_t length = jerry_get_array_length(GetChildren());
     if (index_ < 0 || index_ >= length) {
-        swiperView_->SetCurrentPage(0);
+        swiperView_.SetCurrentPage(0);
     } else {
-        swiperView_->SetCurrentPage(index_);
+        swiperView_.SetCurrentPage(index_);
     }
 }
 
-void SwiperComponent::ChangeListener::OnSwipe(UISwipeView& view)
+void SwiperComponent::ChangeListener::OnSwipe(UISwipeView &view)
 {
     if (jerry_value_is_undefined(fn_)) {
         return;
     }
-    UISwipeView* swipeView = reinterpret_cast<UISwipeView *>(&view);
+    UISwipeView *swipeView = reinterpret_cast<UISwipeView *>(&view);
     if (swipeView == nullptr) {
         return;
     }
diff --git a/src/core/components/swiper_component.h b/frameworks/src/core/components/swiper_component.h
old mode 100755
new mode 100644
similarity index 87%
rename from src/core/components/swiper_component.h
rename to frameworks/src/core/components/swiper_component.h
index 638110b..fde1893
--- a/src/core/components/swiper_component.h
+++ b/frameworks/src/core/components/swiper_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -31,14 +31,13 @@ public:
     ~SwiperComponent() override {}
 
 protected:
-    bool CreateNativeViews() override;
     void ReleaseNativeViews() override;
     UIView *GetComponentRootView() const override;
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
-    void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
-    void PostRender() override;
+    void PostUpdate(uint16_t attrKeyId) override;
     bool ProcessChildren() override;
-    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation) override;
+    void AttachView(const Component *child) override;
 
 private:
     class ChangeListener : public UISwipeView::OnSwipeListener {
@@ -55,8 +54,8 @@ private:
     private:
         jerry_value_t fn_;
     };
-    void SetPageIndex() const;
-    UISwipeView *swiperView_;
+    void SetPageIndex();
+    UISwipeView swiperView_;
     bool hasChildren_;
     int16_t index_;
     ChangeListener *changeListener_;
diff --git a/src/core/components/switch_component.cpp b/frameworks/src/core/components/switch_component.cpp
old mode 100755
new mode 100644
similarity index 66%
rename from src/core/components/switch_component.cpp
rename to frameworks/src/core/components/switch_component.cpp
index 5b47e0f..5737fb1
--- a/src/core/components/switch_component.cpp
+++ b/frameworks/src/core/components/switch_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -23,12 +23,10 @@ namespace OHOS {
 namespace ACELite {
 SwitchComponent::SwitchComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *styleManager)
     : Component(options, children, styleManager),
-      toggleButton_(nullptr),
       changeListener_(nullptr),
       clickListener_(nullptr)
 {
     SetComponentName(K_SWITCH);
-    combinedStyle_ = GetStyleManager()->GetCombinedStyle();
 }
 
 SwitchComponent::~SwitchComponent()
@@ -54,8 +52,8 @@ bool SwitchComponent::ApplyPrivateStyle(const AppStyleItem *style)
         uint32_t color = 0;
         uint8_t alpha = OPA_OPAQUE;
         if (GetStyleColorValue(style, color, alpha)) {
-            toggleButton_->SetStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
-            toggleButton_->SetStyle(STYLE_BACKGROUND_OPA, alpha);
+            toggleButton_.SetStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
+            toggleButton_.SetStyle(STYLE_BACKGROUND_OPA, alpha);
             return true;
         }
     }
@@ -65,56 +63,43 @@ bool SwitchComponent::ApplyPrivateStyle(const AppStyleItem *style)
 
 bool SwitchComponent::CreateNativeViews()
 {
-    toggleButton_ = new UIToggleButton();
-
-    if (toggleButton_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "create switch component fail");
-        return false;
-    }
-
-    toggleButton_->SetState(false);
-    toggleButton_->SetStyle(STYLE_BORDER_OPA, OPA_OPAQUE);
-    toggleButton_->SetStyle(STYLE_BACKGROUND_OPA, OPA_TRANSPARENT);
+    toggleButton_.SetState(false);
+    toggleButton_.SetStyle(STYLE_BORDER_OPA, OPA_OPAQUE);
+    toggleButton_.SetStyle(STYLE_BACKGROUND_OPA, OPA_TRANSPARENT);
 
     return true;
 }
 
-void SwitchComponent::ReleaseNativeViews()
-{
-    if (toggleButton_) {
-        delete toggleButton_;
-        toggleButton_ = nullptr;
-    }
-}
 
 UIView *SwitchComponent::GetComponentRootView() const
 {
-    return toggleButton_;
+    return const_cast<UIToggleButton *>(&toggleButton_);
 }
 
 bool SwitchComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
 {
     if (attrKeyId == K_CHECKED) {
-        toggleButton_->SetState(BoolOf(attrValue));
+        toggleButton_.SetState(BoolOf(attrValue));
         return true;
     }
 
     return false;
 }
 
-bool SwitchComponent::RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
+bool SwitchComponent::RegisterPrivateEventListener(uint16_t eventTypeId,
+                                                   jerry_value_t funcValue,
+                                                   bool isStopPropagation)
 {
     if (eventTypeId == K_CHANGE) {
-        if (toggleButton_) {
-            changeListener_ = new StateChangeListener(funcValue, K_SWITCH);
-            if (changeListener_ == nullptr) {
-                HILOG_ERROR(HILOG_MODULE_ACE, "create change listener failed");
-                return false;
-            }
-            return true;
+        changeListener_ = new StateChangeListener(funcValue);
+        if (changeListener_ == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create change listener failed");
+            return false;
         }
-    } else if (eventTypeId == K_CLICK) {
-        clickListener_ = new ViewOnClickListener(funcValue, eventTypeId);
+        return true;
+    }
+    if (eventTypeId == K_CLICK) {
+        clickListener_ = new ViewOnClickListener(funcValue, isStopPropagation);
         if (clickListener_ == nullptr) {
             HILOG_ERROR(HILOG_MODULE_ACE, "create click listener failed");
             return false;
@@ -128,10 +113,11 @@ void SwitchComponent::PostRender()
 {
     // the change event should be dealed after checked attribute
     if (changeListener_) {
-        toggleButton_->SetOnChangeListener(changeListener_);
+        changeListener_->SetState(toggleButton_.GetState());
+        toggleButton_.SetOnChangeListener(changeListener_);
         if (clickListener_ == nullptr) {
             // trigger changeEvent
-            clickListener_ = new ViewOnClickListener(UNDEFINED, K_CLICK);
+            clickListener_ = new ViewOnClickListener(UNDEFINED, true);
             if (clickListener_ == nullptr) {
                 HILOG_ERROR(HILOG_MODULE_ACE, "create click listener failed");
                 return;
@@ -140,7 +126,7 @@ void SwitchComponent::PostRender()
     }
     if (clickListener_) {
         clickListener_->SetComponentListener(changeListener_);
-        toggleButton_->SetOnClickListener(clickListener_);
+        toggleButton_.SetOnClickListener(clickListener_);
     }
 }
 } // namespace ACELite
diff --git a/src/core/components/switch_component.h b/frameworks/src/core/components/switch_component.h
old mode 100755
new mode 100644
similarity index 89%
rename from src/core/components/switch_component.h
rename to frameworks/src/core/components/switch_component.h
index e87bb0c..9383d56
--- a/src/core/components/switch_component.h
+++ b/frameworks/src/core/components/switch_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -31,17 +31,15 @@ public:
 protected:
     bool ApplyPrivateStyle(const AppStyleItem *style) override;
     bool CreateNativeViews() override;
-    void ReleaseNativeViews() override;
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
-    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation) override;
     UIView *GetComponentRootView() const override;
     void PostRender() override;
 
 private:
-    UIToggleButton *toggleButton_;
+    UIToggleButton toggleButton_;
     StateChangeListener *changeListener_;
     ViewOnClickListener *clickListener_;
-    const AppStyle *combinedStyle_;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/components/tab_bar_component.cpp b/frameworks/src/core/components/tab_bar_component.cpp
similarity index 100%
rename from src/core/components/tab_bar_component.cpp
rename to frameworks/src/core/components/tab_bar_component.cpp
diff --git a/src/core/components/tab_bar_component.h b/frameworks/src/core/components/tab_bar_component.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/components/tab_bar_component.h
rename to frameworks/src/core/components/tab_bar_component.h
diff --git a/src/core/components/tab_content_component.cpp b/frameworks/src/core/components/tab_content_component.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/components/tab_content_component.cpp
rename to frameworks/src/core/components/tab_content_component.cpp
diff --git a/src/core/components/tab_content_component.h b/frameworks/src/core/components/tab_content_component.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/components/tab_content_component.h
rename to frameworks/src/core/components/tab_content_component.h
diff --git a/src/core/components/tabs_component.cpp b/frameworks/src/core/components/tabs_component.cpp
similarity index 98%
rename from src/core/components/tabs_component.cpp
rename to frameworks/src/core/components/tabs_component.cpp
index 5edccda..e9f5d46 100755
--- a/src/core/components/tabs_component.cpp
+++ b/frameworks/src/core/components/tabs_component.cpp
@@ -280,8 +280,8 @@ int16_t TabsComponent::GetInitPageIndex()
         ReleaseJerryValue(appViewModel, appPropName, globalObject, VA_ARG_END_FLAG);
     }
     int16_t currentPage;
-    if (!jerry_value_is_undefined(indexValHandler) && !jerry_value_is_error(indexValHandler)
-        && (jerry_value_is_number(indexValHandler) || jerry_value_is_string(indexValHandler))) {
+    if (!jerry_value_is_undefined(indexValHandler) && !jerry_value_is_error(indexValHandler) &&
+        (jerry_value_is_number(indexValHandler) || jerry_value_is_string(indexValHandler))) {
         currentPage = IntegerOf(indexValHandler);
         if (currentPage >= length || currentPage < 0) {
             currentPage = 0;
diff --git a/src/core/components/tabs_component.h b/frameworks/src/core/components/tabs_component.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/components/tabs_component.h
rename to frameworks/src/core/components/tabs_component.h
diff --git a/frameworks/src/core/components/test/unittest/BUILD.gn b/frameworks/src/core/components/test/unittest/BUILD.gn
new file mode 100755
index 0000000..4ca5151
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/BUILD.gn
@@ -0,0 +1,35 @@
+#Copyright (c) 2021 Huawei Device 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.
+
+group("components_unittest") {
+  deps = [
+    "common:js_frameworks_test_arc",
+    "common:js_frameworks_test_div",
+    "common:js_frameworks_test_event_bubble",
+    "common:js_frameworks_test_horizonprogress",
+    "common:js_frameworks_test_image_path_support",
+    "common:js_frameworks_test_input",
+    "common:js_frameworks_test_jsbundle",
+    "common:js_frameworks_test_list",
+    "common:js_frameworks_test_marquee",
+    "common:js_frameworks_test_opacity",
+    "common:js_frameworks_test_percent",
+    "common:js_frameworks_test_pickerview",
+    "common:js_frameworks_test_radio_switch_width",
+    "common:js_frameworks_test_slider",
+    "common:js_frameworks_test_swiper",
+    "common:js_frameworks_test_switch",
+    "common:js_frameworks_test_text",
+    "common:js_frameworks_test_text_exception",
+  ]
+}
diff --git a/frameworks/src/core/components/test/unittest/common/BUILD.gn b/frameworks/src/core/components/test/unittest/common/BUILD.gn
new file mode 100755
index 0000000..8b9474f
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/BUILD.gn
@@ -0,0 +1,213 @@
+#Copyright (c) 2021 Huawei Device 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("//build/lite/config/test.gni")
+import("//foundation/ace/ace_engine_lite/test/ace_test_config.gni")
+
+unittest("js_frameworks_test_arc") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "arc_tdd_test.cpp",
+    "root_component_mock.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_div") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "div_tdd_test.cpp",
+    "root_component_mock.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_event_bubble") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/basic_tdd_test.cpp",
+    "event_bubble_tdd_test.cpp",
+  ]
+  deps = ace_test_deps
+}
+unittest("js_frameworks_test_horizonprogress") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "horizonprogress_tdd_test.cpp",
+    "root_component_mock.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_image_path_support") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [ "image_src_path_tdd_test.cpp" ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_input") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "input_tdd_test.cpp",
+    "root_component_mock.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_jsbundle") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [ "jsbundle_tdd_test.cpp" ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_list") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "list_tdd_test.cpp",
+    "root_component_mock.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_marquee") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "marquee_tdd_test.cpp",
+    "root_component_mock.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_opacity") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "opacity_tdd_test.cpp",
+    "root_component_mock.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_percent") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [ "percent_tdd_test.cpp" ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_pickerview") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "picker_view_tdd_test.cpp",
+    "root_component_mock.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_radio_switch_width") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "radio_switch_tdd_test.cpp",
+    "root_component_mock.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_slider") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "root_component_mock.cpp",
+    "slider_tdd_test.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_swiper") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "root_component_mock.cpp",
+    "swiper_tdd_test.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_switch") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "root_component_mock.cpp",
+    "switch_tdd_test.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_text") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "root_component_mock.cpp",
+    "text_tdd_test.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_text_exception") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "root_component_mock.cpp",
+    "text_tdd_exception_test.cpp",
+  ]
+  deps = ace_test_deps
+}
diff --git a/frameworks/src/core/components/test/unittest/common/arc_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/arc_tdd_test.cpp
new file mode 100755
index 0000000..31c8486
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/arc_tdd_test.cpp
@@ -0,0 +1,1220 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "arc_tdd_test.h"
+
+namespace OHOS {
+namespace ACELite {
+void ArcTddTest::SetCircleType()
+{
+    JerrySetStringProperty(attrsObj_, "type", "arc");
+}
+
+int16_t ArcTddTest::GetPercentage(const UICircleProgress &circleProgress) const
+{
+    uint16_t delta = circleProgress.GetValue() - circleProgress.GetRangeMin();
+    uint16_t rangeSize = circleProgress.GetRangeMax() - circleProgress.GetRangeMin();
+    if (rangeSize == 0) {
+        return 0;
+    }
+
+    uint8_t totalPercent = 100;
+    uint16_t result = totalPercent * delta / rangeSize;
+    if (result > totalPercent) {
+        result = totalPercent;
+    }
+    return result;
+}
+
+void ArcTddTest::PrintExpectInfo(const ColorType colorType, int32_t lineColor) const
+{
+    EXPECT_TRUE(colorType.green == GetRGBColor(lineColor).green);
+    EXPECT_TRUE(colorType.blue == GetRGBColor(lineColor).blue);
+    EXPECT_TRUE(colorType.red == GetRGBColor(lineColor).red);
+}
+
+void ArcTddTest::ComponentProgressAttributeSetTest001()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+    /**
+    * @tc.steps: step1. set attribute percent = 50
+    */
+    int8_t percentValue = 50;
+    JerrySetNumberProperty(attrsObj_, "percent", percentValue);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressAttributeSetTest001 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressAttributeSetTest001 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.expected: step1. check percent = 50
+    */
+    EXPECT_TRUE(GetPercentage(*circleView) == percentValue);
+
+    /**
+    * @tc.steps: step2. set attribute percent = -60
+    */
+    int8_t percentValueNavigateNum = -60;
+    UpdateNumAttributeOrStyleValue(circleComponent, "percent", percentValueNavigateNum, true);
+
+   /**
+    * @tc.expected: step2. check percent = 0
+    */
+    EXPECT_TRUE(GetPercentage(*circleView) == 0);
+
+    /**
+    * @tc.steps: step3. set attribute percent = -1
+    */
+    UpdateNumAttributeOrStyleValue(circleComponent, "percent", -1, true);
+
+    /**
+    * @tc.expected: step3. check percent = 0
+    */
+    EXPECT_TRUE(GetPercentage(*circleView) == 0);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressAttributeSetTest002()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressAttributeSetTest002 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressAttributeSetTest002 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+    /**
+    * @tc.steps: step4. set attribute percent = 0
+    */
+    UpdateNumAttributeOrStyleValue(circleComponent, "percent", 0, true);
+
+    /**
+    * @tc.expected: step4. check percent = 0
+    */
+    EXPECT_TRUE(GetPercentage(*circleView) == 0);
+
+    /**
+    * @tc.steps: step5. set attribute percent = 100
+    */
+    int8_t percentValueFull = 100;
+    UpdateNumAttributeOrStyleValue(circleComponent, "percent", percentValueFull, true);
+
+    /**
+    * @tc.expected: step5. check percent = 100
+    */
+    EXPECT_TRUE(GetPercentage(*circleView) == percentValueFull);
+
+    /**
+    * @tc.steps: step6. set attribute percent = 101
+    */
+    int8_t percentValueBoundary = 101;
+    UpdateNumAttributeOrStyleValue(circleComponent, "percent", percentValueBoundary, true);
+
+    /**
+    * @tc.expected: step6. check percent = 100
+    */
+    uint8_t maxPercent = 100;
+    EXPECT_TRUE(GetPercentage(*circleView) == maxPercent);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressAttributeSetTest003()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressAttributeSetTest003 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressAttributeSetTest003 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+    /**
+    * @tc.steps: step6. set attribute percent = 200
+    */
+    uint8_t percentValueOver = 200;
+    UpdateNumAttributeOrStyleValue(circleComponent, "percent", percentValueOver, true);
+
+    /**
+    * @tc.expected: step6. check percent = 100
+    */
+    uint8_t maxPercent = 100;
+    EXPECT_TRUE(GetPercentage(*circleView) == maxPercent);
+
+    /**
+    * @tc.steps: step6. set attribute percent = "abc"
+    */
+    UpdateCharAttributeOrStyleValue(circleComponent, "percent", "abc", true);
+
+    /**
+    * @tc.expected: step6. check percent = "abc"
+    */
+    EXPECT_TRUE(GetPercentage(*circleView) == 0);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest001()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* attributeName = "centerX";
+
+    /**
+    * @tc.steps: step1. set style centerX = 227
+    */
+    uint8_t centerX = 227;
+    JerrySetNumberProperty(styleObj_, attributeName, centerX);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest001 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest001 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.expected: step1. check centerX = 227
+    */
+    EXPECT_TRUE(circleView->GetCenterPosition().x == centerX);
+
+    /**
+    * @tc.steps: step2. set attribute centerX = -32768
+    */
+    int16_t centerXBoundary = -32768;
+    UpdateNumAttributeOrStyleValue(circleComponent, attributeName, centerXBoundary, false);
+
+    /**
+    * @tc.expected: step2. check centerX = -32768
+    */
+    EXPECT_TRUE(circleView->GetCenterPosition().x == centerXBoundary);
+
+    /**
+    * @tc.steps: step3. set attribute centerX = 32765
+    */
+    int16_t centerXBoundaryIn = 32765;
+    UpdateNumAttributeOrStyleValue(circleComponent, attributeName, centerXBoundaryIn, false);
+
+    /**
+    * @tc.expected: step3. check centerX = 32765
+    */
+    EXPECT_TRUE(circleView->GetCenterPosition().x == centerXBoundaryIn);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest002()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* attributeName = "centerX";
+
+    /**
+    * @tc.steps: step1. set style centerX = -32769
+    */
+    int32_t centerX = -32769;
+    JerrySetNumberProperty(styleObj_, attributeName, centerX);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest002 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest002 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.expected: step1. set normal value 20, and check centerX = 22 (use normal value set to check whether system
+    * run normally)
+    */
+    uint8_t centerXNormal = 20;
+    UpdateNumAttributeOrStyleValue(circleComponent, "centerX", centerXNormal, false);
+    EXPECT_TRUE(circleView->GetCenterPosition().x == centerXNormal);
+
+    /**
+    * @tc.steps: step2. set style centerX = -32766
+    */
+    int16_t centerXBoundary = -32766;
+    UpdateNumAttributeOrStyleValue(circleComponent, "centerX", centerXBoundary, false);
+
+    /**
+    * @tc.steps: step3. set style centerX = "*,"
+    */
+    UpdateCharAttributeOrStyleValue(circleComponent, "centerX", "*,", false);
+
+    /**
+    * @tc.expected: step3. check centerX = 0 (use normal value set to check whether system run normally)
+    */
+    EXPECT_TRUE(circleView->GetCenterPosition().x == 0);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest003()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "centerY";
+
+    /**
+    * @tc.steps: step1. set style centerY = 227
+    */
+    uint8_t centerY = 227;
+    JerrySetNumberProperty(styleObj_, styleName, centerY);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest003 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest003 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.expected: step1. check centerY = 227
+    */
+    EXPECT_TRUE(circleView->GetCenterPosition().y == centerY);
+
+    /**
+    * @tc.steps: step2. set attribute centerY = -32768
+    */
+    int16_t centerYBoundary = -32768;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, centerYBoundary, false);
+
+    /**
+    * @tc.expected: step2. check centerY = -32768
+    */
+    EXPECT_TRUE(circleView->GetCenterPosition().y == centerYBoundary);
+
+    /**
+    * @tc.steps: step3. set attribute centerY = 32765
+    */
+    int16_t centerYBoundaryIn = 32765;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, centerYBoundaryIn, false);
+
+    /**
+    * @tc.expected: step3. check centerY = 32765
+    */
+    EXPECT_TRUE(circleView->GetCenterPosition().y == centerYBoundaryIn);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest004()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "centerY";
+
+    /**
+    * @tc.steps: step1. set style centerY = -32769
+    */
+    int32_t centerY = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, centerY);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest003 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest003 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.expected: step1. set normal value 20, and check centerY = 22 (use normal value set to check whether system
+    * run normally)
+    */
+    uint8_t centerYNormal = 20;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, centerYNormal, false);
+    EXPECT_TRUE(circleView->GetCenterPosition().y == centerYNormal);
+
+    /**
+    * @tc.steps: step2. set style centerY = -32766
+    */
+    int16_t centerYBoundary = -32766;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, centerYBoundary, false);
+
+    /**
+    * @tc.steps: step3. set style centerY = "abc"
+    */
+    UpdateCharAttributeOrStyleValue(circleComponent, styleName, "abc", false);
+
+    /**
+    * @tc.expected: step3. check centerY = 0 (use normal value set to check whether system run normally)
+    */
+    EXPECT_TRUE(circleView->GetCenterPosition().y == 0);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest005()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "radius";
+
+    /**
+    * @tc.steps: step1. set style radius = 227
+    */
+    uint8_t radius = 227;
+    JerrySetNumberProperty(styleObj_, styleName, radius);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest005 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest005 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.expected: step1. check radius = 227
+    */
+    EXPECT_TRUE(circleView->GetRadius() == radius);
+
+    /**
+    * @tc.steps: step2. set style radius = 0
+    */
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, 0, false);
+
+    /**
+    * @tc.expected: step2. check radius = 0
+    */
+    EXPECT_TRUE(circleView->GetRadius() == 0);
+
+    /**
+    * @tc.steps: step3. set style radius = 65534
+    */
+    uint16_t radiusBoundary = 65534;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, radiusBoundary, false);
+
+    /**
+    * @tc.expected: step3. check radius = 65534
+    */
+    EXPECT_TRUE(circleView->GetRadius() == radiusBoundary);
+
+    /**
+    * @tc.steps: step4. set style radius = "this is a string"
+    */
+    UpdateCharAttributeOrStyleValue(circleComponent, styleName, "this is a string", false);
+
+    /**
+    * @tc.expected: step4. check radius = 0
+    */
+    EXPECT_TRUE(circleView->GetRadius() == 0);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest006()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "radius";
+
+    /**
+    * @tc.steps: step1. set style radius = -1
+    */
+    JerrySetNumberProperty(styleObj_, styleName, -1);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest006 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest006 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.steps: step2. set style radius = 655355
+    */
+    int32_t radius = 655355;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, radius, false);
+
+    /**
+    * @tc.expected: step2. set normal value 20, and check radius = 20 (use normal value set to check whether system run
+    * normally)
+    */
+    uint8_t radiusNormal = 20;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, radiusNormal, false);
+    EXPECT_TRUE(circleView->GetRadius() == radiusNormal);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest008()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "startAngle";
+
+    /**
+    * @tc.steps: step1. set style startAngle = 0
+    */
+    JerrySetNumberProperty(styleObj_, styleName, 0);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest008 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest008 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.expected: step1. check startAngle = 0
+    */
+    EXPECT_TRUE(circleView->GetStartAngle() == 0);
+
+    /**
+    * @tc.steps: step2. set style startAngle = 360
+    */
+    int16_t startAngle = 360;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, startAngle, false);
+
+    /**
+    * @tc.expected: step2. check startAngle = 360
+    */
+    EXPECT_TRUE(circleView->GetStartAngle() == startAngle);
+
+    /**
+    * @tc.steps: step3. set style startAngle = 361
+    */
+    int16_t startAngleBoundary = 361;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, startAngleBoundary, false);
+
+    /**
+    * @tc.expected: step3. check startAngle = 360
+    */
+    EXPECT_TRUE(circleView->GetStartAngle() == startAngle);
+
+    /**
+    * @tc.steps: step4. set style startAngle = -1
+    */
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, -1, false);
+
+    /**
+    * @tc.expected: step4. check startAngle = 0
+    */
+    EXPECT_TRUE(circleView->GetStartAngle() == 0);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest009()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "startAngle";
+
+    /**
+    * @tc.steps: step1. set unnormal style startAngle = -32769
+    */
+    int32_t startAngle = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, startAngle);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest009 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest009 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.steps: step2. set unnormal style startAngle = 326669
+    */
+    int32_t startAngleLarger = 326669;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, startAngleLarger, false);
+
+    /**
+    * @tc.steps: step3. set style startAngle = 30
+    */
+    uint8_t startAngleNormal = 30;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, startAngleNormal, false);
+
+    /**
+    * @tc.expected: step3. check startAngle = 30
+    */
+    EXPECT_TRUE(circleView->GetStartAngle() == startAngleNormal);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest010()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "totalAngle";
+
+    int16_t startAngle = 30;
+    JerrySetNumberProperty(styleObj_, "startAngle", startAngle);
+
+    /**
+    * @tc.steps: step1. set style totalAngle = -360
+    */
+    int16_t totalAngle = -360;
+    JerrySetNumberProperty(styleObj_, styleName, totalAngle);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest010 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest010 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.expected: step1. check endAngle = -330
+    */
+    int16_t endAngle = -330;
+    EXPECT_TRUE(circleView->GetEndAngle() == endAngle);
+
+    /**
+    * @tc.steps: step2. set style totalAngle = -361
+    */
+    int16_t totalAngleBoundary = -361;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, totalAngleBoundary, false);
+
+    /**
+    * @tc.expected: step2. check endAngle = -330
+    */
+    EXPECT_TRUE(circleView->GetEndAngle() == endAngle);
+
+    /**
+    * @tc.steps: step3. set style totalAngle = 360
+    */
+    int16_t totalAngleBoundaryIn = 360;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, totalAngleBoundaryIn, false);
+
+    /**
+    * @tc.expected: step3. check endAngle = 390
+    */
+    int16_t endAngleUpdate = 390;
+    EXPECT_TRUE(circleView->GetEndAngle() == endAngleUpdate);
+
+    /**
+    * @tc.steps: step4. set style totalAngle = 90
+    */
+    uint8_t totalAngleNormal = 90;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, totalAngleNormal, false);
+
+    /**
+    * @tc.expected: step4. check endAngle = 120
+    */
+    uint8_t endAngleReNew = 120;
+    EXPECT_TRUE(circleView->GetEndAngle() == endAngleReNew);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest011()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "totalAngle";
+    uint8_t startAngle = 30;
+    JerrySetNumberProperty(styleObj_, "startAngle", startAngle);
+
+    /**
+    * @tc.steps: step1. set unnormal style totaldAngle = -32769
+    */
+    int32_t totalAngle = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, totalAngle);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest011 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest011 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.steps: step2. set unnormal style totalAngle = 326669
+    */
+    int32_t totalAngleBoundary = 326669;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, totalAngleBoundary, false);
+
+    /**
+    * @tc.steps: step3. set style totalAngle = 30
+    */
+    uint8_t totalAngleNormal = 30;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, totalAngleNormal, false);
+
+    /**
+    * @tc.expected: step3. check endAngle = 60
+    */
+    uint8_t endAngle = 60;
+    EXPECT_TRUE(circleView->GetEndAngle() == endAngle);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest012()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "color";
+
+    /**
+    * @tc.steps: step1. set style lineColor = 227
+    */
+    int32_t lineColor = 227;
+    JerrySetNumberProperty(styleObj_, styleName, lineColor);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest012 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest012 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+    ColorType tempColor;
+    tempColor.full = circleView->GetForegroundStyle(STYLE_LINE_COLOR);
+
+    /**
+    * @tc.expected: step1. check lineColor = 227
+    */
+    PrintExpectInfo(tempColor, lineColor);
+
+    /**
+    * @tc.steps: step2. set style lineColor = -2147483648
+    */
+    int32_t lineColorBoundary = INT_MIN;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, lineColorBoundary, false);
+    tempColor.full = circleView->GetForegroundStyle(STYLE_LINE_COLOR);
+
+    /**
+    * @tc.expected: step2. check lineColor = -2147483648
+    */
+    PrintExpectInfo(tempColor, lineColorBoundary);
+
+    /**
+    * @tc.steps: step3. set style lineColor = 2147483647
+    */
+    int32_t lineColorBoundaryPosNum = 2147483647;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, lineColorBoundaryPosNum, false);
+    tempColor.full = circleView->GetForegroundStyle(STYLE_LINE_COLOR);
+
+    /**
+    * @tc.expected: step3. check lineColor = 2147483647
+    */
+    PrintExpectInfo(tempColor, lineColorBoundaryPosNum);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest013()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "color";
+
+    /**
+    * @tc.steps: step1. set unnormal style lineColor = -2147483648
+    */
+    int32_t lineColor = INT_MIN;
+    JerrySetNumberProperty(styleObj_, styleName, lineColor);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest013 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest013 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.steps: step2. set unnormal style lineColor = 2147483648
+    */
+    int32_t lineColorBoundary = 2147483648;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, lineColorBoundary, false);
+
+    /**
+    * @tc.steps: step3. set style lineColor = 30
+    */
+    uint8_t lineColorNormal = 30;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, lineColorNormal, false);
+    ColorType tempColor;
+    tempColor.full = circleView->GetForegroundStyle(STYLE_LINE_COLOR);
+
+    /**
+    * @tc.expected: step3. check lineColor = 30
+    */
+    PrintExpectInfo(tempColor, lineColorNormal);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest014()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "strokeWidth";
+
+    /**
+    * @tc.steps: step1. set style lineWidth = 227
+    */
+    int16_t lineWidth = 227;
+    JerrySetNumberProperty(styleObj_, styleName, lineWidth);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest014 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest014 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.expected: step1. check lineWidth = 227
+    */
+    EXPECT_TRUE(circleView->GetForegroundStyle(STYLE_LINE_WIDTH) == lineWidth);
+
+    /**
+    * @tc.steps: step2. set style lineWidth = -32768
+    */
+    int16_t lineWidthBoundary = -32768;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, lineWidthBoundary, false);
+
+    /**
+    * @tc.expected: step2. check lineWidth = -32768
+    */
+    EXPECT_TRUE(circleView->GetForegroundStyle(STYLE_LINE_WIDTH) == lineWidthBoundary);
+
+    /**
+    * @tc.steps: step3. set style lineWidth = 32767
+    */
+    int16_t lineWidthBoundaryPosNum = 32767;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, lineWidthBoundaryPosNum, false);
+
+    /**
+    * @tc.expected: step3. check lineWidth = 32767
+    */
+    EXPECT_TRUE(circleView->GetForegroundStyle(STYLE_LINE_WIDTH) == lineWidthBoundaryPosNum);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::ComponentProgressStyleSetTest015()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("progress");
+    SetCircleType();
+
+    const char* styleName = "strokeWidth";
+
+    /**
+    * @tc.steps: step1. set unnormal style lineWidth = -32769
+    */
+    int32_t lineWidth = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, lineWidth);
+
+    Component* circleComponent = reinterpret_cast<CircleProgressComponent *>(GetRenderedComponent(componentNameId_));
+    if (circleComponent == nullptr) {
+        printf("ComponentProgressStyleSetTest015 fail\n");
+        TDD_CASE_END();
+        return;
+    }
+    UICircleProgress* circleView = reinterpret_cast<UICircleProgress *>(circleComponent->GetComponentRootView());
+    if (circleView == nullptr) {
+        printf("ComponentProgressStyleSetTest015 fail\n");
+        delete(circleComponent);
+        circleComponent = nullptr;
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+    * @tc.steps: step2. set unnormal style lineWidth = 326669
+    */
+    int32_t lineWidthBoundary = 326669;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, lineWidthBoundary, false);
+
+    /**
+    * @tc.steps: step3. set style lineWidth = 30
+    */
+    uint8_t lineWidthNormal = 30;
+    UpdateNumAttributeOrStyleValue(circleComponent, styleName, lineWidthNormal, false);
+
+    /**
+    * @tc.expected: step3. check lineWidth = 30
+    */
+    EXPECT_TRUE(circleView->GetForegroundStyle(STYLE_LINE_WIDTH) == lineWidthNormal);
+    delete(circleComponent);
+    circleComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void ArcTddTest::RunTests()
+{
+    ComponentProgressAttributeSetTest001();
+    ComponentProgressStyleSetTest001();
+    ComponentProgressStyleSetTest002();
+    ComponentProgressStyleSetTest003();
+    ComponentProgressStyleSetTest004();
+    ComponentProgressStyleSetTest005();
+    ComponentProgressStyleSetTest006();
+    ComponentProgressStyleSetTest008();
+    ComponentProgressStyleSetTest009();
+    ComponentProgressStyleSetTest010();
+    ComponentProgressStyleSetTest011();
+    ComponentProgressStyleSetTest012();
+    ComponentProgressStyleSetTest013();
+    ComponentProgressStyleSetTest014();
+    ComponentProgressStyleSetTest015();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+* @tc.name: ComponentProgressAttributeSetTest001
+* @tc.desc: Verify circleprogress percent attribute can set normally.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcAttr001, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressAttributeSetTest001();
+}
+
+/**
+* @tc.name: ComponentProgressAttributeSetTest002
+* @tc.desc: Verify circleprogress percent attribute can set normally.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcAttr002, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressAttributeSetTest002();
+}
+
+/**
+* @tc.name: ComponentProgressAttributeSetTest003
+* @tc.desc: Verify circleprogress percent attribute can set normally.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcAttr003, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressAttributeSetTest003();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest001
+* @tc.desc: Verify circleprogress centerX style can set normally.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle001, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest001();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest002
+* @tc.desc: Verify circleprogress centerX style can deal unNormally value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle002, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest002();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest003
+* @tc.desc: Verify circleprogress centerY style can set normally.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle003, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest003();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest004
+* @tc.desc: Verify circleprogress centerY style can deal unNormally value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle004, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest004();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest005
+* @tc.desc: Verify circleprogress radius style can set normally.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle005, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest005();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest006
+* @tc.desc: Verify circleprogress radius style can deal unNormally value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle006, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest006();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest008
+* @tc.desc: Verify circleprogress startAngle style can set normal value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle008, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest008();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest009
+* @tc.desc: Verify circleprogress startAngle style can deal unNormal value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle009, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest009();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest010
+* @tc.desc: Verify circleprogress totalAngle style can set normal value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle010, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest010();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest011
+* @tc.desc: Verify circleprogress totalAngle style can deal unNormal value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle011, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest011();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest012
+* @tc.desc: Verify circleprogress lineColor style can set normal value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle012, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest012();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest013
+* @tc.desc: Verify circleprogress lineColor style can deal unNormal value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle013, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest013();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest014
+* @tc.desc: Verify circleprogress lineWidth style can set normal value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle014, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest014();
+}
+
+/**
+* @tc.name: ComponentProgressStyleSetTest015
+* @tc.desc: Verify circleprogress lineWidth style can deal unNormal value.
+* @tc.require: AR000DSEFE
+*/
+HWTEST_F(ArcTddTest, arcStyle015, TestSize.Level1)
+{
+    ArcTddTest::ComponentProgressStyleSetTest015();
+}
+#endif
+}
+}
\ No newline at end of file
diff --git a/frameworks/src/core/components/test/unittest/common/arc_tdd_test.h b/frameworks/src/core/components/test/unittest/common/arc_tdd_test.h
new file mode 100755
index 0000000..72c99e6
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/arc_tdd_test.h
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_TEST_ARC_H
+#define OHOS_ACELITE_TEST_ARC_H
+
+#include "base_test.h"
+#include "circle_progress_component.h"
+#include "ui_abstract_progress.h"
+#include "ui_circle_progress.h"
+
+namespace OHOS {
+namespace ACELite {
+class ArcTddTest : public BaseTest {
+public:
+    void SetCircleType();
+    int16_t GetPercentage(const UICircleProgress &circleProgress) const;
+    void PrintExpectInfo(const ColorType colorType, int32_t lineColor) const;
+    void ComponentProgressAttributeSetTest001();
+    void ComponentProgressAttributeSetTest002();
+    void ComponentProgressAttributeSetTest003();
+    void ComponentProgressStyleSetTest001();
+    void ComponentProgressStyleSetTest002();
+    void ComponentProgressStyleSetTest003();
+    void ComponentProgressStyleSetTest004();
+    void ComponentProgressStyleSetTest005();
+    void ComponentProgressStyleSetTest006();
+    void ComponentProgressStyleSetTest008();
+    void ComponentProgressStyleSetTest009();
+    void ComponentProgressStyleSetTest010();
+    void ComponentProgressStyleSetTest011();
+    void ComponentProgressStyleSetTest012();
+    void ComponentProgressStyleSetTest013();
+    void ComponentProgressStyleSetTest014();
+    void ComponentProgressStyleSetTest015();
+    void RunTests();
+};
+}
+}
+#endif // OHOS_ACELITE_TEST_ARC_H
diff --git a/frameworks/src/core/components/test/unittest/common/div_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/div_tdd_test.cpp
new file mode 100755
index 0000000..9da25b0
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/div_tdd_test.cpp
@@ -0,0 +1,1189 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "div_tdd_test.h"
+#include "base_test.h"
+#include "div_component.h"
+#include "js_app_environment.h"
+#include "stylemgr/app_style_manager.h"
+
+namespace OHOS {
+namespace ACELite {
+DivTddTest::DivTddTest() : BaseTest()
+{
+    uint8_t componentNameLength = 3;
+    componentNameId_ = KeyParser::ParseKeyId("div", componentNameLength);
+}
+
+void DivTddTest::ComponentDivAttributeSetTest015()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set unsupported attribute aaa = "abc"
+     */
+    JerrySetStringProperty(attrsObj_, "aaa", "abc");
+
+    /* *
+     * @tc.steps: step2. set normal attribute width = "100"
+     */
+    JerrySetStringProperty(attrsObj_, "id", "div01");
+
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step2. check width set correctly
+     */
+    if (!strcmp(divView->GetViewId(), "div01")) {
+        printf("ComponentDivAttributeSetTest015 pass\n");
+    } else {
+        printf("ComponentDivAttributeSetTest015 fail\n");
+    }
+    EXPECT_STREQ(divView->GetViewId(), "div01");
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest008()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set style width = 0
+     */
+    JerrySetNumberProperty(styleObj_, "width", 0);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step1. check width = 0
+     */
+    if (divView->GetWidth() == 0) {
+        printf("ComponentDivStyleSetTest008 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest008 fail\n");
+    }
+    EXPECT_TRUE(divView->GetWidth() == 0);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style width = 20
+     */
+    uint8_t width = 20;
+    JerrySetNumberProperty(styleObj_, "width", width);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step2. check width = 20
+     */
+    if (divView->GetWidth() == width) {
+        printf("ComponentDivStyleSetTest008 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest008 fail\n");
+    }
+    EXPECT_TRUE(divView->GetWidth() == width);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest009()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set width = -32768
+     */
+    int16_t width = -32768;
+    JerrySetNumberProperty(styleObj_, "width", width);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step1. get width = 1
+     */
+    if (divView->GetWidth() == 1) {
+        printf("ComponentDivStyleSetTest009 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest009 fail\n");
+    }
+    EXPECT_TRUE(divView->GetWidth() == 1);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set width = 32767
+     */
+    int16_t widthBoundaryPosNum = 32767;
+    JerrySetNumberProperty(styleObj_, "width", widthBoundaryPosNum);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step2. get width = 32767
+     */
+    if (divView->GetWidth() == widthBoundaryPosNum) {
+        printf("ComponentDivStyleSetTest009 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest009 fail\n");
+    }
+    EXPECT_TRUE(divView->GetWidth() == widthBoundaryPosNum);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest010()
+{
+    TDD_CASE_BEGIN();
+    const char *styleName = "width";
+    /* *
+     * @tc.steps: step1. set width = -32769, set width = 3276888
+     */
+    int32_t width = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, width);
+
+    int32_t widthLarge = 1000000;
+    JerrySetNumberProperty(styleObj_, styleName, widthLarge);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style width = "10"
+     */
+    uint8_t widthNormal = 10;
+    JerrySetNumberProperty(styleObj_, styleName, widthNormal);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.expected: step3. check system not crash(set normal value, and check it is setted correctly)
+     */
+    uint8_t widthIn = 5;
+    JerrySetNumberProperty(styleObj_, styleName, widthIn);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    printf("%d\n", divView->GetWidth());
+    if (divView->GetWidth() == widthIn) {
+        printf("ComponentDivStyleSetTest010 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest010 fail\n");
+    }
+    EXPECT_TRUE(divView->GetWidth() == widthIn);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest011()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set style height = 0
+     */
+    JerrySetNumberProperty(styleObj_, "height", 0);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step1. check height = 0
+     */
+    if (divView->GetHeight() == 0) {
+        printf("ComponentDivStyleSetTest011 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest011 fail\n");
+    }
+    EXPECT_TRUE(divView->GetHeight() == 0);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style height = 20
+     */
+    uint8_t height = 20;
+    JerrySetNumberProperty(styleObj_, "height", height);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step2. check height = 20
+     */
+    if (divView->GetHeight() == height) {
+        printf("ComponentDivStyleSetTest011 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest011 fail\n");
+    }
+    EXPECT_TRUE(divView->GetHeight() == height);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest012()
+{
+    TDD_CASE_BEGIN();
+    const char *styleName = "height";
+    /* *
+     * @tc.steps: step1. set height = -32769, set height = 3276888
+     */
+    int32_t height = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, height);
+
+    int32_t heightBoundary = 3276888;
+    JerrySetNumberProperty(styleObj_, styleName, heightBoundary);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style height = "10"
+     */
+    JerrySetStringProperty(styleObj_, styleName, "10");
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.expected: step3. check system not crash(set normal value, and check it is setted correctly)
+     */
+    uint8_t heightNormal = 5;
+    JerrySetNumberProperty(styleObj_, styleName, heightNormal);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    printf("%d\n", divView->GetHeight());
+    if (divView->GetHeight() == heightNormal) {
+        printf("ComponentDivStyleSetTest012 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest012 fail\n");
+    }
+    EXPECT_TRUE(divView->GetHeight() == heightNormal);
+    delete (component);
+    component = nullptr;
+
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest013()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set style margin = 0
+     */
+    JerrySetNumberProperty(styleObj_, "margin", 0);
+
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step1. check margin = 0
+     */
+    if (divView->GetStyle(STYLE_MARGIN_LEFT) == 0 && divView->GetStyle(STYLE_MARGIN_TOP) == 0 &&
+        divView->GetStyle(STYLE_MARGIN_RIGHT) == 0 && divView->GetStyle(STYLE_MARGIN_BOTTOM) == 0) {
+        printf("ComponentDivStyleSetTest013 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest013 fail\n");
+    }
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_LEFT) == 0);
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_TOP) == 0);
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_RIGHT) == 0);
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_BOTTOM) == 0);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style margin = 20
+     */
+    uint8_t margin = 20;
+    JerrySetNumberProperty(styleObj_, "margin", margin);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step2. check margin = 20
+     */
+    if (divView->GetStyle(STYLE_MARGIN_LEFT) == margin && divView->GetStyle(STYLE_MARGIN_TOP) == margin &&
+        divView->GetStyle(STYLE_MARGIN_RIGHT) == margin && divView->GetStyle(STYLE_MARGIN_BOTTOM) == margin) {
+        printf("ComponentDivStyleSetTest013 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest013 fail\n");
+    }
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_LEFT) == margin);
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_TOP) == margin);
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_RIGHT) == margin);
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_BOTTOM) == margin);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest014()
+{
+    TDD_CASE_BEGIN();
+    const char *styleName = "margin";
+    /* *
+     * @tc.steps: step1. set margin = -32769, set margin = 3276888
+     */
+    int32_t margin = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, margin);
+
+    int32_t marginBoundary = 3276888;
+    JerrySetNumberProperty(styleObj_, styleName, marginBoundary);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+    /* *
+     * @tc.steps: step2. set style margin = "10"
+     */
+    JerrySetStringProperty(styleObj_, styleName, "10");
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+    /* *
+     * @tc.expected: step3. check system not crash(set normal value, and check it is setted correctly)
+     */
+    uint8_t marginNormal = 5;
+    JerrySetNumberProperty(styleObj_, styleName, marginNormal);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    printf("%d\n", divView->GetHeight());
+    if (divView->GetStyle(STYLE_MARGIN_LEFT) == marginNormal && divView->GetStyle(STYLE_MARGIN_TOP) == marginNormal &&
+        divView->GetStyle(STYLE_MARGIN_RIGHT) == marginNormal &&
+        divView->GetStyle(STYLE_MARGIN_BOTTOM) == marginNormal) {
+        printf("ComponentDivStyleSetTest014 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest014 fail\n");
+    }
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_LEFT) == marginNormal);
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_TOP) == marginNormal);
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_RIGHT) == marginNormal);
+    EXPECT_TRUE(divView->GetStyle(STYLE_MARGIN_BOTTOM) == marginNormal);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest015()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set style borderWidth = 0
+     */
+    JerrySetNumberProperty(styleObj_, "borderWidth", 0);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step1. check borderWidth = 0
+     */
+    if (divView->GetStyle(STYLE_BORDER_WIDTH) == 0) {
+        printf("ComponentDivStyleSetTest015 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest015 fail\n");
+    }
+    EXPECT_TRUE(divView->GetStyle(STYLE_BORDER_WIDTH) == 0);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style borderWidth = 20
+     */
+    uint8_t borderWidth = 20;
+    JerrySetNumberProperty(styleObj_, "borderWidth", borderWidth);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step2. check borderWidth = 20
+     */
+    if (divView->GetStyle(STYLE_BORDER_WIDTH) == borderWidth) {
+        printf("ComponentDivStyleSetTest015 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest015 fail\n");
+    }
+    EXPECT_TRUE(divView->GetStyle(STYLE_BORDER_WIDTH) == borderWidth);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest016()
+{
+    TDD_CASE_BEGIN();
+    const char *styleName = "borderWidth";
+    /* *
+     * @tc.steps: step1. set borderWidth = -32769, set borderWidth = 3276888
+     */
+    int32_t borderWidth = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, borderWidth);
+
+    int32_t borderWidthBoundary = 3276888;
+    JerrySetNumberProperty(styleObj_, styleName, borderWidthBoundary);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style borderWidth = "10"
+     */
+    JerrySetStringProperty(styleObj_, styleName, "10");
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+    /* *
+     * @tc.expected: step3. check system not crash(set normal value, and check it is setted correctly)
+     */
+    uint8_t borderWidthNormal = 5;
+    JerrySetNumberProperty(styleObj_, styleName, borderWidthNormal);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    printf("%d\n", divView->GetHeight());
+    if (divView->GetStyle(STYLE_BORDER_WIDTH) == borderWidthNormal) {
+        printf("ComponentDivStyleSetTest016 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest016 fail\n");
+    }
+    EXPECT_TRUE(divView->GetStyle(STYLE_BORDER_WIDTH) == borderWidthNormal);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest017()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set style borderRadius = 0
+     */
+    JerrySetNumberProperty(styleObj_, "borderRadius", 0);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step1. check borderRadius = 0
+     */
+    if (divView->GetStyle(STYLE_BORDER_RADIUS) == 0) {
+        printf("ComponentDivStyleSetTest017 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest017 fail\n");
+    }
+    EXPECT_TRUE(divView->GetStyle(STYLE_BORDER_RADIUS) == 0);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style borderRadius = 20
+     */
+    uint8_t borderRadius = 20;
+    JerrySetNumberProperty(styleObj_, "borderRadius", borderRadius);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step2. check borderRadius = 20
+     */
+    if (divView->GetStyle(STYLE_BORDER_RADIUS) == borderRadius) {
+        printf("ComponentDivStyleSetTest017 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest017 fail\n");
+    }
+    EXPECT_TRUE(divView->GetStyle(STYLE_BORDER_RADIUS) == borderRadius);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest018()
+{
+    TDD_CASE_BEGIN();
+    const char *styleName = "borderRadius";
+    /* *
+     * @tc.steps: step1. set borderRadius = -32769, set borderRadius = 3276888
+     */
+    uint32_t borderRadius = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, borderRadius);
+
+    uint32_t borderRadiusBoundary = 3276888;
+    JerrySetNumberProperty(styleObj_, styleName, borderRadiusBoundary);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style borderRadius = "10"
+     */
+    JerrySetStringProperty(styleObj_, styleName, "10");
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+    /* *
+     * @tc.expected: step3. check system not crash(set normal value, and check it is setted correctly)
+     */
+    uint8_t borderRadiusNormal = 5;
+    JerrySetNumberProperty(styleObj_, styleName, borderRadiusNormal);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    printf("%d\n", divView->GetHeight());
+    if (divView->GetStyle(STYLE_BORDER_RADIUS) == borderRadiusNormal) {
+        printf("ComponentDivStyleSetTest018 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest018 fail\n");
+    }
+    EXPECT_TRUE(divView->GetStyle(STYLE_BORDER_RADIUS) == borderRadiusNormal);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest019()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set style left = 0
+     */
+    JerrySetNumberProperty(styleObj_, "left", 0);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step1. check left = 0
+     */
+    if (divView->GetX() == 0) {
+        printf("ComponentDivStyleSetTest019 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest019 fail\n");
+    }
+    EXPECT_TRUE(divView->GetX() == 0);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style left = 20
+     */
+    uint8_t left = 20;
+    JerrySetNumberProperty(styleObj_, "left", left);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step2. check left = 20
+     */
+    if (divView->GetX() == left) {
+        printf("ComponentDivStyleSetTest019 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest019 fail\n");
+    }
+    EXPECT_TRUE(divView->GetX() == left);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest020()
+{
+    TDD_CASE_BEGIN();
+    const char *styleName = "left";
+    /* *
+     * @tc.steps: step1. set left = -32769, set left = 3276888
+     */
+    int32_t left = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, left);
+
+    int32_t leftBoundary = 3276888;
+    JerrySetNumberProperty(styleObj_, styleName, leftBoundary);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style left = "10"
+     */
+    JerrySetStringProperty(styleObj_, styleName, "10");
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+    /* *
+     * @tc.expected: step3. check system not crash(set normal value, and check it is setted correctly)
+     */
+    uint8_t leftNormal = 5;
+    JerrySetNumberProperty(styleObj_, styleName, leftNormal);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    printf("%d\n", divView->GetHeight());
+    if (divView->GetX() == leftNormal) {
+        printf("ComponentDivStyleSetTest020 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest020 fail\n");
+    }
+    EXPECT_TRUE(divView->GetX() == leftNormal);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest021()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set style top = 0
+     */
+    JerrySetNumberProperty(styleObj_, "top", 0);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step1. check top = 0
+     */
+    if (divView->GetY() == 0) {
+        printf("ComponentDivStyleSetTest021 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest021 fail\n");
+    }
+    EXPECT_TRUE(divView->GetY() == 0);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style top = 20
+     */
+    uint8_t top = 20;
+    JerrySetNumberProperty(styleObj_, "top", top);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    /* *
+     * @tc.expected: step2. check top = 20
+     */
+    if (divView->GetY() == top) {
+        printf("ComponentDivStyleSetTest021 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest021 fail\n");
+    }
+    EXPECT_TRUE(divView->GetY() == top);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest022()
+{
+    TDD_CASE_BEGIN();
+    const char *styleName = "top";
+    /* *
+     * @tc.steps: step1. set top = -32769, set top = 3276888
+     */
+    int32_t top = -32769;
+    JerrySetNumberProperty(styleObj_, styleName, top);
+
+    int32_t topBoundary = 3276888;
+    JerrySetNumberProperty(styleObj_, styleName, topBoundary);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style top = "10"
+     */
+    JerrySetStringProperty(styleObj_, styleName, "10");
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+    /* *
+     * @tc.expected: step3. check system not crash(set normal value, and check it is setted correctly)
+     */
+    uint8_t topNormal = 5;
+    JerrySetNumberProperty(styleObj_, styleName, topNormal);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    printf("%d\n", divView->GetHeight());
+    if (divView->GetY() == topNormal) {
+        printf("ComponentDivStyleSetTest022 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest022 fail\n");
+    }
+    EXPECT_TRUE(divView->GetY() == topNormal);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest023()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set style borderColor = 0
+     */
+    JerrySetNumberProperty(styleObj_, "borderColor", 0);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    ColorType tempColor;
+    tempColor.full = divView->GetStyle(STYLE_BORDER_COLOR);
+    /* *
+     * @tc.expected: step1. check borderColor = 0
+     */
+    if (tempColor.blue == Color::GetColorFromRGB(0, 0, 0).blue &&
+        tempColor.red == Color::GetColorFromRGB(0, 0, 0).red &&
+        tempColor.green == Color::GetColorFromRGB(0, 0, 0).green) {
+        printf("ComponentDivStyleSetTest023 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest023 fail\n");
+    }
+    EXPECT_TRUE(tempColor.blue == Color::GetColorFromRGB(0, 0, 0).blue);
+    EXPECT_TRUE(tempColor.red == Color::GetColorFromRGB(0, 0, 0).red);
+    EXPECT_TRUE(tempColor.green == Color::GetColorFromRGB(0, 0, 0).green);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style borderColor = 3158454
+     */
+    int32_t color = 3158454;
+    JerrySetNumberProperty(styleObj_, "borderColor", color);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    tempColor.full = divView->GetStyle(STYLE_BORDER_COLOR);
+    /* *
+     * @tc.expected: step2. check borderColor = 3158454
+     */
+    if (tempColor.blue == GetRGBColor(color).blue && tempColor.red == GetRGBColor(color).red &&
+        tempColor.green == GetRGBColor(color).green) {
+        printf("ComponentDivStyleSetTest023 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest023 fail\n");
+    }
+    EXPECT_TRUE(tempColor.blue == GetRGBColor(color).blue);
+    EXPECT_TRUE(tempColor.red == GetRGBColor(color).red);
+    EXPECT_TRUE(tempColor.green == GetRGBColor(color).green);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest024()
+{
+    TDD_CASE_BEGIN();
+    const char *styleName = "borderColor";
+    /* *
+     * @tc.steps: step1. set borderColor = -21474836481, set borderColor = 21474836481
+     */
+    int64_t borderColor = -21474836481;
+    jerry_value_t numValue = jerry_create_number(borderColor);
+    JerrySetNamedProperty(styleObj_, styleName, numValue);
+    jerry_release_value(numValue);
+
+    int64_t borderColorBoundary = 21474836481;
+    JerrySetNumberProperty(styleObj_, styleName, borderColorBoundary);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style borderColor = "10"
+     */
+    JerrySetStringProperty(styleObj_, styleName, "10");
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+    /* *
+     * @tc.expected: step3. check system not crash(set normal value, and check it is setted correctly)
+     */
+    int32_t borderColorNormal = 2735506;
+    JerrySetNumberProperty(styleObj_, styleName, borderColorNormal);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    ColorType tempColor;
+    tempColor.full = divView->GetStyle(STYLE_BORDER_COLOR);
+    printf("%d\n", divView->GetHeight());
+    if (tempColor.blue == GetRGBColor(borderColorNormal).blue && tempColor.red == GetRGBColor(borderColorNormal).red &&
+        tempColor.green == GetRGBColor(borderColorNormal).green) {
+        printf("ComponentDivStyleSetTest024 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest024 fail\n");
+    }
+    EXPECT_TRUE(tempColor.blue == GetRGBColor(borderColorNormal).blue);
+    EXPECT_TRUE(tempColor.red == GetRGBColor(borderColorNormal).red);
+    EXPECT_TRUE(tempColor.green == GetRGBColor(borderColorNormal).green);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest025()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set style backgroundColor = 0
+     */
+    JerrySetNumberProperty(styleObj_, "backgroundColor", 0);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    ColorType tempColor;
+    tempColor.full = divView->GetStyle(STYLE_BACKGROUND_COLOR);
+    /* *
+     * @tc.expected: step1. check backgroundColor = 0
+     */
+    if (tempColor.blue == GetRGBColor(0).blue && tempColor.red == GetRGBColor(0).red &&
+        tempColor.green == GetRGBColor(0).green) {
+        printf("ComponentDivStyleSetTest025 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest025 fail\n");
+    }
+    EXPECT_TRUE(tempColor.blue == GetRGBColor(0).blue);
+    EXPECT_TRUE(tempColor.red == GetRGBColor(0).red);
+    EXPECT_TRUE(tempColor.green == GetRGBColor(0).green);
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style backgroundColor = 3158454
+     */
+    int32_t color = 3158454;
+    JerrySetNumberProperty(styleObj_, "backgroundColor", color);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    tempColor.full = divView->GetStyle(STYLE_BACKGROUND_COLOR);
+    /* *
+     * @tc.expected: step2. check backgroundColor = 3158454
+     */
+    if (tempColor.blue == GetRGBColor(color).blue && tempColor.red == GetRGBColor(color).red &&
+        tempColor.green == GetRGBColor(color).green) {
+        printf("ComponentDivStyleSetTest025 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest025 fail\n");
+    }
+    EXPECT_TRUE(tempColor.blue == GetRGBColor(color).blue);
+    EXPECT_TRUE(tempColor.red == GetRGBColor(color).red);
+    EXPECT_TRUE(tempColor.green == GetRGBColor(color).green);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest026()
+{
+    TDD_CASE_BEGIN();
+    const char *styleName = "backgroundColor";
+    /* *
+     * @tc.steps: step1. set backgroundColor = -21474836481, set backgroundColor = 21474836481
+     */
+    int64_t bgColor = -21474836481;
+    JerrySetNumberProperty(styleObj_, styleName, bgColor);
+
+    int64_t bgColorBoundary = 21474836481;
+    JerrySetNumberProperty(styleObj_, styleName, bgColorBoundary);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.steps: step2. set style backgroundColor = "10"
+     */
+    JerrySetStringProperty(styleObj_, styleName, "10");
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    delete (component);
+    component = nullptr;
+
+    /* *
+     * @tc.expected: step3. check system not crash(set normal value, and check it is setted correctly)
+     */
+    int32_t bgColorNormal = 2735506;
+    JerrySetNumberProperty(styleObj_, styleName, bgColorNormal);
+    component = GetRenderedComponent(componentNameId_);
+    divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    ColorType tempColor;
+    tempColor.full = divView->GetStyle(STYLE_BACKGROUND_COLOR);
+    printf("%d\n", divView->GetHeight());
+    if (tempColor.blue == GetRGBColor(bgColorNormal).blue && tempColor.red == GetRGBColor(bgColorNormal).red &&
+        tempColor.green == GetRGBColor(bgColorNormal).green) {
+        printf("ComponentDivStyleSetTest026 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest026 fail\n");
+    }
+    EXPECT_TRUE(tempColor.blue == GetRGBColor(bgColorNormal).blue);
+    EXPECT_TRUE(tempColor.red == GetRGBColor(bgColorNormal).red);
+    EXPECT_TRUE(tempColor.green == GetRGBColor(bgColorNormal).green);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::ComponentDivStyleSetTest032()
+{
+    TDD_CASE_BEGIN();
+    /* *
+     * @tc.steps: step1. set top = 50, set unsupport style, abc = 78978
+     */
+    uint8_t top = 50;
+    double abc = 78978;
+    JerrySetNumberProperty(styleObj_, "top", top);
+    JerrySetNumberProperty(styleObj_, "abc", abc);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIViewGroup *divView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+
+    /* *
+     * @tc.steps: step2. check top = 50
+     */
+    if (divView->GetY() == top) {
+        printf("ComponentDivStyleSetTest032 pass\n");
+    } else {
+        printf("ComponentDivStyleSetTest032 fail\n");
+    }
+    EXPECT_TRUE(divView->GetY() == top);
+    delete (component);
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void DivTddTest::RunTests()
+{
+    ComponentDivAttributeSetTest015();
+    ComponentDivStyleSetTest008();
+    ComponentDivStyleSetTest009();
+    ComponentDivStyleSetTest010();
+    ComponentDivStyleSetTest011();
+    ComponentDivStyleSetTest012();
+    ComponentDivStyleSetTest013();
+    ComponentDivStyleSetTest014();
+    ComponentDivStyleSetTest015();
+    ComponentDivStyleSetTest016();
+    ComponentDivStyleSetTest017();
+    ComponentDivStyleSetTest018();
+    ComponentDivStyleSetTest019();
+    ComponentDivStyleSetTest020();
+    ComponentDivStyleSetTest021();
+    ComponentDivStyleSetTest022();
+    ComponentDivStyleSetTest023();
+    ComponentDivStyleSetTest024();
+    ComponentDivStyleSetTest025();
+    ComponentDivStyleSetTest026();
+    ComponentDivStyleSetTest032();
+}
+
+#ifdef TDD_ASSERTIONS
+/* *
+ * @tc.name: ComponentDivAttributeSetTest015
+ * @tc.desc: Verify attribute(which is not support) will not affect normal attribute set.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, divAttr015, TestSize.Level1)
+{
+    DivTddTest::ComponentDivAttributeSetTest015();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest008
+ * @tc.desc: Verify width style can set nomally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div008, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest008();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest009
+ * @tc.desc: Verify Common style width set boundary value.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div009, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest009();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest010
+ * @tc.desc: Verify Common style width set value out of boundary.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div010, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest010();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest011
+ * @tc.desc: Verify height style can set nomally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div011, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest011();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest012
+ * @tc.desc: Verify Common style height set value out of boundary.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div012, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest012();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest013
+ * @tc.desc: Verify margin style can set nomally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div013, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest013();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest014
+ * @tc.desc: Verify Common style margin set value out of boundary.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div014, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest014();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest015
+ * @tc.desc: Verify borderWidth style can set nomally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div015, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest015();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest016
+ * @tc.desc: Verify Common style borderWidth set value out of boundary.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div016, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest016();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest017
+ * @tc.desc: Verify borderRadius style can set nomally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div017, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest017();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest018
+ * @tc.desc: Verify Common style borderRadius set value out of boundary.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div018, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest018();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest019
+ * @tc.desc: Verify left style can set nomally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div019, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest019();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest020
+ * @tc.desc: Verify Common style left set value out of boundary.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div020, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest020();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest021
+ * @tc.desc: Verify top style can set nomally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div021, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest021();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest022
+ * @tc.desc: Verify Common style top set value out of boundary.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div022, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest022();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest023
+ * @tc.desc: Verify borderColor style can set nomally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div023, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest023();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest024
+ * @tc.desc: Verify Common style borderColor set value out of boundary.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div024, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest024();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest025
+ * @tc.desc: Verify backgroundColor style can set nomally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div025, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest025();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest026
+ * @tc.desc: Verify Common style backgroundColor set value out of boundary.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div026, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest026();
+}
+
+/* *
+ * @tc.name: ComponentDivStyleSetTest032
+ * @tc.desc: Verify set style which is not support, system can run normally.
+ * @tc.require: AR000DSEF9
+ */
+HWTEST_F(DivTddTest, div032, TestSize.Level1)
+{
+    DivTddTest::ComponentDivStyleSetTest032();
+}
+#endif
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/div_tdd_test.h b/frameworks/src/core/components/test/unittest/common/div_tdd_test.h
new file mode 100755
index 0000000..37ac6e8
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/div_tdd_test.h
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_TEST_DIV_H
+#define OHOS_ACELITE_TEST_DIV_H
+
+#include "base_test.h"
+
+namespace OHOS {
+namespace ACELite {
+class DivTddTest : public BaseTest {
+public:
+    DivTddTest();
+    ~DivTddTest() override {};
+    void ComponentDivAttributeSetTest015();
+    void ComponentDivStyleSetTest008();
+    void ComponentDivStyleSetTest009();
+    void ComponentDivStyleSetTest010();
+    void ComponentDivStyleSetTest011();
+    void ComponentDivStyleSetTest012();
+    void ComponentDivStyleSetTest013();
+    void ComponentDivStyleSetTest014();
+    void ComponentDivStyleSetTest015();
+    void ComponentDivStyleSetTest016();
+    void ComponentDivStyleSetTest017();
+    void ComponentDivStyleSetTest018();
+    void ComponentDivStyleSetTest019();
+    void ComponentDivStyleSetTest020();
+    void ComponentDivStyleSetTest021();
+    void ComponentDivStyleSetTest022();
+    void ComponentDivStyleSetTest023();
+    void ComponentDivStyleSetTest024();
+    void ComponentDivStyleSetTest025();
+    void ComponentDivStyleSetTest026();
+    void ComponentDivStyleSetTest032();
+    void RunTests();
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_TEST_DIV_H
diff --git a/frameworks/src/core/components/test/unittest/common/event_bubble_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/event_bubble_tdd_test.cpp
new file mode 100755
index 0000000..5366cfa
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/event_bubble_tdd_test.cpp
@@ -0,0 +1,1506 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#include "event_bubble_tdd_test.h"
+#include <unistd.h>
+#include "wrapper/js.h"
+
+namespace OHOS {
+namespace ACELite {
+const char BUNDLE_CLICK_BUBBBLE[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { click: _vm.handleClick3 } }, [\n"
+    "        _c('div', { staticClass: ['pane'], onBubbleEvents: { click: _vm.handleClick2 } }, [\n"
+    "          _c('input', {\n"
+    "            staticClass: ['button'],\n"
+    "            attrs: { type: 'button', value: 'CLICK ME' },\n"
+    "            onBubbleEvents: { click: _vm.handleClick1 } \n"
+    "          })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          backgroundColor: '#f00',\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        pane: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          width: '70%',\n"
+    "          height: '70%'\n"
+    "        },\n"
+    "        button: {\n"
+    "          width: 240\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      logs: []\n"
+    "    },\n"
+    "    handleClick1: function () {\n"
+    "      this.logs.push('handleClick1');\n"
+    "    },\n"
+    "    handleClick2: function () {\n"
+    "      this.logs.push('handleClick2');\n"
+    "    },\n"
+    "    handleClick3: function () {\n"
+    "      this.logs.push('handleClick3');\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_LONG_PRESS_BUBBLE[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { longpress: _vm.handleLongPress3 } }, "
+    "[\n"
+    "        _c('div', { staticClass: ['pane'], onBubbleEvents: { longpress: _vm.handleLongPress2 } }, [\n"
+    "          _c('input', {\n"
+    "            staticClass: ['button'],\n"
+    "            attrs: { type: 'button', value: 'LONG PRESS ME' },\n"
+    "            onBubbleEvents: { longpress: _vm.handleLongPress1 } \n"
+    "          })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        pane: {\n"
+    "          backgroundColor: '#f00',\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          width: '70%',\n"
+    "          height: '70%'\n"
+    "        },\n"
+    "        button: {\n"
+    "          width: 300\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      logs: []\n"
+    "    },\n"
+    "    handleLongPress1: function () {\n"
+    "      this.logs.push('handleLongPress1');\n"
+    "    },\n"
+    "    handleLongPress2: function () {\n"
+    "      this.logs.push('handleLongPress2');\n"
+    "    },\n"
+    "    handleLongPress3: function () {\n"
+    "      this.logs.push('handleLongPress3');\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_SWIPE_BUBBLE[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { swipe: _vm.handleSwipe3 } }, [\n"
+    "        _c('div', { staticClass: ['pane'], onBubbleEvents: { swipe: _vm.handleSwipe2 } }, [\n"
+    "          _c('div', {\n"
+    "            staticClass: ['box'],\n"
+    "            onBubbleEvents: { swipe: _vm.handleSwipe1 } \n"
+    "          })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        pane: {\n"
+    "          backgroundColor: '#f00',\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          width: '70%',\n"
+    "          height: '70%'\n"
+    "        },\n"
+    "        box: {\n"
+    "          width: 200,\n"
+    "          height: 200,\n"
+    "          backgroundColor: '#0f0'\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      logs: []\n"
+    "    },\n"
+    "    handleSwipe1: function () {\n"
+    "      this.logs.push('handleSwipe1');\n"
+    "    },\n"
+    "    handleSwipe2: function () {\n"
+    "      this.logs.push('handleSwipe2');\n"
+    "    },\n"
+    "    handleSwipe3: function () {\n"
+    "      this.logs.push('handleSwipe3');\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_CLICK_DEFAULT_BUBBLE[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { click: _vm.handleClick3 } }, [\n"
+    "        _c('div', { staticClass: ['pane'] }, [\n"
+    "          _c('input', {\n"
+    "            staticClass: ['button'],\n"
+    "            attrs: { type: 'button', value: 'CLICK ME' },\n"
+    "            onBubbleEvents: { click: _vm.handleClick1 } \n"
+    "          })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          backgroundColor: '#f00',\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        pane: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          width: '70%',\n"
+    "          height: '70%'\n"
+    "        },\n"
+    "        button: {\n"
+    "          width: 240\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      logs: []\n"
+    "    },\n"
+    "    handleClick1: function () {\n"
+    "      this.logs.push('handleClick1');\n"
+    "    },\n"
+    "    handleClick2: function () {\n"
+    "      this.logs.push('handleClick2');\n"
+    "    },\n"
+    "    handleClick3: function () {\n"
+    "      this.logs.push('handleClick3');\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_LONG_PRESS_DEFAULT_BUBBLE[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { longpress: _vm.handleLongPress3 } }, "
+    "[\n"
+    "        _c('div', { staticClass: ['pane'] }, [\n"
+    "          _c('input', {\n"
+    "            staticClass: ['button'],\n"
+    "            attrs: { type: 'button', value: 'LONG PRESS ME' },\n"
+    "            onBubbleEvents: { longpress: _vm.handleLongPress1 } \n"
+    "          })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        pane: {\n"
+    "          backgroundColor: '#f00',\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          width: '70%',\n"
+    "          height: '70%'\n"
+    "        },\n"
+    "        button: {\n"
+    "          width: 300\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      logs: []\n"
+    "    },\n"
+    "    handleLongPress1: function () {\n"
+    "      this.logs.push('handleLongPress1');\n"
+    "    },\n"
+    "    handleLongPress2: function () {\n"
+    "      this.logs.push('handleLongPress2');\n"
+    "    },\n"
+    "    handleLongPress3: function () {\n"
+    "      this.logs.push('handleLongPress3');\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_SWIPE_DEFAULT_BUBBLE[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { swipe: _vm.handleSwipe3 } }, [\n"
+    "        _c('div', { staticClass: ['pane'] }, [\n"
+    "          _c('div', {\n"
+    "            staticClass: ['box'],\n"
+    "            onBubbleEvents: { swipe: _vm.handleSwipe1 } \n"
+    "          })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        pane: {\n"
+    "          backgroundColor: '#f00',\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          width: '70%',\n"
+    "          height: '70%'\n"
+    "        },\n"
+    "        box: {\n"
+    "          width: 200,\n"
+    "          height: 200,\n"
+    "          backgroundColor: '#0f0'\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      logs: []\n"
+    "    },\n"
+    "    handleSwipe1: function () {\n"
+    "      this.logs.push('handleSwipe1');\n"
+    "    },\n"
+    "    handleSwipe2: function () {\n"
+    "      this.logs.push('handleSwipe2');\n"
+    "    },\n"
+    "    handleSwipe3: function () {\n"
+    "      this.logs.push('handleSwipe3');\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_CLICK_STOP_PROPAGATION[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { click: _vm.handleClick3 } }, [\n"
+    "        _c('div', { staticClass: ['pane'], catchBubbleEvents: { click: _vm.handleClick2 } }, [\n"
+    "          _c('input', {\n"
+    "            staticClass: ['button'],\n"
+    "            attrs: { type: 'button', value: 'CLICK ME' },\n"
+    "            onBubbleEvents: { click: _vm.handleClick1 }\n"
+    "          })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        pane: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          width: '70%',\n"
+    "          height: '70%'\n"
+    "        },\n"
+    "        button: {\n"
+    "          width: 240\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      logs: []\n"
+    "    },\n"
+    "    handleClick1: function () {\n"
+    "      this.logs.push('handleClick1');\n"
+    "    },\n"
+    "    handleClick2: function () {\n"
+    "      this.logs.push('handleClick2');\n"
+    "    },\n"
+    "    handleClick3: function () {\n"
+    "      this.logs.push('handleClick3');\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_LONG_PRESS_STOP_PROPAGATION[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { longpress: _vm.handleLongPress3 } }, "
+    "[\n"
+    "        _c('div', { staticClass: ['pane'], catchBubbleEvents: { longpress: _vm.handleLongPress2 } }, [\n"
+    "          _c('input', {\n"
+    "            staticClass: ['button'],\n"
+    "            attrs: { type: 'button', value: 'LONG PRESS ME' },\n"
+    "            onBubbleEvents: { longpress: _vm.handleLongPress1 }\n"
+    "          })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        pane: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          width: '70%',\n"
+    "          height: '70%'\n"
+    "        },\n"
+    "        button: {\n"
+    "          width: 240\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      logs: []\n"
+    "    },\n"
+    "    handleLongPress1: function () {\n"
+    "      this.logs.push('handleLongPress1');\n"
+    "    },\n"
+    "    handleLongPress2: function () {\n"
+    "      this.logs.push('handleLongPress2');\n"
+    "    },\n"
+    "    handleLongPress3: function () {\n"
+    "      this.logs.push('handleLongPress3');\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_SWIPE_STOP_PROPAGATION[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { swipe: _vm.handleSwipe3 } }, [\n"
+    "        _c('div', { staticClass: ['pane'], catchBubbleEvents: { swipe: _vm.handleSwipe2 } }, [\n"
+    "          _c('div', {\n"
+    "            staticClass: ['box'],\n"
+    "            onBubbleEvents: { swipe: _vm.handleSwipe1 } \n"
+    "          })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        pane: {\n"
+    "          backgroundColor: '#f00',\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          width: '70%',\n"
+    "          height: '70%'\n"
+    "        },\n"
+    "        box: {\n"
+    "          width: 200,\n"
+    "          height: 200,\n"
+    "          backgroundColor: '#0f0'\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      logs: []\n"
+    "    },\n"
+    "    handleSwipe1: function () {\n"
+    "      this.logs.push('handleSwipe1');\n"
+    "    },\n"
+    "    handleSwipe2: function () {\n"
+    "      this.logs.push('handleSwipe2');\n"
+    "    },\n"
+    "    handleSwipe3: function () {\n"
+    "      this.logs.push('handleSwipe3');\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_CLICK_DELEGATION[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { click: _vm.handleClick } }, [\n"
+    "        _c('input', { staticClass: ['button'], attrs: { type: 'button', ref: 'red', value: 'red' } }),\n"
+    "        _c('input', { staticClass: ['button'], attrs: { type: 'button', ref: 'green', value: 'green' } }),\n"
+    "        _c('input', { staticClass: ['button'], attrs: { type: 'button', ref: 'blue', value: 'blue' } })\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%',\n"
+    "        },\n"
+    "        button: {\n"
+    "          borderRadius: 0,\n"
+    "          width: 150\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      bgColor: '#f00'\n"
+    "    },\n"
+    "    handleClick: function(event) {\n"
+    "      if (event.target === this.$refs.red) {\n"
+    "        this.bgColor = '#f00';\n"
+    "      } else if (event.target === this.$refs.green) {\n"
+    "        this.bgColor = '#0f0';\n"
+    "      } else if (event.target === this.$refs.blue) {\n"
+    "        this.bgColor = '#00f';\n"
+    "      } else {\n"
+    "        console.log('Unknown element.');\n"
+    "      }\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_LONG_PRESS_DELEGATION[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { longpress: _vm.handleLongPress } }, [\n"
+    "        _c('input', { staticClass: ['button'], attrs: { type: 'button', ref: 'red', value: 'red' } }),\n"
+    "        _c('input', { staticClass: ['button'], attrs: { type: 'button', ref: 'green', value: 'green' } }),\n"
+    "        _c('input', { staticClass: ['button'], attrs: { type: 'button', ref: 'blue', value: 'blue' } })\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%',\n"
+    "        },\n"
+    "        button: {\n"
+    "          borderRadius: 0,\n"
+    "          width: 150\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      bgColor: '#f00'\n"
+    "    },\n"
+    "    handleLongPress: function(event) {\n"
+    "      if (event.target === this.$refs.red) {\n"
+    "        this.bgColor = '#f00';\n"
+    "      } else if (event.target === this.$refs.green) {\n"
+    "        this.bgColor = '#0f0';\n"
+    "      } else if (event.target === this.$refs.blue) {\n"
+    "        this.bgColor = '#00f';\n"
+    "      } else {\n"
+    "        console.log('Unknown element.');\n"
+    "      }\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_SWIPE_DELEGATION[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['container'], onBubbleEvents: { swipe: _vm.handleSwipe } }, [\n"
+    "        _c('div', { staticClass: ['box', 'box--red'], attrs: { ref: 'red' } }, [\n"
+    "          _c('text', { staticClass: ['title'], attrs: { value: 'red'} })\n"
+    "        ]),\n"
+    "        _c('div', { staticClass: ['box', 'box--green'], attrs: { ref: 'green' } }, [\n"
+    "          _c('text', { staticClass: ['title'], attrs: { value: 'green'} })\n"
+    "        ]),\n"
+    "        _c('div', { staticClass: ['box', 'box--blue'], attrs: { ref: 'blue' } }, [\n"
+    "          _c('text', { staticClass: ['title'], attrs: { value: 'blue'} })\n"
+    "        ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        container: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "        box: {\n"
+    "          width: '50%',\n"
+    "          height: 100,\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center'\n"
+    "        },\n"
+    "        'box--red': {\n"
+    "          backgroundColor: '#f00'\n"
+    "        },\n"
+    "        'box--green': {\n"
+    "          backgroundColor: '#0f0'\n"
+    "        },\n"
+    "        'box--blue': {\n"
+    "          backgroundColor: '#00f'\n"
+    "        },\n"
+    "        title: {\n"
+    "          color: '#fff'\n"
+    "        }\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      text: 'none'\n"
+    "    },\n"
+    "    handleSwipe: function(event) {\n"
+    "      if (event.target === this.$refs.red) {\n"
+    "        this.text = 'red';\n"
+    "      } else if (event.target === this.$refs.green) {\n"
+    "        this.text = 'green';\n"
+    "      } else if (event.target === this.$refs.blue) {\n"
+    "        this.text = 'blue';\n"
+    "      } else {\n"
+    "        console.log('Unknown element.');\n"
+    "      }\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_CLICK_PRESSURE[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "       _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "        _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "         _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "          _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "           _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "            _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "             _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "              _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "               _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                 _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                  _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                   _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                    _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                     _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                      _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                       _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                        _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                         _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                          _c('text', { attrs: { value: function() {  return _vm.count; } } })\n"
+    "                         ])\n"
+    "                        ])\n"
+    "                       ])\n"
+    "                      ])\n"
+    "                     ])\n"
+    "                    ])\n"
+    "                   ])\n"
+    "                  ])\n"
+    "                 ])\n"
+    "                ])\n"
+    "               ])\n"
+    "              ])\n"
+    "             ])\n"
+    "            ])\n"
+    "           ])\n"
+    "          ])\n"
+    "         ])\n"
+    "        ])\n"
+    "       ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        box: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      count: 0\n"
+    "    },\n"
+    "    handle: function() {\n"
+    "      this.count++;\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_LONG_PRESS_PRESSURE[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "       _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "        _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "         _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "          _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "           _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "            _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "             _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "              _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "               _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                 _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                  _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                   _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                    _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                     _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                      _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                       _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                        _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                         _c('div', { staticClass: ['box'], onBubbleEvents: { longpress: _vm.handle } }, [\n"
+    "                          _c('text', { attrs: { value: function() {  return _vm.count; } } })\n"
+    "                         ])\n"
+    "                        ])\n"
+    "                       ])\n"
+    "                      ])\n"
+    "                     ])\n"
+    "                    ])\n"
+    "                   ])\n"
+    "                  ])\n"
+    "                 ])\n"
+    "                ])\n"
+    "               ])\n"
+    "              ])\n"
+    "             ])\n"
+    "            ])\n"
+    "           ])\n"
+    "          ])\n"
+    "         ])\n"
+    "        ])\n"
+    "       ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        box: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      count: 0\n"
+    "    },\n"
+    "    handle: function() {\n"
+    "      this.count++;\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+const char BUNDLE_SWIPE_PRESSURE[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "       _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "        _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "         _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "          _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "           _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "            _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "             _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "              _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "               _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                 _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                  _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                   _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                    _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                     _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                      _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                       _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                        _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                         _c('div', { staticClass: ['box'], onBubbleEvents: { swipe: _vm.handle } }, [\n"
+    "                          _c('text', { attrs: { value: function() {  return _vm.count; } } })\n"
+    "                         ])\n"
+    "                        ])\n"
+    "                       ])\n"
+    "                      ])\n"
+    "                     ])\n"
+    "                    ])\n"
+    "                   ])\n"
+    "                  ])\n"
+    "                 ])\n"
+    "                ])\n"
+    "               ])\n"
+    "              ])\n"
+    "             ])\n"
+    "            ])\n"
+    "           ])\n"
+    "          ])\n"
+    "         ])\n"
+    "        ])\n"
+    "       ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        box: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      count: 0\n"
+    "    },\n"
+    "    handle: function() {\n"
+    "      this.count++;\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+const char BUNDLE_CLICK_PRESSURE2[] =
+    "(function () {\n"
+    "  return new ViewModel({\n"
+    "    render: function (vm) {\n"
+    "      var _vm = vm || this;\n"
+    "      return _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "       _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "        _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "         _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "          _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "           _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "            _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "             _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "              _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "               _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                 _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                  _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                   _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                    _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                     _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                      _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                       _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                        _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                         _c('div', { staticClass: ['box'], onBubbleEvents: { click: _vm.handle } }, [\n"
+    "                          _c('text', { attrs: { value: function() {  return _vm.count; } } })\n"
+    "                         ])\n"
+    "                        ])\n"
+    "                       ])\n"
+    "                      ])\n"
+    "                     ])\n"
+    "                    ])\n"
+    "                   ])\n"
+    "                  ])\n"
+    "                 ])\n"
+    "                ])\n"
+    "               ])\n"
+    "              ])\n"
+    "             ])\n"
+    "            ])\n"
+    "           ])\n"
+    "          ])\n"
+    "         ])\n"
+    "        ])\n"
+    "       ])\n"
+    "      ]);\n"
+    "    },\n"
+    "    styleSheet: {\n"
+    "      classSelectors: {\n"
+    "        box: {\n"
+    "          flexDirection: 'column',\n"
+    "          justifyContent: 'center',\n"
+    "          alignItems: 'center',\n"
+    "          height: '100%',\n"
+    "          width: '100%'\n"
+    "        },\n"
+    "      }\n"
+    "    },\n"
+    "    data: {\n"
+    "      count: 0\n"
+    "    },\n"
+    "    handle: function() {\n"
+    "      this.count++;\n"
+    "    }\n"
+    "  });\n"
+    "})();";
+
+constexpr uint8_t NUM_TWO = 2;
+constexpr uint8_t NUM_THREE = 3;
+
+void EventBubbleTddTest::EventBubbleTest001()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_CLICK_BUBBBLE, strlen(BUNDLE_CLICK_BUBBBLE));
+    constexpr char *propLogs = "logs";
+    JSValue logs = JSObject::Get(page, propLogs);
+    EXPECT_EQ(JSArray::Length(logs), 0);
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    Click(centerX, centerY);
+    EXPECT_EQ(JSArray::Length(logs), NUM_THREE);
+    char *content = JSArray::GetString(logs, 0);
+    EXPECT_STREQ(content, "handleClick1");
+    free(content);
+    content = JSArray::GetString(logs, 1);
+    EXPECT_STREQ(content, "handleClick2");
+    free(content);
+    content = JSArray::GetString(logs, NUM_TWO);
+    EXPECT_STREQ(content, "handleClick3");
+    free(content);
+    content = nullptr;
+    JSRelease(logs);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest002()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_LONG_PRESS_BUBBLE, strlen(BUNDLE_LONG_PRESS_BUBBLE));
+    constexpr char *propLogs = "logs";
+    JSValue logs = JSObject::Get(page, propLogs);
+    EXPECT_EQ(JSArray::Length(logs), 0);
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    LongPress(centerX, centerY);
+    EXPECT_EQ(JSArray::Length(logs), NUM_THREE);
+    char *content = JSArray::GetString(logs, 0);
+    EXPECT_STREQ(content, "handleLongPress1");
+    free(content);
+    content = JSArray::GetString(logs, 1);
+    EXPECT_STREQ(content, "handleLongPress2");
+    free(content);
+    content = JSArray::GetString(logs, NUM_TWO);
+    EXPECT_STREQ(content, "handleLongPress3");
+    free(content);
+    content = nullptr;
+    JSRelease(logs);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest003()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_SWIPE_BUBBLE, strlen(BUNDLE_SWIPE_BUBBLE));
+    constexpr char *propLogs = "logs";
+    JSValue logs = JSObject::Get(page, propLogs);
+    EXPECT_EQ(JSArray::Length(logs), 0);
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint16_t halfDistance = 50;
+    const uint16_t startX = centerX - halfDistance;
+    const uint16_t endX = centerX + halfDistance;
+    Swipe(startX, centerY, endX, centerY);
+    EXPECT_EQ(JSArray::Length(logs), NUM_THREE);
+    char *content = JSArray::GetString(logs, 0);
+    EXPECT_STREQ(content, "handleSwipe1");
+    free(content);
+    content = JSArray::GetString(logs, 1);
+    EXPECT_STREQ(content, "handleSwipe2");
+    free(content);
+    content = JSArray::GetString(logs, NUM_TWO);
+    EXPECT_STREQ(content, "handleSwipe3");
+    free(content);
+    content = nullptr;
+    JSRelease(logs);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest004()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_CLICK_DEFAULT_BUBBLE, strlen(BUNDLE_CLICK_DEFAULT_BUBBLE));
+    constexpr char *propLogs = "logs";
+    JSValue logs = JSObject::Get(page, propLogs);
+    EXPECT_EQ(JSArray::Length(logs), 0);
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    Click(centerX, centerY);
+    EXPECT_EQ(JSArray::Length(logs), NUM_TWO);
+    char *content = JSArray::GetString(logs, 0);
+    EXPECT_STREQ(content, "handleClick1");
+    free(content);
+    content = JSArray::GetString(logs, 1);
+    EXPECT_STREQ(content, "handleClick3");
+    free(content);
+    content = nullptr;
+    JSRelease(logs);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest005()
+{
+    TDD_CASE_BEGIN();
+    JSValue page = CreatePage(BUNDLE_LONG_PRESS_DEFAULT_BUBBLE, strlen(BUNDLE_LONG_PRESS_DEFAULT_BUBBLE));
+    constexpr char *propLogs = "logs";
+    JSValue logs = JSObject::Get(page, propLogs);
+    EXPECT_EQ(JSArray::Length(logs), 0);
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    LongPress(centerX, centerY);
+    EXPECT_EQ(JSArray::Length(logs), NUM_TWO);
+    char *content = JSArray::GetString(logs, 0);
+    EXPECT_STREQ(content, "handleLongPress1");
+    free(content);
+    content = JSArray::GetString(logs, 1);
+    EXPECT_STREQ(content, "handleLongPress3");
+    free(content);
+    content = nullptr;
+    JSRelease(logs);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest006()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_SWIPE_DEFAULT_BUBBLE, strlen(BUNDLE_SWIPE_DEFAULT_BUBBLE));
+    constexpr char *propLogs = "logs";
+    JSValue logs = JSObject::Get(page, propLogs);
+    EXPECT_EQ(JSArray::Length(logs), 0);
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint16_t halfDistance = 50;
+    const uint16_t startX = centerX - halfDistance;
+    const uint16_t endX = centerX + halfDistance;
+    Swipe(startX, centerY, endX, centerY);
+    EXPECT_EQ(JSArray::Length(logs), NUM_TWO);
+    char *content = JSArray::GetString(logs, 0);
+    EXPECT_STREQ(content, "handleSwipe1");
+    free(content);
+    content = JSArray::GetString(logs, 1);
+    EXPECT_STREQ(content, "handleSwipe3");
+    free(content);
+    content = nullptr;
+    JSRelease(logs);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest007()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_CLICK_STOP_PROPAGATION, strlen(BUNDLE_CLICK_STOP_PROPAGATION));
+    constexpr char *propLogs = "logs";
+    JSValue logs = JSObject::Get(page, propLogs);
+    EXPECT_EQ(JSArray::Length(logs), 0);
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    Click(centerX, centerY);
+    EXPECT_EQ(JSArray::Length(logs), NUM_TWO);
+    char *content = JSArray::GetString(logs, 0);
+    EXPECT_STREQ(content, "handleClick1");
+    free(content);
+    content = JSArray::GetString(logs, 1);
+    EXPECT_STREQ(content, "handleClick2");
+    free(content);
+    content = nullptr;
+    JSRelease(logs);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest008()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_LONG_PRESS_STOP_PROPAGATION, strlen(BUNDLE_LONG_PRESS_STOP_PROPAGATION));
+    constexpr char *propLogs = "logs";
+    JSValue logs = JSObject::Get(page, propLogs);
+    EXPECT_EQ(JSArray::Length(logs), 0);
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    LongPress(centerX, centerY);
+    EXPECT_EQ(JSArray::Length(logs), NUM_TWO);
+    char *content = JSArray::GetString(logs, 0);
+    EXPECT_STREQ(content, "handleLongPress1");
+    free(content);
+    content = JSArray::GetString(logs, 1);
+    EXPECT_STREQ(content, "handleLongPress2");
+    free(content);
+    content = nullptr;
+    JSRelease(logs);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest009()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_SWIPE_STOP_PROPAGATION, strlen(BUNDLE_SWIPE_STOP_PROPAGATION));
+    constexpr char *propLogs = "logs";
+    JSValue logs = JSObject::Get(page, propLogs);
+    EXPECT_EQ(JSArray::Length(logs), 0);
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint16_t halfDistance = 50;
+    const uint16_t startX = centerX - halfDistance;
+    const uint16_t endX = centerX + halfDistance;
+    Swipe(startX, centerY, endX, centerY);
+    EXPECT_EQ(JSArray::Length(logs), NUM_TWO);
+    char *content = JSArray::GetString(logs, 0);
+    EXPECT_STREQ(content, "handleSwipe1");
+    free(content);
+    content = JSArray::GetString(logs, 1);
+    EXPECT_STREQ(content, "handleSwipe2");
+    free(content);
+    content = nullptr;
+    JSRelease(logs);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest010()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_CLICK_DELEGATION, strlen(BUNDLE_CLICK_DELEGATION));
+    constexpr char *propBgColor = "bgColor";
+    constexpr char *bgRed = "#f00";
+    constexpr char *bgGreen = "#0f0";
+    constexpr char *bgBlue = "#00f";
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint16_t distance = 100;
+    // click green button
+    Click(centerX, centerY);
+    char *content = JSObject::GetString(page, propBgColor);
+    EXPECT_STREQ(content, bgGreen);
+    free(content);
+    // click blue button
+    Click(centerX + distance, centerY);
+    content = JSObject::GetString(page, propBgColor);
+    EXPECT_STREQ(content, bgBlue);
+    free(content);
+    // click red button
+    Click(centerX - distance, centerY);
+    content = JSObject::GetString(page, propBgColor);
+    EXPECT_STREQ(content, bgRed);
+    free(content);
+    content = nullptr;
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest011()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_LONG_PRESS_DELEGATION, strlen(BUNDLE_LONG_PRESS_DELEGATION));
+    // click green button
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint16_t distance = 100;
+    LongPress(centerX, centerY);
+    constexpr char *propBgColor = "bgColor";
+    char *content = JSObject::GetString(page, propBgColor);
+    EXPECT_STREQ(content, "#0f0");
+    free(content);
+    // click blue button
+    LongPress(centerX + distance, centerY);
+    content = JSObject::GetString(page, propBgColor);
+    EXPECT_STREQ(content, "#00f");
+    free(content);
+    // click red button
+    LongPress(centerX - distance, centerY);
+    content = JSObject::GetString(page, propBgColor);
+    EXPECT_STREQ(content, "#f00");
+    free(content);
+    content = nullptr;
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest012()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_SWIPE_DELEGATION, strlen(BUNDLE_SWIPE_DELEGATION));
+    constexpr char *propText = "text";
+    constexpr char *textRed = "red";
+    constexpr char *textGreen = "green";
+    constexpr char *textBlue = "blue";
+    const uint16_t greenX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t greenY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint16_t boxHeight = 100;
+    constexpr uint16_t halfDistance = 50;
+    const uint16_t startX = greenX - halfDistance;
+    const uint16_t endX = greenX + halfDistance;
+    const uint16_t redY = greenY - boxHeight;
+    const uint16_t blueY = greenY + boxHeight;
+    Swipe(startX, redY, endX, redY);
+    char *content = JSObject::GetString(page, propText);
+    EXPECT_STREQ(content, textRed);
+    free(content);
+    Swipe(startX, greenY, endX, greenY);
+    content = JSObject::GetString(page, propText);
+    EXPECT_STREQ(content, textGreen);
+    free(content);
+    Swipe(startX, blueY, endX, blueY);
+    content = JSObject::GetString(page, propText);
+    EXPECT_STREQ(content, textBlue);
+    free(content);
+    content = nullptr;
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest013()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_CLICK_PRESSURE, strlen(BUNDLE_CLICK_PRESSURE));
+    constexpr char *propCount = "count";
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint8_t diffCount = 20;
+    Click(centerX, centerY);
+    uint32_t count = static_cast<uint32_t>(JSObject::GetNumber(page, propCount));
+    EXPECT_EQ(count, diffCount);
+    Click(centerX, centerY);
+    count = static_cast<uint32_t>(JSObject::GetNumber(page, propCount));
+    EXPECT_EQ(count, diffCount * NUM_TWO);
+    Click(centerX, centerY);
+    count = static_cast<uint32_t>(JSObject::GetNumber(page, propCount));
+    EXPECT_EQ(count, diffCount * NUM_THREE);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest014()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_LONG_PRESS_PRESSURE, strlen(BUNDLE_LONG_PRESS_PRESSURE));
+    constexpr char *propCount = "count";
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint8_t diffCount = 20;
+    LongPress(centerX, centerY);
+    uint32_t count = static_cast<uint32_t>(JSObject::GetNumber(page, propCount));
+    EXPECT_EQ(count, diffCount);
+    LongPress(centerX, centerY);
+    count = static_cast<uint32_t>(JSObject::GetNumber(page, propCount));
+    EXPECT_EQ(count, diffCount * NUM_TWO);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest015()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_SWIPE_PRESSURE, strlen(BUNDLE_SWIPE_PRESSURE));
+    constexpr char *propCount = "count";
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint16_t halfDistance = 50;
+    const uint16_t startX = centerX - halfDistance;
+    const uint16_t endX = centerX + halfDistance;
+    constexpr uint8_t diffCount = 20;
+    Swipe(startX, centerY, endX, centerY);
+    uint32_t count = static_cast<uint32_t>(JSObject::GetNumber(page, propCount));
+    EXPECT_EQ(count, diffCount);
+    Swipe(startX, centerY, endX, centerY);
+    count = static_cast<uint32_t>(JSObject::GetNumber(page, propCount));
+    EXPECT_EQ(count, diffCount * NUM_TWO);
+    Swipe(startX, centerY, endX, centerY);
+    count = static_cast<uint32_t>(JSObject::GetNumber(page, propCount));
+    EXPECT_EQ(count, diffCount * NUM_THREE);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::EventBubbleTest016()
+{
+    TDD_CASE_BEGIN();
+
+    JSValue page = CreatePage(BUNDLE_CLICK_PRESSURE2, strlen(BUNDLE_CLICK_PRESSURE2));
+    constexpr char *propCount = "count";
+    const uint16_t centerX = GetHorizontalResolution() / NUM_TWO;
+    const uint16_t centerY = GetVerticalResolution() / NUM_TWO;
+    constexpr uint8_t times = 10;
+    constexpr uint8_t diffCount = 20;
+    for (uint8_t idx = 0; idx < times; ++idx) {
+        Click(centerX, centerY);
+    }
+    uint32_t count = static_cast<uint32_t>(JSObject::GetNumber(page, propCount));
+    EXPECT_EQ(count, diffCount * times);
+    DestroyPage(page);
+    TDD_CASE_END();
+}
+
+void EventBubbleTddTest::RunTests()
+{
+    EventBubbleTest001();
+    EventBubbleTest002();
+    EventBubbleTest003();
+    EventBubbleTest004();
+    EventBubbleTest005();
+    EventBubbleTest006();
+    EventBubbleTest007();
+    EventBubbleTest008();
+    EventBubbleTest009();
+    EventBubbleTest010();
+    EventBubbleTest011();
+    EventBubbleTest012();
+    EventBubbleTest013();
+    EventBubbleTest014();
+    EventBubbleTest015();
+    EventBubbleTest016();
+}
+
+#ifdef TDD_ASSERTIONS
+/* *
+ * @tc.name: EventBubbleTest001
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest001, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest001();
+}
+
+/* *
+ * @tc.name: EventBubbleTest002
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest002, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest002();
+}
+
+/* *
+ * @tc.name: EventBubbleTest003
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest003, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest003();
+}
+
+/* *
+ * @tc.name: EventBubbleTest004
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest004, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest004();
+}
+
+/* *
+ * @tc.name: EventBubbleTest005
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest005, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest005();
+}
+
+/* *
+ * @tc.name: EventBubbleTest006
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest006, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest006();
+}
+
+/* *
+ * @tc.name: EventBubbleTest007
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest007, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest007();
+}
+
+/* *
+ * @tc.name: EventBubbleTest008
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest008, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest008();
+}
+
+/* *
+ * @tc.name: EventBubbleTest009
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest009, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest009();
+}
+
+/* *
+ * @tc.name: EventBubbleTest010
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest010, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest010();
+}
+
+/* *
+ * @tc.name: EventBubbleTest011
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest011, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest011();
+}
+
+/* *
+ * @tc.name: EventBubbleTest012
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest012, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest012();
+}
+
+/* *
+ * @tc.name: EventBubbleTest013
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest013, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest013();
+}
+
+/* *
+ * @tc.name: EventBubbleTest014
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest014, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest014();
+}
+
+/* *
+ * @tc.name: EventBubbleTest015
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest015, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest015();
+}
+
+/* *
+ * @tc.name: EventBubbleTest016
+ * @tc.desc: Verify event bubble.
+ * @tc.require: AR000F3PDN
+ */
+HWTEST_F(EventBubbleTddTest, EventBubbleTest016, TestSize.Level1)
+{
+    EventBubbleTddTest::EventBubbleTest016();
+}
+
+#endif // TDD_ASSERTIONS
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/event_bubble_tdd_test.h b/frameworks/src/core/components/test/unittest/common/event_bubble_tdd_test.h
new file mode 100755
index 0000000..248b68c
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/event_bubble_tdd_test.h
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef OHOS_ACELITE_TEST_EVENT_BUBBLE_H
+#define OHOS_ACELITE_TEST_EVENT_BUBBLE_H
+
+#include "basic_tdd_test.h"
+
+namespace OHOS {
+namespace ACELite {
+class EventBubbleTddTest : public BasicTddTest {
+public:
+    EventBubbleTddTest() : BasicTddTest() {}
+    ~EventBubbleTddTest() override {}
+
+    void EventBubbleTest001();
+    void EventBubbleTest002();
+    void EventBubbleTest003();
+    void EventBubbleTest004();
+    void EventBubbleTest005();
+    void EventBubbleTest006();
+    void EventBubbleTest007();
+    void EventBubbleTest008();
+    void EventBubbleTest009();
+    void EventBubbleTest010();
+    void EventBubbleTest011();
+    void EventBubbleTest012();
+    void EventBubbleTest013();
+    void EventBubbleTest014();
+    void EventBubbleTest015();
+    void EventBubbleTest016();
+    void RunTests();
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_TEST_EVENT_BUBBLE_H
\ No newline at end of file
diff --git a/frameworks/src/core/components/test/unittest/common/horizonprogress_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/horizonprogress_tdd_test.cpp
new file mode 100755
index 0000000..d2c702b
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/horizonprogress_tdd_test.cpp
@@ -0,0 +1,819 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "horizonprogress_tdd_test.h"
+#include "acelite_config.h"
+#include "horizon_progress_component.h"
+#include "js_app_environment.h"
+#include "ui_box_progress.h"
+
+namespace OHOS {
+namespace ACELite {
+HorizonProgressTddTest::HorizonProgressTddTest()
+    : objGlob(UNDEFINED),
+      objAttrs(UNDEFINED),
+      objStaticStyle(UNDEFINED) {}
+
+void HorizonProgressTddTest::SetUp()
+{
+    printf("ACELiteHorizonProgressTest setup");
+    JsAppEnvironment* appJsEnv = JsAppEnvironment::GetInstance();
+    appJsEnv->InitJsFramework();
+
+    objGlob = jerry_get_global_object();
+
+    jerry_value_t keyAttrs = jerry_create_string((const jerry_char_t*)"attrs");
+    objAttrs = jerry_create_object();
+    jerry_set_property(objGlob, keyAttrs, objAttrs);
+    jerry_release_value(keyAttrs);
+
+    jerry_value_t keyStaticStyle = jerry_create_string(reinterpret_cast<const jerry_char_t *>("staticStyle"));
+    objStaticStyle = jerry_create_object();
+    jerry_set_property(objGlob, keyStaticStyle, objStaticStyle);
+    jerry_release_value(keyStaticStyle);
+    rootComponentMock_.PrepareRootContainer();
+}
+
+void HorizonProgressTddTest::TearDown()
+{
+    JsAppContext::GetInstance()->ReleaseStyles();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest001()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. setting progress type=abc.
+     */
+    jerry_value_t keyId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t valueId = jerry_create_string((const jerry_char_t*)"abc");
+    jerry_set_property(objAttrs, keyId, valueId);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+
+    UIView* progressView = reinterpret_cast<UIView *>(component->GetComponentRootView());
+    printf("==%s\n", typeid(*progressView).name());
+#ifdef TDD_ASSERTIONS
+    char className[] = "N4OHOS13UIBoxProgressE";
+#else
+    char className[] = "class OHOS::UIBoxProgress";
+#endif
+
+    /**
+     * @tc.expected: step1. get progress type = horizon(UIBoxProgress).
+     */
+    if (strcmp(className, typeid(*progressView).name()) == 0) {
+        printf("[Test Case] [HorizonProgressTest001] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest001] FAILED\n");
+    }
+    EXPECT_TRUE(strcmp(className, typeid(*progressView).name()) == 0);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest002()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. setting progress type=" ".
+     */
+    jerry_value_t keyId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t valueId = jerry_create_string((const jerry_char_t*)" ");
+    jerry_set_property(objAttrs, keyId, valueId);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+
+    UIView* progressView = reinterpret_cast<UIView *>(component->GetComponentRootView());
+    printf("==%s\n", typeid(*progressView).name());
+
+#ifdef TDD_ASSERTIONS
+    char className[] = "N4OHOS13UIBoxProgressE";
+#else
+    char className[] = "class OHOS::UIBoxProgress";
+#endif
+    /**
+     * @tc.expected: step1. get progress type = horizon(UIBoxProgress).
+     */
+    if (strcmp(className, typeid(*progressView).name()) == 0) {
+        printf("[Test Case] [HorizonProgressTest002] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest002] FAILED\n");
+    }
+    EXPECT_TRUE(strcmp(className, typeid(*progressView).name()) == 0);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest003()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. setting progress type=arc.
+     */
+    jerry_value_t keyId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t valueId = jerry_create_string((const jerry_char_t*)"arc");
+    jerry_set_property(objAttrs, keyId, valueId);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+
+    UIView* progressView = component->GetComponentRootView();
+    printf("==%s\n", typeid(*progressView).name());
+
+#ifdef TDD_ASSERTIONS
+    char className[] = "N4OHOS16UICircleProgressE";
+#else
+    char className[] = "class OHOS::UICircleProgress";
+#endif
+    /**
+    * @tc.expected: step1. get progress type = circle(UICircleProgress).
+    */
+    if (strcmp(className, typeid(*progressView).name()) == 0) {
+        printf("[Test Case] [HorizonProgressTest003] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest003] FAILED\n");
+    }
+    EXPECT_TRUE(strcmp(className, typeid(*progressView).name()) == 0);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest004()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. setting percent=-32768.
+     */
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+    const int32_t percentNum = -32768;
+    jerry_value_t percentId = jerry_create_string((const jerry_char_t*)"percent");
+    jerry_value_t percentValue = jerry_create_number(percentNum);
+    jerry_set_property(objAttrs, percentId, percentValue);
+    jerry_release_value(percentId);
+    jerry_release_value(percentValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+    /**
+     * @tc.expected: step1. progress component will not crash.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    if (progressView->GetValue() != percentNum) {
+        printf("[Test Case] [HorizonProgressTest004] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest004] FAILED\n");
+    }
+    EXPECT_TRUE(progressView->GetValue() != percentNum);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest005()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. setting percent=100.
+     */
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+
+    jerry_value_t percentId = jerry_create_string((const jerry_char_t*)"percent");
+    const int32_t percentNum = 100;
+    jerry_value_t percentValue = jerry_create_number(percentNum);
+    jerry_set_property(objAttrs, percentId, percentValue);
+    jerry_release_value(percentId);
+    jerry_release_value(percentValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+
+    rootComponentMock_.RenderComponent(*component);
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    /**
+     * @tc.expected: step1. get percent=100.
+     */
+    if (progressView->GetValue() == percentNum) {
+        printf("[Test Case] [HorizonProgressTest005] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest005] FAILED\n");
+    }
+    EXPECT_TRUE(progressView->GetValue() == percentNum);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest006()
+{
+    TDD_CASE_BEGIN();
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+
+    /**
+     * @tc.steps: step1. setting percent=32767.
+     */
+    jerry_value_t percentId = jerry_create_string((const jerry_char_t*)"percent");
+    const int32_t percentNum = 32767;
+    jerry_value_t percentValue = jerry_create_number(percentNum);
+    jerry_set_property(objAttrs, percentId, percentValue);
+    jerry_release_value(percentId);
+    jerry_release_value(percentValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.expected: step1. progress component will not crash.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    if (progressView->GetValue() != percentNum) {
+        printf("[Test Case] [HorizonProgressTest006] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest006] FAILED\n");
+    }
+    EXPECT_TRUE(progressView->GetValue() != percentNum);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest007()
+{
+    TDD_CASE_BEGIN();
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+    /**
+     * @tc.steps: step1. setting percent=-32769.
+     */
+    jerry_value_t percentId = jerry_create_string((const jerry_char_t*)"percent");
+    const int32_t percentNum = -32769;
+    jerry_value_t percentValue = jerry_create_number(percentNum);
+    jerry_set_property(objAttrs, percentId, percentValue);
+    jerry_release_value(percentId);
+    jerry_release_value(percentValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.expected: step1. progress component will not crash.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    if (progressView->GetValue() != percentNum) {
+        printf("[Test Case] [HorizonProgressTest007] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest007] FAILED\n");
+    }
+    EXPECT_TRUE(progressView->GetValue() != percentNum);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest008()
+{
+    TDD_CASE_BEGIN();
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+    /**
+     * @tc.steps: step1. setting percent=32768.
+     */
+    jerry_value_t percentId = jerry_create_string((const jerry_char_t*)"percent");
+    const int32_t percentNum = 32768;
+    jerry_value_t percentValue = jerry_create_number(percentNum);
+    jerry_set_property(objAttrs, percentId, percentValue);
+    jerry_release_value(percentId);
+    jerry_release_value(percentValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.expected: step1. progress component will not crash.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    if (progressView->GetValue() != percentNum) {
+        printf("[Test Case] [HorizonProgressTest008] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest008] FAILED\n");
+    }
+    EXPECT_TRUE(progressView->GetValue() != percentNum);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest009()
+{
+    TDD_CASE_BEGIN();
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+
+    /**
+     * @tc.steps: step1. setting color=0x000000.
+     */
+    jerry_value_t colorKey = jerry_create_string((const jerry_char_t*)"color");
+    // 0(0x000000)
+    const int32_t percentNum = 0x000000;
+    const int32_t redNum = 0x00;
+    const int32_t greenNum = 0x00;
+    const int32_t blueNum = 0x00;
+    jerry_value_t colorValue = jerry_create_number(percentNum);
+    jerry_set_property(objStaticStyle, colorKey, colorValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.expected: step1. get color=0x000000.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    ColorType tempColor;
+    tempColor.full = progressView->GetForegroundStyle(STYLE_BACKGROUND_COLOR);
+    if (tempColor.red == redNum &&
+        tempColor.green == greenNum &&
+        tempColor.blue == blueNum) {
+        printf("[Test Case] [HorizonProgressTest009] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest009] FAILED\n");
+    }
+    EXPECT_TRUE(tempColor.red == redNum);
+    EXPECT_TRUE(tempColor.green == greenNum);
+    EXPECT_TRUE(tempColor.blue == blueNum);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest013()
+{
+    TDD_CASE_BEGIN();
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+    /**
+     * @tc.steps: step1. setting color=0x80000000.
+     */
+    jerry_value_t colorKey = jerry_create_string((const jerry_char_t*)"color");
+    // 2147483648(0x80000000)
+    const int32_t percentNum = 2147483648;
+    const int32_t redNum = 0x00;
+    const int32_t greenNum = 0x00;
+    const int32_t blueNum = 0x00;
+    jerry_value_t colorValue = jerry_create_number(percentNum);
+    jerry_set_property(objStaticStyle, colorKey, colorValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.expected: step1. get color=0x000000.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    ColorType tempColor;
+    tempColor.full = progressView->GetForegroundStyle(STYLE_BACKGROUND_COLOR);
+    if (tempColor.red == redNum &&
+        tempColor.green == greenNum &&
+        tempColor.blue == blueNum) {
+        printf("[Test Case] [HorizonProgressTest013] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest013] FAILED\n");
+    }
+    EXPECT_TRUE(tempColor.red == redNum);
+    EXPECT_TRUE(tempColor.green == greenNum);
+    EXPECT_TRUE(tempColor.blue == blueNum);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest014()
+{
+    TDD_CASE_BEGIN();
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+    /**
+     * @tc.steps: step1. setting strokeWidth=0.
+     */
+    jerry_value_t colorKey = jerry_create_string((const jerry_char_t*)"strokeWidth");
+    const int32_t strokeWidth = 0;
+    jerry_value_t colorValue = jerry_create_number(strokeWidth);
+    jerry_set_property(objStaticStyle, colorKey, colorValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+    /**
+     * @tc.expected: step1. get strokeWidth=0.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    if (progressView->GetValidHeight() == strokeWidth) {
+        printf("[Test Case] [HorizonProgressTest014] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest014] FAILED\n");
+    }
+    EXPECT_TRUE(progressView->GetValidHeight() == strokeWidth);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest015()
+{
+    TDD_CASE_BEGIN();
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+    /**
+     * @tc.steps: step1. setting strokeWidth=32767.
+     */
+    jerry_value_t colorKey = jerry_create_string((const jerry_char_t*)"strokeWidth");
+    const int32_t strokeWidth = 32767;
+    jerry_value_t colorValue = jerry_create_number(strokeWidth);
+    jerry_set_property(objStaticStyle, colorKey, colorValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+    /**
+     * @tc.expected: step1. get strokeWidth=32767.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    if (progressView->GetValidHeight() == strokeWidth) {
+        printf("[Test Case] [HorizonProgressTest015] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest015] FAILED\n");
+    }
+    EXPECT_TRUE(progressView->GetValidHeight() == strokeWidth);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest016()
+{
+    TDD_CASE_BEGIN();
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+    /**
+     * @tc.steps: step1. setting strokeWidth=32768.
+     */
+    jerry_value_t colorKey = jerry_create_string((const jerry_char_t*)"strokeWidth");
+    const int32_t strokeWidth = 32768;
+    jerry_value_t colorValue = jerry_create_number(strokeWidth);
+    jerry_set_property(objStaticStyle, colorKey, colorValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+    /**
+     * @tc.expected: step1. progress component will not crash.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    if (progressView->GetValidHeight() != strokeWidth) {
+        printf("[Test Case] [HorizonProgressTest016] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest016] FAILED\n");
+    }
+    EXPECT_TRUE(progressView->GetValidHeight() != strokeWidth);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::HorizonProgressTest017()
+{
+    TDD_CASE_BEGIN();
+    jerry_value_t typeId = jerry_create_string((const jerry_char_t*)"type");
+    jerry_value_t typeValue = jerry_create_string((const jerry_char_t*)"horizontal");
+    jerry_set_property(objAttrs, typeId, typeValue);
+    jerry_release_value(typeId);
+    jerry_release_value(typeValue);
+    /**
+     * @tc.steps: step1. setting strokeWidth=-1.
+     */
+    jerry_value_t colorKey = jerry_create_string((const jerry_char_t*)"strokeWidth");
+    const int32_t strokeWidth = -1;
+    jerry_value_t colorValue = jerry_create_number(strokeWidth);
+    jerry_set_property(objStaticStyle, colorKey, colorValue);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("progress", strlen("progress"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+    if (component == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    rootComponentMock_.RenderComponent(*component);
+    /**
+     * @tc.expected: step1. get default strokeWidth=32.
+     */
+    UIBoxProgress* progressView = reinterpret_cast<UIBoxProgress *>(component->GetComponentRootView());
+    if (progressView->GetValidHeight() == strokeWidth) {
+        printf("[Test Case] [HorizonProgressTest017] PASSED\n");
+    } else {
+        printf("[Test Case] [HorizonProgressTest017] FAILED\n");
+    }
+    EXPECT_TRUE(progressView->GetValidHeight() == strokeWidth);
+    delete (progressView);
+    progressView = nullptr;
+    TDD_CASE_END();
+}
+
+void HorizonProgressTddTest::RunTests()
+{
+    HorizonProgressTest001();
+    HorizonProgressTest002();
+    HorizonProgressTest003();
+    HorizonProgressTest004();
+    HorizonProgressTest005();
+    HorizonProgressTest006();
+    HorizonProgressTest007();
+    HorizonProgressTest008();
+    HorizonProgressTest009();
+    HorizonProgressTest013();
+    HorizonProgressTest014();
+    HorizonProgressTest015();
+    HorizonProgressTest016();
+    HorizonProgressTest017();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: Component_HorizonProgress_Create_Test_001
+ * @tc.desc: Verify progress component will restore the default progress type=horizontal if setting not exist type.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon001, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest001();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_Create_Test_002
+ * @tc.desc: Verify progress component will restore the default progress type=horizontal if setting empty type.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon002, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest002();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_Create_Test_003
+ * @tc.desc: Verify progress component setting normal progress attribute: type=arc successfully.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon003, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest003();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_Atrribute_Test_001
+ * @tc.desc: Verify progress component will not crash when setting error attribute: percent=-32768.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon004, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest004();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_Atrribute_Test_002
+ * @tc.desc: Verify progress component setting normal attribute: percent=100 successfully.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon005, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest005();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_Atrribute_Test_003
+ * @tc.desc: Verify progress component will not crash when setting error attribute: percent=32767.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon006, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest006();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_Atrribute_Test_004
+ * @tc.desc: Verify progress component will not crash when setting error attribute: percent=-32769.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon007, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest007();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_Atrribute_Test_005
+ * @tc.desc: Verify progress component will not crash when setting error attribute: percent=32768.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon008, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest008();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_style_Test_001
+ * @tc.desc: Verify progress component setting normal progress style: color=0x000000(0) successfully.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon009, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest009();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_style_Test_005
+ * @tc.desc: Verify progress component will restore the default color=0x6B9AC7(7051975) if setting error value.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon013, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest013();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_style_Test_006
+ * @tc.desc: Verify progress component setting normal progress style: strokeWidth=0 successfully.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon014, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest014();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_style_Test_007
+ * @tc.desc: Verify progress component setting normal progress style: strokeWidth=32767 successfully.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon015, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest015();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_style_Test_008
+ * @tc.desc: Verify progress component will not crash when setting error style: strokeWidth=32768.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon016, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest016();
+}
+
+/**
+ * @tc.name: Component_HorizonProgress_style_Test_009
+ * @tc.desc: Verify progress component support setting error stroke width.
+ * @tc.require: AR000DSEFE
+ */
+HWTEST_F(HorizonProgressTddTest, horizon017, TestSize.Level1)
+{
+    HorizonProgressTddTest::HorizonProgressTest017();
+}
+#endif
+} // ACELite
+} // OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/horizonprogress_tdd_test.h b/frameworks/src/core/components/test/unittest/common/horizonprogress_tdd_test.h
new file mode 100755
index 0000000..715c967
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/horizonprogress_tdd_test.h
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_TEST_HORIZON_H
+#define OHOS_ACELITE_TEST_HORIZON_H
+
+#include "component_factory.h"
+#include "root_component_mock.h"
+#include "test_common.h"
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class HorizonProgressTddTest : public testing::Test {
+#else
+class HorizonProgressTddTest {
+#endif
+public:
+    HorizonProgressTddTest();
+    ~HorizonProgressTddTest(){};
+    void SetUp();
+    void TearDown();
+    void HorizonProgressTest001();
+    void HorizonProgressTest002();
+    void HorizonProgressTest003();
+    void HorizonProgressTest004();
+    void HorizonProgressTest005();
+    void HorizonProgressTest006();
+    void HorizonProgressTest007();
+    void HorizonProgressTest008();
+    void HorizonProgressTest009();
+    void HorizonProgressTest013();
+    void HorizonProgressTest014();
+    void HorizonProgressTest015();
+    void HorizonProgressTest016();
+    void HorizonProgressTest017();
+    void RunTests();
+
+    jerry_value_t objGlob;
+    jerry_value_t objAttrs;
+    jerry_value_t objStaticStyle;
+
+private:
+    RootComponentMock rootComponentMock_;
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_TEST_HORIZON_H
diff --git a/frameworks/src/core/components/test/unittest/common/image_src_path_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/image_src_path_tdd_test.cpp
new file mode 100755
index 0000000..9caf512
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/image_src_path_tdd_test.cpp
@@ -0,0 +1,146 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "image_src_path_tdd_test.h"
+#include <cstdint>
+#include <cstdio>
+#include "js_app_context.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * @tc.name: ImageSrcPrivateDataPathSupport001
+ * @tc.desc: Verify the path contact processing
+ * @tc.require: AR000F3PE1
+ */
+HWTEST_F(ImageSrcPathTddTest, PrivateDataPathSupport001, TestSize.Level0)
+{
+    /**
+     * @tc.steps: step1. pass nullptr for processing
+     */
+    char *result = JsAppContext::GetInstance()->GetResourcePath(nullptr);
+    /**
+     * @tc.steps: step2. check if parse failed
+     */
+    EXPECT_EQ(result, nullptr);
+}
+
+/**
+ * @tc.name: ImageSrcPrivateDataPathSupport002
+ * @tc.desc: Verify the path contact processing
+ * @tc.require: AR000F3PE1
+ */
+HWTEST_F(ImageSrcPathTddTest, PrivateDataPathSupport002, TestSize.Level0)
+{
+    /**
+     * @tc.steps: step1. pass empty string for handling
+     */
+    char *resourcePath = JsAppContext::GetInstance()->GetResourcePath("");
+    /**
+     * @tc.steps: step2. check if handling failed
+     */
+    EXPECT_EQ(resourcePath, nullptr);
+}
+
+/**
+ * @tc.name: ImageSrcPrivateDataPathSupport003
+ * @tc.desc: Verify the path contact processing
+ * @tc.require: AR000F3PE1
+ */
+HWTEST_F(ImageSrcPathTddTest, PrivateDataPathSupport003, TestSize.Level0)
+{
+    /**
+     * @tc.steps: step1. pass empty string for handling
+     */
+    JsAppContext::GetInstance()->SetCurrentAbilityInfo("app/run/", "com.huawei.test", 0);
+    char *resourcePath = JsAppContext::GetInstance()->GetResourcePath("abc.png");
+    /**
+     * @tc.steps: step2. check if handling failed
+     */
+    printf("resourcePath: %s\n", resourcePath);
+    EXPECT_STREQ(resourcePath, "app/run/abc.png");
+}
+
+/**
+ * @tc.name: ImageSrcPrivateDataPathSupport004
+ * @tc.desc: Verify the path contact processing
+ * @tc.require: AR000F3PE1
+ */
+HWTEST_F(ImageSrcPathTddTest, PrivateDataPathSupport004, TestSize.Level0)
+{
+    /**
+     * @tc.steps: step1. pass empty string for handling
+     */
+    char *resourcePath = JsAppContext::GetInstance()->GetResourcePath("internal://app/abc.png");
+    /**
+     * @tc.steps: step2. check if handling failed
+     */
+    EXPECT_EQ(resourcePath, nullptr);
+}
+
+/**
+ * @tc.name: ImageSrcPrivateDataPathSupport005
+ * @tc.desc: Verify the path contact processing
+ * @tc.require: AR000F3PE1
+ */
+HWTEST_F(ImageSrcPathTddTest, PrivateDataPathSupport005, TestSize.Level0)
+{
+    /**
+     * @tc.steps: step1. pass empty string for handling
+     */
+    char *resourcePath = JsAppContext::GetInstance()->GetResourcePath("internal://app/testa/testb/testc/abc.png");
+    /**
+     * @tc.steps: step2. check if handling failed
+     */
+    EXPECT_EQ(resourcePath, nullptr);
+}
+
+/**
+ * @tc.name: ImageSrcPrivateDataPathSupport006
+ * @tc.desc: Verify the path contact processing
+ * @tc.require: AR000F3PE1
+ */
+HWTEST_F(ImageSrcPathTddTest, PrivateDataPathSupport006, TestSize.Level0)
+{
+    /**
+     * @tc.steps: step1. prepare one very long string, longer than 255
+     */
+    const char *filePath =
+        "internal://app/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/"
+        "abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc//abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/"
+        "abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc/abc.png";
+    char *resourcePath = JsAppContext::GetInstance()->GetResourcePath(filePath);
+    /**
+     * @tc.steps: step2. check if handling failed
+     */
+    EXPECT_EQ(resourcePath, nullptr);
+}
+
+/**
+ * used for debugging TDD implementation on simulator
+ */
+void ImageSrcPathTddTest::RunTests()
+{
+#ifndef TDD_ASSERTIONS
+    PrivateDataPathSupport001();
+    PrivateDataPathSupport002();
+    PrivateDataPathSupport003();
+    PrivateDataPathSupport004();
+    PrivateDataPathSupport005();
+    PrivateDataPathSupport006();
+#endif // TDD_ASSERTIONS
+}
+} // namespace ACELite
+} // namespace OHOS
\ No newline at end of file
diff --git a/frameworks/src/core/components/test/unittest/common/image_src_path_tdd_test.h b/frameworks/src/core/components/test/unittest/common/image_src_path_tdd_test.h
new file mode 100755
index 0000000..56b7f49
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/image_src_path_tdd_test.h
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef ACELITE_IMAGE_SRC_PATH_TDD_TEST_H
+#define ACELITE_IMAGE_SRC_PATH_TDD_TEST_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "acelite_config.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class ImageSrcPathTddTest : public testing::Test {
+#else
+class ImageSrcPathTddTest {
+#endif
+public:
+    ImageSrcPathTddTest() = default;
+    ~ImageSrcPathTddTest() = default;
+    void PrivateDataPathSupport001();
+    void PrivateDataPathSupport002();
+    void PrivateDataPathSupport003();
+    void PrivateDataPathSupport004();
+    void PrivateDataPathSupport005();
+    void PrivateDataPathSupport006();
+    void RunTests();
+};
+}
+}
+#endif // ACELITE_IMAGE_SRC_PATH_TDD_TEST_H
diff --git a/frameworks/src/core/components/test/unittest/common/input_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/input_tdd_test.cpp
new file mode 100755
index 0000000..c475163
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/input_tdd_test.cpp
@@ -0,0 +1,1360 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "input_tdd_test.h"
+#include "ace_log.h"
+#include "component_factory.h"
+#include "input_button_component.h"
+#include "input_checkbox_component.h"
+#include "input_radio_component.h"
+#include "js_app_context.h"
+#include "js_app_environment.h"
+#include "js_fwk_common.h"
+#include "style.h"
+#include "ui_label_button.h"
+#include "ui_view.h"
+
+namespace OHOS {
+namespace ACELite {
+InputTddTest::InputTddTest()
+    : globalObject_(UNDEFINED),
+      attrsObject_(UNDEFINED),
+      valueStaticStyle_(UNDEFINED) {}
+
+void InputTddTest::SetUp()
+{
+    JsAppEnvironment *environment = JsAppEnvironment::GetInstance();
+    environment->InitJsFramework();
+    globalObject_ = jerry_get_global_object();
+    const char *attrName = "attrs";
+    jerry_value_t keyAttrs = jerry_create_string(reinterpret_cast<const jerry_char_t *>(attrName));
+    attrsObject_ = jerry_create_object();
+    jerry_release_value(jerry_set_property(globalObject_, keyAttrs, attrsObject_));
+    const char *styleName = "staticStyle";
+    jerry_value_t styleProp = jerry_create_string(reinterpret_cast<const jerry_char_t *>(styleName));
+    valueStaticStyle_ = jerry_create_object();
+    jerry_release_value(jerry_set_property(globalObject_, styleProp, valueStaticStyle_));
+    jerry_release_value(keyAttrs);
+    jerry_release_value(styleProp);
+    rootComponentMock_.PrepareRootContainer();
+}
+
+void InputTddTest::TearDown()
+{
+    ReleaseJerryValue(attrsObject_, globalObject_, valueStaticStyle_, VA_ARG_END_FLAG);
+    JsAppContext::GetInstance()->ReleaseStyles();
+}
+
+UIView *InputTddTest::GetComponent() const
+{
+    uint16_t componentId = KeyParser::ParseKeyId("input");
+    jerry_value_t children = UNDEFINED;
+    Component *component = ComponentFactory::CreateComponent(componentId, globalObject_, children);
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create input component error");
+        return nullptr;
+    }
+    rootComponentMock_.RenderComponent(*component);
+    UIView *view = component->GetComponentRootView();
+    if (view == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create input component error");
+    }
+    jerry_release_value(children);
+    return view;
+}
+
+void InputTddTest::AddStringProperty(jerry_value_t object, const char *name, const char *value) const
+{
+    jerry_value_t nameProp = jerry_create_string(reinterpret_cast<const jerry_char_t *>(name));
+    jerry_value_t valueProp = jerry_create_string(reinterpret_cast<const jerry_char_t *>(value));
+    jerry_release_value(jerry_set_property(object, nameProp, valueProp));
+    ReleaseJerryValue(nameProp, valueProp, VA_ARG_END_FLAG);
+}
+
+void InputTddTest::AddNumberProperty(jerry_value_t object, const char *name, const double value) const
+{
+    jerry_value_t nameProp = jerry_create_string(reinterpret_cast<const jerry_char_t *>(name));
+    jerry_value_t valueProp = jerry_create_number(value);
+    jerry_release_value(jerry_set_property(object, nameProp, valueProp));
+    ReleaseJerryValue(nameProp, valueProp, VA_ARG_END_FLAG);
+}
+
+void InputTddTest::AddBoolProperty(jerry_value_t object, const char *name, bool value) const
+{
+    jerry_value_t nameProp = jerry_create_string(reinterpret_cast<const jerry_char_t *>(name));
+    jerry_value_t valueProp = jerry_create_boolean(value);
+    jerry_release_value(jerry_set_property(object, nameProp, valueProp));
+    ReleaseJerryValue(nameProp, valueProp, VA_ARG_END_FLAG);
+}
+
+bool InputTddTest::CompareColor(ColorType color, uint32_t colorIntValue) const
+{
+    uint8_t red8 = uint8_t((colorIntValue & TEXT_RED_COLOR_MASK) >> RED_COLOR_START_BIT);
+    uint8_t green8 = uint8_t((colorIntValue & TEXT_GREEN_COLOR_MASK) >> GREEN_COLOR_START_BIT);
+    uint8_t blue8 = uint8_t((colorIntValue & TEXT_BLUE_COLOR_MASK));
+    ColorType compare = Color::GetColorFromRGB(red8, green8, blue8);
+    return (color.blue == compare.blue && color.red == compare.red && color.green == compare.green);
+}
+
+UIRadioButton *InputTddTest::ConvertView(const char *name) const
+{
+    UIView *view = GetComponent();
+    if (view == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the view is null in %s", name);
+        return nullptr;
+    }
+    UIRadioButton *radio = reinterpret_cast<UIRadioButton *>(view);
+    return radio;
+}
+
+void InputTddTest::ComponentInputAttributeTest01()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps:step1:set the type checkbox and get the native element
+     */
+    const char *prop = "type";
+    const char *value = "checkbox";
+    AddStringProperty(attrsObject_, prop, value);
+    UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetState() != UICheckBox::UNSELECTED) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create checkbox, the checked attribute is error");
+        return;
+    }
+
+    /**
+     * @tc.steps:step2:set the checked attribute true
+     * @tc.expect: the value of checked is selected
+     */
+    const char *checkedProp = "checked";
+    AddBoolProperty(attrsObject_, checkedProp, true);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetState() != UICheckBox::SELECTED) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "checkbox set checked true error");
+        return;
+    }
+
+    /**
+     * @tc.steps: step3:set the checked attribute false
+     * @tc.expect: the value of checked attribute is unselected
+     */
+    AddBoolProperty(attrsObject_, checkedProp, false);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetState() != UICheckBox::UNSELECTED) {
+        HILOG_INFO(HILOG_MODULE_ACE, "Checkbox set checked false error");
+    }
+
+    /**
+     * @tc.steps: step4:set the checked attribute
+     * @tc.expected: the checked attribute is error
+     */
+    const char *stringChecked = "aaaa";
+    AddStringProperty(attrsObject_, checkedProp, stringChecked);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetState() != UICheckBox::UNSELECTED) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Checkbox set checked attribute error");
+    } else {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputAttributeTest01 pass");
+    }
+    EXPECT_TRUE(checkbox->GetState() == UICheckBox::UNSELECTED);
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputAttributeTest02()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @steps: step1: set the attibute type button
+     */
+    const char *type = "type";
+    const char *typeValue = "button";
+    AddStringProperty(attrsObject_, type, typeValue);
+
+    /**
+     * @steps: step2: set the attribute value aaaa
+     * @tc.expected:the value of button is aaaa
+     */
+    const char *value = "value";
+    const char *valueProperty = "aaa";
+    AddStringProperty(attrsObject_, value, valueProperty);
+    UILabelButton *button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (strcmp(button->GetText(), valueProperty)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the attribute value of button set incorrect");
+    }
+
+    /**
+     * @steps: step2: set the attribute value nullptr
+     * @tc.expected: the value of button is nullptr
+     */
+    jerry_value_t nullProp = UNDEFINED;
+    jerry_value_t valueProp = jerry_create_string(reinterpret_cast<const jerry_char_t *>(value));
+    jerry_release_value(jerry_set_property(attrsObject_, valueProp, nullProp));
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button->GetText()) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "execute setting value null error");
+    } else {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputAttributeTest002 passed");
+    }
+    EXPECT_FALSE(button->GetText());
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputStyleTest04()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1:set the type attribute button
+     */
+    const char *type = "type";
+    const char *typeValue = "button";
+    AddStringProperty(attrsObject_, type, typeValue);
+    const char *value = "value";
+    const char *valueItem = "aaaa";
+    AddStringProperty(attrsObject_, value, valueItem);
+    UILabelButton *button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create button failed");
+    }
+
+    /**
+     * @tc.steps:step2:set the color value 16711680
+     * @tc.expected:the font color of UILabelButton is red
+     */
+    const char *color = "color";
+    const int32_t redValue = 16711680;
+    AddNumberProperty(valueStaticStyle_, color, redValue);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    ColorType tempColor;
+    tempColor.full = button->GetLabelStyle(STYLE_TEXT_COLOR);
+    if (!CompareColor(tempColor, redValue)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the color error");
+    }
+
+    /**
+     * @tc.steps: step3:set the color value 21474836481
+     * @tc.expected: the font color of UILabelButton is red
+     */
+    const int32_t max = 2147483648;
+    AddNumberProperty(valueStaticStyle_, color, max);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    tempColor.full = button->GetLabelStyle(STYLE_TEXT_COLOR);
+    if (!CompareColor(tempColor, max)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "test the value of color in button error");
+    }
+
+    /**
+     * @tc.steps: step4: set the color property -21474836482
+     * @tc.expected: the font color of UILabelButton is red
+     */
+    const int32_t min = INT_MIN;
+    AddNumberProperty(valueStaticStyle_, color, min);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    tempColor.full = button->GetLabelStyle(STYLE_TEXT_COLOR);
+    if (CompareColor(tempColor, min)) {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputStyleTest04 passed");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "test the min value of font color error");
+    }
+    EXPECT_TRUE(CompareColor(tempColor, min));
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputStyleTest05()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps:step1: set the attribute type button
+     */
+    const char *type = "type";
+    const char *typeValue = "button";
+    AddStringProperty(attrsObject_, type, typeValue);
+    UILabelButton *button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create button failed");
+    }
+
+    /**
+     * @tc.steps:step2:set the attribute textAlign center
+     * @tc.expected: the align attribute is UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER
+     */
+    const char *textAlign = "textAlign";
+    const char *center = "center";
+    AddStringProperty(valueStaticStyle_, textAlign, center);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button->GetAlign() != UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the center textAlign error");
+    }
+
+    /**
+     * @tc.steps:step3:set the attribute textAlign right
+     * @tc.expected:the align attribute is UITextLanguageAlignment::TEXT_ALIGNMENT_RIGHT
+     */
+    const char *right = "right";
+    AddStringProperty(valueStaticStyle_, textAlign, right);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button->GetAlign() != UITextLanguageAlignment::TEXT_ALIGNMENT_RIGHT) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the align attribute right error");
+    }
+
+    /**
+     * @tc.steps:step4:set the attribute textAlign left
+     * @tc.expected: the align attribute is UITextLanguageAlignment::TEXT_ALIGNMENT_LEFT
+     */
+    const char *left = "left";
+    AddStringProperty(valueStaticStyle_, textAlign, left);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button->GetAlign() != UITextLanguageAlignment::TEXT_ALIGNMENT_LEFT) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the textAlign attribute left error.");
+    }
+
+    /**
+     * @tc.steps:step5:set the attribute textAlign aaa
+     * @tc.expected:the align attribute is UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER
+     */
+    const char *errorValue = "aaa";
+    AddStringProperty(valueStaticStyle_, textAlign, errorValue);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button->GetAlign() == UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER) {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputStyleTest05 passed");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set textAlign aaa test failed");
+    }
+    EXPECT_TRUE(button->GetAlign() == UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER);
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputAttributeTest06()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps:step1:set the type attribute checkbox
+     */
+    const char *type = "type";
+    const char *checkboxValue = "checkbox";
+    AddStringProperty(attrsObject_, type, checkboxValue);
+    UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetState() != UICheckBox::UNSELECTED) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "checkbox is create and the status is error");
+    }
+
+    /**
+     * @tc.steps:step2:set the checked attribute true
+     * @tc.expected: the status of checkbox is selected
+     */
+    const char *checked = "checked";
+    AddBoolProperty(attrsObject_, checked, true);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetState() != UICheckBox::SELECTED) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the checked attribute true error");
+    }
+
+    /**
+     * @tc.steps:step3:set the checked attribute false
+     * @tc.expected: the status of checkbox is unselected
+     */
+    AddBoolProperty(attrsObject_, checked, false);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetState() != UICheckBox::UNSELECTED) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the checked attribute false error");
+    }
+
+    /**
+     * @tc.steps: set the checked attribute aaaa
+     * @tc.expected:the status of checkbox is unselected
+     */
+    const char *value = "aaaa";
+    AddStringProperty(attrsObject_, checked, value);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetState() == UICheckBox::UNSELECTED) {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputAttributeTest06 passed");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the value aaaa error");
+    }
+    EXPECT_TRUE(checkbox->GetState() == UICheckBox::UNSELECTED);
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputAttributeTest07()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps:step1:set tye type attribute button
+     */
+    const char *type = "type";
+    const char *typeValue = "button";
+    AddStringProperty(attrsObject_, type, typeValue);
+    /**
+     * @tc.steps:step2:set the attribute width 50
+     * @tc.expected:the width of UILabelButton is 50
+     */
+    const char *width = "width";
+    const int widthNumber = 50;
+    AddNumberProperty(valueStaticStyle_, width, widthNumber);
+    UILabelButton *button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button->GetWidth() != widthNumber) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the width attribute failed");
+    }
+
+    /**
+     * @tc.steps:step3:set the attribute height 20
+     * @tc.expected:the height of UILabelButton is 20
+     */
+    const char *height = "height";
+    const int heightValue = 20;
+    AddNumberProperty(valueStaticStyle_, height, heightValue);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button->GetHeight() != heightValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute height error");
+    }
+
+    /**
+     * @tc.steps:step6:set the attribute id button1
+     * @tc.expected: the id of button is button1
+     */
+    const char *id = "id";
+    const char *idValue = "button1";
+    AddStringProperty(attrsObject_, id, idValue);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (!strcmp(button->GetViewId(), idValue)) {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputAttributeTest07 passed");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute id error");
+    }
+    EXPECT_TRUE(!strcmp(button->GetViewId(), idValue));
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputStyleTest08()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps:step1:set the type button
+     */
+    const char *type = "type";
+    const char *buttonValue = "button";
+    AddStringProperty(attrsObject_, type, buttonValue);
+    /**
+     * @tc.steps: step2: set the margin 100
+     * @tc.expected: the value of margin is 100
+     */
+    const char *margin = "margin";
+    const int marginValue = 100;
+    AddNumberProperty(valueStaticStyle_, margin, marginValue);
+    UILabelButton *button = reinterpret_cast<UILabelButton *>(GetComponent());
+    int16_t left = button->GetStyle(STYLE_MARGIN_LEFT);
+    int16_t right = button->GetStyle(STYLE_MARGIN_RIGHT);
+    int16_t top = button->GetStyle(STYLE_MARGIN_TOP);
+    int16_t bottom = button->GetStyle(STYLE_MARGIN_BOTTOM);
+    if (!(left == marginValue && right == marginValue && top == marginValue && bottom == marginValue)) {
+        HILOG_INFO(HILOG_MODULE_ACE, "set the attribute margin failed");
+    }
+    /**
+     * @tc.steps:step3:set the attribute marginLeft 10
+     * @tc.expected:the value of marginLeft is 10
+     */
+    const char *marginLeft = "marginLeft";
+    const int marginLeftValue = 10;
+    AddNumberProperty(valueStaticStyle_, marginLeft, marginLeftValue);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    left = button->GetStyle(STYLE_MARGIN_LEFT);
+    if (left != marginLeftValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute marginLeft error");
+    }
+    TDD_CASE_END();
+    ComponentInputStyleTest08Extra(right, top, bottom);
+}
+
+void InputTddTest::ComponentInputStyleTest08Extra(int16_t right, int16_t top, int16_t bottom)
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps:step4:set the attribute marginButtom 10
+     * @tc.expected: the attribute of marginButton 10
+     */
+    const char *marginButtom = "marginBottom";
+    const int marginButtomValue = 10;
+    AddNumberProperty(valueStaticStyle_, marginButtom, marginButtomValue);
+    UILabelButton *button = reinterpret_cast<UILabelButton *>(GetComponent());
+    bottom = button->GetStyle(STYLE_MARGIN_BOTTOM);
+    if (bottom != marginButtomValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute marginButtom failed");
+    }
+    /**
+     * @tc.steps: step5: set the attribute marginRight 10
+     * @tc.expected: the value of marginRight is 10
+     */
+    const char *marginRight = "marginRight";
+    const int marginRightValue = 10;
+    AddNumberProperty(valueStaticStyle_, marginRight, marginRightValue);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    right = button->GetStyle(STYLE_MARGIN_RIGHT);
+    if (right != marginRightValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute marginRight failed");
+    }
+    /**
+     * @tc.steps: step6: set the attribute marginTop 10
+     * @tc.expected: the attribute marginTop is 10
+     */
+    const char *marginTop = "marginTop";
+    const int marginTopValue = 10;
+    AddNumberProperty(valueStaticStyle_, marginTop, marginTopValue);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    top = button->GetStyle(STYLE_MARGIN_TOP);
+    if (top != marginTopValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute marginTop failed");
+    } else {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputStyleTest08 passed");
+    }
+    EXPECT_FALSE(top != marginTopValue);
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputStyleTest09()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1:set the attribute button
+     */
+    const char *type = "type";
+    const char *typeValue = "button";
+    AddStringProperty(attrsObject_, type, typeValue);
+
+    /**
+     * @tc.steps: step2:set the borderWidth 2
+     * @tc.expected:the border width of button is 2
+     */
+    const char *borderWidth = "borderWidth";
+    const int borderWidthValue = 2;
+    AddNumberProperty(valueStaticStyle_, borderWidth, borderWidthValue);
+    UILabelButton *button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button->GetStyle(STYLE_BORDER_WIDTH) != borderWidthValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the borderWidth failed");
+        return;
+    }
+
+    /**
+     * @tc.steps: step3:set the borderColor red
+     * @tc.expected: the borderColor of UILabelButton is red
+     */
+    const char *borderColor = "borderColor";
+    const int color = 16711680;
+    AddNumberProperty(valueStaticStyle_, borderColor, color);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    ColorType tempColor;
+    tempColor.full = button->GetStyle(STYLE_BORDER_COLOR);
+    if (!CompareColor(tempColor, color)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute border color failed");
+    }
+
+    /**
+     * @tc.step: step4:set the radius 1
+     * @tc.expected: the attribute of radius is 1
+     */
+    const char *radius = "borderRadius";
+    const int radiusNum = 1;
+    AddNumberProperty(valueStaticStyle_, radius, radiusNum);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    if (button->GetStyle(STYLE_BORDER_RADIUS) != 1) {
+        HILOG_INFO(HILOG_MODULE_ACE, "set the radius failed");
+    }
+
+    /**
+     * @tc.steps: step5:set the attribute backgroundColor red
+     * @tc.expected: the backgroundColor of UILabelButton is red
+     */
+    const char *backgroundColor = "backgroundColor";
+    AddNumberProperty(valueStaticStyle_, backgroundColor, color);
+    button = reinterpret_cast<UILabelButton *>(GetComponent());
+    tempColor.full = button->GetStyle(STYLE_BACKGROUND_COLOR);
+    if (CompareColor(tempColor, color)) {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputStyleTest09 passed");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute backgroundColor failed");
+    }
+    EXPECT_TRUE(CompareColor(tempColor, color));
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputAttributeTest10()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1:set the attribute button
+     */
+    const char *type = "type";
+    const char *typeValue = "checkbox";
+    AddStringProperty(attrsObject_, type, typeValue);
+
+    /**
+     * @tc.steps:step2:set the attribute width 50
+     * @tc.expected: the width of checkbox is 50
+     */
+    const char *width = "width";
+    const int widthValue = 50;
+    AddNumberProperty(valueStaticStyle_, width, widthValue);
+    UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetWidth() != widthValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute of width failed");
+    }
+
+    /**
+     * @tc.steps:step3:set the attribute height 20
+     * @tc.expected: the height of UILabelButton is 20
+     */
+    const char *height = "height";
+    const int heightValue = 20;
+    AddNumberProperty(valueStaticStyle_, height, heightValue);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetHeight() != heightValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute height failed");
+    }
+
+    /**
+     * @tc.steps: step4:set the attribute id checkbox1
+     * @tc.expected: the attribute id of checkbox is checkbox1
+     */
+    const char *id = "id";
+    const char *idValue = "button1";
+    AddStringProperty(attrsObject_, id, idValue);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (!strcmp(idValue, checkbox->GetViewId())) {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputAttributeTest10 passed");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Set the attribute id of checkbox failed");
+    }
+    EXPECT_TRUE(!strcmp(idValue, checkbox->GetViewId()));
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputStyleTest11()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps:step1: set the attribute type checkbox
+     */
+    const char *type = "type";
+    const char *typeValue = "checkbox";
+    AddStringProperty(attrsObject_, type, typeValue);
+    /**
+     * @tc.steps:step2:set the attribute margin 10
+     * @tc.expected:the attribute margin of checkbox is 10
+     */
+    const char *margin = "margin";
+    const int marginValue = 100;
+    AddNumberProperty(valueStaticStyle_, margin, marginValue);
+    UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    int16_t left = checkbox->GetStyle(STYLE_MARGIN_LEFT);
+    int16_t right = checkbox->GetStyle(STYLE_MARGIN_RIGHT);
+    int16_t top = checkbox->GetStyle(STYLE_MARGIN_TOP);
+    int16_t bottom = checkbox->GetStyle(STYLE_MARGIN_BOTTOM);
+    if (!(left == marginValue && right == marginValue && top == marginValue && bottom == marginValue)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute margin failed");
+    }
+    /**
+     * @tc.steps:step3:set the attribute marginLeft 10
+     * @tc.expected: the attribute margin left is 10
+     */
+    const char *marginLeft = "marginLeft";
+    const int value = 20;
+    AddNumberProperty(valueStaticStyle_, marginLeft, value);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    left = checkbox->GetStyle(STYLE_MARGIN_LEFT);
+    if (left != value) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute marginLeft failed");
+    }
+    /**
+     * @tc.steps: step4: set the attribute marginRight 10
+     * @tc.expected: the value of marginRight is 10
+     */
+    const char *marginRight = "marginRight";
+    AddNumberProperty(valueStaticStyle_, marginRight, value);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    right = checkbox->GetStyle(STYLE_MARGIN_RIGHT);
+    if (right != value) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute marginRight failed");
+    }
+    /**
+     * @tc.steps:step5:set the attribute marginTop 10
+     * @tc.expected: the marginRight attribute of checkbox is 10
+     */
+    const char *marginTop = "marginTop";
+    AddNumberProperty(valueStaticStyle_, marginTop, value);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    top = checkbox->GetStyle(STYLE_MARGIN_TOP);
+    if (top != value) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute marginTop error");
+    }
+    /**
+     * @tc.steps: step6:set the attribute marginButtom 10
+     * @tc.expected: the attribute marginButtom of checkbox is 10
+     */
+    const char *marginButtom = "marginBottom";
+    AddNumberProperty(valueStaticStyle_, marginButtom, value);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    bottom = checkbox->GetStyle(STYLE_MARGIN_BOTTOM);
+    if (bottom == value) {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputStyleTest11 passed");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute marginButtom failed");
+    }
+    EXPECT_TRUE(bottom == value);
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputStyleTest12()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1:set the attribute type checkbox
+     */
+    const char *type = "type";
+    const char *typeValue = "checkbox";
+    AddStringProperty(attrsObject_, type, typeValue);
+
+    /**
+     * @tc.steps: step2:set the attribute borderWidth 2
+     * @tc.expected: the borderWidth of checkbox is 2
+     */
+    const char *borderWidth = "borderWidth";
+    const int borderWidthValue = 2;
+    AddNumberProperty(valueStaticStyle_, borderWidth, borderWidthValue);
+    UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetStyle(STYLE_BORDER_WIDTH) != borderWidthValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the style borderWidth failed");
+    }
+
+    /**
+     * @tc.steps: step3:set the attribute borderColor red
+     * @tc.expected: the borderColor of checkbox is red
+     */
+    const char *borderColor = "borderColor";
+    const int color = 16711680;
+    AddNumberProperty(valueStaticStyle_, borderColor, color);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    ColorType tempColor;
+    tempColor.full = checkbox->GetStyle(STYLE_BORDER_COLOR);
+    if (!CompareColor(tempColor, color)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute borderColor of checkbox failed");
+    }
+
+    /**
+     * @tc.steps: step4:set the attribute radius 1
+     * @tc.expected:the style radius of checkbox is 1
+     */
+    const char *radius = "borderRadius";
+    const int radiusValue = 1;
+    AddNumberProperty(valueStaticStyle_, radius, radiusValue);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    if (checkbox->GetStyle(STYLE_BORDER_RADIUS) != radiusValue) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute radius failed");
+    }
+
+    /**
+     * @tc.steps:step5:set the backgroundColor red
+     * @tc.expected: the backgroundColor of checkbox is red
+     */
+    const char *backgroundColor = "backgroundColor";
+    AddNumberProperty(valueStaticStyle_, backgroundColor, color);
+    checkbox = reinterpret_cast<UICheckBox *>(GetComponent());
+    tempColor.full = checkbox->GetStyle(STYLE_BACKGROUND_COLOR);
+    if (CompareColor(tempColor, color)) {
+        HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputStyleTest12 passed");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute backgroundColor failed");
+    }
+    EXPECT_TRUE(CompareColor(tempColor, color));
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputAttributeTest13()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1:set the attribute type button and set the attribute checked true
+     */
+    const char *type = "type";
+    const char *typeValue = "button";
+    AddStringProperty(attrsObject_, type, typeValue);
+    const char *checked = "checked";
+    AddBoolProperty(attrsObject_, checked, false);
+
+    /**
+     * @tc.steps:step2:get the component
+     * @tc.expected: the type of component is button
+     */
+    UIView *view = GetComponent();
+    if (view) {
+        UILabelButton *button = reinterpret_cast<UILabelButton *>(view);
+        if (button == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create the view failed");
+        }
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "check the checked attribute in button error");
+    }
+
+    /**
+     * @tc.steps:step3:set the attribute type checkbox and set the attribute value aaa
+     */
+    const char *checkboxValue = "checkbox";
+    AddStringProperty(attrsObject_, type, checkboxValue);
+    const char *value = "value";
+    const char *testValue = "aaa";
+    AddStringProperty(attrsObject_, value, testValue);
+
+    /**
+     * @tc.steps:step4:get the component
+     * @tc.expected: the type of component is checkbox
+     */
+    view = GetComponent();
+    if (view) {
+        UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(view);
+        if (checkbox == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create view failed");
+        } else {
+            HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputAttributeTest13 passed");
+        }
+        EXPECT_FALSE(checkbox == nullptr);
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute value in checkbox failed");
+        EXPECT_FALSE(true);
+    }
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputAttributeTest14()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1:set the attribute type button
+     * @tc.expected: the class name of component is UILabelButton
+     */
+    const char *type = "type";
+    const char *button = "button";
+    AddStringProperty(attrsObject_, type, button);
+    UIView *view = GetComponent();
+    if (view) {
+        UILabelButton *button = reinterpret_cast<UILabelButton *>(view);
+        if (button == nullptr) {
+            HILOG_INFO(HILOG_MODULE_ACE, "Create the error view");
+        }
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute type button failed");
+    }
+
+    /**
+     * @tc.steps:step2:set the attribute type checkbox
+     * @tc.expected: the class name of component is UICheckbox
+     */
+    const char *checkbox = "checkbox";
+    AddStringProperty(attrsObject_, type, checkbox);
+    view = GetComponent();
+    if (view) {
+        UILabelButton *button = reinterpret_cast<UILabelButton *>(view);
+        if (button == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "Create the error view");
+        }
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the type attribute checkbox failed");
+    }
+
+    /**
+     * @tc.steps:step3:get the component object
+     * @tc.expected: the className of component is UILabelButton
+     */
+    view = GetComponent();
+    if (view) {
+        UILabelButton *button = reinterpret_cast<UILabelButton *>(view);
+        if (button == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create the error view");
+        }
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the attribute type is error");
+    }
+
+    /**
+     * @tc.steps:step4:set the type value aaaa
+     * @tc.expected: the type of component is UILabelButton
+     */
+    const char *testTypeValue = "aaaa";
+    AddStringProperty(attrsObject_, type, testTypeValue);
+    view = GetComponent();
+    if (view) {
+        UILabelButton *button = reinterpret_cast<UILabelButton *>(view);
+        if (button == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create the error view");
+        } else {
+            HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputAttributeTest14 passed");
+        }
+        EXPECT_FALSE(checkbox == nullptr);
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the type attribute aaa failed");
+        EXPECT_FALSE(true);
+    }
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentInputAttributeTest15()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps:step1:set the type checkbox
+     */
+    const char *type = "type";
+    const char *typeValue = "checkbox";
+    AddStringProperty(attrsObject_, type, typeValue);
+
+    /**
+     * @tc.steps:step2:set the fontSize mini
+     * @tc.expected:the className of view is UICheckbox
+     */
+    const char *fontSize = "fontSize";
+    const char *fontSizeMini = "mini";
+    AddStringProperty(valueStaticStyle_, fontSize, fontSizeMini);
+    UIView *view = GetComponent();
+    if (view) {
+        UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(view);
+        if (checkbox == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create view error");
+        }
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "check the fontSize in checkbox failed");
+    }
+
+    /**
+     * @tc.steps:step3:set the color red
+     * @tc.expected: the name of component is UICheckbox
+     */
+    const char *color = "color";
+    const int colorValue = 16711680;
+    AddNumberProperty(valueStaticStyle_, color, colorValue);
+    view = GetComponent();
+    if (view) {
+        UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(view);
+        if (checkbox == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create view failed");
+        }
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "use attribute color in checkbox failed");
+    }
+
+    /**
+     * @tc.steps: step4:set the attribute textAlign
+     * @tc.expected: the class name of text
+     */
+    const char *textAlign = "textAlign";
+    const char *textAlignLeft = "left";
+    AddStringProperty(valueStaticStyle_, textAlign, textAlignLeft);
+    view = GetComponent();
+    if (view) {
+        UICheckBox *checkbox = reinterpret_cast<UICheckBox *>(view);
+        if (checkbox == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create the error type view");
+        } else {
+            HILOG_INFO(HILOG_MODULE_ACE, "ComponentInputAttributeTest15 passed");
+        }
+        EXPECT_FALSE(checkbox == nullptr);
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the textAlign in checkbox failed");
+        EXPECT_FALSE(true);
+    }
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentRadioAttributeTest01()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @steps:step1:set the type attribute radio
+     * @expected: create UIRadioButton
+     */
+    const char *type = "type";
+    const char *typeVal = "radio";
+    AddStringProperty(attrsObject_, type, typeVal);
+
+    /**
+     * @steps:step2:set the attribute checked true
+     * @expected:the state of radioButton is selected
+     */
+    const char *checked = "checked";
+    AddBoolProperty(attrsObject_, checked, true);
+    const char *tddName = "ComponentRadioAttributeTest01";
+    UIRadioButton *radio = ConvertView(tddName);
+    if (radio == nullptr || (radio->GetState() != UICheckBox::UICheckBoxState::SELECTED)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute checked false");
+        return;
+    }
+
+    /**
+     * @steps:step3:set the attribute checked false
+     * @expected:the state of radioButton is unselected
+     */
+    AddBoolProperty(attrsObject_, checked, false);
+    radio = ConvertView(tddName);
+    if (radio == nullptr || (radio->GetState() != UICheckBox::UICheckBoxState::UNSELECTED)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute checked false failed");
+        return;
+    }
+
+    /**
+     * @steps: step4:set the attribute checked aaaa
+     * @expected: the state of radio is unselected
+     */
+    const char *checkedVal = "aaaa";
+    AddStringProperty(attrsObject_, checked, checkedVal);
+    radio = ConvertView(tddName);
+    if (radio != nullptr && (radio->GetState() == UICheckBox::UICheckBoxState::UNSELECTED)) {
+        HILOG_INFO(HILOG_MODULE_ACE, "Component_Radio_Attribute_Test_01 passed");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the checked attribute aaaa failed");
+    }
+    EXPECT_TRUE(radio != nullptr && (radio->GetState() == UICheckBox::UICheckBoxState::UNSELECTED));
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentRadioStyleTest03()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @steps:step1:set the attribute type radio
+     */
+    const char *type = "type";
+    const char *typeVal = "radio";
+    AddStringProperty(attrsObject_, type, typeVal);
+
+    /**
+     * @steps: step2: set the radio border width 2
+     * @expected: the border width of radio is 2
+     */
+    const int borderWidthVal = 2;
+    const char *borderWidth = "borderWidth";
+    AddNumberProperty(valueStaticStyle_, borderWidth, borderWidthVal);
+    const char *tddName = "ComponentRadioStyleTest03";
+    UIRadioButton *radioButton = ConvertView(tddName);
+    if (radioButton != nullptr) {
+        Style style = radioButton->GetStyleConst();
+        if (style.borderWidth_ != borderWidthVal) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "set the border width failed");
+            return;
+        }
+    } else {
+        return;
+    }
+
+    /**
+     * @steps:step3: set the radius 100
+     * @expected: the radius of radioButton is 100
+     */
+    const char *radius = "borderRadius";
+    const int radiusVal = 100;
+    AddNumberProperty(valueStaticStyle_, radius, radiusVal);
+    radioButton = ConvertView(tddName);
+    if (radioButton != nullptr) {
+        Style style = radioButton->GetStyleConst();
+        if (style.borderRadius_ != radiusVal) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute radius failed");
+            return;
+        }
+    } else {
+        return;
+    }
+
+    /**
+     * @steps: step4: set the background color of radioButton red
+     * @expected: the background color of radiobutton is red
+     */
+    const int32_t redValue = 16711680;
+    const char *backgroundColor = "backgroundColor";
+    AddNumberProperty(valueStaticStyle_, backgroundColor, redValue);
+    radioButton = ConvertView(tddName);
+    if (radioButton != nullptr) {
+        Style style = radioButton->GetStyleConst();
+        if (!CompareColor(style.bgColor_, redValue)) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "set the background color failed");
+        } else {
+            HILOG_INFO(HILOG_MODULE_ACE, "Component_Radio_Style_Test_03 passed");
+        }
+        EXPECT_FALSE(!CompareColor(style.bgColor_, redValue));
+    } else {
+        return;
+    }
+    TDD_CASE_END();
+}
+
+void InputTddTest::ComponentRadioStyleTest04()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @steps:step1:set the attribute type radio
+     */
+    const char *type = "type";
+    const char *typeVal = "radio";
+    AddStringProperty(attrsObject_, type, typeVal);
+
+    /**
+     * @steps: step2: set the radio width 50
+     * @expected: the width of radio is 50
+     */
+    const int widthVal = 50;
+    const char *width = "width";
+    AddNumberProperty(valueStaticStyle_, width, widthVal);
+    const char *tddName = "ComponentRadioStyleTest04";
+    UIRadioButton *radioButton = ConvertView(tddName);
+    if (radioButton == nullptr || (radioButton->GetWidth() != widthVal)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the border width failed");
+        return;
+    }
+    /**
+     * @steps:step3: set the radiobutton height 50
+     * @expected: the height of radioButton is 50
+     */
+    const char *height = "height";
+    const int heightVal = 50;
+    AddNumberProperty(valueStaticStyle_, height, heightVal);
+    radioButton = ConvertView(tddName);
+    if (radioButton == nullptr || (radioButton->GetHeight() != heightVal)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the attribute height failed");
+        return;
+    }
+    /**
+     * @steps: step4: set the attribute id radio1
+     * @expected: the id of radioButton is radio1
+     */
+    const char *id = "id";
+    const char *idVal = "radio1";
+    AddStringProperty(attrsObject_, id, idVal);
+    radioButton = ConvertView(tddName);
+    if (radioButton == nullptr || (strcmp(radioButton->GetViewId(), idVal))) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the background color failed");
+        return;
+    }
+    /**
+     * @steps:step5:set the attribute visible false
+     * @expected: the visible of radiobutton is false
+     */
+    const char *show = "show";
+    AddBoolProperty(attrsObject_, show, false);
+    radioButton = ConvertView(tddName);
+    if (radioButton == nullptr || (!radioButton->IsVisible())) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Component_Radio_Style_Test_04 passed");
+    } else {
+        HILOG_INFO(HILOG_MODULE_ACE, "set the attribute visible false");
+    }
+    EXPECT_TRUE(radioButton == nullptr || (!radioButton->IsVisible()));
+    TDD_CASE_END();
+}
+
+void InputTddTest::RunTests()
+{
+    ComponentInputAttributeTest01();
+    ComponentInputAttributeTest02();
+    ComponentInputStyleTest04();
+    ComponentInputStyleTest05();
+    ComponentInputAttributeTest06();
+    ComponentInputAttributeTest07();
+    ComponentInputStyleTest08();
+    ComponentInputStyleTest09();
+    ComponentInputAttributeTest10();
+    ComponentInputStyleTest11();
+    ComponentInputStyleTest12();
+    ComponentInputAttributeTest13();
+    ComponentInputAttributeTest14();
+    ComponentInputAttributeTest15();
+    ComponentRadioAttributeTest01();
+    ComponentRadioStyleTest03();
+    ComponentRadioStyleTest04();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: Component_Input_Attribute_Test_01
+ * @tc.desc: test the attribute checked in checkbox is correct
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputAttr001, TestSize.Level1)
+{
+    InputTddTest::ComponentInputAttributeTest01();
+}
+
+/**
+ * @tc.name: Component_Input_Attribute_Test_02
+ * @tc.desc: test the attribute value
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputAttr002, TestSize.Level1)
+{
+    InputTddTest::ComponentInputAttributeTest02();
+}
+
+/**
+ * @tc.name: Component_Input_Attribute_Test_06
+ * @tc.desc: test the attribute checkbox
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputAttr006, TestSize.Level1)
+{
+    InputTddTest::ComponentInputAttributeTest06();
+}
+
+/**
+ * @tc.name: Component_Input_Attribute_Test_07
+ * @tc.desc: check the general attribute could work or not
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputAttr007, TestSize.Level1)
+{
+    InputTddTest::ComponentInputAttributeTest07();
+}
+
+/**
+ * @tc.name: Component_Input_Attribute_Test_10
+ * @tc.desc: check the general attribute of checkbox could work or not
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputAttr010, TestSize.Level1)
+{
+    InputTddTest::ComponentInputAttributeTest10();
+}
+
+/**
+ * @tc.name: Component_Input_Attribute_Test_13
+ * @tc.desc: test the attribute value in checkbox and the attribute checked in button
+ * @tc.type:FUNC
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputAttr013, TestSize.Level1)
+{
+    InputTddTest::ComponentInputAttributeTest13();
+}
+
+/**
+ * @tc.name: Component_Input_Attribute_Test_14
+ * @tc.desc: test the attribute type
+ * @tc.type:FUNC
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputAttr014, TestSize.Level1)
+{
+    InputTddTest::ComponentInputAttributeTest14();
+}
+
+/**
+ * @tc.name: Component_Input_Attribute_Test_15
+ * @tc.desc: when checkbox is created, fontSize, color,textAlign could work
+ * @tc.type:FUNC
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputAttr015, TestSize.Level1)
+{
+    InputTddTest::ComponentInputAttributeTest15();
+}
+
+/**
+ * @tc.name: Component_Input_Style_Test_04
+ * @tc.desc: test the style color
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputStyle004, TestSize.Level1)
+{
+    InputTddTest::ComponentInputStyleTest04();
+}
+
+/**
+ * @tc.name: Component_Input_Style_Test_05
+ * @tc.desc: test the style textAlign
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputStyle005, TestSize.Level1)
+{
+    InputTddTest::ComponentInputStyleTest05();
+}
+
+/**
+ * @tc.name: Component_Input_Style_Test_08
+ * @tc.desc: check the general style could work or not
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputStyle008, TestSize.Level1)
+{
+    InputTddTest::ComponentInputStyleTest08();
+}
+
+/**
+ * @tc.name: Component_Input_Style_Test_09
+ * @tc.desc: check the general style could work or not
+ * @tc.type:FUNC
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputStyle009, TestSize.Level1)
+{
+    InputTddTest::ComponentInputStyleTest09();
+}
+
+/**
+ * @tc.name: Component_Input_Style_Test_11
+ * @tc.desc: check the general style of checkbox could work or not
+ * @tc.type:FUNC
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputStyle011, TestSize.Level1)
+{
+    InputTddTest::ComponentInputStyleTest11();
+}
+
+/**
+ * @tc.name: Component_Input_Style_Test_12
+ * @tc.desc: check the general style of checkbox could work or not
+ * @tc.type:FUNC
+ * @tc.require: AR000DSEFK
+ */
+HWTEST_F(InputTddTest, inputStyle012, TestSize.Level1)
+{
+    InputTddTest::ComponentInputStyleTest12();
+}
+
+/**
+ * @tc.name: Component_Radio_Attribute_Test_01
+ * @tc.desc: test the attribute checked
+ * @tc.type:FUNC
+ * @tc.require: AR000E2TCH
+ */
+HWTEST_F(InputTddTest, radioAttr001, TestSize.Level1)
+{
+    InputTddTest::ComponentRadioAttributeTest01();
+}
+
+/**
+ * @tc.name: Component_Radio_Style_Test_03
+ * @tc.desc: test the common style
+ * @tc.type:FUNC
+ * @tc.require: AR000E2TCH
+ */
+HWTEST_F(InputTddTest, radioStyle003, TestSize.Level1)
+{
+    InputTddTest::ComponentRadioStyleTest03();
+}
+
+/**
+ * @tc.name: Component_Radio_Style_Test_04
+ * @tc.desc: test the common attribute
+ * @tc.type:FUNC
+ * @tc.require: AR000E2TCH
+ */
+HWTEST_F(InputTddTest, radioStyle004, TestSize.Level1)
+{
+    InputTddTest::ComponentRadioStyleTest04();
+}
+#endif
+}
+}
diff --git a/frameworks/src/core/components/test/unittest/common/input_tdd_test.h b/frameworks/src/core/components/test/unittest/common/input_tdd_test.h
new file mode 100755
index 0000000..75704bd
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/input_tdd_test.h
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_TEST_INPUT_H
+#define OHOS_ACELITE_TEST_INPUT_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "component_factory.h"
+#include "root_component_mock.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class InputTddTest : public testing::Test {
+#else
+class InputTddTest {
+#endif
+public:
+    InputTddTest();
+    ~InputTddTest(){};
+    void SetUp();
+    void TearDown();
+    void ComponentInputAttributeTest01();
+    void ComponentInputAttributeTest02();
+    void ComponentInputAttributeTest06();
+    void ComponentInputAttributeTest07();
+    void ComponentInputAttributeTest10();
+    void ComponentInputAttributeTest13();
+    void ComponentInputAttributeTest14();
+    void ComponentInputAttributeTest15();
+    void ComponentInputStyleTest04();
+    void ComponentInputStyleTest05();
+    void ComponentInputStyleTest08();
+    void ComponentInputStyleTest08Extra(int16_t right, int16_t top, int16_t bottom);
+    void ComponentInputStyleTest09();
+    void ComponentInputStyleTest11();
+    void ComponentInputStyleTest12();
+    void ComponentRadioAttributeTest01();
+    void ComponentRadioStyleTest03();
+    void ComponentRadioStyleTest04();
+    UIRadioButton *ConvertView(const char *name) const;
+    UIView *GetComponent() const;
+    bool CompareColor(ColorType color, uint32_t colorIntValue) const;
+    void AddBoolProperty(jerry_value_t object, const char *name, bool value) const;
+    void AddNumberProperty(jerry_value_t object, const char *name, const double value) const;
+    void AddStringProperty(jerry_value_t object, const char *name, const char *value) const;
+    void RunTests();
+
+    jerry_value_t globalObject_;
+    jerry_value_t attrsObject_;
+    jerry_value_t valueStaticStyle_;
+
+private:
+    RootComponentMock rootComponentMock_;
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_TEST_INPUT_H
diff --git a/frameworks/src/core/components/test/unittest/common/jsbundle_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/jsbundle_tdd_test.cpp
new file mode 100755
index 0000000..e2cdb82
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/jsbundle_tdd_test.cpp
@@ -0,0 +1,496 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "jsbundle_tdd_test.h"
+#include "component.h"
+#include "component_utils.h"
+#include "js_app_environment.h"
+#include "js_fwk_common.h"
+#include "ui_label.h"
+#include "ui_view_group.h"
+#include "wrapper/js.h"
+
+namespace OHOS {
+namespace ACELite {
+JsbundleTddTest::JsbundleTddTest() {}
+constexpr char FUNC_CREATE_ELEMENT[] = "_c";
+
+constexpr char CLASS_FLEXLAYOUT[] = "N4OHOS10FlexLayoutE";
+constexpr char CLASS_LABEL[] = "N4OHOS7UILabelE";
+
+constexpr char TAG_DIV[] = "div";
+constexpr char TAG_TEXT[] = "text";
+constexpr char ARG_ATTRS[] = "attrs";
+constexpr char ARG_STYLES[] = "staticStyle";
+constexpr char ARG_VALUE[] = "value";
+constexpr char ARG_WIDTH[] = "width";
+constexpr char ARG_HEIGHT[] = "height";
+constexpr char HELLO_MESSAGE[] = "message";
+
+constexpr uint8_t ARG_LENGTH_2 = 2;
+constexpr uint8_t ARG_LENGTH_3 = 3;
+constexpr uint8_t ATTR_VAL_WIDTH = 100;
+constexpr uint8_t ATTR_VAL_HEIGHT = 100;
+void JsbundleTddTest::SetUp()
+{
+    JsAppEnvironment *env = JsAppEnvironment::GetInstance();
+    env->InitJsFramework();
+}
+
+void JsbundleTddTest::TearDown()
+{
+    JsAppEnvironment *env = JsAppEnvironment::GetInstance();
+    env->Cleanup();
+}
+
+void JsbundleTddTest::CreateElementAttributeLength001()
+{
+    JSValue tag = JSString::Create(TAG_DIV);
+    JSValue args[1] = {tag};
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, 1);
+    if (JSUndefined::Is(el) || jerry_value_is_error(el)) {
+        printf("CreateElementAttributeLength001 fail\n");
+        EXPECT_FALSE(JSUndefined::Is(el) || jerry_value_is_error(el));
+    } else {
+        UIViewGroup *viewGroup = reinterpret_cast<UIViewGroup *>(ComponentUtils::GetViewFromBindingObject(el));
+        if (viewGroup == nullptr || strcmp(CLASS_FLEXLAYOUT, typeid(*viewGroup).name())) {
+            printf("CreateElementAttributeLength001 fail\n");
+        } else {
+            printf("CreateElementAttributeLength001 pass\n");
+        }
+        EXPECT_FALSE(viewGroup == nullptr || strcmp(CLASS_FLEXLAYOUT, typeid(*viewGroup).name()));
+    }
+    ReleaseJerryValue(el, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElementAttributeLength002()
+{
+    const char *message = HELLO_MESSAGE;
+    JSValue tag = JSString::Create(TAG_TEXT);
+    JSValue options = JSObject::Create();
+    JSValue attrs = JSObject::Create();
+    JSValue value = JSString::Create(message);
+    JSObject::Set(attrs, ARG_VALUE, value);
+    JSObject::Set(options, ARG_ATTRS, attrs);
+    JSValue args[ARG_LENGTH_2] = {tag, options};
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, ARG_LENGTH_2);
+    if (JSUndefined::Is(el) || jerry_value_is_error(el)) {
+        printf("CreateElementAttributeLength002 fail\n");
+        EXPECT_FALSE(JSUndefined::Is(el) || jerry_value_is_error(el));
+    } else {
+        Component *textComponent = ComponentUtils::GetComponentFromBindingObject(el);
+        if (textComponent != nullptr) {
+            textComponent->OnViewAttached();
+        }
+        UILabel *label = reinterpret_cast<UILabel *>(ComponentUtils::GetViewFromBindingObject(el));
+        if (label == nullptr || strcmp(CLASS_LABEL, typeid(*label).name()) || strcmp(message, label->GetText())) {
+            printf("CreateElementAttributeLength002 fail\n");
+        } else {
+            printf("CreateElementAttributeLength002 pass\n");
+        }
+        EXPECT_FALSE(label == nullptr || strcmp(CLASS_LABEL, typeid(*label).name()) ||
+                     (label->GetText() != nullptr && strcmp(message, label->GetText())));
+    }
+    ReleaseJerryValue(el, options, attrs, value, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElementAttributeLength003()
+{
+    const char *message = HELLO_MESSAGE;
+    JSValue textTag = JSString::Create(TAG_TEXT);
+    JSValue textOptions = JSObject::Create();
+    JSValue textAttrs = JSObject::Create();
+    JSValue textValue = JSString::Create(message);
+    JSObject::Set(textAttrs, ARG_VALUE, textValue);
+    JSObject::Set(textOptions, ARG_ATTRS, textAttrs);
+    JSValue textArgs[ARG_LENGTH_2] = {textTag, textOptions};
+    JSValue textEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, textArgs, ARG_LENGTH_2);
+
+    JSValue divTag = JSString::Create(TAG_DIV);
+    JSValue divChildren = JSArray::Create(0);
+    JSArray::Push(divChildren, textEl);
+    JSValue divArgs[ARG_LENGTH_2] = {divTag, divChildren};
+    JSValue divEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, divArgs, ARG_LENGTH_2);
+    if (JSUndefined::Is(divEl) || jerry_value_is_error(divEl)) {
+        printf("CreateElementAttributeLength003 fail\n");
+        EXPECT_FALSE(JSUndefined::Is(divEl) || jerry_value_is_error(divEl));
+    } else {
+        Component *textComponent = ComponentUtils::GetComponentFromBindingObject(textEl);
+        Component *divComponent = ComponentUtils::GetComponentFromBindingObject(divEl);
+        UIViewGroup *viewGroup = reinterpret_cast<UIViewGroup *>(ComponentUtils::GetViewFromBindingObject(divEl));
+        if (textComponent == nullptr || divComponent == nullptr ||
+            viewGroup == nullptr || strcmp(CLASS_FLEXLAYOUT, typeid(*viewGroup).name())) {
+            printf("CreateElementAttributeLength003 fail\n");
+            EXPECT_FALSE(viewGroup == nullptr || strcmp(CLASS_FLEXLAYOUT, typeid(*viewGroup).name()));
+        } else {
+            ConstrainedParameter divContentParameter = {ATTR_VAL_WIDTH, ATTR_VAL_HEIGHT};
+            Component::BuildViewTree(textComponent, divComponent, divContentParameter);
+            UILabel *label = reinterpret_cast<UILabel *>(viewGroup->GetChildrenHead());
+            EXPECT_FALSE(label == nullptr || strcmp(CLASS_LABEL, typeid(*label).name()) ||
+                         (label->GetText() != nullptr && strcmp(message, label->GetText())));
+        }
+    }
+    ReleaseJerryValue(divEl, divChildren, divTag, textEl, textOptions, textAttrs, textValue, textTag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElementAttributeLength004()
+{
+    const char *message = HELLO_MESSAGE;
+    JSValue textTag = JSString::Create(TAG_TEXT);
+    JSValue textOptions = JSObject::Create();
+    JSValue textAttrs = JSObject::Create();
+    JSValue textValue = JSString::Create(message);
+    JSObject::Set(textAttrs, ARG_VALUE, textValue);
+    JSObject::Set(textOptions, ARG_ATTRS, textAttrs);
+    JSValue textArgs[ARG_LENGTH_2] = {textTag, textOptions};
+    JSValue textEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, textArgs, ARG_LENGTH_2);
+
+    JSValue divTag = JSString::Create(TAG_DIV);
+    JSValue divOptions = JSObject::Create();
+    JSValue divStyles = JSObject::Create();
+    JSValue divWidth = JSNumber::Create(ATTR_VAL_WIDTH);
+    JSValue divHeight = JSNumber::Create(ATTR_VAL_HEIGHT);
+    JSObject::Set(divStyles, ARG_WIDTH, divWidth);
+    JSObject::Set(divStyles, ARG_HEIGHT, divHeight);
+    JSObject::Set(divOptions, ARG_STYLES, divStyles);
+    JSValue divChildren = JSArray::Create(0);
+    JSArray::Push(divChildren, textEl);
+    JSValue divArgs[ARG_LENGTH_3] = {divTag, divOptions, divChildren};
+    JSValue divEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, divArgs, ARG_LENGTH_3);
+    if (JSUndefined::Is(divEl) || jerry_value_is_error(divEl)) {
+        printf("CreateElementAttributeLength004 fail\n");
+        EXPECT_FALSE(JSUndefined::Is(divEl) || jerry_value_is_error(divEl));
+    } else {
+        Component *textComponent = ComponentUtils::GetComponentFromBindingObject(textEl);
+        Component *divComponent = ComponentUtils::GetComponentFromBindingObject(divEl);
+        UIViewGroup *viewGroup = reinterpret_cast<UIViewGroup *>(ComponentUtils::GetViewFromBindingObject(divEl));
+        if (textComponent == nullptr || divComponent == nullptr ||
+            viewGroup == nullptr || strcmp(CLASS_FLEXLAYOUT, typeid(*viewGroup).name())) {
+            printf("CreateElementAttributeLength004 fail\n");
+            EXPECT_FALSE(viewGroup == nullptr || strcmp(CLASS_FLEXLAYOUT, typeid(*viewGroup).name()));
+        } else {
+            ConstrainedParameter divContentParameter = {ATTR_VAL_WIDTH, ATTR_VAL_HEIGHT};
+            Component::BuildViewTree(textComponent, divComponent, divContentParameter);
+            UILabel *label = reinterpret_cast<UILabel *>(viewGroup->GetChildrenHead());
+            if (label == nullptr || strcmp(CLASS_LABEL, typeid(*label).name()) || strcmp(message, label->GetText())) {
+                printf("CreateElementAttributeLength004 fail\n");
+            } else {
+                printf("CreateElementAttributeLength004 pass\n");
+            }
+            EXPECT_FALSE(label == nullptr || strcmp(CLASS_LABEL, typeid(*label).name()) ||
+                         ((label->GetText() != nullptr) && (strcmp(message, label->GetText()))));
+        }
+    }
+    ReleaseJerryValue(divEl, divChildren, divOptions, divStyles, divWidth, divHeight, divTag, textEl, textOptions,
+                      textAttrs, textValue, textTag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElementTagValidation005()
+{
+    JSValue tag = JSNumber::Create(1);
+    JSValue args[1] = {tag};
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, 1);
+    if (!JSUndefined::Is(el)) {
+        printf("CreateElementTagValidation005 fail\n");
+    } else {
+        printf("CreateElementTagValidation005 pass\n");
+    }
+    EXPECT_TRUE(JSUndefined::Is(el));
+    ReleaseJerryValue(el, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElementTagValidation006()
+{
+    JSValue tag = JSString::Create("customized-component");
+    JSValue args[1] = {tag};
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, 1);
+    if (!JSUndefined::Is(el)) {
+        printf("CreateElementTagValidation006 fail\n");
+    } else {
+        printf("CreateElementTagValidation006 pass\n");
+    }
+    EXPECT_TRUE(JSUndefined::Is(el));
+    ReleaseJerryValue(el, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElementTagValidation007()
+{
+    JSValue tag = JSString::Create(TAG_DIV);
+    JSValue args[1] = {tag};
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, 1);
+    if (JSUndefined::Is(el)) {
+        printf("CreateElementTagValidation007 fail\n");
+    } else {
+        printf("CreateElementTagValidation007 pass\n");
+    }
+    EXPECT_FALSE(JSUndefined::Is(el));
+    ReleaseJerryValue(el, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElement2ndAttributeValidation008()
+{
+    JSValue tag = JSString::Create(TAG_TEXT);
+    JSValue invalidOptions = JSNumber::Create(1);
+    JSValue args[ARG_LENGTH_2] = {tag, invalidOptions};
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, ARG_LENGTH_2);
+    if (JSUndefined::Is(el)) {
+        printf("CreateElement2ndAttributeValidation008 fail\n");
+    } else {
+        printf("CreateElement2ndAttributeValidation008 pass\n");
+    }
+    EXPECT_FALSE(JSUndefined::Is(el));
+    ReleaseJerryValue(el, invalidOptions, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElement2ndAttributeValidation009()
+{
+    JSValue tag = JSString::Create(TAG_TEXT);
+    JSValue options = JSObject::Create();
+    JSValue attrs = JSObject::Create();
+    JSValue value = JSString::Create(HELLO_MESSAGE);
+    JSObject::Set(attrs, ARG_VALUE, value);
+    JSValue args[ARG_LENGTH_2] = {tag, options};
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, ARG_LENGTH_2);
+    if (JSUndefined::Is(el)) {
+        printf("CreateElement2ndAttributeValidation009 fail\n");
+    } else {
+        printf("CreateElement2ndAttributeValidation009 pass\n");
+    }
+    EXPECT_FALSE(JSUndefined::Is(el));
+    ReleaseJerryValue(el, options, attrs, value, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElement2ndAttributeValidation010()
+{
+    JSValue tag = JSString::Create(TAG_TEXT);
+    JSValue children = JSArray::Create(0);
+    JSValue args[ARG_LENGTH_2] = {tag, children};
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, ARG_LENGTH_2);
+    if (JSUndefined::Is(el)) {
+        printf("CreateElement2ndAttributeValidation010 fail\n");
+    } else {
+        printf("CreateElement2ndAttributeValidation010 pass\n");
+    }
+    EXPECT_FALSE(JSUndefined::Is(el));
+    ReleaseJerryValue(el, children, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElement2ndAttributeValidation011()
+{
+    JSValue textTag = JSString::Create(TAG_TEXT);
+    JSValue textArgs[1] = {textTag};
+    JSValue textEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, textArgs, 1);
+
+    JSValue divTag = JSString::Create(TAG_DIV);
+    JSValue divChildren = JSArray::Create(0);
+    JSArray::Push(divChildren, textEl);
+    JSValue divArgs[ARG_LENGTH_2] = {divTag, divChildren};
+    JSValue divEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, divArgs, ARG_LENGTH_2);
+    if (JSUndefined::Is(divEl)) {
+        printf("CreateElement2ndAttributeValidation011 fail\n");
+    } else {
+        printf("CreateElement2ndAttributeValidation011 pass\n");
+    }
+    EXPECT_FALSE(JSUndefined::Is(divEl));
+    ReleaseJerryValue(divEl, divChildren, divTag, textEl, textTag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElementChildrenValidation012()
+{
+    JSValue tag = JSString::Create(TAG_DIV);
+    JSValue options = JSObject::Create();
+    JSValue children = JSArray::Create(0);
+    JSValue args[ARG_LENGTH_3] = {tag, options, children};
+
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, ARG_LENGTH_3);
+    if (JSUndefined::Is(el)) {
+        printf("CreateElementChildrenValidation012 fail\n");
+    } else {
+        printf("CreateElementChildrenValidation012 pass\n");
+    }
+    EXPECT_FALSE(JSUndefined::Is(el));
+    ReleaseJerryValue(el, children, options, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::CreateElementChildrenValidation013()
+{
+    JSValue tag = JSString::Create(TAG_DIV);
+    JSValue options = JSObject::Create();
+    JSValue children = JSArray::Create(0);
+    JSValue number = JSNumber::Create(1);
+    JSArray::Push(children, number);
+    JSValue args[ARG_LENGTH_3] = {tag, options, children};
+    JSValue el = JSGlobal::Call(FUNC_CREATE_ELEMENT, args, ARG_LENGTH_3);
+    if (JSUndefined::Is(el)) {
+        printf("CreateElementChildrenValidation013 fail\n");
+    } else {
+        printf("CreateElementChildrenValidation013 pass\n");
+    }
+    EXPECT_FALSE(JSUndefined::Is(el));
+    ReleaseJerryValue(el, children, number, options, tag, VA_ARG_END_FLAG);
+}
+
+void JsbundleTddTest::RunTests()
+{
+    TDD_CASE_BEGIN();
+    CreateElementAttributeLength001();
+    CreateElementAttributeLength002();
+    CreateElementAttributeLength003();
+    CreateElementAttributeLength004();
+    CreateElementTagValidation005();
+    CreateElementTagValidation006();
+    CreateElementTagValidation007();
+    CreateElement2ndAttributeValidation008();
+    CreateElement2ndAttributeValidation009();
+    CreateElement2ndAttributeValidation010();
+    CreateElement2ndAttributeValidation011();
+    CreateElementChildrenValidation012();
+    CreateElementChildrenValidation013();
+    TDD_CASE_END();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: CreateElement_Attribute_Length_001
+ * @tc.desc: Verify the _c function support analysising UIView attribute.
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, attrlen001, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElementAttributeLength001();
+}
+
+/**
+ * @tc.name: CreateElement_Attribute_Length_002
+ * @tc.desc: Verify the _c function support analysising UILabel attribute.
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, attrlen002, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElementAttributeLength002();
+}
+
+/**
+ * @tc.name: CreateElement_Attribute_Length_003
+ * @tc.desc: Verify the _c function support analysising simple UIViewGroup attribute.
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, attrlen003, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElementAttributeLength003();
+}
+
+/**
+ * @tc.name: CreateElement_Attribute_Length_004
+ * @tc.desc: Verify the _c function support analysising complex UIViewGroup attribute.
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, attrlen004, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElementAttributeLength004();
+}
+
+/**
+ * @tc.name: CreateElement_Tag_Validation_005
+ * @tc.desc: Verify the _c function support handling error parameter(-1).
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, tagViali005, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElementTagValidation005();
+}
+
+/**
+ * @tc.name: CreateElement_Tag_Validation_006
+ * @tc.desc: Verify the _c function support handling error parameter('customized-component').
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, tagViali006, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElementTagValidation006();
+}
+
+/**
+ * @tc.name: CreateElement_Tag_Validation_007
+ * @tc.desc: Verify the _c function support handling legal parameter('div').
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, tagViali007, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElementTagValidation007();
+}
+
+/**
+ * @tc.name: CreateElement_2ndAttribute_Validation_008
+ * @tc.desc: Verify the _c function support handling legal parameter('text', 1).
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, attrVali008, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElement2ndAttributeValidation008();
+}
+
+/**
+ * @tc.name: CreateElement_2ndAttribute_Validation_009
+ * @tc.desc: Verify the _c function support handling legal parameter('text', { attrs: { value: 'Hello world' } }).
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, attrVali009, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElement2ndAttributeValidation009();
+}
+
+/**
+ * @tc.name: CreateElement_2ndAttribute_Validation_010
+ * @tc.desc: Verify the _c function support handling legal parameter('text', []).
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, attrVali010, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElement2ndAttributeValidation010();
+}
+
+/**
+ * @tc.name: CreateElement_2ndAttribute_Validation_011
+ * @tc.desc: Verify the _c function support handling legal parameter('div', [_c('text')]).
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, attrVali011, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElement2ndAttributeValidation011();
+}
+
+/**
+ * @tc.name: CreateElement_Children_Validation_012
+ * @tc.desc: Verify the _c function support handling legal parameter('div', {}, []).
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, ChildVali012, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElementChildrenValidation012();
+}
+
+/**
+ * @tc.name: CreateElement_Children_Validation_013
+ * @tc.desc: Verify the _c function support handling legal parameter('div', {}, [1]).
+ * @tc.require: AR000DT0D4
+ */
+HWTEST_F(JsbundleTddTest, ChildVali013, TestSize.Level1)
+{
+    JsbundleTddTest::CreateElementChildrenValidation013();
+}
+#endif
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/jsbundle_tdd_test.h b/frameworks/src/core/components/test/unittest/common/jsbundle_tdd_test.h
new file mode 100755
index 0000000..7530aba
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/jsbundle_tdd_test.h
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_TEST_JSBUNDLE_H
+#define OHOS_ACELITE_TEST_JSBUNDLE_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class JsbundleTddTest : public testing::Test {
+#else
+class JsbundleTddTest {
+#endif
+public:
+    JsbundleTddTest();
+    ~JsbundleTddTest(){};
+
+    void SetUp();
+    void TearDown();
+    void CreateElementAttributeLength001();
+    void CreateElementAttributeLength002();
+    void CreateElementAttributeLength003();
+    void CreateElementAttributeLength004();
+    void CreateElementTagValidation005();
+    void CreateElementTagValidation006();
+    void CreateElementTagValidation007();
+    void CreateElement2ndAttributeValidation008();
+    void CreateElement2ndAttributeValidation009();
+    void CreateElement2ndAttributeValidation010();
+    void CreateElement2ndAttributeValidation011();
+    void CreateElementChildrenValidation012();
+    void CreateElementChildrenValidation013();
+    void RunTests();
+};
+} // namespace ACELite
+} // namesapce OHOS
+
+#endif // OHOS_ACELITE_TEST_JSBUNDLE_H
diff --git a/frameworks/src/core/components/test/unittest/common/list_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/list_tdd_test.cpp
new file mode 100755
index 0000000..192a73e
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/list_tdd_test.cpp
@@ -0,0 +1,270 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "list_tdd_test.h"
+#include "acelite_config.h"
+#include "component_factory.h"
+#include "js_app_environment.h"
+
+namespace OHOS {
+namespace ACELite {
+ListTddTest::ListTddTest()
+    : objGlob(UNDEFINED),
+      objAttrs(UNDEFINED),
+      objStaticStyle(UNDEFINED){}
+void ListTddTest::SetUp()
+{
+    JsAppEnvironment* appJsEnv = JsAppEnvironment::GetInstance();
+    appJsEnv->InitJsFramework();
+
+    objGlob = jerry_get_global_object();
+
+    jerry_value_t keyAttrs = jerry_create_string((const jerry_char_t*)"attrs");
+    objAttrs = jerry_create_object();
+    jerry_set_property(objGlob, keyAttrs, objAttrs);
+    jerry_release_value(keyAttrs);
+
+    jerry_value_t keyStaticStyle = jerry_create_string(reinterpret_cast<const jerry_char_t *>("staticStyle"));
+    objStaticStyle = jerry_create_object();
+    jerry_set_property(objGlob, keyStaticStyle, objStaticStyle);
+    jerry_release_value(keyStaticStyle);
+}
+
+void ListTddTest::TearDown()
+{
+    JsAppContext::GetInstance()->ReleaseStyles();
+}
+
+void ListTddTest::ListTest001()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. setting flex-direction style = row.
+     */
+    jerry_value_t keyDirection = jerry_create_string((const jerry_char_t*)"flexDirection");
+    jerry_value_t valueDirection = jerry_create_string((const jerry_char_t*)"row");
+    jerry_set_property(objStaticStyle, keyDirection, valueDirection);
+
+    jerry_value_t children = jerry_create_null();
+    uint16_t componentNameId = KeyParser::ParseKeyId("list", strlen("list"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+
+    component->Render();
+
+    UIViewGroup* listView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+
+#ifdef TDD_ASSERTIONS
+    char className[] = "N4OHOS6UIListE";
+#else
+    char className[] = "class OHOS::UIList";
+#endif
+
+    static constexpr uint8_t horizontal = 0;
+
+    /**
+     * @tc.expected: step1. get flex-direction style = row.
+     */
+    if (strcmp(className, typeid(*listView).name()) == 0 &&
+        reinterpret_cast<UIList *>(listView)->GetDirection() == horizontal) {
+        printf("[Test Case] [ListTest001] PASSED\n");
+    } else {
+        printf("[Test Case] [ListTest001] FAILED\n");
+    }
+    EXPECT_TRUE(strcmp(className, typeid(*listView).name()) == 0 &&
+        reinterpret_cast<UIList *>(listView)->GetDirection() == horizontal);
+    delete (listView);
+    listView = nullptr;
+    TDD_CASE_END();
+}
+
+void ListTddTest::ListTest002()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. setting flex-direction style = column.
+     */
+    jerry_value_t keyDirection = jerry_create_string((const jerry_char_t*)"flexDirection");
+    jerry_value_t valueDirection = jerry_create_string((const jerry_char_t*)"column");
+    jerry_set_property(objStaticStyle, keyDirection, valueDirection);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("list", strlen("list"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+
+    component->Render();
+
+    UIViewGroup* listView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+#ifdef TDD_ASSERTIONS
+    char className[] = "N4OHOS6UIListE";
+#else
+    char className[] = "class OHOS::UIList";
+#endif
+
+    static constexpr uint8_t vertical = 1;
+
+    /**
+     * @tc.expected: step1. get flex-direction style = column.
+     */
+    if (strcmp(className, typeid(*listView).name()) == 0 &&
+        reinterpret_cast<UIList *>(listView)->GetDirection() == vertical) {
+        printf("[Test Case] [ListTest002] PASSED\n");
+    } else {
+        printf("[Test Case] [ListTest002] FAILED\n");
+    }
+    EXPECT_TRUE(strcmp(className, typeid(*listView).name()) == 0 &&
+        reinterpret_cast<UIList *>(listView)->GetDirection() == vertical);
+    delete (listView);
+    listView = nullptr;
+    TDD_CASE_END();
+}
+
+void ListTddTest::ListTest003()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. setting not exist flex-direction style = abcd.
+     */
+    jerry_value_t keyDirection = jerry_create_string((const jerry_char_t*)"flexDirection");
+    jerry_value_t valueDirection = jerry_create_string((const jerry_char_t*)"abcd");
+    jerry_set_property(objStaticStyle, keyDirection, valueDirection);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("list", strlen("list"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+
+    component->Render();
+
+    UIViewGroup* listView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+
+#ifdef TDD_ASSERTIONS
+    char className[] = "N4OHOS6UIListE";
+#else
+    char className[] = "class OHOS::UIList";
+#endif
+
+    static constexpr uint8_t vertical = 1;
+
+    /**
+     * @tc.expected: step1. get flex-direction style = column.
+     */
+    if (strcmp(className, typeid(*listView).name()) == 0 &&
+        reinterpret_cast<UIList *>(listView)->GetDirection() == vertical) {
+        printf("[Test Case] [ListTest003] PASSED\n");
+    } else {
+        printf("[Test Case] [ListTest003] FAILED\n");
+    }
+    EXPECT_TRUE(strcmp(className, typeid(*listView).name()) == 0 &&
+        reinterpret_cast<UIList *>(listView)->GetDirection() == vertical);
+    delete (listView);
+    listView = nullptr;
+    TDD_CASE_END();
+}
+
+void ListTddTest::ListTest004()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. not setting flex-direction style.
+     */
+    jerry_value_t keyWidth = jerry_create_string((const jerry_char_t*)"width");
+    jerry_value_t valueWidth = jerry_create_string((const jerry_char_t*)"240");
+    jerry_set_property(objStaticStyle, keyWidth, valueWidth);
+
+    jerry_value_t children = jerry_create_null();
+
+    uint16_t componentNameId = KeyParser::ParseKeyId("list", strlen("list"));
+    Component* component = ComponentFactory::CreateComponent(componentNameId, objGlob, children);
+
+    component->Render();
+
+    UIViewGroup* listView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+
+#ifdef TDD_ASSERTIONS
+    char className[] = "N4OHOS6UIListE";
+#else
+    char className[] = "class OHOS::UIList";
+#endif
+
+    static constexpr uint8_t vertical = 1;
+
+    /**
+     * @tc.expected: step1. get flex-direction style = column.
+     */
+    if (strcmp(className, typeid(*listView).name()) == 0 &&
+        reinterpret_cast<UIList *>(listView)->GetDirection() == vertical) {
+        printf("[Test Case] [ListTest004] PASSED\n");
+    } else {
+        printf("[Test Case] [ListTest004] FAILED\n");
+    }
+    EXPECT_TRUE(strcmp(className, typeid(*listView).name()) == 0 &&
+        reinterpret_cast<UIList *>(listView)->GetDirection() == vertical);
+    delete (listView);
+    listView = nullptr;
+    TDD_CASE_END();
+}
+
+void ListTddTest::RunTests()
+{
+    ListTest001();
+    ListTest002();
+    ListTest003();
+    ListTest004();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: Component_List_Create_Test_001
+ * @tc.desc: Verify list component support setting flex-direction style = row.
+ * @tc.require: AR000DSEFB
+ */
+HWTEST_F(ListTddTest, ListTest001, TestSize.Level1)
+{
+    ListTddTest::ListTest001();
+}
+
+/**
+ * @tc.name: Component_List_Create_Test_002
+ * @tc.desc: Verify list component support setting flex-direction style = column.
+ * @tc.require: AR000DSEFB
+ */
+HWTEST_F(ListTddTest, ListTest002, TestSize.Level1)
+{
+    ListTddTest::ListTest002();
+}
+
+/**
+ * @tc.name: Component_List_Create_Test_003
+ * @tc.desc: Verify list component support restore the default flex-direction=column if setting not exist type.
+ * @tc.require: AR000DSEFB
+ */
+HWTEST_F(ListTddTest, ListTest003, TestSize.Level1)
+{
+    ListTddTest::ListTest003();
+}
+
+/**
+ * @tc.name: Component_List_Create_Test_004
+ * @tc.desc: Verify list component support restore the default flex-direction=column if not setting it.
+ * @tc.require: AR000DSEFB
+ */
+HWTEST_F(ListTddTest, ListTest004, TestSize.Level1)
+{
+    ListTddTest::ListTest004();
+}
+#endif
+}
+}
diff --git a/frameworks/src/core/components/test/unittest/common/list_tdd_test.h b/frameworks/src/core/components/test/unittest/common/list_tdd_test.h
new file mode 100755
index 0000000..e77adad
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/list_tdd_test.h
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_TEST_LIST_H
+#define OHOS_ACELITE_TEST_LIST_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+#include "component_factory.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class ListTddTest : public testing::Test {
+#else
+class ListTddTest {
+#endif
+public:
+    ListTddTest();
+    ~ListTddTest(){};
+    void SetUp();
+    void TearDown();
+    void ListTest001();
+    void ListTest002();
+    void ListTest003();
+    void ListTest004();
+    void RunTests();
+
+    jerry_value_t objGlob;
+    jerry_value_t objAttrs;
+    jerry_value_t objStaticStyle;
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_TEST_LIST_H
diff --git a/frameworks/src/core/components/test/unittest/common/marquee_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/marquee_tdd_test.cpp
new file mode 100755
index 0000000..e4df20b
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/marquee_tdd_test.cpp
@@ -0,0 +1,460 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "marquee_tdd_test.h"
+#include "marquee_component.h"
+#include "themes/theme.h"
+#include "themes/theme_manager.h"
+
+namespace OHOS {
+namespace ACELite {
+void MarqueeTddTest::ComponentMarqueeStyleSetTest006()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set color = 0
+     */
+    const char *color = "color";
+    jerry_value_t key = jerry_create_string(reinterpret_cast<const jerry_char_t *>(color));
+    jerry_value_t value = jerry_create_number(0);
+    jerry_set_property(styleObj_, key, value);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIView *marqueeView = component->GetComponentRootView();
+
+    /**
+     * @tc.expected: step2. get color = 0
+     */
+    ColorType colorRGB = GetRGBColor(0);
+    ColorType colorRGBSet;
+    colorRGBSet.full = marqueeView->GetStyle(STYLE_TEXT_COLOR);
+    if (colorRGB.red != colorRGBSet.red || colorRGB.green != colorRGBSet.green || colorRGB.blue != colorRGBSet.blue ||
+        colorRGB.full != colorRGBSet.full) {
+        printf("Component_Marquee_StyleSet_Test_006 fail\n");
+    } else {
+        printf("Component_Marquee_StyleSet_Test_006 pass\n");
+    }
+    EXPECT_TRUE((colorRGB.red == colorRGBSet.red) && (colorRGB.green == colorRGBSet.green) &&
+                (colorRGB.blue == colorRGBSet.blue) && (colorRGB.full == colorRGBSet.full));
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.expected: step3. set color = '0'
+     */
+    const char *colorValue = "0";
+    value = jerry_create_string(reinterpret_cast<const jerry_char_t *>(colorValue));
+    jerry_set_property(styleObj_, key, value);
+    component = GetRenderedComponent(componentNameId_);
+    marqueeView = component->GetComponentRootView();
+    jerry_release_value(key);
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void MarqueeTddTest::ComponentMarqueeStyleSetTest007()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set color = 16777215
+     */
+    const int colorSize = 16777215;
+    const char color[] = "color";
+    jerry_value_t key = jerry_create_string(reinterpret_cast<const jerry_char_t *>(color));
+    jerry_value_t value = jerry_create_number(colorSize);
+    jerry_set_property(styleObj_, key, value);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIView *marqueeView = component->GetComponentRootView();
+
+    /**
+     * @tc.expected: step2. get color = 16777215
+     */
+    ColorType colorRGB = GetRGBColor(colorSize);
+    ColorType colorRGBSet;
+    colorRGBSet.full = marqueeView->GetStyle(STYLE_TEXT_COLOR);
+    if (colorRGB.red != colorRGBSet.red || colorRGB.green != colorRGBSet.green || colorRGB.blue != colorRGBSet.blue ||
+        colorRGB.full != colorRGBSet.full) {
+        printf("Component_Marquee_StyleSet_Test_007 fail\n");
+    } else {
+        printf("Component_Marquee_StyleSet_Test_007 pass\n");
+    }
+    EXPECT_TRUE((colorRGB.red == colorRGBSet.red) && (colorRGB.green == colorRGBSet.green) &&
+                (colorRGB.blue == colorRGBSet.blue) && (colorRGB.full == colorRGBSet.full));
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.expected: step3. set color = '16777215'
+     */
+    const char *colorVal = "16777215";
+    value = jerry_create_string(reinterpret_cast<const jerry_char_t *>(colorVal));
+    jerry_set_property(styleObj_, key, value);
+    component = GetRenderedComponent(componentNameId_);
+    marqueeView = component->GetComponentRootView();
+    jerry_release_value(key);
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void MarqueeTddTest::ComponentMarqueeStyleSetTest008()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set color = 65280
+     */
+    const int colorSize = 65280;
+    const char color[] = "color";
+    jerry_value_t key = jerry_create_string(reinterpret_cast<const jerry_char_t *>(color));
+    jerry_value_t value = jerry_create_number(colorSize);
+    jerry_set_property(styleObj_, key, value);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIView *marqueeView = component->GetComponentRootView();
+
+    /**
+     * @tc.expected: step2. get color = 65280
+     */
+    ColorType colorRGB = GetRGBColor(colorSize);
+    ColorType colorRGBSet;
+    colorRGBSet.full = marqueeView->GetStyle(STYLE_TEXT_COLOR);
+    if (colorRGB.red != colorRGBSet.red || colorRGB.green != colorRGBSet.green || colorRGB.blue != colorRGBSet.blue ||
+        colorRGB.full != colorRGBSet.full) {
+        printf("Component_Marquee_StyleSet_Test_008 fail\n");
+    } else {
+        printf("Component_Marquee_StyleSet_Test_008 pass\n");
+    }
+    EXPECT_TRUE((colorRGB.red == colorRGBSet.red) && (colorRGB.green == colorRGBSet.green) &&
+                (colorRGB.blue == colorRGBSet.blue) && (colorRGB.full == colorRGBSet.full));
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.expected: step3. set color = '65280'
+     */
+    const char *colorVal = "65280";
+    value = jerry_create_string(reinterpret_cast<const jerry_char_t *>(colorVal));
+    jerry_set_property(styleObj_, key, value);
+    component = GetRenderedComponent(componentNameId_);
+    marqueeView = component->GetComponentRootView();
+    jerry_release_value(key);
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void MarqueeTddTest::ComponentMarqueeStyleSetTest009()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set color = -1
+     */
+    const char *color = "color";
+    jerry_value_t key = jerry_create_string(reinterpret_cast<const jerry_char_t *>(color));
+    int colorVal = -1;
+    jerry_value_t value = jerry_create_number(colorVal);
+    jerry_set_property(styleObj_, key, value);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIView *marqueeView = component->GetComponentRootView();
+
+    /**
+     * @tc.expected: step2. get color = -1
+     */
+    ColorType colorRGB = GetRGBColor(-1);
+    ColorType colorRGBSet;
+    colorRGBSet.full = marqueeView->GetStyle(STYLE_TEXT_COLOR);
+    if (colorRGB.red != colorRGBSet.red || colorRGB.green != colorRGBSet.green || colorRGB.blue != colorRGBSet.blue ||
+        colorRGB.full != colorRGBSet.full) {
+        printf("Component_Marquee_StyleSet_Test_009 fail\n");
+    } else {
+        printf("Component_Marquee_StyleSet_Test_009 pass\n");
+    }
+    EXPECT_TRUE((colorRGB.red == colorRGBSet.red) && (colorRGB.green == colorRGBSet.green) &&
+                (colorRGB.blue == colorRGBSet.blue) && (colorRGB.full == colorRGBSet.full));
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.expected: step3. set color = '-1'
+     */
+    const char *strVal = "-1";
+    value = jerry_create_string(reinterpret_cast<const jerry_char_t *>(strVal));
+    jerry_set_property(styleObj_, key, value);
+    component = GetRenderedComponent(componentNameId_);
+    marqueeView = component->GetComponentRootView();
+    jerry_release_value(key);
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void MarqueeTddTest::ComponentMarqueeStyleSetTest010()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set color = 16777216
+     */
+    const int colorSize = 16777216;
+    const char *color = "color";
+    jerry_value_t key = jerry_create_string(reinterpret_cast<const jerry_char_t *>(color));
+    jerry_value_t value = jerry_create_number(colorSize);
+    jerry_set_property(styleObj_, key, value);
+    Component *component = GetRenderedComponent(componentNameId_);
+    UIView *marqueeView = component->GetComponentRootView();
+
+    /**
+     * @tc.expected: step2. get color = 16777216
+     */
+    ColorType colorRGB = GetRGBColor(colorSize);
+    ColorType colorRGBSet;
+    colorRGBSet.full = marqueeView->GetStyle(STYLE_TEXT_COLOR);
+    if (colorRGB.red != colorRGBSet.red || colorRGB.green != colorRGBSet.green || colorRGB.blue != colorRGBSet.blue ||
+        colorRGB.full != colorRGBSet.full) {
+        printf("Component_Marquee_StyleSet_Test_010 fail\n");
+    } else {
+        printf("Component_Marquee_StyleSet_Test_010 pass\n");
+    }
+    EXPECT_TRUE((colorRGB.red == colorRGBSet.red) && (colorRGB.green == colorRGBSet.green) &&
+                (colorRGB.blue == colorRGBSet.blue) && (colorRGB.full == colorRGBSet.full));
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.expected: step3. set color = '16777216'
+     */
+    const char *strVal = "16777216";
+    value = jerry_create_string(reinterpret_cast<const jerry_char_t *>(strVal));
+    jerry_set_property(styleObj_, key, value);
+    component = GetRenderedComponent(componentNameId_);
+    marqueeView = component->GetComponentRootView();
+    jerry_release_value(key);
+    jerry_release_value(value);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void MarqueeTddTest::ComponentMarqueeStyleSetTest011()
+{
+    TDD_CASE_BEGIN();
+    const char *value = "value";
+    const char *textVal = "hello world";
+    jerry_value_t textKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(value));
+    jerry_value_t textValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(textVal));
+    jerry_release_value(jerry_set_property(attrsObj_, textKey, textValue));
+
+    /**
+     * @tc.steps: step1. set font size = 30
+     */
+    const int initFontSize = 30;
+    const char *fontSizeName = "fontSize";
+    jerry_value_t key = jerry_create_string(reinterpret_cast<const jerry_char_t *>(fontSizeName));
+    jerry_value_t fontSizeVal = jerry_create_number(initFontSize);
+    jerry_release_value(jerry_set_property(styleObj_, key, fontSizeVal));
+
+    Component *component = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    UILabel *uiLabel = reinterpret_cast<UILabel *>(component->GetComponentRootView());
+    /**
+     * @tc.expected: step2. get font size = 16
+     */
+    uint16_t targetFontSize = 16;
+    uint16_t fontSize = uiLabel->GetFontId();
+    if (targetFontSize == fontSize) {
+        printf("Component_Marquee_StyleSet_Test_011 pass\n");
+    } else {
+        printf("Component_Marquee_StyleSet_Test_011 fail\n");
+    }
+    EXPECT_TRUE(targetFontSize == fontSize);
+
+    jerry_release_value(textKey);
+    jerry_release_value(textValue);
+    jerry_release_value(key);
+    jerry_release_value(fontSizeVal);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: ComponentMarqueeStyleSetTest012
+ * @tc.desc: Verify Marquee style font size set correct value.
+ * @tc.require: SR000DSEF7
+ */
+void MarqueeTddTest::ComponentMarqueeStyleSetTest012()
+{
+    TDD_CASE_BEGIN();
+    const char *value = "value";
+    const char *textVal = "hello world";
+    jerry_value_t textKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(value));
+    jerry_value_t textValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(textVal));
+    jerry_release_value(jerry_set_property(attrsObj_, textKey, textValue));
+
+    /**
+     * @tc.steps: step1. set font size = 38
+     */
+    const int initFontSize = 38;
+    const char *fontSizeName = "fontSize";
+    jerry_value_t key = jerry_create_string(reinterpret_cast<const jerry_char_t *>(fontSizeName));
+    jerry_value_t fontSizeVal = jerry_create_number(initFontSize);
+    jerry_release_value(jerry_set_property(styleObj_, key, fontSizeVal));
+    Component *component = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    UILabel *uiLabel = reinterpret_cast<UILabel *>(component->GetComponentRootView());
+
+    /**
+     * @tc.expected: step2. get font size = 18
+     */
+    uint16_t targetFontSize = 18;
+    uint16_t fontSize = uiLabel->GetFontId();
+    if (targetFontSize == fontSize) {
+        printf("Component_Marquee_StyleSet_Test_012 pass\n");
+    } else {
+        printf("Component_Marquee_StyleSet_Test_012 fail\n");
+    }
+    EXPECT_TRUE(targetFontSize == fontSize);
+
+    jerry_release_value(textKey);
+    jerry_release_value(textValue);
+    jerry_release_value(key);
+    jerry_release_value(fontSizeVal);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: ComponentMarqueeStyleSetTest013
+ * @tc.desc: Verify Marquee style font size set incorrect value.
+ * @tc.require: SR000DSEF7
+ */
+void MarqueeTddTest::ComponentMarqueeStyleSetTest013()
+{
+    TDD_CASE_BEGIN();
+    const char *value = "value";
+    const char *textVal = "hello world";
+    jerry_value_t textKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(value));
+    jerry_value_t textValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(textVal));
+    jerry_release_value(jerry_set_property(attrsObj_, textKey, textValue));
+
+    /**
+     * @tc.steps: step1. set font size = 40
+     */
+    Theme *theme = ThemeManager::GetInstance().GetCurrent();
+    Style style;
+    if (theme != nullptr) {
+        style = theme->GetLabelStyle();
+    } else {
+        style = StyleDefault::GetLabelStyle();
+    }
+    const int initFontSize = 40;
+    const char *fontSizeName = "fontSize";
+    jerry_value_t key = jerry_create_string(reinterpret_cast<const jerry_char_t *>(fontSizeName));
+    jerry_value_t fontSizeVal = jerry_create_number(initFontSize);
+    jerry_release_value(jerry_set_property(styleObj_, key, fontSizeVal));
+    Component *component = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    UILabel *uiLabel = reinterpret_cast<UILabel *>(component->GetComponentRootView());
+
+    /**
+     * @tc.expected: step2. get font size = 67
+     */
+    uint16_t fontSize = uiLabel->GetFontId();
+    if (fontSize == style.font_) {
+        printf("Component_Marquee_StyleSet_Test_013 pass\n");
+    } else {
+        printf("Component_Marquee_StyleSet_Test_013 fail\n");
+    }
+    EXPECT_TRUE(fontSize == style.font_);
+
+    jerry_release_value(textKey);
+    jerry_release_value(textValue);
+    jerry_release_value(key);
+    jerry_release_value(fontSizeVal);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void MarqueeTddTest::RunTests()
+{
+    ComponentMarqueeStyleSetTest006();
+    ComponentMarqueeStyleSetTest007();
+    ComponentMarqueeStyleSetTest008();
+    ComponentMarqueeStyleSetTest009();
+    ComponentMarqueeStyleSetTest010();
+    ComponentMarqueeStyleSetTest011();
+    ComponentMarqueeStyleSetTest012();
+    ComponentMarqueeStyleSetTest013();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: ComponentMarqueeStyleSetTest006
+ * @tc.desc: Verify Marquee style color set boundary value.
+ * @tc.require: AR000DSEFH
+ */
+HWTEST_F(MarqueeTddTest, marStyle006, TestSize.Level1)
+{
+    MarqueeTddTest::ComponentMarqueeStyleSetTest006();
+}
+
+/**
+ * @tc.name: ComponentMarqueeStyleSetTest007
+ * @tc.desc: Verify Marquee style color set boundary value.
+ * @tc.require: AR000DSEFH
+ */
+HWTEST_F(MarqueeTddTest, marStyle007, TestSize.Level1)
+{
+    MarqueeTddTest::ComponentMarqueeStyleSetTest007();
+}
+
+/**
+ * @tc.name: ComponentMarqueeStyleSetTest008
+ * @tc.desc: Verify Marquee style color set normal value.
+ * @tc.require: AR000DSEFH
+ */
+HWTEST_F(MarqueeTddTest, marStyle008, TestSize.Level1)
+{
+    MarqueeTddTest::ComponentMarqueeStyleSetTest008();
+}
+
+/**
+ * @tc.name: ComponentMarqueeStyleSetTest009
+ * @tc.desc: Verify Marquee style color set value out of boundary.
+ * @tc.require: AR000DSEFH
+ */
+HWTEST_F(MarqueeTddTest, marStyle009, TestSize.Level1)
+{
+    MarqueeTddTest::ComponentMarqueeStyleSetTest009();
+}
+
+/**
+ * @tc.name: ComponentMarqueeStyleSetTest010
+ * @tc.desc: Verify Marquee style color set value out of boundary.
+ * @tc.require: AR000DSEFH
+ */
+HWTEST_F(MarqueeTddTest, marStyle010, TestSize.Level1)
+{
+    MarqueeTddTest::ComponentMarqueeStyleSetTest010();
+}
+#endif // TDD_ASSERTIONS
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/marquee_tdd_test.h b/frameworks/src/core/components/test/unittest/common/marquee_tdd_test.h
new file mode 100755
index 0000000..7b92e7d
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/marquee_tdd_test.h
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef ACELITE_MARQUEE_TDD_TEST_H
+#define ACELITE_MARQUEE_TDD_TEST_H
+
+#include "base_test.h"
+
+namespace OHOS {
+namespace ACELite {
+class MarqueeTddTest : public BaseTest {
+public:
+    MarqueeTddTest()
+    {
+        const char *componentName = "marquee";
+        SetCompnentNameId(const_cast<char *>(componentName));
+    }
+    ~MarqueeTddTest() override {};
+    void ComponentMarqueeStyleSetTest006();
+    void ComponentMarqueeStyleSetTest007();
+    void ComponentMarqueeStyleSetTest008();
+    void ComponentMarqueeStyleSetTest009();
+    void ComponentMarqueeStyleSetTest010();
+    void ComponentMarqueeStyleSetTest011();
+    void ComponentMarqueeStyleSetTest012();
+    void ComponentMarqueeStyleSetTest013();
+    void RunTests();
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // ACELITE_MARQUEE_TDD_TEST_H
diff --git a/frameworks/src/core/components/test/unittest/common/opacity_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/opacity_tdd_test.cpp
new file mode 100755
index 0000000..500f567
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/opacity_tdd_test.cpp
@@ -0,0 +1,363 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "opacity_tdd_test.h"
+#include "acelite_config.h"
+#include "component_factory.h"
+#include "div_component.h"
+#include "js_app_environment.h"
+#include "root_view.h"
+#include "text_component.h"
+#include "ui_label.h"
+
+namespace OHOS {
+namespace ACELite {
+OpacityTddTest::OpacityTddTest():BaseTest()
+{
+    componentNameId_ = KeyParser::ParseKeyId("div");
+}
+
+/**
+ * @tc.name:SetOpacityTest001
+ * @tc.desc: Verify div Opacity 0.6 set successful.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+void OpacityTddTest::SetOpacityTest001()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set div opacity style value = 0.6,
+     * check ui view opacityvalue = 0.6
+     */
+    const double expectOpacityValue = 0.6;
+    SetOpaScale(styleObj_, expectOpacityValue);
+    Component* divComponent = reinterpret_cast<DivComponent *>(GetRenderedComponent(componentNameId_));
+    UIView* uiView = reinterpret_cast<UIView *>(divComponent->GetComponentRootView());
+    EXPECT_EQ(uiView->GetOpaScale(), OPA_OPAQUE * expectOpacityValue);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name:SetOpacityTest002
+ * @tc.desc: Set exception div Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+void OpacityTddTest::SetOpacityTest002()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set div exception opacity style value = 128,
+     * check ui view opacityvalue = 1.0
+     */
+    const double exceptionOpacityValue1 = 128;
+    const double maxOpacityValue = 1.0;
+    const double minOpacityValue = 0.0;
+    SetOpaScale(styleObj_, exceptionOpacityValue1);
+    Component* divComponent = reinterpret_cast<DivComponent *>(GetRenderedComponent(componentNameId_));
+    UIView* uiView = (divComponent->GetComponentRootView());
+    EXPECT_NE(uiView->GetOpaScale(), OPA_OPAQUE * exceptionOpacityValue1);
+    EXPECT_EQ(uiView->GetOpaScale(), OPA_OPAQUE * maxOpacityValue);
+
+    /**
+     * @tc.steps: step2. set div exception opacity style value = -123456,
+     * check ui view opacityvalue = 0.0
+     */
+    const double exceptionOpacityValue2 = -123456;
+    SetOpaScale(styleObj_, exceptionOpacityValue2);
+    const char * const opacity = "opacity";
+    UpdateNumAttributeOrStyleValue(divComponent, opacity, exceptionOpacityValue2, false);
+    EXPECT_NE(uiView->GetOpaScale(), OPA_OPAQUE * exceptionOpacityValue2);
+    EXPECT_EQ(uiView->GetOpaScale(), OPA_OPAQUE * minOpacityValue);
+
+    TDD_CASE_END();
+}
+
+
+/**
+ * @tc.name:SetOpacityTest003
+ * @tc.desc: Set div & children text Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+void OpacityTddTest::SetOpacityTest003()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set div opacity style value = 0.6,
+     */
+    const double divOpacityValue = 0.6;
+    SetOpaScale(styleObj_, divOpacityValue);
+    /**
+     * @tc.steps: step2. set text opacity style value = 0.8,
+     */
+    jerry_value_t textObject = jerry_create_object();
+    jerry_value_t  textStyleObj = jerry_create_object();
+    JerrySetNamedProperty(textObject, "staticStyle", textStyleObj);
+    const double textOpacityValue = 0.8;
+    SetOpaScale(textStyleObj, textOpacityValue);
+    /**
+     * @tc.steps: step3. get div view, render and check.
+     */
+    UIView* uiView = GetContainerView(componentNameId_, globObj_, textObject);
+    if (uiView == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    EXPECT_NE(uiView->GetOpaScale() * divOpacityValue, (int)(OPA_OPAQUE * textOpacityValue * divOpacityValue));
+    jerry_release_value(textObject);
+    jerry_release_value(textStyleObj);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name:SetOpacityTest004
+ * @tc.desc: Set div & children text Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+void OpacityTddTest::SetOpacityTest004()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step1. set text opacity style value = 0.8,
+     */
+    jerry_value_t textObject = jerry_create_object();
+    jerry_value_t  textStyleObj = jerry_create_object();
+    JerrySetNamedProperty(textObject, "staticStyle", textStyleObj);
+    const double textOpacityValue = 0.8;
+    SetOpaScale(textStyleObj, textOpacityValue);
+
+    /**
+     * @tc.steps: step2. set div opacity style value = 0.6,
+     */
+    jerry_value_t divObject = jerry_create_object();
+    jerry_value_t  divStyleObj = jerry_create_object();
+    JerrySetNamedProperty(divObject, "staticStyle", divStyleObj);
+    const double divOpacityValue1 = 0.6;
+    SetOpaScale(divStyleObj, divOpacityValue1);
+
+    ComponentFactory::CreateComponent(componentNameId_, divObject, textObject);
+
+    const double divOpacityValue2 = 0.5;
+    SetOpaScale(styleObj_, divOpacityValue2);
+    /**
+     * @tc.steps: step3. get div view, render and check.
+     */
+    UIView* uiView = GetContainerView(componentNameId_, globObj_, divObject);
+    if (uiView == nullptr) {
+        TDD_CASE_END();
+        return;
+    }
+    EXPECT_NE(uiView->GetOpaScale() * textOpacityValue * divOpacityValue2,
+        (int)(OPA_OPAQUE * textOpacityValue * divOpacityValue1 * divOpacityValue2));
+    jerry_release_value(textObject);
+    jerry_release_value(textStyleObj);
+    jerry_release_value(divObject);
+    jerry_release_value(divStyleObj);
+
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name:SetOpacityTest005
+ * @tc.desc: Set text & text color Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+void OpacityTddTest::SetOpacityTest005()
+{
+    uint16_t textComponentName = KeyParser::ParseKeyId("text");
+    const double componentOpacityValue = 0.6;
+    SetOpaScale(styleObj_, componentOpacityValue);
+    const char * const colorKey = "color";
+    const char * const colorValue = "#66666666";
+    const uint8_t colorOpacity = 102;
+    JerrySetStringProperty(styleObj_, colorKey, colorValue);
+    Component* textComponent = reinterpret_cast<TextComponent *>(GetRenderedComponent(textComponentName));
+    UILabel* uiLabel = reinterpret_cast<UILabel *>(textComponent->GetComponentRootView());
+    EXPECT_EQ((int)(uiLabel->GetOpaScale() * (uiLabel->GetStyle(STYLE_TEXT_OPA)) / OPA_OPAQUE),
+        (int)(componentOpacityValue * colorOpacity));
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name:SetOpacityTest006
+ * @tc.desc: Set div & border color Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+void OpacityTddTest::SetOpacityTest006()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set div opacity style value = 0.6,
+     * check ui view opacityvalue = 0.6
+     */
+    const double componentOpacityValue = 0.6;
+    SetOpaScale(styleObj_, componentOpacityValue);
+    const char * const borderColorKey = "borderColor";
+    const char * const borderColorValue = "#66666666";
+    const uint8_t colorOpacity = 102;
+    JerrySetStringProperty(styleObj_, borderColorKey, borderColorValue);
+    Component* divComponent = reinterpret_cast<DivComponent *>(GetRenderedComponent(componentNameId_));
+    FlexLayout* uiView = reinterpret_cast<FlexLayout *>(divComponent->GetComponentRootView());
+    EXPECT_EQ(uiView->GetOpaScale() * (uiView->GetStyle(STYLE_BORDER_OPA)) / OPA_OPAQUE,
+        (int)(componentOpacityValue * colorOpacity));
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name:SetOpacityTest007
+ * @tc.desc: Set div & background color Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+void OpacityTddTest::SetOpacityTest007()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set div opacity style value = 0.6,
+     * check ui view opacityvalue = 0.6
+     */
+    const double componentOpacityValue = 0.6;
+    SetOpaScale(styleObj_, componentOpacityValue);
+
+    const char * const backgroundColorKey = "backgroundColor";
+    const char * const backgroundColorValue = "#66666666";
+    const uint8_t colorOpacity = 102;
+    JerrySetStringProperty(styleObj_, backgroundColorKey, backgroundColorValue);
+
+    Component* divComponent = reinterpret_cast<DivComponent *>(GetRenderedComponent(componentNameId_));
+    FlexLayout* uiView = reinterpret_cast<FlexLayout *>(divComponent->GetComponentRootView());
+
+    EXPECT_EQ((int)(uiView->GetOpaScale() * (uiView->GetStyle(STYLE_BACKGROUND_OPA)) / OPA_OPAQUE),
+        (int)(componentOpacityValue * colorOpacity));
+    TDD_CASE_END();
+}
+
+UIView* OpacityTddTest::GetContainerView(uint16_t componentKeyId, jerry_value_t options, jerry_value_t children) const
+{
+    Component* component = ComponentFactory::CreateComponent(componentKeyId, options, children);
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create component error.");
+        return nullptr;
+    }
+    component->Render();
+    Component* divComponent = (reinterpret_cast<DivComponent *>(component));
+    FlexLayout* uiView = reinterpret_cast<FlexLayout *>(divComponent->GetComponentRootView());
+    return uiView;
+}
+
+void OpacityTddTest::SetOpaScale(jerry_value_t styleObj, double inputOpacityValue)
+{
+    const double expectOpacityValue = inputOpacityValue;
+    const char * const opacity = "opacity";
+    jerry_value_t opacityKey = jerry_create_string((const jerry_char_t*)opacity);
+    jerry_value_t opacityValue = jerry_create_number(expectOpacityValue);
+    jerry_set_property(styleObj, opacityKey, opacityValue);
+    jerry_release_value(opacityKey);
+    jerry_release_value(opacityValue);
+}
+
+
+void OpacityTddTest::RunTests()
+{
+    SetOpacityTest001();
+    SetOpacityTest002();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name:SetOpacityTest001
+ * @tc.desc: Verify div Opacity 0.6 set successful.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+HWTEST_F(OpacityTddTest, textOpacity001, TestSize.Level1)
+{
+    OpacityTddTest::SetOpacityTest001();
+}
+
+/**
+ * @tc.name:SetOpacityTest002
+ * @tc.desc: Set exception div Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+HWTEST_F(OpacityTddTest, textOpacity002, TestSize.Level1)
+{
+    OpacityTddTest::SetOpacityTest002();
+}
+
+/**
+ * @tc.name:SetOpacityTest003
+ * @tc.desc: Set div & children text Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+HWTEST_F(OpacityTddTest, textOpacity003, TestSize.Level1)
+{
+    OpacityTddTest::SetOpacityTest003();
+}
+
+/**
+ * @tc.name:SetOpacityTest004
+ * @tc.desc: Set div & children text Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+HWTEST_F(OpacityTddTest, textOpacity004, TestSize.Level1)
+{
+    OpacityTddTest::SetOpacityTest004();
+}
+
+/**
+ * @tc.name:SetOpacityTest005
+ * @tc.desc: Set text & text color Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+HWTEST_F(OpacityTddTest, textOpacity005, TestSize.Level1)
+{
+    OpacityTddTest::SetOpacityTest005();
+}
+
+/**
+ * @tc.name:SetOpacityTest006
+ * @tc.desc: Set div & border color Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+HWTEST_F(OpacityTddTest, textOpacity006, TestSize.Level1)
+{
+    OpacityTddTest::SetOpacityTest006();
+}
+
+/**
+ * @tc.name:SetOpacityTest007
+ * @tc.desc: Set div & background color Opacity.
+ * @tc.type FUNC
+ * @tc.require: AR000F3PDF
+ */
+HWTEST_F(OpacityTddTest, textOpacity007, TestSize.Level1)
+{
+    OpacityTddTest::SetOpacityTest007();
+}
+#endif // TDD_ASSERTIONS
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/opacity_tdd_test.h b/frameworks/src/core/components/test/unittest/common/opacity_tdd_test.h
new file mode 100755
index 0000000..ef06193
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/opacity_tdd_test.h
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef OHOS_ACELITE_TEST_OPACITY_H
+#define OHOS_ACELITE_TEST_OPACITY_H
+
+#include "base_test.h"
+
+namespace OHOS {
+namespace ACELite {
+class OpacityTddTest : public BaseTest {
+public:
+    OpacityTddTest();
+    ~OpacityTddTest() override {};
+    void SetOpacityTest001();
+    void SetOpacityTest002();
+    void SetOpacityTest003();
+    void SetOpacityTest004();
+    void SetOpacityTest005();
+    void SetOpacityTest006();
+    void SetOpacityTest007();
+    void RunTests();
+
+private:
+    void SetOpaScale(jerry_value_t styleObj, double inputOpacityValue);
+    UIView* GetContainerView(uint16_t componentKeyId, jerry_value_t options, jerry_value_t children) const;
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_TEST_TEXT_H
\ No newline at end of file
diff --git a/frameworks/src/core/components/test/unittest/common/percent_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/percent_tdd_test.cpp
new file mode 100755
index 0000000..b3924b2
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/percent_tdd_test.cpp
@@ -0,0 +1,548 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "percent_tdd_test.h"
+
+#include "ace_log.h"
+#include "component.h"
+#include "component_utils.h"
+#include "js_app_context.h"
+#include "js_app_environment.h"
+#include "js_fwk_common.h"
+#include "number_parser.h"
+
+namespace OHOS {
+namespace ACELite {
+const char * const PercentTddTest::ATTR_STATIC_STYLE_NAME = "staticStyle";
+const char * const PercentTddTest::STYLE_WIDTH_NAME = "width";
+const char * const PercentTddTest::STYLE_HEIGHT_NAME = "height";
+const char * const PercentTddTest::STYLE_TOP_NAME = "top";
+const char * const PercentTddTest::STYLE_LEFT_NAME = "left";
+const char * const PercentTddTest::STYLE_MARGINTOP_NAME = "marginTop";
+const char * const PercentTddTest::STYLE_MARGINLEFT_NAME = "marginLeft";
+const char * const PercentTddTest::STYLE_MARGINRIGHT_NAME = "marginRight";
+const char * const PercentTddTest::STYLE_MARGINBOTTOM_NAME = "marginBottom";
+const char * const PercentTddTest::FUNC_CREATE_ELEMENT = "_c";
+void PercentTddTest::SetUp()
+{
+    JsAppEnvironment *env = JsAppEnvironment::GetInstance();
+    if (env == nullptr) {
+        // should never happen
+        return;
+    }
+    env->InitJsFramework();
+}
+
+void PercentTddTest::TearDown()
+{
+    JsAppEnvironment *env = JsAppEnvironment::GetInstance();
+    JsAppContext *context = JsAppContext::GetInstance();
+    if (env == nullptr || context == nullptr) {
+        // should never happen
+        return;
+    }
+    context->ReleaseStyles();
+    env->Cleanup();
+}
+
+void PercentTddTest::PrepareOptions(JSValue &options, JSValue &staticStyle) const
+{
+    // prepare component options
+    options = JSObject::Create();
+    staticStyle = JSObject::Create();
+    JSObject::Set(options, ATTR_STATIC_STYLE_NAME, staticStyle);
+}
+
+void PercentTddTest::SetStyleWithValue(JSValue target, const char *key, const char *value) const
+{
+    if ((JSUndefined::Is(target)) || (key == nullptr) || (value == nullptr)) {
+        return;
+    }
+    JSValue propValue = JSString::Create(value);
+    JSObject::Set(target, key, propValue);
+    ReleaseJerryValue(propValue, VA_ARG_END_FLAG);
+}
+
+void PercentTddTest::ConfigStylesWithRect(JSValue staticStyle, const char *widthValue, const char *heightValue) const
+{
+    SetStyleWithValue(staticStyle, STYLE_WIDTH_NAME, widthValue);
+    SetStyleWithValue(staticStyle, STYLE_HEIGHT_NAME, heightValue);
+}
+
+void PercentTddTest::ConfigStylesWithPosition(JSValue staticStyle, const char *topValue, const char *leftValue) const
+{
+    SetStyleWithValue(staticStyle, STYLE_TOP_NAME, topValue);
+    SetStyleWithValue(staticStyle, STYLE_LEFT_NAME, leftValue);
+}
+
+void PercentTddTest::ConfigStylesWithMargin(JSValue staticStyle, const char *marginValue) const
+{
+    ConfigStylesWithMargins(staticStyle, marginValue, marginValue, marginValue, marginValue);
+}
+
+void PercentTddTest::ConfigStylesWithMargins(JSValue staticStyle,
+                                             const char *marginTopValue,
+                                             const char *marginLeftValue,
+                                             const char *marginRightValue,
+                                             const char *marginBottomValue) const
+{
+    SetStyleWithValue(staticStyle, STYLE_MARGINTOP_NAME, marginTopValue);
+    SetStyleWithValue(staticStyle, STYLE_MARGINLEFT_NAME, marginLeftValue);
+    SetStyleWithValue(staticStyle, STYLE_MARGINRIGHT_NAME, marginRightValue);
+    SetStyleWithValue(staticStyle, STYLE_MARGINBOTTOM_NAME, marginBottomValue);
+}
+
+void PercentTddTest::DumpJSObjectJson(JSValue value) const
+{
+    if (JSUndefined::Is(value)) {
+        return;
+    }
+    char *jsonStr = MallocStringOf(jerry_json_stringify(value));
+    HILOG_DEBUG(HILOG_MODULE_ACE, "JSObject: %s", jsonStr);
+    ACE_FREE(jsonStr);
+}
+
+Component *PercentTddTest::BuildViewTree(JSValue element, int16_t parentWidth, int16_t parentHeight) const
+{
+    if (JSUndefined::Is(element)) {
+        return nullptr;
+    }
+
+    Component *component = ComponentUtils::GetComponentFromBindingObject(element);
+    if (component != nullptr) {
+        ConstrainedParameter parentParameter = {parentWidth, parentHeight};
+        Component::BuildViewTree(component, nullptr, parentParameter);
+    }
+    return component;
+}
+
+void PercentTddTest::VerifyDimension(JSValue element, uint16_t keyID, int16_t targetPX) const
+{
+    EXPECT_FALSE(JSUndefined::Is(element));
+    Component *component = ComponentUtils::GetComponentFromBindingObject(element);
+    EXPECT_FALSE(component == nullptr);
+    if (component == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "can not fetch component from element");
+    }
+    Dimension dimension = component->GetDimension(keyID);
+    EXPECT_EQ(dimension.type, DimensionType::TYPE_PIXEL);
+    EXPECT_EQ(dimension.value.pixel, targetPX);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse001
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse001, TestSize.Level1)
+{
+    uint16_t strLength = 5;
+    float percentValue = 0;
+    /**
+     * @tc.steps: step1. pass nullptr for parsing
+     */
+    bool result = NumberParser::ParsePercentValue(nullptr, strLength, percentValue);
+    /**
+     * @tc.steps: step2. check if parse failed
+     */
+    EXPECT_FALSE(result);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse002
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse002, TestSize.Level1)
+{
+    uint16_t strLength = 1;
+    const char *strBuffer = "100%";
+    float percentValue = 0;
+    /**
+     * @tc.steps: step1. give the length small than the min length
+     */
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    /**
+     * @tc.steps: step2. check if parse failed
+     */
+    EXPECT_FALSE(result);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse003
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse003, TestSize.Level1)
+{
+    uint16_t strLength = 4;
+    const char *strBuffer = "100%";
+    float percentValue = 0;
+    /**
+     * @tc.steps: step1. give the corrent string and length
+     */
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    EXPECT_TRUE(result);
+    float correctValue = 100;
+    /**
+     * @tc.steps: step2. check if parse successfully
+     */
+    EXPECT_EQ(percentValue, correctValue);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse004
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse004, TestSize.Level1)
+{
+    uint16_t strLength = 7;
+    /**
+     * @tc.steps: step1. give one string not in digit format
+     */
+    const char *strBuffer = "abcdef%";
+    float percentValue = 0;
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    /**
+     * @tc.steps: step2. check if parse failed
+     */
+    EXPECT_FALSE(result);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse005
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse005, TestSize.Level1)
+{
+    uint16_t strLength = 20;
+    /**
+     * @tc.steps: step1. give one string which is too long
+     */
+    const char *strBuffer = "1567890123343433434%";
+    float percentValue = 0;
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    /**
+     * @tc.steps: step2. check if parse failed
+     */
+    EXPECT_FALSE(result);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse006
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse006, TestSize.Level1)
+{
+    uint16_t strLength = 4;
+    /**
+     * @tc.steps: step1. give one string which includes no-digit charater
+     */
+    const char *strBuffer = "50a%";
+    float percentValue = 0;
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    /**
+     * @tc.steps: step2. check if parse failed
+     */
+    EXPECT_FALSE(result);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse007
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse007, TestSize.Level1)
+{
+    uint16_t strLength = 4;
+    /**
+     * @tc.steps: step1. give one negative number
+     */
+    const char *strBuffer = "-40%";
+    float percentValue = 0;
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    /**
+     * @tc.steps: step2. check if parse successfully and the result is negative number
+     */
+    EXPECT_TRUE(result);
+    float correctValue = -40;
+    EXPECT_EQ(percentValue, correctValue);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse008
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse008, TestSize.Level1)
+{
+    uint16_t strLength = 6;
+    /**
+     * @tc.steps: step1. give one string which is not number and not including %
+     */
+    const char *strBuffer = "abcdef";
+    float percentValue = 0;
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    /**
+     * @tc.steps: step2. check if parse failed
+     */
+    EXPECT_FALSE(result);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse009
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse009, TestSize.Level1)
+{
+    uint16_t strLength = 100;
+    /**
+     * @tc.steps: step1. give one string which is not number and including %
+     */
+    const char *strBuffer = "abcdef%";
+    float percentValue = 0;
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    /**
+     * @tc.steps: step2. check if parse failed
+     */
+    EXPECT_FALSE(result);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse010
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse010, TestSize.Level1)
+{
+    /**
+     * @tc.steps: step1. give one string which is bigger than float range
+     */
+    const char *strBuffer = "123456789012345%";
+    uint16_t strLength = 16;
+    float percentValue = 0;
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    EXPECT_TRUE(result);
+    /**
+     * @tc.steps: step2. check the value is correct
+     */
+    float correctValue = 123456789012345;
+    EXPECT_EQ(percentValue, correctValue);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentParse011
+ * @tc.desc: Verify the percent converting process
+ * @tc.require: AR000F3PDD
+ */
+HWTEST_F(PercentTddTest, PercentParse011, TestSize.Level1)
+{
+    float percentValue = 0;
+    uint16_t strLength = 16;
+    /**
+     * @tc.steps: step1. give one very small value
+     */
+    const char *strBuffer = "-12345678901234%";
+    bool result = NumberParser::ParsePercentValue(strBuffer, strLength, percentValue);
+    EXPECT_TRUE(result);
+    /**
+     * @tc.steps: step2. check the value is correct
+     */
+    float correctValue = -12345678901234;
+    EXPECT_EQ(percentValue, correctValue);
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentSupport001
+ * @tc.desc: Verify the percent processing on div.
+ * @tc.require: AR000F5LM1
+ */
+HWTEST_F(PercentTddTest, PercentSupport001, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. prepare child component
+     */
+    JSValue textTag = JSString::Create("text");
+    JSValue textOption;
+    JSValue textStaticStyle;
+    PrepareOptions(textOption, textStaticStyle);
+    ConfigStylesWithRect(textStaticStyle, "50%", "50%");
+    JSValue textArgs[ARG_LENGTH_2] = {textTag, textOption};
+    JSValue textEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, textArgs, ARG_LENGTH_2);
+    /**
+     * @tc.steps: step2. prepare parent component
+     */
+    JSValue divTag = JSString::Create("div");
+    JSValue divOption;
+    JSValue divStaticStyle;
+    PrepareOptions(divOption, divStaticStyle);
+    ConfigStylesWithRect(divStaticStyle, "100%", "100%");
+    JSValue divChildren = JSArray::Create(0);
+    JSArray::Push(divChildren, textEl);
+    JSValue divArgs[ARG_LENGTH_3] = {divTag, divOption, divChildren};
+    JSValue divEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, divArgs, ARG_LENGTH_3);
+    /**
+     * @tc.steps: step3. trigger render and build
+     */
+    const int16_t screenWidth = 454;
+    const int16_t screenHeight = 454;
+    Component *divComponent = BuildViewTree(divEl, screenWidth, screenHeight);
+    /**
+     * @tc.steps: step4. verify
+     */
+    VerifyDimension(divEl, K_WIDTH, screenWidth);
+    const int16_t halfNum = 2;
+    VerifyDimension(textEl, K_HEIGHT, (screenHeight / halfNum));
+    /**
+     * @tc.steps: step5. release resource
+     */
+    ComponentUtils::ReleaseComponents(divComponent);
+    ReleaseJerryValue(textTag, textStaticStyle, textOption, textEl, VA_ARG_END_FLAG);
+    ReleaseJerryValue(divTag, divStaticStyle, divOption, divEl, divChildren, VA_ARG_END_FLAG);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentSupport002
+ * @tc.desc: Verify the percent processing on component.
+ * @tc.require: AR000F5LM1
+ */
+HWTEST_F(PercentTddTest, PercentSupport002, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. prepare child component
+     */
+    JSValue textTag = JSString::Create("text");
+    JSValue textOption;
+    JSValue textStaticStyle;
+    PrepareOptions(textOption, textStaticStyle);
+    ConfigStylesWithPosition(textStaticStyle, "10%", "10%");
+    JSValue textArgs[ARG_LENGTH_2] = {textTag, textOption};
+    JSValue textEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, textArgs, ARG_LENGTH_2);
+    /**
+     * @tc.steps: step2. prepare parent component
+     */
+    JSValue stackTag = JSString::Create("stack");
+    JSValue stackOption;
+    JSValue stackStaticStyle;
+    PrepareOptions(stackOption, stackStaticStyle);
+    ConfigStylesWithRect(stackStaticStyle, "50%", "50%");
+    JSValue stackChildren = JSArray::Create(0);
+    JSArray::Push(stackChildren, textEl);
+    JSValue stackArgs[ARG_LENGTH_3] = {stackTag, stackOption, stackChildren};
+    JSValue stackEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, stackArgs, ARG_LENGTH_3);
+    /**
+     * @tc.steps: step3. trigger render and build
+     */
+    const int16_t screenWidth = 1024;
+    const int16_t screenHeight = 768;
+    Component *stackComponent = BuildViewTree(stackEl, screenWidth, screenHeight);
+    /**
+     * @tc.steps: step4. verify
+     */
+    const int16_t halfNum = 2;
+    const int16_t marginPercentNum = 10;
+    VerifyDimension(stackEl, K_WIDTH, (screenWidth / halfNum));
+    VerifyDimension(textEl, K_TOP, ((screenHeight / halfNum) / marginPercentNum));
+    /**
+     * @tc.steps: step5. release resource
+     */
+    ComponentUtils::ReleaseComponents(stackComponent);
+    ReleaseJerryValue(textTag, textStaticStyle, textOption, textEl, VA_ARG_END_FLAG);
+    ReleaseJerryValue(stackTag, stackStaticStyle, stackOption, stackEl, stackChildren, VA_ARG_END_FLAG);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: AceliteFrameworkPercentSupport003
+ * @tc.desc: Verify the percent processing on component.
+ * @tc.require: SR000F3PDC
+ */
+HWTEST_F(PercentTddTest, PercentSupport003, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. prepare child component
+     */
+    JSValue labelTag = JSString::Create("text");
+    JSValue labelOption;
+    JSValue labelStaticStyle;
+    PrepareOptions(labelOption, labelStaticStyle);
+    ConfigStylesWithMargins(labelStaticStyle, "10%", "10%", "10%", "10%");
+    JSValue labelArgs[ARG_LENGTH_2] = {labelTag, labelOption};
+    JSValue textEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, labelArgs, ARG_LENGTH_2);
+    /**
+     * @tc.steps: step2. prepare parent component
+     */
+    JSValue containerTag = JSString::Create("div");
+    JSValue containerOption;
+    JSValue containerStaticStyle;
+    PrepareOptions(containerOption, containerStaticStyle);
+    ConfigStylesWithRect(containerStaticStyle, "100%", "100%");
+    JSValue containerChildren = JSArray::Create(0);
+    JSArray::Push(containerChildren, textEl);
+    JSValue containerArgs[ARG_LENGTH_3] = {containerTag, containerOption, containerChildren};
+    JSValue containerEl = JSGlobal::Call(FUNC_CREATE_ELEMENT, containerArgs, ARG_LENGTH_3);
+    /**
+     * @tc.steps: step3. trigger render and build
+     */
+    const int16_t screenWidth = 600;
+    const int16_t screenHeight = 800;
+    Component *containerComponent = BuildViewTree(containerEl, screenWidth, screenHeight);
+    /**
+     * @tc.steps: step4. verify
+     */
+    const int16_t marginPercent = 10;
+    VerifyDimension(textEl, K_MARGIN_TOP, (screenHeight / marginPercent));
+    /**
+     * @tc.steps: step5. release resource
+     */
+    ComponentUtils::ReleaseComponents(containerComponent);
+    ReleaseJerryValue(labelTag, labelStaticStyle, labelOption, textEl, VA_ARG_END_FLAG);
+    ReleaseJerryValue(containerTag, containerStaticStyle, containerOption, containerEl, containerChildren,
+                      VA_ARG_END_FLAG);
+    TDD_CASE_END();
+}
+
+/**
+ * used for debugging TDD implementation on simulator
+ */
+void PercentTddTest::RunTests()
+{
+#ifndef TDD_ASSERTIONS
+    PercentParse001();
+    PercentParse002();
+    PercentParse003();
+    PercentParse004();
+    PercentParse005();
+    PercentParse006();
+    PercentParse007();
+    PercentParse008();
+    PercentParse009();
+    PercentParse010();
+    PercentParse011();
+    PercentSupport001();
+    PercentSupport002();
+    PercentSupport003();
+#endif // TDD_ASSERTIONS
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/percent_tdd_test.h b/frameworks/src/core/components/test/unittest/common/percent_tdd_test.h
new file mode 100755
index 0000000..2f406b6
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/percent_tdd_test.h
@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_PERCENT_TDD_TEST_H
+#define OHOS_ACELITE_PERCENT_TDD_TEST_H
+
+#include "acelite_config.h"
+#include "component.h"
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#endif
+#include "test_common.h"
+#include "wrapper/js.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class PercentTddTest : public testing::Test {
+#else
+class PercentTddTest {
+#endif
+public:
+    PercentTddTest() = default;
+    ~PercentTddTest() = default;
+    void SetUp();
+    void TearDown();
+    void PercentParse001();
+    void PercentParse002();
+    void PercentParse003();
+    void PercentParse004();
+    void PercentParse005();
+    void PercentParse006();
+    void PercentParse007();
+    void PercentParse008();
+    void PercentParse009();
+    void PercentParse010();
+    void PercentParse011();
+    void PercentSupport001();
+    void PercentSupport002();
+    void PercentSupport003();
+    void PercentSupport004();
+    void RunTests();
+    void PrepareOptions(JSValue &option, JSValue &staticStyle) const;
+    // following functions are used to setup the specific style items in percent format
+    void SetStyleWithValue(JSValue target, const char *key, const char *value) const;
+    void ConfigStylesWithRect(JSValue staticStyle, const char *widthValue, const char *heightValue) const;
+    void ConfigStylesWithPosition(JSValue staticStyle, const char *topValue, const char *leftValue) const;
+    void ConfigStylesWithMargin(JSValue staticStyle, const char *marginValue) const;
+    void ConfigStylesWithMargins(JSValue staticStyle,
+                                 const char *marginTopValue,
+                                 const char *marginLeftValue,
+                                 const char *marginRightValue,
+                                 const char *marginBottomValue) const;
+    void VerifyDimension(JSValue element, uint16_t keyID, int16_t targetPX) const;
+    void DumpJSObjectJson(JSValue value) const;
+    Component *BuildViewTree(JSValue component, int16_t parentWidth, int16_t parentHeight) const;
+
+    static const char * const ATTR_STATIC_STYLE_NAME;
+    static const char * const STYLE_WIDTH_NAME;
+    static const char * const STYLE_HEIGHT_NAME;
+    static const char * const STYLE_TOP_NAME;
+    static const char * const STYLE_LEFT_NAME;
+    static const char * const STYLE_MARGINTOP_NAME;
+    static const char * const STYLE_MARGINLEFT_NAME;
+    static const char * const STYLE_MARGINRIGHT_NAME;
+    static const char * const STYLE_MARGINBOTTOM_NAME;
+    static const char * const FUNC_CREATE_ELEMENT;
+    static const uint8_t ARG_LENGTH_1 = 1;
+    static const uint8_t ARG_LENGTH_2 = 2;
+    static const uint8_t ARG_LENGTH_3 = 3;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_PERCENT_TDD_TEST_H
\ No newline at end of file
diff --git a/frameworks/src/core/components/test/unittest/common/picker_view_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/picker_view_tdd_test.cpp
new file mode 100755
index 0000000..89e1445
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/picker_view_tdd_test.cpp
@@ -0,0 +1,470 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "picker_view_tdd_test.h"
+#include "js_app_environment.h"
+#include "js_debugger_config.h"
+#include "picker_view_component.h"
+#include "root_view.h"
+#include "stylemgr/app_style_item.h"
+#include "stylemgr/app_style_manager.h"
+#ifdef FEATURE_COMPONENT_DATE_PICKER
+#include "ui_date_picker.h"
+#endif
+#include "ui_picker.h"
+#include "ui_time_picker.h"
+
+namespace OHOS {
+namespace ACELite {
+PickerViewTddTest::PickerViewTddTest()
+{}
+
+void PickerViewTddTest::SetUp()
+{
+    Debugger::GetInstance().SetupJSContext();
+    jerry_init(JERRY_INIT_EMPTY);
+
+    g_globObj = jerry_get_global_object();
+    jerry_value_t keyAttrs = jerry_create_string(reinterpret_cast<const jerry_char_t *>("attrs"));
+    g_attrsObj = jerry_create_object();
+    jerry_release_value(jerry_set_property(g_globObj, keyAttrs, g_attrsObj));
+    jerry_release_value(keyAttrs);
+
+    jerry_value_t keyStaticStyle = jerry_create_string(reinterpret_cast<const jerry_char_t *>("staticStyle"));
+    g_styleObj = jerry_create_object();
+    jerry_release_value(jerry_set_property(g_globObj, keyStaticStyle, g_styleObj));
+    jerry_release_value(keyStaticStyle);
+    rootComponentMock_.PrepareRootContainer();
+}
+
+void PickerViewTddTest::TearDown()
+{
+    JsAppContext::GetInstance()->ReleaseStyles();
+    jerry_release_value(g_globObj);
+    jerry_release_value(g_attrsObj);
+    jerry_release_value(g_styleObj);
+    jerry_cleanup();
+}
+
+Component* PickerViewTddTest::GetRenderedComponent(uint16_t componentKeyId) const
+{
+    jerry_value_t children = jerry_create_null();
+    Component* component = ComponentFactory::CreateComponent(componentKeyId, g_globObj, children);
+    rootComponentMock_.RenderComponent(*component);
+    jerry_release_value(children);
+    return component;
+}
+
+uint16_t PickerViewTddTest::SetCompnentNameId(const char* componentName)
+{
+    if (!strcmp(componentName, "picker-view")) {
+        uint8_t len = 11;
+        return g_componentNameId = KeyParser::ParseKeyId("picker-view", len);
+    }
+    return -1;
+}
+
+void PickerViewTddTest::SetTextPickerRange()
+{
+    uint32_t length = 2;
+    jerry_value_t rangeValue = jerry_create_array(length);
+    jerry_value_t firstValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>("AA"));
+    jerry_value_t secValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>("BB"));
+    jerry_set_property_by_index(rangeValue, 0, firstValue);
+    jerry_set_property_by_index(rangeValue, 1, secValue);
+    jerry_value_t rangeKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>("range"));
+    jerry_release_value(jerry_set_property(g_attrsObj, rangeKey, rangeValue));
+    jerry_release_value(rangeKey);
+    jerry_release_value(firstValue);
+    jerry_release_value(secValue);
+    jerry_release_value(rangeValue);
+}
+
+void PickerViewTddTest::SetCharAttribute(const char* keyName, const char* attribute)
+{
+    jerry_value_t attrName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(keyName));
+    jerry_value_t attrValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(attribute));
+    jerry_release_value(jerry_set_property(g_attrsObj, attrName, attrValue));
+    jerry_release_value(attrName);
+    jerry_release_value(attrValue);
+}
+
+void PickerViewTddTest::SetNumAttribute(const char* keyName, const int32_t attribute)
+{
+    jerry_value_t attrName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(keyName));
+    jerry_value_t attrValue = jerry_create_number(attribute);
+    jerry_release_value(jerry_set_property(g_attrsObj, attrName, attrValue));
+    jerry_release_value(attrName);
+    jerry_release_value(attrValue);
+}
+
+void PickerViewTddTest::SetNumStyle(const char* keyName, const int32_t style)
+{
+    jerry_value_t styleName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(keyName));
+    jerry_value_t styleValue = jerry_create_number(style);
+    jerry_release_value(jerry_set_property(g_styleObj, styleName, styleValue));
+    jerry_release_value(styleName);
+    jerry_release_value(styleValue);
+}
+
+void PickerViewTddTest::ComponentPickerviewAttributeSetTest001()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("picker-view");
+
+    /**
+     * @tc.steps: step1. set invalid type attribute
+     */
+    SetCharAttribute("type", "unknown");
+
+    Component* pickerComponent = reinterpret_cast<PickerViewComponent *>(GetRenderedComponent(g_componentNameId));
+    if (!pickerComponent) {
+        printf("ComponentPickerviewAttributeSetTest001 fail\n");
+        return;
+    }
+    EXPECT_TRUE(pickerComponent != nullptr);
+    UIPicker* textPicker = reinterpret_cast<UIPicker *>(pickerComponent->GetComponentRootView());
+    UITimePicker* timePicker = reinterpret_cast<UITimePicker *>(pickerComponent->GetComponentRootView());
+#ifdef FEATURE_COMPONENT_DATE_PICKER
+    UIDatePicker* datePicker = reinterpret_cast<UIDatePicker *>(pickerComponent->GetComponentRootView());
+#endif
+
+    /**
+     * @tc.expected: step1. native picker object is nullptr
+     */
+    if (!textPicker && !timePicker
+#ifdef FEATURE_COMPONENT_DATE_PICKER
+        && !datePicker
+#endif
+        ) {
+        printf("ComponentPickerviewAttributeSetTest001 pass\n");
+    } else {
+        printf("ComponentPickerviewAttributeSetTest001 fail\n");
+    }
+    EXPECT_TRUE((textPicker == nullptr) && (timePicker == nullptr)
+#ifdef FEATURE_COMPONENT_DATE_PICKER
+    && (datePicker != nullptr)
+#endif
+    );
+
+    pickerComponent->Release();
+    delete pickerComponent;
+    pickerComponent = nullptr;
+
+    TDD_CASE_END();
+}
+
+void PickerViewTddTest::ComponentPickerviewAttributeSetTest002()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("picker-view");
+
+    /**
+     * @tc.steps: step1. set type attribute to text
+     */
+    SetCharAttribute("type", "text");
+    SetNumStyle("width", g_width);
+    SetNumStyle("height", g_height);
+
+    /**
+     * @tc.steps: step2. set range attribute
+     */
+    SetTextPickerRange();
+
+    /**
+     * @tc.steps: step3. set selected attribute
+     */
+    SetNumAttribute("selected", 1);
+
+    /**
+     * @tc.expected: step4. render native textPicker object
+     */
+    Component* pickerComponent = reinterpret_cast<PickerViewComponent *>(GetRenderedComponent(g_componentNameId));
+    if (!pickerComponent) {
+        printf("ComponentPickerviewAttributeSetTest002 fail\n");
+        return;
+    }
+    EXPECT_TRUE(pickerComponent != nullptr);
+    UIPicker* textPicker = reinterpret_cast<UIPicker *>(pickerComponent->GetComponentRootView());
+
+    /**
+     * @tc.expected: step4. native textPicker object is not nullptr
+     */
+    if (!textPicker) {
+        printf("ComponentPickerviewAttributeSetTest002 fail\n");
+        delete pickerComponent;
+        pickerComponent = nullptr;
+        return;
+    }
+    EXPECT_TRUE(textPicker != nullptr);
+
+    /**
+     * @tc.expected: step4. GetSelected return 1
+     */
+    if (textPicker->GetSelected() == 1) {
+        printf("ComponentPickerviewAttributeSetTest002 pass\n");
+    } else {
+        printf("ComponentPickerviewAttributeSetTest002 fail\n");
+    }
+    EXPECT_EQ(textPicker->GetSelected(), 1);
+    pickerComponent->Release();
+    delete pickerComponent;
+    pickerComponent = nullptr;
+
+    TDD_CASE_END();
+}
+
+void PickerViewTddTest::ComponentPickerviewAttributeSetTest003()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("picker-view");
+
+    /**
+     * @tc.steps: step1. set type attribute to text
+     */
+    SetCharAttribute("type", "text");
+    SetNumStyle("width", g_width);
+    SetNumStyle("height", g_height);
+
+    /**
+     * @tc.steps: step2. set invalid range attribute
+     */
+    uint32_t length = 2;
+    jerry_value_t rangeValue = jerry_create_array(length);
+    jerry_value_t firstValue = jerry_create_null();
+    jerry_value_t secValue = jerry_create_undefined();
+    jerry_set_property_by_index(rangeValue, 0, firstValue);
+    jerry_set_property_by_index(rangeValue, 1, secValue);
+    jerry_value_t rangeKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>("range"));
+    jerry_release_value(jerry_set_property(g_attrsObj, rangeKey, rangeValue));
+    jerry_release_value(rangeKey);
+    jerry_release_value(firstValue);
+    jerry_release_value(secValue);
+    jerry_release_value(rangeValue);
+
+    /**
+     * @tc.steps: step3. set selected attribute
+     */
+    SetNumAttribute("selected", 1);
+
+    /**
+     * @tc.expected: step4. render native textPicker object
+     */
+    Component* pickerComponent = reinterpret_cast<PickerViewComponent *>(GetRenderedComponent(g_componentNameId));
+    if (!pickerComponent) {
+        printf("ComponentPickerviewAttributeSetTest003 fail\n");
+        return;
+    }
+    EXPECT_TRUE(pickerComponent != nullptr);
+    UIPicker* textPicker = reinterpret_cast<UIPicker *>(pickerComponent->GetComponentRootView());
+
+    /**
+     * @tc.expected: step4. native textPicker object is not nullptr
+     */
+    if (!textPicker) {
+        printf("ComponentPickerviewAttributeSetTest003 fail\n");
+        delete pickerComponent;
+        pickerComponent = nullptr;
+        return;
+    }
+    EXPECT_TRUE(textPicker != nullptr);
+
+    /**
+     * @tc.expected: step4. GetSelected return 0
+     */
+    if (textPicker->GetSelected() == 0) {
+        printf("ComponentPickerviewAttributeSetTest003 pass\n");
+    } else {
+        printf("ComponentPickerviewAttributeSetTest003 fail\n");
+    }
+    EXPECT_EQ(textPicker->GetSelected(), 0);
+    pickerComponent->Release();
+    delete pickerComponent;
+    pickerComponent = nullptr;
+
+    TDD_CASE_END();
+}
+
+void PickerViewTddTest::ComponentPickerviewAttributeSetTest004()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("picker-view");
+    /**
+     * @tc.steps: step1. set range attribute
+     */
+    SetTextPickerRange();
+
+    /**
+     * @tc.steps: step2. set invalid selected attribute
+     */
+    SetNumStyle("width", g_width);
+    SetNumStyle("height", g_height);
+    SetCharAttribute("selected", "invalid");
+
+    /**
+     * @tc.steps: step3. render native textPicker object
+     */
+    Component* pickerComponent = reinterpret_cast<PickerViewComponent *>(GetRenderedComponent(g_componentNameId));
+    if (!pickerComponent) {
+        printf("ComponentPickerviewAttributeSetTest004 fail\n");
+        return;
+    }
+    EXPECT_TRUE(pickerComponent != nullptr);
+
+    UIPicker* textPicker = reinterpret_cast<UIPicker *>(pickerComponent->GetComponentRootView());
+
+    /**
+     * @tc.expected: step3. native textPicker object is not nullptr
+     */
+    if (!textPicker) {
+        printf("ComponentPickerviewAttributeSetTest004 fail\n");
+        delete pickerComponent;
+        pickerComponent = nullptr;
+        return;
+    }
+    EXPECT_TRUE(textPicker != nullptr);
+
+    /**
+     * @tc.expected: step3. GetSelected return 0
+     */
+    if (textPicker->GetSelected() == 0) {
+        printf("ComponentPickerviewAttributeSetTest004 pass\n");
+    } else {
+        printf("ComponentPickerviewAttributeSetTest004 fail\n");
+    }
+    EXPECT_EQ(textPicker->GetSelected(), 0);
+    pickerComponent->Release();
+    delete pickerComponent;
+    pickerComponent = nullptr;
+
+    TDD_CASE_END();
+}
+
+void PickerViewTddTest::ComponentPickerviewAttributeSetTest005()
+{
+    TDD_CASE_BEGIN();
+    SetCompnentNameId("picker-view");
+    /**
+     * @tc.steps: step1. set range attribute
+     */
+    SetTextPickerRange();
+
+    /**
+     * @tc.steps: step2. set out of bound selected attribute
+     */
+    SetNumStyle("width", g_width);
+    SetNumStyle("height", g_height);
+    SetNumAttribute("selected", -1);
+
+    /**
+     * @tc.steps: step3. render native textPicker object
+     */
+    Component* pickerComponent = reinterpret_cast<PickerViewComponent *>(GetRenderedComponent(g_componentNameId));
+    if (!pickerComponent) {
+        printf("ComponentPickerviewAttributeSetTest005 fail\n");
+        return;
+    }
+    EXPECT_TRUE(pickerComponent != nullptr);
+    UIPicker* textPicker = reinterpret_cast<UIPicker *>(pickerComponent->GetComponentRootView());
+
+    /**
+     * @tc.expected: step3. native textPicker object is not nullptr
+     */
+    if (!textPicker) {
+        printf("ComponentPickerviewAttributeSetTest005 fail\n");
+        delete pickerComponent;
+        pickerComponent = nullptr;
+        return;
+    }
+    EXPECT_TRUE(textPicker != nullptr);
+
+    /**
+     * @tc.expected: step3. GetSelected return 0
+     */
+    if (textPicker->GetSelected() == 0) {
+        printf("ComponentPickerviewAttributeSetTest005 pass\n");
+    } else {
+        printf("ComponentPickerviewAttributeSetTest005 fail\n");
+    }
+    EXPECT_EQ(textPicker->GetSelected(), 0);
+    pickerComponent->Release();
+    delete pickerComponent;
+    pickerComponent = nullptr;
+
+    TDD_CASE_END();
+}
+
+void PickerViewTddTest::RunTests()
+{
+    ComponentPickerviewAttributeSetTest001();
+    ComponentPickerviewAttributeSetTest002();
+    ComponentPickerviewAttributeSetTest003();
+    ComponentPickerviewAttributeSetTest004();
+    ComponentPickerviewAttributeSetTest005();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: ComponentPickerviewAttributeSetTest001
+ * @tc.desc: Verify picker-view invalid type attribute.
+ * @tc.require: AR000DSEFD
+ */
+HWTEST_F(PickerViewTddTest, PickerviewAttr001, TestSize.Level1)
+{
+    PickerViewTddTest::ComponentPickerviewAttributeSetTest001();
+}
+
+/**
+ * @tc.name: ComponentPickerviewAttributeSetTest002
+ * @tc.desc: Verify text picker-view valid attributes.
+ * @tc.require: AR000DSEFD
+ */
+HWTEST_F(PickerViewTddTest, PickerviewAttr002, TestSize.Level1)
+{
+    PickerViewTddTest::ComponentPickerviewAttributeSetTest002();
+}
+
+/**
+ * @tc.name: ComponentPickerviewAttributeSetTest003
+ * @tc.desc: Verify text picker-view invalid range attribute.
+ * @tc.require: AR000DSEFD
+ */
+HWTEST_F(PickerViewTddTest, PickerviewAttr003, TestSize.Level1)
+{
+    PickerViewTddTest::ComponentPickerviewAttributeSetTest003();
+}
+
+/**
+ * @tc.name: ComponentPickerviewAttributeSetTest004
+ * @tc.desc: Verify text picker-view invalid selected attribute.
+ * @tc.require: AR000DSEFD
+ */
+HWTEST_F(PickerViewTddTest, PickerviewAttr004, TestSize.Level1)
+{
+    PickerViewTddTest::ComponentPickerviewAttributeSetTest004();
+}
+
+/**
+ * @tc.name: ComponentPickerviewAttributeSetTest005
+ * @tc.desc: Verify text picker-view with out of bound selected attribute.
+ * @tc.require: AR000DSEFD
+ */
+HWTEST_F(PickerViewTddTest, PickerviewAttr005, TestSize.Level1)
+{
+    PickerViewTddTest::ComponentPickerviewAttributeSetTest005();
+}
+#endif
+} // ACELite
+} // OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/picker_view_tdd_test.h b/frameworks/src/core/components/test/unittest/common/picker_view_tdd_test.h
new file mode 100755
index 0000000..a734fda
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/picker_view_tdd_test.h
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef ACELITE_PICKER_VIEW_TDD_TEST_H
+#define ACELITE_PICKER_VIEW_TDD_TEST_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#endif
+
+#include "acelite_config.h"
+#include "component_factory.h"
+#include "root_component_mock.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+static jerry_value_t g_globObj;
+static jerry_value_t g_attrsObj;
+static jerry_value_t g_styleObj;
+static uint16_t g_componentNameId;
+static int32_t g_width = 400;
+static int32_t g_height = 400;
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class PickerViewTddTest : public testing::Test {
+#else
+class PickerViewTddTest {
+#endif
+public:
+
+    PickerViewTddTest();
+    ~PickerViewTddTest(){};
+    void SetUp();
+    void TearDown();
+    Component* GetRenderedComponent(uint16_t componentKeyId) const;
+    static uint16_t SetCompnentNameId(const char* componentName);
+    static void SetTextPickerRange();
+    static void SetCharAttribute(const char* keyName, const char* attribute);
+    void SetNumAttribute(const char* keyName, const int32_t attribute);
+
+    void SetNumStyle(const char* keyName, const int32_t style);
+    void ComponentPickerviewAttributeSetTest001();
+    void ComponentPickerviewAttributeSetTest002();
+    void ComponentPickerviewAttributeSetTest003();
+    void ComponentPickerviewAttributeSetTest004();
+    void ComponentPickerviewAttributeSetTest005();
+    void RunTests();
+
+private:
+    RootComponentMock rootComponentMock_;
+};
+} // namespace ACELite
+} // namesapce OHOS
+#endif // ACELITE_PICKER_VIEW_TDD_TEST_H
diff --git a/frameworks/src/core/components/test/unittest/common/radio_switch_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/radio_switch_tdd_test.cpp
new file mode 100755
index 0000000..c4a794d
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/radio_switch_tdd_test.cpp
@@ -0,0 +1,530 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#include "radio_switch_tdd_test.h"
+#include "ui_radio_button.h"
+#include "ui_toggle_button.h"
+namespace OHOS {
+namespace ACELite {
+RadioSwitchTddTest::RadioSwitchTddTest() : radioComponentId_(0), switchComponentId_(0)
+{
+    const int switchNameLen = 3;
+    switchComponentId_ = KeyParser::ParseKeyId("switch", switchNameLen);
+    const int inputNameLen = 5;
+    radioComponentId_ = KeyParser::ParseKeyId("input", inputNameLen);
+}
+
+void RadioSwitchTddTest::WidthRadioValueTest001()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.set the input type radio
+     */
+    JerrySetStringProperty(attrsObj_, "type", "radio");
+
+    /**
+     * @tc.steps:step2.set the input width 25
+     * @tc.expected:step2.the radio width is 25
+     */
+    int32_t width = 25;
+    JerrySetNumberProperty(styleObj_, "width", width);
+    Component *component = GetRenderedComponent(radioComponentId_);
+    UIRadioButton *radio = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (radio->GetWidth() != width) {
+        printf("[WidthRadioValueTest001] set the radio width 25 failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_FALSE(radio->GetWidth() != width);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step3.set the input width -1
+     * @tc.steps:step3.the radio width is the default length 46
+     */
+    width = -1;
+    const uint8_t defaultLen = 46;
+    JerrySetNumberProperty(styleObj_, "width", width);
+    component = GetRenderedComponent(radioComponentId_);
+    radio = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (radio->GetWidth() != defaultLen) {
+        printf("[WidthRadioValueTest001] set the radio width 0 failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_FALSE(radio->GetWidth() != defaultLen);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step4.set the input width INT16_MAX + 20
+     * @tc.steps:step4.the width of radio is 19
+     */
+    width = MAX_VALUE;
+    JerrySetNumberProperty(styleObj_, "width", width);
+    component = GetRenderedComponent(radioComponentId_);
+    radio = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (radio->GetWidth() != CHECK_LEN) {
+        printf("[WidthRadioValueTest001] set the radio width INT16_MAX + 20 failed\n");
+    } else {
+        printf("[WidthRadioValueTest001] passed\n");
+    }
+    EXPECT_FALSE(radio->GetWidth() != CHECK_LEN);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void RadioSwitchTddTest::WidthRadioValueTest002()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.set the input type radio
+     */
+    JerrySetStringProperty(attrsObj_, "type", "radio");
+
+    /**
+     * @tc.steps:step2.set the radio width false
+     * @tc.expected:step2.the width of radio is defaultLength 46
+     */
+    jerry_value_t widthValue = jerry_create_boolean(false);
+    JerrySetNamedProperty(styleObj_, "width", widthValue);
+    jerry_release_value(widthValue);
+    Component *component = GetRenderedComponent(radioComponentId_);
+    UIRadioButton *radio = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (radio->GetWidth() != 0) {
+        printf("[WidthRadioValueTest002] set the width false failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_FALSE(radio->GetWidth() != 0);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step3.set the radio width testaaa
+     * @tc.expected:step3.the width of radio is defaultLen 46
+     */
+    JerrySetStringProperty(styleObj_, "width", "testaaa");
+    component = GetRenderedComponent(radioComponentId_);
+    radio = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (radio->GetWidth() != 0) {
+        printf("[WidthRadioValueTest002] set the radio width testaaa failed\n");
+    } else {
+        printf("[WidthRadioValueTest002] passed\n");
+    }
+    EXPECT_FALSE(radio->GetWidth() != 0);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void RadioSwitchTddTest::WidthSwitchValueTest003()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.set the radio width 25
+     * @tc.expected:step1.the width of toggleButton is 25
+     */
+    int32_t width = 25;
+    JerrySetNumberProperty(styleObj_, "width", width);
+    Component *component = GetRenderedComponent(switchComponentId_);
+    UIToggleButton *toggleButton = reinterpret_cast<UIToggleButton *>(component->GetComponentRootView());
+    if (toggleButton->GetWidth() != width) {
+        printf("[WidthSwitchValueTest003] set the switch width 25 failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_TRUE(toggleButton->GetWidth() == width);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step2.set the radio width 0
+     * @tc.expected:step2.the radio width is the defaultLen 46
+     */
+    const uint8_t defaultLen = 46;
+    width = -1;
+    JerrySetNumberProperty(styleObj_, "width", width);
+    component = GetRenderedComponent(switchComponentId_);
+    toggleButton = reinterpret_cast<UIToggleButton *>(component->GetComponentRootView());
+    if (toggleButton->GetWidth() != defaultLen) {
+        printf("[WidthSwitchValueTest003] set the switch width -1 failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_TRUE(toggleButton->GetWidth() == defaultLen);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step3.set the switch width 256
+     * @tc.expected:step3.the width of switch is 256
+     */
+    width = MAX_VALUE;
+    JerrySetNumberProperty(styleObj_, "width", width);
+    component = GetRenderedComponent(switchComponentId_);
+    toggleButton = reinterpret_cast<UIToggleButton *>(component->GetComponentRootView());
+    if (toggleButton->GetWidth() != CHECK_LEN) {
+        printf("[WidthSwitchValueTest003] set the switch width int16_max + 20 failed\n");
+    } else {
+        printf("[WidthSwitchValueTest003] passed\n");
+    }
+    EXPECT_TRUE(toggleButton->GetWidth() == CHECK_LEN);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void RadioSwitchTddTest::WidthSwitchValueTest004()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.set the width of switch false
+     * @tc.expected:step1.the width of switch is defaultLen 46
+     */
+    jerry_value_t widthVal = jerry_create_boolean(false);
+    JerrySetNamedProperty(styleObj_, "width", widthVal);
+    jerry_release_value(widthVal);
+    Component *component = GetRenderedComponent(switchComponentId_);
+    UIToggleButton *toggleButton = reinterpret_cast<UIToggleButton *>(component->GetComponentRootView());
+    if (toggleButton->GetWidth() != 0) {
+        printf("[WidthSwitchValueTest004]set the width of switch false failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_TRUE(toggleButton->GetWidth() == 0);
+    delete component;
+    component = nullptr;
+
+    JerrySetStringProperty(styleObj_, "width", "testaaa");
+    component = GetRenderedComponent(switchComponentId_);
+    toggleButton = reinterpret_cast<UIToggleButton *>(component->GetComponentRootView());
+    if (toggleButton->GetWidth() == 0) {
+        printf("[WidthSwitchValueTest004] passed\n");
+    } else {
+        printf("[WidthSwitchValueTest004] set the width of switch testaaa failed\n");
+    }
+    EXPECT_TRUE(toggleButton->GetWidth() == 0);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void RadioSwitchTddTest::HeightRadioValueTest005()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.set the input type radio
+     */
+    JerrySetStringProperty(attrsObj_, "type", "radio");
+
+    /**
+     * @tc.steps:step2.set the width of radio 25
+     * @tc.expected:step2.the width of radio is 25
+     */
+    int32_t height = 25;
+    JerrySetNumberProperty(styleObj_, "height", height);
+    Component *component = GetRenderedComponent(radioComponentId_);
+    UIToggleButton *toggleButton = reinterpret_cast<UIToggleButton *>(component->GetComponentRootView());
+    if (toggleButton->GetHeight() != height) {
+        printf("[HeightRadioValueTest005] set the height of radio 25 failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_TRUE(toggleButton->GetHeight() == height);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step3.set the height of radio 0
+     * @tc.expected:step3.the height of radio is defaultLen 46
+     */
+    height = -1;
+    const uint8_t defaultLen = 46;
+    JerrySetNumberProperty(styleObj_, "height", height);
+    component = GetRenderedComponent(radioComponentId_);
+    toggleButton = reinterpret_cast<UIToggleButton *>(component->GetComponentRootView());
+    if (toggleButton->GetHeight() != defaultLen) {
+        printf("[HeightRadioValueTest005] set the height of radio 0 failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_TRUE(toggleButton->GetHeight() == defaultLen);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step4.set the height of radio UINT16_MAX + 20
+     * @tc.steps:step4.the height of radio is 19
+     */
+    height = MAX_VALUE;
+    JerrySetNumberProperty(styleObj_, "height", height);
+    component = GetRenderedComponent(radioComponentId_);
+    toggleButton = reinterpret_cast<UIToggleButton *>(component->GetComponentRootView());
+    if (toggleButton->GetHeight() != CHECK_LEN) {
+        printf("[HeightRadioValueTest005] set the height of radio UINT16_MAX + 20 failed\n");
+    } else {
+        printf("[HeightRadioValueTest005] passed\n");
+    }
+    EXPECT_TRUE(toggleButton->GetHeight() == CHECK_LEN);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void RadioSwitchTddTest::HeightRadioValueTest006()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.set the input type radio
+     */
+    JerrySetStringProperty(attrsObj_, "type", "radio");
+
+    /**
+     * @tc.steps:step2.set the height of radio false
+     * @tc.expected:step2.the height of radio is the defaultLen 46
+     */
+    jerry_value_t widthVal = jerry_create_boolean(false);
+    JerrySetNamedProperty(styleObj_, "width", widthVal);
+    jerry_release_value(widthVal);
+    Component *component = GetRenderedComponent(switchComponentId_);
+    UIRadioButton *radioButton = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (radioButton->GetWidth() != 0) {
+        printf("[HeightRadioValueTest006] set the height of switch false");
+        delete component;
+        return;
+    }
+    EXPECT_TRUE(radioButton->GetWidth() == 0);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step3.set the height of radio testaaa
+     * @tc.expected:step3.the height of radio is defaultLen 46
+     */
+    JerrySetStringProperty(styleObj_, "width", "testaaa");
+    component = GetRenderedComponent(switchComponentId_);
+    radioButton = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (radioButton->GetWidth() != 0) {
+        printf("[HeightRadioValueTest006] set the height of switch testaaa failed\n");
+    } else {
+        printf("[HeightRadioValueTest006] passed\n");
+    }
+    EXPECT_TRUE(radioButton->GetWidth() == 0);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void RadioSwitchTddTest::HeightSwitchValueTest007()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.set the height of switch 25
+     * @tc.steps:step1.the height of radio is 25
+     */
+    int32_t height = 25;
+    JerrySetNumberProperty(styleObj_, "height", height);
+    Component *component = GetRenderedComponent(switchComponentId_);
+    UIRadioButton *button = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (button->GetHeight() != height) {
+        printf("[HeightSwitchValueTest007]set the switch height 25 failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_TRUE(button->GetHeight() == height);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step2.set the height of switch 0
+     * @tc.expected:step2.the height of switch is the default length 46
+     */
+    height = -1;
+    const uint8_t defaultLen = 46;
+    JerrySetNumberProperty(styleObj_, "height", height);
+    component = GetRenderedComponent(switchComponentId_);
+    button = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (button->GetHeight() != defaultLen) {
+        printf("[HeightSwitchValueTest007] set the height of switch -1 failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_TRUE(button->GetHeight() == defaultLen);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps:step3.set the height of switch INT16_MAX + 20
+     * @tc.expected:step3.the height of switch is the default length 19
+     */
+    height = MAX_VALUE;
+    JerrySetNumberProperty(styleObj_, "height", height);
+    component = GetRenderedComponent(switchComponentId_);
+    button = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (button->GetHeight() != CHECK_LEN) {
+        printf("[HeightSwitchValueTest007] set the height of switch 256 failed\n");
+    } else {
+        printf("[HeightSwitchValueTest007] passed\n");
+    }
+    EXPECT_TRUE(button->GetHeight() == CHECK_LEN);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void RadioSwitchTddTest::HeightSwitchValueTest008()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step1.set the switch heifhr false
+     * @tc.expected: step1.the height is the default height 46
+     */
+    jerry_value_t number = jerry_create_boolean(false);
+    JerrySetNamedProperty(styleObj_, "height", number);
+    jerry_release_value(number);
+    Component *component = GetRenderedComponent(switchComponentId_);
+    UIRadioButton *button = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (button->GetHeight() != 0) {
+        printf("[HeightSwitchValueTest008] set the height of switch false failed\n");
+        delete component;
+        return;
+    }
+    EXPECT_TRUE(button->GetHeight() == 0);
+    delete component;
+    component = nullptr;
+
+    /**
+     * @tc.steps: step2.set the switch height testaaa
+     * @tc.expected: step2.the height of toggleButton is default height 46
+     */
+    JerrySetStringProperty(styleObj_, "height", "testaaa");
+    component = GetRenderedComponent(switchComponentId_);
+    button = reinterpret_cast<UIRadioButton *>(component->GetComponentRootView());
+    if (button->GetHeight() != 0) {
+        printf("[HeightSwitchValueTest008]set the height of switch testaaa failed\n");
+    } else {
+        printf("[HeightSwitchValueTest008] passed\n");
+    }
+    EXPECT_TRUE(button->GetHeight() == 0);
+    delete component;
+    component = nullptr;
+    TDD_CASE_END();
+}
+
+void RadioSwitchTddTest::RunTests()
+{
+    WidthRadioValueTest001();
+    WidthRadioValueTest002();
+    WidthSwitchValueTest003();
+    WidthSwitchValueTest004();
+    HeightRadioValueTest005();
+    HeightRadioValueTest006();
+    HeightSwitchValueTest007();
+    HeightSwitchValueTest008();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: Width_Radio_Value_Test001
+ * @tc.desc: test the radio width in different range
+ * @tc.require: AR000F3PDH
+ */
+HWTEST_F(RadioSwitchTddTest, radioWidthTest001, TestSize.Level1)
+{
+    WidthRadioValueTest001();
+}
+
+/**
+ * @tc.name: Width_Radio_Value_Test002
+ * @tc.desc: test the radio width in invalid value
+ * @tc.require: AR000F3PDH
+ */
+HWTEST_F(RadioSwitchTddTest, radioWidthTest002, TestSize.Level1)
+{
+    WidthRadioValueTest002();
+}
+
+/**
+ * @tc.name: Width_Switch_Value_Test003
+ * @tc.desc: test the switch width in different range
+ * @tc.require: AR000F3PDH
+ */
+HWTEST_F(RadioSwitchTddTest, widthSwitchTest003, TestSize.Level1)
+{
+    WidthSwitchValueTest003();
+}
+
+/**
+ * @tc.name: Width_Switch_Value_Test004
+ * @tc.desc: set the width of switch invalid value
+ * @tc.require: AR000F3PDH
+ */
+HWTEST_F(RadioSwitchTddTest, widthSwitchTest004, TestSize.Level1)
+{
+    WidthSwitchValueTest004();
+}
+
+/**
+ * @tc.name: Height_Radio_Value_Test005
+ * @tc.desc: set the height of radio in different range
+ * @tc.require: AR000F3PDH
+ */
+HWTEST_F(RadioSwitchTddTest, heightRadioTest005, TestSize.Level1)
+{
+    HeightRadioValueTest005();
+}
+
+/**
+ * @tc.name: Height_Radio_Value_Test006
+ * @tc.desc: set the height of radio invalid value
+ * @tc.require: AR000F3PDH
+ */
+HWTEST_F(RadioSwitchTddTest, heightRadioTest006, TestSize.Level1)
+{
+    HeightRadioValueTest006();
+}
+
+/**
+ * @tc.name: Height_Switch_Value_Test007
+ * @tc.desc: set the height of radio invalid value
+ * @tc.require: AR000F3PDH
+ */
+HWTEST_F(RadioSwitchTddTest, heightSwitchTest007, TestSize.Level1)
+{
+    HeightSwitchValueTest007();
+}
+
+/**
+ * @tc.name: Height_Switch_Value_Test008
+ * @tc.desc: set the height of radio invalid value
+ * @tc.require: AR000F3PDH
+ */
+HWTEST_F(RadioSwitchTddTest, heightSwitchTest008, TestSize.Level1)
+{
+    HeightSwitchValueTest008();
+}
+#endif
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/radio_switch_tdd_test.h b/frameworks/src/core/components/test/unittest/common/radio_switch_tdd_test.h
new file mode 100755
index 0000000..9f1ba4a
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/radio_switch_tdd_test.h
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef RADIO_SWITCH_TDD_TEST_H
+#define RADIO_SWITCH_TDD_TEST_H
+#include <cstdint>
+#include "base_test.h"
+namespace OHOS {
+namespace ACELite {
+class RadioSwitchTddTest : public BaseTest {
+public:
+    RadioSwitchTddTest();
+    ~RadioSwitchTddTest() override {}
+    void RunTests();
+    void WidthRadioValueTest001();
+    void WidthRadioValueTest002();
+    void WidthSwitchValueTest003();
+    void WidthSwitchValueTest004();
+    void HeightRadioValueTest005();
+    void HeightRadioValueTest006();
+    void HeightSwitchValueTest007();
+    void HeightSwitchValueTest008();
+
+private:
+    constexpr static uint32_t MAX_VALUE = 65555;
+    constexpr static int16_t CHECK_LEN = MAX_VALUE - UINT16_MAX - 1;
+    uint16_t radioComponentId_;
+    uint16_t switchComponentId_;
+};
+}
+}
+
+#endif // RADIO_SWITCH_TDD_TEST_H
diff --git a/frameworks/src/core/components/test/unittest/common/root_component_mock.cpp b/frameworks/src/core/components/test/unittest/common/root_component_mock.cpp
new file mode 100755
index 0000000..720f296
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/root_component_mock.cpp
@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "root_component_mock.h"
+
+#include "div_component.h"
+#include "stack_component.h"
+
+namespace OHOS {
+namespace ACELite {
+RootComponentMock::RootComponentMock()
+    : rootContainer_(nullptr),
+      containerStyleMgr_(nullptr),
+      rootWidth_(DEFAULT_CONTAINER_WIDTH),
+      rootHeight_(DEFAULT_CONTAINER_HEIGHT)
+{
+}
+
+RootComponentMock::~RootComponentMock()
+{
+    if (containerStyleMgr_ != nullptr) {
+        delete containerStyleMgr_;
+        containerStyleMgr_ = nullptr;
+    }
+
+    if (rootContainer_ != nullptr) {
+        // we do not render this container, so no need to call release
+        delete rootContainer_;
+        rootContainer_ = nullptr;
+    }
+}
+
+/**
+ * @brief PrepareRootContainer prepare the container, must call this after engine initialized
+ */
+void RootComponentMock::PrepareRootContainer(int16_t width, int16_t height, bool flex)
+{
+    rootWidth_ = width;
+    rootHeight_ = height;
+
+    if (containerStyleMgr_ == nullptr) {
+        containerStyleMgr_ = new AppStyleManager();
+    }
+
+    if (rootContainer_ == nullptr) {
+        if (flex) {
+            rootContainer_ = new DivComponent(UNDEFINED, UNDEFINED, containerStyleMgr_);
+        } else {
+            rootContainer_ = new StackComponent(UNDEFINED, UNDEFINED, containerStyleMgr_);
+        }
+    }
+}
+
+/**
+ * @brief RenderUnderTestComponent render the given component and build view tree to the container
+ * @param component the under test component
+ */
+void RootComponentMock::RenderComponent(Component &component) const
+{
+    component.Render();
+    // trigger build tree flow to apply aligned dimension to low layer
+    ConstrainedParameter parentParameter = {rootWidth_, rootHeight_};
+    Component::BuildViewTree(&component, rootContainer_, parentParameter);
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/root_component_mock.h b/frameworks/src/core/components/test/unittest/common/root_component_mock.h
new file mode 100755
index 0000000..2145bda
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/root_component_mock.h
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef ACELITE_JSFWK_TEST_CONTAINER_HOLDER_H
+#define ACELITE_JSFWK_TEST_CONTAINER_HOLDER_H
+
+#include "component.h"
+#include "stylemgr/app_style_manager.h"
+
+namespace OHOS {
+namespace ACELite {
+class RootComponentMock final {
+public:
+    RootComponentMock();
+    ~RootComponentMock();
+
+    /**
+     * @brief PrepareRootContainer prepare the container
+     */
+    void PrepareRootContainer(int16_t width = DEFAULT_CONTAINER_WIDTH,
+                              int16_t height = DEFAULT_CONTAINER_HEIGHT,
+                              bool flex = true);
+    /**
+     * @brief RenderUnderTestComponent render the given component and build view tree to the container
+     * @param component the under test component
+     */
+    void RenderComponent(Component &component) const;
+
+private:
+    static const int16_t DEFAULT_CONTAINER_WIDTH = 454;
+    static const int16_t DEFAULT_CONTAINER_HEIGHT = 454;
+    // used for build view tree flow, no specific meaning
+    Component *rootContainer_;
+    AppStyleManager *containerStyleMgr_;
+    int16_t rootWidth_;
+    int16_t rootHeight_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // ACELITE_JSFWK_TEST_CONTAINER_HOLDER_H
diff --git a/frameworks/src/core/components/test/unittest/common/slider_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/slider_tdd_test.cpp
new file mode 100755
index 0000000..c503a73
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/slider_tdd_test.cpp
@@ -0,0 +1,423 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "slider_tdd_test.h"
+#include "acelite_config.h"
+#include "component_factory.h"
+#include "js_app_environment.h"
+#include "root_view.h"
+#include "slider_component.h"
+#include "ui_slider.h"
+
+namespace OHOS {
+namespace ACELite {
+SliderTddTest::SliderTddTest():BaseTest()
+{
+    componentNameId_ = KeyParser::ParseKeyId("slider");
+}
+
+void SliderTddTest::ComponentSliderAttributeMinTest001()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set Slider attribute min value = 0
+     */
+    const int expectMinValue = 0;
+    const char* minStr = "min";
+    jerry_value_t minKey = jerry_create_string((const jerry_char_t*)minStr);
+    jerry_value_t minValue = jerry_create_number(expectMinValue);
+    jerry_set_property(attrsObj_, minKey, minValue);
+    Component* sliderComponent = reinterpret_cast<SliderComponent *>(GetRenderedComponent(componentNameId_));
+    UISlider* sliderView = reinterpret_cast<UISlider *>(sliderComponent->GetComponentRootView());
+    jerry_release_value(minKey);
+    jerry_release_value(minValue);
+
+    /**
+     * @tc.expected: step2. uikit sliderView minvalue == 0
+     */
+    if (sliderView->GetRangeMin() == expectMinValue) {
+        printf("%s pass\n", __FUNCTION__);
+    } else {
+        printf("%s fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(sliderView->GetRangeMin(), expectMinValue);
+
+    /* minValue is [-32767,32767], set min value = 32768 */
+    /**
+     * @tc.expected: step4. update min value = 32768, check sliderView.minValue != 32768
+     */
+    const int expectMinValue3 = 32768;
+    UpdateNumAttributeOrStyleValue(sliderComponent, minStr, expectMinValue3, true);
+    if (sliderView->GetRangeMin() != expectMinValue3) {
+        printf("%s  update min overflow value pass\n", __FUNCTION__);
+    } else {
+        printf("%s update min overflow value  fail\n", __FUNCTION__);
+    }
+    EXPECT_NE(sliderView->GetRangeMin(), expectMinValue3);
+
+    TDD_CASE_END();
+}
+
+void SliderTddTest::ComponentSliderAttributeMaxTest002()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set Slider attribute max = 0
+     */
+    const int expectMaxValue = 1;
+    const char* maxStr = "max";
+    jerry_value_t maxKey = jerry_create_string((const jerry_char_t*)maxStr);
+    jerry_value_t maxValue = jerry_create_number(expectMaxValue);
+    jerry_set_property(attrsObj_, maxKey, maxValue);
+    Component* sliderComponent = reinterpret_cast<SliderComponent *>(GetRenderedComponent(componentNameId_));
+    UISlider* sliderView = reinterpret_cast<UISlider *>(sliderComponent->GetComponentRootView());
+    jerry_release_value(maxKey);
+    jerry_release_value(maxValue);
+    /**
+     * @tc.expected: step2. uikit sliderView maxvalue == 0
+     */
+    if (sliderView->GetRangeMax() == expectMaxValue) {
+        printf("%s set value pass\n", __FUNCTION__);
+    } else {
+        printf("%s set value fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(sliderView->GetRangeMax(), expectMaxValue);
+
+    /**
+     * @tc.expected: step4. update max value = 32768, check sliderView.maxValue != 32768
+     */
+    const int expectMaxValue3 = 32768;
+    UpdateNumAttributeOrStyleValue(sliderComponent, maxStr, expectMaxValue3, true);
+    if (sliderView->GetRangeMax() != expectMaxValue3) {
+        printf("%s update max overflow value pass\n", __FUNCTION__);
+    } else {
+        printf("%s update max overflow value  fail\n", __FUNCTION__);
+    }
+    EXPECT_NE(sliderView->GetRangeMax(), expectMaxValue3);
+
+    TDD_CASE_END();
+}
+
+void SliderTddTest::ComponentSliderAttributeValueTest003()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set Slider attribute value = 0
+     */
+    const int expectValue = 100;
+    const char* valueStr = "value";
+    jerry_value_t valueKey = jerry_create_string((const jerry_char_t*)valueStr);
+    jerry_value_t value = jerry_create_number(expectValue);
+    jerry_set_property(attrsObj_, valueKey, value);
+    Component* sliderComponent = reinterpret_cast<SliderComponent *>(GetRenderedComponent(componentNameId_));
+    UISlider* sliderView = reinterpret_cast<UISlider *>(sliderComponent->GetComponentRootView());
+    jerry_release_value(valueKey);
+    jerry_release_value(value);
+    /**
+     * @tc.expected: step2. check uikit sliderView value == 0
+     */
+    if (sliderView->GetValue() == expectValue) {
+        printf("%s pass\n", __FUNCTION__);
+    } else {
+        printf("%s fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(sliderView->GetValue(), expectValue);
+
+    /**
+     * @tc.expected: step3. update value = 32767, check sliderView.value == 32767
+     */
+    const int expectValue2 = 32767;
+    UpdateNumAttributeOrStyleValue(sliderComponent, valueStr, expectValue2, true);
+    if (sliderView->GetValue() != expectValue2) {
+        printf("%s update value value pass\n", __FUNCTION__);
+    } else {
+        printf("%s update value value fail\n", __FUNCTION__);
+    }
+    EXPECT_NE(sliderView->GetValue(), expectValue2);
+
+    /**
+     * @tc.expected: step4. update value = 32768, check sliderView.value != 32768
+     */
+    const int expectValue3 = 32768;
+    UpdateNumAttributeOrStyleValue(sliderComponent, valueStr, expectValue3, true);
+    if (sliderView->GetValue() != expectValue3) {
+        printf("%s update value overflow value pass\n", __FUNCTION__);
+    } else {
+        printf("%s update value overflow value fail\n", __FUNCTION__);
+    }
+    EXPECT_NE(sliderView->GetValue(), expectValue3);
+
+    TDD_CASE_END();
+}
+
+void SliderTddTest::ComponentSliderStyleSetColorTest004()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set text color value = 16711680
+     */
+    const int expectColorValue = 16711680;
+    const char* colorStr = "color";
+    jerry_value_t textKey = jerry_create_string((const jerry_char_t*)colorStr);
+    jerry_value_t textColorValue = jerry_create_number(expectColorValue);
+    jerry_set_property(styleObj_, textKey, textColorValue);
+    Component* sliderComponent = reinterpret_cast<SliderComponent *>(GetRenderedComponent(componentNameId_));
+    UISlider* uiSliderView = reinterpret_cast<UISlider *>(sliderComponent->GetComponentRootView());
+    jerry_release_value(textKey);
+    jerry_release_value(textColorValue);
+    /**
+     * @tc.expected: step2. check uikit sliderView color = 16711680 (red color)
+     */
+    if (uiSliderView->GetBackgroundStyle(STYLE_BACKGROUND_COLOR) == GetRGBColor(expectColorValue).full) {
+        printf("%s pass\n", __FUNCTION__);
+    } else {
+        printf("%s fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uiSliderView->GetBackgroundStyle(STYLE_BACKGROUND_COLOR), GetRGBColor(expectColorValue).full);
+
+    /**
+     * @tc.expected: step3. update color = expectColorValue2, check uikit sliderView color == expectColorValue2
+     */
+    const int32_t expectColorValue2 = 16777215;
+    UpdateNumAttributeOrStyleValue(sliderComponent, colorStr, expectColorValue2, false);
+    if (uiSliderView->GetBackgroundStyle(STYLE_BACKGROUND_COLOR) == GetRGBColor(expectColorValue2).full) {
+        printf("%s update color pass\n", __FUNCTION__);
+    } else {
+        printf("%s update color fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uiSliderView->GetBackgroundStyle(STYLE_BACKGROUND_COLOR), GetRGBColor(expectColorValue2).full);
+
+    /**
+     * @tc.expected: step4. update color = expectColorValue3,
+     * check uikit sliderView color == expectColorValue3,
+     */
+    const int32_t expectColorValue3 = 16777216;
+    UpdateNumAttributeOrStyleValue(sliderComponent, colorStr, expectColorValue3, false);
+    if (uiSliderView->GetBackgroundStyle(STYLE_BACKGROUND_COLOR) == GetRGBColor(expectColorValue3).full) {
+        printf("%s update overflow color pass\n", __FUNCTION__);
+    } else {
+        printf("%s update overflow color fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uiSliderView->GetBackgroundStyle(STYLE_BACKGROUND_COLOR), GetRGBColor(expectColorValue3).full);
+
+    /**
+     * @tc.expected: step5. set exceptionColorStrValue with exception value  "helloWorld",
+     *  program keep going
+     */
+    const char* exceptionColorStrValue = "helloWorld";
+    UpdateCharAttributeOrStyleValue(sliderComponent, colorStr, exceptionColorStrValue, false);
+
+    TDD_CASE_END();
+}
+
+void SliderTddTest::ComponentSliderStyleSetSelectColorTest005()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set slider selected color value = 16711680
+     */
+    const int expectColorValue = 16711680;
+    const char* selectedColorStr = "selectedColor";
+    jerry_value_t selectedColorKey = jerry_create_string((const jerry_char_t*)selectedColorStr);
+    jerry_value_t selectedColorValue = jerry_create_number(expectColorValue);
+
+    jerry_set_property(styleObj_, selectedColorKey, selectedColorValue);
+
+    Component* sliderComponent = reinterpret_cast<SliderComponent *>(GetRenderedComponent(componentNameId_));
+    UISlider* uiSliderView = reinterpret_cast<UISlider *>(sliderComponent->GetComponentRootView());
+
+    jerry_release_value(selectedColorKey);
+    jerry_release_value(selectedColorValue);
+
+    /**
+     * @tc.expected: step2. check uikit sliderView select color = 16711680 (red color)
+     */
+    if (uiSliderView->GetForegroundStyle(STYLE_BACKGROUND_COLOR) == GetRGBColor(expectColorValue).full) {
+        printf("%s pass\n", __FUNCTION__);
+    } else {
+        printf("%s fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uiSliderView->GetForegroundStyle(STYLE_BACKGROUND_COLOR), GetRGBColor(expectColorValue).full);
+
+    /**
+     * @tc.expected: step3. update slectedcolor = expectColorValue2, check uikit sliderView selectcolor ==
+     * expectColorValue2
+     */
+    const int32_t expectColorValue2 = 16777215;
+    UpdateNumAttributeOrStyleValue(sliderComponent, selectedColorStr, expectColorValue2, false);
+    if (uiSliderView->GetForegroundStyle(STYLE_BACKGROUND_COLOR) == GetRGBColor(expectColorValue2).full) {
+        printf("%s update selectedColor pass\n", __FUNCTION__);
+    } else {
+        printf("%s update selectedColor fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uiSliderView->GetForegroundStyle(STYLE_BACKGROUND_COLOR), GetRGBColor(expectColorValue2).full);
+
+    /**
+     * @tc.expected: step4. update  selectedcolor with overflow expectColorValue3,
+     * check uikit sliderView color == expectColorValue3,
+     */
+    const int32_t expectColorValue3 = 16777216;
+    UpdateNumAttributeOrStyleValue(sliderComponent, selectedColorStr, expectColorValue3, false);
+    if (uiSliderView->GetForegroundStyle(STYLE_BACKGROUND_COLOR) == GetRGBColor(expectColorValue3).full) {
+        printf("%s update overflow selectedColor pass\n", __FUNCTION__);
+    } else {
+        printf("%s update overflow selectedColor fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uiSliderView->GetForegroundStyle(STYLE_BACKGROUND_COLOR), GetRGBColor(expectColorValue3).full);
+
+    /**
+     * @tc.expected: step5. set exceptionColorStrValue with exception value  "helloWorld",
+     *  program keep going
+     */
+    const char* expectColorStrValue = "helloWorld";
+    UpdateCharAttributeOrStyleValue(sliderComponent, selectedColorStr, expectColorStrValue, false);
+
+    TDD_CASE_END();
+}
+
+void SliderTddTest::ComponentSliderStyleSetBlockColorTest006()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set slider blockcolor value = 16711680
+     */
+    const int expectColorValue = 16711680;
+    const char* blockColorStr = "blockColor";
+    jerry_value_t blockColorKey = jerry_create_string((const jerry_char_t*)blockColorStr);
+    jerry_value_t blockColorValue = jerry_create_number(expectColorValue);
+    jerry_set_property(styleObj_, blockColorKey, blockColorValue);
+    Component* sliderComponent = reinterpret_cast<SliderComponent  *>(GetRenderedComponent(componentNameId_));
+    UISlider* uiSliderView = reinterpret_cast<UISlider *>(sliderComponent->GetComponentRootView());
+    jerry_release_value(blockColorKey);
+    jerry_release_value(blockColorValue);
+
+    /**
+     * @tc.expected: step2. check uikit sliderView blockcolor = 16711680 (red color)
+     */
+    if (uiSliderView->GetKnobStyle(STYLE_BACKGROUND_COLOR) == GetRGBColor(expectColorValue).full) {
+        printf("%s pass\n", __FUNCTION__);
+    } else {
+        printf("%s fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uiSliderView->GetKnobStyle(STYLE_BACKGROUND_COLOR), GetRGBColor(expectColorValue).full);
+
+    /**
+     * @tc.expected: step3. update blockColor = expectColorValue2, check uikit sliderView color == expectColorValue2
+     */
+    const int32_t expectColorValue2 = 16777215;
+    UpdateNumAttributeOrStyleValue(sliderComponent, blockColorStr, expectColorValue2, false);
+    if (uiSliderView->GetKnobStyle(STYLE_BACKGROUND_COLOR) == GetRGBColor(expectColorValue2).full) {
+        printf("%s update blockColor pass\n", __FUNCTION__);
+    } else {
+        printf("%s update blockColor fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uiSliderView->GetKnobStyle(STYLE_BACKGROUND_COLOR), GetRGBColor(expectColorValue2).full);
+
+    /**
+     * @tc.expected: step4. update blockcolor whit overflow expectColorValue3,
+     * check uikit sliderView color == expectColorValue3,
+     */
+    const int32_t expectColorValue3 = 16777216;
+    UpdateNumAttributeOrStyleValue(sliderComponent, blockColorStr, expectColorValue3, false);
+    if (uiSliderView->GetKnobStyle(STYLE_BACKGROUND_COLOR) == GetRGBColor(expectColorValue3).full) {
+        printf("%s update overflow blockColor pass\n", __FUNCTION__);
+    } else {
+        printf("%s update overflow blockColor fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uiSliderView->GetKnobStyle(STYLE_BACKGROUND_COLOR), GetRGBColor(expectColorValue3).full);
+
+    /**
+     * @tc.expected: step5. set exceptionColorStrValue with exception value  "helloWorld",
+     *  program keep going
+     */
+    const char* expectColorStrValue = "helloWorld";
+    UpdateCharAttributeOrStyleValue(sliderComponent, blockColorStr, expectColorStrValue, false);
+
+    TDD_CASE_END();
+}
+
+void SliderTddTest::RunTests()
+{
+    ComponentSliderAttributeMinTest001();
+    ComponentSliderAttributeMaxTest002();
+    ComponentSliderAttributeValueTest003();
+    ComponentSliderStyleSetColorTest004();
+    ComponentSliderStyleSetSelectColorTest005();
+    ComponentSliderStyleSetBlockColorTest006();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name:ComponentSliderAttributeMinTest001
+ * @tc.desc: Verify Slider min value can set normally.
+ * @tc.require: AR000DSEFF
+ */
+HWTEST_F(SliderTddTest, SliderAttr001, TestSize.Level1)
+{
+    SliderTddTest::ComponentSliderAttributeMinTest001();
+}
+
+/**
+ * @tc.name:ComponentSliderAttributeMaxTest002
+ * @tc.desc: Verify Slider max value can set normally.
+ * @tc.require: AR000DSEFF
+ */
+HWTEST_F(SliderTddTest, SliderAttr002, TestSize.Level1)
+{
+    SliderTddTest::ComponentSliderAttributeMaxTest002();
+}
+
+/**
+ * @tc.name:ComponentSliderAttributeValueTest003
+ * @tc.desc: Verify Slider value value can set normally.
+ * @tc.require: AR000DSEFF
+ */
+HWTEST_F(SliderTddTest, SliderAttr003, TestSize.Level1)
+{
+    SliderTddTest::ComponentSliderAttributeValueTest003();
+}
+
+/**
+ * @tc.name:ComponentSliderStyleSetColorTest004
+ * @tc.desc: Verify slider color value.
+ * @tc.require: AR000DSEFF
+ */
+HWTEST_F(SliderTddTest, SliderStyle004, TestSize.Level1)
+{
+    SliderTddTest::ComponentSliderStyleSetColorTest004();
+}
+
+/**
+ * @tc.name:ComponentSliderStyleSetSelectColorTest005
+ * @tc.desc: Verify slider color value.
+ * @tc.require: AR000DSEFF
+ */
+HWTEST_F(SliderTddTest, SliderStyle005, TestSize.Level1)
+{
+    SliderTddTest::ComponentSliderStyleSetSelectColorTest005();
+}
+
+/**
+ * @tc.name:ComponentSliderStyleSetBlockColorTest006
+ * @tc.desc: Verify slider color value.
+ * @tc.require: AR000DSEFF
+ */
+HWTEST_F(SliderTddTest, SliderStyle006, TestSize.Level1)
+{
+    SliderTddTest::ComponentSliderStyleSetBlockColorTest006();
+}
+#endif
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/slider_tdd_test.h b/frameworks/src/core/components/test/unittest/common/slider_tdd_test.h
new file mode 100755
index 0000000..96e93ac
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/slider_tdd_test.h
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef OHOS_ACELITE_TEST_SLIDER_H
+#define OHOS_ACELITE_TEST_SLIDER_H
+
+#include "base_test.h"
+
+namespace OHOS {
+namespace ACELite {
+class SliderTddTest : public BaseTest {
+public:
+    SliderTddTest();
+    ~SliderTddTest() override {};
+    void ComponentSliderAttributeMinTest001();
+    void ComponentSliderAttributeMaxTest002();
+    void ComponentSliderAttributeValueTest003();
+    void ComponentSliderStyleSetColorTest004();
+    void ComponentSliderStyleSetSelectColorTest005();
+    void ComponentSliderStyleSetBlockColorTest006();
+    void RunTests();
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_TEST_SLIDER_H
diff --git a/frameworks/src/core/components/test/unittest/common/swiper_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/swiper_tdd_test.cpp
new file mode 100755
index 0000000..8ba1163
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/swiper_tdd_test.cpp
@@ -0,0 +1,577 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#include "swiper_tdd_test.h"
+#include "js_app_environment.h"
+#include "root_view.h"
+#include "stylemgr/app_style_item.h"
+#include "stylemgr/app_style_manager.h"
+#include "swiper_component.h"
+
+namespace OHOS {
+namespace ACELite {
+SwiperTddTest::SwiperTddTest()
+    : optionsObj_(UNDEFINED),
+      attrsObj_(UNDEFINED),
+      styleObj_(UNDEFINED),
+      eventObj_(UNDEFINED),
+      childrenObj_(UNDEFINED),
+      stack1_(nullptr),
+      stack2_(nullptr),
+      stack3_(nullptr) {}
+
+void SwiperTddTest::SetUp()
+{
+    JsAppEnvironment* appJsEnv = JsAppEnvironment::GetInstance();
+    appJsEnv->InitJsFramework();
+    optionsObj_ = jerry_get_global_object();
+    jerry_value_t attrsKey = jerry_create_string((const jerry_char_t*)"attrs");
+    attrsObj_ = jerry_create_object();
+    jerry_value_t ret1 = jerry_set_property(optionsObj_, attrsKey, attrsObj_);
+    jerry_value_t styleKey = jerry_create_string((const jerry_char_t*)"staticStyle");
+    styleObj_ = jerry_create_object();
+    jerry_value_t ret2 = jerry_set_property(optionsObj_, styleKey, styleObj_);
+    jerry_value_t eventKey = jerry_create_string((const jerry_char_t*)"on");
+    eventObj_ = jerry_create_object();
+    jerry_value_t ret3 = jerry_set_property(optionsObj_, eventKey, eventObj_);
+    ReleaseJerryValue(attrsKey, styleKey, eventKey, ret1, ret2, ret3, VA_ARG_END_FLAG);
+
+    const int childrenNum = 3;
+    childrenObj_ = jerry_create_array(childrenNum);
+
+    jerry_value_t childOption = jerry_create_object();
+    jerry_value_t type = jerry_create_string((const jerry_char_t*)"stack");
+    ret1 = jerry_set_property_by_index(childOption, 0, type);
+    stack1_ = ComponentFactory::CreateComponent(KeyParser::ParseKeyId("div"), childOption, jerry_create_null());
+    stack1_->Render();
+    ret2 = jerry_set_property_by_index(childrenObj_, 0, stack1_->GetNativeElement());
+    ReleaseJerryValue(childOption, ret1, ret2, VA_ARG_END_FLAG);
+
+    childOption = jerry_create_object();
+    ret1 = jerry_set_property_by_index(childOption, 1, type);
+    stack2_ = ComponentFactory::CreateComponent(KeyParser::ParseKeyId("div"), childOption, jerry_create_null());
+    stack2_->Render();
+    ret2 = jerry_set_property_by_index(childrenObj_, 1, stack2_->GetNativeElement());
+    ReleaseJerryValue(childOption, ret1, ret2, VA_ARG_END_FLAG);
+
+    childOption = jerry_create_object();
+    const int pIndex = 2;
+    ret1 = jerry_set_property_by_index(childOption, pIndex, type);
+    stack3_ = ComponentFactory::CreateComponent(KeyParser::ParseKeyId("div"), childOption, jerry_create_null());
+    stack3_->Render();
+    ret2 = jerry_set_property_by_index(childrenObj_, pIndex, stack3_->GetNativeElement());
+    ReleaseJerryValue(childOption, ret1, ret2, type, VA_ARG_END_FLAG);
+    rootComponentMock_.PrepareRootContainer();
+}
+
+
+void SwiperTddTest::TearDown()
+{
+    ReleaseJerryValue(attrsObj_, styleObj_, eventObj_, optionsObj_, VA_ARG_END_FLAG);
+    JsAppContext::GetInstance()->ReleaseStyles();
+    stack1_->Release();
+    stack2_->Release();
+    stack3_->Release();
+}
+
+void SwiperTddTest::ComponentSwiperAttributeSetTest001()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set index 2
+     */
+    jerry_value_t indexKey = jerry_create_string((const jerry_char_t *)"index");
+    const int val = 2;
+    jerry_value_t indexVal = jerry_create_number(val);
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, indexKey, indexVal);
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.steps: step2. get native swiper object
+     */
+    UIView* view = component->GetComponentRootView();
+    UISwipeView* swiperView = reinterpret_cast<UISwipeView *>(view);
+    const int pageIndex = 2;
+    if (swiperView->GetCurrentPage() == pageIndex) {
+        printf("ComponentSwiperAttributeSetTest001 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest001 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), pageIndex);
+    component->Release();
+    ReleaseJerryValue(indexVal, ret1, VA_ARG_END_FLAG);
+
+    /**
+     * @tc.steps: step3. set index = '2'; get index = 2
+     */
+    indexVal = jerry_create_string((const jerry_char_t *)"2");
+    ret1 = jerry_set_property(attrsObj_, indexKey, indexVal);
+    component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+    view = component->GetComponentRootView();
+    swiperView = reinterpret_cast<UISwipeView *>(view);
+    if (swiperView->GetCurrentPage() == pageIndex) {
+        printf("ComponentSwiperAttributeSetTest001 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest001 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), pageIndex);
+    component->Release();
+    ReleaseJerryValue(indexVal, ret1, VA_ARG_END_FLAG);
+
+    /**
+     * @tc.steps: step4. set index = 0; get index = 0
+     */
+    indexVal = jerry_create_number(0);
+    ret1 = jerry_set_property(attrsObj_, indexKey, indexVal);
+    component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+    view = component->GetComponentRootView();
+    swiperView = reinterpret_cast<UISwipeView *>(view);
+    if (swiperView->GetCurrentPage() == 0) {
+        printf("ComponentSwiperAttributeSetTest001 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest001 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), 0);
+    component->Release();
+    ReleaseJerryValue(indexKey, indexVal, ret1, VA_ARG_END_FLAG);
+    TDD_CASE_END();
+}
+
+void SwiperTddTest::ComponentSwiperAttributeSetTest002()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. dont set index value
+     */
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.steps: step2. get native swiper object
+     */
+    UIView* view = component->GetComponentRootView();
+    UISwipeView* swiperView = reinterpret_cast<UISwipeView *>(view);
+
+    /**
+     * @tc.steps: step3. get index = 0
+     */
+    if (swiperView->GetCurrentPage() == 0) {
+        printf("ComponentSwiperAttributeSetTest002 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest002 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), 0);
+    component->Release();
+
+    /**
+     * @tc.steps: step4. set index -1
+     */
+    jerry_value_t indexKey = jerry_create_string((const jerry_char_t*)"index");
+    jerry_value_t indexVal = jerry_create_string((const jerry_char_t*)"abc123");
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, indexKey, indexVal);
+    component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+    view = component->GetComponentRootView();
+    swiperView = reinterpret_cast<UISwipeView *>(view);
+    if (swiperView->GetCurrentPage() == 0) {
+        printf("ComponentSwiperAttributeSetTest002 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest002 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), 0);
+    component->Release();
+
+    ReleaseJerryValue(indexKey, indexVal, ret1, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwiperTddTest::ComponentSwiperAttributeSetTest003()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set index bool
+     */
+    jerry_value_t indexKey = jerry_create_string((const jerry_char_t*)"index");
+    jerry_value_t indexVal = jerry_create_boolean(true);
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, indexKey, indexVal);
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.steps: step2. get native swiper object
+     */
+    UIView* view = component->GetComponentRootView();
+    UISwipeView* swiperView = reinterpret_cast<UISwipeView *>(view);
+
+    /**
+     * @tc.steps: step3. get index = 0
+     */
+    if (swiperView->GetCurrentPage() == 0) {
+        printf("ComponentSwiperAttributeSetTest003 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest003 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), 0);
+    component->Release();
+
+    ReleaseJerryValue(indexVal, indexKey, ret1, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwiperTddTest::ComponentSwiperAttributeSetTest004()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set index 3
+     */
+    jerry_value_t indexKey = jerry_create_string((const jerry_char_t*)"index");
+    const int val = 3;
+    jerry_value_t indexVal = jerry_create_number(val);
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, indexKey, indexVal);
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.steps: step2. get native swiper object
+     */
+    UIView* view = component->GetComponentRootView();
+    UISwipeView* swiperView = reinterpret_cast<UISwipeView *>(view);
+
+    /**
+     * @tc.steps: step3. get index = 0
+     */
+    if (swiperView->GetCurrentPage() == 0) {
+        printf("ComponentSwiperAttributeSetTest004 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest004 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), 0);
+    component->Release();
+    ReleaseJerryValue(indexVal, ret1, VA_ARG_END_FLAG);
+
+    /**
+     * @tc.steps: step4. set index -1
+     */
+    indexVal = jerry_create_number(-1);
+    ret1 = jerry_set_property(attrsObj_, indexKey, indexVal);
+    component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+    view = component->GetComponentRootView();
+    swiperView = reinterpret_cast<UISwipeView *>(view);
+    if (swiperView->GetCurrentPage() == 0) {
+        printf("ComponentSwiperAttributeSetTest004 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest004 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), 0);
+    component->Release();
+
+    ReleaseJerryValue(indexKey, indexVal, ret1, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwiperTddTest::ComponentSwiperAttributeSetTest005()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set index -32769
+     */
+    jerry_value_t indexKey = jerry_create_string((const jerry_char_t*)"index");
+    const int val1 = -32769;
+    jerry_value_t indexVal = jerry_create_number(val1);
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, indexKey, indexVal);
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.steps: step2. get native swiper object
+     */
+    UIView* view = component->GetComponentRootView();
+    UISwipeView* swiperView = reinterpret_cast<UISwipeView *>(view);
+
+    /**
+     * @tc.steps: step3. get index = 0
+     */
+    if (swiperView->GetCurrentPage() == 0) {
+        printf("ComponentSwiperAttributeSetTest005 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest005 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), 0);
+    component->Release();
+    ReleaseJerryValue(indexVal, ret1, VA_ARG_END_FLAG);
+
+    /**
+     * @tc.steps: step4. set index 32768 get index 0
+     */
+    const int val2 = 32768;
+    indexVal = jerry_create_number(val2);
+    ret1 = jerry_set_property(attrsObj_, indexKey, indexVal);
+    component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+    view = component->GetComponentRootView();
+    swiperView = reinterpret_cast<UISwipeView *>(view);
+    if (swiperView->GetCurrentPage() == 0) {
+        printf("ComponentSwiperAttributeSetTest005 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest005 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetCurrentPage(), 0);
+    component->Release();
+
+    ReleaseJerryValue(indexKey, indexVal, ret1, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwiperTddTest::ComponentSwiperAttributeSetTest013()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. do not set vertical
+     */
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.steps: step2. get native swiper object
+     */
+    UIView* view = component->GetComponentRootView();
+    UISwipeView* swiperView = reinterpret_cast<UISwipeView *>(view);
+
+    /**
+     * @tc.steps: step3. get direction = 0
+     */
+    if (swiperView->GetDirection() == 0) {
+        printf("ComponentSwiperAttributeSetTest013 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest013 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetDirection(), 0);
+    component->Release();
+
+    /**
+     * @tc.steps: step4. set vert true get vert 1
+     */
+    jerry_value_t vertKey = jerry_create_string((const jerry_char_t*)"vertical");
+    jerry_value_t vertVal = jerry_create_boolean(true);
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, vertKey, vertVal);
+    component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+    view = component->GetComponentRootView();
+    swiperView = reinterpret_cast<UISwipeView *>(view);
+    if (swiperView->GetDirection() == 1) {
+        printf("ComponentSwiperAttributeSetTest013 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest013 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetDirection(), 1);
+    component->Release();
+    ReleaseJerryValue(vertVal, ret1, VA_ARG_END_FLAG);
+
+    /**
+     * @tc.steps: step5. set vert true get vert 0
+     */
+    vertVal = jerry_create_boolean(false);
+    ret1 = jerry_set_property(attrsObj_, vertKey, vertVal);
+    component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+    view = component->GetComponentRootView();
+    swiperView = reinterpret_cast<UISwipeView *>(view);
+    if (swiperView->GetDirection() == 0) {
+        printf("ComponentSwiperAttributeSetTest013 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest013 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetDirection(), 0);
+    component->Release();
+
+    ReleaseJerryValue(vertKey, vertVal, ret1, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwiperTddTest::ComponentSwiperAttributeSetTest014()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. do not set vertical
+     */
+    jerry_value_t vertKey = jerry_create_string((const jerry_char_t*)"vertical");
+    const int val = 100;
+    jerry_value_t vertVal = jerry_create_number(val);
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, vertKey, vertVal);
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.steps: step2. get native swiper object
+     */
+    UIView* view = component->GetComponentRootView();
+    UISwipeView* swiperView = reinterpret_cast<UISwipeView *>(view);
+
+    /**
+     * @tc.steps: step3. get direction = 0
+     */
+    if (swiperView->GetDirection() == 0) {
+        printf("ComponentSwiperAttributeSetTest014 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest014 fail\n");
+    }
+    EXPECT_EQ(swiperView->GetDirection(), 0);
+    component->Release();
+
+    ReleaseJerryValue(vertKey, vertVal, ret1, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwiperTddTest::ComponentSwiperAttributeSetTest019()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set id,visibility.
+     */
+    jerry_value_t idKey = jerry_create_string((const jerry_char_t*)"id");
+    jerry_value_t idVal = jerry_create_string((const jerry_char_t*)"swiper");
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, idKey, idVal);
+    jerry_value_t visibilityKey = jerry_create_string((const jerry_char_t*)"show");
+    jerry_value_t visibilityVal = jerry_create_boolean(false);
+    jerry_value_t ret2 = jerry_set_property(attrsObj_, visibilityKey, visibilityVal);
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    rootComponentMock_.RenderComponent(*component);
+
+    /**
+     * @tc.steps: step2. get native swiper object
+     */
+    UIView* view = component->GetComponentRootView();
+    UISwipeView* swiperView = reinterpret_cast<UISwipeView *>(view);
+
+    /**
+     * @tc.steps: step3. get attribute value
+     */
+    if (!strcmp(swiperView->GetViewId(), "swiper") && swiperView->IsVisible() == false) {
+        printf("ComponentSwiperAttributeSetTest019 pass\n");
+    } else {
+        printf("ComponentSwiperAttributeSetTest019 fail\n");
+    }
+    EXPECT_TRUE((!strcmp(swiperView->GetViewId(), "swiper")) && (swiperView->IsVisible() == false));
+    component->Release();
+
+    ReleaseJerryValue(idKey, idVal, ret1, visibilityKey, visibilityVal, ret2, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwiperTddTest::RunTests()
+{
+    ComponentSwiperAttributeSetTest001();
+    ComponentSwiperAttributeSetTest002();
+    ComponentSwiperAttributeSetTest003();
+    ComponentSwiperAttributeSetTest004();
+    ComponentSwiperAttributeSetTest005();
+    ComponentSwiperAttributeSetTest013();
+    ComponentSwiperAttributeSetTest014();
+    ComponentSwiperAttributeSetTest019();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: ComponentSwiperAttributeSetTest001
+ * @tc.desc: Verify attribute index set normal value.
+ * @tc.require: AR000DSEFG
+ */
+HWTEST_F(SwiperTddTest, SwiperAttr001, TestSize.Level1)
+{
+    SwiperTddTest::ComponentSwiperAttributeSetTest001();
+}
+
+/**
+ * @tc.name: ComponentSwiperAttributeSetTest002
+ * @tc.desc: Verify attribute index set wrong string value.
+ * @tc.require: AR000DSEFG
+ */
+HWTEST_F(SwiperTddTest, SwiperAttr002, TestSize.Level1)
+{
+    SwiperTddTest::ComponentSwiperAttributeSetTest002();
+}
+
+/**
+ * @tc.name: ComponentSwiperAttributeSetTest003
+ * @tc.desc: Verify attribute index set bool value.
+ * @tc.require: AR000DSEFG
+ */
+HWTEST_F(SwiperTddTest, SwiperAttr003, TestSize.Level1)
+{
+    SwiperTddTest::ComponentSwiperAttributeSetTest003();
+}
+
+/**
+ * @tc.name: ComponentSwiperAttributeSetTest004
+ * @tc.desc: Verify attribute index out of size.
+ * @tc.require: AR000DSEFG
+ */
+HWTEST_F(SwiperTddTest, SwiperAttr004, TestSize.Level1)
+{
+    SwiperTddTest::ComponentSwiperAttributeSetTest004();
+}
+
+/**
+ * @tc.name: ComponentSwiperAttributeSetTest005
+ * @tc.desc: Verify attribute index out of int16.
+ * @tc.require: AR000DSEFG
+ */
+HWTEST_F(SwiperTddTest, SwiperAttr005, TestSize.Level1)
+{
+    SwiperTddTest::ComponentSwiperAttributeSetTest005();
+}
+
+/**
+ * @tc.name: ComponentSwiperAttributeSetTest013
+ * @tc.desc: Verify attribute vertical set correct.
+ * @tc.require: AR000DSEFG
+ */
+HWTEST_F(SwiperTddTest, SwiperAttr013, TestSize.Level1)
+{
+    SwiperTddTest::ComponentSwiperAttributeSetTest013();
+}
+
+/**
+ * @tc.name: ComponentSwiperAttributeSetTest014
+ * @tc.desc: Verify attribute vertical input wrong type.
+ * @tc.require: AR000DSEFG
+ */
+HWTEST_F(SwiperTddTest, SwiperAttr014, TestSize.Level1)
+{
+    SwiperTddTest::ComponentSwiperAttributeSetTest014();
+}
+
+/**
+ * @tc.name: ComponentSwiperAttributeSetTest019
+ * @tc.desc: Verify attribute id,visibility.
+ * @tc.require: AR000DSEFG
+ */
+HWTEST_F(SwiperTddTest, SwiperAttr019, TestSize.Level1)
+{
+    SwiperTddTest::ComponentSwiperAttributeSetTest019();
+}
+#endif
+} // ACELite
+} // OHOS
\ No newline at end of file
diff --git a/frameworks/src/core/components/test/unittest/common/swiper_tdd_test.h b/frameworks/src/core/components/test/unittest/common/swiper_tdd_test.h
new file mode 100755
index 0000000..d055d00
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/swiper_tdd_test.h
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef ACELITE_SWIPER_TDD_TEST_H
+#define ACELITE_SWIPER_TDD_TEST_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "acelite_config.h"
+#include "component_factory.h"
+#include "root_component_mock.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class SwiperTddTest : public testing::Test {
+#else
+class SwiperTddTest {
+#endif
+public:
+    SwiperTddTest();
+    ~SwiperTddTest(){};
+    void SetUp();
+    void TearDown();
+    void ComponentSwiperAttributeSetTest001();
+    void ComponentSwiperAttributeSetTest002();
+    void ComponentSwiperAttributeSetTest003();
+    void ComponentSwiperAttributeSetTest004();
+    void ComponentSwiperAttributeSetTest005();
+    void ComponentSwiperAttributeSetTest013();
+    void ComponentSwiperAttributeSetTest014();
+    void ComponentSwiperAttributeSetTest019();
+    void RunTests();
+    jerry_value_t optionsObj_;
+    jerry_value_t attrsObj_;
+    jerry_value_t styleObj_;
+    jerry_value_t eventObj_;
+    jerry_value_t childrenObj_;
+    Component* stack1_;
+    Component* stack2_;
+    Component* stack3_;
+    uint16_t componentKeyId_ = KeyParser::ParseKeyId("swiper");
+
+private:
+    RootComponentMock rootComponentMock_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // ACELITE_SWIPER_TDD_TEST_H
\ No newline at end of file
diff --git a/frameworks/src/core/components/test/unittest/common/switch_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/switch_tdd_test.cpp
new file mode 100755
index 0000000..620e0df
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/switch_tdd_test.cpp
@@ -0,0 +1,235 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "switch_tdd_test.h"
+#include "js_app_environment.h"
+#include "root_view.h"
+#include "switch_component.h"
+
+namespace OHOS {
+namespace ACELite {
+SwitchTddTest::SwitchTddTest()
+    : optionsObj_(0),
+      attrsObj_(0),
+      styleObj_(0),
+      eventObj_(0),
+      childrenObj_(0),
+      componentKeyId_(KeyParser::ParseKeyId("switch"))
+{
+}
+
+void SwitchTddTest::SetUp()
+{
+    JsAppEnvironment* appJsEnv = JsAppEnvironment::GetInstance();
+    appJsEnv->InitJsFramework();
+
+    optionsObj_ = jerry_get_global_object();
+
+    jerry_value_t attrsKey = jerry_create_string((const jerry_char_t*)"attrs");
+    attrsObj_ = jerry_create_object();
+    jerry_value_t ret1 = jerry_set_property(optionsObj_, attrsKey, attrsObj_);
+
+    jerry_value_t styleKey = jerry_create_string((const jerry_char_t*)"staticStyle");
+    styleObj_ = jerry_create_object();
+    jerry_value_t ret2 = jerry_set_property(optionsObj_, styleKey, styleObj_);
+
+    jerry_value_t eventKey = jerry_create_string((const jerry_char_t*)"on");
+    eventObj_ = jerry_create_object();
+    jerry_value_t ret3 = jerry_set_property(optionsObj_, eventKey, eventObj_);
+
+    ReleaseJerryValue(attrsKey, ret1, styleKey, ret2, eventKey, ret3, VA_ARG_END_FLAG);
+}
+
+void SwitchTddTest::TearDown()
+{
+    ReleaseJerryValue(attrsObj_, styleObj_, eventObj_, optionsObj_, VA_ARG_END_FLAG);
+    JsAppContext::GetInstance()->ReleaseStyles();
+}
+
+void SwitchTddTest::ComponentSwitchAttributeSetTest001()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. do not set checked
+     */
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    component->Render();
+
+    /**
+     * @tc.steps: step2. get native switch object;get checked false
+     */
+    UIView* view = component->GetComponentRootView();
+    UIToggleButton* toggleButton = reinterpret_cast<UIToggleButton *>(view);
+    if (toggleButton->GetState() == false) {
+        printf("ComponentSwitchAttributeSetTest001 pass\n");
+    } else {
+        printf("ComponentSwitchAttributeSetTest001 fail\n");
+    }
+    EXPECT_FALSE(toggleButton->GetState());
+    component->Release();
+
+    /**
+     * @tc.steps: step3. set checked = true; get checked = true
+     */
+    jerry_value_t checkedKey = jerry_create_string((const jerry_char_t*)("checked"));
+    jerry_value_t checkedVal = jerry_create_boolean(true);
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, checkedKey, checkedVal);
+    component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    component->Render();
+    view = component->GetComponentRootView();
+    toggleButton = reinterpret_cast<UIToggleButton *>(view);
+    if (toggleButton->GetState() == true) {
+        printf("ComponentSwitchAttributeSetTest001 pass\n");
+    } else {
+        printf("ComponentSwitchAttributeSetTest001 fail\n");
+    }
+    EXPECT_TRUE(toggleButton->GetState());
+    component->Release();
+    jerry_release_value(checkedVal);
+
+    /**
+     * @tc.steps: step4. set checkedVal false; get checkedVal false
+     */
+    checkedVal = jerry_create_boolean(false);
+    jerry_value_t ret2 = jerry_set_property(attrsObj_, checkedKey, checkedVal);
+    component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    component->Render();
+    view = component->GetComponentRootView();
+    toggleButton = reinterpret_cast<UIToggleButton *>(view);
+    if (toggleButton->GetState() == false) {
+        printf("ComponentSwitchAttributeSetTest001 pass\n");
+    } else {
+        printf("ComponentSwitchAttributeSetTest001 fail\n");
+    }
+    EXPECT_FALSE(toggleButton->GetState());
+    component->Release();
+
+    ReleaseJerryValue(checkedKey, checkedVal, ret1, ret2, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwitchTddTest::ComponentSwitchAttributeSetTest002()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set checked true
+     */
+    jerry_value_t checkedKey = jerry_create_string((const jerry_char_t*)("checked"));
+    jerry_value_t checkedVal = jerry_create_string((const jerry_char_t*)("abc123"));
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, checkedKey, checkedVal);
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    component->Render();
+
+    /**
+     * @tc.steps: step2. get native switch object
+     */
+    UIView* view = component->GetComponentRootView();
+    UIToggleButton* toggleButton = reinterpret_cast<UIToggleButton *>(view);
+
+    /**
+     * @tc.steps: step3. get checked val
+     */
+    if (toggleButton->GetState() == true) {
+        printf("ComponentSwitchAttributeSetTest002 pass\n");
+    } else {
+        printf("ComponentSwitchAttributeSetTest002 fail\n");
+    }
+    EXPECT_TRUE(toggleButton->GetState());
+    component->Release();
+
+    ReleaseJerryValue(checkedKey, checkedVal, ret1, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwitchTddTest::ComponentSwitchAttributeSetTest003()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set id "switch", show = true
+     */
+    jerry_value_t idKey = jerry_create_string((const jerry_char_t*)("id"));
+    jerry_value_t idVal = jerry_create_string((const jerry_char_t*)("switch"));
+    jerry_value_t ret1 = jerry_set_property(attrsObj_, idKey, idVal);
+    jerry_value_t showKey = jerry_create_string((const jerry_char_t*)("show"));
+    jerry_value_t showVal = jerry_create_boolean(false);
+    jerry_value_t ret2 = jerry_set_property(attrsObj_, showKey, showVal);
+    Component* component = ComponentFactory::CreateComponent(componentKeyId_, optionsObj_, childrenObj_);
+    component->Render();
+
+    /**
+     * @tc.steps: step2. get native swiper object
+     */
+    UIView* view = component->GetComponentRootView();
+    UIToggleButton* toggleButton = reinterpret_cast<UIToggleButton *>(view);
+
+    /**
+     * @tc.steps: step3. get id, show
+     */
+    if (!strcmp(toggleButton->GetViewId(), "switch") && toggleButton->IsVisible() == false) {
+        printf("ComponentSwitchAttributeSetTest003 pass\n");
+    } else {
+        printf("ComponentSwitchAttributeSetTest003 fail\n");
+    }
+    EXPECT_TRUE((!strcmp(toggleButton->GetViewId(), "switch")) && (toggleButton->IsVisible() == false));
+
+    component->Release();
+
+    ReleaseJerryValue(idKey, idVal, showKey, showVal, ret1, ret2, VA_ARG_END_FLAG);
+
+    TDD_CASE_END();
+}
+
+void SwitchTddTest::RunTests()
+{
+    ComponentSwitchAttributeSetTest001();
+    ComponentSwitchAttributeSetTest002();
+    ComponentSwitchAttributeSetTest003();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: ComponentSwitchAttributeSetTest001
+ * @tc.desc: Verify attribute checked set normal value.
+ * @tc.require: AR000DSEFI
+ */
+HWTEST_F(SwitchTddTest, SwitchAttr001, TestSize.Level1)
+{
+    SwitchTddTest::ComponentSwitchAttributeSetTest001();
+}
+
+/**
+ * @tc.name: ComponentSwitchAttributeSetTest002
+ * @tc.desc: Verify attribute checked set abc123.
+ * @tc.require: AR000DSEFI
+ */
+HWTEST_F(SwitchTddTest, SwitchAttr002, TestSize.Level1)
+{
+    SwitchTddTest::ComponentSwitchAttributeSetTest002();
+}
+
+/**
+ * @tc.name: ComponentSwitchAttributeSetTest003
+ * @tc.desc: Verify attribute id, show.
+ * @tc.require: AR000DSEFI
+ */
+HWTEST_F(SwitchTddTest, SwitchAttr003, TestSize.Level1)
+{
+    SwitchTddTest::ComponentSwitchAttributeSetTest003();
+}
+#endif // TDD_ASSERTIONS
+} // ACELite
+} // OHOS
\ No newline at end of file
diff --git a/frameworks/src/core/components/test/unittest/common/switch_tdd_test.h b/frameworks/src/core/components/test/unittest/common/switch_tdd_test.h
new file mode 100755
index 0000000..5a65577
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/switch_tdd_test.h
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef ACELITE_SWITCH_TDD_TEST_H
+#define ACELITE_SWITCH_TDD_TEST_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "acelite_config.h"
+#include "component_factory.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class SwitchTddTest : public testing::Test {
+#else
+class SwitchTddTest {
+#endif
+public:
+    SwitchTddTest();
+    ~SwitchTddTest(){};
+    void SetUp();
+    void TearDown();
+    void ComponentSwitchAttributeSetTest001();
+    void ComponentSwitchAttributeSetTest002();
+    void ComponentSwitchAttributeSetTest003();
+    void RunTests();
+
+    jerry_value_t optionsObj_;
+    jerry_value_t attrsObj_;
+    jerry_value_t styleObj_;
+    jerry_value_t eventObj_;
+    jerry_value_t childrenObj_;
+    uint16_t componentKeyId_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // ACELITE_SWITCH_TDD_TEST_H
\ No newline at end of file
diff --git a/frameworks/src/core/components/test/unittest/common/text_tdd_exception_test.cpp b/frameworks/src/core/components/test/unittest/common/text_tdd_exception_test.cpp
new file mode 100755
index 0000000..6140641
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/text_tdd_exception_test.cpp
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "text_tdd_exception_test.h"
+#include "acelite_config.h"
+#include "component_factory.h"
+#include "js_app_environment.h"
+#include "root_view.h"
+#include "text_component.h"
+#include "ui_label.h"
+
+namespace OHOS {
+namespace ACELite {
+TextTddExceptionTest::TextTddExceptionTest():BaseTest()
+{
+    componentNameId_ = KeyParser::ParseKeyId("text");
+}
+void TextTddExceptionTest::ComponentTextStyleSetExceptionTest007()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set exception color value = "helloworld"
+     */
+    const char* expectColorStrValue = "helloWorld";
+    const char* colorStr = "color";
+    jerry_value_t textKey = jerry_create_string((const jerry_char_t*)colorStr);
+    jerry_value_t textColorValue = jerry_create_string((const jerry_char_t*)expectColorStrValue);
+    jerry_set_property(styleObj_, textKey, textColorValue);
+    /**
+     * @tc.expected: step2. console print exception info
+     */
+    Component* textComponent = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    jerry_release_value(textKey);
+    jerry_release_value(textColorValue);
+
+    /**
+     * @tc.expected: step3. update textOverflow with exception value "exception"
+     * console print exception info
+     */
+    const char* textOverflow = "textOverflow";
+    const char* expectOverflowException = "exception";
+    UpdateCharAttributeOrStyleValue(textComponent, textOverflow, expectOverflowException, false);
+
+    /**
+     * @tc.expected: step4. update letterSpacing with exception value "helloWorld"
+     * console print exception info
+     */
+    const char* letterSpacingStr = "letterSpacing";
+    const char* expectletterSpacingStrValue = "helloWorld";
+    UpdateCharAttributeOrStyleValue(textComponent, letterSpacingStr, expectletterSpacingStrValue, false);
+
+    /**
+     * @tc.expected: step5. update textAlign with exception value "exception"
+     * console print exception info
+     */
+    const char* textAlign = "textAlign";
+    const char* expectALignException = "exception";
+    UpdateCharAttributeOrStyleValue(textComponent, textAlign, expectALignException, false);
+
+    TDD_CASE_END();
+}
+
+void TextTddExceptionTest::RunTests()
+{
+    ComponentTextStyleSetExceptionTest007();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name:Component_Text_StyleSet_Color_Test_002
+ * @tc.desc: Verify text color/textOverFlow/textAlign/letterSpace exception value.
+ * @tc.require: AR000DSEFN
+ */
+HWTEST_F(TextTddExceptionTest, textStyle007, TestSize.Level1)
+{
+    TextTddExceptionTest::ComponentTextStyleSetExceptionTest007();
+}
+#endif
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/text_tdd_exception_test.h b/frameworks/src/core/components/test/unittest/common/text_tdd_exception_test.h
new file mode 100755
index 0000000..cdecc04
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/text_tdd_exception_test.h
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef OHOS_ACELITE_TEST_TEXT_EXCEPTION_H
+#define OHOS_ACELITE_TEST_TEXT_EXCEPTION_H
+
+#include "base_test.h"
+
+namespace OHOS {
+namespace ACELite {
+class TextTddExceptionTest : public BaseTest {
+public:
+    TextTddExceptionTest();
+    ~TextTddExceptionTest() override {};
+    void ComponentTextStyleSetExceptionTest007();
+    void RunTests();
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_TEST_TEXT_EXCEPTION_H
diff --git a/frameworks/src/core/components/test/unittest/common/text_tdd_test.cpp b/frameworks/src/core/components/test/unittest/common/text_tdd_test.cpp
new file mode 100755
index 0000000..8569f66
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/text_tdd_test.cpp
@@ -0,0 +1,446 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "text_tdd_test.h"
+#include "acelite_config.h"
+#include "component_factory.h"
+#include "js_app_environment.h"
+#include "root_view.h"
+#include "text_component.h"
+#include "ui_label.h"
+
+namespace OHOS {
+namespace ACELite {
+TextTddTest::TextTddTest():BaseTest()
+{
+    componentNameId_ = KeyParser::ParseKeyId("text");
+}
+
+void TextTddTest::ComponentTextAttributeSetValueTest001()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set text attribute value = "hello world"
+     */
+    const char* expectTextValue = "hello world";
+    const char* valueStr = "value";
+    jerry_value_t textKey = jerry_create_string((const jerry_char_t*)valueStr);
+    jerry_value_t textValue = jerry_create_string((const jerry_char_t*)expectTextValue);
+    jerry_set_property(attrsObj_, textKey, textValue);
+    Component* textComponent = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    UILabel* uilabelView = reinterpret_cast<UILabel *>(textComponent->GetComponentRootView());
+    jerry_release_value(textKey);
+    jerry_release_value(textValue);
+
+    /**
+     * @tc.expected: step2. value == expectTextValue
+     */
+    if (uilabelView->GetText() != nullptr && !strcmp(uilabelView->GetText(), expectTextValue)) {
+        printf("%s pass\n", __FUNCTION__);
+    } else {
+        printf("%s fail\n", __FUNCTION__);
+    }
+    EXPECT_STREQ(uilabelView->GetText(), expectTextValue);
+
+    /**
+     * @tc.expected: step3. update value, check value == expectTextValue2
+     */
+    const char* expectTextValue2 = "1234567890";
+    UpdateCharAttributeOrStyleValue(textComponent, "value", expectTextValue2, true);
+    if ((uilabelView->GetText() != nullptr) && !strcmp(uilabelView->GetText(), expectTextValue2)) {
+        printf("%s update test value pass\n", __FUNCTION__);
+    } else {
+        printf("%s update test value fail\n", __FUNCTION__);
+    }
+    EXPECT_STREQ(uilabelView->GetText(), expectTextValue2);
+
+    /**
+     * @tc.expected: step4. update value witch excpetion expectTextIntValue , check value != expectTextIntValue
+     */
+    int expectTextIntValue = 100;
+    UpdateNumAttributeOrStyleValue(textComponent, "value", expectTextIntValue, true);
+    if ((uilabelView->GetText() != nullptr) && !strcmp(uilabelView->GetText(), "100")) {
+        printf("%s update test value 100 pass\n", __FUNCTION__);
+    } else {
+        printf("%s update test value 100 fail\n", __FUNCTION__);
+    }
+    EXPECT_TRUE(uilabelView->GetText() != nullptr);
+    EXPECT_STREQ(uilabelView->GetText(), "100");
+
+    TDD_CASE_END();
+}
+
+void TextTddTest::ComponentTextStyleSetColorTest002()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set text color value = 16777215
+     */
+    int expectColorValue = 16711680;
+    const char* colorStr = "color";
+    jerry_value_t textKey = jerry_create_string((const jerry_char_t*)colorStr);
+    jerry_value_t textColorValue = jerry_create_number(expectColorValue);
+
+    jerry_set_property(styleObj_, textKey, textColorValue);
+
+    Component* textComponent = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    UILabel* uilabelView = reinterpret_cast<UILabel *>(textComponent->GetComponentRootView());
+
+    jerry_release_value(textKey);
+    jerry_release_value(textColorValue);
+
+    /**
+     * @tc.expected: step2. check text color == 16711680 (red color)
+     */
+    if (uilabelView->GetStyle(STYLE_TEXT_COLOR) == GetRGBColor(expectColorValue).full) {
+        printf("%s pass\n", __FUNCTION__);
+    } else {
+        printf("%s fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetStyle(STYLE_TEXT_COLOR), GetRGBColor(expectColorValue).full);
+
+    /**
+     * @tc.expected: step3. update text color with normal expectColorValue2,check text color == expectColorValue2
+     */
+    int32_t expectColorValue2 = 16777215;
+    UpdateNumAttributeOrStyleValue(textComponent, colorStr, expectColorValue2, false);
+    if (uilabelView->GetStyle(STYLE_TEXT_COLOR) == GetRGBColor(expectColorValue2).full) {
+        printf("%s update color pass\n", __FUNCTION__);
+    } else {
+        printf("%s update color fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetStyle(STYLE_TEXT_COLOR), GetRGBColor(expectColorValue2).full);
+
+    /**
+     * @tc.expected: step4. update text color with overflow expectColorValue3,check text color == expectColorValue3
+     */
+    int32_t expectColorValue3 = 16777216;
+    UpdateNumAttributeOrStyleValue(textComponent, colorStr, expectColorValue3, false);
+    if (uilabelView->GetStyle(STYLE_TEXT_COLOR) == GetRGBColor(expectColorValue3).full) {
+        printf("%s update overflow color pass\n", __FUNCTION__);
+    } else {
+        printf("%s update overflow color fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetStyle(STYLE_TEXT_COLOR), GetRGBColor(expectColorValue3).full);
+
+    TDD_CASE_END();
+}
+
+void TextTddTest::ComponentTextStyleSetOverflowTest003()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set text overflow = clip
+     */
+    const char* expectOverflowClip = "clip";
+    const char* textOverflow = "textOverflow";
+    const char* height = "height";
+    const char* width = "width";
+    int textHeight = 0;
+    int textWidth = 0;
+    JerrySetNumberProperty(styleObj_, height, textHeight);
+    JerrySetNumberProperty(styleObj_, width, textWidth);
+    JerrySetStringProperty(styleObj_, textOverflow, expectOverflowClip);
+    Component* textComponent = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    UILabel* uilabelView = reinterpret_cast<UILabel *>(textComponent->GetComponentRootView());
+    /**
+     * @tc.expected: step2. check uikit uilabelView  == UILabel::LINE_BREAK_CLIP
+     */
+    if (uilabelView->GetLineBreakMode() == UILabel::LINE_BREAK_CLIP) {
+        printf("%s set OverFlow clip pass\n", __FUNCTION__);
+    } else {
+        printf("%s set OverFlow clip fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetLineBreakMode(), UILabel::LINE_BREAK_CLIP);
+
+    /**
+     * @tc.expected: step3. update text Overflow = "ellipsis"
+     * check uikit uilabelView  == UILabel::LINE_BREAK_ELLIPSIS
+     */
+    const char* expectOverflowEllipsis = "ellipsis";
+    UpdateCharAttributeOrStyleValue(textComponent, textOverflow, expectOverflowEllipsis, false);
+    if (uilabelView->GetLineBreakMode() == UILabel::LINE_BREAK_ELLIPSIS) {
+        printf("%s update OverFlow ellipsis pass\n", __FUNCTION__);
+    } else {
+        printf("%s update OverFlow ellipsis fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetLineBreakMode(), UILabel::LINE_BREAK_ELLIPSIS);
+
+    /**
+     * @tc.expected: step4. update text Overflow = "break"
+     * check uikit uilabelView  == UILabel::LINE_BREAK_WRAP
+     */
+    const char* expectOverflowBreak = "break";
+    UpdateCharAttributeOrStyleValue(textComponent, textOverflow, expectOverflowBreak, false);
+    if (uilabelView->GetLineBreakMode() == UILabel::LINE_BREAK_WRAP) {
+        printf("%s update OverFlow break pass\n", __FUNCTION__);
+    } else {
+        printf("%s update OverFlow break fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetLineBreakMode(), UILabel::LINE_BREAK_WRAP);
+
+    /**
+     * @tc.expected: step5. update text Overflow = "expand"
+     * check uikit uilabelView  == UILabel::LINE_BREAK_ADAPT
+     */
+    const char* expectOverflowExpand = "expand";
+    UpdateCharAttributeOrStyleValue(textComponent, textOverflow, expectOverflowExpand, false);
+    if (uilabelView->GetLineBreakMode() == UILabel::LINE_BREAK_ADAPT) {
+        printf("%s update OverFlow expand pass\n", __FUNCTION__);
+    } else {
+        printf("%s update OverFlow expand fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetLineBreakMode(), UILabel::LINE_BREAK_ADAPT);
+
+    TDD_CASE_END();
+}
+
+void TextTddTest::ComponentTextStyleSetLetterSpacingTest004()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set text letterSpacing value = 10
+     */
+    int expectLetterSpacingValue = 10;
+    const char* letterSpacingStr = "letterSpacing";
+    jerry_value_t textKey = jerry_create_string((const jerry_char_t*)letterSpacingStr);
+    jerry_value_t textLetterSpacingValue = jerry_create_number(expectLetterSpacingValue);
+    jerry_set_property(styleObj_, textKey, textLetterSpacingValue);
+    Component* textComponent = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    UILabel* uilabelView = reinterpret_cast<UILabel *>(textComponent->GetComponentRootView());
+
+    /**
+     * @tc.expected: step2. check uikit uilabel letterSpace == expectLetterSpacingValue
+     */
+    if (uilabelView->GetStyle(STYLE_LETTER_SPACE) == expectLetterSpacingValue) {
+        printf("%s update letterSpace pass\n", __FUNCTION__);
+    } else {
+        printf("%s update letterSpace fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetStyle(STYLE_LETTER_SPACE), expectLetterSpacingValue);
+    jerry_release_value(textKey);
+    jerry_release_value(textLetterSpacingValue);
+
+    /**
+     * @tc.expected: step3. update letterSpace, check uikit uilabel letterSpace == expectLetterSpacingValue2
+     */
+    int32_t expectLetterSpacingValue2 = 255;
+    UpdateNumAttributeOrStyleValue(textComponent, letterSpacingStr, expectLetterSpacingValue2, false);
+    if (uilabelView->GetStyle(STYLE_LETTER_SPACE) == expectLetterSpacingValue2) {
+        printf("%s update normal letterSpace pass\n", __FUNCTION__);
+    } else {
+        printf("%s update normal letterSpace fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetStyle(STYLE_LETTER_SPACE), expectLetterSpacingValue2);
+
+    /**
+     * @tc.expected: step4. update letterSpace with exception value,
+     * check uikit uilabel letterSpace != expectLetterSpacingValue3
+     */
+    int32_t expectLetterSpacingValue3 = 32768;
+    UpdateNumAttributeOrStyleValue(textComponent, letterSpacingStr, expectLetterSpacingValue3, false);
+    if (uilabelView->GetStyle(STYLE_LETTER_SPACE) != expectLetterSpacingValue3) {
+        printf("%s update overflow letterSpace  pass\n", __FUNCTION__);
+    } else {
+        printf("%s update overflow letterSpace fail\n", __FUNCTION__);
+    }
+    EXPECT_NE(uilabelView->GetStyle(STYLE_LETTER_SPACE), expectLetterSpacingValue3);
+
+    TDD_CASE_END();
+}
+
+void TextTddTest::ComponentTextStyleSetAlignTest005()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set text Align  = "left"
+     */
+    const char* expectLeftAlign = "left";
+    const char* textAlign = "textAlign";
+    jerry_value_t textKey = jerry_create_string((const jerry_char_t*)textAlign);
+    jerry_value_t textAlignValue = jerry_create_string((const jerry_char_t*)expectLeftAlign);
+    jerry_set_property(styleObj_, textKey, textAlignValue);
+    Component* textComponent = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    UILabel* uilabelView = reinterpret_cast<UILabel *>(textComponent->GetComponentRootView());
+    jerry_release_value(textKey);
+    jerry_release_value(textAlignValue);
+    /**
+     * @tc.expected: step2. jsfwk render, check text align == UITextLanguageAlignment::TEXT_ALIGNMENT_LEFT
+     */
+    if (uilabelView->GetHorAlign() == UITextLanguageAlignment::TEXT_ALIGNMENT_LEFT) {
+        printf("%s update text ALign left pass\n", __FUNCTION__);
+    } else {
+        printf("%s update text ALign left fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetHorAlign(), UITextLanguageAlignment::TEXT_ALIGNMENT_LEFT);
+
+    /**
+     * @tc.expected: step2. update align = right, check text align == UITextLanguageAlignment::TEXT_ALIGNMENT_RIGHT
+     */
+    const char* expectRightAlign = "right";
+    UpdateCharAttributeOrStyleValue(textComponent, textAlign, expectRightAlign, false);
+    if (uilabelView->GetHorAlign() == UITextLanguageAlignment::TEXT_ALIGNMENT_RIGHT) {
+        printf("%s update text ALign right pass\n", __FUNCTION__);
+    } else {
+        printf("%s update text ALign right fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetHorAlign(), UITextLanguageAlignment::TEXT_ALIGNMENT_RIGHT);
+
+    /**
+     * @tc.expected: step3. update align = center, check text align == UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER
+     */
+    const char* expectCenterAlign = "center";
+    UpdateCharAttributeOrStyleValue(textComponent, textAlign, expectCenterAlign, false);
+    if (uilabelView->GetHorAlign() == UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER) {
+        printf("%s update text ALign center pass\n", __FUNCTION__);
+    } else {
+        printf("%s update text ALign center fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetHorAlign(), UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER);
+
+    TDD_CASE_END();
+}
+
+void TextTddTest::ComponentTextStyleSetSizeFamilyTest006()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. set text fontSize = 30, fontFamily = HYQiHei-65S
+     */
+    const char *textSize = "fontSize";
+    int expectSize = 30;
+    jerry_value_t textSizetKey = jerry_create_string((const jerry_char_t *)textSize);
+    jerry_value_t textSizeValue = jerry_create_number(expectSize);
+    jerry_set_property(styleObj_, textSizetKey, textSizeValue);
+    const char *textFamily = "fontFamily";
+    const char *expectFamily = "HYQiHei-65S";
+    jerry_value_t textFamilyKey = jerry_create_string((const jerry_char_t *)textFamily);
+    jerry_value_t textFamilyValue = jerry_create_string((const jerry_char_t *)expectFamily);
+    const char *expectTextValue = "hello world";
+    const char *valueTag = "value";
+    JerrySetStringProperty(attrsObj_, valueTag, expectTextValue);
+    Component *textComponent = reinterpret_cast<TextComponent *>(GetRenderedComponent(componentNameId_));
+    UILabel *uilabelView = reinterpret_cast<UILabel *>(textComponent->GetComponentRootView());
+    jerry_release_value(textSizetKey);
+    jerry_release_value(textSizeValue);
+    jerry_release_value(textFamilyKey);
+    jerry_release_value(textFamilyValue);
+
+    /**
+     * @tc.expected: step2. check text fontid == UITextLanguageFontId::F_HYQIHEI_65S_30_4
+     */
+    UIFont *font = UIFont::GetInstance();
+    if (uilabelView->GetFontId() == font->GetFontId(expectFamily, expectSize)) {
+        printf("%s set text size&family pass\n", __FUNCTION__);
+    } else {
+        printf("%s set text size&family fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetFontId(), font->GetFontId(expectFamily, expectSize));
+
+    /**
+     * @tc.expected: step3. update fontSize =38, check text fontid == UITextLanguageFontId::F_HYQIHEI_65S_38_4
+     */
+    int expectVidaLargerSize = 38;
+    UpdateNumAttributeOrStyleValue(textComponent, textSize, expectVidaLargerSize, false);
+    const char *expectVidaLargerFamily = "HYQiHei-65S";
+    UpdateCharAttributeOrStyleValue(textComponent, textFamily, expectVidaLargerFamily, false);
+    if (uilabelView->GetFontId() == font->GetFontId(expectVidaLargerFamily, expectVidaLargerSize)) {
+        printf("%s update text size&family pass\n", __FUNCTION__);
+    } else {
+        printf("%s update text size&family fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetFontId(), font->GetFontId(expectVidaLargerFamily, expectVidaLargerSize));
+
+    /**
+     * @tc.expected: step4. update fontFamily with exception value "helloWorld",
+     * check text fontid == UITextLanguageFontId::F_HYQIHEI_65S_38_4
+     */
+    /* set last available fontid instead of exceptionFamily */
+    const char *expectExceptionFamily = "helloWorld";
+    UpdateCharAttributeOrStyleValue(textComponent, textFamily, expectExceptionFamily, false);
+
+    if (uilabelView->GetFontId() == font->GetFontId(expectVidaLargerFamily, expectVidaLargerSize)) {
+        printf("%s  update text exception size&family pass\n", __FUNCTION__);
+    } else {
+        printf("%s update text  exception size&family fail\n", __FUNCTION__);
+    }
+    EXPECT_EQ(uilabelView->GetFontId(), font->GetFontId(expectVidaLargerFamily, expectVidaLargerSize));
+
+    TDD_CASE_END();
+}
+
+void TextTddTest::RunTests()
+{
+    ComponentTextAttributeSetValueTest001();
+    ComponentTextStyleSetColorTest002();
+    ComponentTextStyleSetOverflowTest003();
+    ComponentTextStyleSetLetterSpacingTest004();
+    ComponentTextStyleSetAlignTest005();
+    ComponentTextStyleSetSizeFamilyTest006();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name:ComponentTextAttributeSetValueTest001
+ * @tc.desc: Verify text value can set normally.
+ * @tc.require: AR000DSEFN
+ */
+HWTEST_F(TextTddTest, textAttr001, TestSize.Level1)
+{
+    TextTddTest::ComponentTextAttributeSetValueTest001();
+}
+
+/**
+ * @tc.name:ComponentTextStyleSetColorTest002
+ * @tc.desc: Verify text color value.
+ * @tc.require: AR000DSEFN
+ */
+HWTEST_F(TextTddTest, textStyle002, TestSize.Level1)
+{
+    TextTddTest::ComponentTextStyleSetColorTest002();
+}
+
+/**
+ * @tc.name:ComponentTextStyleSetOverflowTest003
+ * @tc.desc: Verify text color value.
+ * @tc.require: AR000DSEFN
+ */
+HWTEST_F(TextTddTest, textStyle003, TestSize.Level1)
+{
+    TextTddTest::ComponentTextStyleSetOverflowTest003();
+}
+
+/**
+ * @tc.name:ComponentTextStyleSetLetterSpacingTest004
+ * @tc.desc: Verify text letterSpacing value.
+ * @tc.require: AR000DSEFN
+ */
+HWTEST_F(TextTddTest, textStyle004, TestSize.Level1)
+{
+    TextTddTest::ComponentTextStyleSetLetterSpacingTest004();
+}
+
+/**
+ * @tc.name:ComponentTextStyleSetAlignTest005
+ * @tc.desc: Verify text color value.
+ * @tc.require: AR000DSEFN
+ */
+HWTEST_F(TextTddTest, textStyle005, TestSize.Level1)
+{
+    TextTddTest::ComponentTextStyleSetAlignTest005();
+}
+#endif
+} // namespace ACELite
+} // namespace OHOS
diff --git a/frameworks/src/core/components/test/unittest/common/text_tdd_test.h b/frameworks/src/core/components/test/unittest/common/text_tdd_test.h
new file mode 100755
index 0000000..a45e454
--- /dev/null
+++ b/frameworks/src/core/components/test/unittest/common/text_tdd_test.h
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef OHOS_ACELITE_TEST_TEXT_H
+#define OHOS_ACELITE_TEST_TEXT_H
+
+#include "base_test.h"
+
+namespace OHOS {
+namespace ACELite {
+class TextTddTest : public BaseTest {
+public:
+    TextTddTest();
+    ~TextTddTest() override {};
+    void ComponentTextAttributeSetValueTest001();
+    void ComponentTextStyleSetColorTest002();
+    void ComponentTextStyleSetOverflowTest003();
+    void ComponentTextStyleSetLetterSpacingTest004();
+    void ComponentTextStyleSetAlignTest005();
+    void ComponentTextStyleSetSizeFamilyTest006();
+    void RunTests();
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_TEST_TEXT_H
diff --git a/src/core/components/text_component.cpp b/frameworks/src/core/components/text_component.cpp
old mode 100755
new mode 100644
similarity index 82%
rename from src/core/components/text_component.cpp
rename to frameworks/src/core/components/text_component.cpp
index a9eba47..2ce5473
--- a/src/core/components/text_component.cpp
+++ b/frameworks/src/core/components/text_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -20,6 +20,7 @@
 #include "font/ui_font_header.h"
 #include "key_parser.h"
 #include "keys.h"
+#include "product_adapter.h"
 
 using namespace OHOS;
 
@@ -27,45 +28,36 @@ namespace OHOS {
 namespace ACELite {
 TextComponent::TextComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *styleManager)
     : Component(options, children, styleManager),
-      uiLabel_(nullptr),
       fontSize_(DEFAULT_FONT_SIZE),
       fontFamily_(nullptr),
       textValue_(nullptr),
       overflowMode_(UILabel::LINE_BREAK_CLIP)
 {
     SetComponentName(K_TEXT);
+    fontSize_ = ProductAdapter::GetDefaultFontSize();
 }
 
 bool TextComponent::CreateNativeViews()
 {
-    uiLabel_ = new UILabel();
-    if (uiLabel_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "create native label failed");
-        return false;
-    }
     /* set default text OverFlow clip */
-    uiLabel_->SetLineBreakMode(overflowMode_);
-    return CopyFontFamily(fontFamily_, DEFAULT_FONT_FAMILY);
+    uiLabel_.SetLineBreakMode(overflowMode_);
+    return CopyFontFamily(fontFamily_, ProductAdapter::GetDefaultFontFamilyName());
 }
 
 void TextComponent::ReleaseNativeViews()
 {
-    if (uiLabel_) {
-        delete uiLabel_;
-        uiLabel_ = nullptr;
-    }
     ACE_FREE(textValue_);
     ACE_FREE(fontFamily_);
 }
 
 inline UIView *TextComponent::GetComponentRootView() const
 {
-    return uiLabel_;
+    return const_cast<UILabel *>(&uiLabel_);
 }
 
 UILabel *TextComponent::GetUILabelView() const
 {
-    return uiLabel_;
+    return const_cast<UILabel *>(&uiLabel_);
 }
 
 bool TextComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
@@ -78,7 +70,7 @@ bool TextComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrVa
         }
         case K_SCROLLAMOUNT: {
             int16_t speed = IntegerOf(attrValue);
-            uiLabel_->SetRollSpeed(speed);
+            uiLabel_.SetRollSpeed(speed);
             break;
         }
         default: {
@@ -93,13 +85,13 @@ bool TextComponent::ApplyPrivateStyle(const AppStyleItem *styleItem)
 {
     switch (GetStylePropNameId(styleItem)) {
         case K_COLOR:
-            SetTextColor(*uiLabel_, styleItem);
+            SetTextColor(uiLabel_, styleItem);
             break;
         case K_LETTER_SPACING:
-            SetTextLetterSpace(*uiLabel_, styleItem);
+            SetTextLetterSpace(uiLabel_, styleItem);
             break;
         case K_TEXT_ALIGN:
-            SetTextAlign(*uiLabel_, styleItem);
+            SetTextAlign(uiLabel_, styleItem);
             break;
         case K_FONT_SIZE:
             SetTextSize(styleItem);
@@ -112,10 +104,10 @@ bool TextComponent::ApplyPrivateStyle(const AppStyleItem *styleItem)
             CopyFontFamily(fontFamily_, GetStyleStrValue(styleItem));
             break;
         case K_TEXT_OVERFLOW:
-            SetTextOverflow(*uiLabel_, styleItem);
+            SetTextOverflow(uiLabel_, styleItem);
             break;
         case K_LINE_HEIGHT:
-            SetTextLineHeight(*uiLabel_, styleItem);
+            SetTextLineHeight(uiLabel_, styleItem);
             break;
         default:
             return false;
@@ -178,47 +170,47 @@ void TextComponent::SetTextSize(const AppStyleItem *styleItem)
     fontSize_ = GetStylePixelValue(styleItem);
 }
 
-void TextComponent::PostRender()
+void TextComponent::OnViewAttached()
 {
     if (GetHeight() < 0 && GetWidth() < 0) {
         /* component height & width adjust text context when not set text height & text width */
-        uiLabel_->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT);
+        uiLabel_.SetLineBreakMode(UILabel::LINE_BREAK_ADAPT);
     } else if (GetHeight() < 0 && GetWidth() >= 0) {
         /* component height adjust text context when set width not set text height */
-        uiLabel_->SetLineBreakMode(UILabel::LINE_BREAK_WRAP);
+        uiLabel_.SetLineBreakMode(UILabel::LINE_BREAK_WRAP);
     } else if (GetHeight() >= 0 && GetWidth() < 0) {
         /* component width adjust text context when not set text width */
-        uiLabel_->SetLineBreakMode(UILabel::LINE_BREAK_STRETCH);
+        uiLabel_.SetLineBreakMode(UILabel::LINE_BREAK_STRETCH);
     }
     if (textValue_ != nullptr && fontFamily_ != nullptr) {
-        uiLabel_->SetFont(fontFamily_, fontSize_);
-        uiLabel_->SetText(textValue_);
+        uiLabel_.SetFont(fontFamily_, fontSize_);
+        uiLabel_.SetText(textValue_);
     }
 }
 
-/* watchcallback update text context*/
-void TextComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
+/* watchcallback update text context */
+void TextComponent::PostUpdate(uint16_t attrKeyId)
 {
-    if ((uiLabel_ == nullptr) || !updateResult || !KeyParser::IsKeyValid(attrKeyId)) {
+    if (!KeyParser::IsKeyValid(attrKeyId)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "text component post update check args failed");
         return;
     }
     switch (attrKeyId) {
         case K_VALUE:
             if (textValue_ != nullptr) {
-                uiLabel_->SetText(textValue_);
+                uiLabel_.SetText(textValue_);
             }
             break;
         case K_FONT_SIZE:
         case K_FONT_FAMILY:
             if (fontFamily_ != nullptr) {
-                uiLabel_->SetFont(fontFamily_, fontSize_);
+                uiLabel_.SetFont(fontFamily_, fontSize_);
             }
             break;
         default:
             break;
     }
-    UIView *parent = uiLabel_->GetParent();
+    UIView *parent = uiLabel_.GetParent();
     if (parent != nullptr) {
         parent->LayoutChildren(true);
     }
diff --git a/src/core/components/text_component.h b/frameworks/src/core/components/text_component.h
old mode 100755
new mode 100644
similarity index 93%
rename from src/core/components/text_component.h
rename to frameworks/src/core/components/text_component.h
index 31d6d3c..fc9a39f
--- a/src/core/components/text_component.h
+++ b/frameworks/src/core/components/text_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -38,8 +38,8 @@ protected:
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
     bool ApplyPrivateStyle(const AppStyleItem* styleItem) override;
     UILabel* GetUILabelView() const;
-    void PostRender() override;
-    void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
+    void OnViewAttached() override;
+    void PostUpdate(uint16_t attrKeyId) override;
 
 private:
     // parse js text align style to ui_label
@@ -54,7 +54,7 @@ private:
     void SetTextLetterSpace(UILabel& label, const AppStyleItem* styleItem) const;
     // parse js text line height style to ui_label
     void SetTextLineHeight(UILabel& label, const AppStyleItem* styleItem) const;
-    UILabel* uiLabel_;
+    UILabel uiLabel_;
     uint8_t fontSize_;
     char* fontFamily_;
     char* textValue_;
diff --git a/src/core/components/video_component.cpp b/frameworks/src/core/components/video_component.cpp
old mode 100755
new mode 100644
similarity index 94%
rename from src/core/components/video_component.cpp
rename to frameworks/src/core/components/video_component.cpp
index 5661001..4c7d9ac
--- a/src/core/components/video_component.cpp
+++ b/frameworks/src/core/components/video_component.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -82,6 +82,7 @@ void VideoComponent::UpdatePlayImageInfo(bool playFlag)
     }
     videoPlayImageClickListener_->setVideoPlayImageClickStatus(playFlag);
 }
+
 JSValue VideoComponent::Start(const jerry_value_t func,
                               const jerry_value_t context,
                               const jerry_value_t args[],
@@ -193,8 +194,7 @@ bool VideoComponent::CreateNativeViews()
         return false;
     }
     AddComponentNode(this);
-    PrepareProgressUpdatingThread();
-    return true;
+    return PrepareProgressUpdatingThread();
 }
 
 void VideoComponent::ReleaseNativeViews()
@@ -203,9 +203,9 @@ void VideoComponent::ReleaseNativeViews()
     SetComponentReleasingFlag(true);
     // wait until the updating thread destroyed
     pthread_cond_signal(&updateCondition_);
+    const uint16_t waitThreadDestroyTime = 20000;
     while (!isUpdatingHandlerQuited_) {
-        const uint16_t waitThreadDestoryTime = 20000;
-        usleep(waitThreadDestoryTime);
+        usleep(waitThreadDestroyTime);
     }
     ACE_DELETE(videoView_);
     ACE_DELETE(videoSliderListener_);
@@ -213,6 +213,7 @@ void VideoComponent::ReleaseNativeViews()
     ACE_FREE(videoSourceUrl_);
     SetComponentReleasingFlag(false);
 }
+
 UIView *VideoComponent::GetComponentRootView() const
 {
     return videoView_;
@@ -265,7 +266,7 @@ bool VideoComponent::RegisterVideoEventListener()
     return true;
 }
 
-bool VideoComponent::RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
+bool VideoComponent::RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation)
 {
     if (videoEventListener_ == nullptr || videoView_ == nullptr || videoSliderListener_ == nullptr) {
         return false;
@@ -418,7 +419,7 @@ bool VideoComponent::SetPanelView()
     return true;
 }
 
-void VideoComponent::PostRender()
+void VideoComponent::OnViewAttached()
 {
     if (videoView_ == nullptr) {
         return;
@@ -438,15 +439,15 @@ void VideoComponent::PostRender()
     }
 }
 
-void VideoComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
+void VideoComponent::PostUpdate(uint16_t attrKeyId)
 {
-    if ((videoView_ == nullptr) || !updateResult) {
+    if (videoView_ == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "video component post update check args failed");
         return;
     }
     videoView_->WaitRebuildPlayerFinish();
     videoView_->SetVideoView();
-    if (SetPanelView() == false) {
+    if (!SetPanelView()) {
         HILOG_ERROR(HILOG_MODULE_ACE, "PostUpdate set panel view failed");
         return;
     }
@@ -457,18 +458,18 @@ void VideoComponent::SetComponentReleasingFlag(bool releasing)
 }
 
 #ifdef FEATURE_UPDATE_VIDEO_PROGRESS_ASYNC
-void VideoComponent::PrepareProgressUpdatingThread()
+bool VideoComponent::PrepareProgressUpdatingThread()
 {
     int ret = pthread_mutex_init(&updateLock_, nullptr);
     if (ret != 0) {
         HILOG_ERROR(HILOG_MODULE_ACE, "mutex init failed, %{public}d", ret);
-        return;
+        return false;
     }
     ret = pthread_cond_init(&updateCondition_, nullptr);
     if (ret != 0) {
         HILOG_ERROR(HILOG_MODULE_ACE, "condition init failed, %{public}d", ret);
         (void)pthread_mutex_destroy(&updateLock_);
-        return;
+        return false;
     }
     pthread_t tid;
     pthread_attr_t attr;
@@ -479,8 +480,9 @@ void VideoComponent::PrepareProgressUpdatingThread()
         HILOG_ERROR(HILOG_MODULE_ACE, "create video progress updating thread error, %{public}d", ret);
         (void)pthread_mutex_destroy(&updateLock_);
         (void)pthread_cond_destroy(&updateCondition_);
-        return;
+        return false;
     }
+    return true;
 }
 
 void VideoComponent::UpdateProgress()
@@ -579,7 +581,7 @@ void VideoComponent::OnPlayStateChanged(VideoPlayState newState)
     }
 }
 
-/* seperated thread to trigger all update progress request */
+/* separated thread to trigger all update progress request */
 void *VideoComponent::UpdateProgressHandler(void *arg)
 {
     prctl(PR_SET_NAME, "UpdateProgressHandler");
diff --git a/src/core/components/video_component.h b/frameworks/src/core/components/video_component.h
similarity index 94%
rename from src/core/components/video_component.h
rename to frameworks/src/core/components/video_component.h
index 4ff3bc8..3c50a31 100755
--- a/src/core/components/video_component.h
+++ b/frameworks/src/core/components/video_component.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -140,7 +140,7 @@ public:
         ReleaseJerryValue(playSeekingFunc_, VA_ARG_END_FLAG);
     }
 
-    void OnChange(int16_t progress) override
+    void OnChange(int32_t progress) override
     {
         if (video_ == nullptr) {
             return;
@@ -160,7 +160,7 @@ public:
         video_->CallJSFunctionWithOnePara(playSeekingFunc_, progress);
     }
 
-    bool OnClick(UIView& view, const ClickEvent& event) override
+    bool OnClick(UIView &view, const ClickEvent& event) override
     {
         if (SetPlayPositionInfo(progressValue_)) {
             HILOG_DEBUG(HILOG_MODULE_ACE, "slider onClick video to %{public}d", progressValue_);
@@ -168,14 +168,14 @@ public:
         }
         return false;
     }
-    void OnRelease(int16_t progress) override
+    void OnRelease(int32_t progress) override
     {
         if (SetPlayPositionInfo(progress)) {
             HILOG_DEBUG(HILOG_MODULE_ACE, "slider release video to %{public}d", progress);
         }
     }
 
-    bool SetPlayPositionInfo(int16_t progressValue)
+    bool SetPlayPositionInfo(int32_t progressValue)
     {
         if (video_ == nullptr) {
             return false;
@@ -200,7 +200,7 @@ public:
 private:
     VideoView* video_;
     jerry_value_t playSeekingFunc_;
-    int16_t progressValue_;
+    int32_t progressValue_;
 };
 
 class VideoEventListener final: public OHOS::Media::PlayerCallback {
@@ -322,9 +322,9 @@ protected:
     UIView *GetComponentRootView() const override;
     bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
     bool ApplyPrivateStyle(const AppStyleItem* style) override;
-    void PostRender() override;
-    void PostUpdate(uint16_t attrKeyId, bool updateResult) override;
-    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue) override;
+    void OnViewAttached() override;
+    void PostUpdate(uint16_t attrKeyId) override;
+    bool RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue, bool isStopPropagation) override;
 
     static List<Component *> componentNodes_;
 
@@ -337,7 +337,7 @@ private:
     void SetVideoControls(jerry_value_t attrValue);
     void RegisterNativeFunctions();
     bool RegisterVideoEventListener();
-    void PrepareProgressUpdatingThread();
+    bool PrepareProgressUpdatingThread();
     void UpdatePlayImageInfo(bool playFlag);
     void UpdateProgress();
     void SetVideoPlayingFlag(bool playing);
diff --git a/src/core/components/video_state_callback.h b/frameworks/src/core/components/video_state_callback.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/components/video_state_callback.h
rename to frameworks/src/core/components/video_state_callback.h
diff --git a/src/core/components/video_view.cpp b/frameworks/src/core/components/video_view.cpp
similarity index 93%
rename from src/core/components/video_view.cpp
rename to frameworks/src/core/components/video_view.cpp
index a10bcd3..c0e80ba 100755
--- a/src/core/components/video_view.cpp
+++ b/frameworks/src/core/components/video_view.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -42,7 +42,8 @@ bool VideoView::CreateVideoView()
     videoPlayer_ = new Media::Player();
     surfaceView_ = new UISurfaceView();
     panelView_ = new PanelView();
-    if (videoPlayer_ == nullptr || surfaceView_ == nullptr || panelView_ == nullptr || !(panelView_->InitView())) {
+    if ((videoPlayer_ == nullptr) || (surfaceView_ == nullptr) ||
+        (panelView_ == nullptr) || !(panelView_->InitView())) {
         return false;
     }
     Add(surfaceView_);
@@ -81,7 +82,7 @@ void VideoView::PanelRefreshLayout()
 
 VideoView::~VideoView()
 {
-    if (!DestoryPlayer()) {
+    if (!DestroyPlayer()) {
         HILOG_ERROR(HILOG_MODULE_ACE, "videoView destroy player failed");
     }
     ACE_DELETE(panelView_);
@@ -118,6 +119,7 @@ int32_t VideoView::Prepare()
     }
     return -1;
 }
+
 int32_t VideoView::Play()
 {
     if ((videoPlayer_ != nullptr) && (videoPlayer_->Play() == 0)) {
@@ -131,6 +133,7 @@ int32_t VideoView::Play()
     }
     return -1;
 }
+
 int32_t VideoView::Pause()
 {
     if ((videoPlayer_ != nullptr) && (videoPlayer_->Pause() == 0)) {
@@ -144,6 +147,7 @@ int32_t VideoView::Pause()
     }
     return -1;
 }
+
 int32_t VideoView::Stop()
 {
     if ((videoPlayer_ != nullptr) && (videoPlayer_->Stop() == 0)) {
@@ -170,6 +174,7 @@ bool VideoView::WaitRebuildPlayerFinish()
     }
     return true;
 }
+
 void VideoView::PrepareRebuildPlayerThread()
 {
     pthread_t threadId;
@@ -185,7 +190,7 @@ void VideoView::PrepareRebuildPlayerThread()
 
 void *VideoView::RebuildPlayerHandler(void *arg)
 {
-    VideoView *videoView = (VideoView *)arg;
+    VideoView *videoView = static_cast<VideoView *>(arg);
     HILOG_DEBUG(HILOG_MODULE_ACE, "rebuild player handler");
     prctl(PR_SET_NAME, "VideoPlayerRebuildHandler");
     if (!videoView->ResetPlayer()) {
@@ -197,7 +202,7 @@ void *VideoView::RebuildPlayerHandler(void *arg)
 bool VideoView::ResetPlayer()
 {
     (void)pthread_mutex_lock(&rebuildPlayerlock_);
-    if (!DestoryPlayer()) {
+    if (!DestroyPlayer()) {
         HILOG_ERROR(HILOG_MODULE_ACE, "videoView destroy player failed");
     }
     if (!CreatePlayer()) {
@@ -212,19 +217,19 @@ bool VideoView::ResetPlayer()
     return true;
 }
 
-bool VideoView::DestoryPlayer()
+bool VideoView::DestroyPlayer()
 {
     if (videoPlayer_ == nullptr) {
         return false;
     }
     if (videoPlayer_->IsPlaying() && videoPlayer_->Stop() != 0) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "DestoryPlayer fail to stop videoplayer");
+        HILOG_ERROR(HILOG_MODULE_ACE, "DestroyPlayer fail to stop videoplayer");
     }
     if (videoPlayer_->Reset() != 0) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "DestoryPlayer fail to reset videoplayer");
+        HILOG_ERROR(HILOG_MODULE_ACE, "DestroyPlayer fail to reset videoplayer");
     }
     if (videoPlayer_->Release() != 0) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "DestoryPlayer fail to release videoplayer");
+        HILOG_ERROR(HILOG_MODULE_ACE, "DestroyPlayer fail to release videoplayer");
     }
     delete videoPlayer_;
     videoPlayer_ = nullptr;
@@ -389,11 +394,11 @@ void VideoView::SetVideoPanel()
 
 void VideoView::UpdatePanelProgress()
 {
-    // update current play postion time
+    // update current play position time
     UpdatePanelTimeText(true);
 }
 
-void VideoView::SetCurrentPlayTimeText(int16_t inSeconds)
+void VideoView::SetCurrentPlayTimeText(int32_t inSeconds)
 {
     if (panelView_ == nullptr || inSeconds <= 0 || inSeconds >= (PanelView::MAX_HOURS * PanelView::SECONDS_PER_HOUR)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "input duration inSeconds time exception");
@@ -520,8 +525,7 @@ void VideoView::CallJSFunctionWithOnePara(const jerry_value_t &callBackFunc, con
     jerry_value_t value = jerry_create_number(inputValue);
     jerry_value_t args[1];
     args[0] = jerry_create_object();
-    const char attrName[] = "currenttime";
-    jerry_value_t result = jerryx_set_property_str(args[0], attrName, value);
+    jerry_value_t result = jerryx_set_property_str(args[0], "currenttime", value);
     if (!jerry_value_is_error(result)) {
         CallJSFunctionAutoRelease(callBackFunc, jerry_create_undefined(), args, 1);
     }
diff --git a/src/core/components/video_view.h b/frameworks/src/core/components/video_view.h
similarity index 93%
rename from src/core/components/video_view.h
rename to frameworks/src/core/components/video_view.h
index 3b25b41..05acd78 100755
--- a/src/core/components/video_view.h
+++ b/frameworks/src/core/components/video_view.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -31,7 +31,6 @@
 #include "ui_label.h"
 #include "ui_slider.h"
 #include "ui_surface_view.h"
-#include "ui_text_language.h"
 #include "ui_view.h"
 #include "ui_view_group.h"
 #include "video_state_callback.h"
@@ -171,13 +170,13 @@ public:
 
     void FormatTime(uint32_t inSeconds, char* outBuffer, uint8_t bufferLength);
     void UpdatePanelTimeText(bool currentTime = true);
-    void SetCurrentPlayTimeText(int16_t progress);
+    void SetCurrentPlayTimeText(int32_t progress);
     void CallJSFunctionWithOnePara(const jerry_value_t &callBackFunc, const int64_t inputValue);
 private:
     void SetVideoPanel();
     void SetSurfaceView();
     bool ResetPlayer();
-    bool DestoryPlayer();
+    bool DestroyPlayer();
     bool CreatePlayer();
     static void *RebuildPlayerHandler(void *arg);
     static pthread_mutex_t rebuildPlayerlock_;
diff --git a/src/core/context/ace_ability.cpp b/frameworks/src/core/context/ace_ability.cpp
similarity index 90%
rename from src/core/context/ace_ability.cpp
rename to frameworks/src/core/context/ace_ability.cpp
index 3e82981..ea15e67 100755
--- a/src/core/context/ace_ability.cpp
+++ b/frameworks/src/core/context/ace_ability.cpp
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 #include "ace_ability.h"
-
+#include <climits>
 #include "ability_env.h"
 #include "ace_log.h"
 #include "ace_mem_base.h"
@@ -37,7 +37,14 @@ void AceAbility::OnStart(const Want &want)
     HILOG_DEBUG(HILOG_MODULE_ACE, "ace ability src path = %s", abilitySrcPath);
     HILOG_DEBUG(HILOG_MODULE_ACE, "ace ability bundle name = %s", bundleName);
 
-    char* jsBundlePath = RelocateJSSourceFilePath(abilitySrcPath, "assets/js/default/");
+    char fullRootPath[PATH_MAX + 1] = {0};
+    if (realpath(abilitySrcPath, fullRootPath) == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "invalid ability path!");
+        return;
+    }
+    const char *fullRootPathStr = fullRootPath;
+
+    char* jsBundlePath = RelocateJSSourceFilePath(fullRootPathStr, "assets/js/default/");
     HILOG_DEBUG(HILOG_MODULE_ACE, "ace ability js bundle path = %s", jsBundlePath);
     const uint16_t token = 0xff; // js ability's token is hidden by AMS
     jsAbility_.Launch(jsBundlePath, bundleName, (uint16_t)token);
diff --git a/src/core/context/ace_ability.h b/frameworks/src/core/context/ace_ability.h
similarity index 100%
rename from src/core/context/ace_ability.h
rename to frameworks/src/core/context/ace_ability.h
diff --git a/src/core/context/ace_event_error_code.cpp b/frameworks/src/core/context/ace_event_error_code.cpp
old mode 100755
new mode 100644
similarity index 66%
rename from src/core/context/ace_event_error_code.cpp
rename to frameworks/src/core/context/ace_event_error_code.cpp
index 0e4c12a..851179a
--- a/src/core/context/ace_event_error_code.cpp
+++ b/frameworks/src/core/context/ace_event_error_code.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -15,6 +15,7 @@
 
 
 #include "ace_event_error_code.h"
+#include "product_adapter.h"
 #ifdef FEATURE_ACELITE_MC_EVENT_ERROR_CODE_PRINT
 namespace OHOS {
 namespace ACELite {
@@ -24,19 +25,19 @@ EventErrorCodePrint *EventErrorCodePrint::GetInstance()
     return &printInstance;
 }
 
-void EventErrorCodePrint::AceEventPrint(MC_U8 info2, MC_U8 info3)
+void EventErrorCodePrint::AceEventPrint(uint8_t info2, uint8_t info3)
 {
-    EventPrintf(MT_ACE, MT_ACE_FWK, info2, info3);
+    ProductAdapter::PrintEventTrace(0, info2, info3);
 }
 
-void EventErrorCodePrint::AceEventPrint(MC_U8 info1, MC_U8 info2, MC_U8 info3)
+void EventErrorCodePrint::AceEventPrint(uint8_t info1, uint8_t info2, uint8_t info3)
 {
-    EventPrintf(MT_ACE, info1, info2, info3);
+    ProductAdapter::PrintEventTrace(info1, info2, info3);
 }
 
-void EventErrorCodePrint::AceErrorCodePrint(MC_U8 info2, MC_U16 rfu)
+void EventErrorCodePrint::AceErrorCodePrint(uint8_t info2, uint16_t rfu)
 {
-    ErrorCodePrintf(EXCE_ACE, EXCE_ACE_FWK, info2, rfu);
+    ProductAdapter::PrintErrCode(info2, rfu);
 }
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/context/ace_event_error_code.h b/frameworks/src/core/context/ace_event_error_code.h
old mode 100755
new mode 100644
similarity index 86%
rename from src/core/context/ace_event_error_code.h
rename to frameworks/src/core/context/ace_event_error_code.h
index 95e90a2..24c1093
--- a/src/core/context/ace_event_error_code.h
+++ b/frameworks/src/core/context/ace_event_error_code.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -19,9 +19,10 @@
 #include "acelite_config.h"
 
 #if defined(FEATURE_ACELITE_MC_EVENT_ERROR_CODE_PRINT)
-#include "mc_hal_log.h"
+#include "ace_event_id.h"
 #include "memory_heap.h"
 #include "non_copyable.h"
+#include <cstdint>
 #define ACE_EVENT_PRINT(info2, info3) \
     EventErrorCodePrint::GetInstance()->AceEventPrint(info2, info3)
 #define ACE_FEATURE_EVENT_PRINT(info1, info2, info3) \
@@ -47,11 +48,11 @@ public:
 
     static EventErrorCodePrint *GetInstance();
 
-    void AceEventPrint(MC_U8 info2, MC_U8 info3);
+    void AceEventPrint(uint8_t info2, uint8_t info3);
 
-    void AceEventPrint(MC_U8 info1, MC_U8 info2, MC_U8 info3);
+    void AceEventPrint(uint8_t info1, uint8_t info2, uint8_t info3);
 
-    void AceErrorCodePrint(MC_U8 info2, MC_U16 rfu);
+    void AceErrorCodePrint(uint8_t info2, uint16_t rfu);
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/context/fatal_handler.cpp b/frameworks/src/core/context/fatal_handler.cpp
old mode 100755
new mode 100644
similarity index 87%
rename from src/core/context/fatal_handler.cpp
rename to frameworks/src/core/context/fatal_handler.cpp
index ec23c38..3091d06
--- a/src/core/context/fatal_handler.cpp
+++ b/frameworks/src/core/context/fatal_handler.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -23,6 +23,7 @@
 #include "js_fwk_common.h"
 #include "presets/console_log_impl.h"
 #include "presets/feature_ability_module.h"
+#include "product_adapter.h"
 #include "root_view.h"
 #include "task_manager.h"
 #include "ui_label.h"
@@ -38,10 +39,6 @@ FatalHandler &FatalHandler::GetInstance()
     return instance;
 }
 
-#ifdef OHOS_ACELITE_PRODUCT_WATCH
-extern "C" int ForceStopAbility();
-extern "C" void RenderEnd();
-#endif // OHOS_ACELITE_PRODUCT_WATCH
 static void HandleFatal(int errorCode)
 {
 #ifdef FEATURE_FATAL_ERROR_HANDLING
@@ -54,12 +51,14 @@ static void HandleFatal(int errorCode)
     FatalHandler::GetInstance().SetFatalError(errorCode);
     // send message to AMS to tear down us
 #ifdef OHOS_ACELITE_PRODUCT_WATCH
+    // try to recycling resource first
+    FatalHandler::GetInstance().HandleFatalInternal();
     // inform AMS we are facing fatal error
-    (void)ForceStopAbility();
+    ProductAdapter::SendTerminatingRequest(0, true);
     // sleep to stuck engien to make ANR for triggering force-stop
     const uint32_t sleepTime = 3000;
-    uint8_t maxRetryCount = 5;
-    while (!(FatalHandler::GetInstance().IsFatalErrorHandleDone()) && (maxRetryCount > 0)) {
+    uint8_t maxRetryCount = 20;
+    while (maxRetryCount > 0) {
         osDelay(sleepTime);
         maxRetryCount--;
     }
@@ -73,10 +72,13 @@ static void HandleFatal(int errorCode)
 #endif // FEATURE_FATAL_ERROR_HANDLING
 }
 
-void FatalHandler::RegisterFatalHandler() const
+void FatalHandler::RegisterFatalHandler(JSAbility *ability)
 {
+    jsAbility_ = ability;
+#ifndef JERRY_PORTING_DEPENDENCY
     // set callback into jerry
     jerry_port_default_set_fatal_handler(HandleFatal);
+#endif // JERRY_PORTING_DEPENDENCY
 }
 
 bool FatalHandler::IsErrorSupported(int errorCode) const
@@ -106,6 +108,23 @@ bool FatalHandler::IsErrorSupported(int errorCode) const
     return false;
 }
 
+void FatalHandler::HandleFatalInternal()
+{
+    // detach the root component from root view
+    RootView *rootView = RootView::GetInstance();
+    if ((rootView != nullptr) && (pageRootView_ != nullptr)) {
+        rootView->Remove(pageRootView_);
+    }
+    // do the recycling
+    HandleFatalError(FatalHandler::ERR_INVALID);
+    // transfer ability to destroy
+    if (jsAbility_ != nullptr) {
+        jsAbility_->TransferToDestroy();
+    }
+    // reset locals
+    CleanUpFatalResource();
+}
+
 void FatalHandler::HandleFatalError(int errorCode)
 {
     if (errorCode == ERR_INVALID && fatalErrorCode_ == ERR_INVALID) {
@@ -139,13 +158,13 @@ void FatalHandler::ResetRendering()
 {
     if (IsTEHandling()) {
         // release the render flag as we are going into sleep and will be force killed
-#ifdef OHOS_ACELITE_PRODUCT_WATCH
+#ifdef RENDER_MUTEX_CONTROL_ENABLE
         TaskManager::GetInstance()->ResetTaskHandlerMutex();
 #endif
         SetTEHandlingFlag(false);
     }
 #ifdef OHOS_ACELITE_PRODUCT_WATCH
-    RenderEnd();
+    ProductAdapter::NotifyRenderEnd();
 #endif
 }
 
@@ -227,6 +246,7 @@ void FatalHandler::CleanUpFatalResource()
     // reset error code when exitting the whole application
     fatalErrorCode_ = ERR_INVALID;
     isExiting_ = false;
+    pageRootView_ = nullptr;
 }
 
 bool FatalHandler::IsJSRuntimeFatal() const
@@ -234,14 +254,11 @@ bool FatalHandler::IsJSRuntimeFatal() const
     bool result = false;
     switch (fatalErrorCode_) {
         case ERR_OUT_OF_MEMORY: // JS heap overflow
-            result = true;
-            break;
+            // fall through
         case ERR_REF_COUNT_LIMIT:
-            result = true;
-            break;
+            // fall through
         case ERR_DISABLED_BYTE_CODE:
-            result = true;
-            break;
+            // fall through
         case ERR_FAILED_INTERNAL_ASSERTION:
             result = true;
             break;
@@ -321,5 +338,10 @@ bool FatalHandler::IsAppExiting() const
 {
     return isExiting_;
 }
+
+void FatalHandler::SetCurrentPageRootView(UIView *pageRoot)
+{
+    pageRootView_ = pageRoot;
+}
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/context/fatal_handler.h b/frameworks/src/core/context/fatal_handler.h
old mode 100755
new mode 100644
similarity index 83%
rename from src/core/context/fatal_handler.h
rename to frameworks/src/core/context/fatal_handler.h
index 93fa377..93d3e07
--- a/src/core/context/fatal_handler.h
+++ b/frameworks/src/core/context/fatal_handler.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -17,8 +17,10 @@
 #define OHOS_ACELITE_FATAL_HANDLER_H
 
 #include "component.h"
+#include "js_ability.h"
 #include "list.h"
 #include "non_copyable.h"
+#include "ui_view.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -27,9 +29,10 @@ public:
     ACE_DISALLOW_COPY_AND_MOVE(FatalHandler);
     static FatalHandler& GetInstance();
     const char* GetErrorStr(int errorCode) const;
-    void RegisterFatalHandler() const;
+    void RegisterFatalHandler(JSAbility *ability);
     void SetFatalError(int errorCode);
     void HandleFatalError(int errorCode);
+    void HandleFatalInternal();
     void CleanUpFatalResource();
     bool IsJSRuntimeFatal() const;
     bool IsJSHeapOverflow() const;
@@ -43,6 +46,8 @@ public:
     void ResetRendering();
     void SetExitingFlag(bool flag);
     bool IsAppExiting() const;
+    // when the page is attached or destroyed by state machine, the fatal handler will be got notified
+    void SetCurrentPageRootView(UIView *pageRoot);
     // define all fatal error below, please note the jerry fatal defines, avoid conflicts
     static const int ERR_INVALID = 0;
     static const int ERR_NATIVE_OUT_OF_MEMORY = 200;
@@ -53,7 +58,9 @@ public:
 
 private:
     FatalHandler()
-        : componentNodes_(),
+        : jsAbility_(nullptr),
+          pageRootView_(nullptr),
+          componentNodes_(),
           fatalErrorCode_(0),
           isRecycling_(false),
           isFatalHandled_(false),
@@ -62,6 +69,8 @@ private:
     ~FatalHandler() {}
     bool IsErrorSupported(int errorCode) const;
     void RecycleComponents();
+    JSAbility *jsAbility_;
+    UIView *pageRootView_;
     List<Component *> componentNodes_;
     int fatalErrorCode_;
     bool isRecycling_;
diff --git a/src/core/context/js_ability.cpp b/frameworks/src/core/context/js_ability.cpp
old mode 100755
new mode 100644
similarity index 69%
rename from src/core/context/js_ability.cpp
rename to frameworks/src/core/context/js_ability.cpp
index 6f09c25..f541a1c
--- a/src/core/context/js_ability.cpp
+++ b/frameworks/src/core/context/js_ability.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -19,20 +19,20 @@
 #include "ace_event_error_code.h"
 #include "ace_log.h"
 #include "acelite_config.h"
+#include "async_task_manager.h"
 #ifdef OHOS_ACELITE_PRODUCT_WATCH
 #include "dft_impl.h"
+#include "js_async_work.h"
 #endif // OHOS_ACELITE_PRODUCT_WATCH
 #include "fatal_handler.h"
 #include "js_ability_impl.h"
 #include "js_profiler.h"
-#ifdef FEATURE_ACELITE_PRODUCT_MEMORY_POOL
-#include "mem_pool.h"
-#endif
+#include "product_adapter.h"
 
 namespace OHOS {
 namespace ACELite {
 /**
- * This is a helper function to cast void* to JSAbilityImpl*, for header seperating purpose.
+ * This is a helper function to cast void* to JSAbilityImpl*, for header separating purpose.
  */
 static JSAbilityImpl *CastAbilityImpl(void *abilityImpl)
 {
@@ -45,14 +45,15 @@ static JSAbilityImpl *CastAbilityImpl(void *abilityImpl)
 
 static void DumpNativeMemoryUsage()
 {
-#ifdef FEATURE_ACELITE_PRODUCT_MEMORY_POOL
-    MemPool::MemInfo memInfo;
-    MemPool::GetInstance()->GetMemInfo(&memInfo);
-    HILOG_DEBUG(HILOG_MODULE_ACE, "avaliable free size: %d", memInfo.freeSize);
-#endif // FEATURE_ACELITE_PRODUCT_MEMORY_POOL
+#ifdef OHOS_ACELITE_PRODUCT_WATCH
+    NativeMemInfo memInfo;
+    ProductAdapter::GetNativeMemInfo(&memInfo);
+    HILOG_DEBUG(HILOG_MODULE_ACE, "available free size: %d", memInfo.freeSize);
+#endif // OHOS_ACELITE_PRODUCT_WATCH
 }
 
-void JSAbility::Launch(const char * const abilityPath, const char * const bundleName, uint16_t token)
+void JSAbility::Launch(const char * const abilityPath, const char * const bundleName, uint16_t token,
+                       const char *pageInfo)
 {
     if (jsAbilityImpl_ != nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "Launch only can be triggered once");
@@ -80,9 +81,9 @@ void JSAbility::Launch(const char * const abilityPath, const char * const bundle
     }
     START_TRACING(LAUNCH);
     JSAbilityImpl *jsAbilityImpl = CastAbilityImpl(jsAbilityImpl_);
-    FatalHandler::GetInstance().RegisterFatalHandler();
     jsAbilityImpl->InitEnvironment(abilityPath, bundleName, token);
-    jsAbilityImpl->DeliverCreate();
+    FatalHandler::GetInstance().RegisterFatalHandler(this);
+    jsAbilityImpl->DeliverCreate(pageInfo);
     STOP_TRACING();
     OUTPUT_TRACE();
 }
@@ -96,6 +97,8 @@ void JSAbility::Show() const
 
     JSAbilityImpl *jsAbilityImpl = CastAbilityImpl(jsAbilityImpl_);
     jsAbilityImpl->Show();
+    AsyncTaskManager::GetInstance().SetFront(true);
+    ProductAdapter::UpdateShowingState(true);
 }
 
 void JSAbility::Hide() const
@@ -107,6 +110,7 @@ void JSAbility::Hide() const
 
     JSAbilityImpl *jsAbilityImpl = CastAbilityImpl(jsAbilityImpl_);
     jsAbilityImpl->Hide();
+    AsyncTaskManager::GetInstance().SetFront(false);
 }
 
 void JSAbility::TransferToDestroy()
@@ -122,9 +126,11 @@ void JSAbility::TransferToDestroy()
     jsAbilityImpl_ = nullptr;
     // Reset render flag or low layer task mutex in case we are during the rendering process,
     // this situation might happen if the destroy function is called outside of JS thread, such as AMS.
+    ProductAdapter::UpdateShowingState(false);
     FatalHandler::GetInstance().ResetRendering();
     FatalHandler::GetInstance().SetExitingFlag(false);
 #ifdef OHOS_ACELITE_PRODUCT_WATCH
+    JsAsyncWork::SetAppQueueHandler(nullptr);
     DftImpl::GetInstance()->RegisterPageReplaced(nullptr);
 #endif // OHOS_ACELITE_PRODUCT_WATCH
     DumpNativeMemoryUsage();
@@ -146,35 +152,50 @@ const char *JSAbility::GetPackageName()
     return JsAppContext::GetInstance()->GetCurrentBundleName();
 }
 
+// this public interface will be deprecated, only fatal scenario can trigger force destroy
 void JSAbility::ForceDestroy()
 {
-#ifdef OHOS_ACELITE_PRODUCT_WATCH
-    FatalHandler::GetInstance().HandleFatalError(FatalHandler::ERR_INVALID);
-    TransferToDestroy();
-    FatalHandler::GetInstance().CleanUpFatalResource();
-#endif // OHOS_ACELITE_PRODUCT_WATCH
+    HILOG_ERROR(HILOG_MODULE_ACE, "ForceDestroy interface is deprecated as JS engine can not run on other task");
 }
 
-#ifdef OHOS_ACELITE_PRODUCT_WATCH
-static RenderTickHandler g_renderTick = nullptr;
-#endif // OHOS_ACELITE_PRODUCT_WATCH
-void JSAbility::RegisterTEHandler(RenderTickHandler handler)
+LazyLoadManager *GetLazyLoadManager()
 {
-#ifdef OHOS_ACELITE_PRODUCT_WATCH
-    if (g_renderTick != nullptr) {
-        // the TE handler registering only can be performed once after whole system booting up
+    JsAppContext *context = JsAppContext::GetInstance();
+    return const_cast<LazyLoadManager *>(context->GetLazyLoadManager());
+}
+
+LazyLoadState GetLazyLoadManagerState()
+{
+    LazyLoadManager *lazyLoadManager = GetLazyLoadManager();
+    return lazyLoadManager->GetState();
+}
+
+void JSAbility::LazyLoadHandleRenderTick(void *data)
+{
+    UNUSED(data);
+    // double check, if state reseted, break
+    LazyLoadState state = GetLazyLoadManagerState();
+    if (state == LazyLoadState::INIT || state == LazyLoadState::DONE) {
         return;
     }
-    g_renderTick = handler;
-#endif // OHOS_ACELITE_PRODUCT_WATCH
+
+    GetLazyLoadManager()->RenderLazyLoadWatcher();
 }
 
 void JSAbility::HandleRenderTick()
 {
+#if defined(TARGET_SIMULATOR) && defined(FEATURE_LAZY_LOADING_MODULE)
+    LazyLoadHandleRenderTick(nullptr);
+#endif
+
 #ifdef OHOS_ACELITE_PRODUCT_WATCH
-    if ((g_renderTick != nullptr) && !(FatalHandler::GetInstance().IsAppExiting())) {
+    if ((ProductAdapter::IsTEHandlersRegisted()) && !(FatalHandler::GetInstance().IsAppExiting())) {
         FatalHandler::GetInstance().SetTEHandlingFlag(true);
-        g_renderTick();
+        ProductAdapter::ProcessOneTE();
+        // check if state is ready
+        if (GetLazyLoadManagerState() == LazyLoadState::READY) {
+            JsAsyncWork::DispatchAsyncWork(LazyLoadHandleRenderTick, nullptr);
+        }
         FatalHandler::GetInstance().SetTEHandlingFlag(false);
     }
 #endif // OHOS_ACELITE_PRODUCT_WATCH
diff --git a/src/core/context/js_ability_impl.cpp b/frameworks/src/core/context/js_ability_impl.cpp
old mode 100755
new mode 100644
similarity index 93%
rename from src/core/context/js_ability_impl.cpp
rename to frameworks/src/core/context/js_ability_impl.cpp
index 29d35c4..cddf4cc
--- a/src/core/context/js_ability_impl.cpp
+++ b/frameworks/src/core/context/js_ability_impl.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -12,21 +12,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 #include "js_ability_impl.h"
-#include "component.h"
-#include "js_app_context.h"
-#include "js_app_environment.h"
-#if ENABLED(SECURE_C_FUNCTION)
-#include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 #include "ace_event_error_code.h"
 #include "ace_log.h"
+#include "component.h"
 #include "component_utils.h"
 #include "fatal_handler.h"
+#include "js_app_context.h"
+#include "js_app_environment.h"
 #include "js_profiler.h"
 #include "module_manager.h"
 #include "presets/localization_module.h"
 #include "presets/timer_module.h"
+#include "securec.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -104,7 +103,7 @@ void JSAbilityImpl::CleanUp()
     OUTPUT_TRACE();
 }
 
-void JSAbilityImpl::DeliverCreate()
+void JSAbilityImpl::DeliverCreate(const char *param)
 {
     START_TRACING(APP_ON_CREATE);
     // call InvokeOnCreate
@@ -116,8 +115,13 @@ void JSAbilityImpl::DeliverCreate()
         return;
     }
     // call render to setup user interface
-    jerry_value_t object = jerry_create_object();
-    JerrySetStringProperty(object, ROUTER_PAGE_URI, PATH_DEFAULT);
+    jerry_value_t object = UNDEFINED;
+    if (param == nullptr) {
+        object = jerry_create_object();
+        JerrySetStringProperty(object, ROUTER_PAGE_URI, PATH_DEFAULT);
+    } else {
+        object = jerry_json_parse(reinterpret_cast<const jerry_char_t *>(param), strlen(param));
+    }
     if (router_) {
         jerry_release_value(router_->Replace(object, false));
         rendered_ = true;
diff --git a/src/core/context/js_ability_impl.h b/frameworks/src/core/context/js_ability_impl.h
old mode 100755
new mode 100644
similarity index 95%
rename from src/core/context/js_ability_impl.h
rename to frameworks/src/core/context/js_ability_impl.h
index 5385476..8ba98ed
--- a/src/core/context/js_ability_impl.h
+++ b/frameworks/src/core/context/js_ability_impl.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -80,10 +80,10 @@ public:
 
     /**
      * @fn JSAbilityRuntime::DeliverCreate();
-     *
+     * @param param the JS object to init the app start
      * @brief call this function when transfer lifecycle into init
      */
-    void DeliverCreate();
+    void DeliverCreate(const char *param = nullptr);
 
     /**
      * @fn JSAbilityRuntime::Show();
diff --git a/src/core/context/js_app_context.cpp b/frameworks/src/core/context/js_app_context.cpp
similarity index 90%
rename from src/core/context/js_app_context.cpp
rename to frameworks/src/core/context/js_app_context.cpp
index 22679c2..61635c5 100755
--- a/src/core/context/js_app_context.cpp
+++ b/frameworks/src/core/context/js_app_context.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -21,14 +21,11 @@
 #endif
 #include "component_factory.h"
 #include "component_utils.h"
-#include "js_app_environment.h"
-#include "platform_adapter.h"
-#if ENABLED(SECURE_C_FUNCTION)
-#include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 #include "fatal_handler.h"
+#include "js_app_environment.h"
 #include "js_profiler.h"
-#include "root_view.h"
+#include "platform_adapter.h"
+#include "securec.h"
 #include "string_util.h"
 #include "task_manager.h"
 #include "ui_view_group.h"
@@ -64,10 +61,10 @@ jerry_value_t JsAppContext::Eval(const char * const jsFileFullPath, size_t fileN
     uint32_t contentLength = 0;
     START_TRACING(PAGE_CODE_LOAD);
     bool snapshotMode = JsAppEnvironment::GetInstance()->IsSnapshotMode();
-    char *jsCode = ReadFile(jsFileFullPath, &contentLength, snapshotMode);
+    char *jsCode = ReadFile(jsFileFullPath, contentLength, snapshotMode);
     STOP_TRACING();
-    if (jsCode == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "empty js file, eval user code failed");
+    if ((jsCode == nullptr) || (contentLength > FILE_CONTENT_LENGTH_MAX)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "empty js file or length is incorrect, eval user code failed");
         ACE_ERROR_CODE_PRINT(EXCE_ACE_ROUTER_REPLACE_FAILED, EXCE_ACE_PAGE_FILE_READ_FAILED);
         return UNDEFINED;
     }
@@ -75,7 +72,8 @@ jerry_value_t JsAppContext::Eval(const char * const jsFileFullPath, size_t fileN
     START_TRACING(PAGE_CODE_EVAL);
     jerry_value_t viewModel = UNDEFINED;
     if (snapshotMode) {
-        viewModel = jerry_exec_snapshot(reinterpret_cast<const uint32_t *>(jsCode), contentLength, 0, 1);
+        const uint32_t *snapshotContent = reinterpret_cast<const uint32_t *>(jsCode);
+        viewModel = jerry_exec_snapshot(snapshotContent, contentLength, 0, 1);
     } else {
         const jerry_char_t *jsScript = reinterpret_cast<const jerry_char_t *>(jsCode);
         jerry_value_t retValue = jerry_parse(reinterpret_cast<const jerry_char_t *>(jsFileFullPath), fileNameLength,
@@ -146,27 +144,6 @@ jerry_value_t JsAppContext::Render(jerry_value_t viewModel) const
     return nativeElement;
 }
 
-void JsAppContext::Show() const
-{
-    RootView *rootView = RootView::GetInstance();
-    if (rootView == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "get rootView is nullptr");
-        return;
-    }
-    rootView->Invalidate();
-}
-
-void JsAppContext::RemoveAllView() const
-{
-    RootView *rootView = RootView::GetInstance();
-    if (rootView == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "get rootView is nullptr");
-        return;
-    }
-    rootView->RemoveAll();
-    rootView->Invalidate();
-}
-
 void JsAppContext::TerminateAbility() const
 {
     if (currentToken_ == 0) {
@@ -271,8 +248,8 @@ char *JsAppContext::GetResourcePath(const char *uri) const
         return nullptr;
     }
     size_t size = strlen(uri);
-    if (size == 0) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "uri is empty.");
+    if (size == 0 || size > NAME_LENGTH_MAX) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "uri is empty or too long.");
         return nullptr;
     }
     if (StringUtil::StartsWith(uri, URI_PREFIX_DATA)) {
@@ -308,4 +285,4 @@ char *JsAppContext::GetResourcePath(const char *uri) const
     return RelocateResourceFilePath(currentAbilityPath_, uri);
 }
 } // namespace ACELite
-} // namespace OHOS
\ No newline at end of file
+} // namespace OHOS
diff --git a/src/core/context/js_app_context.h b/frameworks/src/core/context/js_app_context.h
similarity index 72%
rename from src/core/context/js_app_context.h
rename to frameworks/src/core/context/js_app_context.h
index 3e1446c..9313aa6 100755
--- a/src/core/context/js_app_context.h
+++ b/frameworks/src/core/context/js_app_context.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -15,7 +15,8 @@
 
 #ifndef OHOS_ACELITE_JS_APP_CONTEXT_H
 #define OHOS_ACELITE_JS_APP_CONTEXT_H
-
+#include "acelite_config.h"
+#include "lazy_load_manager.h"
 #include "stylemgr/app_style_manager.h"
 
 namespace OHOS {
@@ -26,7 +27,7 @@ class JSAbilityImpl;
  */
 class JsAppContext final : public MemoryHeap {
 public:
-    static JsAppContext* GetInstance()
+    static JsAppContext *GetInstance()
     {
         static JsAppContext instance;
         return &instance;
@@ -50,13 +51,6 @@ public:
      * @param: page instance, viewModel to call render on
      */
     jerry_value_t Render(jerry_value_t viewModel) const;
-    /**
-     * @brief call FeatureAbility's show function
-     *
-     * @param: page instance, nativeElement to call show on
-     */
-    void Show() const;
-    void RemoveAllView() const;
     /**
      * @brief set the ability path, bundle name and token info for current ability
      *
@@ -66,7 +60,7 @@ public:
     /**
      * @brief return ability path
      */
-    const char* GetCurrentAbilityPath() const
+    const char *GetCurrentAbilityPath() const
     {
         return currentAbilityPath_;
     }
@@ -79,34 +73,35 @@ public:
     /**
      * @brief return js path
      */
-    const char* GetCurrentJsPath() const
+    const char *GetCurrentJsPath() const
     {
         return currentJsPath_;
     }
     /**
      * @brief return current bundle name
      */
-    const char* GetCurrentBundleName() const
+    const char *GetCurrentBundleName() const
     {
         return currentBundleName_;
     }
 
-    const JSAbilityImpl* GetTopJSAbilityImpl() const
+    const JSAbilityImpl *GetTopJSAbilityImpl() const
     {
         return topJSAbilityImpl_;
     }
     /**
      * @brief return current ability implementation
      */
-    void SetTopJSAbilityImpl(JSAbilityImpl* object)
+    void SetTopJSAbilityImpl(JSAbilityImpl *object)
     {
         topJSAbilityImpl_ = object;
     }
 
-    const AppStyleManager* GetStyleManager()
+    const AppStyleManager *GetStyleManager()
     {
         if (styleManage_ == nullptr) {
             styleManage_ = new AppStyleManager();
+            styleManage_->Prepare();
         }
         return styleManage_;
     }
@@ -124,6 +119,21 @@ public:
      */
     void ClearContext();
 
+    const LazyLoadManager *GetLazyLoadManager()
+    {
+        if (lazyLoadManager_ == nullptr) {
+            lazyLoadManager_ = new LazyLoadManager();
+        }
+        return lazyLoadManager_;
+    }
+
+    void ReleaseLazyLoadManager()
+    {
+        if (lazyLoadManager_) {
+            delete lazyLoadManager_;
+            lazyLoadManager_ = nullptr;
+        }
+    }
     char *GetResourcePath(const char *uri) const;
 
 private:
@@ -133,12 +143,13 @@ private:
     void ReleaseAbilityInfo();
 
     void SetGlobalNamedProperty(bool isAppEval, jerry_value_t viewModel) const;
-    char* currentBundleName_ = nullptr;
-    char* currentAbilityPath_ = nullptr;
-    char* currentJsPath_ = nullptr;
-    JSAbilityImpl* topJSAbilityImpl_ = nullptr;
-    AppStyleManager* styleManage_ = nullptr;
-    // record current runing ability's uuid && ability path, will be release during app-cleanup
+    char *currentBundleName_ = nullptr;
+    char *currentAbilityPath_ = nullptr;
+    char *currentJsPath_ = nullptr;
+    JSAbilityImpl *topJSAbilityImpl_ = nullptr;
+    AppStyleManager *styleManage_ = nullptr;
+    LazyLoadManager *lazyLoadManager_ = nullptr;
+    // record current running ability's uuid && ability path, will be release during app-cleanup
     uint16_t currentToken_ = 0;
 };
 } // namespace ACELite
diff --git a/src/core/context/js_app_environment.cpp b/frameworks/src/core/context/js_app_environment.cpp
similarity index 88%
rename from src/core/context/js_app_environment.cpp
rename to frameworks/src/core/context/js_app_environment.cpp
index bbc7526..93377f6 100755
--- a/src/core/context/js_app_environment.cpp
+++ b/frameworks/src/core/context/js_app_environment.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -15,6 +15,7 @@
 #include "js_app_environment.h"
 #include "ace_event_error_code.h"
 #include "ace_log.h"
+#include "async_task_manager.h"
 #include "handler.h"
 #include "js_app_context.h"
 #include "js_framework_raw.h"
@@ -24,6 +25,7 @@
 #include "platform_adapter.h"
 #include "presets/console_module.h"
 #include "presets/feature_ability_module.h"
+#include "presets/intl_module.h"
 #include "presets/jstest_module.h"
 #include "presets/localization_module.h"
 #include "presets/profiler_module.h"
@@ -31,6 +33,11 @@
 #include "presets/require_module.h"
 #include "presets/timer_module.h"
 #include "presets/version_module.h"
+#ifdef JS_ENGINE_STATIC_MULTI_CONTEXTS_ENABLED
+extern "C" {
+#include "generate-bytecode.h"
+}
+#endif
 
 namespace OHOS {
 namespace ACELite {
@@ -49,12 +56,18 @@ void JsAppEnvironment::LoadAceBuiltInModules() const
     TimersModule::Load();
     PerformaceProfilerModule::Load();
     AceVersionModule::Load();
+    IntlControlModule::Load();
 }
 
 void JsAppEnvironment::InitJsFramework() const
 {
     START_TRACING(ENGINE_INIT);
+#ifdef JS_ENGINE_STATIC_MULTI_CONTEXTS_ENABLED
+    js_task_context_init();
+#endif
+#ifndef JERRY_PORTING_DEPENDENCY
     Srand((unsigned)jerry_port_get_current_time());
+#endif
     Debugger::GetInstance().SetupJSContext();
     jerry_init(JERRY_INIT_EMPTY);
     STOP_TRACING();
@@ -64,6 +77,7 @@ void JsAppEnvironment::InitJsFramework() const
     jerry_release_value(jerryx_set_property_str(globalThis, "globalThis", globalThis));
     jerry_release_value(globalThis);
 #endif // JSFWK_TEST
+    AsyncTaskManager::GetInstance().Init();
     LoadAceBuiltInModules();
     LoadFramework();
     LocalModule::Load();
@@ -107,6 +121,9 @@ void JsAppEnvironment::Cleanup()
     jerry_cleanup();
     // free the external JS context, only can be called after clean up engine
     Debugger::GetInstance().ReleaseJSContext();
+#ifdef JS_ENGINE_STATIC_MULTI_CONTEXTS_ENABLED
+    jerry_port_default_remove_current_context_record();
+#endif
 }
 
 /**
diff --git a/src/core/context/js_app_environment.h b/frameworks/src/core/context/js_app_environment.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/context/js_app_environment.h
rename to frameworks/src/core/context/js_app_environment.h
diff --git a/src/core/context/js_framework_raw.cpp b/frameworks/src/core/context/js_framework_raw.cpp
old mode 100755
new mode 100644
similarity index 85%
rename from src/core/context/js_framework_raw.cpp
rename to frameworks/src/core/context/js_framework_raw.cpp
index cefab13..7498091
--- a/src/core/context/js_framework_raw.cpp
+++ b/frameworks/src/core/context/js_framework_raw.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -29,11 +29,10 @@ const char *GetFrameworkRawBuffer(bool snapshotMode, size_t &bufLen)
 {
     if (snapshotMode) {
         bufLen = sizeof(g_frameworkBCBuffer);
-        return g_frameworkBCBuffer;
-    } else {
-        bufLen = strlen(g_frameworkJSBuffer);
-        return g_frameworkJSBuffer;
+        return reinterpret_cast<const char *>(g_frameworkBCBuffer);
     }
+    bufLen = strlen(g_frameworkJSBuffer);
+    return g_frameworkJSBuffer;
 }
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/context/js_framework_raw.h b/frameworks/src/core/context/js_framework_raw.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/context/js_framework_raw.h
rename to frameworks/src/core/context/js_framework_raw.h
diff --git a/src/core/context/js_profiler.cpp b/frameworks/src/core/context/js_profiler.cpp
old mode 100755
new mode 100644
similarity index 93%
rename from src/core/context/js_profiler.cpp
rename to frameworks/src/core/context/js_profiler.cpp
index f1d86a6..4a0fd4d
--- a/src/core/context/js_profiler.cpp
+++ b/frameworks/src/core/context/js_profiler.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -22,19 +22,15 @@
 #include "js_fwk_common.h"
 #include "key_parser.h"
 #if defined(FEATURE_ACELITE_MC_JS_PROFILER)
-#include "common/file.h"
-#include "los_swtmr.h"
+#include <fcntl.h>
+#include "los_tick.h"
+#include "unistd.h"
 #elif defined(FEATURE_ACELITE_JS_PROFILER)
 #include <sys/time.h>
 #else
 #include <time.h>
 #endif // FEATURE_ACELITE_MC_JS_PROFILER
-#if ENABLED(SECURE_C_FUNCTION)
 #include "securec.h"
-#else // ENABLED(SECURE_C_FUNCTION)
-#include <string.h>
-#endif // ENABLED(SECURE_C_FUNCTION)
-
 #include <stdlib.h>
 
 namespace OHOS {
@@ -228,7 +224,7 @@ void JSProfiler::FlushProfilerMsg(void *data)
         return;
     }
 
-    int32_t fd = FileOpen(fullPath, O_CREAT | O_RDWR);
+    int32_t fd = open(fullPath, O_CREAT | O_RDWR);
     if (fd < 0) {
         HILOG_ERROR(HILOG_MODULE_ACE, "ace js profiler open error");
         ace_free(fullPath);
@@ -237,13 +233,13 @@ void JSProfiler::FlushProfilerMsg(void *data)
     }
 
     for (uint16_t i = 0; i < g_profiler_msg_index; i++) {
-        if (FileWrite(fd, JSProfiler::GetInstance()->msg_[i].msg, strlen(JSProfiler::GetInstance()->msg_[i].msg)) < 0) {
+        if (write(fd, JSProfiler::GetInstance()->msg_[i].msg, strlen(JSProfiler::GetInstance()->msg_[i].msg)) < 0) {
             HILOG_ERROR(HILOG_MODULE_ACE, "ace dump js profiler msg error");
             break;
         }
     }
 
-    if (FileClose(fd) < 0) {
+    if (close(fd) < 0) {
         HILOG_ERROR(HILOG_MODULE_ACE, "ace js profiler close error");
     }
 
@@ -265,21 +261,11 @@ void JSProfiler::Release()
 void JSProfiler::ResetData()
 {
     if (data_) {
-#if ENABLED(SECURE_C_FUNCTION)
         if (memset_s(data_, (maxTracingDataCount * sizeof(PerformanceData)), 0,
             (maxTracingDataCount * sizeof(PerformanceData))) != 0) {
             HILOG_ERROR(HILOG_MODULE_ACE, "ace js profiler memset_s failed");
             return;
         }
-#else
-        for (uint16_t i = 0; i < maxTracingDataCount; i++) {
-            data_[i].start = 0;
-            data_[i].end = 0;
-            data_[i].label = 0;
-            data_[i].description = 0;
-            data_[i].component = 0;
-        }
-#endif
     }
 
 #ifdef FEATURE_ACELITE_MC_JS_PROFILER
@@ -306,9 +292,8 @@ void JSProfiler::PushTrace(PerformanceTag tag, uint8_t name, uint8_t description
     if (g_isFirst) {
         if ((tag != LAUNCH) && (tag != ROUTER_REPLACE)) {
             return;
-        } else {
-            g_isFirst = false;
         }
+        g_isFirst = false;
     }
 
     if (g_startOffset == 0) {
@@ -422,21 +407,17 @@ uint64_t JSProfiler::GetCurrentClockTick() const
 // convert clock tick intervals into milliseconds
 uint64_t JSProfiler::CalculateElapsedTime(uint64_t start, uint64_t end) const
 {
-#ifndef FEATURE_ACELITE_JS_PROFILER
-    const uint32_t msPerSec = 1000;
-#endif
     if (start >= end) {
         return 0;
     }
 
     uint64_t interval = end - start;
-#if defined(FEATURE_ACELITE_MC_JS_PROFILER)
+#if defined(FEATURE_ACELITE_MC_JS_PROFILER) || defined(FEATURE_ACELITE_JS_PROFILER)
     // real device
-    return (interval * msPerSec) / LOSCFG_BASE_CORE_TICK_PER_SECOND;
-#elif defined(FEATURE_ACELITE_JS_PROFILER)
     return interval;
 #else
     // PC simulator
+    const uint32_t msPerSec = 1000;
     return (interval * msPerSec) / CLOCKS_PER_SEC;
 #endif
 }
diff --git a/src/core/context/js_profiler.h b/frameworks/src/core/context/js_profiler.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/context/js_profiler.h
rename to frameworks/src/core/context/js_profiler.h
diff --git a/src/core/context/js_timer_list.cpp b/frameworks/src/core/context/js_timer_list.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/context/js_timer_list.cpp
rename to frameworks/src/core/context/js_timer_list.cpp
diff --git a/src/core/context/js_timer_list.h b/frameworks/src/core/context/js_timer_list.h
similarity index 100%
rename from src/core/context/js_timer_list.h
rename to frameworks/src/core/context/js_timer_list.h
diff --git a/src/core/base/BUILD.gn b/frameworks/src/core/context/test/unittest/BUILD.gn
similarity index 54%
rename from src/core/base/BUILD.gn
rename to frameworks/src/core/context/test/unittest/BUILD.gn
index ebbefa1..f159a31 100755
--- a/src/core/base/BUILD.gn
+++ b/frameworks/src/core/context/test/unittest/BUILD.gn
@@ -1,4 +1,4 @@
-#Copyright (c) 2020 Huawei Device Co., Ltd.
+#Copyright (c) 2021 Huawei Device 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
@@ -9,18 +9,19 @@
 #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.
+#limitations under the License.
 
-source_set("base") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-    sources = [
-        "js_fwk_common.cpp",
-        "key_parser.cpp",
-        "ace_log.cpp",
-        "time_util.cpp",
-    ]
-    include_dirs = [
-    ]
+import("//build/lite/config/test.gni")
+import("//foundation/ace/ace_engine_lite/test/ace_test_config.gni")
+
+unittest("js_frameworks_test_jsfwk") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [ "common/jsfwk_tdd_test.cpp" ]
+  deps = ace_test_deps
+}
+
+group("js_frameworks_unittest") {
+  deps = [ ":js_frameworks_test_jsfwk" ]
 }
diff --git a/frameworks/src/core/context/test/unittest/common/jsfwk_tdd_test.cpp b/frameworks/src/core/context/test/unittest/common/jsfwk_tdd_test.cpp
new file mode 100755
index 0000000..b140af4
--- /dev/null
+++ b/frameworks/src/core/context/test/unittest/common/jsfwk_tdd_test.cpp
@@ -0,0 +1,454 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "jsfwk_tdd_test.h"
+#include <cstdio>
+#include "ace_version.h"
+#include "acelite_config.h"
+#include "js_ability.h"
+#include "js_app_context.h"
+#include "js_config.h"
+#include "js_debugger_config.h"
+
+namespace OHOS {
+namespace ACELite {
+JSfwkTddTest::JSfwkTddTest(){}
+
+static JSAbility* g_targetJSAbility = nullptr;
+static char* g_currentTestCaseName = nullptr;
+static uint8_t g_assertRecord = 0;
+
+void JSfwkTddTest::TestCaseB(const char* name) const
+{
+    g_assertRecord = 0;
+    g_currentTestCaseName = const_cast<char *>(name);
+}
+
+void JSfwkTddTest::JudeTestCaseResult() const
+{
+    if (g_assertRecord > 0) {
+        printf("[Test Case] [%s]   FAILED \n", g_currentTestCaseName);
+    } else {
+        printf("[Test Case] [%s]   PASSED \n", g_currentTestCaseName);
+    }
+}
+
+void JSfwkTddTest::SetUp()
+{
+    g_targetJSAbility = new JSAbility();
+}
+
+void JSfwkTddTest::TearDown()
+{
+    if (g_targetJSAbility != nullptr) {
+        delete g_targetJSAbility;
+        g_targetJSAbility = nullptr;
+    }
+}
+
+void JSfwkTddTest::StartUpEngine()
+{
+    // free the external JS context, only can be called after clean up engine
+    Debugger::GetInstance().SetupJSContext();
+    jerry_init(JERRY_INIT_EMPTY);
+}
+
+void JSfwkTddTest::TearDownEngine()
+{
+    jerry_cleanup();
+    // free the external JS context, only can be called after clean up engine
+    Debugger::GetInstance().ReleaseJSContext();
+    JudeTestCaseResult();
+}
+
+void JSfwkTddTest::ACELiteFrameworkInitialization001()
+{
+    TestCaseB("ACELiteFrameworkInitialization001");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step2. call Launch method and give invalid input paramaters
+     */
+    g_targetJSAbility->Launch("", "", 0);
+
+    /**
+     * @tc.steps: step3. check if the top JS ability is initialized
+     */
+    JSAbilityImpl* jsAbilityImpl = const_cast<JSAbilityImpl *>(JsAppContext::GetInstance()->GetTopJSAbilityImpl());
+    EXPECT_TRUE(jsAbilityImpl == nullptr);
+    /**
+     * @tc.steps: step4. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void JSfwkTddTest::ACELiteFrameworkInitialization002()
+{
+    TestCaseB("ACELiteFrameworkInitialization002");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step2. call Launch method and give invalid input paramaters
+     */
+    g_targetJSAbility->Launch("user/data/demo/", "", 0);
+
+    /**
+     * @tc.steps: step3. check if the top JS ability is initialized
+     */
+    JSAbilityImpl* jsAbilityImpl = const_cast<JSAbilityImpl *>(JsAppContext::GetInstance()->GetTopJSAbilityImpl());
+    EXPECT_TRUE(jsAbilityImpl == nullptr);
+    /**
+     * @tc.steps: step4. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void JSfwkTddTest::ACELiteFrameworkInitialization003()
+{
+    TestCaseB("ACELiteFrameworkInitialization003");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step2. call Launch method and give invalid input paramaters
+     */
+    constexpr char packageName[] = "test";
+    g_targetJSAbility->Launch("user/data/test/", packageName, 0);
+
+    /**
+     * @tc.steps: step3. check if the top JS ability is initialized
+     */
+    JSAbilityImpl* jsAbilityImpl = const_cast<JSAbilityImpl *>(JsAppContext::GetInstance()->GetTopJSAbilityImpl());
+    EXPECT_TRUE(jsAbilityImpl != nullptr);
+
+    /**
+     * @tc.steps: step4. try to call back-pressed to trigger terminating
+     */
+    g_targetJSAbility->BackPressed();
+
+    /**
+     * @tc.steps: step5. check the package name is same with the one we passed
+     */
+    if (strcmp(g_targetJSAbility->GetPackageName(), packageName)) {
+        g_assertRecord++;
+    }
+    EXPECT_TRUE(!strcmp(g_targetJSAbility->GetPackageName(), packageName));
+
+    /**
+     * @tc.steps: step5. clean up test environment
+     */
+    g_targetJSAbility->TransferToDestroy();
+    g_targetJSAbility = nullptr;
+    TDD_CASE_END();
+}
+
+void JSfwkTddTest::ACELiteFrameworkInitialization009()
+{
+    TestCaseB("ACELiteFrameworkInitialization009");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+#if ENABLED(ACE_LITE_VERSION_JS_API)
+    /**
+     * @tc.steps: step2. check version code
+     */
+    EXPECT_TRUE(ACEVersion::GetStr() != nullptr);
+    /**
+     * @tc.steps: step3. check commit code
+     */
+    EXPECT_TRUE(ACEVersion::GetCommit() != nullptr);
+    /**
+     * @tc.steps: step4. check build timestamp
+     */
+    const char* buildStamp = ACEVersion::GetTimeStamp();
+    EXPECT_TRUE(buildStamp != nullptr);
+    constexpr char firstVersionBuildStamp[] = "2020-05-09 16:31:41";
+    if (strcmp(buildStamp, firstVersionBuildStamp) == 0) {
+        // the version code header file is not updated, make the case failed
+        g_assertRecord++;
+    }
+    EXPECT_TRUE(strcmp(buildStamp, firstVersionBuildStamp) != 0);
+#endif
+    TDD_CASE_END();
+}
+
+void JSfwkTddTest::ACELiteFrameworkInitialization011()
+{
+    TestCaseB("ACELiteFrameworkInitialization011");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step2. call launch
+     */
+    constexpr char packageName[] = "com.huawei.test";
+    g_targetJSAbility->Launch("user/data/test/", packageName, 0);
+
+    /**
+     * @tc.steps: step3. call show
+     */
+    g_targetJSAbility->Show();
+
+    /**
+     * @tc.steps: step4. verify
+     */
+    if (strcmp(g_targetJSAbility->GetPackageName(), packageName)) {
+        g_assertRecord++;
+    }
+    EXPECT_TRUE(!strcmp(g_targetJSAbility->GetPackageName(), packageName));
+    TDD_CASE_END();
+}
+
+void JSfwkTddTest::ACELiteFrameworkInitialization012()
+{
+    TestCaseB("ACELiteFrameworkInitialization012");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step2. call launch
+     */
+    constexpr char packageName[] = "com.huawei.test";
+    g_targetJSAbility->Launch("user/data/test/", packageName, 0);
+
+    /**
+     * @tc.steps: step3. call show then hide
+     */
+    g_targetJSAbility->Show();
+    g_targetJSAbility->Hide();
+
+    /**
+     * @tc.steps: step4. verify
+     */
+    if (strcmp(g_targetJSAbility->GetPackageName(), packageName)) {
+        g_assertRecord++;
+    }
+    EXPECT_TRUE(!strcmp(g_targetJSAbility->GetPackageName(), packageName));
+    TDD_CASE_END();
+}
+
+void JSfwkTddTest::AceliteFrameworkEngineIntegrating01()
+{
+    TestCaseB("AceliteFrameworkEngineIntegrating01");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    StartUpEngine();
+    /**
+     * @tc.steps: step2. check the jerry engine's configuration parser
+     */
+    bool featureOn = jerry_is_feature_enabled(JERRY_FEATURE_JS_PARSER);
+
+    /**
+     * @tc.steps: step3. check JS parser feature is on
+     */
+    EXPECT_TRUE(featureOn);
+    /**
+     * @tc.steps: step4. clean up test environment
+     */
+    TearDownEngine();
+}
+
+void JSfwkTddTest::AceliteFrameworkEngineIntegrating02()
+{
+    TestCaseB("AceliteFrameworkEngineIntegrating02");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    StartUpEngine();
+    /**
+     * @tc.steps: step1. check the jerry engine's configuration promise(which is part of es2005)
+     */
+    bool featureOn = jerry_is_feature_enabled(JERRY_FEATURE_PROMISE);
+
+    /**
+     * @tc.steps: step2. check JS promise feature is off
+     */
+    EXPECT_FALSE(featureOn);
+
+    /**
+     * @tc.steps: step3. check the jerry engine's configuration typedarray (which is part of es2005)
+     */
+    featureOn = jerry_is_feature_enabled(JERRY_FEATURE_TYPEDARRAY);
+
+    /**
+     * @tc.steps: step4. check JS typedarray is off
+     */
+    EXPECT_TRUE(featureOn);
+    /**
+     * @tc.steps: step5. cleanup test environment
+     */
+    TearDownEngine();
+}
+
+void JSfwkTddTest::AceliteFrameworkEngineIntegrating03()
+{
+    TestCaseB("AceliteFrameworkEngineIntegrating03");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    StartUpEngine();
+
+    /**
+     * @tc.steps: step2. check the jerry engine's configuration snapshot
+     */
+    bool featureOn = jerry_is_feature_enabled(JERRY_FEATURE_SNAPSHOT_EXEC);
+
+    /**
+     * @tc.steps: step3. check JS snapshot feature is on
+     */
+    EXPECT_TRUE(featureOn);
+    TearDownEngine();
+}
+
+void JSfwkTddTest::AceliteFrameworkEngineIntegrating04()
+{
+    TestCaseB("AceliteFrameworkEngineIntegrating04");
+    StartUpEngine();
+    /**
+     * @tc.steps: step1. check the jerry engine's configuration regexp
+     */
+    bool featureOn = jerry_is_feature_enabled(JERRY_FEATURE_REGEXP);
+
+    /**
+     * @tc.steps: step2. check JS regexp feature is on
+     */
+    EXPECT_FALSE(featureOn);
+    TearDownEngine();
+}
+
+void JSfwkTddTest::RunTests()
+{
+    ACELiteFrameworkInitialization001();
+    ACELiteFrameworkInitialization002();
+    ACELiteFrameworkInitialization003();
+    ACELiteFrameworkInitialization009();
+    AceliteFrameworkEngineIntegrating01();
+    AceliteFrameworkEngineIntegrating02();
+    AceliteFrameworkEngineIntegrating03();
+    AceliteFrameworkEngineIntegrating04();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: ACELiteFrameworkInitialization001
+ * @tc.desc: Verify if the invalid input will lead exception .
+ * @tc.require: AR000DSEEU
+ */
+HWTEST_F(JSfwkTddTest, init001, TestSize.Level1)
+{
+    JSfwkTddTest::ACELiteFrameworkInitialization001();
+}
+
+/**
+ * @tc.name: ACELiteFrameworkInitialization002
+ * @tc.desc: Verify if the invalid input will lead exception .
+ * @tc.require: AR000DSEEU
+ */
+HWTEST_F(JSfwkTddTest, init002, TestSize.Level1)
+{
+    JSfwkTddTest::ACELiteFrameworkInitialization002();
+}
+
+/**
+ * @tc.name: ACELiteFrameworkInitialization003
+ * @tc.desc: Verify if the invalid input will lead exception .
+ * @tc.require: AR000DSEEU
+ */
+HWTEST_F(JSfwkTddTest, init003, TestSize.Level1)
+{
+    JSfwkTddTest::ACELiteFrameworkInitialization003();
+}
+
+/**
+ * @tc.name: ACELiteFrameworkInitialization009
+ * @tc.desc: Verify the version API.
+ * @tc.require: AR000DSEEU
+ */
+HWTEST_F(JSfwkTddTest, init009, TestSize.Level1)
+{
+    JSfwkTddTest::ACELiteFrameworkInitialization009();
+}
+
+/**
+ * @tc.name: ACELiteFrameworkInitialization011
+ * @tc.desc: Verify hide and show.
+ * @tc.require: AR000DSEEU
+ */
+HWTEST_F(JSfwkTddTest, init011, TestSize.Level1)
+{
+    JSfwkTddTest::ACELiteFrameworkInitialization011();
+}
+
+/**
+ * @tc.name: ACELiteFrameworkInitialization012
+ * @tc.desc: Verify hide and show.
+ * @tc.require: AR000DSEEU
+ */
+HWTEST_F(JSfwkTddTest, init012, TestSize.Level1)
+{
+    JSfwkTddTest::ACELiteFrameworkInitialization012();
+}
+
+/**
+ * @tc.name: AceliteFrameworkEngineIntegrating01
+ * @tc.desc: Verify the configuration of jerry engine.
+ * @tc.require: AR000DT7BN
+ */
+HWTEST_F(JSfwkTddTest, engineIntegrating001, TestSize.Level1)
+{
+    JSfwkTddTest::AceliteFrameworkEngineIntegrating01();
+}
+
+/**
+ * @tc.name: AceliteFrameworkEngineIntegrating02
+ * @tc.desc: Verify the configuration of jerry engine.
+ * @tc.require: AR000DT7BN
+ */
+HWTEST_F(JSfwkTddTest, engineIntegrating002, TestSize.Level1)
+{
+    JSfwkTddTest::AceliteFrameworkEngineIntegrating02();
+}
+
+/**
+ * @tc.name: AceliteFrameworkEngineIntegrating03
+ * @tc.desc: Verify the configuration of jerry engine.
+ * @tc.require: AR000DT7BN
+ */
+HWTEST_F(JSfwkTddTest, engineIntegrating003, TestSize.Level1)
+{
+    JSfwkTddTest::AceliteFrameworkEngineIntegrating03();
+}
+
+/**
+ * @tc.name: AceliteFrameworkEngineIntegrating04
+ * @tc.desc: Verify the configuration of jerry engine.
+ * @tc.require: AR000DT7BN
+ */
+HWTEST_F(JSfwkTddTest, engineIntegrating004, TestSize.Level1)
+{
+    JSfwkTddTest::AceliteFrameworkEngineIntegrating04();
+}
+#endif
+}
+}
\ No newline at end of file
diff --git a/frameworks/src/core/context/test/unittest/common/jsfwk_tdd_test.h b/frameworks/src/core/context/test/unittest/common/jsfwk_tdd_test.h
new file mode 100755
index 0000000..abe4d52
--- /dev/null
+++ b/frameworks/src/core/context/test/unittest/common/jsfwk_tdd_test.h
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef ACELITE_JSFWK_TDD_TEST_H
+#define ACELITE_JSFWK_TDD_TEST_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "acelite_config.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class JSfwkTddTest : public testing::Test {
+#else
+class JSfwkTddTest {
+#endif
+public:
+    JSfwkTddTest();
+    ~JSfwkTddTest(){};
+    void SetUp();
+    void TearDown();
+    void JudeTestCaseResult() const;
+    void StartUpEngine();
+    void TearDownEngine();
+    void TestCaseB(const char* name) const;
+    void ACELiteFrameworkInitialization001();
+    void ACELiteFrameworkInitialization002();
+    void ACELiteFrameworkInitialization003();
+    void ACELiteFrameworkInitialization009();
+    void AceliteFrameworkEngineIntegrating01();
+    void AceliteFrameworkEngineIntegrating02();
+    void AceliteFrameworkEngineIntegrating03();
+    void AceliteFrameworkEngineIntegrating04();
+    void ACELiteFrameworkInitialization011();
+    void ACELiteFrameworkInitialization012();
+    void RunTests();
+};
+}
+}
+#endif // ACELITE_JSFWK_TDD_TEST_H
diff --git a/frameworks/src/core/dialog/js_dialog.cpp b/frameworks/src/core/dialog/js_dialog.cpp
new file mode 100755
index 0000000..c3b0d64
--- /dev/null
+++ b/frameworks/src/core/dialog/js_dialog.cpp
@@ -0,0 +1,234 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "acelite_config.h"
+#ifdef FEATURE_MODULE_DIALOG
+#include "ace_log.h"
+#include "js_async_work.h"
+#include "js_dialog.h"
+
+namespace OHOS {
+namespace ACELite {
+JSDialog::JSDialog()
+    : dialog_(nullptr),
+      dialogListener_(nullptr),
+      dismissListener_(nullptr),
+      title_(nullptr),
+      message_(nullptr) {}
+
+JSDialog::~JSDialog()
+{
+    ReleaseResource();
+}
+
+void JSDialog::ReleaseResource()
+{
+    ACE_FREE(title_);
+    ACE_FREE(message_);
+    ACE_DELETE(dialog_);
+    ACE_DELETE(dismissListener_);
+    ACE_DELETE(dialogListener_);
+}
+
+void JSDialog::SetTitle(char *title)
+{
+    title_ = title;
+}
+void JSDialog::SetMessage(char *message)
+{
+    message_ = message;
+}
+
+/**
+ * This the async callback used to release the JSDialog instance.
+ */
+static void DialogRecycleExecutor(void *jsDialog)
+{
+    if (jsDialog == nullptr) {
+        return;
+    }
+    // release resource
+    delete reinterpret_cast<JSDialog *>(jsDialog);
+}
+
+bool JSDialog::ShowDialog(JSIValue thisVal,
+                          JSIValue buttons,
+                          JSIValue successFunc,
+                          JSIValue cancelFunc,
+                          JSIValue completeFunc)
+{
+    ACE_DELETE(dialog_);
+    dialog_ = new UIDialog();
+    if (dialog_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create ui dialog failed, return ");
+        return false;
+    }
+
+    dialog_->SetTitle(title_);
+    dialog_->SetText(message_);
+
+    // set dialog dismiss listener
+    dismissListener_ = new DismissListener(this, cancelFunc, completeFunc, thisVal);
+    if (dismissListener_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create dialog dismissListener_ is nullptr, return nullptr.");
+        return false;
+    }
+    dialog_->SetOnCancelListener(dismissListener_);
+
+    // parser dialog button and set button listenr
+    if (!ParseButton(this, buttons, successFunc, completeFunc, thisVal)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "parse dialog button error");
+        return false;
+    }
+
+    dialog_->EnableAutoCancel(true);
+    // show dialog
+    dialog_->Show();
+    return true;
+}
+
+
+bool JSDialog::ParseButton(JSDialog *jsDialog,
+                           JSIValue buttonArrayObject,
+                           JSIValue successFuncObject,
+                           JSIValue completeFuncObject,
+                           JSIValue context)
+{
+    if (jsDialog == nullptr) {
+        return false;
+    }
+    UIDialog *dialog = const_cast<UIDialog *>(jsDialog->GetUIDialog());
+    if (dialog == nullptr) {
+        return false;
+    }
+    /* parse dialog buttons */
+    uint32_t len = JSI::GetArrayLength(buttonArrayObject);
+    const uint8_t maxButtonNum = 3;
+    const char * const buttonTextKey = "text";
+    const char * const buttonColorKey = "color";
+    // support up to 3 buttons
+    for (uint16_t index = 0; index < len; index++) {
+        if (index >= maxButtonNum) {
+            HILOG_WARN(HILOG_MODULE_ACE, "dialog support up to 3 buttons, please check dialog button num");
+            break;
+        }
+        // parse button text
+        JSIValue buttonObject = JSI::GetPropertyByIndex(buttonArrayObject, index);
+        char *buttonText = JSI::GetStringProperty(buttonObject, buttonTextKey);
+
+        // parse button text color
+        char *buttonColorText = JSI::GetStringProperty(buttonObject, buttonColorKey);
+        ColorType color = ParseButtonColor(buttonColorText);
+        dialog->SetButtonColor(static_cast<UIDialog::DialogButtonType>(index), color);
+        // set button click listener
+        dialogListener_ = new DialogListener(jsDialog, index, successFuncObject, completeFuncObject, context);
+        if (dialogListener_ == nullptr) {
+            JSI::ReleaseString(buttonText);
+            JSI::ReleaseString(buttonColorText);
+            JSI::ReleaseValue(buttonObject);
+            return false;
+        }
+        dialog->SetButton(static_cast<UIDialog::DialogButtonType>(index), buttonText, dialogListener_);
+        // release button JSI value
+        JSI::ReleaseString(buttonText);
+        JSI::ReleaseString(buttonColorText);
+        JSI::ReleaseValue(buttonObject);
+    }
+    return true;
+}
+
+ColorType JSDialog::ParseButtonColor(const char * const buttonColorText)
+{
+    uint32_t color = 0;  // default color
+    uint8_t alpha = 0;
+    if (!ParseColor(buttonColorText, color, alpha)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "input dialog button color error, please check. default color instead");
+        return Color::GetColorFromRGB(0, 0, 0);
+    }
+    HILOG_INFO(HILOG_MODULE_ACE, "dialog buttonColorText = %s, colorVal = %d", buttonColorText, color);
+    uint8_t red8 = uint8_t((color & TEXT_RED_COLOR_MASK) >> RED_COLOR_START_BIT);
+    uint8_t green8 = uint8_t((color & TEXT_GREEN_COLOR_MASK) >> GREEN_COLOR_START_BIT);
+    uint8_t blue8 = uint8_t((color & TEXT_BLUE_COLOR_MASK));
+    return Color::GetColorFromRGB(red8, green8, blue8);
+}
+
+/**
+ * Call this function if the dialog is dismissed in any scenario.
+ */
+void JSDialog::DispatchReleaseRequest(const JSDialog *jsDialog)
+{
+    if (!JsAsyncWork::DispatchAsyncWork(DialogRecycleExecutor, const_cast<JSDialog *>(jsDialog))) {
+        // dispatch the release request failed, JSDialog resource leaked
+        HILOG_ERROR(HILOG_MODULE_ACE, "dispatch the release request failed, resource leaked [%{private}p]", jsDialog);
+    }
+}
+
+DialogListener::DialogListener(JSDialog *jsDialog,
+                               uint8_t index,
+                               JSIValue successFunc,
+                               JSIValue completeFunc,
+                               JSIValue context)
+    : jsDialog_(jsDialog),
+      buttonIndex_(index),
+      jsSuccessFunc_(JSI::AcquireValue(successFunc)),
+      jsCompleteFunc_(JSI::AcquireValue(completeFunc)),
+      jsContext_(JSI::AcquireValue(context)) {}
+
+DialogListener::~DialogListener() {}
+
+bool DialogListener::OnClick(UIView &view, const ClickEvent &event)
+{
+    HILOG_INFO(HILOG_MODULE_ACE, "dialog button on click");
+    JSIValue args[1];
+    args[0] = JSI::CreateObject();
+    const char * const indexStr = "index";
+
+    JSI::SetNumberProperty(args[0], indexStr, buttonIndex_);
+    if (JSI::ValueIsFunction(jsSuccessFunc_)) {
+        JSI::CallFunction(jsSuccessFunc_, jsContext_, args, 1);
+    }
+    if (JSI::ValueIsFunction(jsCompleteFunc_)) {
+        JSI::CallFunction(jsCompleteFunc_, jsContext_, nullptr, 0);
+    }
+    JSI::ReleaseValueList(args[0], jsSuccessFunc_, jsCompleteFunc_, jsContext_);
+    // the dialog is going to be dismissed, request to do the recycling
+    JSDialog::DispatchReleaseRequest(jsDialog_);
+    return true;
+}
+
+DismissListener::DismissListener(JSDialog *jsDialog, JSIValue cancelFunc, JSIValue completeFunc, JSIValue context)
+    : jsDialog_(jsDialog),
+      jsCancelFunc_(JSI::AcquireValue(cancelFunc)),
+      jsCompleteFunc_(JSI::AcquireValue(completeFunc)),
+      jsContext_(JSI::AcquireValue(context)) {}
+
+DismissListener::~DismissListener() {}
+bool DismissListener::OnClick(UIView &view, const ClickEvent &event)
+{
+    HILOG_INFO(HILOG_MODULE_ACE, "dialog dismiss button on click");
+    if (JSI::ValueIsFunction(jsCancelFunc_)) {
+        JSI::CallFunction(jsCancelFunc_, jsContext_, nullptr, 0);
+    }
+    if (JSI::ValueIsFunction(jsCompleteFunc_)) {
+        JSI::CallFunction(jsCompleteFunc_, jsContext_, nullptr, 0);
+    }
+    JSI::ReleaseValueList(jsCancelFunc_, jsCompleteFunc_, jsContext_);
+    // the dialog is going to be dismissed, request to do the recycling
+    JSDialog::DispatchReleaseRequest(jsDialog_);
+    return true;
+}
+} // namespace ACELite
+} // namespace OHOS
+#endif // FEATURE_MODULE_DIALOG
\ No newline at end of file
diff --git a/frameworks/src/core/dialog/js_dialog.h b/frameworks/src/core/dialog/js_dialog.h
new file mode 100755
index 0000000..9320f0f
--- /dev/null
+++ b/frameworks/src/core/dialog/js_dialog.h
@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_JS_DIALOG_H
+#define OHOS_ACELITE_JS_DIALOG_H
+
+#include "acelite_config.h"
+#ifdef FEATURE_MODULE_DIALOG
+#include "jsi.h"
+#include "js_fwk_common.h"
+#include "non_copyable.h"
+#include "dialog/js_dialog.h"
+#include "event_listener.h"
+#include "ui_dialog.h"
+
+namespace OHOS {
+namespace ACELite {
+class DialogListener;
+class DismissListener;
+/**
+ * @brief: The module of dialog, show dialog in window
+ */
+class JSDialog final : public MemoryHeap {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(JSDialog);
+    JSDialog();
+    ~JSDialog();
+    void ReleaseResource();
+
+    void SetTitle(char *title);
+    void SetMessage(char *message);
+
+    bool ShowDialog(JSIValue thisVal,
+                    JSIValue buttons,
+                    JSIValue successFunc,
+                    JSIValue cancelFunc,
+                    JSIValue completeFunc);
+    static void DispatchReleaseRequest(const JSDialog *jsDialog);
+
+    const UIDialog *GetUIDialog() const
+    {
+        return dialog_;
+    }
+
+private:
+    UIDialog *dialog_;
+    DialogListener *dialogListener_;
+    DismissListener *dismissListener_;
+    char *title_;
+    char *message_;
+
+    bool ParseButton(JSDialog *dialog,
+                     JSIValue object,
+                     JSIValue successFuncObject,
+                     JSIValue completeFuncObject,
+                     JSIValue context);
+    ColorType ParseButtonColor(const char * const buttonColorText);
+};
+
+class DialogListener final: public UIView::OnClickListener {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(DialogListener);
+    DialogListener(JSDialog *jsDialog, uint8_t index, JSIValue successFunc, JSIValue completeFunc, JSIValue context);
+    ~DialogListener();
+    bool OnClick(UIView &view, const ClickEvent &event) override;
+
+private:
+    JSDialog *jsDialog_;
+    uint8_t buttonIndex_;
+    JSIValue jsSuccessFunc_;
+    JSIValue jsCompleteFunc_;
+    JSIValue jsContext_;
+};
+
+class DismissListener final : public UIView::OnClickListener {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(DismissListener);
+    DismissListener(JSDialog *jsDialog, JSIValue cancelFunc, JSIValue completeFunc, JSIValue context);
+    ~DismissListener();
+    bool OnClick(UIView &view, const ClickEvent &event) override;
+
+private:
+    JSDialog *jsDialog_;
+    JSIValue jsCancelFunc_;
+    JSIValue jsCompleteFunc_;
+    JSIValue jsContext_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // FEATURE_MODULE_DIALOG
+#endif // OHOS_ACELITE_DIALOG_MODULE_H
\ No newline at end of file
diff --git a/src/core/directive/descriptor_utils.cpp b/frameworks/src/core/directive/descriptor_utils.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/directive/descriptor_utils.cpp
rename to frameworks/src/core/directive/descriptor_utils.cpp
diff --git a/src/core/directive/descriptor_utils.h b/frameworks/src/core/directive/descriptor_utils.h
old mode 100755
new mode 100644
similarity index 98%
rename from src/core/directive/descriptor_utils.h
rename to frameworks/src/core/directive/descriptor_utils.h
index afe4c99..3525b98
--- a/src/core/directive/descriptor_utils.h
+++ b/frameworks/src/core/directive/descriptor_utils.h
@@ -67,7 +67,7 @@ public:
 
     /**
      * @brief Check whether the if directive descriptor object can be shown or not?
-     * @param descriptor The if directive descriptor objeect to be checked.
+     * @param descriptor The if directive descriptor object to be checked.
      * @return The check result.
      */
     static bool IsIfDescriptorShown(JSValue descriptor);
diff --git a/src/core/directive/directive_watcher_callback.cpp b/frameworks/src/core/directive/directive_watcher_callback.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/directive/directive_watcher_callback.cpp
rename to frameworks/src/core/directive/directive_watcher_callback.cpp
diff --git a/src/core/directive/directive_watcher_callback.h b/frameworks/src/core/directive/directive_watcher_callback.h
old mode 100755
new mode 100644
similarity index 94%
rename from src/core/directive/directive_watcher_callback.h
rename to frameworks/src/core/directive/directive_watcher_callback.h
index 70960bd..63453b7
--- a/src/core/directive/directive_watcher_callback.h
+++ b/frameworks/src/core/directive/directive_watcher_callback.h
@@ -32,10 +32,10 @@ public:
     ~DirectiveWatcherCallback() {}
 
     /**
-     * @brief The watcher callback function which will be trigger when the dirctive condition was changed.
+     * @brief The watcher callback function which will be trigger when the directive condition was changed.
      * @param func The watcher callback function.
      * @param context The execute context of watcher callback.
-     * @param args The arguments of watcher callabck function.
+     * @param args The arguments of watcher callback function.
      * @param argsSize the arguments size of watcher callback function.
      * @return The return value when the watcher callback was executed.
      */
diff --git a/src/core/jsi/internal/jsi_internal.h b/frameworks/src/core/jsi/internal/jsi_internal.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/jsi/internal/jsi_internal.h
rename to frameworks/src/core/jsi/internal/jsi_internal.h
diff --git a/src/core/jsi/jsi.cpp b/frameworks/src/core/jsi/jsi.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/jsi/jsi.cpp
rename to frameworks/src/core/jsi/jsi.cpp
diff --git a/src/core/directive/BUILD.gn b/frameworks/src/core/jsi/test/unittest/BUILD.gn
similarity index 53%
rename from src/core/directive/BUILD.gn
rename to frameworks/src/core/jsi/test/unittest/BUILD.gn
index 7bebaef..3fdc046 100755
--- a/src/core/directive/BUILD.gn
+++ b/frameworks/src/core/jsi/test/unittest/BUILD.gn
@@ -1,4 +1,4 @@
-#Copyright (c) 2020 Huawei Device Co., Ltd.
+#Copyright (c) 2021 Huawei Device 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
@@ -9,16 +9,19 @@
 #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.
+#limitations under the License.
 
-source_set("directive") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-    sources = [
-        "descriptor_utils.cpp",
-        "directive_watcher_callback.cpp"
-    ]
-    include_dirs = [
-    ]
+import("//build/lite/config/test.gni")
+import("//foundation/ace/ace_engine_lite/test/ace_test_config.gni")
+
+unittest("js_frameworks_test_jsiinterface") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [ "common/jsi_interface_tdd_test.cpp" ]
+  deps = ace_test_deps
+}
+
+group("jsi_unittest") {
+  deps = [ ":js_frameworks_test_jsiinterface" ]
 }
diff --git a/frameworks/src/core/jsi/test/unittest/common/jsi_interface_tdd_test.cpp b/frameworks/src/core/jsi/test/unittest/common/jsi_interface_tdd_test.cpp
new file mode 100755
index 0000000..d4d2bb1
--- /dev/null
+++ b/frameworks/src/core/jsi/test/unittest/common/jsi_interface_tdd_test.cpp
@@ -0,0 +1,1132 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "jsi_interface_tdd_test.h"
+#include <cstdio>
+#include <cstring>
+#include "acelite_config.h"
+#include "js_debugger_config.h"
+
+namespace OHOS {
+namespace ACELite {
+static int8_t g_descValue = 0;
+
+JsiInterfaceTddTest::JsiInterfaceTddTest(){}
+
+void JsiInterfaceTddTest::SetUp()
+{
+    Debugger::GetInstance().SetupJSContext();
+    jerry_init(JERRY_INIT_EMPTY);
+}
+
+void JsiInterfaceTddTest::TearDown()
+{
+    jerry_cleanup();
+    Debugger::GetInstance().ReleaseJSContext();
+}
+
+JSIValue JsiInterfaceTddTest::Function(const JSIValue thisVal, const JSIValue args[], uint8_t argsNum)
+{
+    printf("Function called\n");
+    return JSI::CreateUndefined();
+}
+
+JSIValue JsiInterfaceTddTest::Setter(const JSIValue thisVal, const JSIValue args[], uint8_t argsNum)
+{
+    double newValue = JSI::ValueToNumber(args[0]);
+    g_descValue = (int8_t)newValue;
+
+    printf("Setter called, setting: %d\n", g_descValue);
+    return JSI::CreateUndefined();
+}
+
+JSIValue JsiInterfaceTddTest::Getter(const JSIValue thisVal, const JSIValue args[], uint8_t argsNum)
+{
+    g_descValue++;
+    printf("Getter called, returning: %d\n", g_descValue);
+    return JSI::CreateNumber(g_descValue);
+}
+
+void JsiInterfaceTddTest::OnDestroy(int8_t statusCode)
+{
+    printf("OnDestroy called, statusCode=%d\n", statusCode);
+}
+
+void JsiInterfaceTddTest::OnTerminate(int8_t statusCode)
+{
+    printf("OnTerminate called, statusCode=%d\n", statusCode);
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest001()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateObject
+     */
+    JSIValue object = JSI::CreateObject();
+    /**
+     * @tc.expected: step1. ValueIsObject return true
+     */
+    bool res = JSI::ValueIsObject(object);
+    if (res) {
+        printf("JSIInterfaceTest001 pass\n");
+    } else {
+        printf("JSIInterfaceTest001 fail\n");
+    }
+    EXPECT_TRUE(res);
+    JSI::ReleaseValue(object);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest002()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI GetGlobalObject
+     */
+    JSIValue global = JSI::GetGlobalObject();
+    /**
+     * @tc.expected: step1. global is not undefined
+     */
+    if (JSI::ValueIsUndefined(global)) {
+        printf("JSIInterfaceTest002 fail\n");
+    } else {
+        printf("JSIInterfaceTest002 pass\n");
+    }
+    EXPECT_FALSE(JSI::ValueIsUndefined(global));
+    JSI::ReleaseValue(global);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest003()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI GetJSHeapStatus
+     */
+    JSHeapStatus status;
+    bool res = JSI::GetJSHeapStatus(status);
+    /**
+     * @tc.expected: step1. res is true
+     */
+    if (res) {
+        printf("JSIInterfaceTest003 JSHeapStatus:totalBytes=%d allocBytes=%d peakAllocBytes=%d\n", status.totalBytes,
+               status.allocBytes, status.peakAllocBytes);
+        printf("JSIInterfaceTest003 pass\n");
+    } else {
+        printf("JSIInterfaceTest003 fail\n");
+    }
+    EXPECT_TRUE(res);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest004()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateArray
+     */
+    uint32_t initLength = 10;
+    JSIValue array = JSI::CreateArray(initLength);
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsArray with Array object
+     */
+    bool res1 = JSI::ValueIsArray(array);
+    JSIValue undefined = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsArray with Undefined object
+     */
+    bool res2 = JSI::ValueIsArray(undefined);
+
+    /**
+     * @tc.steps: step4. call JSI GetArrayLength
+     */
+    uint32_t length = JSI::GetArrayLength(array);
+    /**
+     * @tc.expected: step2-step4. res1 = true, res2 = false and length = 10
+     */
+    if (res1 && !res2 && (length == initLength)) {
+        printf("JSIInterfaceTest004 pass\n");
+    } else {
+        printf("JSIInterfaceTest004 fail\n");
+    }
+    EXPECT_TRUE(res1 && !res2 && (length == initLength));
+    JSI::ReleaseValueList(array, undefined);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest005()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateFunction
+     */
+    JSIValue func = JSI::CreateFunction(Function);
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsFunction with Function object
+     */
+    bool res1 = JSI::ValueIsFunction(func);
+    JSIValue undefined = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsFunction with Undefined object
+     */
+    bool res2 = JSI::ValueIsFunction(undefined);
+
+    /**
+     * @tc.steps: step4. call JSI CallFunction
+     */
+    JSI::CallFunction(func, undefined, nullptr, 0);
+    /**
+     * @tc.expected: step2-step4. res1 = true, res2 = false and Function was called
+     */
+    if (res1 && !res2) {
+        printf("JSIInterfaceTest005 pass\n");
+    } else {
+        printf("JSIInterfaceTest005 fail\n");
+    }
+    EXPECT_TRUE(res1 && !res2);
+    JSI::ReleaseValueList(func, undefined);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest006()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateFunction
+     */
+    double initNum = 123;
+    JSIValue num = JSI::CreateNumber(initNum);
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsNumber with Number object
+     */
+    bool res1 = JSI::ValueIsNumber(num);
+    JSIValue undefined = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsNumber with Undefined object
+     */
+    bool res2 = JSI::ValueIsNumber(undefined);
+
+    /**
+     * @tc.steps: step4. call JSI ValueToNumber
+     */
+    int32_t numValue = (int32_t)JSI::ValueToNumber(num);
+    /**
+     * @tc.expected: step2-step4. res1 = true, res2 = false and numValue = 123
+     */
+    if (res1 && !res2 && numValue == (int32_t)initNum) {
+        printf("JSIInterfaceTest006 pass\n");
+    } else {
+        printf("JSIInterfaceTest006 fail\n");
+    }
+    EXPECT_TRUE(res1 && !res2 && numValue == (int32_t)initNum);
+    JSI::ReleaseValueList(num, undefined);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest007()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateString
+     */
+    JSIValue str = JSI::CreateString("test");
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsString with String object
+     */
+    bool res1 = JSI::ValueIsString(str);
+    JSIValue undefined = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsString with Undefined object
+     */
+    bool res2 = JSI::ValueIsString(undefined);
+
+    /**
+     * @tc.steps: step4. call JSI ValueToString
+     */
+    char *strValue = JSI::ValueToString(str);
+    /**
+     * @tc.expected: step2-step4. res1 = true, res2 = false and strValue = "test"
+     */
+    if ((strValue != nullptr) && res1 && !res2 && !strcmp(strValue, "test")) {
+        printf("JSIInterfaceTest007 pass\n");
+    } else {
+        printf("JSIInterfaceTest007 fail\n");
+    }
+    EXPECT_TRUE((strValue != nullptr) && res1 && !res2 && !strcmp(strValue, "test"));
+    JSI::ReleaseValueList(str, undefined);
+    JSI::ReleaseString(strValue);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest008()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateBoolean
+     */
+    JSIValue jsBool = JSI::CreateBoolean(true);
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsBoolean with Boolean object
+     */
+    bool res1 = JSI::ValueIsBoolean(jsBool);
+    JSIValue undefined = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsBoolean with Undefined object
+     */
+    bool res2 = JSI::ValueIsBoolean(undefined);
+
+    /**
+     * @tc.steps: step4. call JSI ValueToBoolean
+     */
+    bool jsBoolValue = JSI::ValueToBoolean(jsBool);
+    /**
+     * @tc.expected: step2-step4. res1 = true, res2 = false and jsBoolValue = true
+     */
+    if (res1 && !res2 && jsBoolValue) {
+        printf("JSIInterfaceTest008 pass\n");
+    } else {
+        printf("JSIInterfaceTest008 fail\n");
+    }
+    EXPECT_TRUE(res1 && !res2 && jsBoolValue);
+    JSI::ReleaseValueList(jsBool, undefined);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest009()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateUndefined
+     */
+    JSIValue undef = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsUndefined with Undefined object
+     */
+    bool res1 = JSI::ValueIsUndefined(undef);
+    JSIValue obj = JSI::CreateObject();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsUndefined with obj
+     */
+    bool res2 = JSI::ValueIsUndefined(obj);
+    /**
+     * @tc.expected: step2-step3. res1 = true, res2 = false
+     */
+    if (res1 && !res2) {
+        printf("JSIInterfaceTest009 pass\n");
+    } else {
+        printf("JSIInterfaceTest009 fail\n");
+    }
+    EXPECT_TRUE(res1 && !res2);
+    JSI::ReleaseValueList(undef, obj);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest010()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateNull
+     */
+    JSIValue nullObj = JSI::CreateNull();
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsNull with Null object
+     */
+    bool res1 = JSI::ValueIsNull(nullObj);
+    JSIValue obj = JSI::CreateObject();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsNull with obj
+     */
+    bool res2 = JSI::ValueIsNull(obj);
+    /**
+     * @tc.expected: step2-step3. res1 = true, res2 = false
+     */
+    if (res1 && !res2) {
+        printf("JSIInterfaceTest010 pass\n");
+    } else {
+        printf("JSIInterfaceTest010 fail\n");
+    }
+    EXPECT_TRUE(res1 && !res2);
+    JSI::ReleaseValueList(nullObj, obj);
+    TDD_CASE_END();
+}
+
+#if ENABLED(JS_FWK_SYMBOL)
+void JsiInterfaceTddTest::JSIInterfaceTest011()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateSymbol
+     */
+    JSIValue strValue = JSI::CreateString("Symbol description string");
+    JSIValue symbol = JSI::CreateSymbol(strValue);
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsSymbol with Symbol object
+     */
+    bool res1 = JSI::ValueIsSymbol(symbol);
+    JSIValue undef = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsSymbol with undef
+     */
+    bool res2 = JSI::ValueIsSymbol(undef);
+    /**
+     * @tc.expected: step2-step3. res1 = true, res2 = false
+     */
+    if (res1 && !res2) {
+        printf("JSIInterfaceTest011 pass\n");
+    } else {
+        printf("JSIInterfaceTest011 fail\n");
+    }
+    EXPECT_TRUE(res1 && !res2);
+    JSI::ReleaseValueList(strValue, symbol);
+    TDD_CASE_END();
+}
+#endif // ENABLED(JS_FWK_SYMBOL)
+
+void JsiInterfaceTddTest::JSIInterfaceTest012()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateObject
+     */
+    JSIValue obj = JSI::CreateObject();
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsObject with obj
+     */
+    bool res1 = JSI::ValueIsObject(obj);
+    JSIValue undef = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsObject with undef
+     */
+    bool res2 = JSI::ValueIsObject(undef);
+    /**
+     * @tc.expected: step2-step3. res1 = true, res2 = false
+     */
+    if (!res1 || res2) {
+        printf("JSIInterfaceTest012 fail\n");
+    }
+    EXPECT_FALSE(!res1 || res2);
+
+    /**
+     * @tc.steps: step4. call JSI AcquireValue
+     */
+    JSIValue acquire = JSI::AcquireValue(obj);
+    if (acquire != undef) {
+        printf("JSIInterfaceTest012 pass\n");
+    }
+    EXPECT_TRUE(acquire != undef);
+    /**
+     * @tc.steps: step5. call JSI ReleaseValue on acquire
+     */
+    JSI::ReleaseValue(acquire);
+    /**
+     * @tc.expected: step5. no exception log
+     */
+    JSI::ReleaseValueList(obj, undef);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest013()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI JsonParse
+     */
+    JSIValue jsonValue = JSI::JsonParse("{\"key1\":\"value1\",\"key2\":\"value2\"}");
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsObject with obj
+     */
+    char *jsonStr = JSI::JsonStringify(jsonValue);
+    /**
+     * @tc.expected: step2. jsonStr = "{\"key1\":\"value1\",\"key2\":\"value2\"}"
+     */
+    if ((jsonStr != nullptr) &&
+        !strcmp(jsonStr, "{\"key1\":\"value1\",\"key2\":\"value2\"}")) {
+        printf("JSIInterfaceTest013 pass\n");
+    } else {
+        printf("JSIInterfaceTest013 fail\n");
+    }
+    EXPECT_TRUE((jsonStr != nullptr) &&
+        !strcmp(jsonStr, "{\"key1\":\"value1\",\"key2\":\"value2\"}"));
+    JSI::ReleaseValue(jsonValue);
+    JSI::ReleaseString(jsonStr);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest014()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI SetNumberProperty
+     */
+    JSIValue obj = JSI::CreateObject();
+    double initNum = 123;
+    JSI::SetNumberProperty(obj, "num", initNum);
+
+    /**
+     * @tc.steps: step2. call JSI GetNumberProperty
+     */
+    int32_t num = (int32_t)JSI::GetNumberProperty(obj, "num");
+    /**
+     * @tc.expected: step2. num = 123
+     */
+    if (num == (int32_t)initNum) {
+        printf("JSIInterfaceTest014 pass\n");
+    } else {
+        printf("JSIInterfaceTest014 fail\n");
+    }
+    EXPECT_TRUE(num == (int32_t)initNum);
+    JSI::ReleaseValue(obj);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest015()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI SetBooleanProperty
+     */
+    JSIValue obj = JSI::CreateObject();
+    JSI::SetBooleanProperty(obj, "bool", true);
+
+    /**
+     * @tc.steps: step2. call JSI GetBooleanProperty
+     */
+    bool boolValue = JSI::GetBooleanProperty(obj, "bool");
+    /**
+     * @tc.expected: step2. boolValue = true
+     */
+    if (boolValue) {
+        printf("JSIInterfaceTest015 pass\n");
+    } else {
+        printf("JSIInterfaceTest015 fail\n");
+    }
+    EXPECT_TRUE(boolValue);
+    JSI::ReleaseValue(obj);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest016()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI SetStringProperty
+     */
+    JSIValue obj = JSI::CreateObject();
+    JSI::SetStringProperty(obj, "string", "test");
+
+    /**
+     * @tc.steps: step2. call JSI GetStringProperty
+     */
+    char *str = JSI::GetStringProperty(obj, "string");
+    /**
+     * @tc.expected: step2. str = "test"
+     */
+    if (str != nullptr && !strcmp(str, "test")) {
+        printf("JSIInterfaceTest016 pass\n");
+    } else {
+        printf("JSIInterfaceTest016 fail\n");
+    }
+    EXPECT_TRUE(str != nullptr && !strcmp(str, "test"));
+    JSI::ReleaseValue(obj);
+    JSI::ReleaseString(str);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest017()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI SetPropertyByIndex
+     */
+    uint32_t initLength = 2;
+    double initNum = 123;
+    JSIValue array = JSI::CreateArray(initLength);
+    JSIValue numValue = JSI::CreateNumber(initNum);
+    JSIValue strValue = JSI::CreateString("test");
+    JSI::SetPropertyByIndex(array, 0, numValue);
+    JSI::SetPropertyByIndex(array, 1, strValue);
+
+    /**
+     * @tc.steps: step2. call JSI GetPropertyByIndex
+     */
+    JSIValue numValueGet = JSI::GetPropertyByIndex(array, 0);
+    JSIValue strValueGet = JSI::GetPropertyByIndex(array, 1);
+    int32_t num = (int32_t)JSI::ValueToNumber(numValueGet);
+    char *str = JSI::ValueToString(strValueGet);
+    /**
+     * @tc.expected: step2. str = "test", num = 123
+     */
+    if ((str != nullptr) && !strcmp(str, "test") && (num == (int32_t)initNum)) {
+        printf("JSIInterfaceTest017 pass\n");
+    } else {
+        printf("JSIInterfaceTest017 fail\n");
+    }
+    EXPECT_TRUE((str != nullptr) && !strcmp(str, "test") && (num == (int32_t)initNum));
+    JSI::ReleaseValueList(array, numValue, strValue, numValueGet, strValueGet);
+    JSI::ReleaseString(str);
+    TDD_CASE_END();
+}
+
+#if ENABLED(JS_FWK_TYPEDARRAY)
+void JsiInterfaceTddTest::JSIInterfaceTest018()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. call JSI CreateArrayBuffer
+     */
+    uint8_t *ptr = nullptr;
+    size_t initLength = 2;
+    uint8_t value1 = 128;
+    uint8_t value2 = 255;
+    JSIValue buffer = JSI::CreateArrayBuffer(initLength, ptr);
+    if (!ptr) {
+        JSI::ReleaseValue(buffer);
+        printf("JSIInterfaceTest018 fail\n");
+        EXPECT_TRUE(false);
+        return;
+    }
+    ptr[0] = value1;
+    ptr[1] = value2;
+    JSIValue undef = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step2. call JSI ValueIsArrayBuffer
+     */
+    bool res1 = JSI::ValueIsArrayBuffer(buffer);
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsArrayBuffer with undef
+     */
+    bool res2 = JSI::ValueIsArrayBuffer(undef);
+
+    /**
+     * @tc.steps: step4. call JSI GetArrayBufferInfo
+     */
+    size_t length;
+    uint8_t *ptr2 = JSI::GetArrayBufferInfo(buffer, length);
+    /**
+     * @tc.expected: step2-step4. res1 = true, res2 = false, length = 2
+     */
+    if ((ptr2 != nullptr) && res1 && !res2 && (length == initLength) && (ptr2[0] == value1) && (ptr2[1] == value2)) {
+        printf("JSIInterfaceTest018 pass\n");
+    } else {
+        printf("JSIInterfaceTest018 fail\n");
+    }
+    EXPECT_TRUE((ptr2 != nullptr) && res1 && !res2 && (length == initLength) && (ptr2[0] == value1) &&
+                (ptr2[1] == value2));
+    JSI::ReleaseValueList(buffer, undef);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest019()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. create an ArrayBuffer
+     */
+    uint8_t *ptr = nullptr;
+    size_t initLength = 4;
+    uint8_t value1 = 128;
+    uint8_t value2 = 255;
+    size_t initOffset = 2;
+    JSIValue buffer = JSI::CreateArrayBuffer(initLength, ptr);
+    if (!ptr) {
+        JSI::ReleaseValue(buffer);
+        printf("JSIInterfaceTest019 fail\n");
+        EXPECT_TRUE(false);
+        return;
+    }
+    ptr[0] = 0;
+    ptr[1] = 0;
+    ptr[initOffset] = value1;
+    ptr[initOffset + 1] = value2;
+
+    /**
+     * @tc.steps: step2. create an TypedArray
+     */
+    size_t byteLength = 2;
+    JSIValue typedArray = JSI::CreateTypedArray(TypedArrayType::JSI_UINT8_ARRAY, byteLength, buffer, initOffset);
+    JSI::ReleaseValue(buffer);
+    JSIValue undef = JSI::CreateUndefined();
+
+    /**
+     * @tc.steps: step3. call JSI ValueIsTypedArray
+     */
+    bool res1 = JSI::ValueIsTypedArray(typedArray);
+
+    /**
+     * @tc.steps: step4. call JSI ValueIsTypedArray with undef
+     */
+    bool res2 = JSI::ValueIsTypedArray(undef);
+
+    /**
+     * @tc.steps: step5. call JSI GetTypedArrayInfo
+     */
+    TypedArrayType type;
+    size_t length, offset;
+    JSIValue arrayBuffer;
+    uint8_t *ptr2 = JSI::GetTypedArrayInfo(typedArray, type, length, arrayBuffer, offset);
+    /**
+     * @tc.expected: step3-step5. res1 = true, res2 = false, typedArray params are correct
+     */
+    if (res1 && !res2 && (type == TypedArrayType::JSI_UINT8_ARRAY) && (length == byteLength) &&
+        (offset == initOffset) && ptr2 != nullptr && (ptr2[offset] == value1) &&
+        (ptr2[offset + 1] == value2)) {
+        printf("JSIInterfaceTest019 pass\n");
+    } else {
+        printf("JSIInterfaceTest019 fail\n");
+    }
+    EXPECT_TRUE(res1 && !res2 && (type == TypedArrayType::JSI_UINT8_ARRAY) && (length == byteLength) &&
+        (offset == initOffset) && ptr2 != nullptr && (ptr2[offset] == value1) && (ptr2[offset + 1] == value2));
+
+    JSI::ReleaseValueList(typedArray, undef, arrayBuffer);
+    TDD_CASE_END();
+}
+#endif // ENABLED(JS_FWK_TYPEDARRAY)
+
+void JsiInterfaceTddTest::JSIInterfaceTest020()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. initial JSPropertyDescriptor object
+     */
+    JSPropertyDescriptor desc;
+    const char *propName = "propTest";
+    desc.getter = Getter;
+    desc.setter = Setter;
+
+    /**
+     * @tc.steps: step2. call JSI DefineNamedProperty
+     */
+    JSIValue globalObj = JSI::GetGlobalObject();
+    bool res = JSI::DefineNamedProperty(globalObj, propName, desc);
+    JSI::ReleaseValue(globalObj);
+
+    /**
+     * @tc.steps: step3. run an example js code to use the getter/setter
+     */
+    const char *jerrySrc = "this.propTest; this.propTest; this.propTest = 4; this.propTest";
+    jerry_value_t evalResult =
+        jerry_eval(reinterpret_cast<const jerry_char_t *>(jerrySrc), strlen(jerrySrc), JERRY_PARSE_NO_OPTS);
+    int8_t num = jerry_get_number_value(evalResult);
+    uint8_t expectedNum = 5;
+    /**
+     * @tc.expected: step3. res = true, num = 5
+     */
+    if (res && (num == expectedNum)) {
+        printf("JSIInterfaceTest020 pass\n");
+    } else {
+        printf("JSIInterfaceTest020 fail\n");
+    }
+    EXPECT_TRUE(res && (num == expectedNum));
+    jerry_release_value(evalResult);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest021()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. create an object and set properties
+     */
+    JSIValue object = JSI::CreateObject();
+    const char *key1 = "key1";
+    const char *key2 = "key2";
+    JSI::SetNumberProperty(object, key1, 0);
+    JSI::SetNumberProperty(object, key2, 1);
+
+    /**
+     * @tc.steps: step2. call JSI GetObjectKeys
+     */
+    JSIValue keys = JSI::GetObjectKeys(object);
+    JSIValue keyValue1 = JSI::GetPropertyByIndex(keys, 0);
+    JSIValue keyValue2 = JSI::GetPropertyByIndex(keys, 1);
+    char *keyAcquired1 = JSI::ValueToString(keyValue1);
+    char *keyAcquired2 = JSI::ValueToString(keyValue2);
+    int32_t num1 = JSI::GetNumberProperty(object, keyAcquired1);
+    int32_t num2 = JSI::GetNumberProperty(object, keyAcquired2);
+    /**
+     * @tc.expected: step2. keyAcquired1 = key1, num1 = 0, keyAcquired2 = key2, num1 = 1
+     */
+    if (keyAcquired1 != nullptr && !strcmp(keyAcquired1, key1) &&
+        num1 == 0 && keyAcquired2 != nullptr &&
+        !strcmp(keyAcquired2, key2) && num2 == 1) {
+        printf("JSIInterfaceTest021 pass\n");
+    } else {
+        printf("JSIInterfaceTest021 fail\n");
+    }
+    EXPECT_TRUE(keyAcquired1 != nullptr && !strcmp(keyAcquired1, key1) && num1 == 0 &&
+        keyAcquired2 != nullptr && !strcmp(keyAcquired2, key2) && num2 == 1);
+
+    JSI::ReleaseValueList(object, keys, keyValue1, keyValue2);
+    JSI::ReleaseString(keyAcquired1);
+    JSI::ReleaseString(keyAcquired2);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest022()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. create an object and call JSI SetOnDestroy
+     */
+    JSIValue object = JSI::CreateObject();
+    JSI::SetOnDestroy(object, OnDestroy);
+
+    /**
+     * @tc.steps: step2. get destroy callback from object
+     */
+    const char *name = "onDestroyHandler";
+    JSIValue funObj = JSI::GetNamedProperty(object, name);
+    void *nativePtr = nullptr;
+    jerry_value_t jObj = (jerry_value_t)(uintptr_t)(funObj);
+    bool exist = jerry_get_object_native_pointer(jObj, &nativePtr, nullptr);
+    /**
+     * @tc.expected: step2. invoke callback and the OnDestroy function will be called
+     */
+    if (!exist || (nativePtr == nullptr)) {
+        printf("JSIInterfaceTest022 fail\n");
+    } else {
+        JsiCallback callback = reinterpret_cast<JsiCallback>(nativePtr);
+        (*callback)(JSI_ERR_OK);
+        printf("JSIInterfaceTest022 pass\n");
+    }
+    EXPECT_TRUE(nativePtr != nullptr);
+    jerry_delete_object_native_pointer(jObj, nullptr);
+    JSI::ReleaseValueList(object, funObj);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::JSIInterfaceTest023()
+{
+    TDD_CASE_BEGIN();
+    /**
+     * @tc.steps: step1. create an object and call JSI SetOnTerminate
+     */
+    JSIValue object = JSI::CreateObject();
+    JSI::SetOnTerminate(object, OnTerminate);
+
+    /**
+     * @tc.steps: step2. get terminate callback from object
+     */
+    const char *name = "onTerminateHandler";
+    JSIValue funObj = JSI::GetNamedProperty(object, name);
+    void *nativePtr = nullptr;
+    jerry_value_t jObj = (jerry_value_t)(uintptr_t)(funObj);
+    bool exist = jerry_get_object_native_pointer(jObj, &nativePtr, nullptr);
+    /**
+     * @tc.expected: step2. invoke callback and the OnTerminate function will be called
+     */
+    if (!exist || (nativePtr == nullptr)) {
+        printf("JSIInterfaceTest023 fail\n");
+    } else {
+        JsiCallback callback = reinterpret_cast<JsiCallback>(nativePtr);
+        (*callback)(JSI_ERR_OK);
+        printf("JSIInterfaceTest023 pass\n");
+    }
+    EXPECT_TRUE(nativePtr != nullptr);
+    jerry_delete_object_native_pointer(jObj, nullptr);
+    JSI::ReleaseValueList(object, funObj);
+    TDD_CASE_END();
+}
+
+void JsiInterfaceTddTest::RunTests()
+{
+    JSIInterfaceTest001();
+    JSIInterfaceTest002();
+    JSIInterfaceTest003();
+    JSIInterfaceTest004();
+    JSIInterfaceTest005();
+    JSIInterfaceTest006();
+    JSIInterfaceTest007();
+    JSIInterfaceTest008();
+    JSIInterfaceTest009();
+    JSIInterfaceTest010();
+#if ENABLED(JS_FWK_SYMBOL)
+    JSIInterfaceTest011();
+#endif // ENABLED(JS_FWK_SYMBOL)
+    JSIInterfaceTest012();
+    JSIInterfaceTest013();
+    JSIInterfaceTest014();
+    JSIInterfaceTest015();
+    JSIInterfaceTest016();
+    JSIInterfaceTest017();
+#if ENABLED(JS_FWK_TYPEDARRAY)
+    JSIInterfaceTest018();
+    JSIInterfaceTest019();
+#endif // ENABLED(JS_FWK_TYPEDARRAY)
+    JSIInterfaceTest020();
+    JSIInterfaceTest021();
+    JSIInterfaceTest022();
+    JSIInterfaceTest023();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: JSIInterfaceTest001
+ * @tc.desc: Verify JSI interface CreateObject.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test001, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest001();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest002
+ * @tc.desc: Verify JSI interface GetGlobalObject.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test002, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest002();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest003
+ * @tc.desc: Verify JSI interface GetJSHeapStatus.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test003, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest003();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest004
+ * @tc.desc: Verify JSI interface related to Array object.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test004, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest004();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest005
+ * @tc.desc: Verify JSI interface related to Function object.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test005, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest005();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest006
+ * @tc.desc: Verify JSI interface related to Number object.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test006, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest006();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest007
+ * @tc.desc: Verify JSI interface related to String object.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test007, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest007();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest008
+ * @tc.desc: Verify JSI interface related to Boolean object.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test008, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest008();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest009
+ * @tc.desc: Verify JSI interface related to Undefined object.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test009, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest009();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest010
+ * @tc.desc: Verify JSI interface related to Null object.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test010, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest010();
+}
+
+#if ENABLED(JS_FWK_SYMBOL)
+/**
+ * @tc.name: JSIInterfaceTest011
+ * @tc.desc: Verify JSI interface related to Symbol object.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test011, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest011();
+}
+#endif // ENABLED(JS_FWK_SYMBOL)
+
+/**
+ * @tc.name: JSIInterfaceTest012
+ * @tc.desc: Verify JSI interface related to JS Object.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test012, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest012();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest013
+ * @tc.desc: Verify JSI interface related to JS JSON.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test013, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest013();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest014
+ * @tc.desc: Verify JSI interface related to JS Number property.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test014, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest014();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest015
+ * @tc.desc: Verify JSI interface related to JS Boolean property.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test015, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest015();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest016
+ * @tc.desc: Verify JSI interface related to JS String property.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test016, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest016();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest017
+ * @tc.desc: Verify JSI interface related to JS property with index.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test017, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest017();
+}
+
+#if ENABLED(JS_FWK_TYPEDARRAY)
+/**
+ * @tc.name: JSIInterfaceTest018
+ * @tc.desc: Verify JSI interface related to JS ArrayBuffer.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test018, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest018();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest019
+ * @tc.desc: Verify JSI interface related to JS TypedArray.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test019, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest019();
+}
+#endif
+
+/**
+ * @tc.name: JSIInterfaceTest020
+ * @tc.desc: Verify JSI interface related to JS descriptor.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test020, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest020();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest021
+ * @tc.desc: Verify JSI interface GetObjectKeys.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test021, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest021();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest022
+ * @tc.desc: Verify JSI interfaces related to OnDestroy callback.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test022, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest022();
+}
+
+/**
+ * @tc.name: JSIInterfaceTest023
+ * @tc.desc: Verify JSI interfaces related to OnTerminate callback.
+ * @tc.require: AR000DSEHC
+ */
+HWTEST_F(JsiInterfaceTddTest, test023, TestSize.Level1)
+{
+    JsiInterfaceTddTest::JSIInterfaceTest023();
+}
+#endif
+}
+}
\ No newline at end of file
diff --git a/frameworks/src/core/jsi/test/unittest/common/jsi_interface_tdd_test.h b/frameworks/src/core/jsi/test/unittest/common/jsi_interface_tdd_test.h
new file mode 100755
index 0000000..63f7218
--- /dev/null
+++ b/frameworks/src/core/jsi/test/unittest/common/jsi_interface_tdd_test.h
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef ACELITE_JSI_INTERFACE_TDD_TEST_H
+#define ACELITE_JSI_INTERFACE_TDD_TEST_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#endif
+
+#include "acelite_config.h"
+#include "jerryscript.h"
+#include "js_config.h"
+#include "jsi.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class JsiInterfaceTddTest : public testing::Test {
+#else
+class JsiInterfaceTddTest {
+#endif
+public:
+    JsiInterfaceTddTest();
+    ~JsiInterfaceTddTest(){};
+    void SetUp();
+    void TearDown();
+    static void OnDestroy(int8_t statusCode);
+    static void OnTerminate(int8_t statusCode);
+    static JSIValue Setter(const JSIValue thisVal, const JSIValue args[], uint8_t argsNum);
+    static JSIValue Getter(const JSIValue thisVal, const JSIValue args[], uint8_t argsNum);
+    static JSIValue Function(const JSIValue thisVal, const JSIValue args[], uint8_t argsNum);
+    void JSIInterfaceTest001();
+    void JSIInterfaceTest002();
+    void JSIInterfaceTest003();
+    void JSIInterfaceTest004();
+    void JSIInterfaceTest005();
+    void JSIInterfaceTest006();
+    void JSIInterfaceTest007();
+    void JSIInterfaceTest008();
+    void JSIInterfaceTest009();
+    void JSIInterfaceTest010();
+#if ENABLED(JS_FWK_SYMBOL)
+    void JSIInterfaceTest011();
+#endif // ENABLED(JS_FWK_SYMBOL)
+    void JSIInterfaceTest012();
+    void JSIInterfaceTest013();
+    void JSIInterfaceTest014();
+    void JSIInterfaceTest015();
+    void JSIInterfaceTest016();
+    void JSIInterfaceTest017();
+#if ENABLED(JS_FWK_TYPEDARRAY)
+    void JSIInterfaceTest018();
+    void JSIInterfaceTest019();
+#endif // ENABLED(JS_FWK_TYPEDARRAY)
+    void JSIInterfaceTest020();
+    void JSIInterfaceTest021();
+    void JSIInterfaceTest022();
+    void JSIInterfaceTest023();
+    void RunTests();
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // ACELITE_JSI_INTERFACE_TDD_TEST_H
diff --git a/src/core/modules/app_module.cpp b/frameworks/src/core/modules/app_module.cpp
old mode 100755
new mode 100644
similarity index 98%
rename from src/core/modules/app_module.cpp
rename to frameworks/src/core/modules/app_module.cpp
index 17776f0..a27b7cd
--- a/src/core/modules/app_module.cpp
+++ b/frameworks/src/core/modules/app_module.cpp
@@ -74,7 +74,7 @@ cJSON *AppModule::ReadManifest()
     }
 
     uint32_t fileSize = 0;
-    char *manifestContent = ReadFile(manifestPath, &fileSize, false);
+    char *manifestContent = ReadFile(manifestPath, fileSize, false);
 
     ace_free(manifestPath);
     manifestPath = nullptr;
diff --git a/src/core/modules/app_module.h b/frameworks/src/core/modules/app_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/app_module.h
rename to frameworks/src/core/modules/app_module.h
diff --git a/src/core/modules/dfx_module.cpp b/frameworks/src/core/modules/dfx_module.cpp
similarity index 91%
rename from src/core/modules/dfx_module.cpp
rename to frameworks/src/core/modules/dfx_module.cpp
index a199a71..e4a4fec 100755
--- a/src/core/modules/dfx_module.cpp
+++ b/frameworks/src/core/modules/dfx_module.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -19,7 +19,9 @@
 #ifdef FEATURE_ACELITE_MC_DFX_MODULE
 #include "ui_snapshot.h"
 #elif defined(FEATURE_ACELITE_LITE_DFX_MODULE)
+#ifdef __LITEOS_A__
 #include "ability_env.h"
+#endif
 #include "ace_mem_base.h"
 #include "js_fwk_common.h"
 #include "ui_screenshot.h"
@@ -71,8 +73,12 @@ JSIValue DfxModule::Screenshot(const JSIValue thisVal, const JSIValue *args, uin
     return retVal;
 #elif defined(FEATURE_ACELITE_LITE_DFX_MODULE)
     JSIValue retVal = JSI::CreateBoolean(true);
-    const char * const dataPath = GetDataPath();
-    char *path = RelocateResourceFilePath(dataPath, SCREEN_SNAP_PATH);
+#ifdef __LITEOS_A__
+    const char * const savingPath = GetDataPath();
+#else
+    const char * const savingPath = "user/log";
+#endif
+    char *path = RelocateResourceFilePath(savingPath, SCREEN_SNAP_PATH);
     // uikit will deal with if path is null
     if ((UIScreenshot::GetInstance() == nullptr) || (!UIScreenshot::GetInstance()->ScreenshotToFile(path))) {
         HILOG_ERROR(HILOG_MODULE_ACE, "screenshot failed");
@@ -96,8 +102,12 @@ JSIValue DfxModule::DumpDomTree(const JSIValue thisVal, const JSIValue *args, ui
 
     char *viewId = GetDomViewId(args);
 #ifdef FEATURE_ACELITE_LITE_DFX_MODULE
-    const char * const dataPath = GetDataPath();
-    char *path = RelocateResourceFilePath(dataPath, DOM_TREE_PATH);
+#ifdef __LITEOS_A__
+    const char * const savingPath = GetDataPath();
+#else
+    const char * const savingPath = "user/log";
+#endif
+    char *path = RelocateResourceFilePath(savingPath, DOM_TREE_PATH);
     // uikit will deal with if path and viewid is null
     if ((UIDumpDomTree::GetInstance() != nullptr) && (UIDumpDomTree::GetInstance()->DumpDomTree(viewId, path))) {
 #else
@@ -177,12 +187,11 @@ JSIValue DfxModule::InjectPointEvent(const JSIValue *args, EventDataType type)
         (EventInjector::GetInstance()->SetInjectEvent(data, realLen, type))) {
         ace_free(data);
         return retVal;
-    } else {
-        HILOG_ERROR(HILOG_MODULE_ACE, "simulator point event error");
-        ace_free(data);
-        JSI::ReleaseValue(retVal);
-        return JSI::CreateBoolean(false);
     }
+    HILOG_ERROR(HILOG_MODULE_ACE, "simulator point event error");
+    ace_free(data);
+    JSI::ReleaseValue(retVal);
+    return JSI::CreateBoolean(false);
 }
 
 JSIValue DfxModule::InjectEvent(const JSIValue thisVal, const JSIValue *args, uint8_t argsNum)
@@ -206,9 +215,8 @@ JSIValue DfxModule::InjectEvent(const JSIValue thisVal, const JSIValue *args, ui
             return JSI::CreateBoolean(false);
         }
         return InjectPointEvent(args, type);
-    } else {
-        HILOG_ERROR(HILOG_MODULE_ACE, "only support point event");
     }
+    HILOG_ERROR(HILOG_MODULE_ACE, "only support point event");
 
     JSI::ReleaseString(eventType);
     return JSI::CreateBoolean(false);
diff --git a/src/core/modules/dfx_module.h b/frameworks/src/core/modules/dfx_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/dfx_module.h
rename to frameworks/src/core/modules/dfx_module.h
diff --git a/frameworks/src/core/modules/dialog_module.cpp b/frameworks/src/core/modules/dialog_module.cpp
new file mode 100755
index 0000000..9cc8e13
--- /dev/null
+++ b/frameworks/src/core/modules/dialog_module.cpp
@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "acelite_config.h"
+#ifdef FEATURE_MODULE_DIALOG
+#include "dialog_module.h"
+#include "ace_log.h"
+#include "js_profiler.h"
+#include "jsi/internal/jsi_internal.h"
+#include "ui_dialog.h"
+
+#include "ui_scroll_view.h"
+#include "root_view.h"
+#include "screen.h"
+
+namespace OHOS {
+namespace ACELite {
+const char * const DialogModule::TITLE_KEY = "title";
+const char * const DialogModule::MSG_KEY = "message";
+const char * const DialogModule::BUTTON_KEY = "buttons";
+const char * const DialogModule::SUCCESS_FUNC_KEY = "success";
+const char * const DialogModule::CANCEL_FUNC_KEY = "cancel";
+const char * const DialogModule::COMPLETE_FUNC_KEY = "complete";
+
+JSIValue DialogModule::ShowDialog(const JSIValue thisVal, const JSIValue args[], uint8_t argsNum)
+{
+    // js calling allow argsNum > 1, but do not process.
+    if (argsNum < 1) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "ShowDialog args num(%d) is invalid.", argsNum);
+        return AS_JSI_VALUE(jerry_create_error(JERRY_ERROR_TYPE,
+            reinterpret_cast<const jerry_char_t *>("params should only be one object.")));
+    }
+
+    // support show another dialog when first dialog showing. second dialog cover first one.
+    // click second dialog disappear, first one keep going showing
+    JSDialog *jsDialog = new JSDialog();
+    if (jsDialog == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "dialog is nullptr");
+        return AS_JSI_VALUE(jerry_create_error(JERRY_ERROR_TYPE,
+            reinterpret_cast<const jerry_char_t *>("create dialog error.")));
+    }
+
+    /* parse dialog title */
+    char *dialogTitle = JSI::GetStringProperty(args[0], TITLE_KEY);
+    jsDialog->SetTitle(dialogTitle);
+    HILOG_INFO(HILOG_MODULE_ACE, "dialog title = %s", dialogTitle);
+
+    /* parse dialog message */
+    char *message = JSI::GetStringProperty(args[0], MSG_KEY);
+    jsDialog->SetMessage(message);
+    HILOG_INFO(HILOG_MODULE_ACE, "dialog message =%s", message);
+
+    /* parse dialog button */
+    JSIValue buttons = JSI::GetNamedProperty(args[0], BUTTON_KEY);
+
+    /* parse dialog js function */
+    JSIValue successFunc = JSI::GetNamedProperty(args[0], SUCCESS_FUNC_KEY);
+    JSIValue cancelFunc = JSI::GetNamedProperty(args[0], CANCEL_FUNC_KEY);
+    JSIValue completeFunc = JSI::GetNamedProperty(args[0], COMPLETE_FUNC_KEY);
+
+    bool result = jsDialog->ShowDialog(thisVal, buttons, successFunc, cancelFunc, completeFunc);
+    if (!result) {
+        delete jsDialog;
+        jsDialog = nullptr;
+    }
+
+    JSI::ReleaseValueList(buttons, successFunc, cancelFunc, completeFunc);
+
+    return AS_JSI_VALUE(UNDEFINED);
+}
+} // namespace ACELite
+} // namespace OHOS
+#endif // FEATURE_MODULE_DIALOG
diff --git a/frameworks/src/core/modules/dialog_module.h b/frameworks/src/core/modules/dialog_module.h
new file mode 100755
index 0000000..5da154f
--- /dev/null
+++ b/frameworks/src/core/modules/dialog_module.h
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_DIALOG_MODULE_H
+#define OHOS_ACELITE_DIALOG_MODULE_H
+
+#include "acelite_config.h"
+#ifdef FEATURE_MODULE_DIALOG
+#include "jsi.h"
+#include "js_fwk_common.h"
+#include "non_copyable.h"
+
+#include "ui_dialog.h"
+#include "dialog/js_dialog.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * @brief: The module of dialog, show dialog in window
+ */
+class DialogModule final : public MemoryHeap {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(DialogModule);
+    DialogModule() {}
+    ~DialogModule() {}
+    static JSIValue ShowDialog(const JSIValue thisVal, const JSIValue args[], uint8_t argsNum);
+
+private:
+    static const char * const TITLE_KEY;
+    static const char * const MSG_KEY;
+    static const char * const BUTTON_KEY;
+    static const char * const SUCCESS_FUNC_KEY;
+    static const char * const CANCEL_FUNC_KEY;
+    static const char * const COMPLETE_FUNC_KEY;
+};
+
+void InitDialogModule(JSIValue exports)
+{
+    JSI::SetModuleAPI(exports, "showDialog", DialogModule::ShowDialog);
+}
+} // namespace ACELite
+} // namespace OHOS
+#endif // FEATURE_MODULE_DIALOG
+#endif // OHOS_ACELITE_DIALOG_MODULE_H
\ No newline at end of file
diff --git a/src/core/modules/maplejs/readme.txt b/frameworks/src/core/modules/maplejs/readme.txt
similarity index 100%
rename from src/core/modules/maplejs/readme.txt
rename to frameworks/src/core/modules/maplejs/readme.txt
diff --git a/src/core/modules/module_manager.cpp b/frameworks/src/core/modules/module_manager.cpp
old mode 100755
new mode 100644
similarity index 93%
rename from src/core/modules/module_manager.cpp
rename to frameworks/src/core/modules/module_manager.cpp
index cdd846f..0f69b4f
--- a/src/core/modules/module_manager.cpp
+++ b/frameworks/src/core/modules/module_manager.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -28,14 +28,6 @@
 
 namespace OHOS {
 namespace ACELite {
-// external methods for JS modules
-#ifdef FEATURE_PRODUCT_MODULE
-extern const Module* GetProductModules(uint16_t& moduleCount);
-#endif // FEATURE_PRODUCT_MODULE
-#ifdef FEATURE_PRIVATE_MODULE
-extern const PrivateModule* GetPrivateModules(uint16_t& moduleCount);
-#endif // FEATURE_PRIVATE_MODULE
-
 // Initialization of static variables
 JSIValue ModuleManager::requiredSystemModules = 0;
 
@@ -53,14 +45,14 @@ JSIValue ModuleManager::RequireModule(const char * const moduleName)
         uint16_t moduleCount = sizeof(OHOS_MODULES) / sizeof(Module);
         moduleObj = GetModuleObject(name, OHOS_MODULES, moduleCount, requiredSystemModules);
 #ifdef FEATURE_PRODUCT_MODULE
-        if (JSI::ValueIsUndefined(moduleObj)) {
+        if ((JSI::ValueIsUndefined(moduleObj)) && (productModulesGetter_ != nullptr)) {
             uint16_t prodModCount;
-            const Module* prodModules = GetProductModules(prodModCount);
+            const Module* prodModules = productModulesGetter_(prodModCount);
             moduleObj = GetModuleObject(name, prodModules, prodModCount, requiredSystemModules);
         }
 #endif // FEATURE_PRODUCT_MODULE
 #ifdef FEATURE_PRIVATE_MODULE
-        if (JSI::ValueIsUndefined(moduleObj)) {
+        if ((JSI::ValueIsUndefined(moduleObj)) && (privateModulesGetter_ != nullptr)) {
             const char * const bundleName = JsAppContext::GetInstance()->GetCurrentBundleName();
             moduleObj = GetModuleObject(name, nullptr, 0, requiredSystemModules, bundleName);
         }
@@ -166,7 +158,8 @@ JSIValue ModuleManager::GetModuleObject(const char * const moduleName, const Mod
 #ifdef FEATURE_PRIVATE_MODULE
     else {
         uint16_t count;
-        const PrivateModule* privateModules = GetPrivateModules(count);
+        const PrivateModule *privateModules =
+            (privateModulesGetter_ != nullptr) ? privateModulesGetter_(count) : nullptr;
         if (privateModules == nullptr) {
             return JSI::CreateUndefined();
         }
@@ -340,5 +333,16 @@ JsiCallback ModuleManager::GetJsiCallback(JSIValue object, const char * const na
     void *callback = GetObjectNamedPointer(object, name);
     return reinterpret_cast<JsiCallback>(callback);
 }
+
+
+void ModuleManager::SetProductModulesGetter(ProductModulesGetter getter)
+{
+    productModulesGetter_ = getter;
+}
+
+void ModuleManager::SetPrivateModulesGetter(PrivateModulesGetter getter)
+{
+    privateModulesGetter_ = getter;
+}
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/modules/module_manager.h b/frameworks/src/core/modules/module_manager.h
old mode 100755
new mode 100644
similarity index 87%
rename from src/core/modules/module_manager.h
rename to frameworks/src/core/modules/module_manager.h
index c3d0bcd..ec7908b
--- a/src/core/modules/module_manager.h
+++ b/frameworks/src/core/modules/module_manager.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -18,6 +18,7 @@
 
 #include "jsi.h"
 #include "non_copyable.h"
+#include "product_adapter.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -60,6 +61,19 @@ public:
      */
     void OnTerminate();
 
+    /**
+     * @brief: Set product modules getter hook.
+     *
+     * @param: the hook
+     */
+    void SetProductModulesGetter(ProductModulesGetter getter);
+    /**
+     * @brief: Set private modules getter hook.
+     *
+     * @param: the hook
+     */
+    void SetPrivateModulesGetter(PrivateModulesGetter getter);
+
 private:
     struct CallbackNode : public MemoryHeap {
         ACE_DISALLOW_COPY_AND_MOVE(CallbackNode);
@@ -78,7 +92,13 @@ private:
         struct CallbackNode *next;
     };
 
-    ModuleManager() : onDestroyHead_(nullptr), onTerminateHead_(nullptr) {}
+    ModuleManager()
+        : onDestroyHead_(nullptr),
+          onTerminateHead_(nullptr),
+          productModulesGetter_(nullptr),
+          privateModulesGetter_(nullptr)
+    {
+    }
     virtual ~ModuleManager() {}
 
     /**
@@ -129,6 +149,8 @@ private:
 
     CallbackNode *onDestroyHead_;
     CallbackNode *onTerminateHead_;
+    ProductModulesGetter productModulesGetter_;
+    PrivateModulesGetter privateModulesGetter_;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/modules/ohos_module_config.h b/frameworks/src/core/modules/ohos_module_config.h
similarity index 83%
rename from src/core/modules/ohos_module_config.h
rename to frameworks/src/core/modules/ohos_module_config.h
index ea61b7f..f42f058 100755
--- a/src/core/modules/ohos_module_config.h
+++ b/frameworks/src/core/modules/ohos_module_config.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -29,10 +29,15 @@ extern void InitAppModule(JSIValue exports);
 #ifdef FEATURE_MODULE_AUDIO
 extern void InitAudioModule(JSIValue exports);
 #endif // FEATURE_MODULE_AUDIO
+#ifdef FEATURE_ACELITE_DFX_MODULE
 extern void InitDfxModule(JSIValue exports);
+#endif // FEATURE_ACELITE_DFX_MODULE
 #ifdef ENABLE_MODULE_CIPHER
 extern void InitCipherModule(JSIValue exports);
 #endif
+#ifdef FEATURE_MODULE_DIALOG
+extern void InitDialogModule(JSIValue exports);
+#endif // FEATURE_MODULE_DIALOG
 
 #ifdef FEATURE_MODULE_STORAGE
 extern void InitNativeApiFs(JSIValue exports);
@@ -64,6 +69,10 @@ extern void InitBatteryModule(JSIValue exports);
 extern void InitLocaleModule(JSIValue exports);
 #endif
 
+#ifdef FEATURE_ACELITE_SYSTEM_CAPABILITY
+extern void InitCapabilityModule(JSIValue exports);
+#endif
+
 // Config information for built-in JS modules of OHOS platform
 const Module OHOS_MODULES[] = {
 #ifdef ENABLE_MODULE_REQUIRE_TEST
@@ -73,11 +82,16 @@ const Module OHOS_MODULES[] = {
 #ifdef FEATURE_MODULE_AUDIO
     {"audio", InitAudioModule},
 #endif // FEATURE_MODULE_AUDIO
+#ifdef FEATURE_ACELITE_DFX_MODULE
     {"dfx", InitDfxModule},
+#endif // FEATURE_ACELITE_DFX_MODULE
     {"router", InitRouterModule},
 #ifdef ENABLE_MODULE_CIPHER
     {"cipher", InitCipherModule},
 #endif
+#ifdef FEATURE_MODULE_DIALOG
+    {"prompt", InitDialogModule},
+#endif // FEATURE_MODULE_DIALOG
 
 #ifdef FEATURE_MODULE_STORAGE
     {"file", InitNativeApiFs},
@@ -102,6 +116,9 @@ const Module OHOS_MODULES[] = {
 #ifdef FEATURE_MODULE_CONFIGURATION
     {"configuration", InitLocaleModule},
 #endif
+#ifdef FEATURE_ACELITE_SYSTEM_CAPABILITY
+    {"capability", InitCapabilityModule},
+#endif
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/modules/presets/cjson_parser.cpp b/frameworks/src/core/modules/presets/cjson_parser.cpp
similarity index 51%
rename from src/core/modules/presets/cjson_parser.cpp
rename to frameworks/src/core/modules/presets/cjson_parser.cpp
index 4cfd9b1..c525789 100755
--- a/src/core/modules/presets/cjson_parser.cpp
+++ b/frameworks/src/core/modules/presets/cjson_parser.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -23,25 +23,26 @@
 #else
 #include "file.h"
 #endif
-#if ENABLED(SECURE_C_FUNCTION)
 #include "securec.h"
-#endif
+#include "string_util.h"
 #include <string.h>
 
 namespace OHOS {
 namespace ACELite {
 CJSONParser::CJSONParser()
-    : curFileIndex_(0),
-      totalFiles_(0),
+    : isCached_(false),
+      isAllocated_(true),
+      startPos_(-1),
       countries_(nullptr),
       language_(nullptr),
       filePath_(nullptr),
-      fileList_(nullptr)
+      languageFile_(nullptr)
 {
     char left = '{';
     leftDelemeter_ = left;
     char right = '}';
     rightDelemeter_ = right;
+    usedOffset_ = sizeof(uint32_t) * MAX_KEY_NUM;
 }
 
 bool CJSONParser::Init()
@@ -49,151 +50,29 @@ bool CJSONParser::Init()
     const char * const filePath = JsAppContext::GetInstance()->GetCurrentAbilityPath();
     const char * const folderName = "i18n";
     filePath_ = RelocateResourceFilePath(filePath, folderName);
+    void *ram = ace_malloc(LOCALIZATION_SIZE);
+    if (ram == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "malloc cache ram failed");
+        isAllocated_ = false;
+        return false;
+    }
+    startPos_ = reinterpret_cast<uintptr_t>(ram);
     return (filePath_ != nullptr);
 }
 
-bool CJSONParser::ChangeJsonFile(cJSON *&currentItem)
-{
-    if (currentItem != nullptr) { // if the currentItem is not null, it must be free
-        cJSON_Delete(currentItem);
-        currentItem = nullptr;
-    }
-    SetLanguage();     // get the new locale string
-    if (totalFiles_ == 0) {
-        return false;
-    }
-    char *name = nullptr;
-    if (curFileIndex_ == totalFiles_) {
-        return false;
-    } else {
-        // read the next json resource file
-        name = GetNode(fileList_, curFileIndex_ + 1);
-    }
-    char *content = ReadJSFile(filePath_, name);
-    if (content == nullptr) {
-        currentItem = nullptr;
-        curFileIndex_++;
-        return true;
-    }
-    currentItem = cJSON_Parse(content);
-    ace_free(content);
-    content = nullptr;
-    // point to next file
-    curFileIndex_++;
-    return true;
-}
-
-bool CJSONParser::GetFiles()
-{
-    ClearNode(fileList_);
-    totalFiles_ = 0;
-    if (language_ == nullptr) {
-        return false;
-    }
-    ListNode *languageFile = nullptr; // save language-XXX.json
-    ListNode *countryFile = nullptr;  // save language-country-XXX.json
-#if (defined(_WIN32) || defined(_WIN64))
-    if (!ReadWinFile(languageFile, countryFile)) {
-        ClearNode(languageFile);
-        ClearNode(countryFile);
-        return false;
-    }
-#else
-    if (!ReadFile(languageFile, countryFile)) {
-        ClearNode(languageFile);
-        ClearNode(countryFile);
-        return false;
-    }
-#endif
-    SortFileName(fileList_);
-    SortFileName(languageFile);
-    SortFileName(countryFile);
-    const char *defaultFileName = "en-US.json"; // add the default file name
-    ListNode *defaultFile = new ListNode();
-    if (defaultFile == nullptr) {
-        // release the list which stores atrget file name, the fileList_ release in destructor or next used time
-        ClearNode(languageFile);
-        ClearNode(countryFile);
-        return false;
-    }
-    defaultFile->value = SubStr(defaultFileName, 0, strlen(defaultFileName));
-    totalFiles_++;
-    MergeList(countryFile, defaultFile);
-    MergeList(languageFile, countryFile);
-    MergeList(fileList_, languageFile);
-    return true;
-}
-
-#if (!defined(_WIN32) && !defined(_WIN64))
-bool CJSONParser::ReadFile(ListNode *&languageFile, ListNode *&countryFile)
-{
-    void *files = FileOpenDir(filePath_);
-    FileDirentInfo info;
-    if (files == nullptr) {
-        return false;
-    }
-    bool result = true;
-    while ((FileReadDir(files, &info) == 0) && (totalFiles_ < UINT8_MAX)) {
-        if ((info.name == nullptr) || (strncmp(info.name, language_, strlen(language_)) != 0)) {
-            continue;
-        }
-        size_t infoNameLen = strlen(info.name);
-        if (infoNameLen >= NAME_LENGTH_MAX) {
-            break;
-        }
-        char *value = static_cast<char *>(ace_malloc(infoNameLen + 1));
-        if (value == nullptr) {
-            break;
-        }
-        errno_t error = strcpy_s(value, infoNameLen + 1, info.name);
-        if (error != 0) {
-            ace_free(value);
-            value = nullptr;
-            break;
-        }
-        bool check = true;
-        int8_t fileType = CompareFileName(info.name);
-        if (fileType == COUNTRY) {
-            check = AddNode(fileList_, value);
-        } else if (fileType == LANG) {
-            check = AddNode(languageFile, value);
-        } else if (fileType == OTHERCOUNTRY) {
-            check = AddNode(countryFile, value);
-        } else {
-            ace_free(value);
-            value = nullptr;
-            result = false; // the country and lang list would be release if return false
-            break;
-        }
-        if (!check) {
-            ace_free(value);
-            value = nullptr;
-        } else {
-            totalFiles_++;
-        }
-    }
-    FileCloseDir(files);
-    return result;
-}
-#endif
-
-#ifdef LOCALIZATION_PLURAL
-char *CJSONParser::FillPlaceholder(char *format, jerry_value_t arg, jerry_length_t num, bool isPlural)
-#else
-char *CJSONParser::FillPlaceholder(const char *format, jerry_value_t arg, jerry_length_t num)
-#endif // LOCALIZATION_PLURAL
+char *CJSONParser::FillPlaceholder(const char *format, jerry_value_t arg, jerry_length_t num, bool isPlural)
 {
     if (format == nullptr) {
         return nullptr;
     }
-#ifdef LOCALIZATION_PLURAL
     if (isPlural) {
+#ifdef LOCALIZATION_PLURAL
         format = GetPluralValue(format, arg);
         if (format == nullptr) {
             return nullptr;
         }
-    }
 #endif
+    }
     ListNode *values = nullptr; // store the value after split.
 #ifdef LOCALIZATION_PLURAL
     uint8_t length = FormatString(format, arg, values, isPlural, num);
@@ -234,20 +113,20 @@ uint8_t CJSONParser::FormatString(const char *format, jerry_value_t arg, ListNod
         leftIndex++;
         index = IndexOf(format, rightDelemeter_, leftIndex); // get the index of '}'
         if (index > 0 && num > 1) {
-            char *content = nullptr;
-            content = SubStr(format, leftIndex, index - leftIndex);
+            char *content = SubStr(format, leftIndex, index - leftIndex);
 #ifdef LOCALIZATION_PLURAL
             char *contentValue = GetParamValue(content, arg, isPlural);
 #else
             char *contentValue = GetParamValue(content, arg);
 #endif // LOCALIZATION_PLURAL
+            ACE_FREE(content);
             if (AddNode(values, contentValue)) {
                 length++;
             } else {
                 ACE_FREE(contentValue);
             }
         }
-        if ((index > 0) && (index < strlen(format))) {
+        if ((index > 0) && (static_cast<size_t>(index) < strlen(format))) {
             index++; // move the index '}' to the next char
         } else {
             // add the remain character to node.eg.the value is {count}aa, add the last aa to the node
@@ -260,7 +139,7 @@ uint8_t CJSONParser::FormatString(const char *format, jerry_value_t arg, ListNod
         }
         leftIndex = IndexOf(format, leftDelemeter_, index);
     }
-    if (leftIndex < 0 && (index < strlen(format))) {
+    if (leftIndex < 0 && (static_cast<size_t>(index) < strlen(format))) {
         char* currentVal = SubStr(format, index, strlen(format) - index);
         if (AddNode(values, currentVal)) {
             length++;
@@ -294,11 +173,6 @@ char *CJSONParser::GetPluralValue(char *value, jerry_value_t param)
 }
 #endif // LOCALIZATION_PLURAL
 
-void CJSONParser::ResetIndex()
-{
-    curFileIndex_ = 0;
-}
-
 bool CJSONParser::AddNode(ListNode *&head, char *current)
 {
     if (current == nullptr || strlen(current) == 0) {
@@ -349,22 +223,20 @@ char *CJSONParser::ToString(ListNode *node, uint8_t length)
     uint8_t index = 0;
     uint16_t strLength = 0; // the length of result
     while (node != nullptr) {
-        if ((length - index - 1 >= 0) && (node->value != nullptr)) {
-            if (strLength > (UINT16_MAX - (uint16_t)(strlen(node->value)))) {
+        if ((length - index > 0) && (node->value != nullptr)) {
+            size_t valueLen = strlen(node->value);
+            if ((valueLen > (MAX_VALUE_LEN - 1)) || (strLength > (MAX_VALUE_LEN - 1)) ||
+                (strLength + valueLen > (MAX_VALUE_LEN - 1))) {
                 ACE_FREE(temp);
                 return nullptr;
             }
             temp[length - 1 - index] = node->value;
-            strLength += strlen(node->value);
+            strLength += valueLen;
         }
         node = node->next;
         index++;
     }
-    if (strLength == UINT16_MAX) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "the str length is too long");
-        ACE_FREE(temp);
-        return nullptr;
-    }
+    // the strLength is no more than maxValueLen_ - 1
     strLength++;
     char *result = static_cast<char *>(ace_malloc(strLength));
     if (result == nullptr) {
@@ -396,7 +268,7 @@ char *CJSONParser::SubStr(const char *src, size_t start, size_t length)
     if (src == nullptr || start >= strlen(src)) {
         return nullptr;
     }
-    if (length >= UINT8_MAX) {
+    if (length > (MAX_VALUE_LEN - 1)) {
         HILOG_ERROR(HILOG_MODULE_ACE, "the length is too long");
         return nullptr;
     }
@@ -416,143 +288,298 @@ char *CJSONParser::SubStr(const char *src, size_t start, size_t length)
     return result;
 }
 
-int8_t CJSONParser::CompareFileName(const char *name)
+CJSONParser::LanguageState CJSONParser::ChangeLanguage()
 {
-    if ((name == nullptr) || (language_ == nullptr)) {
-        return ERRORCODE;
+    char *currentLanguage = static_cast<char *>(ace_malloc(MAX_LANGUAGE_LENGTH));
+    char *currentOrigion = static_cast<char *>(ace_malloc(MAX_REGION_LENGTH));
+    if ((currentLanguage == nullptr) || (currentOrigion == nullptr)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "malloc system language info failed");
+        ACE_FREE(currentLanguage);
+        ACE_FREE(currentOrigion);
+        return LanguageState::LANGUAGE_FAIL;
     }
-    size_t languageLen = strlen(language_);
-    if (languageLen >= UINT8_MAX) {
-        return ERRORCODE;
+    int langRet = GLOBAL_GetLanguage(currentLanguage, MAX_LANGUAGE_LENGTH);
+    int regionRet = GLOBAL_GetRegion(currentOrigion, MAX_REGION_LENGTH);
+    LanguageState result = LanguageState::LANGUAGE_CHANGED;
+    if ((langRet != 0) || (regionRet != 0)) {
+        result = LanguageState::LANGUAGE_FAIL;
     }
-    const char delemeter = '-';
-    const int countryLen = 2;
-    size_t minLen = languageLen + 1 + countryLen; // the length of .json
-    if ((strlen(name) <= minLen) || (name[languageLen] != delemeter)) {
-        return 1;
-    } else {
-        int result = COUNTRY;
-        if (countries_ == nullptr) {
-            return ERRORCODE;
-        }
-        char *countryName = static_cast<char *>(ace_malloc(countryLen + 1));
-        if (countryName == nullptr) {
-            return ERRORCODE;
-        }
-        for (int i = 0; i < countryLen; i++) {
-            countryName[i] = name[languageLen + 1 + i];
-        }
-        countryName[countryLen] = '\0';
-        if (strstr(countries_, countryName) == nullptr) {
-            const char startIndex = 'A';
-            int index = countryName[0] - startIndex;
-            const char * const countries = GetCountries(index);
-            if ((countries != nullptr) && (IndexOf(const_cast<char *>(countries), countryName[1], 0) > 0)) {
-                result = OTHERCOUNTRY;
-            } else {
-                result = LANG;
-            }
-        }
-        ace_free(countryName);
-        countryName = nullptr;
+    if ((language_ != nullptr) && (strcmp(currentLanguage, language_) == 0) &&
+        (countries_ != nullptr) && (strcmp(currentOrigion, countries_) == 0)) {
+        result = LanguageState::LANGUAGE_NOT_CHANGE;
+    }
+    if ((result == LanguageState::LANGUAGE_NOT_CHANGE) || (result == LanguageState::LANGUAGE_FAIL)) {
+        ace_free(currentOrigion);
+        currentOrigion = nullptr;
+        ace_free(currentLanguage);
+        currentLanguage = nullptr;
         return result;
     }
-}
-
-void CJSONParser::SetLanguage()
-{
-    char* currentLanguage = static_cast<char*>(ace_malloc(MAX_LANGUAGE_LENGTH));
-    if (currentLanguage == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "malloc language failed\n");
-        return;
-    }
-    if (GLOBAL_GetLanguage(currentLanguage, MAX_LANGUAGE_LENGTH) != 0) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "get language failed\n");
-        ace_free(currentLanguage);
-        currentLanguage = nullptr;
-        return;
-    }
-
-    char* currentOrigion = static_cast<char*>(ace_malloc(MAX_REGION_LENGTH));
-    if (currentOrigion == nullptr) {
-        ace_free(currentLanguage);
-        currentLanguage = nullptr;
-        return;
-    }
-    if (GLOBAL_GetRegion(currentOrigion, MAX_REGION_LENGTH) != 0) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "get origion failed");
-        ace_free(currentOrigion);
-        currentOrigion = nullptr;
-        ace_free(currentLanguage);
-        currentLanguage = nullptr;
-        return;
-    }
-    if ((language_ != nullptr) && (strcmp(currentLanguage, language_) == 0)
-        && (countries_ != nullptr) && (strcmp(currentOrigion, countries_) == 0)) {
-        ace_free(currentLanguage);
-        currentLanguage = nullptr;
-        ace_free(currentOrigion);
-        currentOrigion = nullptr;
-        return;
-    }
     ACE_FREE(language_);
     language_ = currentLanguage;
     ACE_FREE(countries_);
     countries_ = currentOrigion;
-    if (!GetFiles()) { // get the files whose name begins with the local string
-        return;
-    }
-    curFileIndex_ = 0;
+    return LanguageState::LANGUAGE_CHANGED;
 }
 
-#if (defined(_WIN32) || (defined(_WIN64)))
-bool CJSONParser::ReadWinFile(ListNode *&languageFile, ListNode *&countryFile)
+bool CJSONParser::ChangeLanguageFileName()
 {
-    _finddata_t file;
-    intptr_t opendir;
-    const char * const match = "*.*";
-    char* fileDir = RelocateResourceFilePath(filePath_, match);
-    if (fileDir == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "get localization path failed");
+    if ((language_ == nullptr) || (countries_ == nullptr)) {
+        if ((languageFile_ != nullptr) && (!strcmp(languageFile_, "en-US.json"))) {
+            return false;
+        }
+        languageFile_ = StringUtil::Copy("en-US.json");
+        return true;
+    }
+    uint8_t addedLen = 7; // the length of '-', ".json" and '\0'
+    uint8_t langLen = strlen(language_);
+    size_t fileLen = langLen + strlen(countries_) + addedLen;
+    char *languageFile = StringUtil::Malloc(fileLen);
+    if (languageFile ==  nullptr) {
         return false;
     }
-    if ((opendir = _findfirst(fileDir, &file)) == -1) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "file not defined");
-        ACE_FREE(fileDir);
+    errno_t error = strcpy_s(languageFile, fileLen, language_);
+    languageFile[langLen] = '-';
+    languageFile[langLen + 1] = '\0';
+    error += strcat_s(languageFile, fileLen, countries_);
+    error += strcat_s(languageFile, fileLen, ".json");
+    if (error > 0) {
+        ace_free(languageFile);
+        languageFile = nullptr;
         return false;
     }
+    if ((languageFile_ != nullptr) && (!strcmp(languageFile, languageFile_))) {
+        ace_free(languageFile);
+        languageFile = nullptr;
+    } else {
+        ACE_FREE(languageFile_);
+        languageFile_ = languageFile;
+    }
+    return true;
+}
+
+bool CJSONParser::CacheFile()
+{
+    if (!ChangeLanguageFileName()) {
+        return true;
+    }
+    isCached_ = false;
+    usedOffset_ = sizeof(uint32_t) * MAX_KEY_NUM;
+    if (!isAllocated_) {
+        return false;
+    }
+    if (memset_s(reinterpret_cast<void *>(startPos_), usedOffset_, 0, usedOffset_) != EOK) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "initial psram failed");
+        return false;
+    }
+    if (memset_s(reinterpret_cast<void *>(startPos_ + usedOffset_), LOCALIZATION_SIZE - usedOffset_,
+        '\0', LOCALIZATION_SIZE - usedOffset_) != EOK) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "init cache content failed");
+        return false;
+    }
+    // set the keyIndex 0
+    for (int i = 0; i < MAX_KEY_NUM; i++) {
+        uint32_t *index = reinterpret_cast<uint32_t *>(startPos_ + i * sizeof(uint32_t));
+        *index = 0;
+    }
+    if (languageFile_ == nullptr) {
+        // cache the default file en-US.json
+        languageFile_ = StringUtil::Copy("en-US.json");
+    }
+    char *content = ReadJSFile(filePath_, languageFile_);
+    if (content == nullptr) {
+        return false;
+    }
+    cJSON *json = cJSON_Parse(content);
+    ace_free(content);
+    content = nullptr;
+    if (json == nullptr) {
+        return false;
+    }
+    isCached_ = CacheValue(nullptr, *json);
+    cJSON_Delete(json);
+    json = nullptr;
+    return isCached_;
+}
+
+char *CJSONParser::GetMergeKey(const char *key, const char *addKey)
+{
+    if (addKey == nullptr) {
+        return const_cast<char *>(key);
+    }
+    uint16_t addKeyLen = strlen(addKey);
+    uint32_t preLen = (key == nullptr) ? 0 : strlen(key);
+    const uint8_t addedLen = 2;
+    uint16_t mergeLen = preLen + addKeyLen + addedLen;
+    char *mergeKey = reinterpret_cast<char *>(ace_malloc(mergeLen));
+    if (mergeKey == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "merge key failed");
+        return nullptr;
+    }
+    if (key != nullptr) {
+        if ((strcpy_s(mergeKey, mergeLen, key) != EOK) || (strcat_s(mergeKey, mergeLen, ".") != EOK) ||
+            (strcat_s(mergeKey, mergeLen, addKey) != EOK)) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "copy preKey failed");
+            ace_free(mergeKey);
+            return nullptr;
+        }
+    } else {
+        if (strcpy_s(mergeKey, mergeLen, addKey)) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "copy json key failed\n");
+            ace_free(mergeKey);
+            return nullptr;
+        }
+    }
+    return mergeKey;
+}
+
+bool CJSONParser::PutNumOrStrValue(const char *key, cJSON item)
+{
+    if (key == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the json key is nullptr");
+        return false;
+    }
+    uint32_t index = FNVHash(key);
+    uint32_t *valueIndex = reinterpret_cast<uint32_t *>(startPos_ + index * sizeof(uint32_t));
+    if (valueIndex == nullptr) {
+        return false;
+    }
+    if (*valueIndex != 0) {
+        // the hash value is conflict
+        Node *currentNode = reinterpret_cast<Node *>(startPos_ + (*valueIndex));
+        while ((currentNode != nullptr) && (currentNode->nextIndex != 0)) {
+            currentNode = reinterpret_cast<Node *>(startPos_ + currentNode->nextIndex);
+        }
+        if (currentNode != nullptr) {
+            currentNode->nextIndex = usedOffset_;
+        }
+    } else {
+        *valueIndex = usedOffset_;
+    }
+    Node *node = reinterpret_cast<Node *>(startPos_ + usedOffset_);
+    usedOffset_ = GetUseLen(usedOffset_ + sizeof (Node));
+    if (usedOffset_ == 0) {
+        return false;
+    }
+    node->pathIndex = usedOffset_;
+    if (!CacheStrValue(key)) {
+        return false;
+    }
+    if (item.type == cJSON_Number) {
+        node->isNumber = true;
+        node->valueIndex = item.valuedouble;
+    }
+    node->valueIndex = usedOffset_;
+    return CacheStrValue(item.valuestring);
+}
+
+bool CJSONParser::CacheStrValue(const char *value)
+{
+    if (strcpy_s(reinterpret_cast<char *>(startPos_ + usedOffset_), LOCALIZATION_SIZE - usedOffset_, value)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "copy value failed");
+        return false;
+    }
+    usedOffset_ = GetUseLen(usedOffset_ + strlen(value) + 1);
+    if (usedOffset_ == 0) {
+        return false;
+    }
+    return true;
+}
+
+bool CJSONParser::CacheValue(const char *key, cJSON item)
+{
+    char *mergeKey = GetMergeKey(const_cast<char *>(key), item.string);
     bool result = true;
-    // get the file start with the split locale string, for example, en-US_XXX.json
-    while ((_findnext(opendir, &file) == 0) && (totalFiles_ < UINT8_MAX)) {
-        // if the file name is not start with the language , go to the next file
-        if (strncmp(file.name, language_, strlen(language_)) != 0) {
-            continue;
+    if ((item.type == cJSON_Number) || (item.type == cJSON_String)) {
+        result = PutNumOrStrValue(mergeKey, item);
+    } else if (item.type == cJSON_Object) {
+        if ((cJSON_IsNull(item.child)) || (!CacheValue(mergeKey, *item.child))) {
+            result = false;
         }
-        char *value = SubStr(file.name, 0, strlen(file.name));
-        bool check = true;
-        int8_t fileType = CompareFileName(file.name);
-        if (fileType == COUNTRY) {
-            check = AddNode(fileList_, value);
-        } else if (fileType == LANG) {
-            check = AddNode(languageFile, value);
-        } else if (fileType == OTHERCOUNTRY) {
-            check = AddNode(countryFile, value);
+    } else {
+        // if the object is array, skip it. find the array value through read json file
+    }
+    ACE_FREE(mergeKey);
+    if (!result) {
+        return false;
+    }
+    return (item.next == nullptr) || (CacheValue(key, *item.next));
+}
+
+jerry_value_t CJSONParser::GetValueFromFile(const char *key, jerry_value_t args, jerry_size_t argsNum)
+{
+    HILOG_WARN(HILOG_MODULE_ACE, "get value from cache failed");
+    ListNode *keys = nullptr;
+    uint8_t keyCount = Split(key, '.', *&keys);
+    const char *defaultFile = "en-US.json";
+    char *content = ReadJSFile(filePath_, defaultFile);
+    cJSON *fileJson = cJSON_Parse(content);
+    ACE_FREE(content);
+    cJSON *curJsonItem = fileJson;
+    uint8_t curKeyIndex = 0;
+    do {
+        // get the current splited key
+        char *message = CJSONParser::GetNode(keys, keyCount - curKeyIndex);
+        curJsonItem = cJSON_GetObjectItem(curJsonItem, message);
+        curKeyIndex++;
+    } while (!(curKeyIndex == keyCount || (curJsonItem == nullptr)));
+    ClearNode(keys);
+    jerry_value_t result = UNDEFINED;
+    if (curJsonItem == nullptr) {
+        result = jerry_create_string(reinterpret_cast<const jerry_char_t *>(key));
+    } else {
+        if (cJSON_IsNumber(curJsonItem)) {
+            result = jerry_create_number(curJsonItem->valuedouble);
         } else {
+            char *value = FillPlaceholder(curJsonItem->valuestring, args, argsNum);
+            result = jerry_create_string(reinterpret_cast<jerry_char_t *>(value));
             ACE_FREE(value);
-            result = false; // the country and lang list would be release if return false
-            break;
-        }
-        if (!check) {
-            ACE_FREE(value);
-        } else {
-            totalFiles_++;
         }
     }
-    _findclose(opendir);
-    ACE_FREE(fileDir);
+    cJSON_Delete(fileJson);
+    fileJson = nullptr;
     return result;
 }
-#endif
+
+jerry_value_t CJSONParser::GetValue(const char *key, const jerry_value_t args[], const jerry_size_t argsNum)
+{
+    char *result = nullptr;
+    jerry_value_t arg = (argsNum > 1) ? args[1] : UNDEFINED;
+    if (isCached_) {
+        Node *node = GetValueFromCache(key);
+        if (node != nullptr) {
+            if (node->isNumber) {
+                return jerry_create_number(node->valueIndex);
+            } else {
+                result = reinterpret_cast<char *>(startPos_ + (uint32_t)(node->valueIndex));
+                result = FillPlaceholder(result, arg, argsNum);
+                jerry_value_t resultProp = jerry_create_string(reinterpret_cast<jerry_char_t *>(result));
+                ACE_FREE(result);
+                return resultProp;
+            }
+        }
+    }
+    return GetValueFromFile(key, arg, argsNum);
+}
+
+CJSONParser::Node *CJSONParser::GetValueFromCache(const char *key)
+{
+    uint16_t index = FNVHash(key);
+    uint32_t *valueIndex = reinterpret_cast<uint32_t *>(startPos_ + index * sizeof (uint32_t));
+    while ((valueIndex != nullptr) && (*valueIndex != 0)) {
+        Node *node = reinterpret_cast<Node *>(startPos_ + (*valueIndex));
+        if (node == nullptr) {
+            return nullptr;
+        }
+        char *nodeKey = reinterpret_cast<char *>(startPos_ + node->pathIndex);
+        if ((nodeKey != nullptr) && (!strcmp(key, nodeKey))) {
+            return node;
+        } else {
+            *valueIndex = node->nextIndex;
+        }
+    }
+    return nullptr;
+}
 
 uint8_t CJSONParser::Split(const char *target, char delemeter, ListNode *&node)
 {
@@ -575,7 +602,7 @@ uint8_t CJSONParser::Split(const char *target, char delemeter, ListNode *&node)
         startPos = pos + 1;
         pos = IndexOf(target, delemeter, startPos);
     }
-    if ((startPos != -1) && (startPos < strlen(target))) {
+    if ((startPos != -1) && (static_cast<size_t>(startPos) < strlen(target))) {
         current = SubStr(target, startPos, strlen(target) - startPos);
         if (AddNode(node, current)) {
             nodeCount++;
@@ -592,7 +619,7 @@ int CJSONParser::IndexOf(const char *string, char delemeter, int index)
     if (string == nullptr) {
         return -1;
     }
-    if ((index >= strlen(string)) || (index < 0) || (strlen(string) >= INT8_MAX)) {
+    if ((index < 0) || (strlen(string) >= INT8_MAX) || (static_cast<size_t>(index) >= strlen(string))) {
         return -1;
     }
     int length = strlen(string);
@@ -603,7 +630,7 @@ int CJSONParser::IndexOf(const char *string, char delemeter, int index)
         }
         i++;
     } while (i < length);
-    // if the delemeter is not find return the length of string
+    // if the delemeter is not find return -1
     return -1;
 }
 
@@ -612,6 +639,9 @@ char *CJSONParser::GetParamValue(const char *attrName, jerry_value_t param, bool
 #else
 char *CJSONParser::GetParamValue(const char *attrName, jerry_value_t param)
 {
+    if (attrName == nullptr) {
+        return nullptr;
+    }
     char *contentValue = nullptr; // store the value defined in param
     uint16_t contentLen = 0;
 #ifdef LOCALIZATION_PLURAL
@@ -620,7 +650,7 @@ char *CJSONParser::GetParamValue(const char *attrName, jerry_value_t param)
     }
 #else
     jerry_value_t propName = jerry_create_string(reinterpret_cast<jerry_char_t const *>(attrName));
-    if (JerryHasProperty(param, propName)) { // get the placehoder {...} value defined in param
+    if (JerryHasProperty(param, propName)) { // get the placeholder {...} value defined in param
         jerry_value_t paramValue = jerry_get_property(param, propName);
         // the contentValue would be released in clearNode values
         contentValue = MallocStringOf(paramValue, &contentLen);
@@ -631,63 +661,11 @@ char *CJSONParser::GetParamValue(const char *attrName, jerry_value_t param)
     // if the length of attrVal is 0, the node wouldn't add to the list
     if ((contentValue != nullptr) && contentLen != 0) {
         return contentValue;
-    } else {
-        ACE_FREE(contentValue); // if the contentValue is \0
-        return nullptr;
     }
+    ACE_FREE(contentValue); // if the contentValue is \0
+    return nullptr;
 }
 #endif
-
-void CJSONParser::SortFileName(ListNode *node)
-{
-    if (node == nullptr || (node->next == nullptr)) {
-        return;
-    }
-    ListNode *current = node;
-    ListNode *compare = nullptr;
-    const int suffixLen = 5;
-    while (current != nullptr) {
-        compare = current->next;
-        int currentLen = strlen(current->value);
-        while (compare != nullptr) {
-            int min = (currentLen < strlen(compare->value)) ? currentLen : strlen(compare->value);
-            int compareResult = strncmp(compare->value, current->value, min - suffixLen);
-            // when the file name is zh-CN.json and zh-CN-1.json, the sort result is zh-CN.json,zh-CN-1.json
-            if ((compareResult < 0) || ((compareResult == 0) && (min != currentLen))) {
-                char *value = compare->value;
-                compare->value = current->value;
-                current->value = value;
-            }
-            compare = compare->next;
-        }
-        current = current->next;
-    }
-}
-
-const char *CJSONParser::GetCountries(int8_t index)
-{
-    if ((index >= maxLen_) || (index < 0)) {
-        return nullptr;
-    }
-    return allCountries_[index];
-}
-
-void CJSONParser::MergeList(ListNode *&destination, ListNode *source)
-{
-    // merge two list
-    if (source == nullptr) {
-        return;
-    }
-    if (destination == nullptr) {
-        destination = source;
-        return;
-    }
-    ListNode *current = destination;
-    while (current->next != nullptr) {
-        current = current->next;
-    }
-    current->next = source;
-}
 } // namespace ACELite
 } // namespace OHOS
 #endif
diff --git a/frameworks/src/core/modules/presets/cjson_parser.h b/frameworks/src/core/modules/presets/cjson_parser.h
new file mode 100644
index 0000000..57f8257
--- /dev/null
+++ b/frameworks/src/core/modules/presets/cjson_parser.h
@@ -0,0 +1,232 @@
+/*
+ * Copyright (c) 2020-2021 Huawei Device 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.
+ */
+#ifndef OHOS_ACELITE_CJSON_PARSER_H
+#define OHOS_ACELITE_CJSON_PARSER_H
+#include "acelite_config.h"
+
+#ifdef FEATURE_LOCALIZATION_MODULE
+#include <cJSON.h>
+#include <jerryscript.h>
+#ifdef __LITEOS_A__
+#include "dirent.h"
+#include "unistd.h"
+#endif
+#include "ace_mem_base.h"
+#include "js_app_context.h"
+#include "non_copyable.h"
+
+namespace OHOS {
+namespace ACELite {
+class CJSONParser final : public MemoryHeap {
+public:
+    ACE_DISALLOW_COPY_AND_MOVE(CJSONParser);
+    struct ListNode : public MemoryHeap {
+        char *value = nullptr;
+        ListNode *next = nullptr;
+    };
+
+    // can't create the node object.it is used to store the json node is psram/ram
+    struct Node {
+        double valueIndex = 0;
+        uint32_t pathIndex = 0; // the path value index in psram
+        uint16_t nextIndex = 0; // the conflicy Node index in array
+        bool isNumber = false;
+    };
+
+    enum LanguageState : uint8_t {
+        LANGUAGE_FAIL,
+        LANGUAGE_NOT_CHANGE,
+        LANGUAGE_CHANGED
+    };
+
+    CJSONParser();
+
+    ~CJSONParser()
+    {
+        void *value = reinterpret_cast<void *>(startPos_);
+        ACE_FREE(value);
+        ACE_FREE(countries_);
+        ACE_FREE(language_);
+        ACE_FREE(filePath_);
+        ACE_FREE(languageFile_);
+    }
+
+    /**
+     * @brief: replace the placeholder in result with the data defined by user
+     * if plural is true, it will replace the number in placeholder,
+     * replace the same name in js object.
+     */
+    char *FillPlaceholder(const char *format, jerry_value_t arg, jerry_length_t num, bool isPlural = false);
+
+    /**
+     * @brief: init localization, get the resource file path
+     * and get the localization cache ram
+     */
+    bool Init();
+
+    /**
+     * @brief: merge string destination and resource, save the merge result in destination
+     * if check is true, it will free destination string
+     */
+    char *SubStr(const char *src, size_t start, size_t length);
+
+    /**
+     * @brief: split the string by delemeter and save the split result in node
+     *
+     * @return the length of node
+     */
+    uint8_t Split(const char *target, char delemeter, ListNode *&node);
+
+    static bool AddNode(ListNode *&head, char *current);
+    static char *GetNode(ListNode *node, int index);
+    static void ClearNode(ListNode *&node);
+    static char *ToString(ListNode *node, uint8_t length);
+
+    /**
+     * @brief get localization format result
+     * @param key: the json path
+     * @param args: the args defined the value of placeholder
+     * @return the JS value of localization result
+     */
+    jerry_value_t GetValue(const char *key, const jerry_value_t args[], jerry_size_t argsNum);
+
+    /**
+     * @brief judge the system language and origion is changed
+     * @return 1: the system language is changed
+     *         0: the system language
+     *         -1: get system language failed
+     */
+    LanguageState ChangeLanguage();
+
+    /**
+     * @brief cache the frist file in fileList to PSRAM/RAM
+     * @return the cache result, true: cache file success
+     * fail: the fileList is null or the file is too large
+     */
+    bool CacheFile();
+
+private:
+    enum conValue {
+        PRIME_OFFSET_1 = 3,
+        PRIME_OFFSET_2 = 5,
+        PRIME_OFFSET_3 = 7,
+        PRIME_OFFSET_4 = 13,
+        PRIME_OFFSET_5 = 17,
+        MAX_KEY_NUM = 500,
+        MAX_VALUE_LEN = 1024,
+        LOCALIZATION_SIZE = 10240,
+        NFV_PRIME = 16777619
+    };
+
+    /**
+     * @Brief: get the position of delemeter after index
+     * @return if the index is upper than the length of string, return -1
+     * else if the index is not defined in string, return the length, else return the position of it
+     */
+    int IndexOf(const char *string, char delemeter, int index);
+
+    /**
+     * @Brief: split the string defined in value by '|', and get value in the split string
+     * For example: the string is car|cars, if the value of param is odd, assign value car,else cars
+     */
+#ifdef LOCALIZATION_PLURAL
+    char *GetPluralValue(char *value, jerry_value_t param);
+    uint8_t FormatString(const char *format, jerry_value_t arg, ListNode *&node, bool isPlural, jerry_value_t num);
+    /**
+     * @brief: get the value defined in param
+     * @param: attrName:the attribute name in param, for example "name"
+     *         param: the object defined attrName, for example {"name":"Jane"}
+     * @return: the value in param
+     */
+    char *GetParamValue(const char *attrName, jerry_value_t param, bool isPlural);
+#else
+    uint8_t FormatString(const char *format, jerry_value_t arg, ListNode *&node, jerry_value_t num);
+    char *GetParamValue(const char *attrName, jerry_value_t param);
+#endif
+
+    char* GetMergeKey(const char *key, const char *addKey);
+
+    bool CacheValue(const char *key, cJSON item);
+
+    bool PutNumOrStrValue(const char *key, cJSON item);
+
+    bool CacheStrValue(const char *value);
+
+    /**
+     * @brief get value from file in fileList
+     * @param key JSON path, args: the value to replace the placeholder, argsNum: the num of args
+     * @param fileJSON the jsonObject convert from file
+     * @return the js value of target key
+     */
+    jerry_value_t GetValueFromFile(const char *key, jerry_value_t args, jerry_size_t argsNum);
+
+    /**
+     * @brief get 4-byte aligned offset
+     * @param addr the used offset
+     * @return the nearest 4-byte aligned offset
+     */
+    uint32_t GetUseLen(uint32_t usedOffset)
+    {
+        const uint8_t align = 2;
+        uint32_t len = usedOffset + (1 << align);
+        len = (len >> align) << align;
+        if (len > LOCALIZATION_SIZE) {
+            isCached_ = false; // cache json file failed
+            return 0;
+        }
+        return len;
+    }
+
+    /**
+     * @brief get the string hash value.the hash algorithm is NFV-1a hash
+     * the Algorithm URL is https://en.wikipedia.org/wiki/Fowler%E2%80%93Noll%E2%80%93Vo_hash_function#FNV-1_hash
+     * @param key the string need to hash
+     * @return the hash result which is the index array number
+     */
+    uint16_t FNVHash(const char *key)
+    {
+        uint64_t hash = 2166136261;
+        uint32_t len = strlen(key);
+        for (uint8_t i = 0; i < len; i++) {
+            uint8_t keyVal = key[i];
+            hash = (hash ^ keyVal) * NFV_PRIME;
+        }
+        hash += hash << PRIME_OFFSET_4;
+        hash ^= hash >> PRIME_OFFSET_3;
+        hash += hash << PRIME_OFFSET_1;
+        hash ^= hash >> PRIME_OFFSET_5;
+        hash += hash << PRIME_OFFSET_2;
+        return hash % MAX_KEY_NUM;
+    }
+
+    Node *GetValueFromCache(const char *key);
+
+    bool ChangeLanguageFileName();
+
+    bool isCached_;
+    bool isAllocated_;
+    char leftDelemeter_;
+    char rightDelemeter_;
+    uint32_t usedOffset_;
+    uintptr_t startPos_;
+    char *countries_; // the current country and origion
+    char *language_;  // the current system language
+    char *filePath_;
+    char *languageFile_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // FEATURE_LOCALIZATION_MODULE
+#endif // OHOS_ACELITE_CJSON_PARSER_H
diff --git a/src/core/modules/presets/console_log_impl.cpp b/frameworks/src/core/modules/presets/console_log_impl.cpp
old mode 100755
new mode 100644
similarity index 93%
rename from src/core/modules/presets/console_log_impl.cpp
rename to frameworks/src/core/modules/presets/console_log_impl.cpp
index 802ac40..5c69650
--- a/src/core/modules/presets/console_log_impl.cpp
+++ b/frameworks/src/core/modules/presets/console_log_impl.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -17,7 +17,7 @@
 #if ENABLED(CONSOLE_LOG_OUTPUT)
 #include "js_app_environment.h"
 #ifdef FEATURE_USER_MC_LOG_PRINTF
-#include "log_js.h" // mc js console log header
+#include "product_adapter.h"
 #endif // FEATURE_USER_MC_LOG_PRINTF
 #ifdef FEATURE_ACELITE_HI_LOG_PRINTF
 #undef LOG_DOMAIN
@@ -161,7 +161,7 @@ void LogChar(char c, const LogLevel logLevel, bool endFlag)
     logBuffer[logBufferIndex++] = c;
     if ((logBufferIndex == (LOG_BUFFER_SIZE - 1)) || (c == '\n')) {
         if ((c == '\n') && (logBufferIndex > 0)) {
-            logBufferIndex--; // will trace out line seperator after print the content out
+            logBufferIndex--; // will trace out line separator after print the content out
         }
         logBuffer[logBufferIndex] = '\0';
         Output(logLevel, logBuffer, logBufferIndex);
@@ -170,7 +170,7 @@ void LogChar(char c, const LogLevel logLevel, bool endFlag)
             // this is the newline during the console log, need to append the loglevel prefix,
             // example: console.log("aa\nbb");
 #if !defined(FEATURE_ACELITE_HI_LOG_PRINTF) && !defined(FEATURE_USER_MC_LOG_PRINTF)
-            Output(logLevel, "\n", 1); // hilog will trace our the line seperator directly
+            Output(logLevel, "\n", 1); // hilog will trace our the line separator directly
 #endif
             if (!endFlag) {
                 LogOutLevel(logLevel);
@@ -210,22 +210,20 @@ static void OutputToHiLog(const LogLevel logLevel, const char * const str)
 {
     switch (logLevel) {
         case LOG_LEVEL_ERR:
-            HILOG_ERROR_JS(str);
+            ProductAdapter::OutputJSConsoleLog((uint8_t)(LOG_LEVEL_ERR), str);
             break;
         case LOG_LEVEL_WARN:
-            HILOG_WARN_JS(str);
+            ProductAdapter::OutputJSConsoleLog((uint8_t)(LOG_LEVEL_WARN), str);
             break;
         case LOG_LEVEL_INFO:
-            HILOG_INFO_JS(str);
+            ProductAdapter::OutputJSConsoleLog((uint8_t)(LOG_LEVEL_INFO), str);
             break;
         case LOG_LEVEL_DEBUG:
-            HILOG_DEBUG_JS(str);
-            break;
+            // fall through
         case LOG_LEVEL_TRACE:
-            HILOG_INFO_JS(str);
-            break;
+            // fall through
         case LOG_LEVEL_NONE:
-            HILOG_DEBUG_JS(str);
+            ProductAdapter::OutputJSConsoleLog((uint8_t)(LOG_LEVEL_DEBUG), str);
             break;
         default:
             break;
diff --git a/src/core/modules/presets/console_log_impl.h b/frameworks/src/core/modules/presets/console_log_impl.h
old mode 100755
new mode 100644
similarity index 87%
rename from src/core/modules/presets/console_log_impl.h
rename to frameworks/src/core/modules/presets/console_log_impl.h
index 7f44258..47892a1
--- a/src/core/modules/presets/console_log_impl.h
+++ b/frameworks/src/core/modules/presets/console_log_impl.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -28,14 +28,14 @@ namespace ACELite {
 /**
  * The log level definations.
  */
-enum LogLevel {
-    LOG_LEVEL_FATAL,   // fatal, no console.fatal
-    LOG_LEVEL_ERR,     // console.error
-    LOG_LEVEL_WARN,    // console.warn
-    LOG_LEVEL_INFO,    // console.info
-    LOG_LEVEL_DEBUG,   // console.debug
-    LOG_LEVEL_TRACE,   // console.trace
-    LOG_LEVEL_NONE,    // console.log
+enum LogLevel : uint8_t {
+    LOG_LEVEL_NONE = 0,    // console.log
+    LOG_LEVEL_DEBUG = 1,   // console.debug
+    LOG_LEVEL_INFO = 2,    // console.info
+    LOG_LEVEL_WARN = 3,    // console.warn
+    LOG_LEVEL_ERR = 4,     // console.error
+    LOG_LEVEL_FATAL = 5,   // fatal, no console.fatal
+    LOG_LEVEL_TRACE = 6,   // console.trace
 };
 
 /**
diff --git a/src/core/modules/presets/console_module.cpp b/frameworks/src/core/modules/presets/console_module.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/console_module.cpp
rename to frameworks/src/core/modules/presets/console_module.cpp
diff --git a/src/core/modules/presets/console_module.h b/frameworks/src/core/modules/presets/console_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/console_module.h
rename to frameworks/src/core/modules/presets/console_module.h
diff --git a/frameworks/src/core/modules/presets/date_time_format_module.cpp b/frameworks/src/core/modules/presets/date_time_format_module.cpp
new file mode 100644
index 0000000..9856cf1
--- /dev/null
+++ b/frameworks/src/core/modules/presets/date_time_format_module.cpp
@@ -0,0 +1,731 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#include "date_time_format_module.h"
+#ifdef FEATURE_DATE_FORMAT
+#include <cstring>
+#include "ace_log.h"
+#include "locale_util.h"
+#include "keys.h"
+#include "key_parser.h"
+#include "string_util.h"
+namespace OHOS {
+namespace ACELite {
+using namespace I18N;
+jerry_object_native_info_t DateTimeFormatModule::GC_CALLBACK = {.free_cb = DateTimeFormatModule::DeleteDateFormat};
+
+DateTimeFormatModule::DateTimeFormatModule(): dateFormat_(nullptr),
+    info_(nullptr),
+    timePattern_(I18N::AvailableDateTimeFormatPattern::SHORT),
+    datePattern_(I18N::AvailableDateTimeFormatPattern::SHORT),
+    weekStyle_(StyleState::UNKNOWN),
+    monthStyle_(StyleState::UNKNOWN),
+    numArray_(nullptr),
+    isSetTime_(false),
+    isSetDate_(false)
+{
+    if (memset_s(digitArray_, TIME_NUMBER_LEN, 0, TIME_NUMBER_LEN) != EOK) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "init digit array failed");
+    }
+}
+
+void DateTimeFormatModule::Init(jerry_value_t intlHandle)
+{
+    jerry_value_t constructor = jerry_create_external_function(CreateDateTimeFormat);
+    jerry_value_t format = jerry_create_external_function(Format);
+    jerry_value_t baseObj = jerry_create_object();
+    JerrySetNamedProperty(baseObj, "format", format);
+    JerrySetNamedProperty(constructor, "prototype", baseObj);
+    JerrySetNamedProperty(intlHandle, "DateTimeFormat", constructor);
+    ReleaseJerryValue(constructor, format, baseObj, VA_ARG_END_FLAG);
+}
+
+DateTimeFormatModule::~DateTimeFormatModule()
+{
+    ACE_DELETE(dateFormat_);
+    ACE_DELETE(info_);
+    ReleaseNumArray();
+}
+
+void DateTimeFormatModule::ReleaseNumArray()
+{
+    if (numArray_ != nullptr) {
+        for (int i = 0; i < MAX_NUM_LEN; i++) {
+            ACE_FREE(numArray_[i]);
+        }
+        ace_free(numArray_);
+        numArray_ = nullptr;
+    }
+}
+
+bool DateTimeFormatModule::InitNumArray(LocaleInfo info)
+{
+    ReleaseNumArray();
+    int status = 0;
+    NumberFormat numFormat(info, status);
+    if (status == I18nStatus::IERROR) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "init number format failed");
+        return false;
+    }
+    numArray_ = reinterpret_cast<char **>(ace_malloc(MAX_NUM_LEN * sizeof(char *)));
+    if (numArray_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "malloc number array failed");
+        return false;
+    }
+    // get the number value 0-9 in specified locale info
+    for (uint8_t i = 0; i < MAX_NUM_LEN; i++) {
+        int numStatus = 0;
+        char *result = const_cast<char *>(numFormat.Format(i, numStatus).data());
+        numArray_[i] = StringUtil::Copy(result);
+    }
+    return true;
+}
+
+jerry_value_t DateTimeFormatModule::CreateDateTimeFormat(const jerry_value_t func,
+                                                         const jerry_value_t context,
+                                                         const jerry_value_t args[],
+                                                         const jerry_length_t argsNum)
+{
+    if (!jerry_value_is_constructor(func)) {
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>
+                ("use new to create number format"));
+    }
+    DateTimeFormatModule *dateModel = new DateTimeFormatModule();
+    if (dateModel == nullptr) {
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>
+                ("create date format model failed"));
+    }
+    char *value = nullptr;
+    if (argsNum >= 1) {
+        value = MallocStringOf(args[0]);
+    }
+    dateModel->info_ = LocaleUtil::GetLocaleInfo(value);
+    ACE_FREE(value);
+    if (dateModel->info_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "create LocaleInfo failed");
+        delete dateModel;
+        dateModel = nullptr;
+        return jerry_create_error(JERRY_ERROR_COMMON, reinterpret_cast<const jerry_char_t*>("lack of memory"));
+    }
+    // set the default format pattern year(numeric)-month(numeric)-day(numeric)
+    dateModel->dateFormat_ = new DateTimeFormat(AvailableDateTimeFormatPattern::SHORT, *dateModel->info_);
+    if ((dateModel->dateFormat_ == nullptr) || (!dateModel->InitNumArray(*dateModel->info_))) {
+        delete dateModel;
+        dateModel = nullptr;
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>
+                ("create dateTimeFormat failed"));
+    }
+    if (argsNum > 1) {
+        // deal the year month day style
+        const char *dateRes = dateModel->SetDateStyle(args[1]);
+        // deal the hour minute second style
+        const char *timeRes = dateModel->SetTimeStyle(args[1]);
+        // if dateRes or timeRes is not nullptr, the date style or time style is invalid
+        if ((dateRes != nullptr) || (timeRes != nullptr)) {
+            delete dateModel;
+            dateModel = nullptr;
+            const char *result = (dateRes != nullptr) ? dateRes : timeRes;
+            return (result == nullptr) ? jerry_create_null() :
+                    jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>(result));
+        }
+    }
+    jerry_set_object_native_pointer(context, dateModel, &GC_CALLBACK);
+    return UNDEFINED;
+}
+
+void DateTimeFormatModule::ConvertLocalToGMT(time_t &time) const
+{
+    struct tm gmTime = {0};
+    struct tm local = {0};
+    gmtime_r(&time, &gmTime);
+    localtime_r(&time, &local);
+    time += mktime(&local) - mktime(&gmTime);
+}
+
+jerry_value_t DateTimeFormatModule::Format(const jerry_value_t func,
+                                           const jerry_value_t context,
+                                           const jerry_value_t args[],
+                                           const jerry_length_t argsNum)
+{
+    if (!jerry_is_feature_enabled(JERRY_FEATURE_DATE)) {
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t*>("the date is not enabled"));
+    }
+    if (argsNum < 1) {
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("date is invalid"));
+    }
+    DateTimeFormatModule *formatter = nullptr;
+    if (!(jerry_get_object_native_pointer(context, reinterpret_cast<void **>(&formatter), &GC_CALLBACK)) ||
+        (formatter == nullptr) || (formatter->dateFormat_ == nullptr)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "get format object failed");
+        return UNDEFINED;
+    }
+    const uint16_t msToSec = 1000;
+    time_t dateTime = formatter->GetTimeVal(args[0], "getTime") / msToSec;
+    formatter->ConvertLocalToGMT(dateTime);
+    if (formatter->isSetDate_ || formatter->isSetTime_) {
+        uint8_t maxSize = 128;
+        char *res = reinterpret_cast<char *>(ace_malloc(maxSize));
+        if (res == nullptr) {
+            return UNDEFINED;
+        }
+        res[0] = '\0';
+        uint8_t start = 0;
+        if (formatter->isSetDate_) {
+            formatter->FormatDate(dateTime, res, maxSize, start);
+        }
+        if (formatter->isSetTime_) {
+            formatter->FormatTime(dateTime, res, maxSize, start);
+        }
+        jerry_value_t resultProp = jerry_create_string(reinterpret_cast<jerry_char_t *>(res));
+        ace_free(res);
+        res = nullptr;
+        return resultProp;
+    }
+    // the style group is not support, format the lonely support style week or month
+    if (formatter->weekStyle_ != StyleState::UNKNOWN) {
+        int8_t weekIndex = formatter->GetTimeVal(args[0], "getDay");
+        DateTimeDataType type = (formatter->weekStyle_ == StyleState::LONG) ? FORMAT_WIDE : FORMAT_ABBR;
+        return jerry_create_string(reinterpret_cast<const jerry_char_t *>
+                                   (formatter->dateFormat_->GetWeekName(weekIndex, type).data()));
+    } else if (formatter->monthStyle_ != StyleState::UNKNOWN) {
+        return formatter->GetMonthVal(args[0]);
+    }
+    // if the style is valid, the style pattern is not support, format the date style as default style
+    std::string result, timeZone;
+    I18nStatus status = I18nStatus::ISUCCESS;
+    formatter->dateFormat_->Format(dateTime, timeZone, result, status);
+    if (status == I18nStatus::IERROR) {
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("format date failed"));
+    }
+    return jerry_create_string(reinterpret_cast<const jerry_char_t *>(result.data()));
+}
+
+jerry_value_t DateTimeFormatModule::GetMonthVal(jerry_value_t time) const
+{
+    int month = GetTimeVal(time, "getMonth");
+    // format the long style ans short month style
+    if ((monthStyle_ == StyleState::LONG) || (monthStyle_ == StyleState::SHORT)) {
+        DateTimeDataType type = (monthStyle_ == StyleState::LONG) ? FORMAT_WIDE : FORMAT_ABBR;
+        return jerry_create_string(reinterpret_cast<const jerry_char_t *>
+                                   (dateFormat_->GetMonthName(month, type).data()));
+    }
+    const uint8_t monthIndex = 1;
+    const uint8_t maxMonthLen = 20;
+    uint8_t start = 0;
+    char *result = reinterpret_cast<char *>(ace_malloc(maxMonthLen));
+    if (result == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "malloc month str failed");
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("memory is not enough"));
+    }
+    const char *date = dateFormat_->GetMonthName(month, DateTimeDataType::STANDALONE_ABBR).data();
+    // format the number month to 2-digit or not through the month digit flag
+    jerry_value_t resultProp = UNDEFINED;
+    if (FormatDigit(date, result, maxMonthLen, start, digitArray_[monthIndex]) > 0) {
+        resultProp = jerry_create_string(reinterpret_cast<jerry_char_t *>(result));
+    }
+    ace_free(result);
+    result = nullptr;
+    return resultProp;
+}
+
+uint8_t DateTimeFormatModule::GetNumInDate(const char *date) const
+{
+    if (date == nullptr) {
+        return 0;
+    }
+    uint8_t len = 0;
+    int16_t dateLen = strlen(date);
+    bool check = true;
+    for (int16_t index = 0; index < dateLen; index++) {
+        int16_t numEnd = GetNumberEnd(date, index);
+        if (numEnd >= 0) {
+            if (check) {
+                len++;
+                check = false;
+            }
+            index = numEnd; // check the number from the next character
+        } else {
+            check = true;
+        }
+    }
+    return len;
+}
+
+void DateTimeFormatModule::FormatDate(time_t time, char *res, const uint8_t resSize, uint8_t &start)
+{
+    if (dateFormat_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "dateFormat is nullptr");
+        return;
+    }
+    std::string result, timeZone, check;
+    I18nStatus status = I18nStatus::ISUCCESS;
+    dateFormat_->ApplyPattern(datePattern_);
+    dateFormat_->Format(time, timeZone, result, status);
+    if (status == I18nStatus::IERROR) {
+        return;
+    }
+    bool isMonthFirst = false;
+    // if month is numeric, format the date to full year-month-day, if the first digit is number, the format string
+    // is day-month-year or year-month-day, else month-day-year
+    const char *dateStr = result.data();
+    const uint8_t numMaxInDate = 3;
+    uint8_t numInDate = GetNumInDate(dateStr);
+    if (numInDate == numMaxInDate) {
+        dateFormat_->ApplyPattern(AvailableDateTimeFormatPattern::YEAR_WIDE_MONTH_DAY);
+        dateFormat_->Format(time, timeZone, check, status);
+        if (status == I18nStatus::IERROR) {
+            return;
+        }
+        isMonthFirst = (GetNumberEnd(check.data(), 0) < 0);
+    }
+    const uint8_t dayStyleIndex = 2; // the day number style index
+    const uint8_t monthStyleIndex = 1; // the month style index
+    uint8_t firstFormatIndex = dayStyleIndex;
+    int16_t formatIndex = 0;
+    if (numInDate == numMaxInDate) {
+        uint8_t secondFormatIndex = monthStyleIndex;
+        if (isMonthFirst) {
+            // set the format order month-day-year
+            firstFormatIndex = monthStyleIndex;
+            secondFormatIndex = dayStyleIndex;
+        }
+        formatIndex = FormatDigit(dateStr, res, resSize, start, digitArray_[firstFormatIndex]);
+        if (formatIndex < 0) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "format the first number in date str failed");
+            return;
+        }
+        formatIndex = FormatDigit(dateStr + formatIndex, res, resSize,
+                                  start, digitArray_[secondFormatIndex]) + formatIndex;
+    } else {
+        // format the day digit or year digit
+        formatIndex = FormatDigit(dateStr, res, resSize, start, digitArray_[dayStyleIndex]);
+    }
+    if (formatIndex < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "format date string failed");
+        return;
+    }
+    // format the year
+    if (FormatDigit(dateStr + formatIndex, res, resSize, start, digitArray_[firstFormatIndex]) < 0) {
+        res[0] = '\0';
+    }
+}
+
+void DateTimeFormatModule::FormatTime(time_t time, char *res, const uint8_t resSize, uint8_t &start)
+{
+    if (res == nullptr) {
+        return;
+    }
+    if (start != 0) {
+        res[start] = ' ';
+        start++;
+    }
+    std::string result, timeZone;
+    I18nStatus status = I18nStatus::ISUCCESS;
+    dateFormat_->ApplyPattern(timePattern_);
+    dateFormat_->Format(time, timeZone, result, status);
+    if (status == I18nStatus::IERROR) {
+        return;
+    }
+    const uint8_t hourIndex = 3;
+    const uint8_t minuteIndex = 4;
+    const uint8_t secondIndex = 5;
+    const char *timeStr = result.data();
+    int16_t curIndex = 0;
+    curIndex = FormatDigit(timeStr, res, resSize, start, digitArray_[hourIndex]);
+    if (curIndex < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "format hour style failed");
+        return;
+    }
+    curIndex = FormatDigit(timeStr + curIndex, res, resSize, start, digitArray_[minuteIndex]) + curIndex;
+    if (curIndex < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "format minute style failed");
+        return;
+    }
+    if (FormatDigit(timeStr + curIndex, res, resSize, start, digitArray_[secondIndex]) < 0) {
+        res[0] = '\0';
+    }
+}
+
+int16_t DateTimeFormatModule::FormatDigit(const char *time,
+                                          char *res,
+                                          const uint8_t resSize,
+                                          uint8_t &start,
+                                          bool is2Digit) const
+{
+    if ((time == nullptr) || (strlen(time) == 0)) {
+        return 0;
+    }
+    int16_t index = GetNum(time);
+    if (index >= 0) {
+        if (strncpy_s(res + start, resSize - start + 1, time, index + 1) != 0) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "copy string before number failed");
+            return -1;
+        }
+        start = start + index + 1;
+    }
+    index = (index < 0) ? 0 : (index + 1);
+    int16_t num1 = GetNumberEnd(time, index);
+    if (num1 < 0) {
+        return -1;
+    }
+    int16_t num2 = GetNumberEnd(time, num1 + 1);
+    int16_t numEnd = num1;
+    if (num2 < 0) {
+        if (is2Digit && (numArray_[0] != nullptr)) {
+            uint8_t zeroLen = strlen(numArray_[0]);
+            if (strncpy_s(res + start, resSize - start + 1, numArray_[0], zeroLen)) {
+                HILOG_ERROR(HILOG_MODULE_ACE, "add zero failed");
+                return -1;
+            }
+            start = start + zeroLen;
+        }
+    } else {
+        int num3 = GetNumberEnd(time, num2 + 1);
+        // format the 4 digit year
+        if (num3 >= 0) {
+            // the year style is 2-digit
+            if (digitArray_[0]) {
+                index = num2 + 1;
+            }
+            numEnd = GetNumberEnd(time, num3 + 1);
+        } else {
+            numEnd = num2;
+        }
+    }
+    numEnd = GetNum(time + numEnd + 1) + numEnd + 1;
+    if (numEnd >= index) {
+        if (strncpy_s(res + start, resSize - start + 1, time + index, numEnd - index + 1) != 0) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "copy string failed");
+            return -1;
+        }
+        start = start + numEnd - index + 1;
+    }
+    res[start] = '\0';
+    return numEnd + 1;
+}
+
+int16_t DateTimeFormatModule::GetNum(const char *format) const
+{
+    uint8_t len = strlen(format);
+    int16_t res = -1;
+    for (uint8_t index = 0; index < len; index++) {
+        int16_t numIndex = GetNumberEnd(format, index);
+        if (numIndex >= 0) {
+            break;
+        } else {
+            res = index;
+        }
+    }
+    return res;
+}
+
+int16_t DateTimeFormatModule::GetNumberEnd(const char *compare, uint8_t start) const
+{
+    for (uint8_t index = 0; index < MAX_NUM_LEN; index++) {
+        const char *str = compare + start;
+        if (StringUtil::StartsWith(str, numArray_[index])) {
+            return start + strlen(numArray_[index]) - 1;
+        }
+    }
+    return -1;
+}
+
+double DateTimeFormatModule::GetTimeVal(jerry_value_t time, const char *funcName) const
+{
+    jerry_value_t funcProp = jerryx_get_property_str(time, funcName);
+    if (IS_UNDEFINED(funcProp)) {
+        return 0;
+    }
+    jerry_value_t result = CallJSFunction(funcProp, time, nullptr, 0);
+    double timeVal = jerry_get_number_value(result);
+    ReleaseJerryValue(funcProp, result, VA_ARG_END_FLAG);
+    return timeVal;
+}
+
+void DateTimeFormatModule::DeleteDateFormat(void *pointer)
+{
+    DateTimeFormatModule *formatter = reinterpret_cast<DateTimeFormatModule *>(pointer);
+    if (formatter != nullptr) {
+        delete formatter;
+        formatter = nullptr;
+    }
+}
+
+const char *DateTimeFormatModule::SetDateStyle(jerry_value_t style)
+{
+    weekStyle_ = GetWeekdayStyle(style);
+    if (weekStyle_ == StyleState::ERROR) {
+        return "the weekday style value is out of range";
+    }
+    const uint8_t yearIndex = 0;
+    StyleState yearStyle = GetStyle(style, "year", yearIndex);
+    if (yearStyle == StyleState::ERROR) {
+        return "the year style value is out of range";
+    }
+    monthStyle_ = GetMonthStyle(style);
+    if (monthStyle_ == StyleState::ERROR) {
+        return "the month style value is out of range";
+    }
+    const uint8_t dayIndex = 2;
+    StyleState dayStyle = GetStyle(style, "day", dayIndex);
+    if (dayStyle == StyleState::ERROR) {
+        return "the day style value is out of range";
+    }
+    isSetDate_ = SetDatePattern(weekStyle_, yearStyle, monthStyle_, dayStyle);
+    return nullptr;
+}
+
+DateTimeFormatModule::StyleState DateTimeFormatModule::GetWeekdayStyle(jerry_value_t style) const
+{
+    if (!jerryx_has_property_str(style, "weekday")) {
+        return StyleState::UNKNOWN;
+    }
+    StyleState weekdayStyle = StyleState::UNKNOWN;
+    jerry_value_t weekProp = jerryx_get_property_str(style, "weekday");
+    uint16_t len = 0;
+    char *weekStyle = MallocStringOf(weekProp, &len);
+    jerry_release_value(weekProp);
+    uint16_t weekId = KeyParser::ParseKeyId(weekStyle, len);
+    ACE_FREE(weekStyle);
+    if (!KeyParser::IsKeyValid(weekId)) {
+        return StyleState::ERROR;
+    }
+    switch (weekId) {
+        case K_SHORT: {
+            weekdayStyle = StyleState::SHORT;
+            break;
+        }
+        case K_LONG: {
+            weekdayStyle = StyleState::LONG;
+            break;
+        }
+        default: {
+            weekdayStyle = StyleState::ERROR;
+            break;
+        }
+    }
+    return weekdayStyle;
+}
+
+DateTimeFormatModule::StyleState DateTimeFormatModule::GetMonthStyle(jerry_value_t style)
+{
+    if (!jerryx_has_property_str(style, "month")) {
+        return StyleState::UNKNOWN;
+    }
+    jerry_value_t monthProp = jerryx_get_property_str(style, "month");
+    uint16_t len = 0;
+    char *monthStyle = MallocStringOf(monthProp, &len);
+    jerry_release_value(monthProp);
+    uint16_t monthId = KeyParser::ParseKeyId(monthStyle, len);
+    ACE_FREE(monthStyle);
+    if (!KeyParser::IsKeyValid(monthId)) {
+        return StyleState::ERROR;
+    }
+    StyleState monthStyleState = StyleState::UNKNOWN;
+    switch (monthId) {
+        case K_LONG: {
+            monthStyleState = StyleState::LONG;
+            break;
+        }
+        case K_SHORT: {
+            monthStyleState = StyleState::SHORT;
+            break;
+        }
+        case K_NUMERIC: {
+            monthStyleState = StyleState::NUMERIC;
+            break;
+        }
+        case K_DIGIT2: {
+            const uint8_t monthIndex = 1;
+            digitArray_[monthIndex] = true;
+            monthStyleState = StyleState::NUMERIC;
+            break;
+        }
+        default: {
+            monthStyleState = StyleState::ERROR;
+            break;
+        }
+    }
+    return monthStyleState;
+}
+
+DateTimeFormatModule::StyleState DateTimeFormatModule::GetStyle(jerry_value_t style,
+                                                                const char *attrName,
+                                                                const uint8_t index)
+{
+    if (!jerryx_has_property_str(style, attrName)) {
+        return StyleState::UNKNOWN;
+    }
+    jerry_value_t attrProp = jerryx_get_property_str(style, attrName);
+    uint16_t len = 0;
+    char *attrVal = MallocStringOf(attrProp, &len);
+    jerry_release_value(attrProp);
+    uint16_t attrId = KeyParser::ParseKeyId(attrVal, len);
+    ACE_FREE(attrVal);
+    if (!KeyParser::IsKeyValid(attrId)) {
+        return StyleState::ERROR;
+    }
+    StyleState styleState = StyleState::UNKNOWN;
+    switch (attrId) {
+        case K_NUMERIC: {
+            styleState = StyleState::NUMERIC;
+            break;
+        }
+        case K_DIGIT2: {
+            digitArray_[index] = true;
+            styleState = StyleState::NUMERIC;
+            break;
+        }
+        default: {
+            styleState = StyleState::ERROR;
+            break;
+        }
+    }
+    return styleState;
+}
+
+const char *DateTimeFormatModule::SetTimeStyle(jerry_value_t style)
+{
+    const uint8_t hourIndex = 3;
+    StyleState hourStyle = GetStyle(style, "hour", hourIndex);
+    if (hourStyle == StyleState::ERROR) {
+        return "the hour style value is out of range";
+    }
+    const uint8_t minuteIndex = 4;
+    StyleState minuteStyle = GetStyle(style, "minute", minuteIndex);
+    if (minuteStyle == StyleState::ERROR) {
+        return "the minute style value is out of range";
+    }
+    const uint8_t secondIndex = 5;
+    StyleState secondStyle = GetStyle(style, "second", secondIndex);
+    if (secondStyle == StyleState::ERROR) {
+        return "the second style value is out of range";
+    }
+    // the hour12 style is invalid when hour style is not set
+    if (hourStyle != StyleState::UNKNOWN) {
+        if (jerryx_has_property_str(style, "hour12")) {
+            jerry_value_t hour12Style = jerryx_get_property_str(style, "hour12");
+            bool isHour12 = BoolOf(hour12Style);
+            jerry_release_value(hour12Style);
+            hourStyle = isHour12 ? StyleState::HOUR12 : StyleState::HOUR24;
+        } else {
+            hourStyle = StyleState::HOUR;
+        }
+    }
+    // find the most suitable mode for hour minute second style
+    isSetTime_ = GetTimePattern(hourStyle, minuteStyle, secondStyle);
+    if ((!isSetTime_) && (weekStyle_ == StyleState::UNKNOWN) && (monthStyle_ == StyleState::UNKNOWN)) {
+        isSetTime_ = true;
+        timePattern_ = AvailableDateTimeFormatPattern::SHORT;
+    }
+    return nullptr;
+}
+
+bool DateTimeFormatModule::SetMonthPattern(StyleState monthStyle,
+                                           AvailableDateTimeFormatPattern widePattern,
+                                           AvailableDateTimeFormatPattern shortPattern,
+                                           AvailableDateTimeFormatPattern numberPattern)
+{
+    bool result = true;
+    switch (monthStyle) {
+        case StyleState::LONG: {
+            datePattern_ = widePattern;
+            break;
+        }
+        case StyleState::SHORT: {
+            datePattern_ = shortPattern;
+            break;
+        }
+        case StyleState::NUMERIC: {
+            datePattern_ = numberPattern;
+            break;
+        }
+        default: {
+            result = false;
+            break;
+        }
+    }
+    return result;
+}
+
+bool DateTimeFormatModule::SetDatePattern(StyleState weekdayStyle,
+                                          StyleState yearStyle,
+                                          StyleState monthStyle,
+                                          StyleState dayStyle)
+{
+    // the pattern support is (weekday)-year-month-day
+    if ((yearStyle == StyleState::UNKNOWN) ||
+        (dayStyle == StyleState::UNKNOWN) ||
+        (monthStyle == StyleState::UNKNOWN)) {
+        return false;
+    }
+    bool result = true;
+    switch (weekdayStyle) {
+        case StyleState::LONG: {
+            result = SetMonthPattern(monthStyle, AvailableDateTimeFormatPattern::FULL,
+                                     AvailableDateTimeFormatPattern::YEAR_ABBR_MONTH_WIDE_WEEKDAY_DAY,
+                                     AvailableDateTimeFormatPattern::YEAR_SHORT_MONTH_WIDE_WEEKDAY_DAY);
+            break;
+        }
+        case StyleState::SHORT: {
+            result = SetMonthPattern(monthStyle, AvailableDateTimeFormatPattern::YEAR_WIDE_MONTH_ABBR_WEEKDAY_DAY,
+                                     AvailableDateTimeFormatPattern::YEAR_ABBR_MONTH_ABBR_WEEKDAY_DAY,
+                                     AvailableDateTimeFormatPattern::YEAR_SHORT_MONTH_ABBR_WEEKDAY_DAY);
+            break;
+        }
+        default: {
+            result = SetMonthPattern(monthStyle, AvailableDateTimeFormatPattern::YEAR_WIDE_MONTH_DAY,
+                                     AvailableDateTimeFormatPattern::MEDIUM,
+                                     AvailableDateTimeFormatPattern::SHORT);
+            break;
+        }
+    }
+    return result;
+}
+
+bool DateTimeFormatModule::GetTimePattern(StyleState hourStyle,
+                                          StyleState minuteStyle,
+                                          StyleState secondStyle)
+{
+    // the support pattern is hour-minute-(second)
+    if ((hourStyle == StyleState::UNKNOWN) || (minuteStyle == StyleState::UNKNOWN)) {
+        return false;
+    }
+    bool result = true;
+    switch (hourStyle) {
+        case StyleState::HOUR12: {
+            timePattern_ = (secondStyle == StyleState::UNKNOWN) ? AvailableDateTimeFormatPattern::HOUR12_MINUTE :
+                            AvailableDateTimeFormatPattern::HOUR12_MINUTE_SECOND;
+            break;
+        }
+        case StyleState::HOUR24: {
+            timePattern_ = (secondStyle == StyleState::UNKNOWN) ? AvailableDateTimeFormatPattern::HOUR24_MINUTE :
+                            AvailableDateTimeFormatPattern::HOUR24_MINUTE_SECOND;
+            break;
+        }
+        case StyleState::HOUR: {
+            timePattern_ = (secondStyle == StyleState::UNKNOWN) ? AvailableDateTimeFormatPattern::HOUR_MINUTE :
+                            HOUR_MINUTE_SECOND;
+            break;
+        }
+        default: {
+            result = false;
+            break;
+        }
+    }
+    return result;
+}
+}
+}
+#endif
diff --git a/frameworks/src/core/modules/presets/date_time_format_module.h b/frameworks/src/core/modules/presets/date_time_format_module.h
new file mode 100644
index 0000000..c874503
--- /dev/null
+++ b/frameworks/src/core/modules/presets/date_time_format_module.h
@@ -0,0 +1,185 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_DATE_TIME_FORMAT_MODULE_H
+#define OHOS_ACELITE_DATE_TIME_FORMAT_MODULE_H
+
+#include "acelite_config.h"
+#ifdef FEATURE_DATE_FORMAT
+#include "js_fwk_common.h"
+#include "date_time_format.h"
+namespace OHOS {
+namespace ACELite {
+class DateTimeFormatModule final : public MemoryHeap {
+public:
+    /**
+     * @brief register dateTimeFormat attribute and register the format method to dateTimeFormat
+     */
+    static void Init(jerry_value_t intlHandle);
+
+    static void DeleteDateFormat(void *pointer);
+
+    static jerry_object_native_info_t GC_CALLBACK;
+
+private:
+    constexpr static uint8_t TIME_NUMBER_LEN = 6; // the num of number in format string
+    constexpr static uint8_t MAX_NUM_LEN = 10;
+    DateTimeFormatModule();
+
+    ~DateTimeFormatModule();
+
+    /**
+     * @brief get the locale number form 0-9
+     * @param info the language and region object
+     * @return get the number digit result
+     */
+    bool InitNumArray(I18N::LocaleInfo info);
+
+    enum StyleState : uint8_t {
+        SHORT,
+        NUMERIC,
+        LONG,
+        HOUR12,
+        HOUR24,
+        HOUR,
+        UNKNOWN, // the style is not set
+        ERROR // the style value is invalid
+    };
+
+    static jerry_value_t CreateDateTimeFormat(const jerry_value_t func,
+                                              const jerry_value_t context,
+                                              const jerry_value_t args[],
+                                              const jerry_length_t argsNum);
+
+    static jerry_value_t Format(const jerry_value_t func,
+                                const jerry_value_t context,
+                                const jerry_value_t args[],
+                                const jerry_length_t argsNum);
+
+    const char *SetDateStyle(jerry_value_t style);
+
+    const char *SetTimeStyle(jerry_value_t style);
+
+    /**
+     * @brief set the date time pattern
+     */
+    bool SetDatePattern(StyleState weekdayStyle,
+                        StyleState yearStyle,
+                        StyleState monthStyle,
+                        StyleState dayStyle);
+
+    /**
+     * @brief get the hour minute second style pattern
+     */
+    bool GetTimePattern(StyleState hourStyle,
+                        StyleState minuteStyle,
+                        StyleState secondStyle);
+
+    /**
+     * @brief check the specified position in coampared string is number or not
+     * @param comapre: the compare string
+     * @param start: the specified position
+     * @return if the specified string is digit, return the last position of single number,
+     * else return -1
+     */
+    int16_t GetNumberEnd(const char *compare, uint8_t start) const;
+
+    StyleState GetWeekdayStyle(jerry_value_t style) const;
+
+    StyleState GetStyle(jerry_value_t style, const char *attrName, const uint8_t index);
+
+    StyleState GetMonthStyle(jerry_value_t style);
+
+    /**
+     * @brief execute the function in date object
+     * @param time : the js date object
+     *        funcName : the name of executed function
+     * @return the number value of execute the function
+     */
+    double GetTimeVal(jerry_value_t time, const char *funcName) const;
+
+    /**
+     * @brief format the time to date through locale info
+     * @param date: the time need to format
+     *        res : store the format date string
+     *        resSize : the size of format result
+     *        start: the start storage position in res
+     */
+    void FormatDate(time_t date, char *res, const uint8_t resSize, uint8_t &start);
+
+    /**
+     * @brief get the time zone, and convert local time to GMT time
+     * @param time the timestamp of local time
+     */
+    void ConvertLocalToGMT(time_t &time) const;
+
+    /**
+     * @brief format the time to hour-minute-second through locale info
+     * @param date: the time need to format
+     *        res : store the format date string
+     *        resSize : the length of format result
+     *        start: the start storage position in res
+     */
+    void FormatTime(time_t time, char *res, const uint8_t resSize, uint8_t &start);
+
+    /**
+     * @brief get the first number in string
+     * @param the string to get the first number
+     * @return if string starts with number, return the end index of first number in string
+     * else return -1
+     */
+    int16_t GetNum(const char *format) const;
+
+    /**
+     * @brief Get the month format value
+     * @param time the js time which need to format
+     * @return the format js value
+     */
+    jerry_value_t GetMonthVal(jerry_value_t time) const;
+
+    /**
+     * @brief format the first number to 2 digit
+     * @param time the string need to format to 2-digit or remain
+     *        res the string to store the format result
+     *        start the start position to store format result
+     *        isDigit2 if true, format the first number to 2-digit
+     *                 if false remain the first digit
+     * @return the next number index
+     */
+    int16_t FormatDigit(const char *time, char *res, const uint8_t resSize, uint8_t &start, bool isDigit2) const;
+
+    void ReleaseNumArray();
+
+    bool SetMonthPattern(StyleState monthStyle,
+                         I18N::AvailableDateTimeFormatPattern widePattern,
+                         I18N::AvailableDateTimeFormatPattern shortPattern,
+                         I18N::AvailableDateTimeFormatPattern numberPattern);
+
+    uint8_t GetNumInDate(const char *date) const;
+    I18N::DateTimeFormat *dateFormat_;
+    I18N::LocaleInfo *info_;
+    I18N::AvailableDateTimeFormatPattern timePattern_;
+    I18N::AvailableDateTimeFormatPattern datePattern_;
+    StyleState weekStyle_;
+    StyleState monthStyle_;
+    char **numArray_;
+    bool isSetTime_;
+    bool isSetDate_;
+    bool digitArray_[TIME_NUMBER_LEN];
+};
+}
+}
+#endif
+#endif // DATE_TIME_FORMAT_MODEL_H
diff --git a/src/core/modules/presets/feature_ability_module.cpp b/frameworks/src/core/modules/presets/feature_ability_module.cpp
similarity index 90%
rename from src/core/modules/presets/feature_ability_module.cpp
rename to frameworks/src/core/modules/presets/feature_ability_module.cpp
index b7c1189..6c4acab 100755
--- a/src/core/modules/presets/feature_ability_module.cpp
+++ b/frameworks/src/core/modules/presets/feature_ability_module.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -21,9 +21,7 @@
 #include "js_app_context.h"
 #include "js_async_work.h"
 #include "js_fwk_common.h"
-#if ENABLED(SECURE_C_FUNCTION)
 #include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 
 namespace OHOS {
 namespace ACELite {
@@ -162,8 +160,8 @@ jerry_value_t FeatureAbilityModule::Detect(const jerry_value_t func,
     }
 
     char *bundleName = const_cast<char *>(JsAppContext::GetInstance()->GetCurrentBundleName());
-    int32_t ret = AbilityKit::DetectPhoneApp(bundleName, dstAbilityName,
-        detectSuccessCallback_, detectFailCallback_, detectCallbackContext_);
+    int32_t ret = AbilityKit::DetectPhoneApp(bundleName, dstAbilityName, detectSuccessCallback_, detectFailCallback_,
+                                             detectCallbackContext_);
     if (ret != 0) {
         SyncFailCallback(detectFailCallback_, context, ERR_SEND_FAIL, ERR_CODE_SEND_MSG_FAILED);
     }
@@ -214,10 +212,9 @@ jerry_value_t FeatureAbilityModule::SendMsgToPeer(const jerry_value_t func,
         SyncSendMsgCallback(args[0], context, ERR_MESSAGE, ERR_CODE_INVALID_PARAMETER, false);
     } else {
         char *bundleName = const_cast<char *>(JsAppContext::GetInstance()->GetCurrentBundleName());
-        int32_t ret = AbilityKit::SendMsgToPeerApp((idLength == 0), bundleName, dstBundleName,
-                                                   (reinterpret_cast<const uint8_t *>(message)), strlen(message),
-                                                   sendMsgSuccessCallback_, sendMsgFailCallback_,
-                                                   sendMsgCallbackContext_);
+        int32_t ret = AbilityKit::SendMsgToPeerApp(
+            (idLength == 0), bundleName, dstBundleName, (reinterpret_cast<const uint8_t *>(message)), strlen(message),
+            sendMsgSuccessCallback_, sendMsgFailCallback_, sendMsgCallbackContext_);
         // if the message is sent out successfully, do not invoke user's callback until the peer result back
         if (ret != 0) {
             SyncSendMsgCallback(args[0], context, ERR_SEND_FAIL, ERR_CODE_SEND_MSG_FAILED, false);
@@ -265,7 +262,7 @@ jerry_value_t FeatureAbilityModule::SubscribeMessage(const jerry_value_t func,
     if (!registed) {
         char *bundleName = const_cast<char *>(JsAppContext::GetInstance()->GetCurrentBundleName());
         AbilityKit::RegisterReceiver(bundleName, MessageSuccessCallback, MessageFailCallback, successCallback_,
-            failCallback_, callbackContext_);
+                                     failCallback_, callbackContext_);
         registed = true;
     }
 
@@ -291,36 +288,28 @@ int32_t FeatureAbilityModule::MessageSuccessCallback(const void *data)
     if (data == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "message error");
         return -1;
-    } else {
-        ACE_FEATURE_EVENT_PRINT(MT_ACE_FEATUREABILITY, MT_ACE_FEATUREABILITY_SUBSCRIBEMSG, 0);
-        const FeatureAbilityDataInfo *origin = static_cast<const FeatureAbilityDataInfo *>(data);
-        FeatureAbilityDataInfo *target =
-            static_cast<FeatureAbilityDataInfo *>(ace_malloc(sizeof(FeatureAbilityDataInfo)));
-        if (target == nullptr) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "Failed to ace_malloc data");
-            return -1;
-        }
-#if ENABLED(SECURE_C_FUNCTION)
-        if (memset_s(target, sizeof(FeatureAbilityDataInfo), 0, sizeof(FeatureAbilityDataInfo)) != 0) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "MessageSuccessCallback memset_s failed");
-            ACE_FREE(target);
-            return -1;
-        }
-#else
-        target->deviceID = nullptr;
-        target->bundleName = nullptr;
-        target->abilityName = nullptr;
-        target->messageLength = 0;
-        target->message = nullptr;
-#endif
-        CopySuccessMessage(origin, target);
-        if (!JsAsyncWork::DispatchAsyncWork(AsyncSuccessCallback, target)) {
-            ACE_FREE(target->deviceID);
-            ACE_FREE(target->bundleName);
-            ACE_FREE(target->abilityName);
-            ACE_FREE(target->message);
-            ACE_FREE(target);
-        }
+    }
+    ACE_FEATURE_EVENT_PRINT(MT_ACE_FEATUREABILITY, MT_ACE_FEATUREABILITY_SUBSCRIBEMSG, 0);
+    const FeatureAbilityDataInfo *origin = static_cast<const FeatureAbilityDataInfo *>(data);
+    FeatureAbilityDataInfo *target = static_cast<FeatureAbilityDataInfo *>(ace_malloc(sizeof(FeatureAbilityDataInfo)));
+    if (target == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "Failed to ace_malloc data");
+        return -1;
+    }
+
+    if (memset_s(target, sizeof(FeatureAbilityDataInfo), 0, sizeof(FeatureAbilityDataInfo)) != 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "MessageSuccessCallback memset_s failed");
+        ACE_FREE(target);
+        return -1;
+    }
+
+    CopySuccessMessage(origin, target);
+    if (!JsAsyncWork::DispatchAsyncWork(AsyncSuccessCallback, target)) {
+        ACE_FREE(target->deviceID);
+        ACE_FREE(target->bundleName);
+        ACE_FREE(target->abilityName);
+        ACE_FREE(target->message);
+        ACE_FREE(target);
     }
 
     return 0;
diff --git a/src/core/modules/presets/feature_ability_module.h b/frameworks/src/core/modules/presets/feature_ability_module.h
similarity index 100%
rename from src/core/modules/presets/feature_ability_module.h
rename to frameworks/src/core/modules/presets/feature_ability_module.h
diff --git a/frameworks/src/core/modules/presets/intl_module.cpp b/frameworks/src/core/modules/presets/intl_module.cpp
new file mode 100644
index 0000000..40214f0
--- /dev/null
+++ b/frameworks/src/core/modules/presets/intl_module.cpp
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "intl_module.h"
+#ifdef FEATURE_INTL_MODULE
+#include "ace_log.h"
+#include "date_time_format_module.h"
+#include "global.h"
+#include "string.h"
+#include "number_format_module.h"
+#include "js_fwk_common.h"
+namespace OHOS {
+namespace ACELite {
+void IntlModule::Init()
+{
+    jerry_value_t globalObj = jerry_get_global_object();
+    jerry_value_t baseObj = jerry_create_object();
+#ifdef FEATURE_NUMBER_FORMAT
+    NumberFormatModule::Init(baseObj);
+#endif
+#ifdef FEATURE_DATE_FORMAT
+    DateTimeFormatModule::Init(baseObj);
+#endif
+    JerrySetNamedProperty(globalObj, "Intl", baseObj);
+    jerry_release_value(globalObj);
+}
+} // namespace ACELite
+} // namespace OHOS
+#endif
diff --git a/frameworks/src/core/modules/presets/intl_module.h b/frameworks/src/core/modules/presets/intl_module.h
new file mode 100644
index 0000000..d0fae5a
--- /dev/null
+++ b/frameworks/src/core/modules/presets/intl_module.h
@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_INTL_MODULE_H
+#define OHOS_ACELITE_INTL_MODULE_H
+#include "acelite_config.h"
+#ifdef FEATURE_INTL_MODULE
+#include "js_fwk_common.h"
+#include "non_copyable.h"
+#include "locale_info.h"
+namespace OHOS {
+namespace ACELite {
+class IntlModule final {
+public:
+    ACE_DISALLOW_COPY(IntlModule);
+    static IntlModule *GetInstance()
+    {
+        static IntlModule intlModule;
+        return &intlModule;
+    }
+
+    /**
+     * @brief: add Intl object to context and register numberformat and dateformat object
+     * and add format method support
+     */
+    void Init();
+
+private:
+    IntlModule() {}
+
+    ~IntlModule() {}
+};
+}
+}
+#endif // FEATURE_INTL_MODULE
+
+namespace OHOS {
+namespace ACELite {
+class IntlControlModule final {
+public:
+    IntlControlModule() = default;
+    ~IntlControlModule() = default;
+
+    static void Load()
+    {
+#ifdef FEATURE_INTL_MODULE
+        IntlModule *intlModule = IntlModule::GetInstance();
+        intlModule->Init();
+#endif
+    }
+};
+}
+}
+
+#endif // INTLMODULE_H
diff --git a/src/core/modules/presets/jstest_module.cpp b/frameworks/src/core/modules/presets/jstest_module.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/jstest_module.cpp
rename to frameworks/src/core/modules/presets/jstest_module.cpp
diff --git a/src/core/modules/presets/jstest_module.h b/frameworks/src/core/modules/presets/jstest_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/jstest_module.h
rename to frameworks/src/core/modules/presets/jstest_module.h
diff --git a/src/core/modules/presets/localization_module.cpp b/frameworks/src/core/modules/presets/localization_module.cpp
old mode 100755
new mode 100644
similarity index 50%
rename from src/core/modules/presets/localization_module.cpp
rename to frameworks/src/core/modules/presets/localization_module.cpp
index 4e6ec42..585fc18
--- a/src/core/modules/presets/localization_module.cpp
+++ b/frameworks/src/core/modules/presets/localization_module.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -17,7 +17,6 @@
 #include "ace_event_error_code.h"
 #ifdef FEATURE_LOCALIZATION_MODULE
 #include "ace_log.h"
-#include "file.h"
 #include "js_fwk_common.h"
 #include <stdlib.h>
 
@@ -56,10 +55,6 @@ void LocalizationModule::Clear()
         delete parser_;
         parser_ = nullptr;
     }
-    if (currentList_ != nullptr) {
-        cJSON_Delete(currentList_);
-        currentList_ = nullptr;
-    }
 }
 
 #ifdef LOCALIZATION_PLURAL
@@ -71,96 +66,36 @@ jerry_value_t LocalizationModule::GetValueByKey(const jerry_value_t *args, const
     if (argsNum == 0) {
         return UNDEFINED;
     }
-    char *result = nullptr;
     LocalizationModule *localization = GetInstance();
+    if (localization->parser_ == nullptr) {
+        localization->parser_ = new CJSONParser();
+        if (localization->parser_ == nullptr) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "create json parser failed");
+            return UNDEFINED;
+        }
+        if (!localization->parser_->Init()) {
+            ACE_ERROR_CODE_PRINT(EXCE_ACE_LOCALIZATION_FAILED, EXCE_ACE_LOCALIZATION_SYSTEM_LANGUAGE_NOT_INITIALIZED);
+            localization->Clear(); // parser init failed, release the resource of this module
+            return UNDEFINED;
+        }
+    }
+    // if system language origion info changed, cache new file to psram/ram
+    CJSONParser::LanguageState change = localization->parser_->ChangeLanguage();
+    if ((change == CJSONParser::LanguageState::LANGUAGE_CHANGED) ||
+        (change == CJSONParser::LanguageState::LANGUAGE_FAIL)) {
+        if (!localization->parser_->CacheFile()) {
+            HILOG_ERROR(HILOG_MODULE_ACE, "cache file failed");
+        }
+    }
     char *param = MallocStringOf(args[0]);
     if (param == nullptr) {
         return UNDEFINED;
     }
-    cJSON *currentItem = localization->GetJSONByKey(param);
-    if (currentItem == nullptr) {
-        jerry_value_t paramProp = jerry_create_string(reinterpret_cast<jerry_char_t *>(param));
-        ace_free(param);
-        param = nullptr;
-        return paramProp;
-    }
-    jerry_value_t arg = UNDEFINED;
-    if (argsNum > 1) {
-        arg = args[1];
-    }
-    if (currentItem->type == cJSON_String) {
-#ifdef LOCALIZATION_PLURAL
-        result = localization->parser_->FillPlaceholder(currentItem->valuestring, arg, argsNum, isPlural);
-#else
-        result = localization->parser_->FillPlaceholder(currentItem->valuestring, arg, argsNum);
-#endif // LOCALIZATION_PLURAL
-    } else if (currentItem->type == cJSON_Object || (currentItem->type == cJSON_Array)) {
-        char* format = cJSON_Print(currentItem);
-#ifdef LOCALIZATION_PLURAL
-        result = localization->parser_->FillPlaceholder(format, arg, argsNum, isPlural);
-#else
-        result = localization->parser_->FillPlaceholder(format, arg, argsNum);
-#endif // LOCALIZATION_PLURAL
-        if (format != nullptr) {
-            cJSON_free(format);
-            format = nullptr;
-        }
-    }
-    if (result != nullptr) {
-        ace_free(param);
-        param = nullptr;
-    } else {
-        // if currentItem is invalid, return the whole key.e.g.the currrentItem is nullptr
-        result = param;
-    }
-    jerry_value_t resultProp = jerry_create_string(reinterpret_cast<jerry_char_t *>(result));
-    ACE_FREE(result);
-    cJSON_Delete(localization->currentList_);
-    localization->currentList_ = nullptr;
+    jerry_value_t resultProp = localization->parser_->GetValue(param, args, argsNum);
+    ace_free(param);
+    param = nullptr;
     return resultProp;
 }
-
-cJSON *LocalizationModule::GetJSONByKey(const char *key)
-{
-    char delemeter = '.';
-    if (parser_ == nullptr) {
-        parser_ = new CJSONParser();
-        if (parser_ == nullptr) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "create json parser failed");
-            return nullptr;
-        }
-        if (!parser_->Init()) {
-            ACE_ERROR_CODE_PRINT(EXCE_ACE_LOCALIZATION_FAILED, EXCE_ACE_LOCALIZATION_SYSTEM_LANGUAGE_NOT_INITIALIZED);
-            Clear(); // parser init failed, release the resource of this module
-            return nullptr;
-        }
-    }
-
-    cJSON *curJsonItem = nullptr;
-    CJSONParser::ListNode *keySplited = nullptr;
-    // split the key by '.'
-    uint8_t keyCount = parser_->Split(key, delemeter, keySplited);
-    uint8_t curKeyIndex = 0;
-    // get the json object which defined the key
-    do {
-        if (curJsonItem == nullptr) {
-            curKeyIndex = 0;
-            // read the next json file and assign it to currentList_
-            if (!parser_->ChangeJsonFile(currentList_)) {
-                break;
-            }
-            curJsonItem = currentList_;
-        }
-        // get the current splited key
-        char *message = CJSONParser::GetNode(keySplited, keyCount - curKeyIndex);
-        curJsonItem = cJSON_GetObjectItem(curJsonItem, message);
-        curKeyIndex++;
-    } while (!(curKeyIndex == keyCount && (curJsonItem != nullptr)));
-    CJSONParser::ClearNode(keySplited);
-    // reset the index of read file
-    parser_->ResetIndex();
-    return curJsonItem;
-}
 } // namespace ACELite
 } // namespace OHOS
 #endif // LOCALIZATION_MODULE
diff --git a/src/core/modules/presets/localization_module.h b/frameworks/src/core/modules/presets/localization_module.h
old mode 100755
new mode 100644
similarity index 94%
rename from src/core/modules/presets/localization_module.h
rename to frameworks/src/core/modules/presets/localization_module.h
index 490a3eb..219534f
--- a/src/core/modules/presets/localization_module.h
+++ b/frameworks/src/core/modules/presets/localization_module.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -65,14 +65,12 @@ public:
 #endif
 
 private:
-    LocalizationModule() : parser_(nullptr), currentList_(nullptr) {}
+    LocalizationModule() : parser_(nullptr) {}
     ~LocalizationModule()
     {
         Clear();
     }
-    cJSON *GetJSONByKey(const char *key);
     CJSONParser *parser_;
-    cJSON *currentList_;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/frameworks/src/core/modules/presets/number_format_module.cpp b/frameworks/src/core/modules/presets/number_format_module.cpp
new file mode 100755
index 0000000..35a308a
--- /dev/null
+++ b/frameworks/src/core/modules/presets/number_format_module.cpp
@@ -0,0 +1,233 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "number_format_module.h"
+#include "ace_log.h"
+#ifdef FEATURE_NUMBER_FORMAT
+#include "locale_util.h"
+#include "string.h"
+#include "key_parser.h"
+#include "keys.h"
+#include "types.h"
+namespace OHOS {
+namespace ACELite {
+using namespace I18N;
+constexpr jerry_object_native_info_t NumberFormatModule::gcCallback;
+void NumberFormatModule::Init(jerry_value_t intlHandle)
+{
+    jerry_value_t constructor = jerry_create_external_function(CreateNumberFormat);
+    jerry_value_t format = jerry_create_external_function(Format);
+    jerry_value_t baseObj = jerry_create_object();
+    JerrySetNamedProperty(baseObj, "format", format);
+    JerrySetNamedProperty(constructor, "prototype", baseObj);
+    JerrySetNamedProperty(intlHandle, "NumberFormat", constructor);
+    ReleaseJerryValue(constructor, format, baseObj, VA_ARG_END_FLAG);
+}
+
+jerry_value_t NumberFormatModule::CreateNumberFormat(const jerry_value_t func,
+                                                     const jerry_value_t context,
+                                                     const jerry_value_t args[],
+                                                     const jerry_length_t argsNum)
+{
+    if (!jerry_value_is_constructor(func)) {
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>
+                                  ("use new to create NumberFormat"));
+    }
+    NumberFormatModule *numModule = new NumberFormatModule();
+    if (numModule == nullptr) {
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("memory is not enough"));
+    }
+    char *value = nullptr;
+    if (argsNum >= 1) {
+        value = MallocStringOf(args[0]);
+    }
+    numModule->localeInfo_ = LocaleUtil::GetLocaleInfo(value);
+    ACE_FREE(value);
+    if (numModule->localeInfo_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "get system info failed");
+        delete numModule;
+        numModule = nullptr;
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("get locale info failed"));
+    }
+    int status = 0;
+    numModule->formatter_ = new NumberFormat(*(numModule->localeInfo_), status);
+    if ((numModule->formatter_ == nullptr) || (status == I18nStatus::IERROR)) {
+        delete numModule;
+        numModule = nullptr;
+        HILOG_ERROR(HILOG_MODULE_ACE, "init resource failed");
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("init resource failed"));
+    }
+    const char *result = nullptr;
+    const uint8_t maxArgLen = 2;
+    if (argsNum >= maxArgLen) {
+        // set the number style
+        jerry_value_t keys = jerry_get_object_keys(args[1]);
+        uint8_t size = jerry_get_array_length(keys);
+        for (uint8_t index = 0; index < size; index++) {
+            jerry_value_t key = jerry_get_property_by_index(keys, index);
+            result = SetStyle(*numModule, key, args[1]);
+            jerry_release_value(key);
+        }
+        jerry_release_value(keys);
+        if (result != nullptr) {
+            delete numModule;
+            numModule = nullptr;
+            return jerry_create_error(JERRY_ERROR_RANGE, reinterpret_cast<const jerry_char_t *>(result));
+        }
+    }
+    jerry_set_object_native_pointer(context, numModule, &gcCallback);
+    return UNDEFINED;
+}
+
+jerry_value_t NumberFormatModule::Format(const jerry_value_t func,
+                                         const jerry_value_t context,
+                                         const jerry_value_t args[],
+                                         const jerry_length_t argsNum)
+{
+    if ((argsNum < 1) || (!jerry_value_is_number(args[0]))) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the args num in number format is error");
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("format invalid value"));
+    }
+    double number = jerry_get_number_value(args[0]);
+    NumberFormatModule *numModule = nullptr;
+    if ((!jerry_get_object_native_pointer(context, reinterpret_cast<void* *>(&numModule), &gcCallback)) ||
+        (numModule == nullptr) || (numModule->formatter_ == nullptr)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "get the object number formatter failed");
+        return UNDEFINED;
+    }
+    const char *result = nullptr;
+    int status = 0;
+    if (numModule->isUsingGroup_) {
+        result = numModule->formatter_->Format(number, numModule->formatType_, status).data();
+    } else {
+        result = numModule->formatter_->FormatNoGroup(number, numModule->formatType_, status).data();
+    }
+    if (status == I18nStatus::IERROR) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "format number failed");
+        return UNDEFINED;
+    }
+    if (result != nullptr) {
+        return jerry_create_string(reinterpret_cast<const jerry_char_t*>(result));
+    }
+    return UNDEFINED;
+}
+
+void NumberFormatModule::DeleteNumberFormat(void *nativePointer)
+{
+    NumberFormatModule *format = reinterpret_cast<NumberFormatModule *>(nativePointer);
+    if (format != nullptr) {
+        delete format;
+        format = nullptr;
+    }
+}
+
+const char *NumberFormatModule::SetStyle(NumberFormatModule &numModel,
+                                         const jerry_value_t key,
+                                         const jerry_value_t style)
+{
+    uint16_t styleLen = 0;
+    char *styleName = MallocStringOf(key, &styleLen);
+    uint32_t styleNameId = KeyParser::ParseKeyId(styleName, styleLen);
+    ACE_FREE(styleName);
+    if (!KeyParser::IsKeyValid(styleNameId)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the style name is invalid");
+        return nullptr;
+    }
+    jerry_value_t styleValue = jerry_get_property(style, key);
+    const char *result = nullptr;
+    switch (styleNameId) {
+        case K_STYLE: {
+            if (!numModel.SetNumberStyle(styleValue)) {
+                result = "the style is invalid";
+            }
+            break;
+        }
+        case K_USEGROUP: {
+            numModel.SetUsingGroup(styleValue);
+            break;
+        }
+        case K_MINIMUMFRACTIONDIGITS: {
+            int16_t number = IntegerOf(styleValue);
+            const uint8_t maxMiniFraction = 20;
+            if ((number < 0) || (number > maxMiniFraction)) {
+                HILOG_ERROR(HILOG_MODULE_ACE, "the minimumFractionDigits is invalid");
+                result = "the minimumFractionDigits is invalid";
+            }
+            if (numModel.formatType_ == NumberFormatType::DECIMAL) {
+                numModel.formatter_->SetMinDecimalLength(number);
+            }
+            break;
+        }
+        case K_MAXIMUMFRACTIONDIGITS: {
+            if (!numModel.SetMaximumFractionDigits(styleValue)) {
+                result = "the maximumFractionDigits is invalid";
+            }
+            break;
+        }
+        default:
+            break;
+    }
+    jerry_release_value(styleValue);
+    return result;
+}
+
+void NumberFormatModule::SetUsingGroup(jerry_value_t styleValue)
+{
+    if (!jerry_value_is_boolean(styleValue)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "set the useGroup value failed");
+        return;
+    }
+    isUsingGroup_ = jerry_get_boolean_value(styleValue);
+}
+
+bool NumberFormatModule::SetMaximumFractionDigits(jerry_value_t styleValue)
+{
+    int16_t number = IntegerOf(styleValue);
+    const uint8_t maxMaxFraction = 20;
+    if ((number < 0) || (number > maxMaxFraction)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "the maximumFractionDigits is out of range");
+        return false;
+    }
+    const int16_t defaultMaxmumFractionDigits = 3;
+    if (number < defaultMaxmumFractionDigits) {
+        HILOG_WARN(HILOG_MODULE_ACE, "the maximumFractionDigits is too small");
+    } else {
+        if (formatType_ == NumberFormatType::PERCENT) {
+            // set maxDecimalLength in percent is invalid
+            HILOG_ERROR(HILOG_MODULE_ACE, "set maximumFractionDigits failed in percent");
+            return true;
+        }
+        formatter_->SetMaxDecimalLength(number);
+    }
+    return true;
+}
+
+bool NumberFormatModule::SetNumberStyle(jerry_value_t styleValue)
+{
+    char *type = MallocStringOf(styleValue);
+    if ((type != nullptr) && (!strcmp(type, "percent"))) {
+        formatType_ = NumberFormatType::PERCENT;
+    } else if ((type == nullptr) || (!strcmp(type, "decimal"))) {
+        formatType_ = NumberFormatType::DECIMAL;
+    } else {
+        ACE_FREE(type);
+        return false;
+    }
+    ACE_FREE(type);
+    return true;
+}
+}
+}
+#endif
diff --git a/frameworks/src/core/modules/presets/number_format_module.h b/frameworks/src/core/modules/presets/number_format_module.h
new file mode 100644
index 0000000..d499e3a
--- /dev/null
+++ b/frameworks/src/core/modules/presets/number_format_module.h
@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_NUMBER_FORMAT_MODEL_H
+#define OHOS_ACELITE_NUMBER_FORMAT_MODEL_H
+
+#include "acelite_config.h"
+#ifdef FEATURE_NUMBER_FORMAT
+#include "list.h"
+#include "js_fwk_common.h"
+#include "number_format.h"
+#include "types.h"
+namespace OHOS {
+namespace ACELite {
+class NumberFormatModule final : public MemoryHeap {
+public:
+    ACE_DISALLOW_COPY(NumberFormatModule);
+    /**
+     * @brief register number format method and numberFormat object
+     */
+    static void Init(jerry_value_t intlHandle);
+
+    /**
+     * @brief delete the date format object
+     * @param the pointer need to be delete
+     */
+    static void DeleteNumberFormat(void *nativePointer);
+
+    // the handle to release the native value when the js value number format object is not needed.
+    static constexpr jerry_object_native_info_t gcCallback = {.free_cb = DeleteNumberFormat};
+
+private:
+    NumberFormatModule() : isUsingGroup_(true),
+                           formatType_(I18N::NumberFormatType::DECIMAL),
+                           formatter_(nullptr),
+                           localeInfo_(nullptr) {
+    }
+
+    ~NumberFormatModule()
+    {
+        if (formatter_ != nullptr) {
+            delete formatter_;
+            formatter_ = nullptr;
+        }
+        if (localeInfo_ != nullptr) {
+            delete localeInfo_;
+            localeInfo_ = nullptr;
+        }
+    }
+    static jerry_value_t CreateNumberFormat(const jerry_value_t func,
+                                            const jerry_value_t context,
+                                            const jerry_value_t args[],
+                                            const jerry_length_t argsNum);
+    static jerry_value_t Format(const jerry_value_t func,
+                                const jerry_value_t context,
+                                const jerry_value_t args[],
+                                const jerry_length_t argsNum);
+
+    static const char *SetStyle(NumberFormatModule &numModel,
+                         const jerry_value_t key,
+                         const jerry_value_t styleValue);
+
+    void SetUsingGroup(jerry_value_t styleValue);
+
+    bool SetMaximumFractionDigits(jerry_value_t styleValue);
+
+    bool SetNumberStyle(jerry_value_t styleValue);
+
+    bool isUsingGroup_;
+    I18N::NumberFormatType formatType_;
+    I18N::NumberFormat *formatter_;
+    I18N::LocaleInfo *localeInfo_;
+};
+}
+}
+#endif // FEATURE_NUMBER_FORAMT
+
+#endif // NUMBER_FORMAT_MODEL_H
diff --git a/src/core/modules/presets/preset_module.cpp b/frameworks/src/core/modules/presets/preset_module.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/preset_module.cpp
rename to frameworks/src/core/modules/presets/preset_module.cpp
diff --git a/src/core/modules/presets/preset_module.h b/frameworks/src/core/modules/presets/preset_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/preset_module.h
rename to frameworks/src/core/modules/presets/preset_module.h
diff --git a/src/core/modules/presets/profiler_module.cpp b/frameworks/src/core/modules/presets/profiler_module.cpp
old mode 100755
new mode 100644
similarity index 99%
rename from src/core/modules/presets/profiler_module.cpp
rename to frameworks/src/core/modules/presets/profiler_module.cpp
index 33a8939..09fc464
--- a/src/core/modules/presets/profiler_module.cpp
+++ b/frameworks/src/core/modules/presets/profiler_module.cpp
@@ -17,7 +17,7 @@
 namespace OHOS {
 namespace ACELite {
 /**
- * Useage:
+ * Usage:
  *     profiler.startTracing(5);
  *     xxxx
  *     profiler.stopTracing();
diff --git a/src/core/modules/presets/profiler_module.h b/frameworks/src/core/modules/presets/profiler_module.h
similarity index 100%
rename from src/core/modules/presets/profiler_module.h
rename to frameworks/src/core/modules/presets/profiler_module.h
diff --git a/src/core/modules/presets/render_module.cpp b/frameworks/src/core/modules/presets/render_module.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/render_module.cpp
rename to frameworks/src/core/modules/presets/render_module.cpp
diff --git a/src/core/modules/presets/render_module.h b/frameworks/src/core/modules/presets/render_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/render_module.h
rename to frameworks/src/core/modules/presets/render_module.h
diff --git a/src/core/modules/presets/require_module.cpp b/frameworks/src/core/modules/presets/require_module.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/require_module.cpp
rename to frameworks/src/core/modules/presets/require_module.cpp
diff --git a/src/core/modules/presets/require_module.h b/frameworks/src/core/modules/presets/require_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/require_module.h
rename to frameworks/src/core/modules/presets/require_module.h
diff --git a/frameworks/src/core/modules/presets/test/unittest/BUILD.gn b/frameworks/src/core/modules/presets/test/unittest/BUILD.gn
new file mode 100755
index 0000000..a35b3b3
--- /dev/null
+++ b/frameworks/src/core/modules/presets/test/unittest/BUILD.gn
@@ -0,0 +1,31 @@
+#Copyright (c) 2021 Huawei Device 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("//build/lite/config/test.gni")
+import("//foundation/ace/ace_engine_lite/test/ace_test_config.gni")
+
+unittest("js_frameworks_test_date_time") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [ "common/date_time_module_tdd_test.cpp" ]
+  deps = ace_test_deps
+}
+
+unittest("js_frameworks_test_number_format") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [ "common/number_format_module_tdd_test.cpp" ]
+  deps = ace_test_deps
+}
diff --git a/frameworks/src/core/modules/presets/test/unittest/common/date_time_module_tdd_test.cpp b/frameworks/src/core/modules/presets/test/unittest/common/date_time_module_tdd_test.cpp
new file mode 100755
index 0000000..e762fe4
--- /dev/null
+++ b/frameworks/src/core/modules/presets/test/unittest/common/date_time_module_tdd_test.cpp
@@ -0,0 +1,2335 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "date_time_module_tdd_test.h"
+#ifdef FEATURE_DATE_FORMAT
+#include "global.h"
+#include "js_app_context.h"
+#include "js_app_environment.h"
+namespace OHOS {
+namespace ACELite {
+void DateTimeModuleTddTest::SetUp()
+{
+    JsAppEnvironment *env = JsAppEnvironment::GetInstance();
+    if (env == nullptr) {
+        // should never happen
+        return;
+    }
+    env->InitJsFramework();
+}
+
+void DateTimeModuleTddTest::TearDown()
+{
+    JsAppEnvironment *env = JsAppEnvironment::GetInstance();
+    JsAppContext *context = JsAppContext::GetInstance();
+    if (env == nullptr || context == nullptr) {
+        // should never happen
+        return;
+    }
+    context->ReleaseStyles();
+    env->Cleanup();
+}
+
+jerry_value_t DateTimeModuleTddTest::RunJs(const char* js)
+{
+    const jerry_char_t *jsContent = reinterpret_cast<const jerry_char_t *>(js);
+    jerry_length_t len = strlen(js);
+    jerry_value_t result = jerry_eval(jsContent, len, JERRY_PARSE_NO_OPTS);
+    return result;
+}
+
+char* DateTimeModuleTddTest::FormatDate(const jerry_value_t dateTime,
+                                        const jerry_value_t args[],
+                                        const jerry_length_t argsNum)
+{
+    EXPECT_FALSE(IS_UNDEFINED(dateTime));
+    jerry_value_t format = jerryx_get_property_str(dateTime, "format");
+    EXPECT_FALSE(IS_UNDEFINED(format));
+    jerry_value_t result = CallJSFunction(format, dateTime, args, argsNum);
+    char* formatRes = MallocStringOf(result);
+    ReleaseJerryValue(format, result, VA_ARG_END_FLAG);
+    return formatRes;
+}
+
+/**
+ * @tc.name: DateTime_Locale_Test001
+ * @tc.desc: Test the effective value of locale
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Locale_Test001, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+    GLOBAL_ConfigLanguage("en-US");
+
+    /**
+     * @tc.steps : step1. set the system locale en-US, and create the
+     * date time object
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US');");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/9/28
+     * @tc.expected: step2. the format result is 10/28/20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 9, 4, 5)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "10/28/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3:set the formatter locale zh-CN and create the date time format object
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('zh-CN')");
+
+    /**
+     * @brief tc.steps:step4.get the format attribute and format the date
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2020/10/28")));
+    ACE_FREE(formatRes);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Locale_Test002
+ * @tc.desc: Test the effective and invalid value of locale
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Locale_Test002, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+    GLOBAL_ConfigLanguage("en-US");
+
+    /**
+     * @tc.steps:step1:create the dateTime format object and set the locale info en
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en')");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the date 2020/9/28
+     * @tc.expected:step2.the format result is 10/28/20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9,28);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) ||(strcmp(formatRes, "10/28/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTimeFormat object and set the locale info aaaa
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('aaaa');");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28
+     * @tc.expected:step4.the format result is 10/28/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "10/28/20")));
+    ReleaseJerryValue(args[0], dateTime, VA_ARG_END_FLAG);
+    ACE_FREE(formatRes);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Hour12_Group_Test003
+ * @tc.desc: test the hour12 style true, hour style numeric, set different minute and second style
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Hour12_Group_Test003, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTimeFormat object, set the locale info en-US,
+     * the hour12 style true, the hour style numeric, minute style numeric and
+     * second style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{hour12:true, hour:'numeric', minute:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step2.the format result is 2:04:05 PM
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 14, 4, 5);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2:04:05 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, set the locale info en-US,
+     * the hour12 style true, the hour style numeric, minute style numeric and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                "{hour12:true, hour:'numeric', minute:'numeric', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step4.the format result is 2:04:05 PM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2:04:05 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the dateTime format object, set the locale info en-US,
+     * the hour12 style true, the hour style numeric, minute style 2-digit and the second style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{hour12:true, hour:'numeric', minute:'2-digit', second:'numeric'});");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step6.the format result is 2:04:05 PM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2:04:05 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step7.create the dateTime format object, set the locale info en-US,
+     * the hour12 style true, the hour style numeric, minute style 2-digit and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', "
+                    "{hour12:true, hour:'numeric', minute:'2-digit', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step8.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step8.the format result is 2:04:05 PM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2:04:05 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Hour12_Group_Test004
+ * @tc.desc: test the hour12 style true, hour style 2-digit, set different minute and second style
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Hour12_Group_Test004, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTimeFormat object, set the locale info en-US,
+     * the hour12 style true, the hour style 2-digit, minute style numeric and
+     * second style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{hour12:true, hour:'2-digit', minute:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step2.the format result is 02:05:04 PM
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 14, 5,4);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "02:05:04 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, set the locale info en-US,
+     * the hour12 style true, the hour style 2-digit, minute style numeric and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{hour12:true, hour:'2-digit', minute:'numeric', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step4.the format result is 02:05:04 PM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "02:05:04 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the dateTime format object, set the locale info en-US,
+     * the hour12 style true, the hour style 2-digit, minute style 2-digit and the second style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                "{hour12:true, hour:'2-digit', minute:'2-digit', second:'numeric'});");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step6.the format result is 02:05:04 PM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "02:05:04 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step7.create the dateTime format object, set the locale info en-US,
+     * the hour12 style true, the hour style numeric, minute style 2-digit and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{hour12:true, hour:'2-digit', minute:'2-digit', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step8.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step8.the format result is 02:05:04 PM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "02:05:04 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Hour12_FALSE_Test005
+ * @tc.desc: test the hour12 style true, hour style numeric, set different minute and second style
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Hour12_False_Test_005, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTimeFormat object, set the locale info en-US,
+     * the hour12 style false, the hour style numeric, minute style numeric and
+     * second style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{hour12:false, hour:'numeric', minute:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step2.the format result is 14:05:04
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 14, 5,4);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "14:05:04")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, set the locale info en-US,
+     * the hour12 style false, the hour style numeric, minute style numeric and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{hour12:false, hour:'numeric', minute:'numeric', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step4.the format result is 14:05:04
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "14:05:04")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the dateTime format object, set the locale info en-US,
+     * the hour12 style false, the hour style numeric, minute style 2-digit and the second style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{hour12:false, hour:'numeric', minute:'2-digit', second:'numeric'});");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step6.the format result is 14:05:04
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "14:05:04")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step7.create the dateTime format object, set the locale info en-US,
+     * the hour12 style false, the hour style numeric, minute style 2-digit and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{hour12:false, hour:'numeric', minute:'2-digit', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step8.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step8.the format result is 14:05:04
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "14:05:04")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Hour12_False_Test_006
+ * @tc.desc: test the hour12 style true, hour style 2-digit, set different minute and second style
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Hour12_False_Test006, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTimeFormat object, set the locale info en-US,
+     * the hour12 style false, the hour style 2-digit, minute style numeric and
+     * second style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{hour12:false, hour:'2-digit', minute:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step2.the format result is 14:05:04
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 14, 5,4);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "14:05:04")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, set the locale info en-US,
+     * the hour12 style false, the hour style 2-digit, minute style numeric and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{hour12:false, hour:'2-digit', minute:'numeric', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step4.the format result is 14:05:04
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "14:05:04")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the dateTime format object, set the locale info en-US,
+     * the hour12 style false, the hour style 2-digit, minute style 2-digit and the second style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{hour12:false, hour:'2-digit', minute:'2-digit', second:'numeric'});");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step6.the format result is 14:05:04
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "14:05:04")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step7.create the dateTime format object, set the locale info en-US,
+     * the hour12 style false, the hour style 2-digit, minute style 2-digit and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step8.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step8.the format result is 14:05:04
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "14:05:04")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Hour_Minute_Second_Test007
+ * @tc.desc: test hour style numeric, set different minute and second style
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Hour_Minute_Second_Test007, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTimeFormat object, set the locale info en-US,
+     * the hour style numeric, minute style numeric and
+     * second style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{hour:'numeric', minute:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step2.the format result is 2:04:05 PM
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 14, 4, 5);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2:04:05 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, set the locale info en-US,
+     * the hour style numeric, minute style numeric and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'numeric', minute:'numeric', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step4.the format result is 2:04:05 PM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2:04:05 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the dateTime format object, set the locale info en-US,
+     * the hour12 style false, the hour style numeric, minute style 2-digit and the second style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'numeric', minute:'2-digit', second:'numeric'});");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step6.the format result is 2:04:05 PM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2:04:05 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step7.create the dateTime format object, set the locale info en-US,
+     * the hour style numeric, minute style 2-digit and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'numeric', minute:'2-digit', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step8.get the format attribute and format the date 2020/9/28 14:05:04
+     * @tc.expected:step8.the format result is 2:04:05 PM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2:04:05 PM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Hour_Minute_Second_Test_008
+ * @tc.desc: hour style 2-digit, set different minute and second style
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Hour_Minute_Second_Test008, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTimeFormat object, set the locale info en-US,
+     * the hour style 2-digit, minute style numeric and
+     * second style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{hour:'2-digit', minute:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the date 2020/9/28 08:05:04
+     * @tc.expected:step2.the format result is 08:05:04 AM
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 8, 5,4);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "08:05:04 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, set the locale info en-US,
+     * the hour style 2-digit, minute style numeric and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'2-digit', minute:'numeric', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28 08:05:04
+     * @tc.expected:step4.the format result is 08:05:04 AM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "08:05:04 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the dateTime format object, set the locale info en-US,
+     * the hour style 2-digit, minute style 2-digit and the second style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'2-digit', minute:'2-digit', second:'numeric'});");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the date 2020/9/28 08:05:04
+     * @tc.expected:step6.the format result is 08:05:04 AM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "08:05:04 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step7.create the dateTime format object, set the locale info en-US,
+     * the hour style 2-digit, minute style 2-digit and the second style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'2-digit', minute:'2-digit', second:'2-digit'});");
+
+    /**
+     * @tc.steps:step8.get the format attribute and format the date 2020/9/28 08:05:04
+     * @tc.expected:step8.the format result is 08:05:04 AM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "08:05:04 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Hour_Test003
+ * @tc.desc: test the different style group about hour and minute
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Hour_Minute_Test009, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the dateTime format object, set the locale info en-US,
+     * set the hour style numeric, the minute style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'numeric', minute:'numeric'});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the date 2020/9/28 8:05:04
+     * @tc.expected:step2.the format result is 8:05 AM
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 8, 5, 4);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "8:05 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, set the locale info en-US,
+     * set the hour style numeric, the minute style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'numeric', minute:'2-digit'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28 8:05:04
+     * @tc.expected:step4.the format result is 8:05 AM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "8:05 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the dateTime format object, set the locale info en-US,
+     * set the hour style 2-digit, the minute style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'2-digit', minute:'numeric'});");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the date 2020/9/28 8:05:04
+     * @tc.expected:step6.the format result is 8:05 AM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "08:05 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step7.create the dateTime format object, set the locale info en-US,
+     * set the hour style 2-digit, the minute style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'2-digit', minute:'2-digit'});");
+
+    /**
+     * @tc.steps:step8.get the format attribute and format the date 2020/9/28 8:05:04
+     * @tc.expected:step8.the format result is 8:05 AM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "08:05 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Time_Invalid_Test010
+ * @tc.desc: test the invalid time group
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Time_Invalid_Test010, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the dateTime format object, set the locale info en-US,
+     * set the hour style numeric, the second style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the date 2020/9/28 8:05:04
+     * @tc.expected:step2.the format result is 10/28/20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 8, 5, 4);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "10/28/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, set the locale info en-US,
+     * set the minute style numeric, the second style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {minute:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28 8:05:04
+     * @tc.expected:step4.the format result is 10/28/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "10/28/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Weekday_Test011
+ * @tc.desc: Test the different value of weekday
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Weekday_Test011, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTime format object, set the weekday style 1111
+     * and set the locale info en-US
+     * @tc.expected:step1.create dateTime format object, the error info is the weekday style is out of range
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {weekday:'1111'});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    jerry_value_t error = jerry_get_value_from_error(dateTime, true);
+    char* formatRes = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "EvalError: the weekday style value is out of range")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step2.create the dateTime format object, set the weekday style narrow
+     * and set the locale info en-US
+     * @tc.expected:step2.create dateTime format object failed, the error info is the weekday style
+     * is out range
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {weekday:'narrow'});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    error = jerry_get_value_from_error(dateTime, true);
+    formatRes = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "EvalError: the weekday style value is out of range")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, and set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {weekday:'long'});");
+
+    /**
+     * @tc.steps:step4.format the date 2020/9/28
+     * @tc.expected:step4.the format result is Wednesday
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28);");
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Wednesday")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Test012
+ * @tc.desc: Test the different value of year
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Year_Test012, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the dateTime object, set the year style 2-digit
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'short'});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    jerry_value_t error = jerry_get_value_from_error(dateTime, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_TRUE((errorInfo != nullptr) &&
+                (!strcmp(errorInfo, "EvalError: the year style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step2.create date time object, set the locale info zh-CN
+     * and set the year style 1111
+     * @tc.expected:step2. the date time object create failed, the error info is
+     * "RangeError: the year style is out of range"
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year : 1111});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    error = jerry_get_value_from_error(dateTime, true);
+    errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the year style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step3.create dateTime format object, set the locale info en-US,
+     * set the year style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'numeric'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the date 2020/9/28
+     * @tc.expected:step4.the format result is 10/28/20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(args[0], dateTime, VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "10/28/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Month_Test013
+ * @tc.desc: Test the enum value of month
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Month_Test013, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTimeFormat object, set the locale info zh-CN, and
+     * the month style 1111
+     * @tc.expected:
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {month:1111});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    jerry_value_t error = jerry_get_value_from_error(dateTime, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the month style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step2.create the dateTimeFormat object and set the month style narrow
+     * @tc.expected: step2.create the dateTimeFormat object failed, the error info is
+     * "RangeError:the month style is out of range"
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {month:'narrow'});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    error = jerry_get_value_from_error(dateTime, true);
+    errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the month style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, and set the locale info zh-CN,
+     * set the month style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {month:'long'});");
+
+    /**
+     * @tc.steps:step4.format the date 2020/9/28
+     * @tc.expected:step4.the format result is October
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "October")));
+    ReleaseJerryValue(args[0], dateTime, VA_ARG_END_FLAG);
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Day_Test014
+ * @tc.desc: Test the invalid value of day style
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Day_Test014, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTime format object, set the locale info zh-CN and
+     * the day style 1111
+     * @tc.expected:step1.create dateTime object failed, return the error info
+     * "RangeError: the day style is out of range"
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {day: 11111})");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    jerry_value_t error = jerry_get_value_from_error(dateTime, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the day style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps: step2.create dateTime format object, set the locale info en-US,
+     * and set the day style long
+     * @tc.expected: step2.create the dateTime format object failed, the format result
+     * is "RangeError: the day style is out of range"
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {day:'long'});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    error = jerry_get_value_from_error(dateTime, true);
+    errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the day style value is out of range")));
+    ACE_FREE(errorInfo);
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, and set the locale info zh-CN,
+     * set the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {day:'numeric'});");
+
+    /**
+     * @tc.steps:step4.format the date 2020/9/28
+     * @tc.expected:step4.the format result is 10/28/20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "10/28/20")));
+    ReleaseJerryValue(args[0], dateTime, VA_ARG_END_FLAG);
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Hour_Test015
+ * @tc.desc: Test the invalid value of month
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Hour_Test015, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTime format object and set the locale info en-US,
+     * set the hour style 1111
+     * @tc.expected:step1.create dateTime format object failed, the error info is
+     * the hour style value is out of range
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:1111});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    jerry_value_t error = jerry_get_value_from_error(dateTime, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the hour style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step2.create the dateTime format object failed, and set the locale info en-US,
+     * the hour style long
+     * @tc.expected:step2.create dateTime format failed, the error info is the hour style is out of range
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'long'});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    error = jerry_get_value_from_error(dateTime, true);
+    errorInfo = MallocStringOf(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the hour style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, and set the locale info zh-CN,
+     * set the hour style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {hour:'numeric'});");
+
+    /**
+     * @tc.steps:step4.format the date 2020/9/28 8:05:04
+     * @tc.expected:step4.the format result is 10/28/20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 8, 5, 4);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "10/28/20")));
+    ReleaseJerryValue(args[0], dateTime, VA_ARG_END_FLAG);
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+
+/**
+ * @tc.name: DateTime_Minute_Test016
+ * @tc.desc: Test the invalid value of minute
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Minute_Test016, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTime format object and set the locale info en-US,
+     * set the minute style 1111
+     * @tc.expected:step1.create dateTime format object failed, the error info is
+     * the hour style value is out of range
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {minute:1111});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    jerry_value_t error = jerry_get_value_from_error(dateTime, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the minute style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step2.create the dateTime format object failed, and set the locale info en-US,
+     * the minute style long
+     * @tc.expected:step2.create dateTime format failed, the error info is the minute style is out of range
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {minute:'long'});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    error = jerry_get_value_from_error(dateTime, true);
+    errorInfo = MallocStringOf(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the minute style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, and set the locale info zh-CN,
+     * set the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {minute:'numeric'});");
+
+    /**
+     * @tc.steps:step4.format the date 2020/9/28 8:05:04
+     * @tc.expected:step4.the format result is 10/28/20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 8, 5, 4);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "10/28/20")));
+    ReleaseJerryValue(args[0], dateTime, VA_ARG_END_FLAG);
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Second_Test017
+ * @tc.desc: Test the enum and invalid second style
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Second_Test017, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTime format object and set the locale info en-US,
+     * set the second style 1111
+     * @tc.expected:step1.create dateTime format object failed, the error info is
+     * the second style value is out of range
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {second:1111});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    jerry_value_t error = jerry_get_value_from_error(dateTime, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the second style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step2.create the dateTime format object failed, and set the locale info en-US,
+     * the hour style long
+     * @tc.expected:step2.create dateTime format failed, the error info is the hour style is out of range
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {second:'long'});");
+    EXPECT_TRUE(jerry_value_is_error(dateTime));
+    error = jerry_get_value_from_error(dateTime, true);
+    errorInfo = MallocStringOf(error);
+    EXPECT_FALSE((errorInfo == nullptr) || (strcmp(errorInfo, "EvalError: the second style value is out of range")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, and set the locale info en-US,
+     * set the second style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {second:'numeric'});");
+
+    /**
+     * @tc.steps:step4.format the date 2020/9/28 9:05:04
+     * @tc.expected:step4.the format result is 10/28/20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28, 9, 5, 4);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "10/28/20")));
+    ReleaseJerryValue(args[0], dateTime, VA_ARG_END_FLAG);
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Hour_Test018
+ * @tc.desc: Test the special locale info
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Special_Time_Test018, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create dateTime format object, set the locale info zh-Hans-HK
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('zh-Hans-HK');");
+
+    /**
+     * @tc.steps:step2.get the format attribute, and format the date 2020/9/28
+     * @tc.expected:step2.the format result is 2020/10/28
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 9, 28);");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "28/10/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the dateTime format object, set the locale info zh-Hant-TW
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('zh-Hant-TW');");
+
+    /**
+     * @tc.steps:step4.get the format attribute, and format the date 2020/9/28
+     * @tc.expected:step4.the format result is 2020/10/28
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2020/10/28")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps5.create the dateTime format object, set the locale info zh-Hant-CN
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('zh-Hant-CN');");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the date 2020/9/28
+     * @tc.expected:step6.the format result is 2020/10/28
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "2020/10/28")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test019
+ * @tc.desc: Test the different month style when year and day style is numeric
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Year_Month_Day_Test019, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style long, the day style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'numeric', month:'long', day:'numeric'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/28
+     * @tc.expected: step2. the format result is October 28, 2020
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 28)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "June 28, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style short, the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'numeric', month:'short', day:'numeric'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/28
+     * @tc.expected: step4. the format result is Oct 28, 2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Jun 28, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style numeric, the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'numeric', month:'numeric', day:'numeric'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/28
+     * @tc.expected: step6. the format result is 6/28/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "6/28/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style 2-digit, the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'numeric', month:'2-digit', day:'numeric'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/28
+     * @tc.expected: step8. the format result is 06/28/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "06/28/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test020
+ * @tc.desc: Test the different month style when year style is numeric and day style is 2-digit
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Year_Month_Day_Test020, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style long, the day style 2-digit
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'numeric', month:'long', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is June 04, 2020
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "June 04, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style short, the day style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'numeric', month:'short', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Jun 04, 2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Jun 04, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style numeric, the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'numeric', month:'numeric', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4
+     * @tc.expected: step6. the format result is 6/04/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "6/04/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style 2-digit, the day style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'numeric', month:'2-digit', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is 06/04/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "06/04/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test021
+ * @tc.desc: Test the different month style when year style is 2-digit and the day style is numeric
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Year_Month_Day_Test021, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style long, the day style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'long', day:'numeric'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is June 4, 20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "June 4, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style short, the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'short', day:'numeric'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Jun 4, 20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Jun 4, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style numeric, the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'numeric', day:'numeric'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4
+     * @tc.expected: step6. the format result is 6/4/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "6/4/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style 2-digit, the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'2-digit', day:'numeric'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is 06/4/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "06/4/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test022
+ * @tc.desc: Test the different month style when year style is 2-digit and the month style is 2-digit
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, DateTime_Year_Month_Day_Test022, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style long, the day style 2-digit
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'long', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is June 04, 20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "June 04, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style short, the day style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'short', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Jun 04, 20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Jun 04, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style numeric, the day style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'numeric', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4
+     * @tc.expected: step6. the format result is 6/04/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "6/04/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style 2-digit, the day style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'2-digit', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is 06/04/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "06/04/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: Weekday_Year_Month_Day_Test023
+ * @tc.desc: Test the different month style when year style is numeric and day style is 2-digit,
+ * the weekday style is long
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, Weekday_Year_Month_Day_Test023, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style long, the day style 2-digit, set the weekday style long
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{year:'numeric', month:'long', day:'2-digit', weekday:'long'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is Thursday, June 04, 2020
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, June 04, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style short, the day style 2-digit,
+     * set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{year:'numeric', month:'short', day:'2-digit', weekday:'long'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Thursday, Jun 04, 2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, Jun 04, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style numeric, the day style 2-digit,
+     * set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long', year:'numeric', month:'numeric', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4
+     * @tc.expected: step6. the format result is Thursday, 6/04/2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, 6/04/2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style 2-digit, the day style 2-digit,
+     * set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long', year:'numeric', month:'2-digit', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is Thursday, 06/04/2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, 06/04/2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: Weekday_Year_Month_Day_Test024
+ * @tc.desc: Test the different month style when year style is 2-digit, the day style is numeric,
+ * and the weekday style long
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, Weekday_Year_Month_Day_Test024, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style long, the day style numeric,
+     * and set the weekday style long
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{weekday:'long', year:'2-digit', month:'long', day:'numeric'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is Thursday, June 4, 20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, June 4, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style short, the day style numeric, and the weekday style is long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long', year:'2-digit', month:'short', day:'numeric'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Thursday, Jun 4, 20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, Jun 4, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style numeric, the day style numeric,
+     * and set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long', year:'2-digit', month:'numeric', day:'numeric'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4
+     * @tc.expected: step6. the format result is Thursday, 6/4/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, 6/4/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style 2-digit, the day style numeric,
+     * and set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long', year:'2-digit', month:'2-digit', day:'numeric'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is Thursday, 06/4/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, 06/4/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test022
+ * @tc.desc: Test the different month style when year style is 2-digit and the month style is 2-digit,
+ * and set the weekday style long
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, Weekday_Year_Month_Day_Test025, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style long, the day style 2-digit,
+     * and set the weekday style long
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{weekday:'long', year:'2-digit', month:'long', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is Thursday, June 04, 20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, June 04, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style short, the day style numeric,
+     * and set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long', year:'2-digit', month:'short', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Thursday, Jun 04, 20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, Jun 04, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style numeric, the day style numeric,
+     * and set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long', year:'2-digit', month:'numeric', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/28
+     * @tc.expected: step6. the format result is Thursday, 6/04/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, 6/04/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style 2-digit, the day style numeric,
+     * and set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long', year:'2-digit', month:'2-digit', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is Thursday, 06/04/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, 06/04/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test020
+ * @tc.desc: Test the different month style when year style is numeric and day style is 2-digit,
+ * set the weekday style long
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, Weekday_Year_Month_Day_Test026, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style long, the day style numeric,
+     * and set the weekday style long
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{weekday:'long', year:'numeric', month:'long', day:'numeric'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is Thursday, June 4, 2020
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, June 4, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style short, the day style numeric,
+     * and set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long',year:'numeric', month:'short', day:'numeric'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Thursday, Jun 4, 2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, Jun 4, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style numeric, the day style numeric,
+     * and set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long',year:'numeric', month:'numeric', day:'numeric'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4
+     * @tc.expected: step6. the format result is Thursday, 6/4/2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, 6/4/2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style 2-digit, the day style 2-digit,
+     * and set the weekday style long
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'long',year:'numeric', month:'2-digit', day:'numeric'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is Thursday, 06/4/2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thursday, 06/4/2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test021
+ * @tc.desc: Test the different month style when year style is 2-digit and the day style is numeric,
+ * and set the weekday style long
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, Weekday_Year_Month_Day_Test027, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style long, the day style numeric,
+     * and set the weekday style short
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{weekday:'short', year:'numeric', month:'long', day:'numeric'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is Thu, June 4, 2020
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, June 4, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style short, the day style numeric,
+     * and set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'numeric', month:'short', day:'numeric'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Thu, Jun 4, 2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, Jun 4, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style numeric, the day style numeric,
+     * set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'numeric', month:'numeric', day:'numeric'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/28
+     * @tc.expected: step6. the format result is Thu, 6/4/2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, 6/4/2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style 2-digit, the day style numeric,
+     * set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'numeric', month:'2-digit', day:'numeric'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is Thu, 06/4/2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, 06/4/2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test022
+ * @tc.desc: Test the different month style when year style is 2-digit and the month style is 2-digit
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, Weekday_Year_Month_Day_Test028, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style long, the day style 2-digit
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{weekday:'short', year:'numeric', month:'long', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/28
+     * @tc.expected: step2. the format result is October 28, 2020
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, June 04, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style short, the day style 2-digit,
+     * set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'numeric', month:'short', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Thu, Jun 04, 2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, Jun 04, 2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style numeric, the day style 2-digit,
+     * set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'numeric', month:'numeric', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4
+     * @tc.expected: step6. the format result is Thu, 6/04/2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, 6/04/2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style numeric, the month style 2-digit, the day style 2-digit
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'numeric', month:'2-digit', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is Thu, 06/04/2020
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, 06/04/2020")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test022
+ * @tc.desc: Test the different month style when year style is 2-digit and the month style is 2-digit,
+ * set the weekday style short
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, Weekday_Year_Month_Day_Test029, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style long, the day style 2-digit, the weekday style short
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{weekday:'short', year:'2-digit', month:'long', day:'numeric'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is Thu, June 4, 20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, June 4, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style short, the day style numeric,
+     * set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'2-digit', month:'short', day:'numeric'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Thu, Jun 4, 20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, Jun 4, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style numeric, the day style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'2-digit', month:'numeric', day:'numeric'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4
+     * @tc.expected: step6. the format result is Thu, 6/4/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, 6/4/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style 2-digit, the day style numeric,
+     * set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'2-digit', month:'2-digit', day:'numeric'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is Thu, 06/4/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, 06/4/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: DateTime_Year_Month_Day_Test022
+ * @tc.desc: Test the different month style when year style is 2-digit and the month style is 2-digit
+ * and set the weekday style short
+ * @tc.require: AR000EUO7G
+ */
+HWTEST_F(DateTimeModuleTddTest, Weekday_Year_Month_Day_Test030, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style long, the day style 2-digit,
+     * and set the weekday style short
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                                    "{weekday:'short', year:'2-digit', month:'long', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4
+     * @tc.expected: step2. the format result is Thu, June 04, 20
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, June 04, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style short, the day style 2-digit,
+     * and set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'2-digit', month:'short', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4
+     * @tc.expected: step4. the format result is Thu, Jun 04, 20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, Jun 04, 20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style numeric, the day style 2-digit,
+     * set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'2-digit', month:'numeric', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4
+     * @tc.expected: step6. the format result is Thu, 6/04/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, 6/04/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style 2-digit, the day style 2-digit,
+     * set the weekday style short
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US',"
+                    "{weekday:'short', year:'2-digit', month:'2-digit', day:'2-digit'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4
+     * @tc.expected: step8. the format result is Thu, 06/04/20
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, 06/04/20")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: Date_Time_Pattern_Test031
+ * @tc.desc: Test different date and time group test
+ * @tc.require: SR000ERCD4
+ */
+HWTEST_F(DateTimeModuleTddTest, Date_Time_Pattern_Test031, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps : step1. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style long, the day style 2-digit, set weekday style short,
+     * the hour style numeric, minute style numeric and second style numeric
+     */
+    jerry_value_t dateTime = RunJs("new Intl.DateTimeFormat('en-US', {weekday:'short', year:'2-digit',"
+                                "month:'long', day:'2-digit', hour:'numeric', minute:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps: step2. set the format time 2020/5/4 8:05:04
+     * @tc.expected: step2. the format result is Thu, June 04, 20 8:05:04 AM
+     */
+    jerry_value_t args[1];
+    args[0] = RunJs("new Date(2020, 5, 4, 8, 5, 4)");
+    char* formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, June 04, 20 8:05:04 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step3. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style long, the day style 2-digit,
+     * hour style numeric and minute style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {weekday:'short', year:'2-digit', month:'long',"
+                    "day:'2-digit', hour:'numeric', minute:'numeric'});");
+
+    /**
+     * @tc.steps: step4. set the format time 2020/5/4 8:05:04
+     * @tc.expected: step4. the format result is Thu, June 04, 20 8:05 AM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "Thu, June 04, 20 8:05 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step5. create dateTime format object, set the locale info en-US,
+     * set the year style , the month style numeric, the day style numeric, the hour style numeric,
+     * the minute style numeric and second style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'long', day:'2-digit',"
+                    "hour:'numeric', minute:'numeric', second:'numeric'});");
+
+    /**
+     * @tc.steps: step6. set the format time 2020/5/4 8:05:04
+     * @tc.expected: step6. the format result is June 04, 20 8:05:04 AM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    jerry_release_value(dateTime);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "June 04, 20 8:05:04 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps : step7. create dateTime format object, set the locale info en-US,
+     * set the year style 2-digit, the month style 2-digit, the day style 2-digit,
+     * hour style numeric and minute style numeric
+     */
+    dateTime = RunJs("new Intl.DateTimeFormat('en-US', {year:'2-digit', month:'2-digit',"
+                    "day:'2-digit', hour:'numeric', minute:'numeric'});");
+
+    /**
+     * @tc.steps: step8. set the format time 2020/5/4 8:05:04
+     * @tc.expected: step8. the format result is 06/04/20 8:05 AM
+     */
+    formatRes = FormatDate(dateTime, args, 1);
+    ReleaseJerryValue(dateTime, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "06/04/20 8:05 AM")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+    TDD_CASE_END();
+}
+
+void DateTimeModuleTddTest::RunTests()
+{
+#ifndef TDD_ASSERTIONS
+    DateTime_Locale_Test001();
+    DateTime_Locale_Test002();
+    DateTime_Hour12_Group_Test003();
+    DateTime_Hour12_Group_Test004();
+    DateTime_Hour12_False_Test_005();
+    DateTime_Hour12_False_Test006();
+    DateTime_Hour_Minute_Second_Test007();
+    DateTime_Hour_Minute_Second_Test008();
+    DateTime_Hour_Minute_Test009();
+    DateTime_Time_Invalid_Test010();
+    DateTime_Weekday_Test011();
+    DateTime_Year_Test012();
+    DateTime_Month_Test013();
+    DateTime_Day_Test014();
+    DateTime_Hour_Test015();
+    DateTime_Minute_Test016();
+    DateTime_Second_Test017();
+    DateTime_Special_Time_Test018();
+    DateTime_Year_Month_Day_Test019();
+    DateTime_Year_Month_Day_Test020();
+    DateTime_Year_Month_Day_Test021();
+    DateTime_Year_Month_Day_Test022();
+    Weekday_Year_Month_Day_Test023();
+    Weekday_Year_Month_Day_Test024();
+    Weekday_Year_Month_Day_Test025();
+    Weekday_Year_Month_Day_Test026();
+    Weekday_Year_Month_Day_Test027();
+    Weekday_Year_Month_Day_Test028();
+    Weekday_Year_Month_Day_Test029();
+    Weekday_Year_Month_Day_Test030();
+    Date_Time_Pattern_Test031();
+#endif
+}
+}
+}
+#endif
diff --git a/frameworks/src/core/modules/presets/test/unittest/common/date_time_module_tdd_test.h b/frameworks/src/core/modules/presets/test/unittest/common/date_time_module_tdd_test.h
new file mode 100755
index 0000000..440aa08
--- /dev/null
+++ b/frameworks/src/core/modules/presets/test/unittest/common/date_time_module_tdd_test.h
@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef DATE_TIME_MODULE_TDD_TEST_H
+#define DATE_TIME_MODULE_TDD_TEST_H
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "acelite_config.h"
+#ifdef FEATURE_DATE_FORMAT
+#include "test_common.h"
+#include "js_fwk_common.h"
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class DateTimeModuleTddTest : public testing::Test {
+#else
+class DateTimeModuleTddTest {
+#endif
+public:
+    void RunTests();
+
+    void SetUp();
+
+    void TearDown();
+
+    void DateTime_Locale_Test001();
+
+    void DateTime_Locale_Test002();
+
+    void DateTime_Hour12_Group_Test003();
+
+    void DateTime_Hour12_Group_Test004();
+
+    void DateTime_Hour12_False_Test_005();
+
+    void DateTime_Hour12_False_Test006();
+
+    void DateTime_Hour_Minute_Second_Test007();
+
+    void DateTime_Hour_Minute_Second_Test008();
+
+    void DateTime_Hour_Minute_Test009();
+
+    void DateTime_Time_Invalid_Test010();
+
+    void DateTime_Weekday_Test011();
+
+    void DateTime_Year_Test012();
+
+    void DateTime_Month_Test013();
+
+    void DateTime_Day_Test014();
+
+    void DateTime_Hour_Test015();
+
+    void DateTime_Minute_Test016();
+
+    void DateTime_Second_Test017();
+
+    void DateTime_Special_Time_Test018();
+
+    void DateTime_Year_Month_Day_Test019();
+
+    void DateTime_Year_Month_Day_Test020();
+
+    void DateTime_Year_Month_Day_Test021();
+
+    void DateTime_Year_Month_Day_Test022();
+
+    void Weekday_Year_Month_Day_Test023();
+
+    void Weekday_Year_Month_Day_Test024();
+
+    void Weekday_Year_Month_Day_Test025();
+
+    void Weekday_Year_Month_Day_Test026();
+
+    void Weekday_Year_Month_Day_Test027();
+
+    void Weekday_Year_Month_Day_Test028();
+
+    void Weekday_Year_Month_Day_Test029();
+
+    void Weekday_Year_Month_Day_Test030();
+
+    void Date_Time_Pattern_Test031();
+
+    jerry_value_t RunJs(const char* js);
+
+    char* FormatDate(const jerry_value_t dateTime, const jerry_value_t args[], const jerry_length_t argsNum);
+};
+}
+}
+#endif // FEATURE_DATE_FORMAT
+#endif // DATE_TIME_MODULE_TDD_TEST_H
diff --git a/frameworks/src/core/modules/presets/test/unittest/common/number_format_module_tdd_test.cpp b/frameworks/src/core/modules/presets/test/unittest/common/number_format_module_tdd_test.cpp
new file mode 100755
index 0000000..eb65e92
--- /dev/null
+++ b/frameworks/src/core/modules/presets/test/unittest/common/number_format_module_tdd_test.cpp
@@ -0,0 +1,785 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "number_format_module_tdd_test.h"
+#ifdef FEATURE_NUMBER_FORMAT
+#include "global.h"
+#include "js_app_context.h"
+#include "js_app_environment.h"
+namespace OHOS {
+namespace ACELite {
+void NumberFormatModuleTddTest::SetUp()
+{
+    JsAppEnvironment *env = JsAppEnvironment::GetInstance();
+    if (env == nullptr) {
+        // should never happen
+        return;
+    }
+    env->InitJsFramework();
+}
+
+void NumberFormatModuleTddTest::TearDown()
+{
+    JsAppEnvironment *env = JsAppEnvironment::GetInstance();
+    JsAppContext *context = JsAppContext::GetInstance();
+    if (env == nullptr || context == nullptr) {
+        // should never happen
+        return;
+    }
+    context->ReleaseStyles();
+    env->Cleanup();
+}
+
+jerry_value_t NumberFormatModuleTddTest::RunJs(const char* js)
+{
+    const jerry_char_t *jsContent = reinterpret_cast<const jerry_char_t *>(js);
+    jerry_length_t len = strlen(js);
+    jerry_value_t result = jerry_eval(jsContent, len, JERRY_PARSE_NO_OPTS);
+    return result;
+}
+
+char* NumberFormatModuleTddTest::FormatNumber(const jerry_value_t numberFormat,
+                                              const jerry_value_t *args,
+                                              const jerry_length_t argsNum)
+{
+    if (IS_UNDEFINED(numberFormat)) {
+        printf("create dateTime failed\n");
+        return nullptr;
+    }
+    jerry_value_t format = jerryx_get_property_str(numberFormat, "format");
+    if (IS_UNDEFINED(format)) {
+        printf("get the format attribute failed\n");
+        jerry_release_value(numberFormat);
+        return nullptr;
+    }
+    jerry_value_t result = CallJSFunction(format, numberFormat, args, argsNum);
+    char* formatRes = MallocStringOf(result);
+    ReleaseJerryValue(format, result, VA_ARG_END_FLAG);
+    return formatRes;
+}
+
+/**
+ * @tc.name: NumberFormat_Locale_Test001
+ * @tc.desc: test the locale info support
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_Locale_Test001, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+    GLOBAL_ConfigLanguage("zh-CN");
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-u-nu-hanidec
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-Hans-CN')");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the number 9
+     * @tc.expected:step2.the format result is 9
+     */
+    jerry_value_t args[1];
+    int formatNum = 9;
+    args[0] = jerry_create_number(formatNum);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "9")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the number format object
+     */
+    numberFormat = RunJs("new Intl.NumberFormat();");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the number 9
+     * @tc.expected:step4.the format result is 9
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "9")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the number format object and set the locale info testaaaa
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('testaaaa');");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the number 9
+     * @tc.expected:step6.the format result is 9
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "9")));
+    ReleaseJerryValue(args[0], numberFormat, VA_ARG_END_FLAG);
+    ACE_FREE(formatRes);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_Style_Test002
+ * @tc.desc: test the enum style value
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_Style_Test002, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @steps:step1.create the number format object, set the locale info zh-CN
+     * and set the style decimal
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'decimal'});");
+
+    /**
+     * @steps:step2.get the format attribute and format the number 0.9
+     * @expected:step2.the format result is 0.9
+     */
+    jerry_value_t args[1];
+    const double num = 0.9;
+    args[0] = jerry_create_number(num);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "0.9")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the numberFormat object, set the locale info zh-CN
+     * and the style percent
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent'});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the number 0.9
+     * @tc.expected:step4.the format result is 90%
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "90%")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the numberFormat object, set the locale info zh-CN
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN');");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the number 0.9
+     * @tc.expected:step6.the format result is 0.9
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "0.9")));
+    ReleaseJerryValue(numberFormat, args[0], VA_ARG_END_FLAG);
+    ACE_FREE(formatRes);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_Style_Test003
+ * @tc.desc: test the invalid value of style
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_Style_Test003, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object and set the style percent
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat({style:'percent'});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the number 0.9
+     * @tc.expected:step2.the format result is 0.9
+     */
+    jerry_value_t args[1];
+    double number = 0.9;
+    args[0] = jerry_create_number(number);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    ReleaseJerryValue(numberFormat, args[0], VA_ARG_END_FLAG);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "0.9")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the numberFormat object, set the locale info zh-CN
+     * and the number style testaaaa
+     * @tc.expected:step3.the format result is "the style is invalid"
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'testaaa'});");
+    EXPECT_TRUE(jerry_value_is_error(numberFormat));
+    jerry_value_t error = jerry_get_value_from_error(numberFormat, true);
+    formatRes = MallocStringOf(error);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "RangeError: the style is invalid")));
+    jerry_release_value(error);
+    ACE_FREE(formatRes);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_Group_Test004
+ * @tc.desc: test the enum value in useGroup
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_Group_Test004, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-CN,
+     * set the useGroup attribute false
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {useGrouping:false});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the number 123456
+     * @tc.expected:step2.the format result is 123456
+     */
+    jerry_value_t args[1];
+    double num = 123456;
+    args[0] = jerry_create_number(num);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123456")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the numberFormat object and set the locale info zh-CN
+     * and set the useGrouping attribute true
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {useGrouping:true});");
+
+    /**
+     * @tc.steps:step4.get the format attribute 123456
+     * @tc.expected:step4.the format result is 123,456
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123,456")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step5.create the numberFormat object and set the locale info zh-CN
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN');");
+
+    /**
+     * @tc.steps:step6.get the format attribute and format the number 123456
+     * @tc.expected:step6.the format result is 123,456
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123,456")));
+    ReleaseJerryValue(numberFormat, args[0], VA_ARG_END_FLAG);
+    ACE_FREE(formatRes);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_Group_Test005
+ * @tc.desc: test the invalid value of useGroup
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_Group_Test005, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object and set the
+     * useGrouping attribute false
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat({useGrouping:false})");
+
+    /**
+     * @tc.step2:step2.get the format attribute, and format the number 123456
+     * @tc.expected:step2.the format result is 123,456
+     */
+    jerry_value_t args[1];
+    double num = 123456;
+    args[0] = jerry_create_number(num);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123,456")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the number format object and set the locale info zh-CN
+     * the useGrouping testaaaa
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {useGrouping:'testaaa'});");
+
+    /**
+     * @tc.steps:get the format attribute and format the number 123456
+     * @tc.expected: the format result is 123,456
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123,456")));
+    ReleaseJerryValue(numberFormat, args[0], VA_ARG_END_FLAG);
+    ACE_FREE(formatRes);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_Group_Test006
+ * @tc.desc: test the enum value of useGrouping in percent
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_Group_Test006, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-CN
+     * and set the style percent and useGrouping true
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', useGrouping:true});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the number 123.456
+     * @tc.expected:step2.the format result is 12,346%
+     */
+    jerry_value_t args[1];
+    const double num = 123.456;
+    args[0] = jerry_create_number(num);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "12,346%")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the numberFormat object, set the locale info zh-CN
+     * set the number style percent and the useGrouping false
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', useGrouping:false})");
+    /**
+     * @tc.steps:step4.get the format attribute and format the number 123.456
+     * @tc.expected:step4.the format result is 12346%
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "12346%")));
+    ReleaseJerryValue(numberFormat, args[0], VA_ARG_END_FLAG);
+    ACE_FREE(formatRes);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_Group_Test007
+ * @tc.desc: test the invalid value of useGroup in percent
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_Group_Test007, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the style percent
+     * and set the useGrouping false
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat({style:'percent', useGrouping:false});");
+    /**
+     * @tc.steps:step2.get the format attribute and format the number 123.456
+     * @tc.expected:step2.the format result is 123.456
+     */
+    jerry_value_t args[1];
+    const double formatNum = 123.456;
+    args[0] = jerry_create_number(formatNum);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123.456")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the numberFormat object, set the locale info zh-CN, the percent style
+     * is percent and the useGrouping is testaaaa
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', useGrouping:'testaaaa'})");
+    /**
+     * @tc.steps:step4.get the format attribute and format the number 123.456
+     * @tc.expected:step4.the format result is 12,346%
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "12,346%")));
+    ReleaseJerryValue(args[0], numberFormat, VA_ARG_END_FLAG);
+    ACE_FREE(formatRes);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_MinimumFractionDigit_Test008
+ * @tc.desc: test the correct value of minimumFeactionDigits
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_MinimumFractionDigit_Test008, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-CN
+     * and set the minimumFractionDigits 2
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {minimumFractionDigits:2});");
+    /**
+     * @tc.steps:step2.get the format attribute and format the number 1.23456
+     * @tc.expected:step2.the format result is 1.235
+     */
+    jerry_value_t args[1];
+    const double num = 1.23456;
+    args[0] = jerry_create_number(num);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "1.235")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the object numberFormat object, set the locale info zh-CN
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {minimumFractionDigits:6});");
+    formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "1.234560")));
+    ACE_FREE(formatRes);
+    ReleaseJerryValue(numberFormat, args[0], VA_ARG_END_FLAG);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_MinimumFractionDigit_Test009
+ * @tc.desc: test the invalid value of minimumFeactionDigits
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_MinimumFractionDigit_Test009, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-CN,
+     * set the minimumFractionDigits -1
+     * @tc.expected:step2.the format result is "the minimumFractionDigit is invalid"
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {minimumFractionDigits:-1});");
+    EXPECT_TRUE(jerry_value_is_error(numberFormat));
+    jerry_value_t error = jerry_get_value_from_error(numberFormat, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) ||
+                (strcmp(errorInfo, "RangeError: the minimumFractionDigits is invalid")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step2.create the numberFormat object, set the locale info zh-CN
+     * and set the minimumFractionDigits 21
+     * @tc.expected:step2.the format result is "the minimumFractionDigit is invalid"
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {minimumFractionDigits:21});");
+    EXPECT_TRUE(jerry_value_is_error(numberFormat));
+    error = jerry_get_value_from_error(numberFormat, true);
+    errorInfo = MallocStringOf(error);
+    EXPECT_FALSE((errorInfo == nullptr) ||
+                (strcmp(errorInfo, "RangeError: the minimumFractionDigits is invalid")));
+    jerry_release_value(error);
+    ACE_FREE(errorInfo);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_MinimumFractionDigit_Test010
+ * @tc.desc: test the value of minimumFeactionDigits in percent
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_MinimumFractionDigit_Test010, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-CN
+     * set the minimumFractionDigits 2, set the style attribute percent
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', minimumFractionDigits:2});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the number 1.23456
+     * @tc.expected:step2.the format result is 123%
+     */
+    jerry_value_t args[1];
+    const double num = 1.23456;
+    args[0] = jerry_create_number(num);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123%")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the numberFormat object, set the style percent and the minimumFractionDigit
+     * 5
+     */
+    GLOBAL_ConfigLanguage("zh-CN");
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', minimumFractionDigit:5});");
+
+    /**
+     * @tc.steps:step4.get the format attribute and format the number 1.23456
+     * @tc.ecpected:step4.the format result is 123%
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123%")));
+    jerry_release_value(numberFormat);
+    ACE_FREE(formatRes);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_MinimumFractionDigit_Test011
+ * @tc.desc: test the value of minimumFeactionDigits in percent
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_MinimumFractionDigit_Test011, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-CN,
+     * and set the style percent and set the minimumFractionDigit -1
+     * @tc.expected:step1.numberFormat object create failed, the error info is
+     * "the minimumFractionDigits is invalid"
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', minimumFractionDigits:-1});");
+    EXPECT_TRUE(jerry_value_is_error(numberFormat));
+    jerry_value_t error = jerry_get_value_from_error(numberFormat, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_TRUE((errorInfo != nullptr) &&
+                (!strcmp(errorInfo, "RangeError: the minimumFractionDigits is invalid")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step2.create the numberFormat object, set the style percent, set the minimumFractionDigit 21
+     * @tc.expected:step2.the numberFormat object create failed, the error info is
+     * "the minimumFractionDigits is invalid"
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', minimumFractionDigits:21});");
+    EXPECT_TRUE(jerry_value_is_error(numberFormat));
+    error = jerry_get_value_from_error(numberFormat, true);
+    errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) ||
+                (strcmp(errorInfo, "RangeError: the minimumFractionDigits is invalid")));
+    ACE_FREE(errorInfo);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_MaxmumFractionDigit_Test012
+ * @tc.desc: test the value of maxmumFractionDigits in percent
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_MaxmumFractionDigit_Test012, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the number format object, set the locale info zh-CN
+     * the maxmumFractionDigit 4
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {maximumFractionDigits:4});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the number 1.23456
+     * @tc.expected:step2.the format result is 1.2346
+     */
+    jerry_value_t args[1];
+    const double num = 1.23456;
+    args[0] = jerry_create_number(num);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "1.2346")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create the numberFormat object, set the maxmumFractionDigit 4
+     */
+    GLOBAL_ConfigLanguage("zh-CN");
+    numberFormat = RunJs("new Intl.NumberFormat({maxmumFractionDigit:4});");
+
+    /**
+     * @tc.steps: step4.get the format attribute and format the number 1.23456
+     * @tc.expected:step4.the format result is 1.23456
+     */
+    formatRes = FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "1.235")));
+    ACE_FREE(formatRes);
+    ReleaseJerryValue(numberFormat, args[0], VA_ARG_END_FLAG);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_MaxmumFractionDigit_Test013
+ * @tc.desc: test the value of maxmumFractionDigits in percent
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_MaxmumFractionDigit_Test013, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-CN
+     * the maxmumFractionDigit -1
+     * @tc.expected:step1.the numberFormat object create failed, the error info is
+     * "the maximumFractionDigits is invalid"
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {maximumFractionDigits:-1});");
+    EXPECT_TRUE(jerry_value_is_error(numberFormat));
+    jerry_value_t error = jerry_get_value_from_error(numberFormat, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) ||
+                (strcmp(errorInfo, "RangeError: the maximumFractionDigits is invalid")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.expected:step2.create the  numberFormat object, set the locale info zh-CN
+     * and the maxmumFractionDigit 22
+     * @tc.expected:step2.the numberFormat object create failed, the error info is
+     * "the maximumFractionDigits is invalid"
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {maximumFractionDigits:21});");
+    EXPECT_TRUE(jerry_value_is_error(numberFormat));
+    error = jerry_get_value_from_error(numberFormat, true);
+    errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) ||
+                (strcmp(errorInfo, "RangeError: the maximumFractionDigits is invalid")));
+    ACE_FREE(errorInfo);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_MaxmumFractionDigit_Test014
+ * @tc.desc: test the value of maxmumFractionDigits in percent
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_MaxmumFractionDigit_Test014, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-CN,
+     * and set the style percent and maxmumFractionDigit 2
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', maximumFractionDigits:2});");
+
+    /**
+     * @tc.steps:step2.get the format attribute and format the number 1.23456
+     * @tc.expected:step2.the format result is 123.46%
+     */
+    jerry_value_t args[1];
+    const double number = 1.23456;
+    args[0] = jerry_create_number(number);
+    char* formatRes = FormatNumber(numberFormat, args, 1);
+    jerry_release_value(numberFormat);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123%")));
+    ace_free(formatRes);
+    formatRes = nullptr;
+
+    /**
+     * @tc.steps:step3.create numberFormat object, set the format style percent,
+     * the maxmumFractionDigit 5
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent',maximumFractionDigits:5});");
+    /**
+     * @tc.steps:step4.get the format attribute and format the number 1.23456
+     * @tc.expected: the format result is 1.23456
+     */
+    formatRes =FormatNumber(numberFormat, args, 1);
+    EXPECT_FALSE((formatRes == nullptr) || (strcmp(formatRes, "123%")));
+    ACE_FREE(formatRes);
+    ReleaseJerryValue(args[0], numberFormat, VA_ARG_END_FLAG);
+    TDD_CASE_END();
+}
+
+/**
+ * @tc.name: NumberFormat_MaxmumFractionDigit_Test015
+ * @tc.desc: test the value of maxmumFractionDigits in percent
+ * @tc.require: AR000EVHAT
+ */
+HWTEST_F(NumberFormatModuleTddTest, NumberFormat_MaxmumFractionDigit_Test015, TestSize.Level1)
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps:step1.create the numberFormat object, set the locale info zh-CN,
+     * set the percent style percent and the maxmumFractionDigit 0
+     * @tc.expected:step1.create the numberFormat object failed, the error info is
+     * "the maximumFractionDigit is invalid"
+     */
+    jerry_value_t numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', maximumFractionDigits:-1});");
+    EXPECT_TRUE(jerry_value_is_error(numberFormat));
+    jerry_value_t error = jerry_get_value_from_error(numberFormat, true);
+    char* errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) ||
+                (strcmp(errorInfo, "RangeError: the maximumFractionDigits is invalid")));
+    ace_free(errorInfo);
+    errorInfo = nullptr;
+
+    /**
+     * @tc.steps:step2.create the numberFormat object, set the locale info zh-CN,
+     * and the maxmumFractionDigit 21
+     * @tc.expected:step2.the numberFormat object create failed, the error info is
+     * "the maximumFractionDigits is invalid"
+     */
+    numberFormat = RunJs("new Intl.NumberFormat('zh-CN', {style:'percent', maximumFractionDigits:21});");
+    EXPECT_TRUE(jerry_value_is_error(numberFormat));
+    error = jerry_get_value_from_error(numberFormat, true);
+    errorInfo = MallocStringOf(error);
+    jerry_release_value(error);
+    EXPECT_FALSE((errorInfo == nullptr) ||
+                (strcmp(errorInfo, "RangeError: the maximumFractionDigits is invalid")));
+    ACE_FREE(errorInfo);
+    TDD_CASE_END();
+}
+
+void NumberFormatModuleTddTest::RunTests()
+{
+#ifndef TDD_ASSERTIONS
+    NumberFormat_Locale_Test001();
+    NumberFormat_Style_Test002();
+    NumberFormat_Style_Test003();
+    NumberFormat_Group_Test004();
+    NumberFormat_Group_Test005();
+    NumberFormat_Group_Test006();
+    NumberFormat_Group_Test007();
+    NumberFormat_MinimumFractionDigit_Test008();
+    NumberFormat_MinimumFractionDigit_Test009();
+    NumberFormat_MinimumFractionDigit_Test010();
+    NumberFormat_MinimumFractionDigit_Test011();
+    NumberFormat_MaxmumFractionDigit_Test012();
+    NumberFormat_MaxmumFractionDigit_Test013();
+    NumberFormat_MaxmumFractionDigit_Test014();
+    NumberFormat_MaxmumFractionDigit_Test015();
+#endif
+}
+}
+}
+#endif
diff --git a/frameworks/src/core/modules/presets/test/unittest/common/number_format_module_tdd_test.h b/frameworks/src/core/modules/presets/test/unittest/common/number_format_module_tdd_test.h
new file mode 100755
index 0000000..8e25f58
--- /dev/null
+++ b/frameworks/src/core/modules/presets/test/unittest/common/number_format_module_tdd_test.h
@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef NUMBER_FORMAT_MODULE_TDD_TEST_H
+#define NUMBER_FORMAT_MODULE_TDD_TEST_H
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "acelite_config.h"
+#ifdef FEATURE_NUMBER_FORMAT
+#include "test_common.h"
+#include "js_fwk_common.h"
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class NumberFormatModuleTddTest : public testing::Test {
+#else
+class NumberFormatModuleTddTest {
+#endif
+public:
+    NumberFormatModuleTddTest() {}
+    ~NumberFormatModuleTddTest() {}
+    void SetUp();
+    void TearDown();
+
+    void RunTests();
+
+    void NumberFormat_Locale_Test001();
+
+    void NumberFormat_Style_Test002();
+
+    void NumberFormat_Style_Test003();
+
+    void NumberFormat_Group_Test004();
+
+    void NumberFormat_Group_Test005();
+
+    void NumberFormat_Group_Test006();
+
+    void NumberFormat_Group_Test007();
+
+    void NumberFormat_MinimumFractionDigit_Test008();
+
+    void NumberFormat_MinimumFractionDigit_Test009();
+
+    void NumberFormat_MinimumFractionDigit_Test010();
+
+    void NumberFormat_MinimumFractionDigit_Test011();
+
+    void NumberFormat_MaxmumFractionDigit_Test012();
+
+    void NumberFormat_MaxmumFractionDigit_Test013();
+
+    void NumberFormat_MaxmumFractionDigit_Test014();
+
+    void NumberFormat_MaxmumFractionDigit_Test015();
+
+    jerry_value_t RunJs(const char* jsContent);
+
+    char* FormatNumber(const jerry_value_t numberFormat, const jerry_value_t args[], const jerry_length_t argsNum);
+};
+}
+}
+
+#endif // FEATURE_NUMBER_FORMAT
+#endif // NUMBER_FORMAT_MODULE_TDD_TEST_H
diff --git a/src/core/modules/presets/timer_module.cpp b/frameworks/src/core/modules/presets/timer_module.cpp
similarity index 77%
rename from src/core/modules/presets/timer_module.cpp
rename to frameworks/src/core/modules/presets/timer_module.cpp
index 508f9d1..5c0eef2 100755
--- a/src/core/modules/presets/timer_module.cpp
+++ b/frameworks/src/core/modules/presets/timer_module.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -15,14 +15,14 @@
 
 #include "timer_module.h"
 #ifdef FEATURE_TIMER_MODULE
+#include <cstdint>
+#include <string.h>
+#include "ace_log.h"
+#include "ace_mem_base.h"
 #ifndef TARGET_SIMULATOR
 #include "js_async_work.h"
 #endif // TARGET_SIMULATOR
-#include "ace_log.h"
-#include "ace_mem_base.h"
 #include "js_fwk_common.h"
-#include <cstdint>
-#include <string.h>
 #include "nativeapi_timer_task.h"
 
 namespace OHOS {
@@ -33,11 +33,14 @@ void TimerModule::Init()
     const char * const clearTimeout = "clearTimeout";
     const char * const setInterval = "setInterval";
     const char * const clearInterval = "clearInterval";
+    initRes_ = InitTimerTask();
+    if (initRes_ < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "init timer failed %d", initRes_);
+    }
     CreateNamedFunction(setTimeout, SetTimeout);
     CreateNamedFunction(clearTimeout, ClearTimer);
     CreateNamedFunction(setInterval, SetInterval);
     CreateNamedFunction(clearInterval, ClearTimer);
-    InitTimerTask();
 }
 
 jerry_value_t TimerModule::CreateTimer(const jerry_value_t func,
@@ -46,39 +49,43 @@ jerry_value_t TimerModule::CreateTimer(const jerry_value_t func,
                                        const jerry_length_t argsNum,
                                        bool repeated)
 {
+    if (TimerModule::GetInstance()->GetInitState() < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "start timer failed, timer init failed %d",
+                    TimerModule::GetInstance()->GetInitState());
+        return UNDEFINED;
+    }
     const uint8_t leastArguments = 2;
     if ((argsNum < leastArguments) || (GetInstance()->GetTimerList() == nullptr)) {
         return UNDEFINED;
-    } else {
-        TimerList::Arguments *arguments = new TimerList::Arguments();
-        if (arguments == nullptr) {
+    }
+    TimerList::Arguments *arguments = new TimerList::Arguments();
+    if (arguments == nullptr) {
+        return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("memory error"));
+    }
+    arguments->context = context;
+    jerry_value_t function = args[0];
+    arguments->func = jerry_acquire_value(function);
+    arguments->repeated = repeated;
+    TimerList* timerList = GetInstance()->GetTimerList();
+    if (argsNum > leastArguments) {
+        uint8_t funcNumber = argsNum - leastArguments;
+        jerry_value_t *funcArg =
+            static_cast<jerry_value_t *>(ace_malloc(sizeof(jerry_value_t) * (funcNumber)));
+        if (funcArg == nullptr) {
+            timerList->ReleaseArguments(arguments);
             return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("memory error"));
         }
-        arguments->context = context;
-        jerry_value_t function = args[0];
-        arguments->func = jerry_acquire_value(function);
-        arguments->repeated = repeated;
-        TimerList* timerList = GetInstance()->GetTimerList();
-        if (argsNum > leastArguments) {
-            uint8_t funcNumber = argsNum - leastArguments;
-            jerry_value_t *funcArg =
-                static_cast<jerry_value_t *>(ace_malloc(sizeof(jerry_value_t) * (funcNumber)));
-            if (funcArg == nullptr) {
-                timerList->ReleaseArguments(arguments);
-                return jerry_create_error(JERRY_ERROR_EVAL, reinterpret_cast<const jerry_char_t *>("memory error"));
-            }
-            for (uint8_t i = 0; i < funcNumber; i++) {
-                funcArg[i] = jerry_acquire_value(args[i + leastArguments]);
-            }
-            arguments->args = funcArg;
-            arguments->argsNum = funcNumber;
+        for (uint8_t i = 0; i < funcNumber; i++) {
+            funcArg[i] = jerry_acquire_value(args[i + leastArguments]);
         }
-        jerry_value_t retVal = StartTask(arguments, args[1], repeated);
-        if (jerry_value_is_undefined(retVal)) {
-            timerList->ReleaseArguments(arguments);
-        }
-        return retVal;
+        arguments->args = funcArg;
+        arguments->argsNum = funcNumber;
     }
+    jerry_value_t retVal = StartTask(arguments, args[1], repeated);
+    if (jerry_value_is_undefined(retVal)) {
+        timerList->ReleaseArguments(arguments);
+    }
+    return retVal;
 }
 
 jerry_value_t TimerModule::StartTask(TimerList::Arguments *arguments, jerry_value_t time, bool repeated)
@@ -121,6 +128,11 @@ jerry_value_t TimerModule::ClearTimer(const jerry_value_t func,
                                       const jerry_value_t *args,
                                       const jerry_length_t argsNum)
 {
+    if (TimerModule::GetInstance()->GetInitState() < 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "stop timer failed, init timer failed %d",
+                    TimerModule::GetInstance()->GetInitState());
+        return UNDEFINED;
+    }
     if (argsNum == 0) {
         return UNDEFINED;
     }
@@ -201,8 +213,8 @@ void TimerModule::Execute(void *data)
                 CallJSFunctionAutoRelease(funcArgs->func, funcArgs->context, funcArgs->args, funcArgs->argsNum);
             }
             // if timer is once, release the arguments
-	    // check the timer node is release or not
-	    TimerList::TimerNode* currentTimer = timerList->GetTimer(*timerId);
+            // check the timer node is release or not
+            TimerList::TimerNode* currentTimer = timerList->GetTimer(*timerId);
             if ((currentTimer != nullptr) && (!funcArgs->repeated)) {
 #if defined(__LITEOS__)
                 StopTimerTask(timer->timerId);
diff --git a/src/core/modules/presets/timer_module.h b/frameworks/src/core/modules/presets/timer_module.h
old mode 100755
new mode 100644
similarity index 96%
rename from src/core/modules/presets/timer_module.h
rename to frameworks/src/core/modules/presets/timer_module.h
index f928f9d..a818593
--- a/src/core/modules/presets/timer_module.h
+++ b/frameworks/src/core/modules/presets/timer_module.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -35,6 +35,11 @@ public:
 
     void Init() override;
 
+    const int GetInitState()
+    {
+        return initRes_;
+    }
+
     void Clear()
     {
         if (timerList_ != nullptr) {
@@ -50,7 +55,8 @@ private:
      * @brief Constructor
      */
     TimerModule() : PresetModule(nullptr),
-        timerList_(nullptr)
+        timerList_(nullptr),
+        initRes_(-1)
     {
     }
 
@@ -129,6 +135,7 @@ private:
     static void Execute(void *data);
 #endif
     TimerList *timerList_;
+    int initRes_;
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/modules/presets/version_module.cpp b/frameworks/src/core/modules/presets/version_module.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/version_module.cpp
rename to frameworks/src/core/modules/presets/version_module.cpp
diff --git a/src/core/modules/presets/version_module.h b/frameworks/src/core/modules/presets/version_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/presets/version_module.h
rename to frameworks/src/core/modules/presets/version_module.h
diff --git a/src/core/modules/router_module.cpp b/frameworks/src/core/modules/router_module.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/router_module.cpp
rename to frameworks/src/core/modules/router_module.cpp
diff --git a/src/core/modules/router_module.h b/frameworks/src/core/modules/router_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/router_module.h
rename to frameworks/src/core/modules/router_module.h
diff --git a/src/core/modules/sample_module.cpp b/frameworks/src/core/modules/sample_module.cpp
old mode 100755
new mode 100644
similarity index 99%
rename from src/core/modules/sample_module.cpp
rename to frameworks/src/core/modules/sample_module.cpp
index aa1881e..0eca530
--- a/src/core/modules/sample_module.cpp
+++ b/frameworks/src/core/modules/sample_module.cpp
@@ -105,6 +105,7 @@ JSIValue SampleModule::TestCallbackWithArgs(const JSIValue thisVal, const JSIVal
 #ifndef TARGET_SIMULATOR
     AsyncParams *params = new AsyncParams();
     if (params == nullptr) {
+        JSI::ReleaseValueList(result, callback);
         return undefValue;
     }
     params->result = result;
diff --git a/src/core/modules/sample_module.h b/frameworks/src/core/modules/sample_module.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/modules/sample_module.h
rename to frameworks/src/core/modules/sample_module.h
diff --git a/frameworks/src/core/modules/test/unittest/BUILD.gn b/frameworks/src/core/modules/test/unittest/BUILD.gn
new file mode 100755
index 0000000..b43eeff
--- /dev/null
+++ b/frameworks/src/core/modules/test/unittest/BUILD.gn
@@ -0,0 +1,37 @@
+#Copyright (c) 2021 Huawei Device 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("//build/lite/config/test.gni")
+import("//foundation/ace/ace_engine_lite/test/ace_test_config.gni")
+
+presets_unittest_root =
+    "$ace_lite_root/frameworks/src/core/modules/presets/test/unittest"
+
+unittest("js_frameworks_test_dfx") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/test/moduletest/common/basic_tdd_test.cpp",
+    "common/dfx_tdd_test.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+group("modules_unittest") {
+  deps = [
+    ":js_frameworks_test_dfx",
+    "$presets_unittest_root:js_frameworks_test_date_time",
+    "$presets_unittest_root:js_frameworks_test_number_format",
+  ]
+}
diff --git a/frameworks/src/core/modules/test/unittest/common/dfx_tdd_test.cpp b/frameworks/src/core/modules/test/unittest/common/dfx_tdd_test.cpp
new file mode 100755
index 0000000..d352b12
--- /dev/null
+++ b/frameworks/src/core/modules/test/unittest/common/dfx_tdd_test.cpp
@@ -0,0 +1,534 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#include "dfx_tdd_test.h"
+#include <unistd.h>
+#include "js_fwk_common.h"
+#include "wrapper/js.h"
+
+namespace OHOS {
+namespace ACELite {
+const char * const DfxTddTest::BUNDLE1
+                        = "(function () {"
+                          "  return new ViewModel({"
+                          "    render: function (vm) {"
+                          "      var _vm = vm || this;"
+                          "        return _c('swiper', {"
+                          "          attrs : {index : 0,duration : 75},"
+                          "          staticClass : ['container'], "
+                          "          on : {'change' : _vm.swiperChange}} , ["
+                          "            _c('stack', {"
+                          "              staticClass : ['container']} , ["
+                          "                _c('text', {"
+                          "                  attrs : {value : function() {return _vm.textValue}},"
+                          "                  staticClass : ['pm25-name'],"
+                          "                  staticStyle : {color : 16711680},"
+                          "                  on : {'click' : _vm.click1}"
+                          "                 })"
+                          "            ])"
+                          "      ]);"
+                          "    },"
+                          "    styleSheet: {"
+                          "      classSelectors: {"
+                          "        'pm25-value': {"
+                          "          textAlign: 'center',"
+                          "          fontSize: 38,"
+                          "          color: 15794175,"
+                          "          height: 454,"
+                          "          width: 454,"
+                          "          top: 235"
+                          "        },"
+                          "        'pm25-name': {"
+                          "          textAlign: 'center',"
+                          "          color: 10667170,"
+                          "          width: 454,"
+                          "          height: 50,"
+                          "          top: 285"
+                          "        }"
+                          "      }"
+                          "    },"
+                          "   data: {textValue: 'Hello World'},"
+                          "   onInit: function onInit() {},"
+                          "   onShow: function onShow() {},"
+                          "   openDetail: function openDetail() {},"
+                          "   click3: function click3() {"
+                          "     var sum = num + 1;"
+                          "     this.textValue = 'Hello Ace';"
+                          "   },"
+                          "   click2: function click2() {"
+                          "     this.click3();"
+                          "   },"
+                          "   click1: function click1() {"
+                          "     this.click2();"
+                          "   }"
+                          " });"
+                          "})();";
+
+const char * const DfxTddTest::BUNDLE2
+                        = "(function () {"
+                          "  return new ViewModel({"
+                          "    render: function (vm) {"
+                          "      var _vm = vm || this;"
+                          "        return _c('swiper', {"
+                          "          attrs : {index : 0,duration : 75},"
+                          "          staticClass : ['container'], "
+                          "          on : {'change' : _vm.swiperChange}} , ["
+                          "            _c('stack', {"
+                          "              staticClass : ['container']} , ["
+                          "                _c('text', {"
+                          "                  attrs : {value : function() {return _vm.textValue}},"
+                          "                  staticClass : ['pm25-name'],"
+                          "                  staticStyle : {color : 16711680}"
+                          "                 })"
+                          "            ])"
+                          "      ]);"
+                          "    },"
+                          "    styleSheet: {"
+                          "      classSelectors: {"
+                          "        'pm25-value': {"
+                          "          textAlign: 'center',"
+                          "          fontSize: 38,"
+                          "          color: 15794175,"
+                          "          height: 454,"
+                          "          width: 454,"
+                          "          top: 235"
+                          "        },"
+                          "        'pm25-name': {"
+                          "          textAlign: 'center',"
+                          "          color: 10667170,"
+                          "          width: 454,"
+                          "          height: 50,"
+                          "          top: 285"
+                          "        }"
+                          "      }"
+                          "    },"
+                          "   data: {textValue: 'Hello World'},"
+                          "   onInit: function onInit() {},"
+                          "   onShow: function onShow() {},"
+                          "   openDetail: function openDetail() {},"
+                          "   click3: function click3() {"
+                          "     this.click4();"
+                          "     this.textValue = 'Hello Ace';"
+                          "   },"
+                          "   click2: function click2() {"
+                          "     this.click3();"
+                          "   },"
+                          "   click1: function click1() {"
+                          "     this.click2();"
+                          "   }"
+                          " });"
+                          "})();";
+
+const char * const DfxTddTest::BUNDLE3
+                        = "(function () {"
+                          "  return new ViewModel({"
+                          "    render: function (vm) {"
+                          "      var _vm = vm || this;"
+                          "        return _c('swiper', {"
+                          "          attrs : {index : 0,duration : 75},"
+                          "          staticClass : ['container'], "
+                          "          on : {'change' : _vm.swiperChange}} , ["
+                          "            _c('stack', {"
+                          "              staticClass : ['container']} , ["
+                          "                _c('text', {"
+                          "                  attrs : {value : function() {return _vm.textValue}},"
+                          "                  staticClass : ['pm25-name'],"
+                          "                  staticStyle : {color : 16711680}"
+                          "                 })"
+                          "            ])"
+                          "      ]);"
+                          "    },"
+                          "    styleSheet: {"
+                          "      classSelectors: {"
+                          "        'pm25-value': {"
+                          "          textAlign: 'center',"
+                          "          fontSize: 38,"
+                          "          color: 15794175,"
+                          "          height: 454,"
+                          "          width: 454,"
+                          "          top: 235"
+                          "        },"
+                          "        'pm25-name': {"
+                          "          textAlign: 'center',"
+                          "          color: 10667170,"
+                          "          width: 454,"
+                          "          height: 50,"
+                          "          top: 285"
+                          "        }"
+                          "      }"
+                          "    },"
+                          "   data: {textValue: 'Hello World'},"
+                          "   onInit: function onInit() {},"
+                          "   onShow: function onShow() {},"
+                          "   openDetail: function openDetail() {},"
+                          "   click3: function click3() {"
+                          "     this.textValue = 'Hello Ace';"
+                          "     console.log('Hello Ace.');"
+                          "   },"
+                          "   click2: function click2() {"
+                          "     this.click3();"
+                          "   },"
+                          "   click1: function click1() {"
+                          "     this.click2();"
+                          "   }"
+                          " });"
+                          "})();";
+
+const char * const DfxTddTest::BUNDLE4
+                        = "(function () {"
+                          "  return new ViewModel({"
+                          "    render: function (vm) {"
+                          "      var _vm = vm || this;"
+                          "        return _c('swiper', {"
+                          "          attrs : {index : 0,duration : 75},"
+                          "          staticClass : ['container'], "
+                          "          on : {'change' : _vm.swiperChange}} , ["
+                          "            _c('stack', {"
+                          "              staticClass : ['container']} , ["
+                          "                _c('text', {"
+                          "                  attrs : {value : function() {return _vm.textValue}},"
+                          "                  staticClass : ['pm25-name'],"
+                          "                  staticStyle : {color : 16711680}"
+                          "                 })"
+                          "            ])"
+                          "      ]);"
+                          "    },"
+                          "    styleSheet: {"
+                          "      classSelectors: {"
+                          "        'pm25-value': {"
+                          "          textAlign: 'center',"
+                          "          fontSize: 38,"
+                          "          color: 15794175,"
+                          "          height: 454,"
+                          "          width: 454,"
+                          "          top: 235"
+                          "        },"
+                          "        'pm25-name': {"
+                          "          textAlign: 'center',"
+                          "          color: 10667170,"
+                          "          width: 454,"
+                          "          height: 50,"
+                          "          top: 285"
+                          "        }"
+                          "      }"
+                          "    },"
+                          "   data: {textValue: 'Hello World'},"
+                          "   onInit: function onInit() {},"
+                          "   onShow: function onShow() {},"
+                          "   openDetail: function openDetail() {},"
+                          "   click32: function click32() {"
+                          "     this,click33();"
+                          "   },"
+                          "   click31: function click31() {"
+                          "     this.click32();"
+                          "   },"
+                          "   click30: function click30() {"
+                          "     this.click31();"
+                          "   },"
+                          "   click29: function click29() {"
+                          "     this,click30();"
+                          "   },"
+                          "   click28: function click28() {"
+                          "     this.click29();"
+                          "   },"
+                          "   click27: function click27() {"
+                          "     this.click28();"
+                          "   },"
+                          "   click26: function click26() {"
+                          "     this,click27();"
+                          "   },"
+                          "   click25: function click25() {"
+                          "     this.click26();"
+                          "   },"
+                          "   click24: function click24() {"
+                          "     this,click25();"
+                          "   },"
+                          "   click23: function click23() {"
+                          "     this.click24();"
+                          "   },"
+                          "   click22: function click22() {"
+                          "     this.click23();"
+                          "   },"
+                          "   click21: function click21() {"
+                          "     this,click22();"
+                          "   },"
+                          "   click20: function click20() {"
+                          "     this.click21();"
+                          "   },"
+                          "   click19: function click19() {"
+                          "     this.click20();"
+                          "   },"
+                          "   click18: function click18() {"
+                          "     this,click19();"
+                          "   },"
+                          "   click17: function click17() {"
+                          "     this.click18();"
+                          "   },"
+                          "   click16: function click16() {"
+                          "     this.click17();"
+                          "   },"
+                          "   click15: function click15() {"
+                          "     this,click16();"
+                          "   },"
+                          "   click14: function click14() {"
+                          "     this.click15();"
+                          "   },"
+                          "   click13: function click13() {"
+                          "     this.click14();"
+                          "   },"
+                          "   click12: function click12() {"
+                          "     this,click13();"
+                          "   },"
+                          "   click11: function click11() {"
+                          "     this.click12();"
+                          "   },"
+                          "   click10: function click10() {"
+                          "     this.click11();"
+                          "   },"
+                          "   click9: function click9() {"
+                          "     this,click10();"
+                          "   },"
+                          "   click8: function click8() {"
+                          "     this.click9();"
+                          "   },"
+                          "   click7: function click7() {"
+                          "     this.click8();"
+                          "   },"
+                          "   click6: function click6() {"
+                          "     this,click7();"
+                          "   },"
+                          "   click5: function click5() {"
+                          "     this.click6();"
+                          "   },"
+                          "   click4: function click4() {"
+                          "     this.click5();"
+                          "   },"
+                          "   click3: function click3() {"
+                          "     this,click4();"
+                          "   },"
+                          "   click2: function click2() {"
+                          "     this.click3();"
+                          "   },"
+                          "   click1: function click1() {"
+                          "     this.click2();"
+                          "   }"
+                          " });"
+                          "})();";
+
+const char * const DfxTddTest::FUNC_NAME = "click1";
+
+void DfxTddTest::DfxTest001()
+{
+    TDD_CASE_BEGIN();
+    JSValue page = CreatePage(BUNDLE1, strlen(BUNDLE1));
+    JSValue ret = JSObject::Call(page, FUNC_NAME);
+    if (!jerry_value_is_error(ret)) {
+        TDD_CASE_END();
+        DestroyPage(page);
+        return;
+    }
+
+    // trace out error information if the result contains error
+    jerry_value_t errValue = jerry_get_value_from_error(ret, false);
+    jerry_value_t errStrVal = jerry_value_to_string(errValue);
+    jerry_release_value(errValue);
+    jerry_size_t errStrSize = jerry_get_utf8_string_size(errStrVal);
+    jerry_char_t *errStrBuffer = static_cast<jerry_char_t *>(ace_malloc(sizeof(jerry_char_t) * (errStrSize + 1)));
+    if (errStrBuffer == nullptr) {
+        jerry_release_value(errStrVal);
+        TDD_CASE_END();
+        DestroyPage(page);
+        return;
+    }
+    jerry_size_t stringEnd = jerry_string_to_utf8_char_buffer(errStrVal, errStrBuffer, errStrSize);
+    errStrBuffer[stringEnd] = '\0';
+    EXPECT_STREQ(reinterpret_cast<char *>(errStrBuffer), "ReferenceError: num is not defined");
+    ace_free(errStrBuffer);
+    errStrBuffer = nullptr;
+    jerry_release_value(errStrVal);
+
+    JSValue value = JSObject::Get(page, "textValue");
+    char *valueStr = JSString::Value(value);
+    if (valueStr != nullptr) {
+        EXPECT_STREQ(valueStr, "Hello World");
+        ace_free(valueStr);
+        valueStr = nullptr;
+    }
+    jerry_release_value(value);
+    TDD_CASE_END();
+    DestroyPage(page);
+}
+
+void DfxTddTest::DfxTest002()
+{
+    TDD_CASE_BEGIN();
+    JSValue page = CreatePage(BUNDLE2, strlen(BUNDLE2));
+    JSValue errorValue = JSObject::Call(page, FUNC_NAME);
+    if (!jerry_value_is_error(errorValue)) {
+        TDD_CASE_END();
+        DestroyPage(page);
+        return;
+    }
+    const uint16_t stackMsgMaxLength = 256;
+    const uint8_t exceptLength = 3;
+    const char *stack = "stack";
+    jerry_value_t stackStr = jerry_create_string((const jerry_char_t *) stack);
+    jerry_value_t errorVal = jerry_get_value_from_error(errorValue, false);
+    jerry_value_t backtraceVal = jerry_get_property(errorVal, stackStr);
+    ReleaseJerryValue(stackStr, errorVal, VA_ARG_END_FLAG);
+    if (jerry_value_is_error(backtraceVal) || !(jerry_value_is_array(backtraceVal))) {
+        TDD_CASE_END();
+        DestroyPage(page);
+        jerry_release_value(backtraceVal);
+        return;
+    }
+    uint32_t length = jerry_get_array_length(backtraceVal);
+    EXPECT_EQ(length, exceptLength);
+    jerry_char_t *errStrBuffer = static_cast<jerry_char_t *>(ace_malloc(sizeof(jerry_char_t) * (stackMsgMaxLength)));
+    if (errStrBuffer == nullptr) {
+        jerry_release_value(backtraceVal);
+        TDD_CASE_END();
+        DestroyPage(page);
+        return;
+    }
+    jerry_value_t itemVal = jerry_get_property_by_index(backtraceVal, 0);
+    jerry_size_t strSize = 0;
+    if (!jerry_value_is_error(itemVal) && jerry_value_is_string(itemVal)) {
+        strSize = jerry_get_utf8_string_size(itemVal);
+    }
+    jerry_size_t stringEnd = jerry_string_to_utf8_char_buffer(itemVal, errStrBuffer, strSize);
+    errStrBuffer[stringEnd] = '\0';
+    EXPECT_STREQ(reinterpret_cast<char *>(errStrBuffer), "click3(), ");
+    ace_free(errStrBuffer);
+    errStrBuffer = nullptr;
+    JSValue value = JSObject::Get(page, "textValue");
+    char *valueStr = JSString::Value(value);
+    if (valueStr != nullptr) {
+        EXPECT_STREQ(valueStr, "Hello World");
+        ace_free(valueStr);
+        valueStr = nullptr;
+    }
+    ReleaseJerryValue(itemVal, backtraceVal, value, VA_ARG_END_FLAG);
+    TDD_CASE_END();
+    DestroyPage(page);
+}
+
+void DfxTddTest::DfxTest003()
+{
+    TDD_CASE_BEGIN();
+    JSValue page = CreatePage(BUNDLE3, strlen(BUNDLE3));
+    JSValue ret = JSObject::Call(page, FUNC_NAME);
+    if (jerry_value_is_error(ret)) {
+        TDD_CASE_END();
+        DestroyPage(page);
+        return;
+    }
+    JSValue value = JSObject::Get(page, "textValue");
+    char *valueStr = JSString::Value(value);
+    if (valueStr != nullptr) {
+        EXPECT_STREQ(valueStr, "Hello Ace");
+        ace_free(valueStr);
+        valueStr = nullptr;
+    }
+    jerry_release_value(value);
+    TDD_CASE_END();
+    DestroyPage(page);
+}
+
+void DfxTddTest::DfxTest004()
+{
+    TDD_CASE_BEGIN();
+    JSValue page = CreatePage(BUNDLE4, strlen(BUNDLE4));
+    JSValue ret = JSObject::Call(page, FUNC_NAME);
+    if (jerry_value_is_error(ret)) {
+        TDD_CASE_END();
+        DestroyPage(page);
+        return;
+    }
+    const uint8_t exceptLength = 32;
+    const char *stack = "stack";
+
+    jerry_value_t stackStr = jerry_create_string((const jerry_char_t *) stack);
+    jerry_value_t errorVal = jerry_get_value_from_error(ret, false);
+
+    jerry_value_t backtraceVal = jerry_get_property(errorVal, stackStr);
+    jerry_release_value(stackStr);
+    jerry_release_value(errorVal);
+
+    if (jerry_value_is_error(backtraceVal) || !(jerry_value_is_array(backtraceVal))) {
+        TDD_CASE_END();
+        DestroyPage(page);
+        jerry_release_value(backtraceVal);
+        return;
+    }
+
+    uint32_t length = jerry_get_array_length(backtraceVal);
+    EXPECT_EQ(length, exceptLength);
+    TDD_CASE_END();
+    jerry_release_value(backtraceVal);
+    DestroyPage(page);
+}
+
+
+void DfxTddTest::RunTests()
+{
+    DfxTest001();
+    DfxTest002();
+    DfxTest003();
+    DfxTest004();
+}
+
+#ifdef TDD_ASSERTIONS
+/* *
+ * @tc.name: DfxTest001
+ * @tc.desc: Verify error code.
+ * @tc.require: AR000F3PDP
+ */
+HWTEST_F(DfxTddTest, DfxTest001, TestSize.Level1)
+{
+    DfxTddTest::DfxTest001();
+}
+
+/* *
+ * @tc.name: DfxTest002
+ * @tc.desc: Verify error message.
+ * @tc.require: AR000F3PDP
+ */
+HWTEST_F(DfxTddTest, DfxTest002, TestSize.Level1)
+{
+    DfxTddTest::DfxTest002();
+}
+
+/* *
+ * @tc.name: DfxTest003
+ * @tc.desc: Verify normal process.
+ * @tc.require: AR000F3PDP
+ */
+HWTEST_F(DfxTddTest, DfxTest003, TestSize.Level1)
+{
+    DfxTddTest::DfxTest003();
+}
+
+/* *
+ * @tc.name: DfxTest004
+ * @tc.desc: Verify pressure test.
+ * @tc.require: AR000F3PDP
+ */
+HWTEST_F(DfxTddTest, DfxTest004, TestSize.Level1)
+{
+    DfxTddTest::DfxTest004();
+}
+#endif // TDD_ASSERTIONS
+}
+} // namespace ACELite
diff --git a/frameworks/src/core/modules/test/unittest/common/dfx_tdd_test.h b/frameworks/src/core/modules/test/unittest/common/dfx_tdd_test.h
new file mode 100755
index 0000000..3476522
--- /dev/null
+++ b/frameworks/src/core/modules/test/unittest/common/dfx_tdd_test.h
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_TEST_DFX_H
+#define OHOS_ACELITE_TEST_DFX_H
+
+#include "basic_tdd_test.h"
+
+namespace OHOS {
+namespace ACELite {
+class DfxTddTest : public BasicTddTest {
+public:
+    DfxTddTest() : BasicTddTest() {}
+    ~DfxTddTest() override {}
+
+    void DfxTest001();
+    void DfxTest002();
+    void DfxTest003();
+    void DfxTest004();
+    void RunTests();
+private:
+    static const char * const BUNDLE1;
+    static const char * const BUNDLE2;
+    static const char * const BUNDLE3;
+    static const char * const BUNDLE4;
+    static const char * const FUNC_NAME;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_TEST_DFX_H
diff --git a/src/core/resource/video_muted_image_res.cpp b/frameworks/src/core/resource/video_muted_image_res.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/resource/video_muted_image_res.cpp
rename to frameworks/src/core/resource/video_muted_image_res.cpp
diff --git a/src/core/resource/video_play_image_res.cpp b/frameworks/src/core/resource/video_play_image_res.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/resource/video_play_image_res.cpp
rename to frameworks/src/core/resource/video_play_image_res.cpp
diff --git a/src/core/router/js_page_state.cpp b/frameworks/src/core/router/js_page_state.cpp
old mode 100755
new mode 100644
similarity index 98%
rename from src/core/router/js_page_state.cpp
rename to frameworks/src/core/router/js_page_state.cpp
index de9cf49..6d4831e
--- a/src/core/router/js_page_state.cpp
+++ b/frameworks/src/core/router/js_page_state.cpp
@@ -84,7 +84,7 @@ void PageBackgroundState::Handle(StateMachine &sm)
 void PageDestroyState::Handle(StateMachine &sm)
 {
     int currState = sm.GetCurrentState();
-    // any normal state can jump to destory state
+    // any normal state can jump to destroy state
     if ((currState >= INIT_STATE) || (FatalHandler::GetInstance().IsFatalErrorHitted())) {
         HILOG_INFO(HILOG_MODULE_ACE, "current state(%d) -> destroy state", currState);
         ACE_EVENT_PRINT(MT_ACE_RELEASE_HISTORY_PAGE, 0);
diff --git a/src/core/router/js_page_state.h b/frameworks/src/core/router/js_page_state.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/router/js_page_state.h
rename to frameworks/src/core/router/js_page_state.h
diff --git a/src/core/router/js_page_state_machine.cpp b/frameworks/src/core/router/js_page_state_machine.cpp
similarity index 92%
rename from src/core/router/js_page_state_machine.cpp
rename to frameworks/src/core/router/js_page_state_machine.cpp
index 24a78f1..119a8f6 100755
--- a/src/core/router/js_page_state_machine.cpp
+++ b/frameworks/src/core/router/js_page_state_machine.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -12,21 +12,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 #include "js_page_state_machine.h"
 #include "ace_log.h"
 #include "component.h"
-#include "js_async_work.h"
-#include "js_page_state.h"
-#include "module_manager.h"
-#include "root_view.h"
-#if ENABLED(SECURE_C_FUNCTION)
-#include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 #include "directive/descriptor_utils.h"
 #include "fatal_handler.h"
 #include "js_app_environment.h"
+#include "js_async_work.h"
+#include "js_page_state.h"
 #include "js_profiler.h"
 #include "jsi.h"
+#include "lazy_load_manager.h"
+#include "mem_proc.h"
+#include "module_manager.h"
+#include "root_view.h"
+#include "securec.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -40,8 +41,8 @@ StateMachine::StateMachine()
     appRootPath_ = nullptr;
     appContext_ = nullptr;
     uri_ = nullptr;
+    rootComponent_ = nullptr;
     viewModel_ = UNDEFINED;
-    nativeElement_ = UNDEFINED;
     object_ = UNDEFINED;
     hasParams_ = false;
     isEntireHidden_ = false;
@@ -60,6 +61,7 @@ StateMachine::~StateMachine()
     for (int i = 0; i < PAGE_STATE_SIZE; i++) {
         if (stateMap_[i] != nullptr) {
             delete stateMap_[i];
+            stateMap_[i] = nullptr;
         }
     }
     if (uri_ != nullptr) {
@@ -125,13 +127,9 @@ int StateMachine::GenerateJsPagePath(const char * const uri)
     } else {
         err = strcpy_s(jsPagePath_, len, uri);
     }
-    err += strcat_s(jsPagePath_, len, sourceFileSuffix);
-    if (err != 0) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "use secure function errro(%d)", err);
-        ace_free(jsPagePath_);
-        jsPagePath_ = nullptr;
-        return ERROR_SECURE_USE;
-    }
+    JS_PAGE_RETURN_IF_ERROR(err, jsPagePath_);
+    err = strcat_s(jsPagePath_, len, sourceFileSuffix);
+    JS_PAGE_RETURN_IF_ERROR(err, jsPagePath_);
     return SUCCESS;
 }
 
@@ -307,11 +305,23 @@ static void ForceGC(void *data)
 void StateMachine::RenderPage()
 {
     START_TRACING(RENDER);
-    nativeElement_ = appContext_->Render(viewModel_);
+    // if not in init state, reset all watchers of previous page at first
+    LazyLoadManager* lazy = const_cast<LazyLoadManager *>(appContext_->GetLazyLoadManager());
+    if (lazy->GetState() != LazyLoadState::INIT) {
+        lazy->ResetWatchers();
+    }
+    // Note: do not release the returned value by Render function, it will be released by component
+    jerry_value_t element = appContext_->Render(viewModel_);
+
+    // mark lazy load te task
+    if (lazy->GetLazyWatcher() != nullptr) {
+        lazy->SetState(LazyLoadState::READY);
+    }
+    rootComponent_ = ComponentUtils::GetComponentFromBindingObject(element);
     // append scroll layer to the outermost view
     scrollLayer_ = new ScrollLayer();
     if (scrollLayer_ != nullptr) {
-        scrollLayer_->AppendScrollLayer(nativeElement_);
+        scrollLayer_->AppendScrollLayer(rootComponent_);
     }
     Component::HandlerAnimations();
     // trigger an async full GC after completing the heavy work, which will
@@ -320,18 +330,19 @@ void StateMachine::RenderPage()
     STOP_TRACING();
 }
 
-jerry_value_t StateMachine::ShowPage() const
+void StateMachine::ShowPage() const
 {
     if (isEntireHidden_) {
         HILOG_WARN(HILOG_MODULE_ACE, "showpage: the whole application already in background, do not operate rootview");
-        return nativeElement_;
+        return;
     }
     START_TRACING(ADD_TO_ROOT_VIEW);
     if (scrollLayer_ != nullptr) {
         scrollLayer_->Show();
     }
     STOP_TRACING();
-    return nativeElement_;
+    SYS_MEMORY_TRACING();
+    JERRY_MEMORY_TRACING();
 }
 
 void StateMachine::HidePage() const
@@ -398,13 +409,14 @@ void StateMachine::ReleaseHistoryPageResource()
     // remove all native views and release components styles.
     if (appContext_ != nullptr) {
         appContext_->ReleaseStyles();
-        if (!isEntireHidden_) {
-            // if the whole application is in background, avoid operating the rootview
-            appContext_->RemoveAllView();
-        }
+        appContext_->ReleaseLazyLoadManager();
     }
     // release scroll layer object.
     if (scrollLayer_ != nullptr) {
+        if (!isEntireHidden_) {
+            // if the whole application is in background, avoid operating the rootview
+            scrollLayer_->DetachFromRootView();
+        }
         delete (scrollLayer_);
         scrollLayer_ = nullptr;
     }
@@ -412,7 +424,8 @@ void StateMachine::ReleaseHistoryPageResource()
     // recycled by it, do not repeat the recycling
     if (!FatalHandler::GetInstance().IsFatalErrorHandleDone()) {
         // release all native views and their binding js objects
-        DescriptorUtils::ReleaseDescriptorOrElement(nativeElement_);
+        ComponentUtils::ReleaseComponents(rootComponent_);
+        rootComponent_ = nullptr;
     }
 
     ReleaseRootObject();
diff --git a/src/core/router/js_page_state_machine.h b/frameworks/src/core/router/js_page_state_machine.h
old mode 100755
new mode 100644
similarity index 77%
rename from src/core/router/js_page_state_machine.h
rename to frameworks/src/core/router/js_page_state_machine.h
index 2b2e3d1..64a27a3
--- a/src/core/router/js_page_state_machine.h
+++ b/frameworks/src/core/router/js_page_state_machine.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -16,10 +16,21 @@
 #ifndef OHOS_ACELITE_JS_PAGE_STATE_MACHINE_H
 #define OHOS_ACELITE_JS_PAGE_STATE_MACHINE_H
 
+#include "component.h"
 #include "js_app_context.h"
 #include "non_copyable.h"
 #include "scroll_layer.h"
 
+#define JS_PAGE_RETURN_IF_ERROR(error, pagePath)                                   \
+    do {                                                                           \
+        if (error != 0) {                                                          \
+            HILOG_ERROR(HILOG_MODULE_ACE, "use secure function error(%d)", error); \
+            ace_free(pagePath);                                                    \
+            pagePath = nullptr;                                                    \
+            return ERROR_SECURE_USE;                                               \
+        }                                                                          \
+    } while (0)
+
 namespace OHOS {
 namespace ACELite {
 enum {
@@ -59,7 +70,7 @@ public:
     }
     void EvalPage();
     void RenderPage();
-    jerry_value_t ShowPage() const;
+    void ShowPage() const;
     void HidePage() const;
     void SetCurrentState(int8_t newState);
     void InvokePageLifeCycleCallback(const char * const name) const;
@@ -78,9 +89,9 @@ private:
     char *jsPagePath_;
     char *appRootPath_;
     char *uri_;
+    Component *rootComponent_;
     JsAppContext *appContext_;
     jerry_value_t viewModel_;     // the object evaled from user JS code
-    jerry_value_t nativeElement_; // the object returned from render function
     jerry_value_t object_;        // object transferred from one page to another page
     bool hasParams_;              // the flag representation for whether having params of object_
     bool isEntireHidden_;            // representing if the whole app is in background
diff --git a/src/core/router/js_router.cpp b/frameworks/src/core/router/js_router.cpp
similarity index 95%
rename from src/core/router/js_router.cpp
rename to frameworks/src/core/router/js_router.cpp
index 762e1a5..ae48675 100755
--- a/src/core/router/js_router.cpp
+++ b/frameworks/src/core/router/js_router.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -19,7 +19,7 @@
 #ifdef OHOS_ACELITE_PRODUCT_WATCH
 #include "dft_impl.h"
 #endif
-#include "js_async_work.h"
+#include "async_task_manager.h"
 #include "js_page_state_machine.h"
 #include "js_profiler.h"
 
@@ -59,7 +59,7 @@ jerry_value_t Router::Replace(jerry_value_t object, bool async)
     // dispatch the new page rendering to the async handling as the current context of
     // router.replace need to be released, which need to return out from the scope
     if (async) {
-        if (!JsAsyncWork::DispatchAsyncWork(ReplaceAsync, this)) {
+        if (DISPATCH_FAILURE == AsyncTaskManager::GetInstance().Dispatch(ReplaceAsync, this)) {
             // request replacing failed, no chance to do it, release the new state machine
             HILOG_ERROR(HILOG_MODULE_ACE, "dispatch replacing request failed");
             delete newSm_;
diff --git a/src/core/router/js_router.h b/frameworks/src/core/router/js_router.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/router/js_router.h
rename to frameworks/src/core/router/js_router.h
diff --git a/src/core/stylemgr/app_style.cpp b/frameworks/src/core/stylemgr/app_style.cpp
old mode 100755
new mode 100644
similarity index 95%
rename from src/core/stylemgr/app_style.cpp
rename to frameworks/src/core/stylemgr/app_style.cpp
index 0a74e32..c491031
--- a/src/core/stylemgr/app_style.cpp
+++ b/frameworks/src/core/stylemgr/app_style.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -15,15 +15,13 @@
 
 #include "stylemgr/app_style.h"
 #include "ace_log.h"
-#if ENABLED(SECURE_C_FUNCTION)
 #include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 
 namespace OHOS {
 namespace ACELite {
 void AppStyle::SetStyleName(const char * const name, size_t nameLen)
 {
-    if ((name == nullptr) || (strlen(name) == 0) || (nameLen <= 0) || (nameLen >= NAME_LENGTH_MAX)) {
+    if ((nameLen <= 0) || (nameLen >= NAME_LENGTH_MAX) || (name == nullptr) || (strlen(name) == 0)) {
         return;
     }
     styleName_ = static_cast<char *>(ace_malloc(sizeof(char) * (nameLen + 1)));
@@ -232,6 +230,7 @@ jerry_value_t AppStyle::ConcatJerryString(jerry_value_t strA, jerry_value_t strB
     char *strtokB = stringB;
     if (strstr(stringA, pixelUnit)) {
         strtokA = strtok_s(stringA, pixelUnit, &next);
+        next = nullptr;
     }
     if (strstr(stringB, pixelUnit)) {
         strtokB = strtok_s(stringB, pixelUnit, &next);
@@ -287,8 +286,7 @@ jerry_value_t AppStyle::ConcatJerryString(jerry_value_t strA, jerry_value_t strB
     stringA = nullptr;
     ace_free(stringB);
     stringB = nullptr;
-    ace_free(newStr);
-    newStr = nullptr;
+    ACE_FREE(newStr);
     return propValue;
 }
 
@@ -299,14 +297,13 @@ AppStyle *AppStyle::GenerateFromJS(jerry_value_t styleKey, jerry_value_t styleVa
     if (styleNameBuffer == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "convert style name to char failed, will be dropped\n");
         return nullptr;
-    } else {
-        strLen = strlen(styleNameBuffer);
-        if (strLen == 0 || (strLen >= UINT16_MAX)) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "style name length is 0 or max, will be dropped\n");
-            ace_free(styleNameBuffer);
-            styleNameBuffer = nullptr;
-            return nullptr;
-        }
+    }
+    strLen = strlen(styleNameBuffer);
+    if (strLen == 0 || (strLen >= UINT16_MAX)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "style name length is 0 or max, will be dropped\n");
+        ace_free(styleNameBuffer);
+        styleNameBuffer = nullptr;
+        return nullptr;
     }
 
     AppStyle *newStyle = new AppStyle();
diff --git a/src/core/stylemgr/app_style.h b/frameworks/src/core/stylemgr/app_style.h
old mode 100755
new mode 100644
similarity index 96%
rename from src/core/stylemgr/app_style.h
rename to frameworks/src/core/stylemgr/app_style.h
index 2795da4..ecf34c9
--- a/src/core/stylemgr/app_style.h
+++ b/frameworks/src/core/stylemgr/app_style.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -16,10 +16,8 @@
 #define OHOS_ACELITE_APP_STYLE_H
 
 #include "non_copyable.h"
-#include "stylemgr/app_style_item.h"
-#if ENABLED(SECURE_C_FUNCTION)
 #include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
+#include "stylemgr/app_style_item.h"
 
 namespace OHOS {
 namespace ACELite {
diff --git a/src/core/stylemgr/app_style_item.cpp b/frameworks/src/core/stylemgr/app_style_item.cpp
old mode 100755
new mode 100644
similarity index 86%
rename from src/core/stylemgr/app_style_item.cpp
rename to frameworks/src/core/stylemgr/app_style_item.cpp
index 5556369..455b405
--- a/src/core/stylemgr/app_style_item.cpp
+++ b/frameworks/src/core/stylemgr/app_style_item.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -16,6 +16,7 @@
 #include "stylemgr/app_style_item.h"
 #include "ace_log.h"
 #include "keys.h"
+#include "number_parser.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -73,7 +74,7 @@ bool AppStyleItem::UpdateNumValToStr()
         const uint8_t len = 11; // max size of int32_t
         char strVal[len] = { 0 };
         if (sprintf_s(strVal, len, "%d", numVal) < 0) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "style item tranform num to string fail");
+            HILOG_ERROR(HILOG_MODULE_ACE, "style item transform num to string fail");
             return false;
         }
         SetStringValue((const char *)strVal);
@@ -88,14 +89,15 @@ AppStyleItem *AppStyleItem::GenerateFromJSValue(jerry_value_t stylePropName, jer
     if (keyNameBuffer == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "convert style prop name to char failed, will be dropped");
         return nullptr;
-    } else {
-        if (strLen == 0) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "style prop name length is 0, will be dropped");
-            ace_free(keyNameBuffer);
-            keyNameBuffer = nullptr;
-            return nullptr;
-        }
     }
+
+    if (strLen == 0) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "style prop name length is 0, will be dropped");
+        ace_free(keyNameBuffer);
+        keyNameBuffer = nullptr;
+        return nullptr;
+    }
+
     uint8_t pseudoType_ = EstimatePseudoClassType(static_cast<char *>(keyNameBuffer), &strLen);
     AppStyleItem *styleItem =
         CreateStyleItem(KeyParser::ParseKeyId((const char *)keyNameBuffer, strLen), stylePropValue, pseudoType_);
@@ -126,17 +128,22 @@ AppStyleItem *AppStyleItem::CreateStyleItem(uint16_t keyId, const jerry_value_t
     } else if (jerry_value_is_boolean(stylePropValue)) {
         newStyleItem->SetBoolValue(jerry_get_boolean_value(stylePropValue));
     } else {
-        strValueBuffer = MallocStringOf(stylePropValue);
+        uint16_t strLength = 0;
+        strValueBuffer = MallocStringOf(stylePropValue, &strLength);
         if (strValueBuffer == nullptr) {
             HILOG_ERROR(HILOG_MODULE_ACE, "convert style value to char failed, will be dropped");
             delete newStyleItem;
             newStyleItem = nullptr;
             return nullptr;
+        }
+        float percentValue = 0;
+        if (NumberParser::ParsePercentValue(strValueBuffer, strLength, percentValue)) {
+            newStyleItem->SetPercentValue(percentValue);
         } else {
             newStyleItem->SetStringValue((const char *)strValueBuffer);
-            ace_free(strValueBuffer);
-            strValueBuffer = nullptr;
         }
+        ace_free(strValueBuffer);
+        strValueBuffer = nullptr;
     }
 
     return newStyleItem;
@@ -173,6 +180,9 @@ AppStyleItem *AppStyleItem::CopyFrom(const AppStyleItem *from)
         case STYLE_PROP_VALUE_TYPE_FLOATING:
             styleItem->SetFloatingValue(from->GetFloatingValue());
             break;
+        case STYLE_PROP_VALUE_TYPE_PERCENT:
+            styleItem->SetPercentValue(from->GetPercentValue());
+            break;
         default:
             break;
     }
diff --git a/src/core/stylemgr/app_style_item.h b/frameworks/src/core/stylemgr/app_style_item.h
old mode 100755
new mode 100644
similarity index 80%
rename from src/core/stylemgr/app_style_item.h
rename to frameworks/src/core/stylemgr/app_style_item.h
index 3828487..5862e6c
--- a/src/core/stylemgr/app_style_item.h
+++ b/frameworks/src/core/stylemgr/app_style_item.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -22,9 +22,7 @@
 #include "js_fwk_common.h"
 #include "key_parser.h"
 #include "non_copyable.h"
-#if ENABLED(SECURE_C_FUNCTION)
 #include "securec.h"
-#endif // ENABLED(SECURE_C_FUNCTION)
 
 namespace OHOS {
 namespace ACELite {
@@ -32,16 +30,18 @@ constexpr char PSEUDO_CLASS_TYPE_ACTIVE[] = ":active";
 constexpr char PSEUDO_CLASS_TYPE_CHECKED[] = ":checked";
 
 enum {
-    STYLE_PROP_VALUE_TYPE_UNKOWN = 0x00,
+    STYLE_PROP_VALUE_TYPE_UNKNOWN = 0x00,
     STYLE_PROP_VALUE_TYPE_STRING = 0x01,
     STYLE_PROP_VALUE_TYPE_NUMBER = 0x02,
     STYLE_PROP_VALUE_TYPE_BOOL = 0x03,
     STYLE_PROP_VALUE_TYPE_FLOATING = 0x04,
+    STYLE_PROP_VALUE_TYPE_PERCENT = 0x05,
 };
 
 union StyleValue {
     double floating;
     int32_t number;
+    float percent;
     char *string;
     bool boolean;
 };
@@ -50,11 +50,31 @@ union StyleValue {
  * pseudo class support
  */
 enum {
-    PSEUDO_CLASS_ACTIVE = 0x00,  // :active
-    PSEUDO_CLASS_CHECKED = 0x01, // :checked
-    PSEUDO_CLASS_UNKNOWN = 0xFF  // please add new type above
+    PSEUDO_CLASS_UNKNOWN = 0x00, // please add new type above
+    PSEUDO_CLASS_ACTIVE = 0x01,  // :active
+    PSEUDO_CLASS_CHECKED = 0x02  // :checked
 };
 
+/**
+ * style flag
+ * former part for odd, latter part for even
+ */
+typedef struct U8Bits : public MemoryHeap {
+    bool standardOdd_ : 1;
+    bool pseudoActiveOdd_ : 1;
+    bool pseudoCheckedOdd_ : 1;
+    bool pseudoUnknownOdd_ : 1;
+    bool standardEven_ : 1;
+    bool pseudoActiveEven_ : 1;
+    bool pseudoCheckedEven_ : 1;
+    bool pseudoUnknownEven_ : 1;
+} U8BitsType;
+
+typedef union StyleFlag {
+    U8BitsType u8Bits;
+    uint8_t u8Byte;
+} StyleFlagType;
+
 class AppStyleItem final : public MemoryHeap {
 public:
     ACE_DISALLOW_COPY_AND_MOVE(AppStyleItem);
@@ -63,7 +83,7 @@ public:
           next_(nullptr),
           styleValue_({ 0.0 }),
           propNameId_(0),
-          valueType_(STYLE_PROP_VALUE_TYPE_UNKOWN),
+          valueType_(STYLE_PROP_VALUE_TYPE_UNKNOWN),
           pseudoClassType_(PSEUDO_CLASS_UNKNOWN)
     {
     }
@@ -110,6 +130,11 @@ public:
         return (valueType_ != STYLE_PROP_VALUE_TYPE_FLOATING) ? false : styleValue_.floating;
     }
 
+    float GetPercentValue() const
+    {
+        return (valueType_ != STYLE_PROP_VALUE_TYPE_PERCENT) ? 0 : styleValue_.percent;
+    }
+
     const AppStyleItem *GetNext() const
     {
         return next_;
@@ -156,7 +181,7 @@ public:
      * @param[in] keyLength: the target style name length
      * @param[out] keyLength: the new style name length
      *
-     * @return unkown or the corrensponding pseudo class type
+     * @return unknown or the corrensponding pseudo class type
      */
     static uint8_t EstimatePseudoClassType(const char * const styleKey, uint16_t *keyLength);
 
@@ -179,6 +204,12 @@ private:
         styleValue_.floating = value;
     }
 
+    void SetPercentValue(float value)
+    {
+        valueType_ = STYLE_PROP_VALUE_TYPE_PERCENT;
+        styleValue_.percent = value;
+    }
+
     void SetStringValue(const char * const value);
 
     AppStyleItem *pre_;
diff --git a/src/core/stylemgr/app_style_list.cpp b/frameworks/src/core/stylemgr/app_style_list.cpp
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/stylemgr/app_style_list.cpp
rename to frameworks/src/core/stylemgr/app_style_list.cpp
diff --git a/src/core/stylemgr/app_style_list.h b/frameworks/src/core/stylemgr/app_style_list.h
old mode 100755
new mode 100644
similarity index 100%
rename from src/core/stylemgr/app_style_list.h
rename to frameworks/src/core/stylemgr/app_style_list.h
diff --git a/src/core/stylemgr/app_style_manager.cpp b/frameworks/src/core/stylemgr/app_style_manager.cpp
similarity index 55%
rename from src/core/stylemgr/app_style_manager.cpp
rename to frameworks/src/core/stylemgr/app_style_manager.cpp
index c7a6ef1..1f1e42c 100755
--- a/src/core/stylemgr/app_style_manager.cpp
+++ b/frameworks/src/core/stylemgr/app_style_manager.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -16,6 +16,7 @@
 #include "stylemgr/app_style_manager.h"
 #include "ace_log.h"
 #include "component.h"
+#include "js_app_context.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -23,8 +24,10 @@ const char * const AppStyleManager::ID = "id";
 const char * const AppStyleManager::ATTR_STATIC_STYLE = "staticStyle";
 const char * const AppStyleManager::ATTR_DYNAMIC_STYLE = "dynamicStyle";
 const char * const AppStyleManager::ATTR_STATIC_CLASS = "staticClass";
-AppStyleManager::AppStyleManager() : styleSheet_(nullptr), combinedStyle_(nullptr)
+AppStyleManager::AppStyleManager() : styleSheet_(nullptr), flags_(nullptr)
 {
+    const uint8_t divisor = 2;
+    flagsLen_ = (KEYWORDS_MAX & 1) ? (KEYWORDS_MAX / divisor) + 1 : (KEYWORDS_MAX / divisor);
     // prepare jerry string value in advance to less the overhead
     idStrValue_ = jerry_create_string(reinterpret_cast<const jerry_char_t *>(ID));
     attrsStrValue_ = jerry_create_string(reinterpret_cast<const jerry_char_t *>(ATTR_ATTRS));
@@ -35,12 +38,7 @@ AppStyleManager::AppStyleManager() : styleSheet_(nullptr), combinedStyle_(nullpt
 
 AppStyleManager::~AppStyleManager()
 {
-    if (combinedStyle_ != nullptr) {
-        combinedStyle_->Reset();
-        delete combinedStyle_;
-        combinedStyle_ = nullptr;
-    }
-
+    ACE_FREE(flags_);
     if (styleSheet_ != nullptr) {
         styleSheet_->Reset();
         delete styleSheet_;
@@ -50,34 +48,46 @@ AppStyleManager::~AppStyleManager()
                       VA_ARG_END_FLAG);
 }
 
-const AppStyle *AppStyleManager::GetCombinedStyle() const
+void AppStyleManager::Prepare()
 {
-    return combinedStyle_;
-}
-
-const AppStyleItem *AppStyleManager::GetCombinedStyleItem(const char * const name) const
-{
-    if (combinedStyle_ != nullptr) {
-        return combinedStyle_->GetStyleItemByName(name);
+    if (flags_ != nullptr) {
+        return;
+    }
+    if (flagsLen_ == 0) {
+        return;
     }
-    return nullptr;
-}
 
-void AppStyleManager::ResetCombinedStyle()
-{
-    // do not free the combinedStyle_ object, just reset the content of it,
-    // that will slow down the next combining action for next component,
-    // it will be freed in ~AppStyleManager after the app exits
-    if (combinedStyle_ != nullptr) {
-        combinedStyle_->Reset();
+    flags_ = static_cast<StyleFlag *>(ace_malloc(flagsLen_ * sizeof(StyleFlag)));
+    if (flags_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "malloc flags data buffer failed");
     }
 }
 
-const AppStyleSheet *AppStyleManager::GetStyleSheet() const
+const AppStyleSheet *AppStyleManager::GetStyleSheet()
 {
     return styleSheet_;
 }
 
+void AppStyleManager::ApplyComponentStyles(const jerry_value_t options, Component& curr)
+{
+    ResetFlags();
+    HandleStaticStyle(options, curr);
+    HandleDynamicStyle(options, curr);
+    HandleIDSelectors(options, curr);
+    HandleClassSelectors(options, curr);
+}
+
+void AppStyleManager::ResetFlags()
+{
+    if (flags_ == nullptr) {
+        return;
+    }
+
+    for (uint16_t i = 0; i < flagsLen_; i++) {
+        flags_[i].u8Byte = 0;
+    }
+}
+
 void AppStyleManager::InitStyleSheet(jerry_value_t jsStyleSheetObj)
 {
     if (jerry_value_is_undefined(jsStyleSheetObj) || jerry_value_is_error(jsStyleSheetObj)) {
@@ -93,27 +103,6 @@ void AppStyleManager::InitStyleSheet(jerry_value_t jsStyleSheetObj)
     }
 }
 
-// { attrs: { x: '0', y: '0' }, staticClass: 'divStyle', staticStyle: {display: 'flex', width: 454, height: 454} }
-void AppStyleManager::CombineStylesForCurrentTag(const jerry_value_t options, Component &currentComponent)
-{
-    // reset first
-    ResetCombinedStyle();
-
-    if (jerry_value_is_undefined(options)) {
-        HILOG_WARN(HILOG_MODULE_ACE, "combine styles for current tag failed");
-        return;
-    }
-
-    // handle static styles
-    HandleInlineStyles(options, currentComponent);
-
-    // handle id selector
-    HandleIDSelectors(options);
-
-    // handle class selector
-    HandleClassSelectors(options);
-}
-
 // return value must be released by caller
 jerry_value_t AppStyleManager::GetStyleObjFromOptions(jerry_value_t options, const jerry_value_t name)
 {
@@ -146,15 +135,17 @@ jerry_value_t AppStyleManager::GetStyleObjFromOptions(jerry_value_t options, con
     return value;
 }
 
-void AppStyleManager::HandleInlineStyles(const jerry_value_t options, Component &currentComponent)
+void AppStyleManager::MarkStandardFlag(uint16_t styleItemNameId)
 {
-    // handle static inline styles
-    HandleStaticStyle(options);
-    // handle dynamic inline styles
-    HandleDynamicStyle(options, currentComponent);
+    uint16_t index = styleItemNameId >> 1;
+    if (styleItemNameId & 1) {
+        flags_[index].u8Bits.standardEven_ = 1;
+    } else {
+        flags_[index].u8Bits.standardOdd_ = 1;
+    }
 }
 
-void AppStyleManager::HandleStaticStyle(const jerry_value_t options)
+void AppStyleManager::HandleStaticStyle(const jerry_value_t options, Component &curr)
 {
     jerry_value_t staticStyleValue = GetStyleObjFromOptions(options, staticStyleStrValue_);
     if (jerry_value_is_undefined(staticStyleValue)) {
@@ -166,13 +157,19 @@ void AppStyleManager::HandleStaticStyle(const jerry_value_t options)
     for (uint32_t index = 0; index < propKeySize; index++) {
         jerry_value_t propKey = jerry_get_property_by_index(propKeys, index);
         jerry_value_t propValue = jerry_get_property(staticStyleValue, propKey);
-        CombineStyleItem(propKey, propValue);
+        AppStyleItem *newStyleItem = AppStyleItem::GenerateFromJSValue(propKey, propValue);
+        if (newStyleItem != nullptr) {
+            curr.ApplyStyle(newStyleItem);
+            MarkStandardFlag(newStyleItem->GetPropNameId());
+            delete newStyleItem;
+            newStyleItem = nullptr;
+        }
         ReleaseJerryValue(propKey, propValue, VA_ARG_END_FLAG);
     }
     ReleaseJerryValue(propKeys, staticStyleValue, VA_ARG_END_FLAG);
 }
 
-void AppStyleManager::HandleDynamicStyle(const jerry_value_t options, Component &currentComponent)
+void AppStyleManager::HandleDynamicStyle(const jerry_value_t options, Component &curr)
 {
     jerry_value_t dynamicStyleValue = GetStyleObjFromOptions(options, dynamicStyleStrValue_);
     if (jerry_value_is_undefined(dynamicStyleValue)) {
@@ -186,9 +183,22 @@ void AppStyleManager::HandleDynamicStyle(const jerry_value_t options, Component
         jerry_value_t propValue = jerry_get_property(dynamicStyleValue, propKey);
         // parse expression and new watcher for it
         if (jerry_value_is_function(propValue)) {
-            jerry_value_t expressionValue = currentComponent.ParseExpression(propKey, propValue);
+#ifdef FEATURE_LAZY_LOADING_MODULE
+            jerry_value_t expressionValue = CallJSFunction(propValue, curr.GetNativeElement(), nullptr, 0);
+            JsAppContext *context = JsAppContext::GetInstance();
+            LazyLoadManager *lazyLoadManager = const_cast<LazyLoadManager *>(context->GetLazyLoadManager());
+            lazyLoadManager->AddLazyLoadWatcher(curr.GetNativeElement(), propKey, propValue);
+#else
+            jerry_value_t expressionValue = curr.AddWatcherItem(propKey, propValue);
+#endif
             // the expression's calculating result should be used, not the function value itself
-            CombineStyleItem(propKey, expressionValue);
+            AppStyleItem *newStyleItem = AppStyleItem::GenerateFromJSValue(propKey, expressionValue);
+            if (newStyleItem != nullptr) {
+                curr.ApplyStyle(newStyleItem);
+                MarkStandardFlag(newStyleItem->GetPropNameId());
+                delete newStyleItem;
+                newStyleItem = nullptr;
+            }
             if (expressionValue != propValue) {
                 // generally, ParseExpression() will calculate the expression function's value and return
                 // the result back, so it's need to be released
@@ -200,9 +210,9 @@ void AppStyleManager::HandleDynamicStyle(const jerry_value_t options, Component
     ReleaseJerryValue(propKeys, dynamicStyleValue, VA_ARG_END_FLAG);
 }
 
-void AppStyleManager::HandleSingleSelector(const jerry_value_t prop, const jerry_value_t type)
+void AppStyleManager::HandleSingleSelector(const jerry_value_t prop, const jerry_value_t type, Component &curr)
 {
-    if (jerry_value_is_undefined(prop) || jerry_value_is_undefined(type)) {
+    if ((styleSheet_ == nullptr) || (jerry_value_is_undefined(prop)) || (jerry_value_is_undefined(type))) {
         return;
     }
 
@@ -211,28 +221,35 @@ void AppStyleManager::HandleSingleSelector(const jerry_value_t prop, const jerry
     if (valueBuffer == nullptr) {
         HILOG_ERROR(HILOG_MODULE_ACE, "convert id value to char failed, will be dropped");
         return;
-    } else {
-        if (strLen == 0) {
-            ace_free(valueBuffer);
-            valueBuffer = nullptr;
-            return;
-        }
     }
 
-    AppStyle *style = nullptr;
-    if (type == idStrValue_ && styleSheet_ != nullptr) {
-        style = styleSheet_->GetStyleFromIDSelectors(valueBuffer);
-    } else if (type == staticClassStrValue_ && styleSheet_ != nullptr) {
-        style = styleSheet_->GetStyleFromClassSelectors(valueBuffer);
-    } else {
-        HILOG_WARN(HILOG_MODULE_ACE, "not supported yet");
-    }
+    do {
+        // malloc successfully but length is not correct, give up
+        if (strLen == 0) {
+            break;
+        }
+
+        AppStyle *style = nullptr;
+        if (type == idStrValue_) {
+            style = styleSheet_->GetStyleFromIDSelectors(valueBuffer);
+        } else if (type == staticClassStrValue_) {
+            style = styleSheet_->GetStyleFromClassSelectors(valueBuffer);
+        } else {
+            HILOG_WARN(HILOG_MODULE_ACE, "not supported yet");
+        }
+        if (style == nullptr) {
+            // malloc failed or not supported
+            break;
+        }
+        ApplySingleStyle(*style, curr);
+    } while (0);
+
+    // free value buffer
     ace_free(valueBuffer);
     valueBuffer = nullptr;
-    CombineStyle(style);
 }
 
-void AppStyleManager::HandleSelectors(const jerry_value_t options, const jerry_value_t type)
+void AppStyleManager::HandleSelectors(const jerry_value_t options, const jerry_value_t type, Component &curr)
 {
     if (styleSheet_ == nullptr) {
         return;
@@ -245,7 +262,7 @@ void AppStyleManager::HandleSelectors(const jerry_value_t options, const jerry_v
 
     if (!jerry_value_is_array(propValue)) {
         // if is not array, just handle it
-        HandleSingleSelector(propValue, type);
+        HandleSingleSelector(propValue, type, curr);
     } else {
         // support array
         uint32_t propCount = jerry_get_array_length(propValue);
@@ -253,7 +270,7 @@ void AppStyleManager::HandleSelectors(const jerry_value_t options, const jerry_v
             // do reverse traversal to ensure style override correctly
             while (propCount > 0) {
                 jerry_value_t property = jerry_get_property_by_index(propValue, (propCount - 1));
-                HandleSingleSelector(property, type);
+                HandleSingleSelector(property, type, curr);
                 jerry_release_value(property);
                 propCount--;
             }
@@ -264,63 +281,80 @@ void AppStyleManager::HandleSelectors(const jerry_value_t options, const jerry_v
     jerry_release_value(propValue);
 }
 
-void AppStyleManager::HandleIDSelectors(const jerry_value_t options)
+void AppStyleManager::HandleIDSelectors(const jerry_value_t options, Component &curr)
 {
-    HandleSelectors(options, idStrValue_);
+    HandleSelectors(options, idStrValue_, curr);
 }
 
-void AppStyleManager::HandleClassSelectors(const jerry_value_t options)
+void AppStyleManager::HandleClassSelectors(const jerry_value_t options, Component &curr)
 {
-    HandleSelectors(options, staticClassStrValue_);
+    HandleSelectors(options, staticClassStrValue_, curr);
 }
 
-void AppStyleManager::CombineStyle(AppStyle *appStyle)
+bool AppStyleManager::isStandardExist(uint16_t styleItemNameId)
 {
-    if (appStyle == nullptr) {
-        return;
+    uint16_t index = styleItemNameId >> 1;
+    if (styleItemNameId & 1) {
+        return flags_[index].u8Bits.standardEven_;
     }
 
-    // go through id style's all items, add it to combinedStyle_ if it's not in it
-    const AppStyleItem *styleItem = appStyle->GetFirst();
-    while (styleItem != nullptr) {
-        if (combinedStyle_) {
-            uint16_t styleItemNameId = styleItem->GetPropNameId();
-            // if it's already in combined style, skip, as it's lower priority
-            const AppStyleItem *exitCombinedStyleItem = combinedStyle_->GetStyleItemByNameId(styleItemNameId);
-            if ((exitCombinedStyleItem == nullptr) ||
-                (exitCombinedStyleItem->GetPseudoClassType() != styleItem->GetPseudoClassType())) {
-                AppStyleItem *newItem = AppStyleItem::CopyFrom(styleItem);
-                AppendToCombinedStyle(newItem);
-            }
-            styleItem = styleItem->GetNext();
+    return  flags_[index].u8Bits.standardOdd_;
+}
+
+bool AppStyleManager::isPseudoExist(uint16_t styleItemNameId, uint16_t type)
+{
+    uint16_t index = styleItemNameId >> 1;
+    if (styleItemNameId & 1) {
+        if (type == PSEUDO_CLASS_ACTIVE) {
+            return flags_[index].u8Bits.pseudoActiveEven_;
+        }
+        return flags_[index].u8Bits.pseudoCheckedEven_;
+    }
+    if (type == PSEUDO_CLASS_ACTIVE) {
+        return flags_[index].u8Bits.pseudoActiveOdd_;
+    }
+    return flags_[index].u8Bits.pseudoCheckedOdd_;
+}
+
+void AppStyleManager::MarkPseudoFlag(uint16_t styleItemNameId, uint16_t type)
+{
+    uint16_t index = styleItemNameId >> 1;
+    if (styleItemNameId & 1) {
+        if (type == PSEUDO_CLASS_ACTIVE) {
+            flags_[index].u8Bits.pseudoActiveEven_ = 1;
         } else {
-            /* if combinedStyle_ is null, add all items directly */
-            while (styleItem != nullptr) {
-                AppStyleItem *newItem = AppStyleItem::CopyFrom(styleItem);
-                AppendToCombinedStyle(newItem);
-                styleItem = styleItem->GetNext();
-            }
+            flags_[index].u8Bits.pseudoCheckedEven_ = 1;
+        }
+    } else {
+        if (type == PSEUDO_CLASS_ACTIVE) {
+            flags_[index].u8Bits.pseudoActiveOdd_ = 1;
+        } else {
+            flags_[index].u8Bits.pseudoCheckedOdd_ = 1;
         }
     }
 }
 
-void AppStyleManager::CombineStyleItem(jerry_value_t stylePropName, jerry_value_t stylePropValue)
+void AppStyleManager::ApplySingleStyle(AppStyle &appStyle, Component &curr)
 {
-    AppStyleItem *newStyleItem = AppStyleItem::GenerateFromJSValue(stylePropName, stylePropValue);
-    AppendToCombinedStyle(newStyleItem);
-}
-
-void AppStyleManager::AppendToCombinedStyle(AppStyleItem *newStyleItem)
-{
-    if (newStyleItem == nullptr) {
-        return;
+    // go through id style's all items, apply it to component
+    const AppStyleItem *styleItem = appStyle.GetFirst();
+    while (styleItem != nullptr) {
+        uint16_t styleItemNameId = styleItem->GetPropNameId();
+        uint8_t pseudoClassType = styleItem->GetPseudoClassType();
+        // inline style not exists and pseudo class type is normal, set normal style
+        if (pseudoClassType == 0 && !isStandardExist(styleItemNameId)) {
+            MarkStandardFlag(styleItemNameId);
+            curr.ApplyStyle(styleItem);
+            styleItem = styleItem->GetNext();
+            continue;
+        }
+        // pseudo class type exists and no other same pseudo style has been applied, set pseudo class style
+        if (pseudoClassType != 0 && !isPseudoExist(styleItemNameId, pseudoClassType)) {
+            MarkPseudoFlag(styleItemNameId, pseudoClassType);
+            curr.ApplyStyle(styleItem);
+        }
+        styleItem = styleItem->GetNext();
     }
-
-    if (combinedStyle_ == nullptr) {
-        combinedStyle_ = new AppStyle();
-    }
-
-    combinedStyle_->AddStyleItem(newStyleItem);
 }
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/stylemgr/app_style_manager.h b/frameworks/src/core/stylemgr/app_style_manager.h
old mode 100755
new mode 100644
similarity index 64%
rename from src/core/stylemgr/app_style_manager.h
rename to frameworks/src/core/stylemgr/app_style_manager.h
index 596afb0..57bc44e
--- a/src/core/stylemgr/app_style_manager.h
+++ b/frameworks/src/core/stylemgr/app_style_manager.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -16,6 +16,7 @@
 #ifndef OHOS_ACELITE_APP_STYLE_MANAGER_H
 #define OHOS_ACELITE_APP_STYLE_MANAGER_H
 
+#include "keys.h"
 #include "non_copyable.h"
 #include "stylemgr/app_style.h"
 #include "stylemgr/app_style_sheet.h"
@@ -30,33 +31,34 @@ public:
     ~AppStyleManager();
 
     void InitStyleSheet(jerry_value_t jsStyleSheetObj);
-    // combine id/static class/static styles for current tag from arguments of createElement function
-    void CombineStylesForCurrentTag(const jerry_value_t options, Component& currentComponent);
-    const AppStyle* GetCombinedStyle() const;
-    const AppStyleItem* GetCombinedStyleItem(const char * const name) const;
-    void ResetCombinedStyle();
-    const AppStyleSheet* GetStyleSheet() const;
+    const AppStyleSheet* GetStyleSheet();
+    void ApplyComponentStyles(const jerry_value_t options, Component& curr);
+    void Prepare();
+    bool isStandardExist(uint16_t styleItemNameId);
+    bool isPseudoExist(uint16_t styleItemNameId, uint16_t type);
 
 private:
-    void HandleInlineStyles(const jerry_value_t options, Component& currentComponent);
-    void HandleStaticStyle(const jerry_value_t options);
-    void HandleDynamicStyle(const jerry_value_t options, Component& currentComponent);
-    void HandleIDSelectors(const jerry_value_t options);
-    void HandleClassSelectors(const jerry_value_t options);
-    void HandleSelectors(const jerry_value_t options, const jerry_value_t type);
-    void HandleSingleSelector(const jerry_value_t selectorValue, const jerry_value_t type);
-    void CombineStyleItem(jerry_value_t stylePropName, jerry_value_t stylePropValue);
-    void AppendToCombinedStyle(AppStyleItem* newStyle);
-    void CombineStyle(AppStyle* appStyle);
+    void ApplySingleStyle(AppStyle &appStyle, Component &curr);
     jerry_value_t GetStyleObjFromOptions(jerry_value_t options, const jerry_value_t name);
+    void HandleStaticStyle(const jerry_value_t options, Component& curr);
+    void HandleDynamicStyle(const jerry_value_t options, Component& curr);
+    void HandleIDSelectors(const jerry_value_t options, Component &curr);
+    void HandleClassSelectors(const jerry_value_t options, Component &curr);
+    void HandleSelectors(const jerry_value_t options, const jerry_value_t type, Component &curr);
+    void HandleSingleSelector(const jerry_value_t selectorValue, const jerry_value_t type, Component &curr);
+    void ResetFlags();
+    void MarkStandardFlag(uint16_t styleItemNameId);
+    void MarkPseudoFlag(uint16_t styleItemNameId, uint16_t type);
     AppStyleSheet* styleSheet_;
-    AppStyle* combinedStyle_; // record the combined styles for current tag
+
     // prepare jerry string value in advance to speed up
     jerry_value_t idStrValue_;
     jerry_value_t attrsStrValue_;
     jerry_value_t dynamicStyleStrValue_;
     jerry_value_t staticStyleStrValue_;
     jerry_value_t staticClassStrValue_;
+    StyleFlag* flags_;
+    uint16_t flagsLen_;
     static const char * const ID;
     static const char * const ATTR_STATIC_STYLE;
     static const char * const ATTR_DYNAMIC_STYLE;
diff --git a/src/core/stylemgr/app_style_sheet.cpp b/frameworks/src/core/stylemgr/app_style_sheet.cpp
old mode 100755
new mode 100644
similarity index 97%
rename from src/core/stylemgr/app_style_sheet.cpp
rename to frameworks/src/core/stylemgr/app_style_sheet.cpp
index 4ce2eb4..878fbeb
--- a/src/core/stylemgr/app_style_sheet.cpp
+++ b/frameworks/src/core/stylemgr/app_style_sheet.cpp
@@ -86,6 +86,10 @@ void AppStyleSheet::InitSelectors(AppStyleList** selectorsList, jerry_value_t se
 
     if ((*selectorsList) == nullptr) {
         (*selectorsList) = new AppStyleList();
+        if ((*selectorsList) == nullptr) {
+            // malloc failed
+            return;
+        }
     }
 
     jerry_value_t styleKeys = jerry_get_object_keys(selectorsObj);
diff --git a/src/core/stylemgr/app_style_sheet.h b/frameworks/src/core/stylemgr/app_style_sheet.h
old mode 100755
new mode 100644
similarity index 97%
rename from src/core/stylemgr/app_style_sheet.h
rename to frameworks/src/core/stylemgr/app_style_sheet.h
index 51032d9..e92ce1f
--- a/src/core/stylemgr/app_style_sheet.h
+++ b/frameworks/src/core/stylemgr/app_style_sheet.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -36,12 +36,12 @@ public:
     AppStyle* GetStyleFromClassSelectors(const char * const name) const;
     AppStyle* GetStyleFromKeyFramesSelectors(const char * const name) const;
     AppStyle* GetStyleFromSelectors(AppStyleList* selectors, const char * const name) const;
-
-private:
-    void InitSelectors(AppStyleList** selectorsList, jerry_value_t selectorsObj, bool isKeyFrames);
     AppStyleList* idSelectors_;
     AppStyleList* classSelectors_;
     AppStyleList* keyFrameSelectors_;
+
+private:
+    void InitSelectors(AppStyleList** selectorsList, jerry_value_t selectorsObj, bool isKeyFrames);
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/frameworks/src/core/stylemgr/test/unittest/BUILD.gn b/frameworks/src/core/stylemgr/test/unittest/BUILD.gn
new file mode 100755
index 0000000..7cbfa2d
--- /dev/null
+++ b/frameworks/src/core/stylemgr/test/unittest/BUILD.gn
@@ -0,0 +1,31 @@
+#Copyright (c) 2021 Huawei Device 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("//build/lite/config/test.gni")
+import("//foundation/ace/ace_engine_lite/test/ace_test_config.gni")
+
+unittest("js_frameworks_test_stylemgr") {
+  output_extension = "bin"
+  output_dir = test_output_root
+  configs = [ "$ace_lite_root/test:test_common_config" ]
+  sources = [
+    "$ace_lite_root/frameworks/src/core/components/test/unittest/common/root_component_mock.cpp",
+    "$ace_lite_root/test/moduletest/common/base_test.cpp",
+    "common/stylemgr_tdd_test.cpp",
+  ]
+  deps = ace_test_deps
+}
+
+group("stylemgr_unittest") {
+  deps = [ ":js_frameworks_test_stylemgr" ]
+}
diff --git a/frameworks/src/core/stylemgr/test/unittest/common/stylemgr_tdd_test.cpp b/frameworks/src/core/stylemgr/test/unittest/common/stylemgr_tdd_test.cpp
new file mode 100755
index 0000000..aacc13b
--- /dev/null
+++ b/frameworks/src/core/stylemgr/test/unittest/common/stylemgr_tdd_test.cpp
@@ -0,0 +1,1079 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "stylemgr_tdd_test.h"
+#include <cstdio>
+#include "component.h"
+#include "div_component.h"
+#include "js_ability.h"
+#include "js_debugger_config.h"
+#include "stylemgr/app_style_manager.h"
+#include "stylemgr/app_style_sheet.h"
+
+namespace OHOS {
+namespace ACELite {
+StyleMgrTddTest::StyleMgrTddTest()
+{}
+
+void StyleMgrTddTest::SetUp()
+{
+    Debugger::GetInstance().SetupJSContext();
+    jerry_init(JERRY_INIT_EMPTY);
+    if (g_testStyleMgr == nullptr) {
+        g_testStyleMgr = new AppStyleManager();
+        g_testStyleMgr->Prepare();
+    }
+    rootComponentMock_.PrepareRootContainer();
+}
+
+void StyleMgrTddTest::TearDown()
+{
+    if (g_testStyleMgr != nullptr) {
+        delete g_testStyleMgr;
+        g_testStyleMgr = nullptr;
+    }
+    jerry_cleanup();
+    Debugger::GetInstance().ReleaseJSContext();
+}
+
+void StyleMgrTddTest::TestCaseB(const char* name) const
+{
+    g_assertRecord = 0;
+    g_currentTestCaseName = const_cast<char *>(name);
+}
+
+void StyleMgrTddTest::JudeTestCaseResult() const
+{
+    if (g_assertRecord > 0) {
+        printf("[Test Case] [%s]   FAILED \n", g_currentTestCaseName);
+    } else {
+        printf("[Test Case] [%s]   PASSED \n", g_currentTestCaseName);
+    }
+}
+
+void StyleMgrTddTest::ReleaseTestResources(const jerry_value_t* values,
+                                           uint8_t valueCount,
+                                           Component** components,
+                                           uint8_t componentCount) const
+{
+    // release JS values
+    if ((values != nullptr)  && (valueCount != 0)) {
+        for (int i = 0; i < valueCount; i++) {
+            jerry_release_value(values[i]);
+        }
+    }
+
+    // release component instances
+    if ((components != nullptr) && (componentCount != 0)) {
+        for (int i = 0; ((i < componentCount) && (components[i] != nullptr)); i++) {
+            components[i]->Release();
+            delete components[i];
+            components[i] = nullptr;
+        }
+    }
+}
+
+/**
+ * prepare valid style sheet with given selectors and key value paire
+ */
+JSValue StyleMgrTddTest::PrepareStyleSheet(const char* selectors,
+                                           const char* selectorName,
+                                           const char* propName,
+                                           uint16_t propValue) const
+{
+    if ((selectors == nullptr) || (strlen(selectors) == 0) || (selectorName == nullptr) ||
+        (strlen(selectorName) == 0) || (propName == nullptr) || (strlen(propName) == 0)) {
+        return jerry_create_undefined();
+    }
+
+    /**
+     * create one style sheet
+     */
+    JSValue styleSheet = jerry_create_object();
+
+    /**
+     * create id selector object and set it to style sheet
+     */
+    JSValue idSelectorKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(selectors));
+    JSValue idSelectors = jerry_create_object();
+    jerry_release_value(jerry_set_property(styleSheet, idSelectorKey, idSelectors));
+    jerry_release_value(idSelectorKey);
+
+    /**
+     * create one id selector
+     */
+    JSValue sampleSelectorKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(selectorName));
+    JSValue sampleSelector = jerry_create_object();
+    jerry_release_value(jerry_set_property(idSelectors, sampleSelectorKey, sampleSelector));
+    jerry_release_value(sampleSelectorKey);
+
+    /**
+     * add height key value into sample
+     */
+    JSValue heightKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(propName));
+    JSValue heightValue = jerry_create_number(propValue);
+    jerry_release_value(jerry_set_property(sampleSelector, heightKey, heightValue));
+    jerry_release_value(heightKey);
+
+    return styleSheet;
+}
+
+JSValue StyleMgrTddTest::PrepareStyleSheetWithKeyValues(const char* selector,
+                                                        JSValue selectorObj,
+                                                        const char* selectorName,
+                                                        const uint8_t itemCount,
+                                                        char* keys[],
+                                                        const uint16_t values[]) const
+{
+    if ((itemCount == 0) || (selectorName == nullptr) || (strlen(selectorName) == 0) ||
+        (keys == nullptr) || (values == nullptr)) {
+        return jerry_create_undefined();
+    }
+
+    /**
+     * create one style sheet
+     */
+    JSValue styleSheet = jerry_create_object();
+
+    /**
+    * create selector object and set it to style sheet
+    */
+    JSValue selectorObjectTarget = jerry_create_object();
+    JSValue selectorKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(selector));
+    jerry_release_value(jerry_set_property(styleSheet, selectorKey, selectorObjectTarget));
+    jerry_release_value(selectorKey);
+
+    /**
+     * set selector into style sheet object
+     */
+    JSValue selectorNameValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(selectorName));
+    jerry_release_value(jerry_set_property(selectorObjectTarget, selectorNameValue, selectorObj));
+    jerry_release_value(selectorNameValue);
+
+    /**
+     * add value into selector
+     */
+    for (uint8_t i = 0; i < itemCount; i++) {
+        JSValue widthValue = jerry_create_number(values[i]);
+        JSValue keyNameValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(keys[i]));
+        jerry_release_value(jerry_set_property(selectorObj, keyNameValue, widthValue));
+        jerry_release_value(keyNameValue);
+    }
+
+    return styleSheet;
+}
+
+/**
+ * prepare valid style option
+ */
+JSValue StyleMgrTddTest::PrepareStyleOption(const char* styleType, const char* propName, uint16_t propValue) const
+{
+    if ((styleType == nullptr) || (strlen(styleType) == 0) || (propName == nullptr) || (strlen(propName) == 0)) {
+        return jerry_create_undefined();
+    }
+
+    /**
+     * create one style sheet
+     */
+    JSValue styleOption = jerry_create_object();
+
+    /**
+     * create style object
+     */
+    JSValue styleTypeKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(styleType));
+    JSValue styleObj = jerry_create_object();
+    jerry_release_value(jerry_set_property(styleOption, styleTypeKey, styleObj));
+    jerry_release_value(styleTypeKey);
+
+    /**
+     * add height key value into style
+     */
+    JSValue propKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(propName));
+    JSValue propValueObj = jerry_create_number(propValue);
+    jerry_release_value(jerry_set_property(styleObj, propKey, propValueObj));
+    jerry_release_value(propKey);
+
+    return styleOption;
+}
+
+/**
+ * prepare valid attr option
+ */
+JSValue StyleMgrTddTest::PrepareAttrOption(const char* propName, const char* propValue) const
+{
+    if ((propName == nullptr) || (strlen(propName) == 0)) {
+        return jerry_create_undefined();
+    }
+
+    /**
+     * create one style sheet
+     */
+    JSValue option = jerry_create_object();
+
+    /**
+     * create style object
+     */
+    JSValue attrsKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>("attrs"));
+    JSValue attrsObj = jerry_create_object();
+    jerry_release_value(jerry_set_property(option, attrsKey, attrsObj));
+    jerry_release_value(attrsKey);
+
+    /**
+     * add height key value into style
+     */
+    JSValue propKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(propName));
+    JSValue propValueObj = jerry_create_string(reinterpret_cast<const jerry_char_t *>(propValue));
+    jerry_release_value(jerry_set_property(attrsObj, propKey, propValueObj));
+    jerry_release_value(propKey);
+
+    return option;
+}
+
+void StyleMgrTddTest::AddValueToAttrOption(jerry_value_t attrOption, const char* propName, const char* propValue) const
+{
+    if ((propName == nullptr) || (strlen(propName) == 0)) {
+        return;
+    }
+
+    JSValue attrsKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>("attrs"));
+    JSValue attrsObj = jerry_create_object();
+    jerry_release_value(jerry_set_property(attrOption, attrsKey, attrsObj));
+    jerry_release_value(attrsKey);
+    /**
+     * add height key value into style
+     */
+    JSValue propKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(propName));
+    JSValue propValueObj = jerry_create_string(reinterpret_cast<const jerry_char_t *>(propValue));
+    jerry_release_value(jerry_set_property(attrsObj, propKey, propValueObj));
+    jerry_release_value(propKey);
+}
+
+void StyleMgrTddTest::AddStrValueToOption(jerry_value_t option, const char* propName, const char* propValue) const
+{
+    if ((propName == nullptr) || (strlen(propName) == 0)) {
+        return;
+    }
+
+    /**
+    * add height key value into style
+    */
+    JSValue propKey = jerry_create_string(reinterpret_cast<const jerry_char_t *>(propName));
+    JSValue propValueObj = jerry_create_string(reinterpret_cast<const jerry_char_t *>(propValue));
+    jerry_release_value(jerry_set_property(option, propKey, propValueObj));
+    jerry_release_value(propKey);
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerInlineStyle001()
+{
+    TestCaseB("ACELiteStyleManagerInlineStyle001");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. create undefine for style sheet object
+     */
+    JSValue undefined = jerry_create_undefined();
+
+    /**
+     * @tc.steps: step3. trigger style sheet initialization
+     */
+    g_testStyleMgr->InitStyleSheet(undefined);
+
+    /**
+     * @tc.steps: step4. check if the style sheet object is generated
+     */
+    EXPECT_TRUE(g_testStyleMgr->GetStyleSheet() == nullptr);
+
+    /**
+     * @tc.steps: step4. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerInlineStyle002()
+{
+    TestCaseB("ACELiteStyleManagerInlineStyle002");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. create undefine for style sheet object
+     */
+    JSValue styleSheet = jerry_create_object();
+
+    /**
+     * @tc.steps: step3. trigger style sheet initialization
+     */
+    g_testStyleMgr->InitStyleSheet(styleSheet);
+
+    /**
+     * @tc.steps: step4. check if the style sheet object is generated, style sheet instance will be created out
+     */
+    EXPECT_FALSE(g_testStyleMgr->GetStyleSheet() == nullptr);
+
+    /**
+     * @tc.steps: step5. release style sheet object
+     */
+    jerry_release_value(styleSheet);
+
+    /**
+     * @tc.steps: step6. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerInlineStyle003()
+{
+    TestCaseB("ACELiteStyleManagerInlineStyle003");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet
+     */
+    constexpr char id[] = "idSelectors";
+    constexpr char *sample = "sample";
+    constexpr char heightKey[] = "height";
+    constexpr int32_t heightValue = 50;
+    JSValue styleSheetObj = PrepareStyleSheet(id, sample, heightKey, heightValue);
+
+    /**
+     * @tc.steps: step3. trigger style sheet initialization
+     */
+    g_testStyleMgr->InitStyleSheet(styleSheetObj);
+
+    /**
+     * @tc.steps: step4. check the result
+     */
+    AppStyleSheet* styleSheet = const_cast<AppStyleSheet *>(g_testStyleMgr->GetStyleSheet());
+    if (styleSheet == nullptr) {
+        jerry_release_value(styleSheetObj);
+        TDD_CASE_END();
+        return;
+    }
+    EXPECT_FALSE(styleSheet == nullptr);
+
+    AppStyle* sampleSelector = styleSheet->GetStyleFromIDSelectors(sample);
+    if (sampleSelector == nullptr) {
+        jerry_release_value(styleSheetObj);
+        TDD_CASE_END();
+        return;
+    }
+    EXPECT_FALSE(sampleSelector == nullptr);
+
+    AppStyleItem* sampleSelectorItem = const_cast<AppStyleItem *>(sampleSelector->GetFirst());
+    if (sampleSelectorItem == nullptr) {
+        jerry_release_value(styleSheetObj);
+        TDD_CASE_END();
+        return;
+    }
+    EXPECT_FALSE(sampleSelectorItem == nullptr);
+
+    EXPECT_EQ(sampleSelectorItem->GetNumValue(), heightValue);
+
+    /**
+     * @tc.steps: step5. release the style sheet JS object
+     */
+    jerry_release_value(styleSheetObj);
+
+    /**
+     * @tc.steps: step6. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerInlineStyle004()
+{
+    TestCaseB("ACELiteStyleManagerInlineStyle004");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet with class selector
+     */
+    constexpr char classSelector[] = "classSelectors";
+    constexpr char *sample = "sampleClass";
+    constexpr char widthKey[] = "width";
+    constexpr int32_t widthValue = 200;
+    JSValue styleSheetObj = PrepareStyleSheet(classSelector, sample, widthKey, widthValue);
+
+    /**
+     * @tc.steps: step3. trigger style sheet initialization
+     */
+    g_testStyleMgr->InitStyleSheet(styleSheetObj);
+
+    /**
+     * @tc.steps: step4. check the result
+     */
+    AppStyleSheet* styleSheet = const_cast<AppStyleSheet *>(g_testStyleMgr->GetStyleSheet());
+    if (styleSheet == nullptr) {
+        jerry_release_value(styleSheetObj);
+        TDD_CASE_END();
+        return;
+    }
+    EXPECT_FALSE(styleSheet == nullptr);
+
+    AppStyle* sampleSelector = styleSheet->GetStyleFromClassSelectors(sample);
+    if (sampleSelector == nullptr) {
+        jerry_release_value(styleSheetObj);
+        TDD_CASE_END();
+        return;
+    }
+    EXPECT_FALSE(sampleSelector == nullptr);
+
+    AppStyleItem* sampleSelectorItem = const_cast<AppStyleItem *>(sampleSelector->GetFirst());
+    if (sampleSelectorItem == nullptr) {
+        jerry_release_value(styleSheetObj);
+        TDD_CASE_END();
+        return;
+    }
+    EXPECT_FALSE(sampleSelectorItem == nullptr);
+
+    EXPECT_EQ(sampleSelectorItem->GetNumValue(), widthValue);
+
+    /**
+     * @tc.steps: step5. release the style sheet JS object
+     */
+    jerry_release_value(styleSheetObj);
+
+    /**
+     * @tc.steps: step6. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerInlineStyle005()
+{
+    TestCaseB("ACELiteStyleManagerInlineStyle005");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet with class selector
+     */
+    constexpr char classSelector[] = "classSelectors";
+    // give an very long selector name
+    constexpr char sample[] = "sampleClassSelectorWithVeryLongNameOverSixtyFourCharatersWhichIsTooLong";
+    constexpr char widthKey[] = "width";
+    constexpr int32_t widthValue = 200;
+    JSValue styleSheetObj = PrepareStyleSheet(classSelector, sample, widthKey, widthValue);
+
+    /**
+     * @tc.steps: step3. trigger style sheet initialization
+     */
+    g_testStyleMgr->InitStyleSheet(styleSheetObj);
+
+    /**
+     * @tc.steps: step4. check the result
+     */
+    AppStyleSheet* styleSheet = const_cast<AppStyleSheet *>(g_testStyleMgr->GetStyleSheet());
+    if (styleSheet == nullptr) {
+        jerry_release_value(styleSheetObj);
+        TDD_CASE_END();
+        return;
+    }
+    EXPECT_FALSE(styleSheet == nullptr);
+
+    /**
+     * @tc.steps: step5. release the style sheet JS object
+     */
+    jerry_release_value(styleSheetObj);
+
+    /**
+     * @tc.steps: step6. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerIDSelector001()
+{
+    TestCaseB("ACELiteStyleManagerIDSelector001");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet with class selector
+     */
+    DivComponent* divComponent = new DivComponent(UNDEFINED, UNDEFINED, g_testStyleMgr);
+
+    /**
+     * @tc.steps: step3. check the result
+     */
+    EXPECT_TRUE(g_testStyleMgr->GetStyleSheet() == nullptr);
+
+    divComponent->Release();
+    delete divComponent;
+    divComponent = nullptr;
+
+    /**
+     * @tc.steps: step4. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerIDSelector002()
+{
+    TestCaseB("ACELiteStyleManagerIDSelector002");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet with class selector
+     */
+    constexpr char styleType[] = "staticStyle";
+    constexpr char widthKey[] = "width";
+    constexpr int32_t widthValue = 200;
+    jerry_value_t styleOption = PrepareStyleOption(styleType, widthKey, widthValue);
+    DivComponent* divComponent = new DivComponent(styleOption, UNDEFINED, g_testStyleMgr);
+    divComponent->Render();
+    /**
+     * @tc.steps: step3. check the result
+     */
+    EXPECT_TRUE(g_testStyleMgr->GetStyleSheet() == nullptr);
+
+    /**
+     * @tc.steps: step4. check the result
+     */
+    jerry_release_value(styleOption);
+    divComponent->Release();
+    delete divComponent;
+    divComponent = nullptr;
+
+    /**
+     * @tc.steps: step5. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerIDSelector003()
+{
+    TestCaseB("ACELiteStyleManagerIDSelector003");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet with class selector
+     */
+    constexpr char idKey[] = "id";
+    constexpr char idValue[] = "test";
+    jerry_value_t styleOption = PrepareAttrOption(idKey, idValue);
+    DivComponent* divComponent = new DivComponent(styleOption, UNDEFINED, g_testStyleMgr);
+    divComponent->Render();
+
+    /**
+     * @tc.steps: step3. check the result, no style sheet, so no one will be added into combined style
+     */
+    EXPECT_TRUE(g_testStyleMgr->GetStyleSheet() == nullptr);
+
+    /**
+     * @tc.steps: step4. check the result
+     */
+    jerry_release_value(styleOption);
+    divComponent->Release();
+    delete divComponent;
+    divComponent = nullptr;
+
+    /**
+     * @tc.steps: step5. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerIDSelector004()
+{
+    TestCaseB("ACELiteStyleManagerIDSelector004");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet with class selector
+     */
+    constexpr char classSelector[] = "classSelectors";
+    constexpr char sample[] = "sample";
+    constexpr char widthKey[] = "width";
+    constexpr int32_t widthValue = 200;
+    JSValue styleSheetObj = PrepareStyleSheet(classSelector, sample, widthKey, widthValue);
+    /**
+     * @tc.steps: step3. trigger style sheet initialization
+     */
+    g_testStyleMgr->InitStyleSheet(styleSheetObj);
+
+    /**
+     * @tc.steps: step4. prepare valid style sheet with class selector
+     */
+    constexpr char styleType[] = "staticStyle";
+    constexpr char heightKey[] = "height";
+    constexpr int32_t heightValue = 100;
+    jerry_value_t option = PrepareStyleOption(styleType, heightKey, heightValue);
+
+    AddValueToAttrOption(option, "staticClass", "sample");
+    DivComponent* divComponent = new DivComponent(option, UNDEFINED, g_testStyleMgr);
+
+    const uint8_t valueCount = 2;
+    const jerry_value_t jsValues[valueCount] = {option, styleSheetObj};
+    const uint8_t componentCount = 1;
+    Component* components[1] = {divComponent};
+
+    /**
+     * @tc.steps: step5. check the result, no style sheet, so no one will be added into combined style
+     */
+    EXPECT_FALSE(g_testStyleMgr->GetStyleSheet() == nullptr);
+    if (g_testStyleMgr->GetStyleSheet() == nullptr) {
+        ReleaseTestResources(jsValues, valueCount, components, componentCount);
+        TDD_CASE_END();
+        return;
+    }
+
+    /**
+     * @tc.steps: step6. release test resources
+     */
+    ReleaseTestResources(jsValues, valueCount, components, componentCount);
+
+    /**
+     * @tc.steps: step7. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerIDSelector005()
+{
+    TestCaseB("ACELiteStyleManagerIDSelector005");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet with class selector
+     */
+    constexpr char styleType[] = "staticStyle";
+    constexpr char widthKey2[] = "width";
+    constexpr int32_t widthValue2 = 100;
+    jerry_value_t styleOption = PrepareStyleOption(styleType, widthKey2, widthValue2);
+    DivComponent* divComponent = new DivComponent(styleOption, UNDEFINED, g_testStyleMgr);
+
+    constexpr char classSelector[] = "classSelectors";
+    constexpr char sample[] = "sample";
+    constexpr char widthKey[] = "width";
+    constexpr int32_t widthValue = 500;
+    JSValue styleSheetObj = PrepareStyleSheet(classSelector, sample, widthKey, widthValue);
+    /**
+     * @tc.steps: step3. trigger style sheet initialization
+     */
+    g_testStyleMgr->InitStyleSheet(styleSheetObj);
+    rootComponentMock_.RenderComponent(*divComponent);
+
+    /**
+     * @tc.steps: step4. prepare valid style sheet with class selector
+     */
+    Component* component = reinterpret_cast<Component *>(divComponent);
+    UIViewGroup* uiView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+
+    const uint8_t jsValueCount = 2;
+    const jerry_value_t jerryValues[jsValueCount] = {styleOption, styleSheetObj};
+    const uint8_t componentNumber = 1;
+    Component* componentInstances[1] = {divComponent};
+
+    /**
+     * @tc.steps: step5. check the result, no style sheet, so no one will be added into combined style
+     */
+    AppStyleSheet* appStyleSheet = const_cast<AppStyleSheet *>(g_testStyleMgr->GetStyleSheet());
+    EXPECT_FALSE(appStyleSheet == nullptr);
+    if (appStyleSheet == nullptr) {
+        ReleaseTestResources(jerryValues, jsValueCount, componentInstances, componentNumber);
+        TDD_CASE_END();
+        return;
+    }
+
+    uint16_t width = uiView->GetWidth();
+    EXPECT_EQ(width, widthValue2);
+
+    /**
+     * @tc.steps: step6. release test resources
+     */
+    ReleaseTestResources(jerryValues, jsValueCount, componentInstances, componentNumber);
+
+    /**
+     * @tc.steps: step7. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerClassSelector001()
+{
+    TestCaseB("ACELiteStyleManagerClassSelector001");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet with class selector
+     */
+    DivComponent* divComponent = new DivComponent(UNDEFINED, UNDEFINED, g_testStyleMgr);
+    divComponent->Render();
+
+    /**
+     * @tc.steps: step5. check the result, no style sheet, so no one will be added into combined style
+     */
+    EXPECT_TRUE(const_cast<AppStyleSheet *>(g_testStyleMgr->GetStyleSheet()) == nullptr);
+
+    divComponent->Release();
+    delete divComponent;
+    divComponent = nullptr;
+
+    /**
+     * @tc.steps: step4. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerClassSelector002()
+{
+    TestCaseB("ACELiteStyleManagerClassSelector002");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style
+     */
+    constexpr int32_t heightValue = 100;
+    constexpr char heightKey[] = "height";
+    constexpr char styleType[] = "staticStyle";
+    jerry_value_t styleOption = PrepareStyleOption(styleType, heightKey, heightValue);
+    DivComponent* divComponent = new DivComponent(styleOption, UNDEFINED, g_testStyleMgr);
+    divComponent->Render();
+
+    /**
+     * @tc.steps: step3. check the result
+     */
+    const AppStyleSheet* appStyleSheet = const_cast<AppStyleSheet *>(g_testStyleMgr->GetStyleSheet());
+    EXPECT_TRUE(appStyleSheet == nullptr);
+
+    /**
+     * @tc.steps: step4. clean up test environment
+     */
+    jerry_release_value(styleOption);
+    divComponent->Release();
+    delete divComponent;
+    divComponent = nullptr;
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerClassSelector003()
+{
+    TestCaseB("ACELiteStyleManagerClassSelector003");
+    /**
+     * @tc.steps: step1. init test environment
+     */
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step2. prepare valid style sheet with class selector
+     */
+    constexpr char classSelector[] = "classSelectors";
+    constexpr char sample[] = "sample";
+    constexpr char widthKey[] = "width";
+    constexpr int32_t widthValue = 200;
+    JSValue styleSheetObj = PrepareStyleSheet(classSelector, sample, widthKey, widthValue);
+    /**
+     * @tc.steps: step3. trigger style sheet initialization
+     */
+    g_testStyleMgr->InitStyleSheet(styleSheetObj);
+
+    /**
+     * @tc.steps: step4. prepare valid style sheet with class selector
+     */
+    constexpr char styleType[] = "staticStyle";
+    constexpr char widthKey2[] = "width";
+    constexpr int32_t widthValue2 = 100;
+    jerry_value_t styleOption = PrepareStyleOption(styleType, widthKey2, widthValue2);
+    DivComponent* divComponent = new DivComponent(styleOption, UNDEFINED, g_testStyleMgr);
+    rootComponentMock_.RenderComponent(*divComponent);
+
+    const uint8_t jsCount = 2;
+    const jerry_value_t jsObjects[jsCount] = {styleOption, styleSheetObj};
+    const uint8_t divNumber = 1;
+    Component* divComponents[1] = {divComponent};
+
+    /**
+     * @tc.steps: step5. check the result, no style sheet, so no one will be added into combined style
+     */
+    Component* component = reinterpret_cast<Component *>(divComponent);
+    UIViewGroup* uiView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    AppStyleSheet* appStyleSheet = const_cast<AppStyleSheet *>(g_testStyleMgr->GetStyleSheet());
+    EXPECT_FALSE(appStyleSheet == nullptr);
+    if (appStyleSheet == nullptr) {
+        ReleaseTestResources(jsObjects, jsCount, divComponents, divNumber);
+        TDD_CASE_END();
+        return;
+    }
+
+    uint16_t width = uiView->GetWidth();
+    EXPECT_EQ(width, widthValue2);
+
+    /**
+     * @tc.steps: step6. release test resources
+     */
+    ReleaseTestResources(jsObjects, jsCount, divComponents, divNumber);
+
+    /**
+     * @tc.steps: step7. clean up test environment
+     */
+    TDD_CASE_END();
+}
+
+JSValue StyleMgrTddTest::PreparePesudoObjects(uint16_t value) const
+{
+    constexpr char classSelector[] = "classSelectors";
+    constexpr char sample[] = "sample";
+    constexpr int32_t activeWidthValue = 300;
+    JSValue classSelectorObj = jerry_create_object();
+    const uint8_t itemCount = 2;
+    char* keys[itemCount];
+    uint16_t const values[itemCount] = {value, activeWidthValue};
+    keys[0] = const_cast<char *>("width");
+    keys[1] = const_cast<char *>("width:active");
+    JSValue styleSheetObj =
+        PrepareStyleSheetWithKeyValues(classSelector, classSelectorObj, sample, itemCount, keys, values);
+    return styleSheetObj;
+}
+
+void StyleMgrTddTest::ACELiteStyleManagerCSSPesudo001()
+{
+    TDD_CASE_BEGIN();
+
+    /**
+     * @tc.steps: step1. prepare pesudo class items
+     */
+    constexpr uint16_t widthValue = 200;
+    JSValue styleSheetObj = PreparePesudoObjects(widthValue);
+
+    /**
+     * @tc.steps: step2. trigger style sheet initialization
+     */
+    g_testStyleMgr->InitStyleSheet(styleSheetObj);
+
+    /**
+     * @tc.steps: step3. prepare valid style sheet with class selector
+     */
+    constexpr uint16_t heightValue = 50;
+    jerry_value_t option = PrepareStyleOption("staticStyle", "height", heightValue);
+    AddStrValueToOption(option, "staticClass", "sample");
+    DivComponent* divComponent = new DivComponent(option, UNDEFINED, g_testStyleMgr);
+    rootComponentMock_.RenderComponent(*divComponent);
+    const uint8_t jsObjCount = 2;
+    const jerry_value_t jsObjs[jsObjCount] = {option, styleSheetObj};
+    const uint8_t divComponentNumber = 1;
+    Component* divComponentInstances[1] = {divComponent};
+
+    /**
+     * @tc.steps: step4. check the result, no style sheet, so no one will be added into combined style
+     */
+    uint16_t index = KeyParser::ParseKeyId("width");
+    EXPECT_TRUE(g_testStyleMgr->isPseudoExist(index, 0x01));
+    Component* component = reinterpret_cast<Component *>(divComponent);
+    UIViewGroup* uiView = reinterpret_cast<UIViewGroup *>(component->GetComponentRootView());
+    if (uiView != nullptr) {
+        EXPECT_EQ(uiView->GetWidth(), widthValue);
+        EXPECT_EQ(uiView->GetHeight(), heightValue);
+    }
+
+    ReleaseTestResources(jsObjs, jsObjCount, divComponentInstances, divComponentNumber);
+    TDD_CASE_END();
+}
+
+void StyleMgrTddTest::RunTests()
+{
+    ACELiteStyleManagerInlineStyle001();
+    ACELiteStyleManagerInlineStyle002();
+    ACELiteStyleManagerInlineStyle003();
+    ACELiteStyleManagerInlineStyle004();
+    ACELiteStyleManagerInlineStyle005();
+    ACELiteStyleManagerIDSelector001();
+    ACELiteStyleManagerIDSelector002();
+    ACELiteStyleManagerIDSelector003();
+    ACELiteStyleManagerIDSelector004();
+    ACELiteStyleManagerIDSelector005();
+    ACELiteStyleManagerClassSelector001();
+    ACELiteStyleManagerClassSelector002();
+    ACELiteStyleManagerClassSelector003();
+    ACELiteStyleManagerCSSPesudo001();
+}
+
+#ifdef TDD_ASSERTIONS
+/**
+ * @tc.name: ACELiteStyleManagerInlineStyle001
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEEQ
+ */
+HWTEST_F(StyleMgrTddTest, InlineStyle001, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerInlineStyle001();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerInlineStyle002
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEEQ
+ */
+HWTEST_F(StyleMgrTddTest, InlineStyle002, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerInlineStyle002();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerInlineStyle003
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEEQ
+ */
+HWTEST_F(StyleMgrTddTest, InlineStyle003, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerInlineStyle003();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerInlineStyle004
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEEQ
+ */
+HWTEST_F(StyleMgrTddTest, InlineStyle004, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerInlineStyle004();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerInlineStyle005
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEEQ
+ */
+HWTEST_F(StyleMgrTddTest, InlineStyle005, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerInlineStyle005();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerIDSelector001
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEER
+ */
+HWTEST_F(StyleMgrTddTest, IDSelector001, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerIDSelector001();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerIDSelector002
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEER
+ */
+HWTEST_F(StyleMgrTddTest, IDSelector002, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerIDSelector002();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerIDSelector003
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEER
+ */
+HWTEST_F(StyleMgrTddTest, IDSelector003, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerIDSelector003();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerIDSelector004
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEER
+ */
+HWTEST_F(StyleMgrTddTest, IDSelector004, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerIDSelector004();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerIDSelector005
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEER
+ */
+HWTEST_F(StyleMgrTddTest, IDSelector005, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerIDSelector005();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerClassSelector001
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEES
+ */
+HWTEST_F(StyleMgrTddTest, ClassSelector001, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerClassSelector001();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerClassSelector002
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEES
+ */
+HWTEST_F(StyleMgrTddTest, ClassSelector002, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerClassSelector002();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerClassSelector003
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000DSEES
+ */
+HWTEST_F(StyleMgrTddTest, ClassSelector003, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerClassSelector003();
+}
+
+/**
+ * @tc.name: ACELiteStyleManagerCSSPesudo001
+ * @tc.desc: Verify the style sheet initialization.
+ * @tc.require: AR000E2TCI
+ */
+HWTEST_F(StyleMgrTddTest, CSSPesudo001, TestSize.Level1)
+{
+    StyleMgrTddTest::ACELiteStyleManagerCSSPesudo001();
+}
+#endif
+} // ACELite
+} // OHOS
+
diff --git a/frameworks/src/core/stylemgr/test/unittest/common/stylemgr_tdd_test.h b/frameworks/src/core/stylemgr/test/unittest/common/stylemgr_tdd_test.h
new file mode 100755
index 0000000..06c76a4
--- /dev/null
+++ b/frameworks/src/core/stylemgr/test/unittest/common/stylemgr_tdd_test.h
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef ACELITE_STYLEMGR_TDD_TEST_H
+#define ACELITE_STYLEMGR_TDD_TEST_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "acelite_config.h"
+#include "component_factory.h"
+#include "root_component_mock.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+static char* g_currentTestCaseName = nullptr;
+static uint8_t g_assertRecord = 0;
+static AppStyleManager* g_testStyleMgr = nullptr;
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class StyleMgrTddTest : public testing::Test {
+#else
+class StyleMgrTddTest {
+#endif
+public:
+    StyleMgrTddTest();
+    ~StyleMgrTddTest(){};
+    void SetUp();
+    void TearDown();
+    void TestCaseB(const char* name) const;
+    void JudeTestCaseResult() const;
+    void ReleaseTestResources(const jerry_value_t* values,
+                              uint8_t valueCount,
+                              Component** components,
+                              uint8_t componentCount) const;
+    JSValue PrepareStyleSheet(const char* selectors,
+                              const char* selectorName,
+                              const char* propName,
+                              uint16_t propValue) const;
+    JSValue PrepareStyleSheetWithKeyValues(const char* selector,
+                                       JSValue selectorObj,
+                                       const char* selectorName,
+                                       const uint8_t itemCount,
+                                       char* keys[],
+                                       const uint16_t values[]) const;
+    JSValue PreparePesudoObjects(uint16_t value) const;
+
+    JSValue PrepareStyleOption(const char* styleType, const char* propName, uint16_t propValue) const;
+    JSValue PrepareAttrOption(const char* propName, const char* propValue) const;
+    void AddValueToAttrOption(jerry_value_t attrOption, const char* propName, const char* propValue) const;
+    void AddStrValueToOption(jerry_value_t option, const char* propName, const char* propValue) const;
+
+    void ACELiteStyleManagerInlineStyle001();
+    void ACELiteStyleManagerInlineStyle002();
+    void ACELiteStyleManagerInlineStyle003();
+    void ACELiteStyleManagerInlineStyle004();
+    void ACELiteStyleManagerInlineStyle005();
+    void ACELiteStyleManagerIDSelector001();
+    void ACELiteStyleManagerIDSelector002();
+    void ACELiteStyleManagerIDSelector003();
+    void ACELiteStyleManagerIDSelector004();
+    void ACELiteStyleManagerIDSelector005();
+    void ACELiteStyleManagerClassSelector001();
+    void ACELiteStyleManagerClassSelector002();
+    void ACELiteStyleManagerClassSelector003();
+    void ACELiteStyleManagerCSSPesudo001();
+    void RunTests();
+
+private:
+    RootComponentMock rootComponentMock_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // ACELITE_STYLEMGR_TDD_TEST_H
diff --git a/src/core/wrapper/js.cpp b/frameworks/src/core/wrapper/js.cpp
similarity index 74%
rename from src/core/wrapper/js.cpp
rename to frameworks/src/core/wrapper/js.cpp
index 40c66b9..2b66558 100755
--- a/src/core/wrapper/js.cpp
+++ b/frameworks/src/core/wrapper/js.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -13,9 +13,10 @@
  * limitations under the License.
  */
 
+#include "wrapper/js.h"
 #include "ace_mem_base.h"
 #include "acelite_config.h"
-#include "wrapper/js.h"
+#include "js_fwk_common.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -26,7 +27,7 @@ void JSRelease(JSValue value)
 
 JSValue JSString::Create(const char * const value)
 {
-    return jerry_create_string(reinterpret_cast<const jerry_char_t*>(value));
+    return jerry_create_string(reinterpret_cast<const jerry_char_t *>(value));
 }
 
 bool JSString::Is(JSValue target)
@@ -34,7 +35,7 @@ bool JSString::Is(JSValue target)
     return jerry_value_is_string(target);
 }
 
-char* JSString::Value(JSValue value)
+char *JSString::Value(JSValue value)
 {
     if (jerry_value_is_undefined(value)) {
         return nullptr;
@@ -56,7 +57,7 @@ char* JSString::Value(JSValue value)
     if (size == 0) {
         jerry_release_value(target);
         // return empty char instead of nullptr, so caller can free safely
-        char* emptyStr = static_cast<char *>(ace_malloc(sizeof(char)));
+        char *emptyStr = static_cast<char *>(ace_malloc(sizeof(char)));
         if (emptyStr == nullptr) {
             return nullptr;
         }
@@ -67,7 +68,7 @@ char* JSString::Value(JSValue value)
         jerry_release_value(target);
         return nullptr;
     }
-    jerry_char_t* buffer = static_cast<jerry_char_t *>(ace_malloc(sizeof(jerry_char_t) * (size + 1)));
+    jerry_char_t *buffer = static_cast<jerry_char_t *>(ace_malloc(sizeof(jerry_char_t) * (size + 1)));
     if (buffer == nullptr) {
         jerry_release_value(target);
         return nullptr;
@@ -92,7 +93,7 @@ JSValue JSFunction::Create(JSHandler handler)
 
 JSValue JSFunction::Call(JSValue func, JSValue context, JSValue args[], JSSize size)
 {
-    return jerry_call_function(func, context, args, size);
+    return CallJSFunction(func, context, args, size);
 }
 
 bool JSFunction::Is(JSValue target)
@@ -105,6 +106,16 @@ JSValue JSObject::Create()
     return jerry_create_object();
 }
 
+JSValue JSObject::Keys(JSValue target)
+{
+    return jerry_get_object_keys(target);
+}
+
+JSValue JSObject::Get(JSValue target, JSValue key)
+{
+    return jerry_get_property(target, key);
+}
+
 JSValue JSObject::Get(JSValue target, const char * const prop)
 {
     JSValue key = JSString::Create(prop);
@@ -113,6 +124,20 @@ JSValue JSObject::Get(JSValue target, const char * const prop)
     return value;
 }
 
+char *JSObject::GetString(JSValue target, const char * const prop)
+{
+    JSValue value = JSObject::Get(target, prop);
+    char *content = JSString::Value(value);
+    JSRelease(value);
+    return content;
+}
+double JSObject::GetNumber(JSValue target, const char * const prop)
+{
+    JSValue value = JSObject::Get(target, prop);
+    double number = JSNumber::Value(value);
+    JSRelease(value);
+    return number;
+}
 void JSObject::Set(JSValue target, const char * const prop, JSValue value)
 {
     JSValue key = JSString::Create(prop);
@@ -120,6 +145,27 @@ void JSObject::Set(JSValue target, const char * const prop, JSValue value)
     JSRelease(key);
 }
 
+void JSObject::SetString(JSValue target, const char * const prop, const char * const value)
+{
+    JSValue attr = JSString::Create(value);
+    JSObject::Set(target, prop, attr);
+    JSRelease(attr);
+}
+
+void JSObject::SetNumber(JSValue target, const char * const prop, const double value)
+{
+    JSValue attr = JSNumber::Create(value);
+    JSObject::Set(target, prop, attr);
+    JSRelease(attr);
+}
+
+void JSObject::SetBoolean(JSValue target, const char * const prop, const bool value)
+{
+    JSValue attr = JSBoolean::Create(value);
+    JSObject::Set(target, prop, attr);
+    JSRelease(attr);
+}
+
 void JSObject::Set(JSValue target, const char * const prop, JSHandler handler)
 {
     JSValue func = JSFunction::Create(handler);
@@ -135,12 +181,12 @@ bool JSObject::Del(JSValue target, const char * const prop)
     return result;
 }
 
-bool JSObject::GetNativePointer(JSValue target, void** nativePointer)
+bool JSObject::GetNativePointer(JSValue target, void **nativePointer)
 {
     return jerry_get_object_native_pointer(target, nativePointer, nullptr);
 }
 
-void JSObject::SetNativePointer(JSValue target, void* nativePointer)
+void JSObject::SetNativePointer(JSValue target, void *nativePointer)
 {
     return jerry_set_object_native_pointer(target, nativePointer, nullptr);
 }
@@ -188,6 +234,12 @@ void JSGlobal::Set(const char * const prop, JSValue value)
     JSRelease(global);
 }
 
+void JSGlobal::Del(const char * const props)
+{
+    JSValue global = JSGlobal::Get();
+    JSObject::Del(global, props);
+    JSRelease(global);
+}
 JSValue JSGlobal::Call(const char * const prop, JSValue args[], JSSize size)
 {
     JSValue global = JSGlobal::Get();
@@ -255,6 +307,13 @@ JSValue JSArray::Get(JSValue array, uint32_t index)
     return jerry_get_property_by_index(array, index);
 }
 
+char *JSArray::GetString(JSValue array, uint32_t index)
+{
+    JSValue value = JSArray::Get(array, index);
+    char *content = JSString::Value(value);
+    JSRelease(value);
+    return content;
+}
 JSValue JSArray::Map(JSValue array, JSValue func)
 {
     JSValue args[1] = {func};
@@ -266,5 +325,13 @@ void JSArray::Push(JSValue array, JSValue element)
     JSValue args[1] = {element};
     JSRelease(JSObject::Call(array, "push", args, 1));
 }
+bool JSArray::Is(JSValue target)
+{
+    return jerry_value_is_array(target);
+}
+bool JSError::Is(JSValue target)
+{
+    return jerry_value_is_error(target);
+}
 } // namespace ACELite
 } // namespace OHOS
diff --git a/src/core/wrapper/js.h b/frameworks/src/core/wrapper/js.h
similarity index 75%
rename from src/core/wrapper/js.h
rename to frameworks/src/core/wrapper/js.h
index 832c2c8..0532978 100755
--- a/src/core/wrapper/js.h
+++ b/frameworks/src/core/wrapper/js.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -32,7 +32,7 @@ class JSString final : public MemoryHeap {
 public:
     static JSValue Create(const char * const value);
     static bool Is(JSValue target);
-    static char* Value(JSValue value);
+    static char *Value(JSValue value);
 };
 
 class JSFunction final : public MemoryHeap {
@@ -45,16 +45,24 @@ public:
 class JSObject final : public MemoryHeap {
 public:
     static JSValue Create();
+    static JSValue Keys(JSValue target);
+    static JSValue Get(JSValue target, JSValue key);
     static JSValue Get(JSValue target, const char * const prop);
+    static char *GetString(JSValue target, const char * const prop);
+    static double GetNumber(JSValue target, const char * const prop);
     static void Set(JSValue target, const char * const prop, JSValue value);
+    static void SetString(JSValue target, const char * const prop, const char * const value);
+    static void SetNumber(JSValue target, const char * const prop, const double value);
+    static void SetBoolean(JSValue target, const char * const prop, const bool value);
     static void Set(JSValue target, const char * const prop, JSHandler handler);
     static bool Del(JSValue target, const char * const prop);
     static JSValue Call(JSValue target, const char * const prop, JSValue args[], JSSize size);
     static JSValue Call(JSValue target, const char * const prop);
-    static bool GetNativePointer(JSValue target, void** nativePointer);
-    static void SetNativePointer(JSValue target, void* nativePointer);
+    static bool GetNativePointer(JSValue target, void **nativePointer);
+    static void SetNativePointer(JSValue target, void *nativePointer);
     static bool DelNativePointer(JSValue target);
     static bool Is(JSValue target);
+    static bool Has(JSValue target, const char *name);
 };
 
 class JSGlobal final : public MemoryHeap {
@@ -62,6 +70,7 @@ public:
     static JSValue Get();
     static JSValue Get(const char * const prop);
     static void Set(const char * const prop, JSValue value);
+    static void Del(const char * const props);
     static JSValue Call(const char * const prop, JSValue args[], JSSize size);
     static JSValue Call(const char * const prop);
 };
@@ -91,8 +100,14 @@ public:
     static JSValue Create(uint32_t size);
     static uint32_t Length(const JSValue array);
     static JSValue Get(JSValue array, uint32_t index);
+    static char *GetString(JSValue array, uint32_t index);
     static JSValue Map(JSValue array, JSValue func);
     static void Push(JSValue array, JSValue element);
+    static bool Is(JSValue target);
+};
+class JSError final : public MemoryHeap {
+public:
+    static bool Is(JSValue target);
 };
 } // namespace ACELite
 } // namespace OHOS
diff --git a/targets/default/acelite_config.h b/frameworks/targets/default/acelite_config.h
old mode 100755
new mode 100644
similarity index 100%
rename from targets/default/acelite_config.h
rename to frameworks/targets/default/acelite_config.h
diff --git a/frameworks/targets/linux/acelite_config.h b/frameworks/targets/linux/acelite_config.h
new file mode 100755
index 0000000..34f3c0a
--- /dev/null
+++ b/frameworks/targets/linux/acelite_config.h
@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2020-2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_CONFIG_H
+#define OHOS_ACELITE_CONFIG_H
+
+/**
+ * ================================================================================================
+ *                 hi3516_linux config for hmf
+ * ================================================================================================
+ */
+#define OHOS_ACELITE_LINUX // NOTE: DO NOT use this macro directly
+
+/**
+ * Compile all test entry for hmf
+ */
+#ifdef FEATURE_TEST_IMPLEMENTATION
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_TEST_IMPLEMENTATION
+#endif
+
+/**
+ * use hi log interface to trace out
+ */
+#ifdef FEATURE_ACELITE_HI_LOG_PRINTF
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_ACELITE_HI_LOG_PRINTF
+#endif
+
+/**
+ * append no blank color to rootview for easy using, delete this after the mouse showing is optimized
+ */
+#ifdef FEATURE_ROOTVIEW_CUSTOM_BACKGROUND_COLOR
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_ROOTVIEW_CUSTOM_BACKGROUND_COLOR
+#endif
+
+/**
+ * js system capabillity switch
+ */
+#ifdef FEATURE_ACELITE_SYSTEM_CAPABILITY
+#error "must keep the system capability unique"
+#else
+#define FEATURE_ACELITE_SYSTEM_CAPABILITY
+#endif
+
+/**
+ * js profiler switch
+ */
+#ifdef FEATURE_ACELITE_JS_PROFILER
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_ACELITE_JS_PROFILER
+#endif
+
+/**
+ * support audio API for JS
+ */
+#define FEATURE_MODULE_AUDIO
+
+/**
+ * switch for cipher module
+ */
+#define ENABLE_MODULE_CIPHER
+
+/**
+ * support storage and file API for JS
+ */
+#define FEATURE_MODULE_STORAGE
+
+/**
+ * support device API for JS
+ */
+#define FEATURE_MODULE_DEVICE
+
+/**
+ * timer module
+ */
+#define FEATURE_TIMER_MODULE
+
+/**
+ * support lite ace dfx module
+ */
+#define FEATURE_ACELITE_DFX_MODULE
+
+#define FEATURE_ACELITE_LITE_DFX_MODULE
+
+/**
+ * enable Canvas component Feature API on ipcamera real devices
+ */
+#define FEATURE_COMPONENT_CANVAS
+
+#define FEATURE_LOCALIZATION_MODULE
+
+#ifdef FEATURE_COMPONENT_CAMERA
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_COMPONENT_CAMERA
+#endif
+
+#ifdef FEATURE_COMPONENT_VIDEO
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_COMPONENT_VIDEO
+#endif
+
+#define FEATURE_UPDATE_VIDEO_PROGRESS_ASYNC
+
+#ifdef FEATURE_MODULE_DIALOG
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_MODULE_DIALOG
+#endif
+
+#define DEFAULT_PROFILER_MSG_PATH "/user/data/"
+
+#define PROFILER_ENABLE_FLAG_FILE "/user/data/profiler_enable"
+
+#define RUNTIME_MODE_FILE_PATH "/user/data/jsparser_enable"
+
+#endif // OHOS_ACELITE_CONFIG_H
+
diff --git a/targets/liteos_a/acelite_config.h b/frameworks/targets/liteos_a/acelite_config.h
similarity index 79%
rename from targets/liteos_a/acelite_config.h
rename to frameworks/targets/liteos_a/acelite_config.h
index 93b7863..138e17e 100755
--- a/targets/liteos_a/acelite_config.h
+++ b/frameworks/targets/liteos_a/acelite_config.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -50,6 +50,15 @@
 #define FEATURE_ROOTVIEW_CUSTOM_BACKGROUND_COLOR
 #endif
 
+/**
+ * js system capabillity switch
+ */
+#ifdef FEATURE_ACELITE_SYSTEM_CAPABILITY
+#error "must keep the system capability unique"
+#else
+#define FEATURE_ACELITE_SYSTEM_CAPABILITY
+#endif
+
 /**
  * js profiler switch
  */
@@ -84,6 +93,11 @@
  */
 #define FEATURE_TIMER_MODULE
 
+/**
+ * date time module
+ */
+#define FEATURE_DATE_FORMAT
+
 /**
  * support lite ace dfx module
  */
@@ -96,18 +110,42 @@
  */
 #define FEATURE_COMPONENT_CANVAS
 
+#define FEATURE_LOCALIZATION_MODULE
+
 #ifdef FEATURE_COMPONENT_CAMERA
 #error "must keep the global configuration unique"
 #else
 #define FEATURE_COMPONENT_CAMERA
 #endif
 
+#ifdef FEATURE_COMPONENT_QRCODE
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_COMPONENT_QRCODE
+#endif
+
 #ifdef FEATURE_COMPONENT_VIDEO
 #error "must keep the global configuration unique"
 #else
 #define FEATURE_COMPONENT_VIDEO
 #endif
 
+#ifdef FEATURE_MODULE_DIALOG
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_MODULE_DIALOG
+#endif
+
+/**
+ * support intl module
+ */
+#define FEATURE_INTL_MODULE
+
+/**
+ * supoort number format module
+ */
+#define FEATURE_NUMBER_FORMAT
+
 #define FEATURE_UPDATE_VIDEO_PROGRESS_ASYNC
 
 #define DEFAULT_PROFILER_MSG_PATH "/storage/user/data/"
diff --git a/targets/liteos_m/acelite_config.h b/frameworks/targets/liteos_m/acelite_config.h
similarity index 69%
rename from targets/liteos_m/acelite_config.h
rename to frameworks/targets/liteos_m/acelite_config.h
index a15ef50..b620e3a 100755
--- a/targets/liteos_m/acelite_config.h
+++ b/frameworks/targets/liteos_m/acelite_config.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -16,6 +16,9 @@
 #ifndef OHOS_ACELITE_CONFIG_H
 #define OHOS_ACELITE_CONFIG_H
 
+// some features depend on the low layer configuration
+#include "graphic_config.h"
+
 /**
  * ================================================================================================
  *                 config for wearable
@@ -26,20 +29,30 @@
  */
 #define OHOS_ACELITE_PRODUCT_WATCH
 
+// delete this after jerry porting is ready
+#define JERRY_PORTING_DEPENDENCY
+
+/**
+ * enable Canvas component Feature API on ipcamera real devices
+ */
+#define FEATURE_COMPONENT_CANVAS
+
+/**
+ * enable QRcode component
+ */
+#define FEATURE_COMPONENT_QRCODE
+
 /**
  * support terminate() API from JS
  */
 #define FEATURE_TERMINATE_ABILITY
 
-/**
- * support storage and file API for JS
- */
-#define FEATURE_MODULE_STORAGE
-
+#ifdef ACELITE_DEPENDENCY_IS_READY
 /**
  * enable FeatureAbility API
  */
 #define FEATURE_FEATURE_ABILITY_MODULE
+#endif // ACELITE_DEPENDENCY_IS_READY
 
 /**
  * enable timer JS API
@@ -51,21 +64,6 @@
  */
 #define FEATURE_LOCALIZATION_MODULE
 
-/**
- * support sensor API for JS
- */
-#define FEATURE_MODULE_SENSOR
-
-/**
- * support device API for JS
- */
-#define FEATURE_MODULE_DEVICE
-
-/**
- * support geo location API for JS
- */
-#define FEATURE_MODULE_GEO
-
 /**
  * support mc ace log module trace
  */
@@ -103,12 +101,19 @@
 #define CONSOLE_LOG_LINE_MAX_LENGTH (96)
 #endif
 
+#ifdef ACELITE_DEPENDENCY_IS_READY
 /**
  * support mc ace dfx module
  */
 #define FEATURE_ACELITE_DFX_MODULE
 
-#define FEATURE_ACELITE_MC_DFX_MODULE
+#define FEATURE_ACELITE_LITE_DFX_MODULE
+#endif
+
+/**
+ * support mc lazy loading
+ */
+#define FEATURE_LAZY_LOADING_MODULE
 
 /**
  * support fatal error handling on device which not support process
@@ -117,6 +122,23 @@
 #define FEATURE_FATAL_ERROR_HANDLING
 #endif
 
+/**
+ * support intl module
+ */
+#define FEATURE_INTL_MODULE
+
+/**
+ * supoort number format module
+ */
+#define FEATURE_NUMBER_FORMAT
+
+/**
+ * date time module
+ */
+#define FEATURE_DATE_FORMAT
+
+#define JS_ENGINE_STATIC_MULTI_CONTEXTS_ENABLED
+
 /**
  * support js profiler
  */
@@ -128,4 +150,14 @@
 
 #define RUNTIME_MODE_FILE_PATH "user/data/jsparser_enable"
 
+/**
+ * Rotation API feature
+ */
+#if (defined(ENABLE_ROTATE_INPUT) && (ENABLE_ROTATE_INPUT == 1))
+// low layer supports
+#ifndef FEATURE_ROTATION_API
+#define FEATURE_ROTATION_API
+#endif
+#endif // (defined(ENABLE_ROTATE_INPUT) && (ENABLE_ROTATE_INPUT == 1))
+
 #endif // OHOS_ACELITE_CONFIG_H
diff --git a/targets/platform_adapter.cpp b/frameworks/targets/platform_adapter.cpp
old mode 100755
new mode 100644
similarity index 87%
rename from targets/platform_adapter.cpp
rename to frameworks/targets/platform_adapter.cpp
index 6731c9a..3ba0e69
--- a/targets/platform_adapter.cpp
+++ b/frameworks/targets/platform_adapter.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -22,6 +22,7 @@
 #include "ace_log.h"
 #include "ace_version.h"
 #include "js_fwk_common.h"
+#include "product_adapter.h"
 
 namespace OHOS {
 namespace ACELite {
@@ -47,19 +48,16 @@ void SetEngineSnapshotMode(bool &mode)
 void SetEngineSnapshotModeManually(bool &mode)
 {
 #ifndef TARGET_SIMULATOR
-    // if not startting debugger, on real device, give a chance to use JS mode manually
+    // if not starting debugger, on real device, give a chance to use JS mode manually
     mode = !(IsFileExisted(RUNTIME_MODE_FILE_PATH));
 #endif // TARGET_SIMULATOR
 }
 
-#ifdef FEATURE_TERMINATE_ABILITY
-extern "C" int TerminateAbility(uint16_t token);
-#endif
 void Terminate(uint16_t token)
 {
 #ifndef TARGET_SIMULATOR // no AMS support on PC simulator
 #ifdef FEATURE_TERMINATE_ABILITY
-    (void)TerminateAbility(token);
+    ProductAdapter::SendTerminatingRequest(token, false);
 #else
     AceAbility::TerminateSelf();
 #endif
diff --git a/targets/platform_adapter.h b/frameworks/targets/platform_adapter.h
old mode 100755
new mode 100644
similarity index 100%
rename from targets/platform_adapter.h
rename to frameworks/targets/platform_adapter.h
diff --git a/frameworks/targets/simulator/BUILD.gn b/frameworks/targets/simulator/BUILD.gn
new file mode 100755
index 0000000..999963e
--- /dev/null
+++ b/frameworks/targets/simulator/BUILD.gn
@@ -0,0 +1,70 @@
+#Copyright (c) 2021 Huawei Device 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("//build/lite/config/subsystem/aafwk/config.gni")
+import("//build/ohos.gni")
+import("//foundation/ace/ace_engine_lite/ace_lite.gni")
+
+declare_args() {
+  LOSCFG_TEST_JS_BUILD = false
+}
+
+config("ace_lite_config") {
+  include_dirs = ace_lite_include_dirs_simulator
+  include_dirs += ace_lite_include_dirs
+  include_dirs +=
+      [ "//foundation/ace/ace_engine_lite/frameworks/targets/simulator" ]
+}
+
+ohos_static_library("ace_lite") {
+  public_configs = [ ":ace_lite_config" ]
+  sources = ace_lite_sources
+  sources += [ "//foundation/ace/ace_engine_lite/frameworks/src/core/modules/presets/feature_ability_module.cpp" ]
+  sources -= [
+    "//foundation/ace/ace_engine_lite/frameworks/src/core/async/js_async_work.cpp",
+    "//foundation/ace/ace_engine_lite/frameworks/src/core/async/message_queue_utils.cpp",
+    "//foundation/ace/ace_engine_lite/frameworks/src/core/context/ace_ability.cpp",
+  ]
+  cflags_cc = [
+    "-Wno-error",
+    "-D_INC_STRING_S",
+    "-D_INC_WCHAR_S",
+    "-D_SECIMP=//",
+    "-D_STDIO_S_DEFINED",
+    "-D_INC_STDIO_S",
+    "-D_INC_STDLIB_S",
+    "-D_INC_MEMORY_S",
+  ]
+  deps = [
+    "//base/global/resmgr_lite/frameworks/resmgr_lite:global_resmgr_simulator",
+    "//foundation/graphic/ui/huawei_proprietary/tools/ide:graphic_lite",
+    "//third_party/bounds_checking_function:libsec_static",
+    "//third_party/jerryscript:libjerryscript",
+  ]
+  defines = [
+    "TARGET_SIMULATOR",
+    "JS_ENGINE_EXTERNAL_CONTEXT",
+    "SCREENSIZE_SPECIFIED",
+  ]
+  if (is_debug == "debug") {
+    defines += [ "JS_PROFILER=1" ]
+  } else {
+    defines += [ "JS_PROFILER=0" ]
+  }
+  if (LOSCFG_TEST_JS_BUILD) {
+    defines += [ "JSFWK_TEST" ]
+  }
+  if (enable_ohos_appexecfwk_feature_ability == true) {
+    defines += [ "ABILITY_WINDOW_SUPPORT" ]
+  }
+}
diff --git a/targets/simulator/acelite_config.h b/frameworks/targets/simulator/acelite_config.h
similarity index 83%
rename from targets/simulator/acelite_config.h
rename to frameworks/targets/simulator/acelite_config.h
index b226c41..3dea3e2 100755
--- a/targets/simulator/acelite_config.h
+++ b/frameworks/targets/simulator/acelite_config.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Copyright (c) 2020-2021 Huawei Device 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
@@ -92,6 +92,8 @@
  */
 #define FEATURE_LOCALIZATION_MODULE
 
+#define CHANGE_START_PAGE
+
 /**
  * module require test
  */
@@ -113,8 +115,24 @@
  */
 #define FEATURE_COMPONENT_CANVAS
 
+#ifdef FEATURE_COMPONENT_QRCODE
+#error "must keep the global configuration unique"
+#else
+#define FEATURE_COMPONENT_QRCODE
+#endif
+
+#ifdef _WIN32
+// support memory analysis, only on win
+#define SIMULATOR_MEMORY_ANALYSIS
+#endif
+
 #ifdef _WIN32
 #define PROFILER_ENABLE_FLAG_FILE "..\\profiler_enable"
+#ifdef SIMULATOR_MEMORY_ANALYSIS
+#define MEM_PROC_ENABLE_FLAG_FILE "..\\memproc_enable"
+#define MEM_LOG_FILE_PATH "..\\mem.txt"
+#define MEM_BACK_UP_LOG_FILE_PREFIX "..\\"
+#endif // SIMULATOR_MEMORY_ANALYSIS
 #else
 // path format is different on linux or apple with windows
 #define PROFILER_ENABLE_FLAG_FILE "~/profiler_enable"
diff --git a/tools/profiler/README.md b/frameworks/tools/profiler/README.md
old mode 100755
new mode 100644
similarity index 100%
rename from tools/profiler/README.md
rename to frameworks/tools/profiler/README.md
diff --git a/tools/profiler/js_profiler.py b/frameworks/tools/profiler/js_profiler.py
old mode 100755
new mode 100644
similarity index 97%
rename from tools/profiler/js_profiler.py
rename to frameworks/tools/profiler/js_profiler.py
index e07bba6..cd87993
--- a/tools/profiler/js_profiler.py
+++ b/frameworks/tools/profiler/js_profiler.py
@@ -1,5 +1,6 @@
+#!/usr/bin/env python
 # -*- coding: utf-8 -*-
-# Copyright (c) 2020 Huawei Device Co., Ltd.
+# Copyright (c) 2020-2021 Huawei Device 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
diff --git a/tools/profiler/js_profiler_config.py b/frameworks/tools/profiler/js_profiler_config.py
old mode 100755
new mode 100644
similarity index 98%
rename from tools/profiler/js_profiler_config.py
rename to frameworks/tools/profiler/js_profiler_config.py
index ac7e904..5c5f3a3
--- a/tools/profiler/js_profiler_config.py
+++ b/frameworks/tools/profiler/js_profiler_config.py
@@ -1,5 +1,6 @@
+#!/usr/bin/env python
 # -*- coding: utf-8 -*-
-# Copyright (c) 2020 Huawei Device Co., Ltd.
+# Copyright (c) 2020-2021 Huawei Device 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
diff --git a/tools/snapshot/framework2char.py b/frameworks/tools/snapshot/framework2char.py
similarity index 88%
rename from tools/snapshot/framework2char.py
rename to frameworks/tools/snapshot/framework2char.py
index 761766d..d3430ef 100644
--- a/tools/snapshot/framework2char.py
+++ b/frameworks/tools/snapshot/framework2char.py
@@ -1,5 +1,6 @@
+#!/usr/bin/env python
 # -*- coding: utf-8 -*-
-# Copyright (c) 2020 Huawei Device Co., Ltd.
+# Copyright (c) 2020-2021 Huawei Device 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
@@ -55,7 +56,8 @@ def output_copyright(output):
 
 
 def output_check_notes(output):
-    output.write("// AUTO GENERATED, PLEASE DO NOT EDIT DIRECTLY\n\n")
+    output.write("// AUTO GENERATED, PLEASE DO NOT EDIT DIRECTLY\n")
+    output.write("#include <stdint.h>\n\n")
     output.write("#ifndef ACELITE_FRAMEWORK_RAW_BUFFER\n")
     output.write("#error THIS FILE CAN ONLY BE INCLUDED BY RAW BUFFER CPP\n")
     output.write("#endif\n\n")
@@ -71,7 +73,7 @@ def convert_bc():
                 "#ifndef OHOS_ACELITE_FRAMEWORK_MIN_SNAPSHOT_BUFFER\n")
             output.write(
                 "#define OHOS_ACELITE_FRAMEWORK_MIN_SNAPSHOT_BUFFER\n")
-            output.write("const char g_frameworkBCBuffer[] =\n{\n    ")
+            output.write("const uint8_t g_frameworkBCBuffer[] =\n{\n    ")
             index = 1
             max_count = len(byte_code_buffer)
             for data in byte_code_buffer:
@@ -86,7 +88,8 @@ def convert_bc():
                     if index % 16 == 0:
                         output.write("\n    ")
                 else:
-                    output.write(final_hex_string + '\n')
+                    output_final_string = '%s\n' % final_hex_string
+                    output.write(output_final_string)
                 index = index + 1
             output.write("};\n")
             output.write("#endif")
@@ -129,25 +132,25 @@ def convert_js():
 def usage():
     print("  > use default input path: python framework2char.py")
     print("  > use specific input path: "
-          "python framework2char.py -b xxx/framework.min.bc -j xxx/framework.min.js")
+          "python framework2char.py -b framework.min.bc -j framework.min.js")
     print("    > -b : the input snapshot file")
     print("    > -j : the input javascript file")
 
 
 if __name__ == '__main__':
-    opts, args = getopt.getopt(
+    options, arguments = getopt.getopt(
         sys.argv[1:], '-h-b-j:', ['help', 'bc=', 'js='])
-    for o, a in opts:
-        if o in ("-h", "--help"):
+    for option, value in options:
+        if option in ("-h", "--help"):
             usage()
             sys.exit()
-        if o in ("-b", "--bc"):
-            FRAMEWORK_SNAPSHOT_FILE_PATH = a
-        if o in ("-j", "--js"):
-            FRAMEWORK_JS_FILE_PATH = a
+        if option in ("-b", "--bc"):
+            FRAMEWORK_SNAPSHOT_FILE_PATH = value
+        if option in ("-j", "--js"):
+            FRAMEWORK_JS_FILE_PATH = value
     if (os.path.exists(os.path.abspath(FRAMEWORK_SNAPSHOT_FILE_PATH))
         and os.path.exists(os.path.abspath(FRAMEWORK_JS_FILE_PATH))):
         convert_js()
         convert_bc()
     else:
-        print("[Error]: framwork.min.bc and framework.min.js must be prepared")
+        print("[Error]: framework.min.bc/.js must be prepared")
diff --git a/tools/snapshot/jerry_bin/ReadMe.md b/frameworks/tools/snapshot/jerry_bin/ReadMe.md
similarity index 100%
rename from tools/snapshot/jerry_bin/ReadMe.md
rename to frameworks/tools/snapshot/jerry_bin/ReadMe.md
diff --git a/tools/snapshot/jerry_bin/build_jerry.bat b/frameworks/tools/snapshot/jerry_bin/build_jerry.bat
similarity index 100%
rename from tools/snapshot/jerry_bin/build_jerry.bat
rename to frameworks/tools/snapshot/jerry_bin/build_jerry.bat
diff --git a/tools/snapshot/jerry_bin/build_jerry.sh b/frameworks/tools/snapshot/jerry_bin/build_jerry.sh
similarity index 94%
rename from tools/snapshot/jerry_bin/build_jerry.sh
rename to frameworks/tools/snapshot/jerry_bin/build_jerry.sh
index 407c803..b30ba1b 100755
--- a/tools/snapshot/jerry_bin/build_jerry.sh
+++ b/frameworks/tools/snapshot/jerry_bin/build_jerry.sh
@@ -1,5 +1,5 @@
-#!/bin/sh
-#Copyright (c) 2020 Huawei Device Co., Ltd.
+#!/bin/bash
+#Copyright (c) 2020-2021 Huawei Device 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
@@ -11,6 +11,7 @@
 #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.
+set -e
 
 # step 1: clone jerryscript repo
 git clone git@gitee.com:openharmony/third_party_jerryscript.git jerryscript
diff --git a/interfaces/innerkits/builtin/async/js_async_work.h b/interfaces/innerkits/builtin/async/js_async_work.h
new file mode 100644
index 0000000..71b4465
--- /dev/null
+++ b/interfaces/innerkits/builtin/async/js_async_work.h
@@ -0,0 +1,116 @@
+/*
+ * Copyright (c) 2020 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_JS_ASYNC_WORK_H
+#define OHOS_ACELITE_JS_ASYNC_WORK_H
+
+#include "message_queue_utils.h"
+#include "memory_heap.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * Function pointer type used for async work.
+ * Note: this type is deprecated, use AsyncHandler alternatively
+ */
+typedef void (*AsyncWorkHandler)(void* data);
+
+/**
+ * Function pointer type used for async work.
+ */
+typedef void (*AsyncHandler)(void* data, int8_t statusCode);
+
+struct AsyncWork : public MemoryHeap {
+    AsyncWorkHandler workHandler;
+    AsyncHandler handler;
+    void* data;
+    AsyncWork() : workHandler(nullptr), handler(nullptr), data(nullptr) {}
+    AsyncWork(const AsyncWork &) = delete;
+    AsyncWork &operator=(const AsyncWork &) = delete;
+    AsyncWork(AsyncWork &&) = delete;
+    AsyncWork &operator=(AsyncWork &&) = delete;
+};
+
+/**
+ * @class JsASyncWork
+ *
+ * @brief JsAsyncWork is used to send asynchronous tasks to the system for execution
+ *
+ * @see MemoryHeap
+ */
+class JsAsyncWork final : public MemoryHeap {
+public:
+    JsAsyncWork(const JsAsyncWork &) = delete;
+    JsAsyncWork &operator=(const JsAsyncWork &) = delete;
+    JsAsyncWork(JsAsyncWork &&) = delete;
+    JsAsyncWork &operator=(JsAsyncWork &&) = delete;
+    ~JsAsyncWork() {}
+
+    /**
+     * @brief Set the queue handler of the app main queue
+     *
+     * @param [in] handler: QueueHandler object to set
+     */
+    static void SetAppQueueHandler(const QueueHandler handler);
+
+    /**
+     * @brief Create an async work from given parameters, and dispatch it to main app task handler
+     *
+     * @param [in] workHandler: the entry handler of the async work
+     * @param [in] data: pointer to the data the async work needed
+     * @return true: operation succeed
+     *         false: operation failed
+     * Note: this function is deprecated, use the other one alternatively
+     */
+    static bool DispatchAsyncWork(AsyncWorkHandler workHandler, void *data);
+
+    /**
+     * @brief Create an async work from given parameters, and dispatch it to main app task handler
+     *
+     * @param[in] handler: the entry handler of the async work
+     * @param[in] data: pointer to the data the async work needed
+     * @return true: operation succeed
+     *         false: operation failed
+     */
+    static bool DispatchAsyncWork(AsyncHandler handler, void *data);
+
+    /**
+     * @brief Common new message dispatching method.
+     *
+     * @param [in] msgId: the new message ID
+     * @param [in] data: pointer to the data
+     * @return true: operation succeed
+     *         false: operation failed
+     */
+    static bool DispatchToLoop(AbilityMsgId msgId, void *data);
+
+    /**
+     * @brief Execute the given async work
+     *
+     * @param [in] asyncWork: reference to the async work to be executed
+     */
+    static void ExecuteAsyncWork(AsyncWork *&asyncWork, int8_t statusCode = ERR_OK);
+
+    // Error code used for async work processing
+    static const int8_t ERR_OK = 0;
+    static const int8_t ERR_FAIL = -1;
+
+private:
+    static bool DispatchAsyncWorkInner(AsyncWorkHandler workHandler, AsyncHandler handler, void *data);
+    static QueueHandler appQueuehandler_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_JS_ASYNC_WORK_H
diff --git a/interfaces/innerkits/builtin/async/message_queue_utils.h b/interfaces/innerkits/builtin/async/message_queue_utils.h
new file mode 100644
index 0000000..f7fdd3c
--- /dev/null
+++ b/interfaces/innerkits/builtin/async/message_queue_utils.h
@@ -0,0 +1,150 @@
+/*
+ * Copyright (c) 2020 Huawei Device 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.
+ */
+#ifndef OHOS_ACELITE_MESSAGE_QUEUE_UTILS_H
+#define OHOS_ACELITE_MESSAGE_QUEUE_UTILS_H
+
+#include <cstdint>
+
+#include "memory_heap.h"
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * Message queue handler which identify one queue entity
+ */
+typedef void* QueueHandler;
+
+/**
+ * Successful message queue operation
+ */
+#ifndef MSGQ_OK
+#define MSGQ_OK 0
+#endif
+
+/**
+ * Failed message queue operation
+ */
+#ifndef MSGQ_FAIL
+#define MSGQ_FAIL -1
+#endif
+
+/**
+ * Wait forever timeout value
+ */
+#ifndef WAIT_FOREVER
+#ifdef osWaitForever
+#define WAIT_FOREVER osWaitForever
+#else
+#define WAIT_FOREVER 0xFFFFFFFFU
+#endif // osWaitForever
+#endif // WAIT_FOREVER
+
+/**
+ * No wait timeout value
+ */
+#ifndef NO_WAIT
+#ifdef osNoWait
+#define NO_WAIT osNoWait
+#else
+#define NO_WAIT 0x0U
+#endif // osNoWait
+#endif // NO_WAIT
+
+/**
+ * @enum AbilityMsgId
+ *
+ * @brief Values that represent ability message states
+ */
+enum AbilityMsgId {
+    UNKNOWN,
+    START_ABILITY,
+    ACTIVE,
+    NEW_DATA,
+    BACKGROUND,
+    DESTORY,
+    BACKPRESSED,
+    ASYNCWORK,
+    TE_EVENT,
+    MSG_ID_MAX,
+};
+
+struct AbilityInnerMsg {
+    AbilityMsgId msgId;
+    uint16_t token;
+    const char *bundleName;
+    const char *path;
+    void *data;
+    uint16_t dataLength;
+    AbilityInnerMsg() : msgId(UNKNOWN), token(0), bundleName(nullptr), path(nullptr), data(nullptr), dataLength(0) {}
+};
+
+/**
+ * @class MessageQueueUtils
+ *
+ * @brief A queue utility to handle messages
+ *
+ * @see MemoryHeap
+ */
+class MessageQueueUtils : public MemoryHeap {
+public:
+    MessageQueueUtils(const MessageQueueUtils &) = delete;
+    MessageQueueUtils &operator=(const MessageQueueUtils &) = delete;
+    MessageQueueUtils(MessageQueueUtils &&) = delete;
+    MessageQueueUtils &operator=(MessageQueueUtils &&) = delete;
+    ~MessageQueueUtils() {}
+
+    /**
+     * @brief Create a Message Queue entity
+     *
+     * @param [in] capacity: maximum number of messages in queue
+     * @param [in] msgSize: message size in bytes
+     * @return handler of the queue created
+     */
+    static QueueHandler CreateMessageQueue(uint32_t capacity, uint32_t msgSize);
+
+    /**
+     * @brief Delete a Message Queue entity
+     *
+     * @param [in] handler: the handler of the target queue
+     * @return MSGQ_OK: success
+     *         MSGQ_FAIL: fail
+     */
+    static int8_t DeleteMessageQueue(QueueHandler handler);
+
+    /**
+     * @brief Put a message into the given queue or timeout if the queue is full
+     *
+     * @param [in] handler: the handler of the target queue
+     * @param [in] msgPtr: pointer to buffer for message to put into the queue
+     * @param [in] timeOut: the time to wait when the queue is full
+     * @return MSGQ_OK: success
+     *         MSGQ_FAIL: fail
+     */
+    static int8_t PutMessage(QueueHandler handler, const void *msgPtr, uint32_t timeOut);
+
+    /**
+     * @brief Get a message from the given queue or timeout if the queue is empty
+     *
+     * @param [in] handler: the handler of the target queue
+     * @param [in] msgPtr: pointer to buffer for message to get from the queue
+     * @param [in] timeOut: the time to wait when the queue is empty
+     * @return MSGQ_OK: success
+     *         MSGQ_FAIL: fail
+     */
+    static int8_t GetMessage(QueueHandler handler, void *msgPtr, uint32_t timeOut);
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_MESSAGE_QUEUE_UTILS_H
diff --git a/interfaces/innerkits/builtin/base/ace_mem_base.h b/interfaces/innerkits/builtin/base/ace_mem_base.h
new file mode 100644
index 0000000..493120c
--- /dev/null
+++ b/interfaces/innerkits/builtin/base/ace_mem_base.h
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2020-2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_ACE_MEM_BASE_H
+#define OHOS_ACELITE_ACE_MEM_BASE_H
+
+#include <cstddef>
+#include <cstdint>
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * @brief The ACEMemHooks struct saving the memory allocating hooks used for ACE
+ */
+struct ACEMemHooks {
+    void *(*malloc_func)(size_t sz);
+    void (*free_func)(void *ptr);
+    void *(*calloc_func)(size_t num, size_t size);
+};
+
+/**
+ * @brief InitMemHooks Set the memory hooks used in whole JS framework, malloc and free
+ * must be given and must not be null. the initialization should be called at the very begin
+ * of system start-up, and only can be called once.
+ *
+ * @param [in] hooks: malloc, free and calloc function pointer
+ */
+void InitMemHooks(const ACEMemHooks &hooks);
+
+/**
+ * @brief InitCacheBuf config the cache buffer used for ACE, for example: PSRAM buffer
+ * @param bufAddress the start address of the buffer
+ * @param bufSize the whole length of the buffer, count in bytes
+ */
+void InitCacheBuf(uintptr_t bufAddress, size_t bufSize);
+
+/**
+ * @brief Allocate the required memory space and return a pointer to it
+ *
+ * @param [in] size: size of memory block,in bytes
+ *
+ * @return a pointer to the allocated memory block.if the request fails,return NULL
+ */
+void *ace_malloc(size_t size);
+
+/**
+ * @brief Allocate the required memory space and return a pointer to it
+ *
+ * @param [in] num: number of elements to be allocated
+ * @param [in] size: size of memory block,in bytes
+ *
+ * @return a pointer to the allocated memory block.if the request fails,return NULL
+ */
+void *ace_calloc(size_t num, size_t size);
+
+/**
+ * @brief Free the memory space allocated by malloc(),calloc() or realloc()
+ *
+ * @param [in] ptr: pointer points to a memory block to be freed
+ */
+void ace_free(void *ptr);
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_ACE_MEM_BASE_H
diff --git a/interfaces/innerkits/builtin/base/memory_heap.h b/interfaces/innerkits/builtin/base/memory_heap.h
new file mode 100644
index 0000000..019be9d
--- /dev/null
+++ b/interfaces/innerkits/builtin/base/memory_heap.h
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2020 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_MEMORY_HEAP_H
+#define OHOS_ACELITE_MEMORY_HEAP_H
+#include <cstddef>
+#include <cstdio>
+
+#include "ace_mem_base.h"
+
+namespace OHOS {
+namespace ACELite {
+class MemoryHeap {
+public:
+    /**
+     * @brief Override new operator
+     * @param [in] size: malloc size.
+     */
+    void *operator new(size_t size);
+
+    /**
+     * @brief Override new[] operator
+     * @param [in] size: malloc size.
+     */
+    void *operator new[](size_t size);
+
+    /**
+     * @brief Override delete operator
+     * @param [in] p: pointer to be deleted.
+     */
+    void operator delete(void *p);
+
+    /**
+     * @brief Override delete[] operator
+     * @param [in] p: pointer to be deleted.
+     */
+    void operator delete[](void *p);
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_MEMORY_HEAP_H
diff --git a/interfaces/innerkits/builtin/jsi/jsi.h b/interfaces/innerkits/builtin/jsi/jsi.h
new file mode 100755
index 0000000..676e460
--- /dev/null
+++ b/interfaces/innerkits/builtin/jsi/jsi.h
@@ -0,0 +1,709 @@
+/*
+ * Copyright (c) 2020 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_JSI_H
+#define OHOS_ACELITE_JSI_H
+
+#include <cstdlib>
+
+#include "jsi_types.h"
+#include "memory_heap.h"
+
+/**
+ * Enable JS TypedArray type support.
+ */
+#ifndef JS_FWK_TYPEDARRAY
+#define JS_FWK_TYPEDARRAY 1
+#endif
+
+/**
+ * Disable JS Symbol value support.
+ */
+#ifndef JS_FWK_SYMBOL
+#define JS_FWK_SYMBOL 0
+#endif
+
+namespace OHOS {
+namespace ACELite {
+/**
+ * @brief End flag used in ReleaseValueList(JSIValue value, ...).
+ */
+static const JSIValue ARGS_END = (JSIValue)(uintptr_t)-1;
+
+/**
+ * @brief Function pointer type used to create function callback.
+ *
+ * @param [in] thisVal: the this value provided for the function call
+ * @param [in] args: the function arguments, array of JavaScript values
+ * @param [in] argsNum: the number of arguments
+ */
+typedef JSIValue (*JSIFunctionHandler)(const JSIValue thisVal, const JSIValue *args, uint8_t argsNum);
+
+/**
+ * @brief Description of JerryScript heap memory status.
+ */
+struct JSHeapStatus : public MemoryHeap {
+    size_t totalBytes;     // heap total size
+    size_t allocBytes;     // currently allocated bytes
+    size_t peakAllocBytes; // peak allocated bytes
+
+    JSHeapStatus(const JSHeapStatus &) = delete;
+    JSHeapStatus &operator=(const JSHeapStatus &) = delete;
+    JSHeapStatus(JSHeapStatus &&) = delete;
+    JSHeapStatus &operator=(JSHeapStatus &&) = delete;
+    JSHeapStatus() : totalBytes(0), allocBytes(0), peakAllocBytes(0) {}
+};
+
+/**
+ * @brief Struct definition for JS property descriptor
+ */
+struct JSPropertyDescriptor : public MemoryHeap {
+    JSIFunctionHandler setter; // access function for setting value
+    JSIFunctionHandler getter; // access function for getting value
+
+    JSPropertyDescriptor() : setter(nullptr), getter(nullptr) {}
+};
+
+/**
+ * @brief JavaScriptInterface for adapatation to javascript engines.
+ */
+class JSI final : public MemoryHeap {
+public:
+    /**
+     * @brief Get the global javascript object.
+     *
+     * @return the global object acquired
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue GetGlobalObject();
+
+    /**
+     * @brief Create a javascript object.
+     *
+     * @return the object created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateObject();
+
+    /**
+     * @brief Set property to given javascript object.
+     *
+     * @param [in] object: host object to set
+     * @param [in] key: key of the property to set
+     * @param [in] value: value of the property to set
+     */
+    static void SetProperty(JSIValue object, JSIValue key, JSIValue value);
+
+    /**
+     * @brief Set property to javascript object with given name.
+     *
+     * @param [in] object: host object to set
+     * @param [in] propName: name of the property to set
+     * @param [in] value: value of the property to set
+     */
+    static void SetNamedProperty(JSIValue object, const char * const propName, JSIValue value);
+
+    /**
+     * @brief Set number property to javascript object with given name.
+     *
+     * @param [in] object: host object to set
+     * @param [in] propName: name of the number property to set
+     * @param [in] value: number value of the property to set
+     */
+    static void SetNumberProperty(JSIValue object, const char * const propName, double value);
+
+    /**
+     * @brief Set boolean property to javascript object with given name.
+     *
+     * @param [in] object: host object to set
+     * @param [in] propName: name of the boolean property to set
+     * @param [in] value: boolean value of the property to set
+     */
+    static void SetBooleanProperty(JSIValue object, const char * const propName, bool value);
+
+    /**
+     * @brief Set string property to javascript object with given name.
+     *
+     * @param [in] object: host object to set
+     * @param [in] propName: name of the string property to set
+     * @param [in] value: string value of the property to set
+     */
+    static void SetStringProperty(JSIValue object, const char * const propName, const char *value);
+
+    /**
+     * @brief Create javascript function with given native function.
+     *
+     * @param [in] handler: native function pointer
+     * @return javascript function object
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateFunction(JSIFunctionHandler handler);
+
+    /**
+     * @brief Create javascript string object with character string.
+     *
+     * @param [in] str: string source
+     * @return the string object created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateString(const char * const str);
+
+    /**
+     * @brief Create an undefined object.
+     *
+     * @return the undefined object created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateUndefined();
+
+    /**
+     * @brief Check if the specified value is a function object value, the value must be created by jerry interface.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is a function
+     *         false: otherwise
+     */
+    static bool ValueIsFunction(JSIValue value);
+
+    /**
+     * @brief Check if the specified value is undefined.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is undefined
+     *         false: otherwise
+     */
+    static bool ValueIsUndefined(JSIValue value);
+
+    /**
+     * @brief Check if the specified value is a number.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is a number
+     *         false: otherwise
+     */
+    static bool ValueIsNumber(JSIValue value);
+
+    /**
+     * @brief Check if the specified value is a string value.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is a string value
+     *         false: otherwise
+     */
+    static bool ValueIsString(JSIValue value);
+
+    /**
+     * @brief Check if the specified value is a boolean value.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is a boolean value
+     *         false: otherwise
+     */
+    static bool ValueIsBoolean(JSIValue value);
+
+    /**
+     * @brief Check if the specified value is a null value.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is a null value
+     *         false: otherwise
+     */
+    static bool ValueIsNull(JSIValue value);
+
+    /**
+     * @brief Check if the specified value is an object value.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is an object value
+     *         false: otherwise
+     */
+    static bool ValueIsObject(JSIValue value);
+
+    /**
+     * @brief Check if the specified value is error value.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is error value
+     *         false: otherwise
+     */
+    static bool ValueIsError(JSIValue value);
+
+    /**
+     * @brief Get the same value as json.stringify().
+     *
+     * @param [in] value: value which can be json stringfied
+     * @return the json string created
+     * value returned should be released with ReleaseString(char *&str) when it won't be used any more
+     */
+    static char *JsonStringify(JSIValue value);
+
+    /**
+     * @brief Get the same value as json.parse().
+     *
+     * @param [in] str: character string which is in json pattern
+     * @return JSI value created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue JsonParse(const char * const str);
+
+    /**
+     * @brief Get value of a property from the specified object with the given key.
+     *
+     * @param [in] object: object value
+     * @param [in] key: property name
+     * @return acquired value of the property
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue GetProperty(JSIValue object, JSIValue key);
+
+    /**
+     * @brief Get value of a property from the specified object with the given character name.
+     *
+     * @param [in] object: object value
+     * @param [in] propName: property name in character string
+     * @return acquired value of the property
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue GetNamedProperty(JSIValue object, const char * const propName);
+
+    /**
+     * @brief Get number value from the specified object with the given property name.
+     *
+     * @param [in] object: object value
+     * @param [in] propName: the number property name
+     * @return number value acquired
+     * 0.0 will be returned if the argument passed is not a number object
+     */
+    static double GetNumberProperty(JSIValue object, const char * const propName);
+
+    /**
+     * @brief Get boolean value from the specified object with the given property name.
+     *
+     * @param [in] object: object value
+     * @param [in] propName: the boolean property name
+     * @return true: if the property value is logical true
+     *         false: otherwise
+     */
+    static bool GetBooleanProperty(JSIValue object, const char * const propName);
+
+    /**
+     * @brief Get string value from the specified object with the given property name.
+     *
+     * @param [in] object: object value
+     * @param [in] propName: the string property name
+     * @return the string value acquired
+     * value returned should be released with ReleaseString(char *&str) when it won't be used any more
+     */
+    static char *GetStringProperty(JSIValue object, const char * const propName);
+
+    /**
+     * @brief: Release specified API value.
+     *
+     * @param: value JSI value to release
+     */
+    static void ReleaseValue(JSIValue value);
+
+    static void ReleaseValueList() {}
+
+    /**
+     * @brief: Release API value list.
+     *
+     * @param: JSI value list to release
+     */
+    template<class T, class... Args> static void ReleaseValueList(T head, Args... rest)
+    {
+        ReleaseValue(head);
+        ReleaseValueList(rest...);
+    }
+
+    /**
+     * @brief: Release string value.
+     *
+     * @param: str: pointer to the buffer to be released
+     */
+    static void ReleaseString(char *&str);
+
+    /**
+     * @brief Call javascript function specified by a function value.
+     *
+     * @param [in] funcObj: the function object to call
+     * @param [in] thisVal: object for 'this' binding
+     * @param [in] argv:  function's call arguments
+     * @param [in] argc: number of arguments
+     */
+    static void CallFunction(JSIValue funcObj, JSIValue thisVal, const JSIValue *argv, uint8_t argc);
+
+    /**
+     * @brief Create javascript number value.
+     *
+     * @param [in] value: source number
+     * @return the number value created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateNumber(double value);
+
+    /**
+     * @brief Create a JSIValue representing a not-a-number value.
+     *
+     * @return a JSIValue representing the not-a-number value
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateNumberNaN();
+
+    /**
+     * @brief Create javascript error object.
+     *
+     * @param [in] type: error type
+     * @param [in] errorMsg: value of 'message' property of constructed error object
+     * @return value of the constructed error object
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateError(JsiErrorType type, const char * const errorMsg);
+
+    /**
+     * @brief Get the type of the error object.
+     *
+     * @param [in] errorValue: error value to get
+     * @return the type of the error object
+     */
+    static JsiErrorType GetErrorType(JSIValue errorValue);
+
+    /**
+     * @brief Create javascript boolean value.
+     *
+     * @param [in] value: bool value
+     * @return the boolean value created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateBoolean(bool value);
+
+    /**
+     * @brief Create javascript null object.
+     *
+     * @return the null object created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateNull();
+
+#ifdef JS_FWK_SYMBOL
+    /**
+     * @brief Create a javascript symbol.
+     *
+     * @param [in] description: source value
+     * @return the symbol object created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateSymbol(JSIValue description);
+
+    /**
+     * @brief Check if the specified value is a symbol value.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is a symbol value
+     *         false: otherwise
+     */
+    static bool ValueIsSymbol(JSIValue value);
+#endif // JS_FWK_SYMBOL
+
+    /**
+     * @brief Create a javascript array.
+     *
+     * @param [in] length: array length
+     * @return the array object created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateArray(uint32_t length);
+
+    /**
+     * @brief Set indexed value in the specified javascript object.
+     *
+     * @param [in] object: object to set
+     * @param [in] index: index number
+     * @param [in] value: value to set
+     * @return true: if the operation succeed
+     *         false: otherwise
+     */
+    static bool SetPropertyByIndex(JSIValue object, uint32_t index, JSIValue value);
+
+    /**
+     * @brief Get the string value of the given JSIValue object.
+     *
+     * @param [in] value: source value
+     * @return the string value created
+     * value returned should be released with ReleaseString(char *&str) when it won't be used any more
+     */
+    static char *ValueToString(JSIValue value);
+
+    /**
+     * @brief Get the number value of the given JSIValue object.
+     *
+     * @param [in] value: source value
+     * @return double value acquired
+     * 0.0 will be returned if the argument passed is not a number object
+     */
+    static double ValueToNumber(JSIValue value);
+
+    /**
+     * @brief Get the boolean value of the given JSIValue object.
+     *
+     * @param [in] value: source value
+     * @return true: if the given value is logical true
+     *         false: otherwise
+     */
+    static bool ValueToBoolean(JSIValue value);
+
+    /**
+     * @brief Check if the specified value is an array object.
+     *
+     * @param [in] value: array value
+     * @return array length acquired
+     * 0 will be returned if the argument passed is not an array object
+     */
+    static uint32_t GetArrayLength(JSIValue value);
+
+    /**
+     * @brief Get indexed value from the javascript array object.
+     *
+     * @param [in] object: source array object
+     * @param [in] index: index number
+     * @return value acquired from the specified index of the array
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue GetPropertyByIndex(JSIValue object, uint32_t index);
+
+    /**
+     * @brief Get keys of the specified object value.
+     *
+     * @param [in] object: object value
+     * @return array object of the given object keys
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue GetObjectKeys(JSIValue object);
+
+    /**
+     * @brief Get heap memory status.
+     *
+     * @param [out] heapStatus: struct for heap memory status acquired
+     * @return true: if the operation succeed
+     *         false: otherwise
+     */
+    static bool GetJSHeapStatus(JSHeapStatus &heapStatus);
+
+    /**
+     * @brief Check if the specified value is an array object.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is an array object
+     *         false: otherwise
+     */
+    static bool ValueIsArray(JSIValue value);
+
+    /**
+     * @brief Acquire the specified JSI value to create a reference
+     *
+     * @param [in] value: JSI value to acquire
+     * @return acquired value that may be used outside of the engine
+     * value returned should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue AcquireValue(JSIValue value);
+
+    /**
+     * @brief Set API for given exports object
+     *
+     * @param [in] exports: object to set
+     * @param [in] name: API name
+     * @param [in] handler: pointer to the native implementation of this JS API
+     */
+    static void SetModuleAPI(JSIValue exports, const char * const name, JSIFunctionHandler handler);
+
+    /**
+     * @brief Set JS page destroy callback on given module object
+     *
+     * @param [in] object: JS module object
+     * @param [in] callback: native destroy callback
+     * Note: this function is deprecated, use the other one alternatively
+     */
+    static void SetOnDestroy(JSIValue object, NativeCallback callback);
+
+    /**
+     * @brief set JS page destroy callback on given module object
+     *
+     * @param [in] object: JS module object
+     * @param [in] callback: native destroy callback
+     */
+    static void SetOnDestroy(JSIValue object, JsiCallback callback);
+
+    /**
+     * @brief set JS ability terminate callback on given module object
+     *
+     * @param [in] object: JS module object
+     * @param [in] callback: native terminate callback
+     * Note: this function is deprecated, use the other one alternatively
+     */
+    static void SetOnTerminate(JSIValue object, NativeCallback callback);
+
+    /**
+     * @brief set JS ability terminate callback on given module object
+     *
+     * @param [in] object: JS module object
+     * @param [in] callback: native terminate callback
+     */
+    static void SetOnTerminate(JSIValue object, JsiCallback callback);
+
+#ifdef JS_FWK_TYPEDARRAY
+    /**
+     * @brief Get the properties of the given javascript TypedArray object.
+     *
+     * @param [in] typedArray: TypedArray object
+     * @param [out] type: type of the TypedArray, one of the TypedArrayType enum value
+     * @param [out] length: the element number of the TypedArray
+     * 0 if the typedArray parameter is not a TypedArray object
+     * @param [out] arrayBuffer: the ArrayBuffer object used by the TypedArray object
+     * value should be released by caller with ReleaseValue when it won't be used any more
+     * @param [out] byteOffset: the start offset of the ArrayBuffer for the TypedArray
+     * @return pointer to the Array Buffer's data area
+     * must ensure that the output pointer is used correctly, that is there is no out of bounds reads or writes
+     * the lifetime of the underlying data buffer is managed by the ArrayBuffer value, thus, do not release the
+     * pointer returned
+     */
+    static uint8_t *GetTypedArrayInfo(JSIValue typedArray,
+                                      TypedArrayType &type,
+                                      size_t &length,
+                                      JSIValue &arrayBuffer,
+                                      size_t &byteOffset);
+
+    /**
+     * @brief Create a TypedArray object using an already existing ArrayBuffer object.
+     *
+     * @param [in] type: type of the TypedArray, one of the TypedArrayType enum value
+     * @param [in] length: the element number of the TypedArray
+     * @param [in] arrayBuffer: the ArrayBuffer object to use for the new TypedArray
+     * @param [in] byteOffset: the start offset of the ArrayBuffer for the TypedArray
+     * @return the TypedArray object created
+     * value returned should be released by caller with ReleaseValue when it won't be used any more.
+     */
+    static JSIValue CreateTypedArray(TypedArrayType type, size_t length, JSIValue arrayBuffer, size_t byteOffset);
+
+    /**
+     * @brief Get the properties of the given ArrayBuffer object.
+     *
+     * @param [in] arrayBuffer: ArrayBuffer object
+     * @param [out] byteLength size of the ArrayBuffer in bytes
+     * 0 if the arrayBuffer parameter is not an ArrayBuffer object
+     * @return pointer to the Array Buffer's data area
+     * must ensure that the output pointer is used correctly, that is there is no out of bounds reads or writes
+     * the lifetime of the underlying data buffer is managed by the ArrayBuffer value, thus, do not release the
+     * pointer returned
+     */
+    static uint8_t *GetArrayBufferInfo(JSIValue arrayBuffer, size_t &byteLength);
+
+    /**
+     * @brief Create an ArrayBuffer object.
+     *
+     * @param [in] byteLength: size of the ArrayBuffer to create in bytes
+     * @param [out] buffPtr: pointer to the Array Buffer's data area
+     * must ensure that the output pointer is used correctly, that is there is no out of bounds reads or writes
+     * the lifetime of the underlying data buffer is managed by the ArrayBuffer value, thus, do not release the pointer
+     * @return the ArrayBuffer object created
+     * result should be released by caller with ReleaseValue when it won't be used any more
+     */
+    static JSIValue CreateArrayBuffer(size_t byteLength, uint8_t *&buffPtr);
+
+    /**
+     * @brief Check if the specified value is an ArrayBuffer object.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is an ArrayBuffer object
+     *         false: otherwise
+     */
+    static bool ValueIsArrayBuffer(JSIValue value);
+
+    /**
+     * @brief Check if the specified value is a TypedArray object.
+     *
+     * @param [in] value: value to check
+     * @return true: if the given value is an TypedArray object
+     *         false: otherwise
+     */
+    static bool ValueIsTypedArray(JSIValue value);
+#endif // JS_FWK_TYPEDARRAY
+
+    /**
+     * @brief Define a property on the specified object with the given name.
+     *
+     * @param [in] object: object to define property on
+     * @param [in] propName: property name
+     * @param [in] descriptor: property descriptor
+     * @return true: if success
+     *         false: otherwise
+     */
+    static bool DefineProperty(JSIValue object, JSIValue propName, JSPropertyDescriptor descriptor);
+
+    /**
+     * @brief Define a property on the specified object with the given character name.
+     *
+     * @param [in] object: object to define property on
+     * @param [in] propNameStr: property name in character string
+     * @param [in] descriptor: property descriptor
+     * @return true: if success
+     *         false: otherwise
+     */
+    static bool DefineNamedProperty(JSIValue object, const char * const propNameStr, JSPropertyDescriptor descriptor);
+
+    /**
+     * @brief Define a property on the specified object with the given setter and getter.
+     *
+     * @param [in] object: object to define property on
+     * @param [in] propNameStr: property name in character string
+     * @param [in] setter: access function for setting value
+     * @param [in] getter: access function for getting value
+     * @return true: if success
+     *         false: otherwise
+     */
+    static bool DefineNamedProperty(JSIValue object,
+                                    const char * const propNameStr,
+                                    JSIFunctionHandler setter,
+                                    JSIFunctionHandler getter);
+
+    /**
+     * @brief Call fail and complete callbacks acquired from args.
+     *
+     * @param [in] thisVal: object for 'this' binding
+     * @param [in] args: object to acquire function callbacks from
+     * @param [in] errCode: error code for fail callback
+     * @param [in] errDesc: error description for fail callback
+     */
+    static void FailCallback(const JSIValue thisVal, const JSIValue args, int32_t errCode, const char * const errDesc);
+
+    /**
+     * @brief Call success and complete callbacks acquired from args.
+     *
+     * @param [in] thisVal: object for 'this' binding
+     * @param [in] args: object to acquire function callbacks from
+     * @param [in] argv: arguments for success callback
+     * @param [in] argc: number of arguments for success callback
+     */
+    static void SuccessCallback(const JSIValue thisVal, const JSIValue args, const JSIValue *argv, uint8_t argc);
+
+private:
+    // private constructor for singleton instance
+    JSI() {}
+    ~JSI() {}
+    static void SetNamedPointer(JSIValue object, const char * const name, JsiCallback callback);
+};
+} // namespace ACELite
+} // namespace OHOS
+
+#endif // OHOS_ACELITE_JSI_H
diff --git a/interfaces/innerkits/builtin/jsi/jsi_types.h b/interfaces/innerkits/builtin/jsi/jsi_types.h
new file mode 100644
index 0000000..188c63b
--- /dev/null
+++ b/interfaces/innerkits/builtin/jsi/jsi_types.h
@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2020 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_JSI_TYPES_H
+#define OHOS_ACELITE_JSI_TYPES_H
+
+#include <cstdint>
+
+namespace OHOS {
+namespace ACELite {
+// opaque pointer for JSI abstract value
+using JSIValue = struct JSIVal *;
+
+// type used for initialization functions of built-in modules
+using InitFunc = void(*)(JSIValue exports);
+
+/**
+ * type used for native callback of built-in modules
+ * Note: this type is deprecated, use JsiCallback alternatively
+ */
+using NativeCallback = void(*)();
+
+// type used for native callback of built-in modules
+using JsiCallback = void(*)(int8_t statusCode);
+
+// struct information for built-in modules
+struct Module {
+    const char* name;
+    InitFunc initFunc;
+};
+
+// struct information for private modules
+struct PrivateModule {
+    const char* bundleName;
+    Module module;
+    PrivateModule(const PrivateModule &) = delete;
+    PrivateModule &operator=(const PrivateModule &) = delete;
+    PrivateModule(PrivateModule &&) = delete;
+    PrivateModule &operator=(PrivateModule &&) = delete;
+};
+
+// constants for JSI API development
+constexpr char CB_CALLBACK[] = "callback";
+constexpr char CB_SUCCESS[] = "success";
+constexpr char CB_FAIL[] = "fail";
+constexpr char CB_COMPLETE[] = "complete";
+constexpr uint8_t ARGC_ONE = 1;
+constexpr uint8_t ARGC_TWO = 2;
+constexpr uint8_t ARGC_THREE = 3;
+
+// Error code used for callback processing
+constexpr int8_t JSI_ERR_OK = 0;
+constexpr int8_t JSI_ERR_FAIL = -1;
+
+/**
+ * @enum    TypedArrayType
+ *
+ * @brief   Values that represent different types of TypedArray object
+ */
+enum class TypedArrayType {
+    JSI_INVALID_ARRAY,
+    JSI_INT8_ARRAY,
+    JSI_UINT8_ARRAY,
+    JSI_UINT8CLAMPED_ARRAY,
+    JSI_INT16_ARRAY,
+    JSI_UINT16_ARRAY,
+    JSI_INT32_ARRAY,
+    JSI_UINT32_ARRAY,
+    JSI_FLOAT32_ARRAY,
+    JSI_FLOAT64_ARRAY,
+    JSI_TYPE_MAX_ARRAY
+};
+
+/**
+ * @enum    JsiErrorType
+ *
+ * @brief   Values that represent different types of error object
+ */
+enum class JsiErrorType {
+    JSI_ERROR_INVALID,
+    JSI_ERROR_COMMON,
+    JSI_ERROR_EVAL,
+    JSI_ERROR_RANGE,
+    JSI_ERROR_REFERENCE,
+    JSI_ERROR_SYNTAX,
+    JSI_ERROR_TYPE,
+    JSI_ERROR_URI,
+    JSI_ERROR_MAX
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_JSI_TYPES_H
diff --git a/readme.md b/readme.md
deleted file mode 100755
index f7333eb..0000000
--- a/readme.md
+++ /dev/null
@@ -1,3 +0,0 @@
-详见：https://gitee.com/openharmony/docs/blob/master/readme/JS应用开发框架README.md
-
-see: https://gitee.com/openharmony/docs/blob/master/docs-en/readme/js-application-framework.md
\ No newline at end of file
diff --git a/src/core/base/ace_mem_base.cpp b/src/core/base/ace_mem_base.cpp
deleted file mode 100755
index 5bc70f9..0000000
--- a/src/core/base/ace_mem_base.cpp
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright (c) 2020 Huawei Device 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.
- */
-#include "ace_mem_base.h"
-
-#include <cstdio>
-#include "acelite_config.h"
-
-#if defined(FEATURE_ACELITE_MC_MEMORY_POOL) && defined(FEATURE_ACELITE_MEMORY_POOL)
-#error Only one marco can be defined
-#elif defined(FEATURE_ACELITE_MC_MEMORY_POOL) && (defined(TARGET_SIMULATOR))
-#error Only one marco can be defined
-#elif defined(FEATURE_ACELITE_PRODUCT_MEMORY_POOL) && (defined(TARGET_SIMULATOR))
-#error Only one macro can be defined
-#elif defined(FEATURE_ACELITE_MEMORY_POOL) && (defined(TARGET_SIMULATOR))
-#error Only one macro can be defined
-#endif
-
-#if defined(FEATURE_ACELITE_MC_MEMORY_POOL)
-#include "mc_memory.h"
-#elif defined(FEATURE_ACELITE_PRODUCT_MEMORY_POOL)
-#include "mem_pool.h"
-#elif defined(FEATURE_ACELITE_MEMORY_POOL)
-#include "hos_errno.h"
-#include "hos_memory.h"
-#else
-#include <cstdlib>
-#endif
-
-namespace OHOS {
-namespace ACELite {
-void* ace_malloc(size_t size)
-{
-#if defined(FEATURE_ACELITE_MC_MEMORY_POOL)
-    return MC_UI_MEM_ALLOC(size);
-#elif defined(FEATURE_ACELITE_PRODUCT_MEMORY_POOL)
-    return MemPool::GetInstance()->Malloc(size);
-#elif defined(FEATURE_ACELITE_MEMORY_POOL)
-    return HOS_MemAlloc(0, size);
-#else
-    return malloc(size);
-#endif
-}
-
-void* ace_calloc(size_t num, size_t size)
-{
-#if (defined(FEATURE_ACELITE_MC_MEMORY_POOL) || defined(FEATURE_ACELITE_PRODUCT_MEMORY_POOL) || \
-     defined(FEATURE_ACELITE_MEMORY_POOL))
-    // the calloc is not provided for some platform
-    return nullptr;
-#else
-    return calloc(num, size);
-#endif
-}
-
-void ace_free(void* ptr)
-{
-#if defined(FEATURE_ACELITE_MC_MEMORY_POOL)
-    MC_UI_MEM_FREE(ptr);
-#elif defined(FEATURE_ACELITE_PRODUCT_MEMORY_POOL)
-    MemPool::GetInstance()->Free(ptr);
-#elif defined(FEATURE_ACELITE_MEMORY_POOL)
-    HOS_MemFree(0, ptr);
-#else
-    free(ptr);
-#endif
-}
-} // namespace ACELite
-} // namespace OHOS
diff --git a/src/core/components/BUILD.gn b/src/core/components/BUILD.gn
deleted file mode 100755
index 02e39c3..0000000
--- a/src/core/components/BUILD.gn
+++ /dev/null
@@ -1,45 +0,0 @@
-#Copyright (c) 2020 Huawei Device 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.
-
-source_set("components") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-    sources = [
-        "analog_clock_component.cpp",
-        "canvas_component.cpp",
-        "chart_component.cpp",
-        "clock_hand_component.cpp",
-        "component.cpp",
-        "component_utils.cpp",
-        "div_component.cpp",
-        "image_animator_component.cpp",
-        "image_component.cpp",
-        "input_component.cpp",
-        "list_adapter.cpp",
-        "list_component.cpp",
-        "marquee_component.cpp",
-        "picker_view_component.cpp",
-        "progress_component.cpp",
-        "slider_component.cpp",
-        "swiper_component.cpp",
-        "switch_component.cpp",
-        "tab_bar_component.cpp",
-        "tab_content_component.cpp",
-        "tabs_component.cpp",
-        "text_component.cpp",
-        "scroll_layer.cpp",
-    ]
-    include_dirs = [
-    ]
-}
diff --git a/src/core/components/canvas_component.cpp b/src/core/components/canvas_component.cpp
deleted file mode 100755
index 3060e2c..0000000
--- a/src/core/components/canvas_component.cpp
+++ /dev/null
@@ -1,672 +0,0 @@
-/*
- * Copyright (c) 2020 Huawei Device 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.
- */
-
-#include "acelite_config.h"
-
-#ifdef FEATURE_COMPONENT_CANVAS
-#include "canvas_component.h"
-#include "js_fwk_common.h"
-
-namespace OHOS {
-namespace ACELite {
-// default fill style color=black
-const char * const CanvasComponent::DEFAULT_FILLSTYLE = "#000000";
-// default stroke style color=black
-const char * const CanvasComponent::DEFAULT_STROKESTYLE = "#000000";
-// default font size and font family
-const char * const CanvasComponent::DEFAULT_FONT = "30px " DEFAULT_VECTOR_FONT_FILENAME;
-// default text align=left
-const char * const CanvasComponent::DEFAULT_TEXTALIGN = "left";
-
-const uint8_t CanvasComponent::ARGS_COUNT_ONE = 1;
-const uint8_t CanvasComponent::ARGS_COUNT_THREE = 3;
-const uint8_t CanvasComponent::ARGS_COUNT_FOUR = 4;
-const uint8_t CanvasComponent::ARGS_INDEX_0 = 0;
-const uint8_t CanvasComponent::ARGS_INDEX_1 = 1;
-const uint8_t CanvasComponent::ARGS_INDEX_2 = 2;
-const uint8_t CanvasComponent::ARGS_INDEX_3 = 3;
-
-// API-attribute
-const char * const CanvasComponent::ATTR_FILLSTYLE = "fillStyle";
-const char * const CanvasComponent::ATTR_STROKESTYLE = "strokeStyle";
-const char * const CanvasComponent::ATTR_LINEWIDTH = "lineWidth";
-const char * const CanvasComponent::ATTR_FONT = "font";
-const char * const CanvasComponent::ATTR_TEXTALIGN = "textAlign";
-
-// API-method
-const char * const CanvasComponent::FUNC_GETCONTEXT = "getContext";
-const char * const CanvasComponent::FUNC_FILLRECT = "fillRect";
-const char * const CanvasComponent::FUNC_STROKERECT = "strokeRect";
-const char * const CanvasComponent::FUNC_FILLTEXT = "fillText";
-
-// create canvas draw attribute-callback mapping
-const AttrMap CanvasComponent::attrMap_[] = {
-    {ATTR_FILLSTYLE, FillStyleSetter, FillStyleGetter},
-    {ATTR_STROKESTYLE, StrokeStyleSetter, StrokeStyleGetter},
-    {ATTR_LINEWIDTH, LineWidthSetter, LineWidthGetter},
-    {ATTR_FONT, FontSetter, FontGetter},
-    {ATTR_TEXTALIGN, TextAlignSetter, TextAlignGetter}
-};
-
-// create canvas draw method-callback mapping
-const MethodMap CanvasComponent::methodMap_[] = {
-    {FUNC_GETCONTEXT, CanvasGetContext},
-    {FUNC_FILLRECT, CanvasFillRect},
-    {FUNC_STROKERECT, CanvasStrokeRect},
-    {FUNC_FILLTEXT, CanvasFillText}
-};
-
-CanvasComponent::CanvasComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *styleManager)
-    : Component(options, children, styleManager),
-      canvas_(nullptr),
-      canvas2dContext_(UNDEFINED),
-      fillStyleValue_(nullptr),
-      strokeStyleValue_(nullptr),
-      fontValue_(nullptr),
-      textAlignValue_(nullptr),
-      lineWidthValue_(1)
-{
-    SetComponentName(K_CANVAS);
-    // set default paint pattern
-    paint_.SetFillColor(Color::Black());
-    paint_.SetOpacity(OPA_OPAQUE);
-    paint_.SetStrokeColor(Color::Black());
-    paint_.SetStrokeWidth(1);
-
-    // set default text font pattern
-    fontStyle_.align = TEXT_ALIGNMENT_LEFT;
-    fontStyle_.direct = TEXT_DIRECT_LTR;
-    fontStyle_.fontSize = DEFAULT_FONT_SIZE;
-    char *defaultFontName = nullptr;
-    CopyFontFamily(defaultFontName, DEFAULT_FONT_FAMILY);
-    fontStyle_.fontName = defaultFontName;
-    fontStyle_.letterSpace = DEFAULT_FONT_LETTERSPACE;
-
-    RegisterNamedFunction(methodMap_[0].methodName, methodMap_[0].callbackName);
-}
-// Create FlexLayout
-bool CanvasComponent::CreateNativeViews()
-{
-    canvas_ = new UICanvas();
-    if (canvas_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "create native canvas view failed");
-        return false;
-    }
-    return true;
-}
-
-void CanvasComponent::ReleaseNativeViews()
-{
-    ACE_DELETE(canvas_);
-    ACE_FREE(fillStyleValue_);
-    ACE_FREE(strokeStyleValue_);
-    ACE_FREE(fontValue_);
-    ACE_FREE(textAlignValue_);
-    // free fontStyle_.fontName memory which malloc in FontSetter method.
-    if (fontStyle_.fontName != nullptr) {
-        ace_free(const_cast<char *>(fontStyle_.fontName));
-        fontStyle_.fontName = nullptr;
-    }
-    if (!IS_UNDEFINED(canvas2dContext_)) {
-        bool deleted = jerry_delete_object_native_pointer(canvas2dContext_, nullptr);
-        if (!deleted) {
-            HILOG_WARN(HILOG_MODULE_ACE, "canvas_component: delete object native pointer canvas2dContext_ failed!");
-        }
-        jerry_release_value(canvas2dContext_);
-    }
-}
-
-UIView *CanvasComponent::GetComponentRootView() const
-{
-    return canvas_;
-}
-
-jerry_value_t CanvasComponent::CanvasGetContext(const jerry_value_t func,
-                                                const jerry_value_t context,
-                                                const jerry_value_t args[],
-                                                const jerry_length_t argsNum)
-{
-    (void)func;
-    (void)args;
-    if (argsNum != ARGS_COUNT_ONE) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of getContext method parameter error!");
-        return UNDEFINED;
-    }
-
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    if (IS_UNDEFINED(component->canvas2dContext_)) {
-        component->canvas2dContext_ = jerry_create_object();
-        jerry_set_object_native_pointer(component->canvas2dContext_, component, nullptr);
-
-        // register fillStyle, strokeStyle, lineWidth, font, textAlign attribute
-        uint16_t attrMapLength = sizeof(attrMap_) / sizeof(attrMap_[0]);
-        for (uint16_t index = 0; index < attrMapLength; index++) {
-            RegisterAttributeFunc(component->canvas2dContext_, attrMap_[index].attrName, attrMap_[index].setterName,
-                                  attrMap_[index].getterName);
-        }
-
-        // register fillRect, strokeRect, fillText method
-        uint16_t methodMapLength = sizeof(methodMap_) / sizeof(methodMap_[0]);
-        for (uint16_t index = 1; index < methodMapLength; index++) {
-            RegisterDrawMethodFunc(component->canvas2dContext_, methodMap_[index].methodName,
-                                   methodMap_[index].callbackName);
-        }
-    }
-
-    jerry_acquire_value(component->canvas2dContext_);
-    return component->canvas2dContext_;
-}
-
-jerry_value_t CanvasComponent::FillStyleSetter(const jerry_value_t func,
-                                               const jerry_value_t context,
-                                               const jerry_value_t args[],
-                                               const jerry_length_t argsNum)
-{
-    (void)func;
-    if (argsNum != ARGS_COUNT_ONE) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the value of fillStyle is null!");
-        return UNDEFINED;
-    }
-
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    ACE_FREE(component->fillStyleValue_);
-
-    component->fillStyleValue_ = MallocStringOf(args[ARGS_INDEX_0]);
-    if (component->fillStyleValue_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get fillStyle value failed");
-        return UNDEFINED;
-    }
-
-    uint32_t color = 0;
-    uint8_t alpha = OPA_OPAQUE;
-    ParseColor(component->fillStyleValue_, color, alpha);
-    component->paint_.SetFillColor(component->GetRGBColor(color));
-    component->paint_.SetOpacity(alpha);
-    return UNDEFINED;
-}
-
-jerry_value_t CanvasComponent::FillStyleGetter(const jerry_value_t func,
-                                               const jerry_value_t dom,
-                                               const jerry_value_t args[],
-                                               const jerry_length_t argsNum)
-{
-    (void)func;
-    (void)args;
-    (void)argsNum;
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    if (component->fillStyleValue_ == nullptr) {
-        CopyFontFamily(component->fillStyleValue_, DEFAULT_FILLSTYLE);
-    }
-
-    if (component->fillStyleValue_ != nullptr) {
-        return jerry_create_string(reinterpret_cast<const jerry_char_t *>(component->fillStyleValue_));
-    } else {
-        return UNDEFINED;
-    }
-}
-
-jerry_value_t CanvasComponent::StrokeStyleSetter(const jerry_value_t func,
-                                                 const jerry_value_t context,
-                                                 const jerry_value_t args[],
-                                                 const jerry_length_t argsNum)
-{
-    (void)func;
-    if (argsNum != ARGS_COUNT_ONE) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the value of strokeStyle is null!");
-        return UNDEFINED;
-    }
-
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    ACE_FREE(component->strokeStyleValue_);
-
-    component->strokeStyleValue_ = MallocStringOf(args[ARGS_INDEX_0]);
-    if (component->strokeStyleValue_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get strokeStyle value failed");
-        return UNDEFINED;
-    }
-
-    uint32_t color = 0;
-    uint8_t alpha = OPA_OPAQUE;
-    ParseColor(component->strokeStyleValue_, color, alpha);
-    component->paint_.SetStrokeColor(component->GetRGBColor(color));
-    component->paint_.SetOpacity(alpha);
-    return UNDEFINED;
-}
-
-jerry_value_t CanvasComponent::StrokeStyleGetter(const jerry_value_t func,
-                                                 const jerry_value_t dom,
-                                                 const jerry_value_t args[],
-                                                 const jerry_length_t argsNum)
-{
-    (void)func;
-    (void)args;
-    (void)argsNum;
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    if (component->strokeStyleValue_ == nullptr) {
-        CopyFontFamily(component->strokeStyleValue_, DEFAULT_STROKESTYLE);
-    }
-
-    if (component->strokeStyleValue_ != nullptr) {
-        return jerry_create_string(reinterpret_cast<const jerry_char_t *>(component->strokeStyleValue_));
-    } else {
-        return UNDEFINED;
-    }
-}
-
-jerry_value_t CanvasComponent::LineWidthSetter(const jerry_value_t func,
-                                               const jerry_value_t context,
-                                               const jerry_value_t args[],
-                                               const jerry_length_t argsNum)
-{
-    (void)func;
-    if (argsNum != ARGS_COUNT_ONE) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the value of lineWidth is null!");
-        return UNDEFINED;
-    }
-
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    component->lineWidthValue_ = IntegerOf(args[ARGS_INDEX_0]);
-    component->paint_.SetStrokeWidth(component->lineWidthValue_);
-    return UNDEFINED;
-}
-
-jerry_value_t CanvasComponent::LineWidthGetter(const jerry_value_t func,
-                                               const jerry_value_t dom,
-                                               const jerry_value_t args[],
-                                               const jerry_length_t argsNum)
-{
-    (void)func;
-    (void)args;
-    (void)argsNum;
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-    return jerry_create_number(component->lineWidthValue_);
-}
-
-jerry_value_t CanvasComponent::FontSetter(const jerry_value_t func,
-                                          const jerry_value_t context,
-                                          const jerry_value_t args[],
-                                          const jerry_length_t argsNum)
-{
-    (void)func;
-    if (argsNum != ARGS_COUNT_ONE) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the value of font is null!");
-        return UNDEFINED;
-    }
-
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    ACE_FREE(component->fontValue_);
-
-    component->fontValue_ = MallocStringOf(args[ARGS_INDEX_0]);
-    if (component->fontValue_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get text font value failed");
-        return UNDEFINED;
-    }
-
-    const int8_t maxParamCount = 2;
-    for (int8_t index = 0; index < maxParamCount; index++) {
-        // get font size or font family from fontValue.
-        char *mallocSubFont = nullptr;
-        component->GetSubFont(component->fontValue_, index, mallocSubFont);
-        if (mallocSubFont == nullptr) {
-            HILOG_WARN(HILOG_MODULE_ACE, "canvas_component: get text font size or font family failed");
-            ace_free(component->fontValue_);
-            component->fontValue_ = nullptr;
-            return UNDEFINED;
-        }
-
-        // if it is a font size
-        if (*mallocSubFont >= '0' && *mallocSubFont <= '9') {
-            component->fontStyle_.fontSize = strtol(mallocSubFont, nullptr, DEC);
-            ace_free(mallocSubFont);
-            mallocSubFont = nullptr;
-        } else { // if it is a font family
-            // free default component->fontStyle_.fontName memory.
-            if (component->fontStyle_.fontName != nullptr) {
-                ace_free(const_cast<char *>(component->fontStyle_.fontName));
-                component->fontStyle_.fontName = nullptr;
-            }
-            // set customized font name, the memory of mallocFontFamily need be free in CanvasFillText method.
-            component->fontStyle_.fontName = mallocSubFont;
-        }
-    }
-    return UNDEFINED;
-}
-
-jerry_value_t CanvasComponent::FontGetter(const jerry_value_t func,
-                                          const jerry_value_t dom,
-                                          const jerry_value_t args[],
-                                          const jerry_length_t argsNum)
-{
-    (void)func;
-    (void)args;
-    (void)argsNum;
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    if (component->fontValue_ == nullptr) {
-        CopyFontFamily(component->fontValue_, DEFAULT_FONT);
-    }
-
-    if (component->fontValue_ != nullptr) {
-        return jerry_create_string(reinterpret_cast<const jerry_char_t *>(component->fontValue_));
-    } else {
-        return UNDEFINED;
-    }
-}
-
-jerry_value_t CanvasComponent::TextAlignSetter(const jerry_value_t func,
-                                               const jerry_value_t context,
-                                               const jerry_value_t args[],
-                                               const jerry_length_t argsNum)
-{
-    (void)func;
-    if (argsNum != ARGS_COUNT_ONE) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the value of textAlign is null!");
-        return UNDEFINED;
-    }
-
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    ACE_FREE(component->textAlignValue_);
-
-    uint16_t textAlignLength = 0;
-    component->textAlignValue_ = MallocStringOf(args[ARGS_INDEX_0], &textAlignLength);
-    if (component->textAlignValue_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get text align value failed");
-        return UNDEFINED;
-    }
-
-    uint16_t textAlignId = KeyParser::ParseKeyId(component->textAlignValue_, textAlignLength);
-    if (textAlignId == K_LEFT) {
-        component->fontStyle_.align = TEXT_ALIGNMENT_LEFT;
-    } else if (textAlignId == K_RIGHT) {
-        component->fontStyle_.align = TEXT_ALIGNMENT_RIGHT;
-    } else if (textAlignId == K_CENTER) {
-        component->fontStyle_.align = TEXT_ALIGNMENT_CENTER;
-    } else {
-        // do nothing(use defualt align=TEXT_ALIGNMENT_LEFT)
-    }
-    return UNDEFINED;
-}
-
-jerry_value_t CanvasComponent::TextAlignGetter(const jerry_value_t func,
-                                               const jerry_value_t dom,
-                                               const jerry_value_t args[],
-                                               const jerry_length_t argsNum)
-{
-    (void)func;
-    (void)args;
-    (void)argsNum;
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(dom));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    if (component->textAlignValue_ == nullptr) {
-        CopyFontFamily(component->textAlignValue_, DEFAULT_TEXTALIGN);
-    }
-
-    if (component->textAlignValue_ != nullptr) {
-        return jerry_create_string(reinterpret_cast<const jerry_char_t *>(component->textAlignValue_));
-    } else {
-        return UNDEFINED;
-    }
-}
-
-jerry_value_t CanvasComponent::CanvasFillRect(const jerry_value_t func,
-                                              const jerry_value_t context,
-                                              const jerry_value_t args[],
-                                              const jerry_length_t argsNum)
-{
-    (void)func;
-    if (argsNum != ARGS_COUNT_FOUR) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of fillRect method parameter error!");
-        return UNDEFINED;
-    }
-
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    int16_t startX = IntegerOf(args[ARGS_INDEX_0]);
-    int16_t startY = IntegerOf(args[ARGS_INDEX_1]);
-    int16_t endX = IntegerOf(args[ARGS_INDEX_2]);
-    int16_t endY = IntegerOf(args[ARGS_INDEX_3]);
-
-    // FILL_STYLE: fill rect support fill shapses only
-    component->paint_.SetStyle(component->paint_.FILL_STYLE);
-
-    Point startPoint;
-    startPoint.x = startX;
-    startPoint.y = startY;
-    component->canvas_->DrawRect(startPoint, endX, endY, component->paint_);
-    return UNDEFINED;
-}
-
-jerry_value_t CanvasComponent::CanvasStrokeRect(const jerry_value_t func,
-                                                const jerry_value_t context,
-                                                const jerry_value_t args[],
-                                                const jerry_length_t argsNum)
-{
-    (void)func;
-    if (argsNum != ARGS_COUNT_FOUR) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of strokeRect method parameter error!");
-        return UNDEFINED;
-    }
-
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    int16_t startX = IntegerOf(args[ARGS_INDEX_0]);
-    int16_t startY = IntegerOf(args[ARGS_INDEX_1]);
-    int16_t endX = IntegerOf(args[ARGS_INDEX_2]);
-    int16_t endY = IntegerOf(args[ARGS_INDEX_3]);
-
-    // STROKE_STYLE: stroke rect support draw borders only
-    component->paint_.SetStyle(component->paint_.STROKE_STYLE);
-
-    Point startPoint;
-    startPoint.x = startX;
-    startPoint.y = startY;
-    component->canvas_->DrawRect(startPoint, endX, endY, component->paint_);
-    return UNDEFINED;
-}
-
-jerry_value_t CanvasComponent::CanvasFillText(const jerry_value_t func,
-                                              const jerry_value_t context,
-                                              const jerry_value_t args[],
-                                              const jerry_length_t argsNum)
-{
-    (void)func;
-    if (argsNum != ARGS_COUNT_THREE) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: the number of fillText method parameter error!");
-        return UNDEFINED;
-    }
-
-    CanvasComponent *component = static_cast<CanvasComponent *>(ComponentUtils::GetComponentFromBindingObject(context));
-    if (component == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get canvas component from js object failed!");
-        return UNDEFINED;
-    }
-
-    char *textValue = MallocStringOf(args[ARGS_INDEX_0]);
-    if (textValue == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get text value failed");
-        return UNDEFINED;
-    }
-
-    int16_t startX = IntegerOf(args[ARGS_INDEX_1]);
-    int16_t startY = IntegerOf(args[ARGS_INDEX_2]);
-    int16_t maxWidth = component->canvas_->GetWidth();
-
-    // FILL_STYLE: fillText support fill shapses only
-    component->paint_.SetStyle(component->paint_.FILL_STYLE);
-
-    Point startPoint;
-    const int8_t half = 2;
-    startPoint.x = startX;
-    startPoint.y = startY;
-
-    // if textAlign=left, not need transfer startX, if textAlign=right or center, need transfer startX
-    if (component->fontStyle_.align == TEXT_ALIGNMENT_RIGHT) {
-        startPoint.x = startX - maxWidth;
-    } else if (component->fontStyle_.align == TEXT_ALIGNMENT_CENTER) {
-        startPoint.x = (startX + startX - maxWidth) / half;
-    } else {
-        startPoint.x = startX;
-    }
-
-    component->canvas_->DrawLabel(startPoint, textValue, maxWidth, component->fontStyle_, component->paint_);
-
-    ACE_FREE(textValue);
-    return UNDEFINED;
-}
-
-void CanvasComponent::GetSubFont(const char *font, const uint8_t index, char *&subFont) const
-{
-    if (font == nullptr || *font == '\0') {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: get font attribute failed");
-        return;
-    }
-
-    if (strlen(font) >= UINT16_MAX) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: font size overflow.");
-        return;
-    }
-
-    // skip space character at the head of string.
-    while (*font != '\0') {
-        if (*font == ' ') {
-            font++;
-        } else {
-            break;
-        }
-    }
-
-    uint8_t currentIndex = 0;
-    const char *currentPos = font;
-    const char *endPos = font;
-    while (*currentPos != '\0') {
-        // find the sub font string
-        if (currentIndex == index) {
-            if (*endPos != ' ' && *endPos != '\0') {
-                endPos++;
-                continue;
-            }
-            uint16_t len = endPos - currentPos;
-            uint16_t startIndex = currentPos - font;
-            subFont = static_cast<char *>(ace_malloc(len + 1));
-            if (subFont == nullptr) {
-                HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: malloc buffer failed for subFont");
-                return;
-            }
-            errno_t error = strncpy_s(subFont, len + 1, font + startIndex, len);
-            if (error != 0) {
-                HILOG_ERROR(HILOG_MODULE_ACE, "canvas_component: copy string failed");
-                ace_free(subFont);
-                subFont = nullptr;
-                return;
-            }
-            subFont[len] = '\0';
-            break;
-        } else { // go forward to next sub font string.
-            if (*(currentPos) == ' ' && *(currentPos + 1) != ' ') {
-                currentIndex = currentIndex + 1;
-                endPos = currentPos + 1;
-            }
-            currentPos++;
-        }
-    }
-}
-
-void CanvasComponent::RegisterAttributeFunc(jerry_value_t canvas2dContext,
-                                            const char *attributeName,
-                                            jerry_external_handler_t setterHandler,
-                                            jerry_external_handler_t getterHandler)
-{
-    // register canvas js attribute setter property via the jerry_define_own_property method
-    jerry_value_t propName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(attributeName));
-    jerry_property_descriptor_t desc;
-    jerry_init_property_descriptor_fields(&desc);
-    desc.is_set_defined = true;
-    desc.setter = jerry_create_external_function(setterHandler);
-    desc.is_get_defined = true;
-    desc.getter = jerry_create_external_function(getterHandler);
-    jerry_value_t returnValue = jerry_define_own_property(canvas2dContext, propName, &desc);
-    jerry_free_property_descriptor_fields(&desc);
-    ReleaseJerryValue(propName, returnValue, VA_ARG_END_FLAG);
-}
-
-void CanvasComponent::RegisterDrawMethodFunc(jerry_value_t canvas2dContext,
-                                             const char *drawMethodName,
-                                             jerry_external_handler_t handler)
-{
-    JerrySetFuncProperty(canvas2dContext, drawMethodName, handler);
-}
-} // namespace ACELite
-} // namespace OHOS
-#endif // FEATURE_COMPONENT_CANVAS
diff --git a/src/core/components/component_utils.cpp b/src/core/components/component_utils.cpp
deleted file mode 100755
index d48c8b0..0000000
--- a/src/core/components/component_utils.cpp
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (c) 2020 Huawei Device 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.
- */
-
-#include "component_utils.h"
-#include "ace_log.h"
-#include "component.h"
-
-namespace OHOS {
-namespace ACELite {
-UIView* ComponentUtils::GetViewFromBindingObject(jerry_value_t value)
-{
-    Component* component = GetComponentFromBindingObject(value);
-    return component ? component->GetComponentRootView() : nullptr;
-}
-
-Component* ComponentUtils::GetComponentFromBindingObject(jerry_value_t value)
-{
-    if (IS_UNDEFINED(value)) {
-        return nullptr;
-    }
-
-    Component* component = nullptr;
-    bool isBinded = jerry_get_object_native_pointer(value, reinterpret_cast<void**>(&component), nullptr);
-    if (!isBinded || (component == nullptr)) {
-        return nullptr;
-    }
-    return component;
-}
-} // namespace ACELite
-} // namespace OHOS
diff --git a/src/core/components/div_component.cpp b/src/core/components/div_component.cpp
deleted file mode 100755
index 738c35f..0000000
--- a/src/core/components/div_component.cpp
+++ /dev/null
@@ -1,190 +0,0 @@
-/*
- * Copyright (c) 2020 Huawei Device 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.
- */
-
-#include "div_component.h"
-#include "ace_log.h"
-#include "key_parser.h"
-#include "keys.h"
-
-namespace OHOS {
-namespace ACELite {
-DivComponent::DivComponent(jerry_value_t options,
-                           jerry_value_t children,
-                           AppStyleManager* styleManager,
-                           const LayoutType type)
-    : Component(options, children, styleManager),
-      isSecondaryAxisAlignSet_(false),
-      combinedStyle_(nullptr),
-      nativeView_(nullptr),
-      layoutType_(FLEX)
-{
-    SetComponentName(K_DIV);
-    // get combined style for style items
-    combinedStyle_ = GetStyleManager()->GetCombinedStyle();
-    layoutType_ = type;
-}
-
-bool DivComponent::CreateNativeViews()
-{
-    if (layoutType_ == LayoutType::POSITION) {
-        nativeView_ = new UIViewGroup();
-    } else {
-        nativeView_ = new FlexLayout();
-    }
-
-    if (nativeView_ == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "div create fail");
-        return false;
-    }
-
-    return true;
-}
-
-void DivComponent::ReleaseNativeViews()
-{
-    if (nativeView_) {
-        delete nativeView_;
-        nativeView_ = nullptr;
-    }
-}
-
-inline UIView *DivComponent::GetComponentRootView() const
-{
-    return nativeView_;
-}
-
-bool DivComponent::ApplyPrivateStyle(const AppStyleItem* style)
-{
-    bool applyResult = true;
-    // set layout
-    if (layoutType_ == LayoutType::POSITION) {
-        // do nothing
-        applyResult = false;
-    } else {
-        // Set default value
-        if (!isSecondaryAxisAlignSet_) {
-            (reinterpret_cast<FlexLayout*>(nativeView_))->SetSecondaryAxisAlign(OHOS::ALIGN_START);
-        }
-        uint16_t stylePropNameId = GetStylePropNameId(style);
-        if (!KeyParser::IsKeyValid(stylePropNameId)) {
-            return false;
-        }
-        const char * const strValue = GetStyleStrValue(style);
-        if (strValue == nullptr) {
-            return false;
-        }
-        uint16_t valueId = KeyParser::ParseKeyId(strValue, GetStyleStrValueLen(style));
-        switch (stylePropNameId) {
-            case K_FLEX_DIRECTION: {
-                switch (valueId) {
-                    case K_COLUMN:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetLayoutDirection(LAYOUT_VER);
-                        break;
-                    case K_ROW:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetLayoutDirection(LAYOUT_HOR);
-                        break;
-                    case K_ROW_REVERSE:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetLayoutDirection(LAYOUT_HOR_R);
-                        break;
-                    case K_COLUMN_REVERSE:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetLayoutDirection(LAYOUT_VER_R);
-                        break;
-                    default:
-                        applyResult = false;
-                        break;
-                }
-                break;
-            }
-            case K_JUSTIFY_CONTENT: {
-                switch (valueId) {
-                    case K_FLEX_START:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetMajorAxisAlign(OHOS::ALIGN_START);
-                        break;
-                    case K_FLEX_END:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetMajorAxisAlign(OHOS::ALIGN_END);
-                        break;
-                    case K_CENTER:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetMajorAxisAlign(OHOS::ALIGN_CENTER);
-                        break;
-                    case K_SPACE_BETWEEN:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetMajorAxisAlign(OHOS::ALIGN_BETWEEN);
-                        break;
-                    case K_SPACE_AROUND:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetMajorAxisAlign(OHOS::ALIGN_EVENLY);
-                        break;
-                    default:
-                        applyResult = false;
-                        break;
-                }
-                break;
-            }
-            case K_ALIGN_ITEMS: {
-                switch (valueId) {
-                    case K_FLEX_START:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetSecondaryAxisAlign(OHOS::ALIGN_START);
-                        break;
-                    case K_FLEX_END:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetSecondaryAxisAlign(OHOS::ALIGN_END);
-                        break;
-                    case K_CENTER:
-                        (reinterpret_cast<FlexLayout*>(nativeView_))->SetSecondaryAxisAlign(OHOS::ALIGN_CENTER);
-                        break;
-                    default:
-                        applyResult = false;
-                        break;
-                }
-                if (applyResult)
-                    isSecondaryAxisAlignSet_ = true;
-                break;
-            }
-            case K_FLEX_WRAP: {
-                if (valueId == K_WRAP) {
-                    (reinterpret_cast<FlexLayout*>(nativeView_))->SetFlexWrap(FlexLayout::WRAP);
-                } else {
-                    (reinterpret_cast<FlexLayout*>(nativeView_))->SetFlexWrap(FlexLayout::NOWRAP);
-                }
-                break;
-            }
-            default:
-                applyResult = false;
-                break;
-        }
-    }
-
-    return applyResult;
-}
-
-bool DivComponent::ProcessChildren()
-{
-    if (!nativeView_) {
-        return false;
-    }
-
-    // first, add all children to this container
-    AppendChildren(nativeView_);
-    // second, layout them
-    if (layoutType_ != LayoutType::POSITION) {
-        nativeView_->LayoutChildren();
-    }
-
-    return true;
-}
-
-void DivComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
-{
-    nativeView_->LayoutChildren();
-}
-} // namespace ACELite
-} // namespace OHOS
diff --git a/src/core/components/input_component.cpp b/src/core/components/input_component.cpp
deleted file mode 100755
index 17df226..0000000
--- a/src/core/components/input_component.cpp
+++ /dev/null
@@ -1,538 +0,0 @@
-/*
- * Copyright (c) 2020 Huawei Device 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.
- */
-
-#include "input_component.h"
-#include "ace_log.h"
-#include "ace_mem_base.h"
-#include "js_app_context.h"
-#include "js_fwk_common.h"
-#include "key_parser.h"
-#include "keys.h"
-#include "ui_button.h"
-#include "font/ui_font_header.h"
-
-namespace OHOS {
-namespace ACELite {
-bool InputComponent::CreateNativeViews()
-{
-    CreateCheckboxOrRadio();
-    if ((checkbox_ == nullptr) && (radioButton_ == nullptr)) {
-        button_ = new UILabelButton();
-        if (button_ == nullptr) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "create button failed");
-            return false;
-        }
-        // set font family
-        if (!CopyFontFamily(fontFamily_, DEFAULT_FONT_FAMILY)) {
-            return false;
-        }
-        const uint8_t defaultWidth = 100;
-        const uint8_t defaultHeight = 50;
-        button_->SetWidth(defaultWidth);
-        button_->SetHeight(defaultHeight);
-        button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-        button_->SetStyle(STYLE_BACKGROUND_OPA, OPA_OPAQUE);
-        button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-        button_->SetStyle(STYLE_BACKGROUND_OPA, OPA_OPAQUE);
-    }
-    return (checkbox_ != nullptr) || (button_ != nullptr) || (radioButton_ != nullptr);
-}
-
-void InputComponent::CreateCheckboxOrRadio()
-{
-    jerry_value_t attrsPropValue = jerryx_get_property_str(options_, ATTR_ATTRS);
-    // create component according to attribute type
-    const char * const attrType = "type";
-    jerry_value_t typeValHandler = jerryx_get_property_str(attrsPropValue, attrType);
-    if (!jerry_value_is_undefined(typeValHandler)) {
-        uint16_t len = 0;
-        char *type = MallocStringOf(typeValHandler, &len);
-        uint16_t typeId = KeyParser::ParseKeyId(type, len);
-        if (typeId == K_CHECKBOX) {
-            checkbox_ = new UICheckBox();
-            if (checkbox_ == nullptr) {
-                HILOG_ERROR(HILOG_MODULE_ACE, "create checkbox failed.");
-            }
-        } else if (typeId == K_RADIO) {
-            // get the property name
-            const char * const nameAttr = "name";
-            char *name = nullptr;
-            jerry_value_t nameAttrVal = jerryx_get_property_str(attrsPropValue, nameAttr);
-            if (!jerry_value_is_undefined(nameAttrVal)) {
-                name = MallocStringOf(nameAttrVal);
-            }
-            jerry_release_value(nameAttrVal);
-            if (name == nullptr) {
-                const char * const tmpNameVal = "";
-                radioButton_ = new UIRadioButton(tmpNameVal);
-            } else {
-                radioButton_ = new UIRadioButton(name);
-            }
-            ACE_FREE(name);
-            if (radioButton_ == nullptr) {
-                HILOG_ERROR(HILOG_MODULE_ACE, "create radioButton failed");
-            }
-        }
-        ACE_FREE(type);
-    }
-    ReleaseJerryValue(typeValHandler, attrsPropValue, VA_ARG_END_FLAG);
-}
-
-void InputComponent::ReleaseNativeViews()
-{
-    if (checkbox_ != nullptr) {
-        delete checkbox_;
-        checkbox_ = nullptr;
-    }
-    if (button_ != nullptr) {
-        delete button_;
-        button_ = nullptr;
-    }
-    if (radioButton_ != nullptr) {
-        delete radioButton_;
-        radioButton_ = nullptr;
-    }
-    if (changeListener_ != nullptr) {
-        delete changeListener_;
-        changeListener_ = nullptr;
-    }
-    if (clickListener_ != nullptr) {
-        delete clickListener_;
-        clickListener_ = nullptr;
-    }
-    ACE_FREE(textValue_);
-    ACE_FREE(fontFamily_);
-    ACE_FREE(normalBackGroundImg_);
-    ACE_FREE(pressedBackGroundImg_);
-}
-bool InputComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
-{
-    switch (attrKeyId) {
-        case K_CHECKED:
-            // set the state of checkbox and radioButton
-            if ((checkbox_ != nullptr) || (radioButton_ != nullptr)) {
-                if (jerry_value_is_boolean(attrValue)) {
-                    bool checked = jerry_get_boolean_value(attrValue);
-                    UICheckBox::UICheckBoxState state =
-                        checked ? UICheckBox::UICheckBoxState::SELECTED : UICheckBox::UICheckBoxState::UNSELECTED;
-                    if (checkbox_ != nullptr) {
-                        checkbox_->SetState(state);
-                    } else {
-                        radioButton_->SetState(state);
-                    }
-                    return true;
-                } else {
-                    HILOG_ERROR(HILOG_MODULE_ACE, "the checkbox checked is error value");
-                    return false;
-                }
-            }
-            break;
-        case K_VALUE:
-            ACE_FREE(textValue_);
-            textValue_ = MallocStringOf(attrValue);
-            return true;
-        case K_NAME:
-            if (radioButton_ != nullptr) {
-                char *name = MallocStringOf(attrValue);
-                UIRadioButton *radio = static_cast<UIRadioButton *>(radioButton_);
-                if (name == nullptr) {
-                    const char * const tmpName = "";
-                    radio->SetName(tmpName);
-                } else {
-                    radio->SetName(name);
-                    ACE_FREE(name);
-                }
-                return true;
-            }
-            break;
-        default:
-            break;
-    }
-    return false;
-}
-
-bool InputComponent::RegisterPrivateEventListener(uint16_t eventTypeId, jerry_value_t funcValue)
-{
-    if (eventTypeId == K_CHANGE) {
-        if ((checkbox_ != nullptr) || (radioButton_ != nullptr)) {
-            if (checkbox_ != nullptr) {
-                changeListener_ = new StateChangeListener(funcValue, K_CHECKBOX);
-            } else {
-                changeListener_ = new StateChangeListener(funcValue, K_RADIO);
-            }
-            if (changeListener_ == nullptr) {
-                HILOG_ERROR(HILOG_MODULE_ACE, "create change listener failed");
-                return false;
-            }
-            return true;
-        }
-    } else if (eventTypeId == K_CLICK) {
-        clickListener_ = new ViewOnClickListener(funcValue, eventTypeId);
-        if (clickListener_ == nullptr) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "create click listener failed");
-            return false;
-        }
-        return true;
-    }
-    return false;
-}
-
-bool InputComponent::ApplyPrivateStyle(const AppStyleItem *style)
-{
-    if (button_ == nullptr) {
-        return HandleImage(*style);
-    }
-    bool result = true;
-    uint16_t styleKey = GetStylePropNameId(style);
-    switch (styleKey) {
-        case K_FONT_SIZE:
-            result = SetFontSize(style);
-            break;
-        case K_FONT_FAMILY:
-            if (IsStyleValueTypeString(style)) {
-                // the style would be freed after this method
-                result = CopyFontFamily(fontFamily_, GetStyleStrValue(style));
-            } else {
-                result = false;
-            }
-            break;
-        case K_TEXT_ALIGN:
-            result = SetTextAlign(style);
-            break;
-        case K_COLOR:
-            result = SetColor(*style);
-            break;
-        case K_BACKGROUND_COLOR:
-            result = SetBackgroundColor(*style);
-            break;
-        case K_BACKGROUND_IMAGE:
-            result = HandleButtonBackGroundImg(*style);
-            break;
-        case K_MARGIN: {
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetMargin(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetMargin(*button_, *style);
-            break;
-        }
-        case K_MARGIN_BOTTOM: {
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetBottomMargin(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetBottomMargin(*button_, *style);
-            break;
-        }
-        case K_MARGIN_LEFT: {
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetLeftMargin(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetLeftMargin(*button_, *style);
-            break;
-        }
-        case K_MARGIN_RIGHT: {
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetRightMargin(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetRightMargin(*button_, *style);
-            break;
-        }
-        case K_MARGIN_TOP: {
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetTopMargin(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetTopMargin(*button_, *style);
-            break;
-        }
-        case K_PADDING:
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetPadding(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetPadding(*button_, *style);
-            break;
-        case K_PADDING_BOTTOM:
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetBottomPadding(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetBottomPadding(*button_, *style);
-            break;
-        case K_PADDING_LEFT:
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetLeftPadding(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetLeftPadding(*button_, *style);
-            break;
-        case K_PADDING_RIGHT:
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetRightPadding(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetRightPadding(*button_, *style);
-            break;
-        case K_PADDING_TOP: {
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetTopPadding(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetTopPadding(*button_, *style);
-            break;
-        }
-        case K_BORDER_BOTTOM_WIDTH:
-        case K_BORDER_LEFT_WIDTH:
-        case K_BORDER_RIGHT_WIDTH:
-        case K_BORDER_TOP_WIDTH:
-        case K_BORDER_WIDTH: {
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetBorderWidth(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetBorderWidth(*button_, *style);
-            break;
-        }
-        case K_BORDER_BOTTOM_COLOR:
-        case K_BORDER_LEFT_COLOR:
-        case K_BORDER_RIGHT_COLOR:
-        case K_BORDER_TOP_COLOR:
-        case K_BORDER_COLOR: {
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetBorderColor(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetBorderColor(*button_, *style);
-            break;
-        }
-        case K_BORDER_RADIUS: {
-            button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-            SetBorderRadius(*button_, *style);
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            SetBorderRadius(*button_, *style);
-            break;
-        }
-        default:
-            result = false;
-            break;
-    }
-    return result;
-}
-
-bool InputComponent::HandleImage(const AppStyleItem &style)
-{
-    if ((checkbox_ != nullptr) || (radioButton_ != nullptr)) {
-        uint16_t styleKey = GetStylePropNameId(&style);
-        if (styleKey == K_BACKGROUND_IMAGE) {
-            return HandleButtonBackGroundImg(style);
-        }
-    }
-    return false;
-}
-
-bool InputComponent::SetBackgroundColor(const AppStyleItem &style)
-{
-    if (style.GetPseudoClassType() != PSEUDO_CLASS_ACTIVE) {
-        // let parent handle the normal state background color style,
-        // will be set for released state style of ui button
-        button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-        Component::SetBackgroundColor(*button_, style);
-        button_->SetStateForStyle(UIButton::ButtonState::RELEASED);
-        Component::SetBackgroundColor(*button_, style);
-        return true;
-    }
-    uint32_t color = 0;
-    uint8_t alpha = OPA_OPAQUE;
-    if (!GetStyleColorValue(&style, color, alpha)) {
-        return false;
-    }
-    pressedBackGroundColorValue_ = color;
-    pressedOpacityValue_ = alpha;
-    return true;
-}
-
-bool InputComponent::SetColor(const AppStyleItem &style) const
-{
-    bool result = true;
-    uint32_t color = 0;
-    uint8_t alpha = OPA_OPAQUE;
-    if (GetStyleColorValue(&style, color, alpha)) {
-        button_->SetLabelStyle(STYLE_TEXT_COLOR, GetRGBColor(color).full);
-        button_->SetLabelStyle(STYLE_TEXT_OPA, alpha);
-    } else {
-        result = false;
-    }
-    return result;
-}
-
-bool InputComponent::SetTextAlign(const AppStyleItem *style) const
-{
-    bool result = true;
-    if (IsStyleValueTypeString(style) && GetStyleStrValue(style)) {
-        uint16_t valueId = KeyParser::ParseKeyId(GetStyleStrValue(style), GetStyleStrValueLen(style));
-        switch (valueId) {
-            case K_LEFT:
-                button_->SetAlign(UITextLanguageAlignment::TEXT_ALIGNMENT_LEFT);
-                break;
-            case K_CENTER:
-                button_->SetAlign(UITextLanguageAlignment::TEXT_ALIGNMENT_CENTER);
-                break;
-            case K_RIGHT:
-                button_->SetAlign(UITextLanguageAlignment::TEXT_ALIGNMENT_RIGHT);
-                break;
-            default:
-                HILOG_ERROR(HILOG_MODULE_ACE, "the value of text-align in input component is error");
-                result = false;
-                break;
-        }
-    } else {
-        HILOG_ERROR(HILOG_MODULE_ACE, "the type of style align is error");
-        result = false;
-    }
-    return result;
-}
-
-bool InputComponent::SetFontSize(const AppStyleItem *style)
-{
-    bool result = true;
-    fontSize_ = GetStylePixelValue(style);
-    return result;
-}
-
-bool InputComponent::HandleButtonBackGroundImg(const AppStyleItem &styleItem)
-{
-    bool result = false;
-    if (styleItem.GetValueType() == STYLE_PROP_VALUE_TYPE_STRING) {
-        const char * const url = styleItem.GetStrValue();
-        char *filePath = CreatePathStrFromUrl(url);
-        if (filePath != nullptr) {
-            char *imagePath = JsAppContext::GetInstance()->GetResourcePath(filePath);
-            if (imagePath == nullptr) {
-                ace_free(filePath);
-                filePath = nullptr;
-                return result;
-            }
-#ifdef OHOS_ACELITE_PRODUCT_WATCH
-            // convert .png/jpeg/bmp to .bin subfix
-            CureImagePath(imagePath);
-#endif // OHOS_ACELITE_PRODUCT_WATCH
-            if ((styleItem.GetPseudoClassType() == PSEUDO_CLASS_ACTIVE)
-                || (styleItem.GetPseudoClassType() == PSEUDO_CLASS_CHECKED)) {
-                // in case we don't free the buffer after using
-                ACE_FREE(pressedBackGroundImg_);
-                pressedBackGroundImg_ = imagePath;
-            } else {
-                // in case we don't free the buffer after using
-                ACE_FREE(normalBackGroundImg_);
-                normalBackGroundImg_ = imagePath;
-            }
-            ace_free(filePath);
-            filePath = nullptr;
-            result = true;
-        }
-    }
-    return result;
-}
-
-void InputComponent::PostRender()
-{
-    if (button_ != nullptr) {
-        if (textValue_ != nullptr && fontFamily_ != nullptr) {
-            button_->SetFont(fontFamily_, fontSize_);
-            button_->SetText(textValue_);
-        }
-        if (clickListener_ != nullptr) {
-            button_->SetOnClickListener(clickListener_);
-        }
-        if (pressedBackGroundColorValue_ >= 0) {
-            button_->SetStateForStyle(UIButton::ButtonState::PRESSED);
-            button_->SetStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(pressedBackGroundColorValue_).full);
-            button_->SetStyle(STYLE_BACKGROUND_OPA, pressedOpacityValue_);
-        }
-        if (normalBackGroundImg_ != nullptr || pressedBackGroundImg_ != nullptr) {
-            // make sure the normal and pressed image same in case user only set one of them
-            char *normalImg = (normalBackGroundImg_ == nullptr) ? pressedBackGroundImg_ : normalBackGroundImg_;
-            char *pressedImg = (pressedBackGroundImg_ == nullptr) ? normalBackGroundImg_ : pressedBackGroundImg_;
-            button_->SetImageSrc(normalImg, pressedImg);
-        }
-    }
-    DealEvent();
-    ACE_FREE(normalBackGroundImg_);
-    ACE_FREE(pressedBackGroundImg_);
-}
-
-void InputComponent::DealEvent()
-{
-    if ((checkbox_ == nullptr) && (radioButton_ == nullptr)) {
-        return;
-    }
-    if (changeListener_ != nullptr) {
-            changeListener_->SetValue(textValue_);
-            if (checkbox_ != nullptr) {
-                checkbox_->SetOnChangeListener(changeListener_);
-            } else {
-                changeListener_->SetView(radioButton_);
-                radioButton_->SetOnChangeListener(changeListener_);
-            }
-            if (clickListener_ == nullptr) {
-                // trigger changeEvent
-                clickListener_ = new ViewOnClickListener(UNDEFINED, K_CLICK);
-                if (clickListener_ == nullptr) {
-                    HILOG_ERROR(HILOG_MODULE_ACE, "create click listener failed");
-                    return;
-                }
-            }
-        }
-        if (clickListener_ != nullptr) {
-            clickListener_->SetComponentListener(changeListener_);
-            if (checkbox_ != nullptr) {
-                checkbox_->SetOnClickListener(clickListener_);
-            } else {
-                radioButton_->SetOnClickListener(clickListener_);
-            }
-        }
-        if (normalBackGroundImg_ != nullptr || pressedBackGroundImg_ != nullptr) {
-            // make sure the normal and pressed image same in case user only set one of them
-            char *normalImg = (normalBackGroundImg_ == nullptr) ? pressedBackGroundImg_ : normalBackGroundImg_;
-            char *pressedImg = (pressedBackGroundImg_ == nullptr) ? normalBackGroundImg_ : pressedBackGroundImg_;
-            if (checkbox_ != nullptr) {
-                checkbox_->SetImages(pressedImg, normalImg);
-            } else {
-                radioButton_->SetImages(pressedImg, normalImg);
-            }
-        }
-}
-
-void InputComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
-{
-    if (!updateResult || !KeyParser::IsKeyValid(attrKeyId)) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "input component post update check args failed");
-        return;
-    }
-    if (button_ != nullptr) {
-        switch (attrKeyId) {
-            case K_VALUE:
-                if (textValue_ != nullptr) {
-                    button_->SetText(textValue_);
-                }
-                break;
-            case K_FONT_SIZE:
-            case K_FONT_FAMILY:
-                if (fontFamily_ != nullptr) {
-                    button_->SetFont(fontFamily_, fontSize_);
-                }
-                break;
-            default:
-                break;
-        }
-    }
-    if (((checkbox_ != nullptr) || (radioButton_ != nullptr)) && (changeListener_ != nullptr)
-            && (attrKeyId == K_VALUE)) {
-        changeListener_->SetValue(textValue_);
-    }
-}
-} // namespace ACELite
-} // namespace OHOS
diff --git a/src/core/components/progress_component.cpp b/src/core/components/progress_component.cpp
deleted file mode 100755
index bebb73f..0000000
--- a/src/core/components/progress_component.cpp
+++ /dev/null
@@ -1,336 +0,0 @@
-/*
- * Copyright (c) 2020 Huawei Device 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.
- */
-
-#include "progress_component.h"
-#include "ace_log.h"
-#include "ace_mem_base.h"
-#include "component.h"
-#include "key_parser.h"
-#include "keys.h"
-#include "stylemgr/app_style.h"
-#include "ui_box_progress.h"
-#include "ui_circle_progress.h"
-
-namespace OHOS {
-namespace ACELite {
-ProgressComponent::ProgressComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *styleManager)
-    : Component(options, children, styleManager),
-      options_(options),
-      progressView_(nullptr),
-      type_(HORIZONTAL),
-      hStrokeWidth_(0),
-      centerX_(INT16_MAX),
-      centerY_(INT16_MAX),
-      radius_(INT16_MAX),
-      startAngle_(DEFAULT_START_ANGLE),
-      totalAngle_(DEFAULT_TOTAL_ANGLE)
-{
-    SetComponentName(K_PROGRESS);
-}
-
-bool ProgressComponent::CreateNativeViews()
-{
-    // Step1. get progress type
-    type_ = GetType();
-    // Step2. create progress object
-    if (type_ == ARC) {
-        progressView_ = new UICircleProgress();
-
-        if (progressView_ == nullptr) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "create circle progress error");
-            return false;
-        }
-
-        // set default value
-        UICircleProgress *circleProgress = reinterpret_cast<UICircleProgress *>(progressView_);
-        circleProgress->SetBackgroundStyle(StyleDefault::GetBrightStyle());
-        const int8_t defaultLineWidth = 32;
-        circleProgress->SetBackgroundStyle(STYLE_LINE_WIDTH, defaultLineWidth); // Compatible with rich devices
-        circleProgress->SetBackgroundStyle(STYLE_LINE_CAP, CapType::CAP_ROUND);
-
-        circleProgress->SetForegroundStyle(StyleDefault::GetBrightColorStyle());
-        circleProgress->SetForegroundStyle(STYLE_BACKGROUND_OPA, 0);
-        circleProgress->SetForegroundStyle(STYLE_BORDER_OPA, 0);
-        circleProgress->SetForegroundStyle(STYLE_LINE_WIDTH, defaultLineWidth);
-        circleProgress->SetForegroundStyle(STYLE_LINE_CAP, CapType::CAP_ROUND);
-    } else {
-        progressView_ = new UIBoxProgress();
-
-        if (progressView_ == nullptr) {
-            HILOG_ERROR(HILOG_MODULE_ACE, "create horizon progress error");
-            return false;
-        }
-
-        UIBoxProgress *horizonProgress = reinterpret_cast<UIBoxProgress *>(progressView_);
-        // set default style for progress & background
-        Style progressStyle = StyleDefault::GetBrightColorStyle();
-        Style backStyle = StyleDefault::GetBrightStyle();
-        horizonProgress->SetForegroundStyle(progressStyle);
-        horizonProgress->SetBackgroundStyle(backStyle);
-
-        // set default progress self border width
-        horizonProgress->SetForegroundStyle(STYLE_BORDER_WIDTH, 0);
-        horizonProgress->SetBackgroundStyle(STYLE_BORDER_WIDTH, 0);
-        // set defaut progress stroke width & canvas width & canvas height & border width
-        hStrokeWidth_ = DEFAULT_STROKE_WIDTH;
-    }
-    return true;
-}
-
-void ProgressComponent::ReleaseNativeViews()
-{
-    if (progressView_) {
-        delete progressView_;
-        progressView_ = nullptr;
-    }
-}
-
-inline UIView *ProgressComponent::GetComponentRootView() const
-{
-    return progressView_;
-}
-
-bool ProgressComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue)
-{
-    switch (attrKeyId) {
-        case K_PERCENT: {
-            // set the specific attribute of this progress view
-            int16_t rangeMax = 100;
-            int16_t rangeMin = 0;
-            progressView_->SetRange(rangeMax, rangeMin);
-            progressView_->SetValue(IntegerOf(attrValue));
-            return true;
-        }
-        default: {
-            return false;
-        }
-    }
-}
-
-bool ProgressComponent::ApplyPrivateStyle(const AppStyleItem *style)
-{
-    bool setResult = true;
-
-    if (type_ == ARC) {
-        setResult = SetArcProgressStyle(style);
-    } else {
-        setResult = SetHorizonProgressStyle(style);
-    }
-    return setResult;
-}
-
-ProgressType ProgressComponent::GetType() const
-{
-    ProgressType pType = HORIZONTAL;
-    uint16_t len = 0;
-    char *typeValue = GetStringAttrByName(ATTR_TYPE, &len);
-    if (typeValue == nullptr) {
-        HILOG_ERROR(HILOG_MODULE_ACE, "type value is a nullptr");
-        return pType;
-    }
-    uint16_t typeValueId = KeyParser::ParseKeyId(typeValue, len);
-    if (typeValueId == K_ARC) {
-        pType = ARC;
-    }
-    ace_free(typeValue);
-    typeValue = nullptr;
-    return pType;
-}
-
-char *ProgressComponent::GetStringAttrByName(const char * const name, uint16_t *len) const
-{
-    char *strValue = nullptr;
-    jerry_value_t attrsPropValue = jerryx_get_property_str(options_, ATTR_ATTRS);
-    if (!jerry_value_is_undefined(attrsPropValue)) {
-        jerry_value_t attrPropValue = jerryx_get_property_str(attrsPropValue, name);
-        if (jerry_value_is_string(attrPropValue)) {
-            strValue = MallocStringOf(attrPropValue, len);
-        } else {
-            HILOG_ERROR(HILOG_MODULE_ACE, "progress_component: target attribute: %s, value format is error", name);
-        }
-        jerry_release_value(attrPropValue);
-    } else {
-        HILOG_INFO(HILOG_MODULE_ACE, "progress_component: target attribute: %s, not exist", name);
-    }
-    jerry_release_value(attrsPropValue);
-    return strValue;
-}
-
-void ProgressComponent::HorizonProgressPostDeal() const
-{
-    // set width & height of progress
-    UIBoxProgress *horizonProgress = reinterpret_cast<UIBoxProgress *>(progressView_);
-    if (horizonProgress->GetWidth() < 0) {
-        horizonProgress->SetValidWidth(0);
-    } else {
-        horizonProgress->SetValidWidth(horizonProgress->GetWidth());
-    }
-    horizonProgress->SetValidHeight(hStrokeWidth_);
-}
-
-void ProgressComponent::SetAngles()
-{
-    UICircleProgress *circleProgress = reinterpret_cast<UICircleProgress *>(progressView_);
-
-    if (centerX_ == INT16_MAX) {
-        centerX_ = static_cast<uint16_t>(circleProgress->GetWidth()) >> 1;
-    }
-    if (centerY_ == INT16_MAX) {
-        centerY_ = static_cast<uint16_t>(circleProgress->GetHeight()) >> 1;
-    }
-    if (radius_ == INT16_MAX) {
-        if (circleProgress->GetWidth() <= circleProgress->GetHeight()) {
-            radius_ = static_cast<uint16_t>(circleProgress->GetWidth()) >> 1;
-        } else {
-            radius_ = static_cast<uint16_t>(circleProgress->GetHeight()) >> 1;
-        }
-    }
-
-    circleProgress->SetCenterPosition(centerX_, centerY_);
-    circleProgress->SetRadius(radius_);
-    circleProgress->SetStartAngle(startAngle_);
-    circleProgress->SetEndAngle(startAngle_ + totalAngle_);
-}
-
-bool ProgressComponent::SetArcProgressStyle(const AppStyleItem *style)
-{
-    if (progressView_ == nullptr) {
-        return false;
-    }
-
-    UICircleProgress *circleProgress = reinterpret_cast<UICircleProgress *>(progressView_);
-
-    uint16_t stylePropNameId = GetStylePropNameId(style);
-
-    switch (stylePropNameId) {
-        case K_CENTER_X: {
-            centerX_ = GetStylePixelValue(style);
-            return true;
-        }
-        case K_CENTER_Y: {
-            centerY_ = GetStylePixelValue(style);
-            return true;
-        }
-        case K_RADIUS: {
-            radius_ = GetStylePixelValue(style);
-            return true;
-        }
-        case K_START_ANGLE: {
-            const int16_t minStartAngle = 0;
-            const int16_t maxStartAngle = 360;
-            startAngle_ = GetStyleDegValue(style); // Compatible with rich devices, value should between -180 and 0
-            if (startAngle_ > maxStartAngle) {
-                startAngle_ = maxStartAngle;
-            } else if (startAngle_ < minStartAngle) {
-                startAngle_ = minStartAngle;
-            }
-            return true;
-        }
-        case K_TOTAL_ANGLE: {
-            const int16_t minStartAngle = -360;
-            const int16_t maxStartAngle = 360;
-            totalAngle_ = GetStyleDegValue(style); // Compatible with rich devices, value should between 0 and 180
-            if (totalAngle_ < minStartAngle) {
-                totalAngle_ = minStartAngle;
-            } else if (totalAngle_ > maxStartAngle) {
-                totalAngle_ = maxStartAngle;
-            }
-            return true;
-        }
-        case K_COLOR: {
-            uint32_t color = 0;
-            uint8_t alpha = OPA_OPAQUE;
-            if (!GetStyleColorValue(style, color, alpha)) {
-                return false;
-            }
-            circleProgress->SetForegroundStyle(STYLE_LINE_COLOR, GetRGBColor(color).full);
-            circleProgress->SetForegroundStyle(STYLE_LINE_OPA, alpha);
-            return true;
-        }
-        case K_STROKE_WIDTH: {
-            circleProgress->SetBackgroundStyle(STYLE_LINE_WIDTH, GetStylePixelValue(style));
-            circleProgress->SetForegroundStyle(STYLE_LINE_WIDTH, GetStylePixelValue(style));
-            return true;
-        }
-        case K_BACKGROUND_COLOR: {
-            uint32_t color = 0;
-            uint8_t alpha = OPA_OPAQUE;
-            if (!GetStyleColorValue(style, color, alpha)) {
-                return false;
-            }
-            circleProgress->SetBackgroundStyle(STYLE_LINE_COLOR, GetRGBColor(color).full);
-            circleProgress->SetBackgroundStyle(STYLE_LINE_OPA, alpha);
-            return true;
-        }
-        default: {
-            return false;
-        }
-    }
-}
-
-bool ProgressComponent::SetHorizonProgressStyle(const AppStyleItem *style)
-{
-    if (progressView_ == nullptr) {
-        return false;
-    }
-
-    UIBoxProgress *horizonProgress = reinterpret_cast<UIBoxProgress *>(progressView_);
-    uint16_t stylePropNameId = GetStylePropNameId(style);
-
-    switch (stylePropNameId) {
-        // Get stroke width.
-        case K_STROKE_WIDTH: {
-            hStrokeWidth_ = GetStylePixelValue(style);
-            break;
-        }
-        // Set horizon progress style: color.
-        case K_COLOR: {
-            uint32_t color = 0;
-            uint8_t alpha = OPA_OPAQUE;
-            if (!GetStyleColorValue(style, color, alpha)) {
-                return false;
-            }
-            horizonProgress->SetForegroundStyle(STYLE_BACKGROUND_COLOR, GetRGBColor(color).full);
-            horizonProgress->SetForegroundStyle(STYLE_BACKGROUND_OPA, alpha);
-            break;
-        }
-        default: {
-            return false;
-        }
-    }
-    return true;
-}
-
-void ProgressComponent::PostRender()
-{
-    if (type_ == HORIZONTAL) {
-        HorizonProgressPostDeal();
-    } else if (type_ == ARC) {
-        SetAngles();
-    }
-}
-
-void ProgressComponent::PostUpdate(uint16_t attrKeyId, bool updateResult)
-{
-    if (type_ == HORIZONTAL) {
-        HorizonProgressPostDeal();
-    } else if (type_ == ARC) {
-        SetAngles();
-    } else {
-        // Do nothing
-    }
-}
-} // namespace ACELite
-} // namespace OHOS
diff --git a/src/core/context/BUILD.gn b/src/core/context/BUILD.gn
deleted file mode 100755
index 99dff77..0000000
--- a/src/core/context/BUILD.gn
+++ /dev/null
@@ -1,37 +0,0 @@
-#Copyright (c) 2020 Huawei Device 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.
-
-declare_args() {
-    enable_hos_ace_fafwk_test = false
-}
-
-source_set("context") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-
-    if(enable_hos_ace_fafwk_test == true) {
-        defines += ["HOS_ACE_FAFWK_TEST"]
-    }
-
-    sources = [
-        "js_ability.cpp",
-        "js_ability_impl.cpp",
-        "js_app_context.cpp",
-        "js_app_environment.cpp",
-        "js_profiler.cpp",
-        "js_timer_list.cpp",
-    ]
-    include_dirs = [
-    ]
-}
diff --git a/src/core/jsi/BUILD.gn b/src/core/jsi/BUILD.gn
deleted file mode 100755
index b8fa9cd..0000000
--- a/src/core/jsi/BUILD.gn
+++ /dev/null
@@ -1,24 +0,0 @@
-#Copyright (c) 2020 Huawei Device 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.
-
-source_set("jsi") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-    sources = [
-        "jsi.cpp",
-    ]
-    include_dirs = [
-        "internal",
-    ]
-}
diff --git a/src/core/modules/BUILD.gn b/src/core/modules/BUILD.gn
deleted file mode 100755
index bfb7aa6..0000000
--- a/src/core/modules/BUILD.gn
+++ /dev/null
@@ -1,43 +0,0 @@
-#Copyright (c) 2020 Huawei Device 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.
-
-source_set("modules") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-    sources = [
-        "module_manager.cpp",
-        "presets/console_log_impl.cpp",
-        "presets/console_module.cpp",
-        "presets/feature_ability_module.cpp",
-        "presets/preset_module.cpp",
-        "presets/profiler_module.cpp",
-        "presets/render_module.cpp",
-        "presets/require_module.cpp",
-        #"presets/jstest_module.cpp",
-        "presets/timer_module.cpp",
-        "app_module.cpp",
-        #"sample_module.cpp",
-        "router_module.cpp",
-        "presets/localization_module.cpp",
-        "presets/cjson_parser.cpp",
-    ]
-    include_dirs = [
-        "presets",
-        "maplejs",
-        "//test/lite/testservice/include",
-        "//vendor/huawei/watchgt/devkit/hal/include",
-        "//foundation/distributedschedule/interfaces/innerkits/samgr_lite/communication/mpc/transport",
-        "//foundation/distributedschedule/interfaces/innerkits/samgr_lite/communication/mpc",
-    ]
-}
diff --git a/src/core/modules/presets/cjson_parser.h b/src/core/modules/presets/cjson_parser.h
deleted file mode 100755
index 7edc2d1..0000000
--- a/src/core/modules/presets/cjson_parser.h
+++ /dev/null
@@ -1,192 +0,0 @@
-/*
- * Copyright (c) 2020 Huawei Device 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.
- */
-#ifndef OHOS_ACELITE_CJSON_PARSER_H
-#define OHOS_ACELITE_CJSON_PARSER_H
-#include "acelite_config.h"
-
-#ifdef FEATURE_LOCALIZATION_MODULE
-#include <cJSON.h>
-#include <jerryscript.h>
-#include "ace_mem_base.h"
-#include "js_app_context.h"
-#include "non_copyable.h"
-
-namespace OHOS {
-namespace ACELite {
-class CJSONParser final : public MemoryHeap {
-public:
-    ACE_DISALLOW_COPY_AND_MOVE(CJSONParser);
-    struct ListNode : public MemoryHeap {
-        char *value;
-        ListNode *next;
-    };
-
-    CJSONParser();
-
-    ~CJSONParser()
-    {
-        if (fileList_ != nullptr) {
-            ClearNode(fileList_);
-        }
-        ACE_FREE(countries_);
-        ACE_FREE(language_);
-        ACE_FREE(filePath_);
-    }
-
-    /**
-     * @breif: read the next file which matches the language-country, and then transfer the file content
-     * to json.
-     *
-     * @return if the fileList is nullptr or read the last one return false.if get the correct content return true.
-     */
-    bool ChangeJsonFile(cJSON *&currentItem);
-
-    /**
-     * @brief: replace the placeholder in result with the data defined by user
-     * if plural is true, it will replace the number in placeholder,
-     * replace the same name in js object.
-     */
-#ifdef LOCALIZATION_PLURAL
-    char *FillPlaceholder(char *format, jerry_value_t arg, jerry_length_t num, bool isPlural);
-#else
-    char *FillPlaceholder(const char *format, jerry_value_t arg, jerry_length_t num);
-#endif // LOCALIZATION_PLURAL
-
-    /**
-     * @brief:set the readIndex_ = 0; the value of index is the index where the key is defined
-     */
-    void ResetIndex();
-
-    /**
-     * @brief: get the filePath name
-     */
-    bool Init();
-
-    /**
-     * @brief: merge string destination and resource, save the merge result in destination
-     * if check is true, it will free destination string
-     */
-    char *SubStr(const char *src, size_t start, size_t length);
-
-    /**
-     * @brief: split the string by delemeter and save the split result in node
-     *
-     * @return the length of node
-     */
-    uint8_t Split(const char *target, char delemeter, ListNode *&node);
-
-    static bool AddNode(ListNode *&head, char *current);
-    static char *GetNode(ListNode *node, int index);
-    static void ClearNode(ListNode *&node);
-    static char *ToString(ListNode *node, uint8_t length);
-
-private:
-    constexpr static int maxLen_ = 26;
-    const char * const allCountries_[maxLen_] = {
-        "DEFGILMOQRSTUWXZ",
-        "ABDEFGHIJLMNORSTVWYZ",
-        "ACDFGHIKLMNORUVWXYZ",
-        "EJKMOZ",
-        "CEGHRST",
-        "IJKMOR",
-        "ABDEFGHILMNPQRSTUWY",
-        "KMNRTU",
-        "DELMNOQRST",
-        "EMOP",
-        "EGHIMNPRWYZ",
-        "ABCIKRSTUVY",
-        "ACDEFGHKLMNOPQRSTUVWXYZ",
-        "ACEFGILOPRUZ",
-        "M",
-        "AEFGHKLMNRSTWY",
-        "A",
-        "EOSUW",
-        "ABCDEGHIJKLMNORSTVXYZ",
-        "CDFGHJKLMNORTVWZ",
-        "AGMSYZ",
-        "ACEGINU",
-        "FS",
-        "",
-        "ET",
-        "AMW",
-    };
-    enum FILETYPE { COUNTRY = 0, LANG = 1, OTHERCOUNTRY = -1, ERRORCODE = -2};
-    const char *GetCountries(int8_t index);
-
-    bool GetFiles();
-    /**
-     * @brief:compare the fileName with the string language-country
-     *
-     * @return 0:the file name is language-countryXXXX.json
-     *         1:the file name is language -XXX.json
-     *         2:the file name is language-otherCountryXXX.json
-     */
-    int8_t CompareFileName(const char *name);
-    /**
-     * @Brief get the locale string and split it by ','
-     */
-    void SetLanguage();
-
-    /**
-     * @Brief: get the positon of delemeter after index
-     * @return if the index is upper than the length of string, return -1
-     * else if the index is not defined in string, return the length, else return the position of it
-     */
-    int IndexOf(const char *string, char delemeter, int index);
-
-    /**
-     * @Brief: split the string defined in value by '|', and get value in the split string
-     * For example: the string is car|cars, if the value of param is odd, assign value car,else cars
-     */
-#ifdef LOCALIZATION_PLURAL
-    char *GetPluralValue(char *value, jerry_value_t param);
-    uint8_t FormatString(const char *format, jerry_value_t arg, ListNode *&node, bool isPlural, jerry_value_t num);
-    /**
-     * @brief: get the value defined in param
-     * @param: attrName:the attrbute name in param, for example "name"
-     *         param: the object defined attrName, for example {"name":"Jane"}
-     * @return: the value in param
-     */
-    char *GetParamValue(const char *attrName, jerry_value_t param, bool isPlural);
-#else
-    uint8_t FormatString(const char *format, jerry_value_t arg, ListNode *&node, jerry_value_t num);
-    char *GetParamValue(const char *attrName, jerry_value_t param);
-#endif
-
-    /**
-     * @Brief: sort the file name alphabetical order
-     */
-    void SortFileName(ListNode *node);
-
-    void MergeList(ListNode *&destination, ListNode *source);
-
-    uint8_t curFileIndex_;  // the file index current read
-    uint8_t totalFiles_;
-    char *countries_; // the current country and origion
-    char *language_;  // the current system language
-    char leftDelemeter_;
-    char rightDelemeter_;
-    char *filePath_;
-    ListNode *fileList_;
-#if (defined(_WIN32) || defined(_WIN64))
-    bool ReadWinFile(ListNode *&languageFile, ListNode *&countryFile);
-#else
-    bool ReadFile(ListNode *&languageFile, ListNode *&countryFile);
-#endif
-};
-} // namespace ACELite
-} // namespace OHOS
-#endif // LOCALIZATION_MODULE
-#endif // OHOS_ACELITE_CJSON_PARSER_H
diff --git a/src/core/router/BUILD.gn b/src/core/router/BUILD.gn
deleted file mode 100755
index c027925..0000000
--- a/src/core/router/BUILD.gn
+++ /dev/null
@@ -1,25 +0,0 @@
-#Copyright (c) 2020 Huawei Device 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.
-
-source_set("router") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-    sources = [
-        "js_page_state_machine.cpp",
-        "js_router.cpp",
-        "js_page_state.cpp",
-    ]
-    include_dirs = [
-    ]
-}
diff --git a/src/core/stylemgr/BUILD.gn b/src/core/stylemgr/BUILD.gn
deleted file mode 100755
index 6b8002c..0000000
--- a/src/core/stylemgr/BUILD.gn
+++ /dev/null
@@ -1,27 +0,0 @@
-#Copyright (c) 2020 Huawei Device 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.
-
-source_set("stylemgr") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-    sources = [
-        "app_style_list.cpp",
-        "app_style_sheet.cpp",
-        "app_style_item.cpp",
-        "app_style_manager.cpp",
-        "app_style.cpp",
-    ]
-    include_dirs = [
-    ]
-}
diff --git a/src/core/wrapper/BUILD.gn b/src/core/wrapper/BUILD.gn
deleted file mode 100755
index f7ba3df..0000000
--- a/src/core/wrapper/BUILD.gn
+++ /dev/null
@@ -1,23 +0,0 @@
-#Copyright (c) 2020 Huawei Device 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.
-
-source_set("wrapper") {
-    configs += [
-        "//foundation/ace/lite/jsfwk:ace_config",
-    ]
-    sources = [
-        "js.cpp"
-    ]
-    include_dirs = [
-    ]
-}
diff --git a/targets/linux/acelite_config.h b/targets/linux/acelite_config.h
deleted file mode 100755
index acd76ea..0000000
--- a/targets/linux/acelite_config.h
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright (c) 2020 Huawei Device 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.
- */
-
-#ifndef OHOS_ACELITE_CONFIG_H
-#define OHOS_ACELITE_CONFIG_H
-
-/**
- * ================================================================================================
- *                 hi3516_linux config for hmf
- * ================================================================================================
- */
-#define OHOS_ACELITE_LINUX // NOTE: DO NOT use this macro directly
-
-/**
- * Compile all test entry for hmf
- */
-#ifdef FEATURE_TEST_IMPLEMENTATION
-#error "must keep the global configuration unique"
-#else
-#define FEATURE_TEST_IMPLEMENTATION
-#endif
-
-/**
- * use hi log interface to trace out
- */
-#ifdef FEATURE_ACELITE_HI_LOG_PRINTF
-#error "must keep the global configuration unique"
-#else
-#define FEATURE_ACELITE_HI_LOG_PRINTF
-#endif
-
-#define DEFAULT_PROFILER_MSG_PATH "/user/data/"
-
-#define PROFILER_ENABLE_FLAG_FILE "/user/data/profiler_enable"
-
-#define RUNTIME_MODE_FILE_PATH "/user/data/jsparser_enable"
-
-#endif // OHOS_ACELITE_CONFIG_H
-
diff --git a/test/BUILD.gn b/test/BUILD.gn
new file mode 100755
index 0000000..1cf98af
--- /dev/null
+++ b/test/BUILD.gn
@@ -0,0 +1,45 @@
+#Copyright (c) 2021 Huawei Device 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("//build/lite/config/test.gni")
+import("//foundation/ace/ace_engine_lite/test/ace_test_config.gni")
+
+cache_manager_unittest_root =
+    "$ace_lite_root/frameworks/src/core/base/cache/test/unittest"
+components_unittest_root =
+    "$ace_lite_root/frameworks/src/core/components/test/unittest"
+context_unittest_root =
+    "$ace_lite_root/frameworks/src/core/context/test/unittest"
+jsi_unittest_root = "$ace_lite_root/frameworks/src/core/jsi/test/unittest"
+modules_unittest_root =
+    "$ace_lite_root/frameworks/src/core/modules/test/unittest"
+stylemgr_unittest_root =
+    "$ace_lite_root/frameworks/src/core/stylemgr/test/unittest"
+
+# common config for all test, append extra in self gn
+config("test_common_config") {
+  include_dirs = ace_test_includes
+  configs = ace_test_configs
+  defines = ace_test_defines
+}
+
+group("unittest") {
+  deps = [
+    "$cache_manager_unittest_root:cache_manager_unittest",
+    "$components_unittest_root:components_unittest",
+    "$context_unittest_root:js_frameworks_unittest",
+    "$jsi_unittest_root:jsi_unittest",
+    "$modules_unittest_root:modules_unittest",
+    "$stylemgr_unittest_root:stylemgr_unittest",
+  ]
+}
diff --git a/test/ace_test_config.gni b/test/ace_test_config.gni
new file mode 100755
index 0000000..5e6f81a
--- /dev/null
+++ b/test/ace_test_config.gni
@@ -0,0 +1,86 @@
+#Copyright (c) 2021 Huawei Device 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("//build/lite/config/test.gni")
+
+ace_lite_root = "//foundation/ace/ace_engine_lite"
+ace_lite_builtin_root =
+    "//foundation/ace/ace_engine_lite/interfaces/innerkits/builtin"
+graphic_ui_root = "//foundation/graphic/ui"
+test_output_root = "$root_out_dir/test/unittest/jsfwk"
+
+ace_test_includes = [
+  "${aafwk_lite_path}/interfaces/kits/ability_lite",
+  "${aafwk_lite_path}/interfaces/kits/want_lite",
+  "${aafwk_lite_path}/interfaces/innerkits/abilitymgr_lite",
+  "${appexecfwk_lite_path}/interfaces/kits/bundle_lite",
+  "${appexecfwk_lite_path}/utils/bundle_lite",
+  "$graphic_ui_root/frameworks",
+  "$graphic_ui_root/interfaces/kits/animator",
+  "$graphic_ui_root/interfaces/kits/components",
+  "$graphic_ui_root/interfaces/kits/dfx",
+  "$graphic_ui_root/interfaces/kits/events",
+  "$graphic_ui_root/interfaces/kits/layout",
+  "$graphic_ui_root/interfaces/kits/themes",
+  "$graphic_ui_root/interfaces/kits/font",
+  "//foundation/multimedia/services/media_lite/camera",
+  "//foundation/multimedia/services/media_lite/camera/hal",
+  "//third_party/bounds_checking_function/include",
+  "//third_party/jerryscript/jerry-core/include",
+  "//third_party/jerryscript/jerry-ext/include/jerryscript-ext",
+  "//third_party/jerryscript/jerry-port/default/include",
+  "//third_party/cJSON",
+  "//utils/native/lite/include",
+  "$ace_lite_builtin_root/async",
+  "$ace_lite_builtin_root/base",
+  "$ace_lite_builtin_root/jsi",
+  "$ace_lite_root/frameworks/include/context",
+  "$ace_lite_root/frameworks/src/core",
+  "$ace_lite_root/frameworks/src/core/animation",
+  "$ace_lite_root/frameworks/src/core/base",
+  "$ace_lite_root/frameworks/src/core/base/cache",
+  "$ace_lite_root/frameworks/src/core/components",
+  "$ace_lite_root/frameworks/src/core/components/test/unittest/common",
+  "$ace_lite_root/frameworks/src/core/context",
+  "$ace_lite_root/frameworks/src/core/directive",
+  "$ace_lite_root/frameworks/src/core/router",
+  "$ace_lite_root/frameworks/src/core/jsi",
+  "$ace_lite_root/frameworks/src/core/modules",
+  "$ace_lite_root/frameworks/src/core/router",
+  "$ace_lite_root/frameworks/src/core/stylemgr",
+  "$ace_lite_root/frameworks/src/core/wrapper",
+  "$ace_lite_root/test/moduletest/common",
+]
+
+ace_test_configs = [ "$ace_lite_root/frameworks:ace_lite_config" ]
+
+ace_test_defines = [
+  "TDD_ASSERTIONS",
+  "__LITEOS__",
+]
+
+ace_test_deps = [
+  "${aafwk_lite_path}/frameworks/ability_lite:aafwk_abilitykit_lite",
+  "${appexecfwk_lite_path}/frameworks/bundle_lite:bundle",
+  "//foundation/ace/ace_engine_lite/frameworks:ace_lite",
+  "//foundation/communication/ipc_lite:liteipc_adapter",
+  "//foundation/distributedschedule/samgr_lite/communication/broadcast",
+  "//foundation/distributedschedule/samgr_lite/samgr:samgr",
+  "//foundation/distributedschedule/samgr_lite/samgr_client:client",
+  "//foundation/graphic/surface",
+  "//foundation/graphic/ui:lite_ui",
+  "//foundation/graphic/utils:lite_graphic_utils",
+  "//foundation/graphic/wms:lite_wms",
+  "//utils/native/lite/js/builtin:ace_utils_kits",
+  "//utils/native/lite/kv_store/src:utils_kv_store",
+]
diff --git a/test/moduletest/common/base_test.cpp b/test/moduletest/common/base_test.cpp
new file mode 100755
index 0000000..f79a8aa
--- /dev/null
+++ b/test/moduletest/common/base_test.cpp
@@ -0,0 +1,143 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#include "base_test.h"
+
+#include "js_debugger_config.h"
+
+namespace OHOS {
+namespace ACELite {
+BaseTest::BaseTest() : globObj_(0), attrsObj_(0), styleObj_(0), componentNameId_(0) {}
+
+void BaseTest::SetUp(void)
+{
+    Debugger::GetInstance().SetupJSContext();
+    jerry_init(JERRY_INIT_EMPTY);
+
+    globObj_ = jerry_get_global_object();
+    attrsObj_ = jerry_create_object();
+    JerrySetNamedProperty(globObj_, "attrs", attrsObj_);
+
+    styleObj_ = jerry_create_object();
+    JerrySetNamedProperty(globObj_, "staticStyle", styleObj_);
+    rootComponentMock_.PrepareRootContainer();
+}
+
+void BaseTest::TearDown()
+{
+    JsAppContext::GetInstance()->ReleaseStyles();
+    jerry_release_value(attrsObj_);
+    jerry_release_value(styleObj_);
+    jerry_release_value(globObj_);
+    jerry_cleanup();
+    Debugger::GetInstance().ReleaseJSContext();
+}
+
+Component *BaseTest::GetRenderedComponent(uint16_t componentKeyId) const
+{
+    jerry_value_t children = jerry_create_null();
+    Component *component = ComponentFactory::CreateComponent(componentKeyId, globObj_, children);
+    rootComponentMock_.RenderComponent(*component);
+    jerry_release_value(children);
+    return component;
+}
+
+ColorType BaseTest::GetRGBColor(int32_t colorIntValue) const
+{
+    uint32_t colorValue = colorIntValue;
+    uint8_t red8 = uint8_t((colorValue & TEXT_RED_COLOR_MASK) >> RED_COLOR_START_BIT);
+    uint8_t green8 = uint8_t((colorValue & TEXT_GREEN_COLOR_MASK) >> GREEN_COLOR_START_BIT);
+    uint8_t blue8 = uint8_t((colorValue & TEXT_BLUE_COLOR_MASK));
+    return Color::GetColorFromRGB(red8, green8, blue8);
+}
+
+void BaseTest::UpdateNumAttributeOrStyleValue(Component *component,
+                                              const char *attributeName,
+                                              const int32_t newNumValue,
+                                              const bool isToSetAttribute) const
+{
+    if (component == nullptr) {
+        HILOG_WARN(HILOG_MODULE_ACE, "UpdateNumAttributeOrStyleValue component is null\n");
+        return;
+    }
+    jerry_value_t attrName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(attributeName));
+    jerry_value_t attrValue = jerry_create_number(newNumValue);
+    if (isToSetAttribute) {
+        jerry_set_property(attrsObj_, attrName, attrValue);
+    } else {
+        jerry_set_property(styleObj_, attrName, attrValue);
+    }
+    component->UpdateView(KeyParser::ParseKeyId(attributeName), attrValue);
+    jerry_release_value(attrName);
+    jerry_release_value(attrValue);
+}
+
+void BaseTest::UpdateCharAttributeOrStyleValue(Component *component,
+                                               const char *attributeName,
+                                               const char *newCharValue,
+                                               const bool isToSetAttribute) const
+{
+    if (component == nullptr) {
+        HILOG_WARN(HILOG_MODULE_ACE, "UpdateCharAttributeOrStyleValue component is null\n");
+        return;
+    }
+    jerry_value_t attrName = jerry_create_string(reinterpret_cast<const jerry_char_t *>(attributeName));
+    jerry_value_t attrValue = jerry_create_string(reinterpret_cast<const jerry_char_t *>(newCharValue));
+    if (isToSetAttribute) {
+        jerry_set_property(attrsObj_, attrName, attrValue);
+    } else {
+        jerry_set_property(styleObj_, attrName, attrValue);
+    }
+    component->UpdateView(KeyParser::ParseKeyId(attributeName), attrValue);
+    jerry_release_value(attrName);
+    jerry_release_value(attrValue);
+}
+
+uint16_t BaseTest::SetCompnentNameId(const char *componentName)
+{
+    if (componentName == nullptr) {
+        HILOG_WARN(HILOG_MODULE_ACE, "null component name\n");
+        return K_UNKNOWN;
+    }
+    uint8_t maxLength = 9;
+    char *tarComponentName = (char *)malloc(maxLength);
+    if (tarComponentName == nullptr) {
+        HILOG_WARN(HILOG_MODULE_ACE, "alloc memory fail\n");
+        return K_UNKNOWN;
+    }
+    tarComponentName[0] = '\0';
+    bool copyRes = false;
+    if (!strcmp(componentName, "progress")) {
+        if (strcpy_s(tarComponentName, maxLength, "progress") == 0)
+            copyRes = true;
+    } else if (!strcmp(componentName, "chart")) {
+        if (strcpy_s(tarComponentName, maxLength, "chart") == 0)
+            copyRes = true;
+    } else if (!strcmp(componentName, "marquee")) {
+        if (strcpy_s(tarComponentName, maxLength, "marquee") == 0)
+            copyRes = true;
+    }
+
+    if (copyRes) {
+        componentNameId_ = KeyParser::ParseKeyId(tarComponentName, strlen(tarComponentName));
+    } else {
+        componentNameId_ = K_UNKNOWN;
+    }
+    free(tarComponentName);
+    tarComponentName = nullptr;
+    return componentNameId_;
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/test/moduletest/common/base_test.h b/test/moduletest/common/base_test.h
new file mode 100755
index 0000000..18d54d8
--- /dev/null
+++ b/test/moduletest/common/base_test.h
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_TEST_CONSTANTS_H
+#define OHOS_ACELITE_TEST_CONSTANTS_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+
+#include "component_factory.h"
+#include "js_app_environment.h"
+#include "root_component_mock.h"
+#include "root_view.h"
+#include "stylemgr/app_style_item.h"
+#include "stylemgr/app_style_manager.h"
+#include "test_common.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class BaseTest : public testing::Test {
+#else
+class BaseTest {
+#endif
+public:
+    BaseTest();
+    virtual ~BaseTest(){};
+    void SetUp();
+    void TearDown();
+
+protected:
+    jerry_value_t globObj_;
+    jerry_value_t attrsObj_;
+    jerry_value_t styleObj_;
+    uint16_t componentNameId_;
+
+    Component *GetRenderedComponent(uint16_t componentKeyId) const;
+    ColorType GetRGBColor(int32_t colorIntValue) const;
+    void UpdateNumAttributeOrStyleValue(Component *component,
+                                        const char *attributeName,
+                                        const int32_t newNumValue,
+                                        bool isToSetAttribute) const;
+    void UpdateCharAttributeOrStyleValue(Component *component,
+                                         const char *attributeName,
+                                         const char *newCharValue,
+                                         bool isToSetAttribute) const;
+    uint16_t SetCompnentNameId(const char *componentName);
+
+private:
+    RootComponentMock rootComponentMock_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_TEST_CONSTANTS_H
diff --git a/test/moduletest/common/basic_tdd_test.cpp b/test/moduletest/common/basic_tdd_test.cpp
new file mode 100755
index 0000000..803c70f
--- /dev/null
+++ b/test/moduletest/common/basic_tdd_test.cpp
@@ -0,0 +1,233 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#include "basic_tdd_test.h"
+#include <cstring>
+#include <sys/prctl.h>
+#include "common/graphic_startup.h"
+#include "common/task_manager.h"
+#include "component_utils.h"
+#include "descriptor_utils.h"
+#include "dock/screen_device_proxy.h"
+#include "event_injector.h"
+#include "js_app_context.h"
+#include "js_app_environment.h"
+#include "root_view.h"
+
+namespace OHOS {
+namespace ACELite {
+BasicTddTest::BasicTddTest() : rootComponent_(nullptr) {}
+BasicTddTest::~BasicTddTest() {}
+
+ScreenDevice *BasicTddTest::display_ = nullptr;
+Window *BasicTddTest::window_ = nullptr;
+pthread_t BasicTddTest::tickThread_ = -1;
+bool BasicTddTest::isTickTaskRunning_ = false;
+
+// 10ms a tick
+constexpr uint16_t TICK = 10000;
+constexpr uint32_t SWIPE_TIME = 100;
+
+void BasicTddTest::SetUpTestCase(void)
+{
+    GraphicStartUp::Init();
+    isTickTaskRunning_ = true;
+
+    display_ = new ScreenDevice();
+    ScreenDeviceProxy::GetInstance()->SetDevice(display_);
+    ScreenDeviceProxy::GetInstance()->SetScreenSize(HORIZONTAL_RESOLUTION, VERTICAL_RESOLUTION);
+
+    WindowConfig config = {};
+    uint16_t width = GetHorizontalResolution();
+    uint16_t height = GetVerticalResolution();
+    config.rect.SetRect(0, 0, width - 1, height - 1);
+    window_ = Window::CreateWindow(config);
+    RootView *rootView = RootView::GetInstance();
+    rootView->SetPosition(0, 0);
+    rootView->SetWidth(width);
+    rootView->SetHeight(height);
+    window_->BindRootView(rootView);
+
+    if (pthread_create(&tickThread_, nullptr, TickHandler, nullptr) == 0) {
+        HILOG_DEBUG(HILOG_MODULE_ACE, "[BasicTddTest::SetUpTestCase]: Success to fork tick thread.");
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "[BasicTddTest::SetUpTestCase]: Failed to fork tick thread.");
+    }
+}
+
+void BasicTddTest::TearDownTestCase(void)
+{
+    isTickTaskRunning_ = false;
+    if (window_ != nullptr) {
+        Window::DestoryWindow(window_);
+        window_ = nullptr;
+    }
+    if (display_ != nullptr) {
+        delete display_;
+        display_ = nullptr;
+    }
+}
+
+void BasicTddTest::SetUp()
+{
+    JsAppEnvironment::GetInstance()->InitJsFramework();
+    EventInjector *injector = EventInjector::GetInstance();
+    if (!injector->IsEventInjectorRegistered(EventDataType::POINT_TYPE)) {
+        injector->RegisterEventInjector(EventDataType::POINT_TYPE);
+    }
+    injector->SetWindowId(window_->GetWindowId());
+}
+
+void BasicTddTest::TearDown()
+{
+    JsAppEnvironment::GetInstance()->Cleanup();
+
+    EventInjector *injector = EventInjector::GetInstance();
+    if (injector->IsEventInjectorRegistered(EventDataType::POINT_TYPE)) {
+        injector->UnregisterEventInjector(EventDataType::POINT_TYPE);
+    }
+}
+
+JSValue BasicTddTest::RunJS(const char *bundle, const uint32_t size) const
+{
+    return jerry_eval(reinterpret_cast<const jerry_char_t *>(bundle), size, JERRY_PARSE_NO_OPTS);
+}
+
+JSValue BasicTddTest::CreatePage(const char *bundle, const uint32_t size)
+{
+    JSValue page = RunJS(bundle, size);
+    if (JSError::Is(page)) {
+        return JSUndefined::Create();
+    }
+    JSGlobal::Set("$root", page);
+    CallLifecycle(page, "onInit");
+    JSValue rootEl = JSObject::Call(page, "$render");
+    if (JSUndefined::Is(rootEl) || JSError::Is(rootEl)) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "[BasicTddTest::CreatePage]: Failed to render page.");
+        JSRelease(rootEl);
+        JSRelease(page);
+        return JSUndefined::Create();
+    }
+    CallLifecycle(page, "onReady");
+    rootComponent_ = ComponentUtils::GetComponentFromBindingObject(rootEl);
+    if (rootComponent_ == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "[BasicTddTest::CreatePage]: Failed to get root component.");
+        JSRelease(rootEl);
+        JSRelease(page);
+        return JSUndefined::Create();
+    }
+    uint16_t horizontalResolution = GetHorizontalResolution();
+    uint16_t verticalResolution = GetVerticalResolution();
+    ConstrainedParameter rootViewParam(horizontalResolution, verticalResolution);
+    Component::BuildViewTree(rootComponent_, nullptr, rootViewParam);
+    rootComponent_->OnViewAttached();
+    UIView *view = rootComponent_->GetComponentRootView();
+    if (view == nullptr) {
+        HILOG_ERROR(HILOG_MODULE_ACE, "[BasicTddTest::CreatePage]: Failed to get page root view.");
+        JSRelease(rootEl);
+        JSRelease(page);
+        return JSUndefined::Create();
+    }
+    RootView *rootView = RootView::GetInstance();
+    rootView->Add(view);
+    rootView->Invalidate();
+    CallLifecycle(page, "onShow");
+    return page;
+}
+
+void BasicTddTest::DestroyPage(JSValue page)
+{
+    RootView *rootView = RootView::GetInstance();
+    rootView->RemoveAll();
+    rootView->Invalidate();
+    CallLifecycle(page, "onHide");
+    CallLifecycle(page, "onDestroy");
+    ComponentUtils::ReleaseComponents(rootComponent_);
+    rootComponent_ = nullptr;
+    JsAppContext::GetInstance()->ReleaseStyles();
+    JSGlobal::Del("$root");
+    JSRelease(page);
+}
+
+void BasicTddTest::Click(int16_t x, int16_t y) const
+{
+    Point point = {x, y};
+    EventInjector *injector = EventInjector::GetInstance();
+    if (injector->SetClickEvent(point)) {
+        HILOG_DEBUG(HILOG_MODULE_ACE, "[BasicTddTest::Click]: Success to inject CLICK event on (%d, %d)\n", x, y);
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "[BasicTddTest::Click]: Failed to inject CLICK event on (%d, %d)\n", x, y);
+    }
+    // Waiting for tick breath.
+    const uint8_t count = 50;
+    usleep(count * TICK);
+}
+
+void BasicTddTest::LongPress(int16_t x, int16_t y) const
+{
+    Point point = {x, y};
+    EventInjector *injector = EventInjector::GetInstance();
+    if (injector->SetLongPressEvent(point)) {
+        HILOG_DEBUG(HILOG_MODULE_ACE, "[BasicTddTest::LongPress]: Success to inject LONGPRESS event on (%d, %d)\n", x,
+                    y);
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "[BasicTddTest::LongPress]: Failed to inject LONGPRESS event on (%d, %d)\n", x,
+                    y);
+    }
+    // Waiting for tick breath.
+    const uint8_t count = 200;
+    usleep(count * TICK);
+}
+
+void BasicTddTest::Swipe(int16_t startX, int16_t startY, int16_t endX, int16_t endY) const
+{
+    Point startPoint = {startX, startY};
+    Point endPoint = {endX, endY};
+    EventInjector *injector = EventInjector::GetInstance();
+    if (injector->SetDragEvent(startPoint, endPoint, SWIPE_TIME)) {
+        HILOG_DEBUG(HILOG_MODULE_ACE,
+                    "[BasicTddTest::Swipe]: Success to inject SWIPE event from (%d, %d) to (%d, %d)\n", startX, startY,
+                    endX, endY);
+    } else {
+        HILOG_ERROR(HILOG_MODULE_ACE, "[BasicTddTest::Swipe]: Failed to inject SWIPE from (%d, %d) to (%d, %d)\n",
+                    startX, startY, endX, endY);
+    }
+
+    // Waiting for tick breath.
+    const uint8_t count = 150;
+    usleep(count * TICK);
+}
+
+void *BasicTddTest::TickHandler(void *args)
+{
+    prctl(PR_SET_NAME, "TickTask");
+    while (isTickTaskRunning_) {
+        // Periodically call TaskHandler(). It could be done in a timer interrupt or an OS task too.
+        TaskManager::GetInstance()->TaskHandler();
+        // Just to let the system breathe
+        usleep(TICK);
+    }
+    return nullptr;
+}
+
+void BasicTddTest::CallLifecycle(JSValue page, const char *lifecycle) const
+{
+    JSValue func = JSObject::Get(page, lifecycle);
+    if (JSFunction::Is(func)) {
+        JSRelease(JSFunction::Call(func, page, nullptr, 0));
+    }
+    JSRelease(func);
+}
+} // namespace ACELite
+} // namespace OHOS
diff --git a/test/moduletest/common/basic_tdd_test.h b/test/moduletest/common/basic_tdd_test.h
new file mode 100755
index 0000000..2d7cf10
--- /dev/null
+++ b/test/moduletest/common/basic_tdd_test.h
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+#ifndef OHOS_ACELITE_BASIC_TDD_TEST_CONSTANTS_H
+#define OHOS_ACELITE_BASIC_TDD_TEST_CONSTANTS_H
+
+#ifdef TDD_ASSERTIONS
+#include <climits>
+#include <gtest/gtest.h>
+#else
+#include <typeinfo.h>
+#endif
+#include "component.h"
+#include "dock/screen_device_proxy.h"
+#include "test_common.h"
+#include "window/window.h"
+#include "wrapper/js.h"
+
+namespace OHOS {
+namespace ACELite {
+#ifdef TDD_ASSERTIONS
+using namespace std;
+using namespace testing::ext;
+class BasicTddTest : public testing::Test {
+#else
+class BasicTddTest {
+#endif
+public:
+    BasicTddTest();
+    virtual ~BasicTddTest();
+    static void SetUpTestCase(void);
+    static void TearDownTestCase(void);
+    void SetUp();
+    void TearDown();
+
+protected:
+    JSValue RunJS(const char *bundle, const uint32_t size) const;
+    JSValue CreatePage(const char *bundle, const uint32_t size);
+    void DestroyPage(JSValue page);
+    void Click(int16_t x, int16_t y) const;
+    void LongPress(int16_t x, int16_t y) const;
+    void Swipe(int16_t startX, int16_t startY, int16_t endX, int16_t endY) const;
+
+private:
+    static void *TickHandler(void *args);
+    static ScreenDevice *display_;
+    static Window *window_;
+    static pthread_t tickThread_;
+    static bool isTickTaskRunning_;
+    void CallLifecycle(JSValue page, const char *lifecycle) const;
+
+    Component *rootComponent_;
+};
+} // namespace ACELite
+} // namespace OHOS
+#endif // OHOS_ACELITE_BASIC_TDD_TEST_CONSTANTS_H
diff --git a/test/moduletest/common/test_app/ui_auto_test/.gitignore b/test/moduletest/common/test_app/ui_auto_test/.gitignore
new file mode 100644
index 0000000..a6f89c2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/.gitignore
@@ -0,0 +1 @@
+/target/
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/config.json b/test/moduletest/common/test_app/ui_auto_test/config.json
new file mode 100755
index 0000000..9a67e29
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/config.json
@@ -0,0 +1,158 @@
+{
+    "app": {
+        "bundleName": "com.company.ui_auto_test",
+        "version": {
+            "code": 1,
+            "name": "1.0.0"
+        },
+        "apiVersion": {
+            "compatible": 3,
+            "target": 3
+        }
+    },
+    "deviceConfig": {
+        "default": {}
+    },
+    "module": {
+        "description": "",
+        "deviceType": [
+            "fitnessWatch",
+            "smartVision"
+        ],
+        "distro": {
+            "deliveryWithInstall": true,
+            "moduleName": "entry",
+            "moduleType": "entry"
+        },
+        "abilities": [
+            {
+                "name": "default",
+                "icon": "res/drawable",
+                "label": "ui_auto_test",
+                "type": "page"
+            }
+        ],
+        "js": [
+            {
+                "name": "default",
+                "pages": [
+                    "pages/index/index",
+                    "pages/div/01/index",
+                    "pages/div/02/index",
+                    "pages/div/03/index",
+                    "pages/div/33/index",
+                    "pages/div/34/index",
+                    "pages/div/35/index",
+                    "pages/list/list1/index",
+                    "pages/list/list2/index",
+                    "pages/list-item/item1/index",
+                    "pages/list-item/item2/index",
+                    "pages/list-item/item3/index",
+                    "pages/list-item/item4/index",
+                    "pages/scroll/scroll1/index",
+                    "pages/scroll/scroll2/index",
+                    "pages/scroll/scroll3/index",
+                    "pages/scroll/scroll4/index",
+                    "pages/scroll/scroll5/index",
+                    "pages/scroll/scroll6/index",
+                    "pages/canvas/indexAPI/index",
+                    "pages/canvas/indexAPIAttr1/index",
+                    "pages/canvas/indexAPIAttr2/index",
+                    "pages/canvas/indexAPIDraw1/index",
+                    "pages/canvas/indexAPIDraw2/index",
+                    "pages/canvas/indexAPIPerformance/index",
+                    "pages/canvas/indexAPIScenario/index",
+                    "pages/canvas/indexAPIBeginPath/index",
+                    "pages/canvas/indexAPIRect/index",
+                    "pages/canvas/indexAPIStroke/index",
+                    "pages/canvas/indexAPIMoveTo/index",
+                    "pages/canvas/indexAPILineTo/index",
+                    "pages/canvas/indexAPIArc/index",
+                    "pages/canvas/indexAPIClosePath/index",
+                    "pages/div/35/index",
+                    "pages/div/36/index",
+                    "pages/chart/0304/index",
+                    "pages/chart/0506/index",
+                    "pages/chart/1819/index",
+                    "pages/chart/20/index",
+                    "pages/chart/21/index",
+                    "pages/chart/22/index",
+                    "pages/chart/23/index",
+                    "pages/chart/24/index",
+                    "pages/chart/25/index",
+                    "pages/chart/26/index",
+                    "pages/chart/27/index",
+                    "pages/chart/28/index",
+                    "pages/chart/29/index",
+                    "pages/chart/30/index",
+                    "pages/image/01/index",
+                    "pages/image/02/index",
+                    "pages/image/04/index",
+                    "pages/image/05/index",
+                    "pages/image-animator/01/index",
+                    "pages/arc/index",
+                    "pages/picker_view/attr006/index",
+                    "pages/picker_view/attr007/index",
+                    "pages/picker_view/attr008/index",
+                    "pages/picker_view/event001/index",
+                    "pages/picker_view/event002/index",
+                    "pages/picker_view/event003/index",
+                    "pages/picker_view/event004/index",
+                    "pages/picker_view/bind001/index",
+                    "pages/picker_view/bind002/index",
+                    "pages/picker_view/bind003/index",
+                    "pages/picker_view/bind004/index",
+                    "pages/router/01/index",
+                    "pages/router/02/index",
+                    "pages/router/03/index",
+                    "pages/router/04/index",
+                    "pages/router/page2/page2",
+                    "pages/router/page3/page3",
+                    "pages/swiper/SwiperA06/index",
+                    "pages/swiper/SwiperA15/index",
+                    "pages/swiper/SwiperA16/index",
+                    "pages/swiper/SwiperA17/index",
+                    "pages/swiper/SwiperA18/index",
+                    "pages/swiper/SwiperA20/index",
+                    "pages/swiper/SwiperC01/index",
+                    "pages/swiper/SwiperC02/index",
+                    "pages/swiper/SwiperE01/index",
+                    "pages/swiper/SwiperE02/index",
+                    "pages/swiper/SwiperE03/index",
+                    "pages/swiper/SwiperS01/index",
+                    "pages/swiper/SwiperS02/index",
+                    "pages/switch/SwitchA04/index",
+                    "pages/switch/SwitchE01/index",
+                    "pages/switch/SwitchE02/index",
+                    "pages/switch/SwitchE03/index",
+                    "pages/switch/SwitchE04/index",
+                    "pages/switch/SwitchS01/index",
+                    "pages/switch/SwitchS02/index",
+                    "pages/style/StyleBaseTest001/index",
+                    "pages/resource/resource005/index",
+                    "pages/resource/resource007/index",
+                    "pages/data-binding/01/index",
+                    "pages/data-binding/02/index",
+                    "pages/directive/01/index",
+                    "pages/directive/02/index",
+                    "pages/directive/03/index",
+                    "pages/directive/04/index",
+                    "pages/global/index",
+                    "pages/lifecycle/index",
+                    "pages/input/ButtonB023/index",
+                    "pages/input/InputEventTest024/index",
+                    "pages/input/CheckboxB025/index",
+                    "pages/input/CheckboxE026/index",
+                    "pages/input/CheckboxE027/index",
+                    "pages/input/ButtonA028/index",
+                    "pages/input/CheckboxA029/index",
+                    "pages/input/ButtonB30/index",
+                    "pages/input/RadioEventTest031/index",
+                    "pages/switch-radio-width/width_switch_value_test009/index",
+                    "pages/switch-radio-width/width_radio_value_test010/index"
+                ]
+            }
+        ],
+        "reqPermissions": []
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/app.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/app.js
new file mode 100644
index 0000000..d7175e7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/app.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+// for ui_auto_test
+export default {
+  onCreate() {
+    console.info("Application onCreate");
+  },
+  onDestroy() {
+    console.info("Application onDestroy");
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/234.jpg b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/234.jpg
new file mode 100644
index 0000000..6ebbe65
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/234.jpg differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/a3.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/a3.png
new file mode 100644
index 0000000..6ebbe65
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/a3.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/0.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/0.png
new file mode 100644
index 0000000..58918fa
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/0.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/1.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/1.png
new file mode 100644
index 0000000..110146a
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/1.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/2.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/2.png
new file mode 100644
index 0000000..4a3103f
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/2.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/3.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/3.png
new file mode 100644
index 0000000..836fc16
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/3.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/4.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/4.png
new file mode 100644
index 0000000..6c9f038
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/4.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/5.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/5.png
new file mode 100644
index 0000000..ff7fedf
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/5.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/6.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/6.png
new file mode 100644
index 0000000..ae76057
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/6.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/7.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/7.png
new file mode 100644
index 0000000..88b8aa0
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/7.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/8.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/8.png
new file mode 100644
index 0000000..f13c138
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/8.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/9.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/9.png
new file mode 100644
index 0000000..a42d909
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/asserts/numbers/9.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/goAhead.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/goAhead.png
new file mode 100644
index 0000000..92e794f
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/goAhead.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/hellopng.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/hellopng.png
new file mode 100644
index 0000000..6ebbe65
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/hellopng.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/icon.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/icon.png
new file mode 100644
index 0000000..6ebbe65
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/icon.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/chart.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/chart.js
new file mode 100644
index 0000000..7d6a6d3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/chart.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 const datasets = [
+  {
+    fillColor: "#00ff00",
+    data: [18, 55, 64, 80, 45, 29],
+    gradient: false
+  },
+  {
+    strokeColor: "#0000FF",
+    fillColor: "#00ff00",
+    data: [20, 50, 30, 35, 40, 76],
+    gradient: false
+  }
+];
+export const xAxis = {
+  min: 0,
+  max: 100,
+  axisTick: 6,
+  display: true,
+  color: "#00ff00"
+};
+export const yAxis = {
+  min: 0,
+  max: 100,
+  axisTick: 10,
+  display: true,
+  color: "#ff0000"
+};
+export const appendDataFunc = function() {
+  return {
+    serial: 1,
+    data: [50, 70, 90, 65, 50, 10, 50]
+  };
+};
+export const datasetsFor232426 = [
+  {
+    fillColor: "#00ff00",
+    data: [212, 250, 400, 150, 350, 212],
+    gradient: false
+  },
+  {
+    strokeColor: "#0000FF",
+    fillColor: "#00ff00",
+    data: [100, 300, 178, 205, 401, 126],
+    gradient: false
+  }
+];
+export const datasetsFor272829 = [
+  {
+    fillColor: "#00ff00",
+    data: [212, 250, 400, 150, 350, 212, 300, 222, 190],
+    gradient: false
+  },
+  {
+    strokeColor: "#0000FF",
+    fillColor: "#FFE793",
+    data: [100, 300, 178, 50, 401, 126, 600, 80],
+    gradient: false
+  }
+];
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/general.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/general.js
new file mode 100644
index 0000000..a69a381
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/general.js
@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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";
+export const routePage = function(prevUri, nextUri) {
+  return {
+    changePrev() {
+      router.replace({
+        uri: prevUri
+      });
+    },
+    backMain() {
+      router.replace({
+        uri: "pages/index/index"
+      });
+    },
+    changeNext() {
+      router.replace({
+        uri: nextUri
+      });
+    }
+  };
+};
+export const goPage = function(prevUri, nextUri) {
+  return {
+    goPrevious: function() {
+      router.replace({ uri: prevUri });
+    },
+    goHome: function() {
+      router.replace({ uri: "/" });
+    },
+    goNext: function() {
+      router.replace({ uri: nextUri });
+    }
+  };
+};
+export const alterPage = function(prevUri, nextUri) {
+  return {
+    backMain() {
+      router.replace({ uri: "pages/index/index" });
+    },
+    prePage() {
+      router.replace({ uri: prevUri });
+    },
+    nextPage() {
+      router.replace({ uri: nextUri });
+    }
+  };
+};
+export const routeSimplePage = function(page) {
+  return function changePage() {
+    router.replace({ uri: page });
+  }
+    ;
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/list.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/list.js
new file mode 100755
index 0000000..8325575
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/list.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 const setResource = function() {
+  for (var i = 0; i < 50; i++) {
+    this.listData.push("common/left.png");
+    this.listData.push("common/right.png");
+    this.listData.push("common/music_prev.png");
+    this.listData.push("common/music_next.png");
+    this.listData.push("common/music_play.png");
+    this.listData.push("common/goAhead.png");
+  }
+};
+export const listData = [
+  "common/left.png",
+  "common/right.png",
+  "common/music_prev.png",
+  "common/music_next.png",
+  "common/music_play.png",
+  "common/goAhead.png"
+];
+export const textData = ["Item0", "Item1", "Item2", "Item3"];
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/picker_view.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/picker_view.js
new file mode 100644
index 0000000..7df3cfc
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/js/picker_view.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 const lifeCycleFunc = function() {
+  return {
+    onInit: function() {
+      console.log("onInit called...");
+    },
+    onDestroy: function() {
+      console.log("onDestroy called...");
+    },
+    onReady: function() {
+      console.log("onReady called...");
+    },
+    onShow: function() {
+      console.log("onShow called...");
+    }
+  };
+};
+export const getText = function(e) {
+  console.log("getText called: new selected=" + e.newSelected);
+  this.textValue = e.newValue;
+};
+export const getTime = function(e) {
+  console.log("getTime called:hour=" + e.hour + " minute=" + e.minute);
+  this.textValue = e.hour + ":" + e.minute;
+};
+export const data = {
+  textValue: "time",
+  rangeList: ["Aa", "Bb", "Cc", "Dd", "Ee", "Ff", "Gg", "Hh", "Ii"]
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/left.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/left.png
new file mode 100644
index 0000000..ea923f5
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/left.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/leftHead.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/leftHead.png
new file mode 100644
index 0000000..8254866
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/leftHead.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/music_next.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/music_next.png
new file mode 100644
index 0000000..93ced91
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/music_next.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/music_play.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/music_play.png
new file mode 100644
index 0000000..362b671
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/music_play.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/music_prev.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/music_prev.png
new file mode 100644
index 0000000..6101ca4
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/music_prev.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/nextRow.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/nextRow.png
new file mode 100644
index 0000000..c4bc654
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/nextRow.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/preRow.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/preRow.png
new file mode 100644
index 0000000..c9bf0b5
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/preRow.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/right.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/right.png
new file mode 100644
index 0000000..0b6229a
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/right.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/test.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/test.png
new file mode 100644
index 0000000..6ebbe65
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/test.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/xinlvBg.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/xinlvBg.png
new file mode 100644
index 0000000..bb615ed
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/xinlvBg.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/xinlvMargin.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/xinlvMargin.png
new file mode 100644
index 0000000..5d96979
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/common/xinlvMargin.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/arc/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/arc/index.css
new file mode 100644
index 0000000..b8726ff
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/arc/index.css
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/arc/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/arc/index.hml
new file mode 100644
index 0000000..0f51f13
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/arc/index.hml
@@ -0,0 +1,38 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+        <text style="width:60px;height:80px;text-overflow:ellipsis">arc</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <stack style="width:454px;height:220px;">
+            <progress
+                id="process"
+                type="arc"
+                percent="{{progress}}"
+                onlongpress="longPressTest"
+                style="width:220px;height:220px;center-x: 110px;center-y: 110px;radius: 110px; start-angle: 90deg;
+                total-angle: -90deg;color: #dc143c;stroke-width: 5px;left: 116px;background-color:#007ACC"/>
+            <text style="left:200px;top:90px;width:100px;height:50px;" onclick="updateProgress"
+                >{{text}}</text
+            >
+        </stack>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/arc/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/arc/index.js
new file mode 100644
index 0000000..6cf52cb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/arc/index.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../common/js/general"
+var progresses = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+export default {
+  data: {
+    text: 100,
+    progress: 100,
+    index: 0
+  },
+  updateProgress() {
+    this.progress = progresses[this.index % 10];
+    this.text = this.progress;
+    this.index++;
+  },
+  onInit() {
+    console.log("init called...");
+  },
+  longPressTest: function() {
+    console.log("long press trigger");
+  },
+  ...routePage('pages/index/index', 'pages/index/index')
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPI/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPI/index.css
new file mode 100644
index 0000000..d8bffb9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPI/index.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 200px;
+  margin-top: 0px;
+}
+
+.buttonContainerStyle {
+  width: 454px;
+  height: 80px;
+}
+
+.buttonStyle {
+  width: 200px;
+  height: 60px;
+  margin-left: 130px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPI/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPI/index.hml
new file mode 100755
index 0000000..4786755
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPI/index.hml
@@ -0,0 +1,59 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+      <input type = "button" style="margin-left:130px;width:200px;height:60px;" onclick = "goHome" value = "返回首页"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle"> API </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+        <input type="button" class="buttonStyle" value="属性接口1" onclick="changePage1"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+        <input type="button" class="buttonStyle" value="属性接口2" onclick="changePage2"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+        <input type="button" class="buttonStyle" value="绘图接口1" onclick="changePage3"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+        <input type="button" class="buttonStyle" value="绘图接口2" onclick="changePage4"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+        <input type="button" class="buttonStyle" value="性能测试" onclick="changePage5"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+        <input type="button" class="buttonStyle" value="SR场景用例" onclick="changePage6"/>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPI/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPI/index.js
new file mode 100755
index 0000000..9451e2f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPI/index.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { goPage, routeSimplePage } from "../../../common/js/general";
+export default {
+  ...goPage("pages/index/index"),
+  changePage1: routeSimplePage("pages/canvas/indexAPIAttr1/index"),
+  changePage2: routeSimplePage("pages/canvas/indexAPIAttr2/index"),
+  changePage3: routeSimplePage("pages/canvas/indexAPIDraw1/index"),
+  changePage4: routeSimplePage("pages/canvas/indexAPIDraw2/index"),
+  changePage5: routeSimplePage("pages/canvas/indexAPIPerformance/index"),
+  changePage6: routeSimplePage("pages/canvas/indexAPIScenario/index")
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIArc/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIArc/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIArc/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIArc/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIArc/index.hml
new file mode 100644
index 0000000..c76a4ea
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIArc/index.hml
@@ -0,0 +1,138 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test001" onclick="arc001Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test002" onclick="arc002Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test003" onclick="arc003Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas4" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test004" onclick="arc004Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas5" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test005" onclick="arc005Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas6" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test006" onclick="arc006Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas7" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test007" onclick="arc007Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas8" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test008" onclick="arc008Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas9" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test009" onclick="arc009Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas10" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test010" onclick="arc010Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas11" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test011" onclick="arc011Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas12" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test012" onclick="arc012Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas13" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="arc_Test013" onclick="arc013Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIArc/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIArc/index.js
new file mode 100644
index 0000000..186e63d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIArc/index.js
@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPIDraw2/index"),
+    arc001Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+    },
+    arc002Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(32768,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+    },
+    arc003Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,-32769,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+    },
+    arc004Func: function () {
+        var canvasRef = this.$refs.canvas4;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,32768,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+    },
+    arc005Func: function () {
+        var canvasRef = this.$refs.canvas5;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(32768/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+    },
+    arc006Func: function () {
+        var canvasRef = this.$refs.canvas6;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(-32769/360),false);
+        ctx.stroke();
+    },
+    arc007Func: function () {
+        var canvasRef = this.$refs.canvas7;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360));
+        ctx.stroke();
+    },
+    arc008Func: function () {
+        var canvasRef = this.$refs.canvas8;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+    },
+    arc009Func: function () {
+        var canvasRef = this.$refs.canvas9;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),true);
+        ctx.stroke();
+    },
+    arc010Func: function () {
+        var canvasRef = this.$refs.canvas10;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(100,70,50,Math.PI*2*(10/360),Math.PI*2*(1000/360),false);
+        ctx.lineTo(100,100);
+        ctx.stroke();
+    },
+    arc011Func: function () {
+        var canvasRef = this.$refs.canvas11;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(100,70,50,Math.PI*2*(32412/360),Math.PI*2*(32052/360),false);
+        ctx.lineTo(100,100);
+        ctx.stroke();
+    },
+    arc012Func: function () {
+        var canvasRef = this.$refs.canvas12;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(100,70,50,Math.PI*2*(1000/360),Math.PI*2*(10/360),true);
+        ctx.lineTo(100,100);
+        ctx.stroke();
+    },
+    arc013Func: function () {
+        var canvasRef = this.$refs.canvas13;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(100,70,50,Math.PI*2*(-32412/360),Math.PI*2*(-32052/360),true);
+        ctx.lineTo(100,100);
+        ctx.stroke();
+    }
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr1/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr1/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr1/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr1/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr1/index.hml
new file mode 100644
index 0000000..a865433
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr1/index.hml
@@ -0,0 +1,106 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas属性接口1
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas1" ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="fillStyle=#000000" onclick="fillStyle1Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas2" ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="fillStyle=#FFFFFF" onclick="fillStyle2Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas3" ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="fillStyle=abcdef" onclick="fillStyle3Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas4" ref="canvas4" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="strokeStyle=#000000" onclick="strokeStyle1Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas5" ref="canvas5" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="strokeStyle=#FFFFFF" onclick="strokeStyle2Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas6" ref="canvas6" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="strokeStyle=#ghijkl" onclick="strokeStyle3Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas7" ref="canvas7" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="lineWidth=-32768" onclick="lineWidth1Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas8" ref="canvas8" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="lineWidth=32767" onclick="lineWidth2Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas9" ref="canvas9" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="lineWidth=abcdef" onclick="lineWidth3Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr1/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr1/index.js
new file mode 100644
index 0000000..4c4fd53
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr1/index.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPI/index"),
+    fillStyle1Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(20,20,100,150);
+    },
+    fillStyle2Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.fillStyle = "#FFFFFF";
+        ctx.fillRect(20,20,100,150);
+    },
+    fillStyle3Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.fillStyle = "abcdef";
+        ctx.fillRect(20,20,100,150);
+    },
+    strokeStyle1Func: function () {
+        var canvasRef = this.$refs.canvas4;
+        var ctx = canvasRef.getContext("2d");
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(20,20,100,150);
+    },
+    strokeStyle2Func: function () {
+        var canvasRef = this.$refs.canvas5;
+        var ctx = canvasRef.getContext("2d");
+        ctx.fillStyle = "#FFFFFF";
+        ctx.fillRect(20,20,100,150);
+    },
+    strokeStyle3Func: function () {
+        var canvasRef = this.$refs.canvas6;
+        var ctx = canvasRef.getContext("2d");
+        ctx.fillStyle = "#ghijkl";
+        ctx.fillRect(20,20,100,150);
+    },
+    lineWidth1Func: function () {
+        var canvasRef = this.$refs.canvas7;
+        var ctx = canvasRef.getContext("2d");
+        ctx.strokeStyle = "#ff0000";
+        ctx.lineWidth = "-32768";
+        ctx.strokeRect(20,20,100,150);
+    },
+    lineWidth2Func: function () {
+        var canvasRef = this.$refs.canvas8;
+        var ctx = canvasRef.getContext("2d");
+        ctx.strokeStyle = "#ff0000";
+        ctx.lineWidth = "32767";
+        ctx.strokeRect(0,0,100,100);
+    },
+    lineWidth3Func: function () {
+        var canvasRef = this.$refs.canvas9;
+        var ctx = canvasRef.getContext("2d");
+        ctx.strokeStyle = "#ff0000";
+        ctx.lineWidth = "abcdef";
+        ctx.strokeRect(0,0,100,100);
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr2/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr2/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr2/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr2/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr2/index.hml
new file mode 100644
index 0000000..9ff8847
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr2/index.hml
@@ -0,0 +1,90 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas属性接口2
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas1" ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="font=30px" onclick="font1Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas2" ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="font=38px" onclick="font2Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas3" ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="font=0px" onclick="font3Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas4" ref="canvas4" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="font=255px" onclick="font4Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas5" ref="canvas5" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="font=abcpx" onclick="font5Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas6" ref="canvas6" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="font=30px abcd" onclick="font6Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas id="canvas7" ref="canvas7" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:120px;" value="textAlign=abcd" onclick="font7Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr2/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr2/index.js
new file mode 100755
index 0000000..589b15c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIAttr2/index.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPI/index"),
+    font1Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.font = "30px";
+        ctx.fillText("Hello JS", 10, 50);
+    },
+    font2Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.font = "38px";
+        ctx.fillText("Hello JS", 10, 50);
+    },
+    font3Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.font = "0px";
+        ctx.fillText("Hello JS", 10, 50);
+    },
+    font4Func: function () {
+        var canvasRef = this.$refs.canvas4;
+        var ctx = canvasRef.getContext("2d");
+        ctx.font = "255px";
+        ctx.fillText("Hello JS", 10, 50);
+    },
+    font5Func: function () {
+        var canvasRef = this.$refs.canvas5;
+        var ctx = canvasRef.getContext("2d");
+        ctx.font = "abcpx";
+        ctx.fillText("Hello JS", 10, 50);
+    },
+    font6Func: function () {
+        var canvasRef = this.$refs.canvas6;
+        var ctx = canvasRef.getContext("2d");
+        ctx.font = "30px abcd";
+        ctx.fillText("Hello JS", 10, 50);
+    },
+    font7Func: function () {
+        var canvasRef = this.$refs.canvas7;
+        var ctx = canvasRef.getContext("2d");
+        ctx.font = "30px SourceHanSansSC-Regular";
+        ctx.textAlign = "abcd";
+        ctx.fillText("Hello JS", 10, 50);
+    }
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIBeginPath/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIBeginPath/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIBeginPath/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIBeginPath/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIBeginPath/index.hml
new file mode 100644
index 0000000..ee5e721
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIBeginPath/index.hml
@@ -0,0 +1,170 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test001" onclick="beginPath001Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test002" onclick="beginPath002Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test003" onclick="beginPath003Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas4" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test004" onclick="beginPath004Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas5" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test005" onclick="beginPath005Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas6" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test006" onclick="beginPath006Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas7" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test007" onclick="beginPath007Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas8" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test008" onclick="beginPath008Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas9" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test009" onclick="beginPath009Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas10" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test010" onclick="beginPath010Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas11" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test011" onclick="beginPath011Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas12" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test012" onclick="beginPath012Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas13" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test013" onclick="beginPath013Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas14" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test014" onclick="beginPath014Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas15" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test015" onclick="beginPath015Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas16" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test016" onclick="beginPath016Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas17" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="beginPath_Test017" onclick="beginPath017Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIBeginPath/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIBeginPath/index.js
new file mode 100644
index 0000000..d79c62e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIBeginPath/index.js
@@ -0,0 +1,167 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPIDraw2/index"),
+    beginPath001Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.rect(10,10,50,50);
+        ctx.rect(70,70,30,30);
+        ctx.stroke();
+    },
+    beginPath002Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.rect(10,10,50,50);
+        ctx.moveTo(70,10);
+        ctx.lineTo(80,60);
+        ctx.stroke();
+    },
+    beginPath003Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.rect(10,10,50,50);
+        ctx.lineTo(80,60);
+        ctx.stroke();
+    },
+    beginPath004Func: function () {
+        var canvasRef = this.$refs.canvas4;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.rect(10,10,50,50);
+        ctx.arc(100,50,50,Math.PI*2*(30/360),Math.PI*2*(150/360),false);
+        ctx.stroke();
+    },
+    beginPath005Func: function () {
+        var canvasRef = this.$refs.canvas5;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,50);
+        ctx.moveTo(20,10);
+        ctx.lineTo(100,50);
+        ctx.stroke();
+    },
+    beginPath006Func: function () {
+        var canvasRef = this.$refs.canvas6;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,50);
+        ctx.rect(20,10,50,50);
+        ctx.stroke();
+    },
+    beginPath007Func: function () {
+        var canvasRef = this.$refs.canvas7;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,50);
+        ctx.arc(100,50,50,Math.PI*2*(30/360),Math.PI*2*(150/360),false);
+        ctx.stroke();
+    },
+    beginPath008Func: function () {
+        var canvasRef = this.$refs.canvas8;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.arc(100,50,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.stroke();
+    },
+    beginPath009Func: function () {
+        var canvasRef = this.$refs.canvas9;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.moveTo(20,10);
+        ctx.lineTo(100,10);
+        ctx.stroke();
+    },
+    beginPath010Func: function () {
+        var canvasRef = this.$refs.canvas10;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.lineTo(50,10);
+        ctx.stroke();
+    },
+    beginPath011Func: function () {
+        var canvasRef = this.$refs.canvas11;
+        var ctx = canvasRef.getContext("2d");
+        ctx.beginPath();
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.rect(10,10,50,50);
+        ctx.stroke();
+    },
+    beginPath012Func: function () {
+        var canvasRef = this.$refs.canvas12;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.lineTo(80,60);
+        ctx.stroke();
+    },
+    beginPath013Func: function () {
+        var canvasRef = this.$refs.canvas13;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(100,50,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.stroke();
+    },
+    beginPath014Func: function () {
+        var canvasRef = this.$refs.canvas14;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,50);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(100,50,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.stroke();
+    },
+    beginPath015Func: function () {
+        var canvasRef = this.$refs.canvas15;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(100,40,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.stroke();
+    },
+    beginPath016Func: function () {
+        var canvasRef = this.$refs.canvas16;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.lineTo(50,10);
+        ctx.stroke();
+    },
+    beginPath017Func: function () {
+        var canvasRef = this.$refs.canvas17;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.arc(100,50,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.stroke();
+        ctx.beginPath();
+    }
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIClosePath/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIClosePath/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIClosePath/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIClosePath/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIClosePath/index.hml
new file mode 100644
index 0000000..ef4aafd
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIClosePath/index.hml
@@ -0,0 +1,194 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test001" onclick="closePath001Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test002" onclick="closePath002Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test003" onclick="closePath003Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas4" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test004" onclick="closePath004Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas5" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test005" onclick="closePath005Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas6" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test006" onclick="closePath006Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas7" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test007" onclick="closePath007Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas8" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test008" onclick="closePath008Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas9" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test009" onclick="closePath009Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas10" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test010" onclick="closePath010Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas11" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test011" onclick="closePath011Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas12" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test012" onclick="closePath012Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas13" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test013" onclick="closePath013Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas14" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test014" onclick="closePath014Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas15" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test015" onclick="closePath015Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas16" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test016" onclick="closePath016Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas17" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test017" onclick="closePath017Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas18" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test018" onclick="closePath018Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas19" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test019" onclick="closePath019Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas20" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="closePath_Test020" onclick="closePath020Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIClosePath/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIClosePath/index.js
new file mode 100644
index 0000000..3598bbb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIClosePath/index.js
@@ -0,0 +1,189 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPIDraw2/index"),
+    closePath001Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.closePath();
+        ctx.rect(10,10,50,50);
+        ctx.rect(70,70,30,30);
+        ctx.stroke();
+    },
+    closePath002Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.closePath();
+        ctx.rect(10,10,50,50);
+        ctx.moveTo(70,10);
+        ctx.lineTo(80,60);
+        ctx.stroke();
+    },
+    closePath003Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.closePath();
+        ctx.rect(10,10,50,50);
+        ctx.lineTo(80,60);
+        ctx.lineTo(100,60);
+        ctx.stroke();
+    },
+    closePath004Func: function () {
+        var canvasRef = this.$refs.canvas4;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.closePath();
+        ctx.lineTo(80,60);
+        ctx.lineTo(100,60);
+        ctx.stroke();
+    },
+    closePath005Func: function () {
+        var canvasRef = this.$refs.canvas5;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(80,60);
+        ctx.lineTo(80,100);
+        ctx.closePath();
+        ctx.lineTo(100,60);
+        ctx.stroke();
+    },
+    closePath006Func: function () {
+        var canvasRef = this.$refs.canvas6;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.closePath();
+        ctx.moveTo(70,10);
+        ctx.lineTo(80,60);
+        ctx.stroke();
+    },
+    closePath007Func: function () {
+        var canvasRef = this.$refs.canvas7;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.closePath();
+        ctx.lineTo(80,60);
+        ctx.stroke();
+    },
+    closePath008Func: function () {
+        var canvasRef = this.$refs.canvas8;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.closePath();
+        ctx.arc(100,100,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.stroke();
+    },
+    closePath009Func: function () {
+        var canvasRef = this.$refs.canvas9;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,50);
+        ctx.closePath();
+        ctx.arc(100,100,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.stroke();
+    },
+    closePath010Func: function () {
+        var canvasRef = this.$refs.canvas10;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.closePath();
+        ctx.arc(150,70,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.stroke();
+    },
+    closePath011Func: function () {
+        var canvasRef = this.$refs.canvas11;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.closePath();
+        ctx.lineTo(50,10);
+        ctx.stroke();
+    },
+    closePath012Func: function () {
+        var canvasRef = this.$refs.canvas12;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(80,60);
+        ctx.closePath();
+        ctx.stroke();
+    },
+    closePath013Func: function () {
+        var canvasRef = this.$refs.canvas13;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(80,60);
+        ctx.lineTo(100,60);
+        ctx.closePath();
+        ctx.stroke();
+    },
+    closePath014Func: function () {
+        var canvasRef = this.$refs.canvas14;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.moveTo(70,10);
+        ctx.lineTo(80,60);
+        ctx.closePath();
+        ctx.stroke();
+    },
+    closePath015Func: function () {
+        var canvasRef = this.$refs.canvas15;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.lineTo(80,60);
+        ctx.closePath();
+        ctx.stroke();
+    },
+    closePath016Func: function () {
+        var canvasRef = this.$refs.canvas16;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.arc(120,70,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.closePath();
+        ctx.stroke();
+    },
+    closePath017Func: function () {
+        var canvasRef = this.$refs.canvas17;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,50);
+        ctx.arc(120,70,50,Math.PI*2*(30/360),Math.PI*2*(150/360),false);
+        ctx.closePath();
+        ctx.stroke();
+    },
+    closePath018Func: function () {
+        var canvasRef = this.$refs.canvas18;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.arc(150,70,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+        ctx.closePath();
+        ctx.stroke();
+    },
+    closePath019Func: function () {
+        var canvasRef = this.$refs.canvas19;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.lineTo(50,10);
+        ctx.closePath();
+        ctx.stroke();
+    },
+    closePath020Func: function () {
+        var canvasRef = this.$refs.canvas20;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.arc(150,70,50,Math.PI*2*(30/360),Math.PI*2*(150/360),false);
+        ctx.closePath();
+        ctx.stroke();
+    }
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw1/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw1/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw1/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw1/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw1/index.hml
new file mode 100644
index 0000000..8346f9a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw1/index.hml
@@ -0,0 +1,82 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:60px;" value="fillRect参数越界" onclick="fillRect1Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:60px;" value="fillRect参数个数错误" onclick="fillRect2Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:60px;" value="strokeRect参数越界" onclick="strokeRect1Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas4" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:60px;" value="strokeRect参数个数错误" onclick="strokeRect2Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas5" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:60px;" value="fillText参数越界" onclick="fillText1Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas6" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:60px;" value="fillText参数个数错误" onclick="fillText2Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw1/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw1/index.js
new file mode 100644
index 0000000..8fa7e1d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw1/index.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPI/index"),
+    fillRect1Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.fillRect(-32769,32768,-32769,32768);
+    },
+    fillRect2Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.fillRect(10,10);
+    },
+    strokeRect1Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.strokeRect(-32769,32768,-32769,32768);
+    },
+    strokeRect2Func: function () {
+        var canvasRef = this.$refs.canvas4;
+        var ctx = canvasRef.getContext("2d");
+        ctx.strokeRect(10,10);
+    },
+    fillText1Func: function () {
+        var canvasRef = this.$refs.canvas5;
+        var ctx = canvasRef.getContext("2d");
+        ctx.font = "30px SourceHanSansSC-Regular";
+        ctx.fillText("Hello JS", -32769, 32768);
+    },
+    fillText2Func: function () {
+        var canvasRef = this.$refs.canvas6;
+        var ctx = canvasRef.getContext("2d");
+        ctx.font = "30px SourceHanSansSC-Regular";
+        ctx.fillText("Hello JS");
+    }
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw2/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw2/index.css
new file mode 100644
index 0000000..d8bffb9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw2/index.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 200px;
+  margin-top: 0px;
+}
+
+.buttonContainerStyle {
+  width: 454px;
+  height: 80px;
+}
+
+.buttonStyle {
+  width: 200px;
+  height: 60px;
+  margin-left: 130px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw2/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw2/index.hml
new file mode 100644
index 0000000..43e111a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw2/index.hml
@@ -0,0 +1,67 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+      <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick=backMain>
+      </input>
+      <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick=changePrev>
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+      <text class="titleTextStyle"> API </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+      <input type="button" class="buttonStyle" value="beginPath" onclick="changePage1"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+      <input type="button" class="buttonStyle" value="rect" onclick="changePage2"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+      <input type="button" class="buttonStyle" value="stroke" onclick="changePage3"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+      <input type="button" class="buttonStyle" value="moveTo" onclick="changePage4"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+      <input type="button" class="buttonStyle" value="lineTo" onclick="changePage5"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+      <input type="button" class="buttonStyle" value="arc" onclick="changePage6"/>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="buttonContainerStyle">
+      <input type="button" class="buttonStyle" value="closePath" onclick="changePage7"/>
+    </list-item>
+  </list>
+</stack>
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw2/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw2/index.js
new file mode 100644
index 0000000..76270d0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIDraw2/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage, routeSimplePage } from "../../../common/js/general";
+export default {
+  ...routePage("pages/index/index"),
+  changePage1: routeSimplePage("pages/canvas/indexAPIBeginPath/index"),
+  changePage2: routeSimplePage("pages/canvas/indexAPIRect/index"),
+  changePage3: routeSimplePage("pages/canvas/indexAPIStroke/index"),
+  changePage4: routeSimplePage("pages/canvas/indexAPIMoveTo/index"),
+  changePage5: routeSimplePage("pages/canvas/indexAPILineTo/index"),
+  changePage6: routeSimplePage("pages/canvas/indexAPIArc/index"),
+  changePage7: routeSimplePage("pages/canvas/indexAPIClosePath/index")
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPILineTo/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPILineTo/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPILineTo/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPILineTo/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPILineTo/index.hml
new file mode 100644
index 0000000..132a9b8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPILineTo/index.hml
@@ -0,0 +1,58 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="lineTo_Test001" onclick="lineTo001Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="lineTo_Test002" onclick="lineTo002Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="lineTo_Test003" onclick="lineTo003Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPILineTo/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPILineTo/index.js
new file mode 100644
index 0000000..a8569f3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPILineTo/index.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPIDraw2/index"),
+    lineTo001Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,50);
+        ctx.stroke();
+    },
+    lineTo002Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(32768,50);
+        ctx.stroke();
+    },
+    lineTo003Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,-32769);
+        ctx.stroke();
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIMoveTo/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIMoveTo/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIMoveTo/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIMoveTo/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIMoveTo/index.hml
new file mode 100644
index 0000000..1d749e8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIMoveTo/index.hml
@@ -0,0 +1,58 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick=backMain>
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick=changePrev>
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="moveTo_Test001" onclick=moveTo001Func>
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="moveTo_Test002" onclick=moveTo002Func>
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="moveTo_Test003" onclick=moveTo003Func>
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIMoveTo/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIMoveTo/index.js
new file mode 100644
index 0000000..f41a435
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIMoveTo/index.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPIDraw2/index"),
+    moveTo001Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,50);
+        ctx.stroke();
+    },
+    moveTo002Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(32768,10);
+        ctx.lineTo(10,50);
+        ctx.stroke();
+    },
+    moveTo003Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,-32769);
+        ctx.lineTo(10,50);
+        ctx.stroke();
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIPerformance/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIPerformance/index.css
new file mode 100755
index 0000000..0b58e21
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIPerformance/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 80px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIPerformance/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIPerformance/index.hml
new file mode 100755
index 0000000..847d46a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIPerformance/index.hml
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口性能测试
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:1100px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:1100px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="performance_Test001" onclick="performance001Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="performance_Test002" onclick="performance002Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIPerformance/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIPerformance/index.js
new file mode 100755
index 0000000..ce379cf
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIPerformance/index.js
@@ -0,0 +1,170 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPI/index"),
+    performance001Func: function () {
+        var myDate = new Date();
+        var myTime=myDate.toLocaleTimeString();
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        console.log("stroke 1 time contains 100 times moveTo+lineTo begin =========" + myTime);
+        // 画101条线
+        var i;
+        var x = 0;
+        // 红色
+        ctx.strokeStyle = "#FF0000";
+        ctx.lineWidth = 5;
+        for(i = 0; i< 100; i++) {
+            x = x + 10;
+            ctx.moveTo(10,x);
+            ctx.lineTo(30,x);
+            if(i === 99) {
+                ctx.stroke();
+                console.log("stroke 1 time contains 100 times moveTo+lineTo end =========" + myTime);
+                ctx.beginPath();
+                // 蓝色
+                ctx.strokeStyle = "#0000FF";
+                ctx.lineWidth = 3;
+                ctx.moveTo(10,x+10);
+                ctx.lineTo(30,x+10);
+                ctx.stroke();
+            }
+        }
+
+        // 画101个矩形
+        console.log("stroke 1 time contains 100 times rect begin =========" + myTime);
+        ctx.beginPath();
+        var y = 0;
+        for(i = 0; i< 100; i++) {
+            y = y + 10;
+            ctx.rect(40,y, 20,4);
+            if(i === 99) {
+                ctx.stroke();
+                console.log("stroke 1 time contains 100 times rect end =========" + myTime);
+                ctx.beginPath();
+                // 红色
+                ctx.strokeStyle = "#FF0000";
+                ctx.lineWidth = 2;
+                ctx.rect(40,y+10, 20,4);
+                ctx.stroke();
+            }
+        }
+
+        // 画101个圆
+        console.log("stroke 1 time contains 100 times arc begin =========" + myTime);
+        ctx.beginPath();
+        var z = 0;
+        for(i = 0; i< 100; i++) {
+            z = z + 10;
+            ctx.arc(80,z,5,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+            if(i === 99) {
+                ctx.stroke();
+                console.log("stroke 1 time contains 100 times arc end =========" + myTime);
+                ctx.beginPath();
+                // 蓝色
+                ctx.strokeStyle = "#0000FF";
+                ctx.lineWidth = 2;
+                ctx.arc(80,z+10,5,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+                ctx.stroke();
+            }
+        }
+
+        // 画101条线
+        x = 0;
+        // 红色
+        ctx.strokeStyle = "#FF0000";
+        ctx.lineWidth = 1;
+        console.log("stroke 100 times contains 100 times moveTo+lineTo begin =========" + myTime);
+        for(i = 0; i< 100; i++) {
+            x = x + 10;
+            ctx.beginPath();
+            ctx.moveTo(100,x);
+            ctx.lineTo(130,x);
+            ctx.stroke();
+        }
+        console.log("stroke 100 times contains 100 times moveTo+lineTo end =========" + myTime);
+
+        // 画100个矩形
+        y = 0;
+        // 红色
+        ctx.strokeStyle = "#FF0000";
+        console.log("stroke 100 times contains 100 times rect begin =========" + myTime);
+        for(i = 0; i< 100; i++) {
+            y = y + 10;
+            ctx.beginPath();
+            ctx.rect(140,y, 20,4);
+            ctx.stroke();
+        }
+        console.log("stroke 100 time contains 100 times rect end =========" + myTime);
+
+        // 画100个弧
+        z = 0;
+        // 红色
+        ctx.strokeStyle = "#FF0000";
+        ctx.lineWidth = 1;
+        console.log("stroke 100 times contains 100 times arc begin =========" + myTime);
+        for(i = 0; i< 100; i++) {
+            z = z + 10;
+            ctx.beginPath();
+            ctx.arc(170,z,5,Math.PI*2*(0/360),Math.PI*2*(140/360),false);
+            ctx.stroke();
+        }
+        console.log("stroke 100 times contains 100 times arc end =========" + myTime);
+    },
+    performance002Func: function() {
+        var myDate = new Date();
+        var myTime=myDate.toLocaleTimeString();
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        // 画10条线
+        var i = 0;
+        // 红色
+        ctx.strokeStyle = "#FF0000";
+        ctx.lineWidth = 1;
+        console.log("stroke 10 times contains 10 times moveTo+lineTo begin =========" + myTime);
+        for(i = 0; i< 10; i++) {
+            ctx.beginPath();
+            ctx.moveTo(10,30);
+            ctx.lineTo(60,30);
+            ctx.stroke();
+        }
+        console.log("stroke 10 times contains 10 times moveTo+lineTo end =========" + myTime);
+
+        // 画10个矩形
+        // 红色
+        ctx.strokeStyle = "#FF0000";
+        console.log("stroke 10 times contains 10 times rect begin =========" + myTime);
+        for(i = 0; i< 10; i++) {
+            ctx.beginPath();
+            ctx.rect(80,30,50,10);
+            ctx.stroke();
+        }
+        console.log("stroke 10 time contains 10 times rect end =========" + myTime);
+
+        // 画10个弧
+        // 红色
+        ctx.strokeStyle = "#FF0000";
+        ctx.lineWidth = 1;
+        console.log("stroke 10 times contains 10 times arc begin =========" + myTime);
+        for(i = 0; i< 10; i++) {
+            ctx.beginPath();
+            ctx.arc(160,30,10,Math.PI*2*(0/360),Math.PI*2*(360/360),false);
+            ctx.stroke();
+        }
+        console.log("stroke 10 times contains 10 times arc end =========" + myTime);
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIRect/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIRect/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIRect/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIRect/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIRect/index.hml
new file mode 100644
index 0000000..7448926
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIRect/index.hml
@@ -0,0 +1,74 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="rect_Test001" onclick="rect001Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="rect_Test002" onclick="rect002Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="rect_Test003" onclick="rect003Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas4" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="rect_Test004" onclick="rect004Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas5" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="rect_Test005" onclick="rect005Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIRect/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIRect/index.js
new file mode 100644
index 0000000..805da2f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIRect/index.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPIDraw2/index"),
+    rect001Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.stroke();
+    },
+    rect002Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(32768,10,50,50);
+        ctx.stroke();
+    },
+    rect003Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,-32769,50,50);
+        ctx.lineTo(80,60);
+        ctx.stroke();
+    },
+    rect004Func: function () {
+        var canvasRef = this.$refs.canvas4;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,32768,50);
+        ctx.stroke();
+    },
+    rect005Func: function () {
+        var canvasRef = this.$refs.canvas5;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,-32769);
+        ctx.stroke();
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIScenario/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIScenario/index.css
new file mode 100755
index 0000000..0b58e21
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIScenario/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 80px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIScenario/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIScenario/index.hml
new file mode 100755
index 0000000..1f5942b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIScenario/index.hml
@@ -0,0 +1,42 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick=backMain>
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick=changePrev>
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口SR场景测试
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:1200px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:1200px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="scenario_Test001" onclick=scenario001Func>
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIScenario/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIScenario/index.js
new file mode 100755
index 0000000..3ca0b6c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIScenario/index.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPI/index"),
+    scenario001Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.arc(150,70,50,Math.PI*2*(30/360),Math.PI*2*(150/360),false);
+        ctx.moveTo(30,30);
+        ctx.lineTo(60,90);
+        ctx.closePath();
+        ctx.stroke();
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIStroke/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIStroke/index.css
new file mode 100644
index 0000000..2381a93
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIStroke/index.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 170px;
+  margin-top: 0px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIStroke/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIStroke/index.hml
new file mode 100644
index 0000000..0b84333
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIStroke/index.hml
@@ -0,0 +1,82 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <list style="left:0px;top:0px;width:454px;height:454px;flex-direction:column">
+    <list-item style="width:454px;height:60px;">
+    </list-item>
+    <list-item style="width:454px;height:80px;">
+        <input type="button" style="margin-left:85px;width:130px;height:60px;" value="返回首页" onclick="backMain">
+        </input>
+        <input type="button" style="margin-left:20px;width:130px;height:60px;" value="返回上级" onclick="changePrev">
+        </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item class="titleContainerStyle">
+        <text class="titleTextStyle">
+        canvas绘图接口
+        </text>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas1" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="stroke_Test001" onclick="stroke001Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas2" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="stroke_Test002" onclick="stroke002Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas3" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="stroke_Test003" onclick="stroke003Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas4" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="stroke_Test004" onclick="stroke004Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas5" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="stroke_Test005" onclick="stroke005Func">
+      </input>
+    </list-item>
+    <list-item class="separatorContainerStyle">
+    </list-item>
+    <list-item style="width:454px;height:170px;">
+      <canvas ref="canvas6" style="margin-left:45px;width:200px;height:150px;background-color:#ffff00">
+      </canvas>
+      <input type="button" style="margin-left:10px;width:180px;height:100px;" value="stroke_Test006" onclick="stroke006Func">
+      </input>
+    </list-item>
+  </list>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIStroke/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIStroke/index.js
new file mode 100644
index 0000000..67dd289
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/canvas/indexAPIStroke/index.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage("pages/canvas/indexAPIDraw2/index"),
+    stroke001Func: function () {
+        var canvasRef = this.$refs.canvas1;
+        var ctx = canvasRef.getContext("2d");
+        ctx.stroke();
+        ctx.rect(10,10,50,50);
+        ctx.arc(100,70,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+    },
+    stroke002Func: function () {
+        var canvasRef = this.$refs.canvas2;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.stroke();
+        ctx.lineTo(80,60);
+    },
+    stroke003Func: function () {
+        var canvasRef = this.$refs.canvas3;
+        var ctx = canvasRef.getContext("2d");
+        ctx.rect(10,10,50,50);
+        ctx.stroke();
+        ctx.arc(100,70,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+    },
+    stroke004Func: function () {
+        var canvasRef = this.$refs.canvas4;
+        var ctx = canvasRef.getContext("2d");
+        ctx.moveTo(10,10);
+        ctx.lineTo(10,50);
+        ctx.stroke();
+        ctx.arc(100,70,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+    },
+    stroke005Func: function () {
+        var canvasRef = this.$refs.canvas5;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+        ctx.arc(100,70,50,Math.PI*2*(150/360),Math.PI*2*(30/360),false);
+    },
+    stroke006Func: function () {
+        var canvasRef = this.$refs.canvas6;
+        var ctx = canvasRef.getContext("2d");
+        ctx.arc(50,50,30,Math.PI*2*(0/360),Math.PI*2*(90/360),false);
+        ctx.stroke();
+        ctx.lineTo(50,10);
+    }
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0304/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0304/index.css
new file mode 100644
index 0000000..4dacb35
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0304/index.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:55px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0304/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0304/index.hml
new file mode 100644
index 0000000..c0a7ed8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0304/index.hml
@@ -0,0 +1,35 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_0304</text>
+    </div>
+    <div style="height:220px;flex-direction:column;background-color: #858585;" class="divFrame">
+        <chart class="chart" datasets="{{datasets1}}" options="{{options}}" >
+        </chart>
+        <chart class="chart" datasets="{{datasets2}}" options="{{options}}" >
+        </chart>
+        <chart class="chart" datasets="{{datasets3}}" options="{{options}}" >
+        </chart>
+        <chart class="chart" datasets="{{datasets4}}" options="{{options}}" >
+        </chart>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0304/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0304/index.js
new file mode 100644
index 0000000..714ca64
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0304/index.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+export default {
+  data: {
+    options: {
+      xAxis: {
+        min: 0,
+        max: 5,
+        axisTick: 6,
+        display: true
+      },
+      yAxis: {
+        min: 0,
+        max: 5,
+        axisTick: 4,
+        display: true
+      },
+      labels: ["00:00", "02:00", "04:00", "06:00"]
+    },
+    datasets1: [
+      {
+        backgroundColor: "#000000",
+        data: [1, 2, 3, 4]
+      }
+    ],
+    datasets2: [
+      {
+        backgroundColor: "#ff0000",
+        data: [1, 2, 3, 4]
+      }
+    ],
+    datasets3: [
+      {
+        backgroundColor: "ff0000",
+        data: [1, 2, 3, 4]
+      }
+    ],
+    datasets4: [
+      {
+        backgroundColor: 21474836483,
+        data: [1, 2, 3, 4]
+      }
+    ],
+    ...routePage("pages/index/index", "pages/chart/0506/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0506/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0506/index.css
new file mode 100644
index 0000000..4dacb35
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0506/index.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:55px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0506/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0506/index.hml
new file mode 100644
index 0000000..9957a71
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0506/index.hml
@@ -0,0 +1,36 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_0506</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <chart class="chart"  datasets="{{datasets1}}" options="{{options}}" >
+
+        </chart>
+        <chart class="chart"  datasets="{{datasets2}}" options="{{options}}" >
+
+        </chart>
+        <chart class="chart"  datasets="{{datasets3}}" options="{{options}}" >
+
+        </chart>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0506/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0506/index.js
new file mode 100644
index 0000000..a64dbba
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/0506/index.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+export default {
+  data: {
+    labels: ["00:00", "02:00", "04:00", "06:00"],
+    options: {
+      xAxis: {
+        min: 0,
+        max: 5,
+        axisTick: 6,
+        display: true
+      },
+      yAxis: {
+        min: 1000,
+        max: 2500,
+        axisTick: 4,
+        display: true
+      }
+    },
+    datasets1: [
+      {
+        backgroundColor: "#ff0000",
+        data: [2323, 847, 2000]
+      }
+    ],
+    datasets2: [
+      {
+        backgroundColor: "#00ff00",
+        data: ["kjk", "jke"]
+      }
+    ],
+    datasets3: [
+      {
+        backgroundColor: "#0000ff",
+        data: [-2147483690, 2147483980]
+      }
+    ],
+    ...routePage("pages/chart/0304/index", "pages/chart/1819/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/1819/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/1819/index.css
new file mode 100644
index 0000000..4dacb35
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/1819/index.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:55px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/1819/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/1819/index.hml
new file mode 100644
index 0000000..7ee3f9d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/1819/index.hml
@@ -0,0 +1,39 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_1819</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <chart class="chart"  datasets="{{datasets1}}" options="{{options}}"  >
+
+        </chart>
+        <chart class="chart"  datasets="{{datasets2}}" options="{{options}}"  >
+
+        </chart>
+        <chart class="chart"  datasets="{{datasets3}}" options="{{options}}"  >
+
+        </chart>
+        <chart class="chart"  datasets="{{datasets4}}" options="{{options}}"  >
+
+        </chart>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/1819/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/1819/index.js
new file mode 100644
index 0000000..59ded96
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/1819/index.js
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+export default {
+  data: {
+    labels: ["00:00", "02:00", "04:00", "06:00"],
+    options: {
+      xAxis: {
+        min: 0,
+        max: 10,
+        axisTick: 6,
+        display: true
+      },
+      yAxis: {
+        min: 0,
+        max: 6000,
+        axisTick: 10,
+        display: false
+      }
+    },
+    datasets1: [
+      {
+        strokeColor: "#ff0000",
+        data: [2478, 2600, 3e3, 3200, 3500, 3888, 4023, 4501, 4999, 5267]
+      }
+    ],
+    datasets2: [
+      {
+        backgroundColor: "#00ff00",
+        data: [1, 2, 3],
+        dgs: "jdkllk"
+      }
+    ],
+    datasets3: [
+      {
+        backgroundColor: "#ff0000"
+      }
+    ],
+    datasets4: "not array",
+    ...routePage("pages/chart/0506/index", "pages/chart/20/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/20/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/20/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/20/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/20/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/20/index.hml
new file mode 100644
index 0000000..aeede09
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/20/index.hml
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_020</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <chart class="chart" datasets="{{datasets}}" options="{{options}}" type="bar"
+        onclick="changeData">
+        </chart>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/20/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/20/index.js
new file mode 100644
index 0000000..77f1147
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/20/index.js
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+        data: {
+            flag:true,
+            options:{
+                xAxis: {
+                    min: 0,
+                    max: 10,
+                    axisTick: 10,
+                    display: false
+                },
+                yAxis: {
+                    min: 2000,
+                    max: 6000,
+                    axisTick: 10,
+                    display: true
+                }
+            },
+            datasets:[{
+                fillColor:"#ff0000",
+                data:[2478, 2600, 3e3, 3200, 3500, 3888, 4023, 4501, 4999, 5267]
+            }
+            ]
+        },
+        changeData() {
+            if (this.flag === true) {
+                this.datasets = [{
+                    fillColor:"#00ff00",
+                    data:[2000, 3000, 4000],
+                    dgs:"jdkllk"
+                },{
+                    fillColor:"#0000ff",
+                    data:[2478, 2600, 3e3, 3200, 3500, 3888, 4023, 4501, 4999, 5267]
+                }
+                ];
+            } else {
+                this.datasets = [{
+                    fillColor:"#ff0000",
+                    data:[2478, 2600, 3e3, 3200, 3500, 3888, 4023, 4501, 4999, 5267]
+                }
+                ];
+            }
+            this.flag = this.flag === true ? false : true;
+        },
+        ...routePage('pages/chart/1819/index', 'pages/chart/21/index')
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/21/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/21/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/21/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/21/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/21/index.hml
new file mode 100644
index 0000000..35fe306
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/21/index.hml
@@ -0,0 +1,42 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_021</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <stack style="width:454px;height:220px">
+            <input
+                type="button"
+                value="reset"
+                style="left:80px;top:0px;width:100px;height:40px;color: #40e0d0;"
+                onclick="updateData"
+            />
+            <chart
+                id="chart01"
+                style="left:80px;top:40px;width:454px;height:180px;color: #40e0d0;"
+                datasets="{{datasets}}"
+                options="{{options}}"
+                onclick="nextPage"
+            ></chart>
+        </stack>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/21/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/21/index.js
new file mode 100755
index 0000000..61fc75e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/21/index.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+  data: {
+    image: "common/left.png",
+    index: 0,
+    datasets: [
+      {
+        backgroundColor: "#FF6364",
+        data: [2478, 2600, 3e3, 3200, 3500, 3888, 4023, 4501, 4999, 5267]
+      },
+      { backgroundColor: "#00FF00", data: [1000, 2, 800, 700, 433] },
+      { backgroundColor: "#0000FF", data: [100, 200, 300, 400, 500, 600, 550, 450, 350] }
+    ],
+    options: {
+        xAxis: { min: 0, max: 10, axisTick: 10, display:true },
+        yAxis: { min: 100, max: 5267, axisTick: 10, display: true }
+    }
+  },
+  updateData: function updateData() {
+    console.log("update data...");
+    this.datasets = [
+      { backgroundColor: "#FFFF00", data: [400, 200, 800, 400, 200, 800] },
+      { backgroundColor: "#FF6364", data: [300, 200, 750] }
+    ];
+    this.options = {
+            xAxis: { min: 0, max: 10, axisTick: 10, display:true },
+            yAxis: { min: 400, max: 800, axisTick: 10, display: true }
+    }
+  },
+  onInit() {
+    console.log("init called...");
+  },
+  onDestroy() {
+    console.log("destroy called...");
+  },
+  ...routePage('pages/chart/20/index', 'pages/chart/22/index')
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/22/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/22/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/22/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/22/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/22/index.hml
new file mode 100644
index 0000000..77f25db
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/22/index.hml
@@ -0,0 +1,29 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_022</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <chart style="width:454px;height:220px" type="line" style="left:0px; top:0px;" ref="chart" datasets="{{datasets}}" options="{{options}}" onclick="updateData">
+        </chart>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/22/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/22/index.js
new file mode 100644
index 0000000..6c624c9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/22/index.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import { datasets, xAxis, yAxis,appendDataFunc } from "../../../common/js/chart";
+export default {
+  data: {
+    datasets: datasets,
+    options: {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        lineStyle: {
+          width: "5",
+          smooth: false
+        },
+        headPoint: {
+          shape: "circle",
+          size: "3px",
+          strokeColor: "#ff0000",
+          fillColor: "#090E14"
+        },
+        topPoint: {
+          shape: "circle",
+          size: "3px",
+          strokeColor: "#00ff00",
+          fillColor: "#090E14",
+          strokeWidth: "1px"
+        },
+        bottomPoint: {
+          shape: "circle",
+          size: "3px",
+          strokeColor: "#ffffff",
+          fillColor: "#090E14"
+        },
+        loop: {
+          margin: 5,
+          gradient: false
+        }
+      }
+    },
+    updateData: function updateData() {
+      var appendData = appendDataFunc();
+      this.$refs.chart.append(appendData);
+    },
+    ...routePage("pages/chart/21/index", "pages/chart/23/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/23/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/23/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/23/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/23/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/23/index.hml
new file mode 100644
index 0000000..f85f75a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/23/index.hml
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_023</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <chart style="width:200px;height:220px" type="line" style="left:0px; top:0px;" ref="chart" datasets="{{datasets}}" options="{{options}}">
+        </chart>
+        <chart style="width:200px;height:220px" type="line" style="left:0px; top:0px;" ref="chart" datasets="{{datasets}}" options="{{options2}}">
+        </chart>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/23/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/23/index.js
new file mode 100644
index 0000000..82a92e2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/23/index.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import {datasetsFor232426} from "../../../common/js/chart"
+export default {
+  data: {
+    datasets: datasetsFor232426,
+    options: {
+      yAxis: {
+        min: 0,
+        max: 450,
+        axisTick: 10,
+        display: true,
+        color: "#ff0000"
+      }
+    },
+    options2: {
+      xAxis: {
+        min: 0,
+        max: 450,
+        axisTick: 10,
+        display: true,
+        color: "#ff0000"
+      }
+    },
+    ...routePage("pages/chart/22/index", "pages/chart/24/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/24/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/24/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/24/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/24/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/24/index.hml
new file mode 100644
index 0000000..ac56ad3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/24/index.hml
@@ -0,0 +1,47 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_024</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <div style="width:454px;height:50px">
+            <text style="width:200px;height:50px">margin:5</text>
+            <chart style="width:250px;height:50px" type="line" style="left:0px; top:0px;" ref="chart1" datasets="{{datasets}}" options="{{options1}}" onclick="updateData(1)">
+            </chart>
+        </div>
+        <div style="width:454px;height:50px">
+            <text style="width:200px;height:50px">margin:0</text>
+            <chart style="width:250px;height:50px" type="line" style="left:0px; top:0px;" ref="chart2" datasets="{{datasets}}" options="{{options2}}" onclick="updateData(2)">
+            </chart>
+        </div>
+        <div style="width:454px;height:50px">
+            <text style="width:200px;height:50px">margin:-1</text>
+            <chart style="width:250px;height:50px" type="line" style="left:0px; top:0px;" ref="chart3" datasets="{{datasets}}" options="{{options3}}" onclick="updateData(3)">
+            </chart>
+        </div>
+        <div style="width:454px;height:50px">
+            <text style="width:200px;height:50px">margin:无</text>
+            <chart style="width:250px;height:50px" type="line" style="left:0px; top:0px;" ref="chart4" datasets="{{datasets}}" options="{{options4}}" onclick="updateData(4)">
+            </chart>
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/24/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/24/index.js
new file mode 100644
index 0000000..84f9077
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/24/index.js
@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import { appendDataFunc, datasetsFor232426 } from "../../../common/js/chart"
+var xAxis = {
+  min: 0,
+  max: 50,
+  display: true,
+  color: "#00ff00"
+};
+var yAxis = {
+  min: 0,
+  max: 450,
+  display: true,
+  color: "#ff0000"
+};
+export default {
+  data: {
+    datasets: datasetsFor232426,
+    options1: {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        loop: {
+          margin: 5
+        }
+      }
+    },
+    options2: {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        loop: {
+          margin: 0
+        }
+      }
+    },
+    options3: {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        loop: {
+          margin: -1
+        }
+      }
+    },
+    options4: {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        loop: {}
+      }
+    },
+    index: 0,
+    sourceData: [62, 60, 58, 57, 56, 56, 56],
+    updateData: function updateData(count) {
+      var appendData = {
+        serial: 0,
+        data: appendDataFunc().data
+      };
+      if (count == 1) {
+        this.$refs.chart1.append(appendData);
+      } else if (count == 2) {
+        this.$refs.chart2.append(appendData);
+      } else if (count == 3) {
+        this.$refs.chart3.append(appendData);
+      } else if (count == 4) {
+        this.$refs.chart4.append(appendData);
+      }
+    },
+    ...routePage("pages/chart/23/index", "pages/chart/25/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/25/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/25/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/25/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/25/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/25/index.hml
new file mode 100644
index 0000000..48d0c89
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/25/index.hml
@@ -0,0 +1,29 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_025</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <chart style="width:454px;height:220px" type="line" style="left:0px; top:0px;" ref="chart" datasets="{{datasets}}" options="{{options}}" onclick="updateData">
+        </chart>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/25/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/25/index.js
new file mode 100644
index 0000000..e67bf1c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/25/index.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import {datasets,xAxis,yAxis,appendDataFunc} from "../../../common/js/chart";
+export default {
+  data: {
+    datasets: datasets,
+    options: {
+      xAxis: xAxis,
+      yAxis: yAxis
+    },
+    sourceData: [50, 70, 90, 65, 50, 10, 50],
+    updateData: function updateData() {
+      var appendData = appendDataFunc();
+      this.$refs.chart.append(appendData);
+    },
+    ...routePage("pages/chart/24/index", "pages/chart/26/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/26/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/26/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/26/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/26/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/26/index.hml
new file mode 100644
index 0000000..bfde618
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/26/index.hml
@@ -0,0 +1,29 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_026</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <chart style="width:454px;height:220px" type="line" style="left:0px; top:0px;" ref="chart" datasets="{{datasets}}" options="{{options}}" onclick="updateData">
+        </chart>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/26/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/26/index.js
new file mode 100644
index 0000000..fcb7517
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/26/index.js
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import { datasetsFor232426, appendDataFunc } from "../../../common/js/chart";
+export default {
+  data: {
+    datasets: datasetsFor232426,
+    options: {
+      xAxis: {
+        min: 0,
+        max: 100,
+        axisTick: 10,
+        display: false,
+        color: "##c0c0c0"
+      },
+      yAxis: {
+        min: 0,
+        max: 450,
+        axisTick: 10,
+        display: true,
+        color: "#ff0000"
+      },
+      series: {
+        lineStyle: {
+          width: "5",
+          smooth: false
+        },
+        headPoint: {},
+        topPoint: {},
+        bottomPoint: {},
+        loop: {
+          margin: 5,
+          gradient: false
+        }
+      }
+    },
+    index: 0,
+    sourceData: [62, 60, 58, 57, 56, 56, 56],
+    updateData: function updateData() {
+      var appendData = appendDataFunc();
+      this.$refs.chart.append(appendData);
+    },
+    ...routePage("pages/chart/25/index", "pages/chart/27/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/27/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/27/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/27/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/27/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/27/index.hml
new file mode 100644
index 0000000..9150d23
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/27/index.hml
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_027</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <chart style="width:200px;height:220px" type="line" style="left:0px; top:0px;" ref="chart" datasets="{{datasets}}" options="{{options}}" onclick="updateData">
+        </chart>
+        <chart style="width:200px;height:220px" type="bar" style="left:0px; top:0px;" ref="chart" datasets="{{datasets}}" options="{{options}}" onclick="updateData">
+        </chart>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/27/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/27/index.js
new file mode 100644
index 0000000..e999528
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/27/index.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import { datasetsFor272829, appendDataFunc } from "../../../common/js/chart";
+export default {
+  data: {
+    datasets: datasetsFor272829,
+    options: {
+      xAxis: {
+        min: 2,
+        max: 6,
+        axisTick: 11,
+        display: true,
+        color: "#00ff00"
+      },
+      yAxis: {
+        min: 126,
+        max: 500,
+        axisTick: 11,
+        display: true,
+        color: "#ff0000"
+      }
+    },
+    index: 0,
+    sourceData: [62, 60, 58, 57, 56, 56, 56],
+    updateData: function updateData() {
+      var appendData = appendDataFunc();
+      this.$refs.chart.append(appendData);
+    },
+    ...routePage("pages/chart/26/index", "pages/chart/28/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/28/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/28/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/28/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/28/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/28/index.hml
new file mode 100644
index 0000000..03c585a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/28/index.hml
@@ -0,0 +1,47 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_028</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <div style="width:454px;height:50px">
+            <text style="width:250px;height:50px">x min:-1,max:6</text>
+            <chart style="width:200px;height:50px" type="line" style="left:0px; top:0px;" ref="chart1" datasets="{{datasets}}" options="{{options1}}">
+            </chart>
+        </div>
+        <div style="width:454px;height:50px">
+            <text style="width:250px;height:50px">x min:5,max:1</text>
+            <chart style="width:200px;height:50px" type="line" style="left:0px; top:0px;" ref="chart2" datasets="{{datasets}}" options="{{options2}}">
+            </chart>
+        </div>
+        <div style="width:454px;height:50px">
+            <text style="width:250px;height:50px">x min:5,max:-1</text>
+            <chart style="width:200px;height:50px" type="line" style="left:0px; top:0px;" ref="chart3" datasets="{{datasets}}" options="{{options3}}">
+            </chart>
+        </div>
+        <div style="width:454px;height:50px">
+            <text style="width:250px;height:50px">no min/max</text>
+            <chart style="width:200px;height:50px" type="line" style="left:0px; top:0px;" ref="chart4" datasets="{{datasets}}" options="{{options4}}">
+            </chart>
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/28/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/28/index.js
new file mode 100644
index 0000000..7f58add
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/28/index.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import { datasetsFor272829 } from "../../../common/js/chart";
+var yAxis = {
+  min: 0,
+  max: 450,
+  display: true,
+  color: "#ff0000"
+};
+export default {
+  data: {
+    datasets: datasetsFor272829,
+    options1: {
+      xAxis: {
+        min: -1,
+        max: 6,
+        display: true,
+        color: "#00ff00"
+      },
+      yAxis: yAxis
+    },
+    options2: {
+      xAxis: {
+        min: 5,
+        max: 1,
+        display: true,
+        color: "#00ff00"
+      },
+      yAxis: yAxis
+    },
+    options3: {
+      xAxis: {
+        min: 5,
+        max: -1,
+        display: true,
+        color: "#00ff00"
+      },
+      yAxis: yAxis
+    },
+    options4: {
+      xAxis: {
+        display: true,
+        color: "#00ff00"
+      },
+      yAxis: yAxis
+    },
+    ...routePage("pages/chart/27/index", "pages/chart/29/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/29/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/29/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/29/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/29/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/29/index.hml
new file mode 100644
index 0000000..e4e9a18
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/29/index.hml
@@ -0,0 +1,42 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_029</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <div style="width:454px;height:50px">
+            <text style="width:250px;height:50px">head size:-1</text>
+            <chart style="width:200px;height:50px" type="line" style="left:0px; top:0px;" ref="chart1" datasets="{{datasets}}" options="{{options1}}">
+            </chart>
+        </div>
+        <div style="width:454px;height:50px">
+            <text style="width:250px;height:50px">bottom shape: aaa size:3 strWid:5</text>
+            <chart style="width:200px;height:50px" type="line" style="left:0px; top:0px;" ref="chart2" datasets="{{datasets}}" options="{{options2}}">
+            </chart>
+        </div>
+        <div style="width:454px;height:100px;">
+            <text style="width:250px;height:100px;text-overflow:ellipsis">top strWid:5 strCol:0x0000ff fillCol:0x00ff00</text>
+            <chart style="width:200px;height:50px" type="line" style="left:0px; top:0px;" ref="chart3" datasets="{{datasets}}" options="{{options3}}">
+            </chart>
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/29/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/29/index.js
new file mode 100644
index 0000000..a8231ca
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/29/index.js
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import { datasetsFor272829 } from "../../../common/js/chart";
+var yAxis = {
+  min: 0,
+  max: 450,
+  display: true,
+  color: "#ff0000"
+};
+var xAxis = {
+  min: 0,
+  max: 20,
+  display: true,
+  color: "#00ff00"
+};
+export default {
+  data: {
+    datasets: datasetsFor272829,
+    options1: {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        headPoint: {
+          shape: "circle",
+          size: "-1px"
+        }
+      }
+    },
+    options2: {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        bottomPoint: {
+          shape: "aaa",
+          size: "3px",
+          strokeWidth: "5px"
+        }
+      }
+    },
+    options3: {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        topPoint: {
+          shape: "circle",
+          size: "10px",
+          strokeColor: "#0000ff",
+          fillColor: "#0xff00",
+          strokeWidth: "5px"
+        }
+      }
+    },
+    ...routePage("pages/chart/28/index", "pages/chart/30/index")
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/30/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/30/index.css
new file mode 100644
index 0000000..a7b5c54
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/30/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+    align-items: center;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.chart {
+    width:400px;
+    height:220px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/30/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/30/index.hml
new file mode 100644
index 0000000..f47b76a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/30/index.hml
@@ -0,0 +1,29 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_chart_AttributeSet_Test_030</text>
+    </div>
+    <div style="height:220px;flex-direction:column;" class="divFrame">
+        <chart style="width:454px;height:120px" type="line" datasets="{{datasets1}}" options="{{options1}}">
+        </chart>
+        <text style="width:454px;height:100px;text-overflow: ellipsis;" onclick="changeParam">click to change datasets and options</text>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/30/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/30/index.js
new file mode 100644
index 0000000..d63ea88
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/chart/30/index.js
@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import { datasetsFor272829 } from "../../../common/js/chart";
+var yAxis = {
+  min: 0,
+  max: 450,
+  display: true,
+  color: "#ff0000"
+};
+var xAxis = {
+  min: 0,
+  max: 20,
+  display: true,
+  color: "#00ff00"
+};
+export default {
+  data: {
+    datasets1: [
+      {
+        fillColor: "#00ff00",
+        data: [300, 250, 400, 150, 350, 212, 300, 222, 190],
+        gradient: false
+      },
+      {
+        strokeColor: "#FBD140",
+        fillColor: "#0000ff",
+        data: [300, 300, 178, 50, 401, 126, 600, 80],
+        gradient: true
+      }
+    ],
+    options1: {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        headPoint: {
+          shape: "circle",
+          size: "5px",
+          strokeColor: "#ff0000",
+          fillColor: "#ff0000"
+        },
+        bottomPoint: {
+          shape: "circle",
+          size: "3px",
+          strokeColor: "#FEFEFE",
+          fillColor: "#A1928F"
+        },
+        topPoint: {
+          size: "10px",
+          strokeWidth: "3px",
+          strokeColor: "#FEFEFE",
+          fillColor: "#007DFF"
+        }
+      }
+    },
+    ...routePage("pages/chart/28/index", "")
+  },
+  changeParam() {
+    this.datasets1 = [
+      {
+        fillColor: "#00ff00",
+        data: [280, 230, 380, 130, 330, 192, 280, 202, 170],
+        gradient: false
+      },
+      {
+        strokeColor: "#FBD140",
+        fillColor: "#0000ff",
+        data: [280, 280, 158, 30, 381, 106, 580, 60],
+        gradient: false
+      }
+    ],
+    this.options1 = {
+      xAxis: xAxis,
+      yAxis: yAxis,
+      series: {
+        headPoint: {
+          display: false,
+          shape: "circle",
+          size: "5px",
+          strokeColor: "#ff0000",
+          fillColor: "#ffffff"
+        },
+        loop: {
+
+        }
+      }
+    }
+  },
+  ...routePage("pages/chart/29/index", "")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/01/index.hml
new file mode 100644
index 0000000..53403fe
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/01/index.hml
@@ -0,0 +1,52 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+  <text
+    style="width: 454px; height: 50px; top: 120px; left: 0px; text-align: center;"
+  >
+    属性绑定：{{count}}
+  </text>
+  <input
+    type="button"
+    value="增"
+    style="top: 170px; left: 120px;"
+    onclick="handleIncrease"
+  />
+  <input
+    type="button"
+    value="减"
+    style="top: 170px; left: 230px;"
+    onclick="handleDecrease"
+  />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/01/index.js
new file mode 100644
index 0000000..024e011
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/01/index.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+  data: {
+    count: 1
+  },
+  ...routePage("", "pages/data-binding/02/index"),
+  handleIncrease() {
+    ++this.count;
+  },
+  handleDecrease() {
+    --this.count;
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/02/index.hml
new file mode 100644
index 0000000..b288fc3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/02/index.hml
@@ -0,0 +1,41 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+  <text style="width: 390px; height: 50px; top: 120px; left: 32px; text-align: {{align}};">
+    样式绑定：{{align}}
+  </text>
+  <input type="button" value="左对齐" style="top: 170px; left: 25px;" onclick="handleSetLeft" />
+  <input type="button" value="居中对齐" style="width: 150px; top: 170px; left: 150px;" onclick="handleSetCenter" />
+  <input type="button" value="右对齐" style="top: 170px; left: 325px;" onclick="handleSetRight" />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/02/index.js
new file mode 100644
index 0000000..d05cbd5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/data-binding/02/index.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+  data: {
+    align: "center"
+  },
+  ...routePage("pages/data-binding/01/index", ""),
+  changeNext() {},
+  handleSetLeft() {
+    this.align = "left";
+  },
+  handleSetCenter() {
+    this.align = "center";
+  },
+  handleSetRight() {
+    this.align = "right";
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/01/index.hml
new file mode 100644
index 0000000..e11d6d9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/01/index.hml
@@ -0,0 +1,53 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+  <text
+    if="{{visible}}"
+    style="width: 454px; height: 50px; top: 120px; left: 0px; text-align: center;"
+  >
+    if指令
+  </text>
+  <input
+    type="button"
+    value="显示"
+    style="top: 170px; left: 120px;"
+    onclick="handleShow"
+  />
+  <input
+    type="button"
+    value="隐藏"
+    style="top: 170px; left: 230px;"
+    onclick="handleHide"
+  />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/01/index.js
new file mode 100644
index 0000000..901d2c0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/01/index.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+  data: {
+    visible: true
+  },
+  ...routePage("", "pages/directive/02/index"),
+  handleShow() {
+    this.visible = true;
+  },
+  handleHide() {
+    this.visible = false;
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/02/index.hml
new file mode 100644
index 0000000..803150b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/02/index.hml
@@ -0,0 +1,57 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+  <input
+    type="button"
+    value="增"
+    style="top: 60px; left: 120px;"
+    onclick="handleIncrease"
+  />
+  <input
+    type="button"
+    value="减"
+    style="top: 60px; left: 230px;"
+    onclick="handleDecrease"
+  />
+  <text
+    style="width: 454px; height: 50px; top: 120px; left: 0px; text-align: center;"
+  >
+    for指令
+  </text>
+  <div
+    style="width: 400px; height: 150px; top: 170px; left: 27px; border-width: 1px; border-color: #f00; justify-content: flex-start; flex-wrap: wrap;"
+  >
+    <text for="{{list}}" style="width: 133px; height: 40px;">{{$item}}</text>
+  </div>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/02/index.js
new file mode 100644
index 0000000..a278de9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/02/index.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+  data: {
+    list: ["item1", "item2"]
+  },
+  ...routePage("pages/directive/01/index", "pages/directive/03/index"),
+  handleIncrease() {
+    this.list.push("item" + (this.list.length + 1));
+  },
+  handleDecrease() {
+    this.list.splice(this.list.length - 1, 1);
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/03/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/03/index.hml
new file mode 100644
index 0000000..64ab78c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/03/index.hml
@@ -0,0 +1,64 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+  <input
+    type="button"
+    value="{{visible ? '隐藏' : '显示'}}"
+    style="top: 5px; left: 178px;"
+    onclick="handleToggle"
+  />
+  <input
+    type="button"
+    value="增"
+    style="top: 60px; left: 120px;"
+    onclick="handleIncrease"
+  />
+  <input
+    type="button"
+    value="减"
+    style="top: 60px; left: 230px;"
+    onclick="handleDecrease"
+  />
+  <text
+    style="width: 454px; height: 50px; top: 120px; left: 0px; text-align: center;"
+  >
+    if指令嵌套for指令
+  </text>
+  <div
+    if="{{visible}}"
+    style="width: 400px; height: 150px; top: 170px; left: 27px; border-width: 1px; border-color: #f00; justify-content: flex-start; flex-wrap: wrap;"
+  >
+    <text for="{{list}}" style="width: 133px; height: 40px;">{{$item}}</text>
+  </div>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/03/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/03/index.js
new file mode 100644
index 0000000..f86616f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/03/index.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+  data: {
+    visible: true,
+    list: ["item1", "item2"]
+  },
+  ...routePage("pages/directive/02/index", "pages/directive/04/index"),
+  handleToggle() {
+    this.visible = !this.visible;
+  },
+  handleIncrease() {
+    this.list.push("item" + (this.list.length + 1));
+  },
+  handleDecrease() {
+    this.list.splice(this.list.length - 1, 1);
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/04/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/04/index.hml
new file mode 100644
index 0000000..bd2fb61
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/04/index.hml
@@ -0,0 +1,65 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+  <input
+    type="button"
+    value="增"
+    style="top: 60px; left: 120px;"
+    onclick="handleIncrease"
+  />
+  <input
+    type="button"
+    value="减"
+    style="top: 60px; left: 230px;"
+    onclick="handleDecrease"
+  />
+  <text
+    style="width: 454px; height: 50px; top: 120px; left: 0px; text-align: center;"
+  >
+    for指令嵌套if指令
+  </text>
+  <div
+    style="width: 400px; height: 150px; top: 170px; left: 27px; border-width: 1px; border-color: #f00; justify-content: flex-start; flex-wrap: wrap;"
+  >
+    <div
+      for="{{list}}"
+      style="width: 131px; height: 40px; border-width: 1px; border-color: #f0f;"
+      @click="handleToggle($idx)"
+    >
+      <text if="{{$item.visible}}" style="width: 131px; height: 40px;"
+        >{{$item.title}}</text
+      >
+    </div>
+  </div>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/04/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/04/index.js
new file mode 100644
index 0000000..130a303
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/directive/04/index.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+  data: {
+    list: [
+      { title: "item1", visible: true },
+      { title: "item2", visible: true }
+    ]
+  },
+  ...routePage("pages/directive/03/index", ""),
+  handleIncrease() {
+    this.list.push({ title: "item" + (this.list.length + 1), visible: true });
+  },
+  handleDecrease() {
+    this.list.splice(this.list.length - 1, 1);
+  },
+  handleToggle(index) {
+    this.list[index].visible = !this.list[index].visible;
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/01/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/01/index.css
new file mode 100644
index 0000000..c609d91
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/01/index.css
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+        left:0px;
+        top:0px;
+        width:454px;
+        height:454px;
+        border-radius: 227px;
+        border-width: 2px;
+        border-color: #00ff00;
+    }
+
+.divBlock {
+    width:125px;
+    height:125px;
+    border-width: 1px;
+    border-color: #dc143c;
+}
+
+.innerDivBlock {
+    width:20px;
+    height:20px;
+    border-width: 1px;
+    border-color:#daa520;
+    background-color: #1e90ff;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/01/index.hml
new file mode 100644
index 0000000..1410a84
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/01/index.hml
@@ -0,0 +1,37 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <div class="container" style="flex-direction:column; align-items:center">
+        <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+            <text style="width:320px;height:80px;text-overflow:ellipsis">Component_Div_StyleSet_Test_001</text>
+        </div>
+        <div style="height:220px;" class="divFrame">
+            <div class="divBlock">
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+            </div>
+            <div style="flex-direction:column;" class="divBlock" >
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+            </div>
+        </div>
+        <div class="divFrame">
+            <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+            <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+            <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/01/index.js
new file mode 100644
index 0000000..a3e30cc
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/01/index.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage('pages/index/index', 'pages/div/02/index')
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/02/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/02/index.css
new file mode 100644
index 0000000..515c8f7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/02/index.css
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+        left:0px;
+        top:0px;
+        width:454px;
+        height:454px;
+        border-radius: 227px;
+        border-width: 2px;
+        border-color: #00ff00;
+    }
+
+.divBlock {
+    width:100px;
+    height:100px;
+    border-width: 1px;
+    border-color: #dc143c;
+}
+
+.innerDivBlock {
+    width:20px;
+    height:20px;
+    border-width: 1px;
+    border-color:#daa520;
+    background-color: #1e90ff;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/02/index.hml
new file mode 100644
index 0000000..16c1717
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/02/index.hml
@@ -0,0 +1,54 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <div class="container" style="flex-direction:column; align-items:center">
+        <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+            <text style="width:320px;height:80px;text-overflow:ellipsis">Component_Div_StyleSet_Test_002</text>
+        </div>
+        <stack style="margin-left:67px;height:220px;width:320px;">
+            <div style="left:10px; flex-direction:column;" class="divBlock" >
+                <div style="justify-content:flex-start;width:100px;height:50px;border-width:1px;border-color:#ee82ee;">
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                </div>
+                <div style="justify-content:flex-end;width:100px;height:50px;border-width:1px;border-color:#ee82ee;">
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                </div>
+            </div>
+            <div style="left:110px; justify-content:center;" class="divBlock" >
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+            </div>
+            <div style="left:10px; top:100px; justify-content:space-between;" class="divBlock" >
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+            </div>
+            <div style="left:110px; top:100px; justify-content:space-around;" class="divBlock" >
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+                <div class="innerDivBlock"></div>
+            </div>
+        </stack>
+        <div class="divFrame">
+            <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+            <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+            <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/02/index.js
new file mode 100644
index 0000000..eb1a7ba
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/02/index.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    data: {
+    },
+    ...routePage('pages/div/01/index', 'pages/div/03/index')
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/03/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/03/index.css
new file mode 100644
index 0000000..515c8f7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/03/index.css
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+        left:0px;
+        top:0px;
+        width:454px;
+        height:454px;
+        border-radius: 227px;
+        border-width: 2px;
+        border-color: #00ff00;
+    }
+
+.divBlock {
+    width:100px;
+    height:100px;
+    border-width: 1px;
+    border-color: #dc143c;
+}
+
+.innerDivBlock {
+    width:20px;
+    height:20px;
+    border-width: 1px;
+    border-color:#daa520;
+    background-color: #1e90ff;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/03/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/03/index.hml
new file mode 100644
index 0000000..2f57fef
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/03/index.hml
@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <div class="container" style="flex-direction:column; align-items:center">
+        <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+            <text style="width:320px;height:80px;text-overflow:ellipsis">Component_Div_StyleSet_Test_003</text>
+        </div>
+        <div style="height:220px;" class="divFrame">
+             <stack style="width:454px;height:220px">
+                <div style="left:225px; align-items:flex-start;" class="divBlock" >
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                </div>
+                <div style="left:65px; top:110px; align-items:flex-end;" class="divBlock" >
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                </div>
+                <div style="left:225px; top:110px; align-items:center;" class="divBlock" >
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                    <div class="innerDivBlock"></div>
+                </div>
+            </stack>
+        </div>
+        <div class="divFrame">
+            <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+            <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+            <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/03/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/03/index.js
new file mode 100644
index 0000000..5732041
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/03/index.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    data: {
+    },
+    ...routePage('pages/div/02/index', 'pages/div/33/index')
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/33/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/33/index.css
new file mode 100644
index 0000000..78a251b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/33/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.stackBlock {
+    width:320px;
+    height:50px;
+    border-width: 1px;
+    border-color: #dc143c;
+}
+
+.divBlock {
+    width:125px;
+    height:125px;
+    border-width: 1px;
+    border-color: #dc143c;
+}
+
+.innerDivBlock {
+    width:20px;
+    height:20px;
+    border-width: 1px;
+    border-color:#daa520;
+    background-color: #1e90ff;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/33/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/33/index.hml
new file mode 100755
index 0000000..d80afd8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/33/index.hml
@@ -0,0 +1,51 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <div class="container" style="flex-direction:column; align-items:center">
+        <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+            <text style="width:320px;height:80px;text-overflow:ellipsis">Component_Div_StyleSet_Test_033</text>
+        </div>
+        <div style="height:220px;" class="divFrame">
+            <stack style="width:454px;height:220px;">
+                <div style="left:65px; width:320px; height:220px;border-width:1px;border-color:#ff00ff;flex-direction:column;">
+                    <text style="width:320px;height:50px;color:#ffa500;">this is text</text>
+                    <input type="button" style="width: 140px;height:40px" value="button"> </input>
+                    <stack class="stackBlock" style="border-color:#ffd700;background-color:#fa8072;">
+                        <list style="left:0px;top:0px;width:150px;height:50px">
+                            <list-item style="width: 150px; height:30px;">
+                                <text style="left:0px;top:0px;width:150px;height:30px">listItem</text>
+                            </list-item>
+                            <list-item style="width: 150px; height:30px;">
+                                <text style="left:0px;top:30px;width:150px;height:30px">listItem</text>
+                            </list-item>
+                        </list>
+                    </stack>
+                    <input type="checkbox" style="width: 50px;height:50px"></input>
+                    <stack class="stackBlock" style="border-color:#ffd700;background-color:#ffefd5;">
+                        <div style="left:0px;top:0px;width:100px;height:100px;background-color:#00ff00;">
+                            <image src="common/leftHead.png"></image>
+                        </div>
+                    </stack>
+                </div>
+                <text style="left:70px;top:180px;width:150px;height:50px">this is text</text>
+                <image style="left:230px;top:180px;width:150px;height:50px" src="common/leftHead.png"></image>
+            </stack>
+        </div>
+        <div class="divFrame">
+            <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+            <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+            <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/33/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/33/index.js
new file mode 100644
index 0000000..b1b83f7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/33/index.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+        data: {
+        },
+        ...routePage('pages/div/03/index', 'pages/div/34/index')
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/34/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/34/index.css
new file mode 100644
index 0000000..344ec70
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/34/index.css
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:50px;
+    height:50px;
+    border-width: 1px;
+    border-color: #dc143c;
+}
+
+.divSmallBlock {
+    width:8px;
+    height:8px;
+    border-width: 1px;
+    border-color:#ffd700;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/34/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/34/index.hml
new file mode 100644
index 0000000..6053dd9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/34/index.hml
@@ -0,0 +1,109 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <div class="container" style="flex-direction:column; align-items:center">
+        <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+            <text style="width:320px;height:80px;text-overflow:ellipsis">Component_Div_StyleSet_Test_034</text>
+        </div>
+        <div style="height:220px;" class="divFrame">
+             <stack style="width:454px;height:220px">
+                <div style="left:65px; width:320px; height:220px;
+                border-width:1px;border-color:#ff00ff;flex-direction:column;flex-wrap:wrap;" >
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                    <div class="divBlock">
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                        <div class="divSmallBlock"></div>
+                    </div>
+                </div>
+            </stack>
+        </div>
+        <div class="divFrame">
+            <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+            <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+            <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/34/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/34/index.js
new file mode 100644
index 0000000..9dc99c5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/34/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    data: {
+        loop:[1, 2, 3]
+    },
+    ...routePage('pages/div/33/index', 'pages/div/35/index')
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/35/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/35/index.css
new file mode 100644
index 0000000..cf02dd9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/35/index.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:50px;
+    height:50px;
+    border-width: 1px;
+    border-color: #dc143c;
+}
+
+.divSmallBlock {
+    width:8px;
+    height:8px;
+    border-width: 1px;
+    border-color:#ffd700;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.stackBlock {
+    width:320px;
+    height:50px;
+    border-width: 1px;
+    border-color: #dc143c;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/35/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/35/index.hml
new file mode 100755
index 0000000..996359e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/35/index.hml
@@ -0,0 +1,53 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <div class="container" style="flex-direction:column; align-items:center">
+        <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+            <text style="width:320px;height:80px;text-overflow:ellipsis">Component_Div_StyleSet_Test_035</text>
+        </div>
+        <div style="height:220px;" class="divFrame">
+            <div style="width:60px;height:180px;"></div>
+            <div style="width:350px;height:180px;flex-direction:{{flexDirection}};justify-content:{{justifyContent}};align-items:{{alignItems}}">
+                    <text style="width:320px;height:50px;color:#ffa500;">this is text</text>
+                    <input type="button" style="width: 140px;height:40px" value="button"></input>
+                    <stack class="stackBlock" style="border-color:#ffd700;background-color:#fa8072;">
+                        <list style="left:0px;top:0px;width:150px;height:50px">
+                            <list-item style="width: 150px; height:30px;">
+                                <text style="left:0px;top:0px;width:150px;height:30px">listItem</text>
+                            </list-item>
+                            <list-item style="width: 150px; height:30px;">
+                                <text style="left:0px;top:30px;width:150px;height:30px">listItem</text>
+                            </list-item>
+                        </list>
+                    </stack>
+                    <input type="checkbox" style="width: 50px;height:50px"> </input>
+                    <stack class="stackBlock" style="border-color:#ffd700;background-color:#ffefd5;">
+                        <div style="left:0px;top:0px;width:100px;height:100px;background-color:#00ff00;">
+                            <image src="common/leftHead.png"></image>
+                        </div>
+                    </stack>
+            </div>
+        </div>
+        <div style="width:454px;height:40px;justify-content:center">
+            <input type="button" value="direction" style="width:120px;height:40px" onclick="changeFlexDirection"></input>
+            <input type="button" value="justifyContent" style="width:120px;height:40px" onclick="changeJustifyContent"></input>
+            <input type="button" value="alignItems" style="width:120px;height:40px" onclick="changeAlignItems"></input>
+        </div>
+        <div class="divFrame">
+            <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+            <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+            <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/35/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/35/index.js
new file mode 100644
index 0000000..74f4dcb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/35/index.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    data: {
+        loop:[1, 2, 3],
+        flexDirection: "row",
+        flexDirectionList: ["row", "column"],
+        flexDirectionIndex:1,
+        justifyContent: "flex-start",
+        justifyContentList: ["flex-start", "center", "flex-end"],
+        justifyContentIndex:1,
+        alignItems: "flex-start",
+        alignItemsList: ["flex-start", "center", "flex-end"],
+        alignItemsIndex:1
+    },
+    ...routePage('pages/div/34/index', 'pages/div/36/index'),
+    changeFlexDirection() {
+        this.flexDirection = this.flexDirectionList[this.flexDirectionIndex];
+        this.flexDirectionIndex = (this.flexDirectionIndex + 1) % 2;
+    },
+    changeJustifyContent() {
+        this.justifyContent = this.justifyContentList[this.justifyContentIndex];
+        this.justifyContentIndex = (this.justifyContentIndex + 1) % 3;
+    },
+    changeAlignItems() {
+        this.alignItems = this.alignItemsList[this.alignItemsIndex];
+        this.alignItemsIndex = (this.alignItemsIndex + 1) % 3;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/36/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/36/index.css
new file mode 100644
index 0000000..c609d91
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/36/index.css
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+        left:0px;
+        top:0px;
+        width:454px;
+        height:454px;
+        border-radius: 227px;
+        border-width: 2px;
+        border-color: #00ff00;
+    }
+
+.divBlock {
+    width:125px;
+    height:125px;
+    border-width: 1px;
+    border-color: #dc143c;
+}
+
+.innerDivBlock {
+    width:20px;
+    height:20px;
+    border-width: 1px;
+    border-color:#daa520;
+    background-color: #1e90ff;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/36/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/36/index.hml
new file mode 100644
index 0000000..caa0b7b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/36/index.hml
@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+        <text style="width:320px;height:80px;text-overflow:ellipsis">Component_Div_StyleSet_Test_036</text>
+    </div>
+    <div style="height:270px;flex-direction: column;justify-content: flex-end;" class="divFrame">
+        <div style="width: {{divWidth}}px; height: {{divHeight}}px; border-width: {{divBorder}}px; border-color: red;
+                    padding: {{divPadding}}px; background-color: green; flex-wrap: wrap;" onclick="changeFocusToDiv">
+            <input style="width: {{buttonWidth}}px; height: {{buttonHeight}}px; border-color: yellow;
+                          border-width: {{buttonBorder}}px; padding: {{buttonPadding}}px"
+                  type="button" onclick="changeFocusToButton" value="size include border and padding test">
+            </input>
+            <text style="width:350px">click button above or div to change focus</text>
+        </div>
+        <div style="flex-wrap: wrap; width: 454px; height: 80px;">
+            <input style="width:110px; height: 40px;" value="+width" onclick="increaseWidth"></input>
+            <input style="width:120px; height: 40px;" value="+height" onclick="increaseHeight"></input>
+            <input style="width:90px; height: 40px;" value="+pad" onclick="increasePadding"></input>
+            <input style="width:130px; height: 40px;" value="+border" onclick="increaseBorder"></input>
+            <input style="width:110px; height: 40px;" value="-width" onclick="reduceWidth"></input>
+            <input style="width:120px; height: 40px;" value="-height" onclick="reduceHight"></input>
+            <input style="width:90px; height: 40px;" value="-pad" onclick="reducePadding"></input>
+            <input style="width:130px; height: 40px;" value="-border" onclick="reduceBorder"></input>
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/36/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/36/index.js
new file mode 100644
index 0000000..a233fd2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/div/36/index.js
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    data:{
+        divWidth: 410,
+        divHeight: 190,
+        divPadding: 10,
+        divBorder: 1,
+        buttonWidth: 300,
+        buttonHeight: 90,
+        buttonPadding: 5,
+        buttonBorder: 5,
+        focusView: "div"
+    },
+    changeFocusToDiv() {
+        this.focusView = "div";
+    },
+    changeFocusToButton() {
+        this.focusView = "button";
+    },
+    increaseWidth() {
+        if (this.focusView === "div") {
+            this.divWidth = this.divWidth + 50;
+        } else if (this.focusView === "button") {
+            this.buttonWidth = this.buttonWidth + 10;
+        }
+    },
+    reduceWidth() {
+        if (this.focusView === "div") {
+            this.divWidth = this.divWidth - 50;
+        } else if (this.focusView === "button") {
+            this.buttonWidth = this.buttonWidth - 10;
+        }
+    },
+    increaseHeight() {
+        if (this.focusView === "div") {
+            this.divHeight = this.divHeight + 50;
+        } else if (this.focusView === "button") {
+            this.buttonHeight = this.buttonHeight + 10;
+        }
+    },
+    reduceHight() {
+        if (this.focusView === "div") {
+            this.divHeight = this.divHeight - 50;
+        } else if (this.focusView === "button") {
+            this.buttonHeight = this.buttonHeight - 10;
+        }
+    },
+    increasePadding() {
+        if (this.focusView === "div") {
+            this.divPadding = this.divPadding + 10;
+        } else if (this.focusView === "button") {
+            this.buttonPadding = this.buttonPadding + 10;
+        }
+    },
+    reducePadding() {
+        if (this.focusView === "div") {
+            this.divPadding = this.divPadding - 10;
+        } else if (this.focusView === "button") {
+            this.buttonPadding = this.buttonPadding - 10;
+        }
+    },
+    increaseBorder() {
+        if (this.focusView === "div") {
+            this.divBorder = this.divBorder + 10;
+        } else if (this.focusView === "button") {
+            this.buttonBorder = this.buttonBorder + 10;
+        }
+    },
+    reduceBorder() {
+        if (this.focusView === "div") {
+            this.divBorder = this.divBorder - 10;
+        } else if (this.focusView === "button") {
+            this.buttonBorder = this.buttonBorder - 10;
+        }
+    },
+    ...routePage('pages/div/35/index')
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/global/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/global/index.css
new file mode 100644
index 0000000..9bc89c6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/global/index.css
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.title {
+  font-size: 30px;
+  text-align: center;
+  width: 300px;
+  height: 100px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/global/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/global/index.hml
new file mode 100644
index 0000000..5cf1bcd
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/global/index.hml
@@ -0,0 +1,29 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container">
+  <text class="title">
+    Global
+  </text>
+  <text class="title">
+    is exist $root?{{!value}}
+  </text>
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/global/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/global/index.js
new file mode 100644
index 0000000..f16f1d6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/global/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../common/js/general";
+export default {
+  data: {
+    value: true
+  },
+  onInit() {
+    this.value = typeof $root === "undefined";
+  },
+  ...routePage('', '')
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image-animator/01/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image-animator/01/index.css
new file mode 100644
index 0000000..38f34d7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image-animator/01/index.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: center;
+    left: 0px;
+    top: 0px;
+    width: 454px;
+    height: 454px;
+}
+.animator-box {
+    width: 100px;
+    height: 100px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.animator-title {
+    font-size: 20px;
+    text-align: center;
+}
+.animator {
+    width: 80px;
+    height: 80px;
+}
+.btn-box {
+    width: 400px;
+    height: 120px;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+}
+.btn {
+    border-radius: 2px;
+    width: 180px;
+    margin-top: 8px;
+}
+.btn--big {
+    width: 373px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image-animator/01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image-animator/01/index.hml
new file mode 100644
index 0000000..bd53a8e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image-animator/01/index.hml
@@ -0,0 +1,62 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="container">
+  <div class="animator-box">
+    <image-animator class="animator" ref="animator1" images="{{frames}}" duration="1s" iteration="1" />
+    <text class="animator-title">
+      null
+    </text>
+  </div>
+  <div class="animator-box">
+    <image-animator class="animator" ref="animator2" images="{{frames}}" duration="1s" iteration="1"
+        fillmode="none" />
+    <text class="animator-title">
+      none
+    </text>
+  </div>
+  <div class="animator-box">
+    <image-animator class="animator" ref="animator3" images="{{frames}}" duration="1s" iteration="1"
+        fillmode="forwards"/>
+    <text class="animator-title">
+      forwards
+    </text>
+  </div>
+  <div class="animator-box">
+    <image-animator class="animator" ref="animator5" images="{{frames}}" duration="1s" iteration="1"
+        reverse="true" />
+    <text class="animator-title">
+      null
+    </text>
+  </div>
+  <div class="animator-box">
+    <image-animator class="animator" ref="animator6" images="{{frames}}" duration="1s" iteration="1" reverse="true"
+        fillmode="none" />
+    <text class="animator-title">
+      none
+    </text>
+  </div>
+  <div class="animator-box">
+    <image-animator class="animator" ref="animator7" images="{{frames}}" duration="1s" iteration="1" reverse="true"
+        fillmode="forwards"/>
+    <text class="animator-title">
+      forwards
+    </text>
+  </div>
+  <div class="btn-box">
+    <input class="btn" type="button" value="start" @click="handleStart" />
+    <input class="btn" type="button" value="stop" @click="handleStop" />
+    <input class="btn btn--big" type="button" value="home" @click="handleGoHome" />
+  </div>
+</div>
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image-animator/01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image-animator/01/index.js
new file mode 100644
index 0000000..170b71a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image-animator/01/index.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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';
+
+export default {
+  data: {
+    frames: [{
+      src: 'common/asserts/numbers/0.png'
+    }, {
+      src: 'common/asserts/numbers/2.png'
+    }, {
+      src: 'common/asserts/numbers/3.png'
+    }, {
+      src: 'common/asserts/numbers/4.png'
+    }, {
+      src: 'common/asserts/numbers/5.png'
+    }, {
+      src: 'common/asserts/numbers/6.png'
+    }, {
+      src: 'common/asserts/numbers/7.png'
+    }, {
+      src: 'common/asserts/numbers/8.png'
+    }, {
+      src: 'common/asserts/numbers/9.png'
+    }]
+  },
+  handleStart() {
+    execCommand(this, "start");
+  },
+  handleStop() {
+    execCommand(this, "stop");
+  },
+  handleGoHome() {
+    router.replace({
+      uri: '/'
+    });
+  }
+}
+
+function execCommand(vm, command) {
+  const keys = Object.keys(vm.$refs);
+  keys.forEach((key) => vm.$refs[key][command]());
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/hellopng.png b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/hellopng.png
new file mode 100644
index 0000000..6ebbe65
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/hellopng.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/index.css
new file mode 100644
index 0000000..15a3f75
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/index.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.imageBlock {
+    width:75px;
+    height:75px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/index.hml
new file mode 100644
index 0000000..2868f1c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/index.hml
@@ -0,0 +1,32 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_Image_AttributeSet_Test_001</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <image src="common/icon.png" class="imageBlock"></image>
+        <image src="/common/icon.png" class="imageBlock"></image>
+        <image src="common/234.jpg" class="imageBlock"></image>
+        <image src="common/a3.png" class="imageBlock"></image>
+        <image src="common/hellopng.png" class="imageBlock"></image>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/index.js
new file mode 100644
index 0000000..b3e43d5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/01/index.js
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage, routeSimplePage } from "../../../common/js/general";
+export default {
+  nextPage: routeSimplePage("pages/image/02/index"),
+  ...routePage("pages/index/index", "pages/image/02/index")
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/02/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/02/index.css
new file mode 100644
index 0000000..15a3f75
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/02/index.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.imageBlock {
+    width:75px;
+    height:75px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/02/index.hml
new file mode 100755
index 0000000..e54397c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/02/index.hml
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_Image_AttributeSet_Test_002</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <image src="common/icon" class="imageBlock"></image>
+        <image src="/common/icon" class="imageBlock"></image>
+        <image src="common/icon.png;common/234.png" class="imageBlock"></image>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/02/index.js
new file mode 100644
index 0000000..72275da
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/02/index.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+export default {
+  ...routePage("pages/image/01/index", "pages/image/04/index")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/04/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/04/index.css
new file mode 100644
index 0000000..af249d0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/04/index.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+        left:0px;
+        top:0px;
+        width:454px;
+        height:454px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 227px;
+        border-width: 2px;
+        border-color: #00ff00;
+}
+
+.imageBlock {
+    width:75px;
+    height:75px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/04/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/04/index.hml
new file mode 100755
index 0000000..d9497a6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/04/index.hml
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_Image_AttributeSet_Test_004</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <image src="common/icon.png" class="imageBlock"></image>
+        <image src="common/icon.png" class="imageBlock"></image>
+        <image src="common/icon.png" class="imageBlock"></image>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/04/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/04/index.js
new file mode 100644
index 0000000..f98594c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/04/index.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage('pages/image/02/index', 'pages/image/05/index')
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/05/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/05/index.css
new file mode 100644
index 0000000..af249d0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/05/index.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+        left:0px;
+        top:0px;
+        width:454px;
+        height:454px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 227px;
+        border-width: 2px;
+        border-color: #00ff00;
+}
+
+.imageBlock {
+    width:75px;
+    height:75px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/05/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/05/index.hml
new file mode 100755
index 0000000..5737116
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/05/index.hml
@@ -0,0 +1,27 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_Image_AttributeSet_Test_005</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <image src="https://common/leftHead.png" class="imageBlock"></image>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/05/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/05/index.js
new file mode 100644
index 0000000..1e807d9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/image/05/index.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    ...routePage('pages/image/04/index', '')
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/index/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000..5bfa218
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/index/index.css
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+
+.listItem {
+  width: 454px;
+  height: 80px;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 140px;
+  margin-top: 0px;
+}
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.buttonContainerStyle {
+  width: 454px;
+  height: 80px;
+}
+
+.buttonStyle {
+  width: 240px;
+  height: 60px;
+  margin-left: 110px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/index/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000..30d412e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,87 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<list class="container">
+  <list-item style="height:40px;width:454px;">
+  </list-item>
+  <list-item class="titleContainerStyle">
+      <text class="titleTextStyle">
+        UI自动化测试
+      </text>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="canvas" onclick="changeCanvas"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="chart" onclick="changeChart"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="data-binding" onclick="changeDataBinding"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="directive" onclick="changeDirective"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="div" onclick="changeDiv"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="global" onclick="changeGlobal"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="image" onclick="changeImage"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="image-animator" onclick="changeImageAnimator"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="input" onclick="changeInput"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="lifecycle" onclick="changeLifecycle"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="list" onclick="changeList"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="listitem" onclick="changeListItem"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="picker_view" onclick="changePickerView"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="resource" onclick="changeResource"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="router" onclick="changeRouter"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="scroll" onclick="changeScroll"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="swiper" onclick="changeSwiper"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="switch" onclick="changeSwitch"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="arc" onclick="changeArc"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="style" onclick="changeStyle"/>
+  </list-item>
+  <list-item class="listItem">
+    <input type="button" class="buttonStyle" value="radioWidth" onclick="changeWidth"/>
+  </list-item>
+</list>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/index/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000..730c550
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/index/index.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage, routeSimplePage } from "../../common/js/general";
+export default {
+  changeSwiper: routeSimplePage("pages/swiper/SwiperA06/index"),
+  changeSwitch: routeSimplePage("pages/switch/SwitchA04/index"),
+  changeResource: routeSimplePage("pages/resource/resource005/index"),
+  changeDiv: routeSimplePage("pages/div/01/index"),
+  changeList: routeSimplePage("pages/list/list1/index"),
+  changeListItem: routeSimplePage("pages/list-item/item1/index"),
+  changeScroll: routeSimplePage("pages/scroll/scroll1/index"),
+  changeCanvas: routeSimplePage("pages/canvas/indexAPI/index"),
+  changeChart: routeSimplePage("pages/chart/0304/index"),
+  changeImage: routeSimplePage("pages/image/01/index"),
+  changeImageAnimator: routeSimplePage("pages/image-animator/01/index"),
+  changeArc: routeSimplePage("pages/arc/index"),
+  changeRouter: routeSimplePage("pages/router/01/index"),
+  changePickerView: routeSimplePage("pages/picker_view/attr006/index"),
+  changeDataBinding: routeSimplePage("pages/data-binding/01/index"),
+  changeDirective: routeSimplePage("pages/directive/01/index"),
+  changeGlobal: routeSimplePage("pages/global/index"),
+  changeLifecycle: routeSimplePage("pages/lifecycle/index"),
+  changeInput: routeSimplePage("pages/input/ButtonB023/index"),
+  changeStyle: routeSimplePage("pages/style/StyleBaseTest001/index"),
+  changeWidth: routeSimplePage("pages/switch-radio-width/width_switch_value_test009/index")
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonA028/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonA028/index.css
new file mode 100644
index 0000000..27c345d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonA028/index.css
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 600px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 60px;
+    margin-left: 80px;
+    margin-top: 10px;
+}
+
+.bottom {
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
+
+.bottom {
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonA028/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonA028/index.hml
new file mode 100644
index 0000000..427f9dc
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonA028/index.hml
@@ -0,0 +1,26 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" for = "{{data}}" class = "button" value = "{{$item}}" />
+    <input type = "button" onclick = "changeIf" class = "button" value="changeIf" />
+    <input type = "button" onclick = "changeStatus" class = "button" value = "changeStatus"/>
+    <input type = "button" onclick = "changeFor" class = "button" value = "changeFor" if = "{{ifStatus}}" show = "{{showStatus}}"/>
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value ="首页"/>
+        <input type = "button" class = "page" onclick = "goNext" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonA028/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonA028/index.js
new file mode 100644
index 0000000..33ffb8a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonA028/index.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {goPage} from "../../../common/js/general";
+export default {
+    data:{
+        ifStatus:true,
+        showStatus:true,
+        data:["data1","data2"]
+    },
+    changeIf:function() {
+        if(this.ifStatus) {
+            this.ifStatus = false;
+        } else {
+            this.ifStatus = true;
+        }
+        console.log("ifStatus:" + this.ifStatus);
+    },
+    changeStatus:function() {
+        if(this.showStatus) {
+            this.showStatus = false;
+        } else {
+            this.showStatus = true;
+        }
+        console.log("showStatus:"+this.showStatus);
+    },
+    changeFor:function() {
+        if(this.data.length == 2) {
+            this.data = ["data1"];
+        } else  {
+            this.data = ["data1", "data2"];
+        }
+    },
+    ...goPage("pages/input/CheckboxE027/index", "pages/input/CheckboxA029/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB023/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB023/index.css
new file mode 100644
index 0000000..2b161dd
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB023/index.css
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container{
+    width: 454px;
+    height: 600px;
+    flex-direction: column
+}
+
+.button{
+    width:200px;
+    height:60px;
+    margin-left: 100px;
+    margin-top: 20px;
+}
+
+.bottom {
+    width: 454px;
+    height:150px;
+}
+
+.pagePrevious{
+    width: 100px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:100px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB023/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB023/index.hml
new file mode 100644
index 0000000..beeed5c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB023/index.hml
@@ -0,0 +1,27 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" value = "{{value}}" class = "button" style ="fontSize:{{fontSize}};fontFamily:{{fontFamily}};color:{{color}}"/>
+    <input type="button" value = "value" onclick="changeValue" class = "button"/>
+    <input type = "button" value = "fontSize" onclick = "changeFontSize" class = "button"/>
+    <input type = "button" value = "fontFamily" onclick = "changeFontFamily" class = "button"/>
+    <input type = "button" value = "color" onclick = "changeColor" class = "button"/>
+    <div class = "bottom">
+        <input type = "button" value = "上一页" class = "pagePrevious" onclick="goPrevious"/>
+        <input type = "button" value = "首页" class = "page" onclick="goHome"/>
+        <input type = "button" value = "下一页" class = "page" onclick = "goNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB023/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB023/index.js
new file mode 100644
index 0000000..5d3e9dc
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB023/index.js
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {goPage} from "../../../common/js/general";
+export default {
+    data:{
+        value:"中文",
+        fontSize:30,
+        fontFamily:"HYQiHei-65S",
+        color:	220
+    },
+    changeValue:function() {
+        if(this.value == "chinese") {
+            this.value = "中文";
+        } else {
+            this.value = "chinese";
+        }
+    },
+    changeFontSize:function() {
+        if(this.fontSize == 30) {
+            this.fontSize = 38;
+        } else {
+            this.fontSize = 30;
+        }
+    },
+    changeFontFamily:function () {
+        if(this.fontFamily == "HYQiHei-65S") {
+            this.fontFamily = "";
+        } else {
+            this.fontFamily = "HYQiHei-65S";
+        }
+    },
+    changeColor:function() {
+        if(this.color == 220) {
+            this.color = 80;
+        } else {
+            this.color = 220;
+        }
+    },
+    ...goPage("pages/index/index", "pages/input/InputEventTest024/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB30/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB30/index.css
new file mode 100644
index 0000000..f243397
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB30/index.css
@@ -0,0 +1,99 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.divClass {
+  width: 452px;
+  height: 452px;
+  margin: 0px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border-width: 1px;
+  border-color: #0000ff;
+  border-radius: 226px;
+  background-color:black;
+  display: flex;
+  left: 0px;
+  top: 0px;
+
+  flex-direction: row;
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.div2Class {
+  width: 300px;
+  height: 300px;
+  padding: 1px;
+  margin: 0px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border-width: 1px;
+  border-color: #0000ff;
+  border-radius: 20px;
+  background-color:#77C054;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.textClass {
+  width: 300px;
+  height: 40px;
+  margin: 3px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border-width: 1px;
+  border-color: #0000ff;
+  border-radius: 50px;
+  background-color: black;
+  display: flex;
+  left: 100px;
+  top: 20px;
+
+  color: yellow;
+  font-size: 30px;
+  letter-spacing: 1px;
+  text-align: center;
+  text-overflow: ellipsis;
+  font-family: HYQiHei-65S;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
+
+.bottom {
+    width: 454px;
+    height:150px;
+}
+
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB30/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB30/index.hml
new file mode 100644
index 0000000..8a3c142
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB30/index.hml
@@ -0,0 +1,53 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="divClass">
+  <text class="textClass">绑定性能测试</text>
+  <div class="div2Class">
+    <input style="width: {{width}};
+    height:{{height}};
+    padding: 10px;
+    margin: 3px;
+    margin-left: {{marginleft}};
+    margin-right: {{marginright}};
+    margin-top: {{margintop}};
+    margin-bottom: {{marginbottom}};
+    border-width: 2px;
+    border-color: #0000ff;
+    background-color: {{backgroundcolor}};
+    border-radius: {{borderRadius}};
+    color: {{color}};
+    font-size: {{fontSize}};" type="button" value = "内联样式全面变化" onclick="Test1" onlongpress="Test2"></input>
+    <text style="width: {{width}};
+    height:{{height}};
+    padding: 10px;
+    margin: 3px;
+    margin-left: {{marginleft}};
+    margin-right: {{marginright}};
+    margin-top: {{margintop}};
+    margin-bottom: {{marginbottom}};
+    border-width: 2px;
+    border-color: #0000ff;
+    background-color: {{backgroundcolor}};
+    border-radius: {{borderRadius}};
+    color: {{color}};
+    font-size: {{fontSize}};"  onclick="Test1" onlongpress="Test2">内联样式全面变化</text>
+  </div>
+  <div class = "bottom">
+    <input type = "button" value = "上一页" onclick = "goPrevious" class = "previous"/>
+    <input type = "button" value = "首页" onclick = "goHome" class = "page"/>
+    <input type = "button" value = "下一页" onclick = "goNext" class = "page"/>
+  </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB30/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB30/index.js
new file mode 100644
index 0000000..6ff141e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/ButtonB30/index.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {goPage} from "../../../common/js/general";
+export default {
+  data: {
+    btnValue1: "属性变化",
+    color: 0x3366ff,
+    fontSize: 30,
+    width: 300,
+    height: 40,
+    padding: 10,
+    borderRadius: 50,
+    borderWidth: 1,
+    margin: 3,
+    marginleft: 5,
+    marginright: 5,
+    margintop: 5,
+    marginbottom: 5,
+    borderwidth: 1,
+    bordercolor: 0x0000ff,
+    backgroundcolor: 0x004E8C
+  },
+  onInit: function() {
+    console.info("----- bindTest3 page onInit-------");
+  },
+  Test1: function() {
+    this.color = 0xffcc33;
+    this.fontSize = 38;
+    this.width = 150;
+    this.height = 100;
+    this.padding = 100;
+    this.borderRadius = 100;
+    this.borderWidth = 5;
+    this.padding = 50;
+    this.margin = 13;
+    this.marginleft = 15;
+    this.marginright = 15;
+    this.margintop = 15;
+    this.marginbottom = 15;
+    this.borderwidth = 10;
+    this.bordercolor = 0X00ACAC;
+    this.backgroundcolor = 0xFEF102;
+  },
+  Test2: function() {
+    this.color = 0x3366ff;
+    this.fontSize = 30;
+    this.width = 300;
+    this.height = 40;
+    this.padding = 10;
+    this.borderRadius = 50;
+    this.borderWidth = 1;
+    this.padding = 10;
+    this.margin = 3;
+    this.marginleft = 5;
+    this.marginright = 5;
+    this.margintop = 5;
+    this.marginbottom = 5;
+    this.borderwidth = 1;
+    this.bordercolor = 0x0000ff;
+    this.backgroundcolor = 0x004E8C;
+  },
+  ...goPage("pages/input/CheckboxA029/index", "pages/input/RadioEventTest031/index")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxA029/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxA029/index.css
new file mode 100644
index 0000000..ffd29ce
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxA029/index.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container{
+    width: 454px;
+    height: 600px;
+    flex-direction: column;
+}
+
+.checkbox {
+    margin-left: 100px;
+    margin-top: 10px;
+}
+
+.button {
+    width: 200px;
+    height:60px;
+    margin-left: 80px;
+    margin-top: 10px;
+}
+
+.bottom{
+    width:454px;
+    height:200px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top:10px;
+}
+
+.page {
+    width:120px;
+    height:60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxA029/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxA029/index.hml
new file mode 100644
index 0000000..b3179dc
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxA029/index.hml
@@ -0,0 +1,29 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <div style = "width:400px;height:150px;">
+    <input type = "checkbox" class = "checkbox"  for = "{{data}}" checked = "{{$item}}"/>
+    </div>
+    <input type = "checkbox" class = "checkbox" checked = "true" if = "{{ifStatus}}" show = "{{showStatus}}"/>
+    <input type = "button" class = "button" onclick = "changeIf" value = "changeIf"/>
+    <input type="button" class = "button" onclick = "changeShow" value = "changeShow"/>
+    <input type = "button" class = "button" onclick = "changeFor" value = "changeFor"/>
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick="goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value = "首页"/>
+        <input type = "button" class = "page" onclick = "goNext" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxA029/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxA029/index.js
new file mode 100644
index 0000000..853040f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxA029/index.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {goPage} from "../../../common/js/general";
+export default {
+    data:{
+       ifStatus:true,
+       data:[true, false],
+       showStatus:true
+    },
+    changeIf:function() {
+        if(this.ifStatus) {
+            this.ifStatus = false;
+        } else {
+            this.ifStatus = true;
+        }
+    },
+    changeShow:function() {
+        if(this.showStatus) {
+            this.showStatus = false;
+        } else {
+            this.showStatus = true;
+        }
+    },
+    changeFor:function() {
+        if(this.data.length == 2) {
+            this.data =[true];
+        } else {
+            this.data = [true, false];
+        }
+    },
+    ...goPage("pages/input/ButtonA028/index", "pages/input/ButtonB30/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxB025/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxB025/index.css
new file mode 100644
index 0000000..b8fbe8f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxB025/index.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column
+}
+
+.checkbox {
+    margin-left: 150px;
+    margin-top: 40px;
+}
+
+.text {
+    margin-left: 100px;
+    margin-top: 20px;
+    text-align:center;
+    width: 250px;
+    height: 60px;
+}
+
+.bottom {
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height:60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxB025/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxB025/index.hml
new file mode 100644
index 0000000..331f456
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxB025/index.hml
@@ -0,0 +1,24 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "checkbox" checked="{{checked}}" class="checkbox" onchange = "changeEvent"/>
+    <text class = "text" onclick="changeChecked">{{show}}</text>
+    <div class = "bottom">
+        <input type = "button" value = "上一页" class ="previous" onclick="goPrevious"/>
+        <input type = "button" value = "首页" class = "page" onclick = "goHome"/>
+        <input type = "button" value = "下一页" class = "page" onclick = "goNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxB025/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxB025/index.js
new file mode 100644
index 0000000..a40291e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxB025/index.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {goPage} from "../../../common/js/general";
+export default {
+    data:{
+        checked:true,
+        show:"show"
+    },
+    changeEvent:function(e) {
+        if(e.checked) {
+            this.show = "false";
+        } else {
+            this.show = "true";
+        }
+    },
+    changeChecked:function() {
+        this.checked = !this.checked;
+    },
+    ...goPage("pages/input/InputEventTest024/index", "pages/input/CheckboxE026/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE026/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE026/index.css
new file mode 100644
index 0000000..7096378
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE026/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.checkbox {
+    margin-left: 100px;
+    margin-top: 20px;
+    flex-direction: column;
+}
+
+.text {
+    width: 300px;
+    height: 60px;
+    margin-left:100px;
+    margin-top:30px;
+    text-align: center;
+}
+
+.bottom {
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height:60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE026/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE026/index.hml
new file mode 100644
index 0000000..18be652
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE026/index.hml
@@ -0,0 +1,26 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "checkbox" class = "checkbox" onchange="changeEvent" onclick="clickEvent" onlongpress="pressEvent"/>
+    <text class = "text">{{click}}</text>
+    <text class = "text">{{press}}</text>
+    <text class = "text">{{change}}</text>
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick="goPrevious" value = "上一页"></input>
+        <input type = "button" class = "page" onclick="goHome" value = "首页"></input>
+        <input type = "button" class = "page" onclick = "goNext" value = "下一页"></input>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE026/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE026/index.js
new file mode 100644
index 0000000..6503fc8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE026/index.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {goPage} from "../../../common/js/general";
+export default {
+    data:{
+        click:"click",
+        press:"press",
+        change:"change"
+    },
+    ...goPage("pages/input/CheckboxB025/index", "pages/input/CheckboxE027/index"),
+    clickEvent:function() {
+        if(this.click == "click") {
+            this.click = "clicked";
+        } else {
+            this.click = "click";
+        }
+    },
+    changeEvent:function(e) {
+        if(e.checked) {
+            this.change = "true";
+        } else {
+            this.change = "false";
+        }
+    },
+    pressEvent:function() {
+        if(this.press = "press") {
+            this.press = "pressed";
+        } else {
+            this.press = "press";
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE027/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE027/index.css
new file mode 100644
index 0000000..9737a02
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE027/index.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container{
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.checkbox {
+    margin-left: 100px;
+    margin-top: 20px;
+}
+
+.text {
+    width: 250px;
+    margin-left:100px;
+    margin-top: 40px;
+    text-align: center;
+}
+
+.bottom {
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top:10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE027/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE027/index.hml
new file mode 100644
index 0000000..879ba2f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE027/index.hml
@@ -0,0 +1,24 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "checkbox" class = "checkbox" onchange = "changeEvent" checked = "{{checked}}"/>
+    <text class = "text">{{show}}</text>
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick="goHome" value = "首页"/>
+        <input type = "button" class = "page" onclick="goNext" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE027/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE027/index.js
new file mode 100644
index 0000000..a4ddd19
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/CheckboxE027/index.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {goPage} from "../../../common/js/general";
+export default {
+    data:{
+        checked:true,
+        show:"show"
+    },
+    changeEvent:function(e){
+        this.checked = !this.checked;
+        if(e.checked) {
+            this.show = "true";
+        } else {
+            this.show = "false";
+        }
+    },
+    ...goPage("pages/input/CheckboxE026/index", "pages/input/ButtonA028/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/InputEventTest024/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/InputEventTest024/index.css
new file mode 100644
index 0000000..74273bb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/InputEventTest024/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container{
+    width: 454px;
+    height: 454px;
+    flex-direction: column
+}
+
+.button{
+    width:200px;
+    height:60px;
+    margin-left: 100px;
+    margin-top: 20px;
+}
+
+.bottom {
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
+
+.text {
+    width: 300px;
+    height:60px;
+    margin-top: 10px;
+    margin-left: 50px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/InputEventTest024/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/InputEventTest024/index.hml
new file mode 100644
index 0000000..c4aefe4
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/InputEventTest024/index.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" value = "one Arg" onclick = "clickOneArg" onlongpress="pressOneArg" class = "button"/>
+    <input type = "button" value = "no Arg" onclick = "clickNoArg" onlongpress="pressNoArg" class = "button"/>
+    <text class ="text">{{show}}</text>
+    <div class = "bottom">
+        <input type = "button" value = "上一页" class ="previous" onclick="goPrevious"/>
+        <input type = "button" value = "首页" class = "page" onclick="goHome"/>
+        <input type = "button" value = "下一页" class = "page" onclick="goNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/InputEventTest024/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/InputEventTest024/index.js
new file mode 100644
index 0000000..0411ca1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/InputEventTest024/index.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {goPage} from "../../../common/js/general";
+export default {
+    data:{
+        show:"show"
+    },
+    clickOneArg:function() {
+        this.show = "clickOne";
+    },
+    pressOneArg:function() {
+        this.show = "pressOne";
+    },
+    clickNoArg:function() {
+        this.show = "clickNo";
+    },
+    pressNoArg:function() {
+        this.show = "pressNo";
+    },
+    ...goPage("pages/input/ButtonB023/index", "pages/input/CheckboxB025/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/RadioEventTest031/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/RadioEventTest031/index.css
new file mode 100644
index 0000000..7a16423
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/RadioEventTest031/index.css
@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.title {
+  left: 120px;
+  top: 100px;
+  font-size: 30px;
+  text-align: center;
+  width: 300px;
+  height: 100px;
+}
+.input {
+  left: 155px;
+  top: 190px;
+  width: 110px;
+  /* height: 50px; */
+  color: blue;
+  font-size: 30px;
+  font-family: HYQiHei-65S;
+}
+.input1 {
+  left: 170px;
+  top: 260px;
+  width: 110px;
+  height: 50px;
+  color: blue;
+  font-size: 30px;
+  font-family: HYQiHei-65S;
+}
+.input2 {
+  left: 170px;
+  top: 330px;
+  width: 110px;
+  height: 60px;
+  color: blue;
+  font-size: 30px;
+  font-family: HYQiHei-65S;
+}
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
+
+.bottom {
+    left:50px;
+    top:400px;
+    width: 454px;
+    height:150px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/RadioEventTest031/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/RadioEventTest031/index.hml
new file mode 100644
index 0000000..9c15af5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/RadioEventTest031/index.hml
@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack class="container">
+  <text class="title">
+    Hello {{title}}
+  </text>
+  <input
+    class="input"
+    type="button"
+    name="input1"
+    value="button"
+    checked="true"
+    @click="clickbutton"
+    onlongpress="buttonpress">
+  </input>
+  <input
+    class="input1"
+    type="checkbox"
+    checked="false"
+    value="check"
+    name="input2"
+    onchange="changecheckbox">
+  </input>
+  <input
+    class="input2"
+    type="radio"
+    checked="false"
+    value="radio"
+    name="input3"
+    @change="changeradio">
+  </input>
+  <div class = "bottom">
+    <input type = "button" class = "previous" onclick="goPrevious" value = "上一页"/>
+    <input type = "button" class = "home" onclick = "goHome" value = "首页"/>
+  </div>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/RadioEventTest031/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/RadioEventTest031/index.js
new file mode 100644
index 0000000..f5ba015
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/input/RadioEventTest031/index.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {goPage} from "../../../common/js/general";
+export default {
+  data: {
+    title: 'World'
+  },
+  clickbutton(){
+    this.title="12331"
+  },
+  buttonpress(){
+    this.title="zhongguo"
+  },
+  changecheckbox(){
+    this.title=this.title+11
+  },
+  changeradio(){
+    this.title=this.title+"!"
+  },
+  ...goPage("pages/input/ButtonB30/index", "")
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/lifecycle/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/lifecycle/index.css
new file mode 100644
index 0000000..78e29ea
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/lifecycle/index.css
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.title {
+  font-size: 30px;
+  text-align: center;
+  width: 400px;
+  height: 50px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/lifecycle/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/lifecycle/index.hml
new file mode 100644
index 0000000..67c61d2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/lifecycle/index.hml
@@ -0,0 +1,27 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container">
+  <text class="title">
+    Lifecycle
+  </text>
+  <text class="title" for="{{lifecycles}}">{{$item}}</text>
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/lifecycle/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/lifecycle/index.js
new file mode 100644
index 0000000..46c40a1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/lifecycle/index.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../common/js/general";
+export default {
+  data: {
+    lifecycles: []
+  },
+  onInit() {
+    console.log("onInit triggered.");
+    this.lifecycles.push("onInit triggered.");
+  },
+  onReady() {
+    console.log("onReady triggered.");
+    this.lifecycles.push("onReady triggered.");
+  },
+  onShow() {
+    console.log("onShow triggered.");
+    this.lifecycles.push("onShow triggered.");
+  },
+  onDestroy() {
+    console.log("onDestroy triggered.");
+    this.lifecycles.push("onDestroy triggered.");
+  },
+  ...routePage("", "")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item1/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item1/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item1/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item1/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item1/index.hml
new file mode 100755
index 0000000..aa62328
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item1/index.hml
@@ -0,0 +1,38 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <text style="left:70px;top:20px;width:170px;height:40px;">list-item1</text>
+  <input type="button" style="left:240px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list
+      id="list1"
+      style="left:70px;top:73px;width:270px;height:70px;flex-direction: column;border-width:2px;border-color:#008000;flex-direction: column"
+      onclick="listClick"
+      onscrollend="scrollEnd"
+    >
+    <list-item style="width:180px;height:40px;">
+      <text style="color: #ffa500;width:180px;height:40px;">
+        mytext0
+      </text>
+    </list-item>
+    <list-item style="width:180px;height:40px;">
+      <text style="color: #ffa500;width:180px;height:40px;">
+        mytext1
+      </text>
+    </list-item>
+  </list>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item1/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item1/index.js
new file mode 100644
index 0000000..d7045a5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item1/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {alterPage} from "../../../common/js/general";
+export default {
+  ...alterPage("", "pages/list-item/item2/index"),
+  listClick() {
+    console.log("list onclick is triggered");
+  },
+  scrollEnd(endState, endComponentIndex) {
+    console.log("list onscrollend is triggered, end component index=" + endComponentIndex);
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item2/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item2/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item2/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item2/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item2/index.hml
new file mode 100755
index 0000000..2520e64
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item2/index.hml
@@ -0,0 +1,53 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <text style="left:70px;top:20px;width:170px;height:40px;">list-item2</text>
+  <input type="button" style="left:240px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list
+      id="list1"
+      style="left:70px;top:73px;width:270px;height:100px;flex-direction: column;border-width:2px;border-color:#008000"
+      onclick="listClick"
+      onscrollend="scrollEnd"
+    >
+    <list-item style="width:270px;height:60px;">
+      <stack style="width:270px;height:60px;">
+        <input type="button" style="left:50px;width:150px;height:60px;" value="button1"/>
+      </stack>
+    </list-item>
+    <list-item style="width:270px;height:20px;">
+      <stack style="width:270px;height:4px;background-color:#8b8b7a;left:0px;top:0px;">
+      </stack>
+    </list-item>
+    <list-item style="width:270px;height:50px;">
+      <stack style="width:270px;height:50px;">
+        <text style="color:#ffa500;width:454px;height:50px;left:80px;top:0px;">
+          text1
+        </text>
+      </stack>
+    </list-item>
+    <list-item style="width:270px;height:20px;">
+      <stack style="width:270px;height:4px;background-color:#8b8b7a;left:0px;top:0px;">
+      </stack>
+    </list-item>
+    <list-item style="width:270px;height:60px;">
+      <stack style="width:270px;height:60px;">
+        <input type="button" style="left:50px;width:150px;height:60px;" value="button2"/>
+      </stack>
+    </list-item>
+  </list>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item2/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item2/index.js
new file mode 100644
index 0000000..6644123
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item2/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {alterPage} from "../../../common/js/general";
+export default {
+  ...alterPage("pages/list-item/item1/index", "pages/list-item/item3/index"),
+  listClick() {
+    console.log("list onclick is triggered");
+  },
+  scrollEnd(endState, endComponentIndex) {
+    console.log("list onscrollend is triggered, end component index=" + endComponentIndex);
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item3/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item3/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item3/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item3/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item3/index.hml
new file mode 100755
index 0000000..4cc1e30
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item3/index.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <text style="left:70px;top:20px;width:170px;height:40px;">list-item3</text>
+  <input type="button" style="left:240px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list
+      id="list1"
+      style="left:70px;top:73px;width:270px;height:240px;flex-direction: column;border-width:2px;border-color:#1e90ff"
+      onclick="listClick"
+      onscrollend="scrollEnd"
+    >
+    <list-item style="width:270px;height:120px;" for="{{listData}}">
+      <image src="{{$item}}" style="width:120px;height:120px;" />
+      <text style="color: #ffa500;width:130px;height:50px;">
+        first--{{$idx}}
+      </text>
+    </list-item>
+  </list>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item3/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item3/index.js
new file mode 100644
index 0000000..0aa9552
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item3/index.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {alterPage} from "../../../common/js/general";
+export default {
+  data: {
+    listData: []
+  },
+  ...alterPage("pages/list-item/item2/index", "pages/list-item/item4/index"),
+  listClick() {
+    console.log("list onclick is triggered");
+  },
+  scrollEnd(endState, endComponentIndex) {
+    console.log("list onscrollend is triggered, end component index=" + endComponentIndex);
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item4/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item4/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item4/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item4/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item4/index.hml
new file mode 100755
index 0000000..0ad9c94
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item4/index.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <text style="left:70px;top:20px;width:170px;height:40px;">list-item4</text>
+  <input type="button" style="left:240px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list
+      id="list1"
+      style="left:70px;top:73px;width:270px;height:240px;flex-direction: column;border-width:2px;border-color:#1e90ff"
+      onclick="listClick"
+      onscrollend="scrollEnd"
+    >
+    <list-item style="width:250px;height:120px;" for="{{listData}}">
+      <image src="{{$item}}" style="width:67px;height:67px;" />
+      <text style="color: #ffa500;width:130px;height:50px;">
+        item--{{$idx}}
+      </text>
+    </list-item>
+  </list>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item4/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item4/index.js
new file mode 100755
index 0000000..36d4011
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list-item/item4/index.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {alterPage} from "../../../common/js/general";
+export default {
+  data: {
+    listData: ["common/left.png"]
+  },
+  ...alterPage("pages/list-item/item3/index", ""),
+  listClick() {
+    console.log("list onclick is triggered");
+  },
+  scrollEnd(endState, endComponentIndex) {
+    console.log("list onscrollend is triggered, end component index=" + endComponentIndex);
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list1/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list1/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list1/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list1/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list1/index.hml
new file mode 100755
index 0000000..3cce92c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list1/index.hml
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <text style="left:114px;top:20px;width:100px;height:40px;">list1</text>
+  <input type="button" style="left:227px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list id="list1" style="left:113px;top:113px;width:250px;height:240px;flex-direction: column;border-width:1px;border-color:#ff0000" onclick="listClick" onscrollend="scrollEnd">
+    <list-item class="itemStyle" for="{{listData}}">
+      <image src="{{$item}}" style="width:67px;height:67px;" />
+      <text style="width:160px;height:50px;">
+        item-{{$idx}}
+      </text>
+    </list-item>
+  </list>
+  <input type="button" style="left:170px;top:370px;width:120px;height:40px;" value="splice" onclick="clickSplice"/>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list1/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list1/index.js
new file mode 100644
index 0000000..7557f62
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list1/index.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { alterPage } from "../../../common/js/general";
+import { listData } from "../../../common/js/list";
+export default {
+  data: { listData: listData },
+  ...alterPage("", "pages/list/list2/index"),
+  listClick() {
+    console.log("list onclick is triggered");
+  },
+  scrollEnd(endState, endComponentIndex) {
+    console.log(
+      "list onscrollend is triggered, end component index=" + endComponentIndex
+    );
+  },
+  clickSplice() {
+    console.log("delete last 3 item");
+    this.listData.splice(3, 3);
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list2/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list2/index.css
new file mode 100644
index 0000000..6220000
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list2/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:250px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list2/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list2/index.hml
new file mode 100755
index 0000000..6840ce8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list2/index.hml
@@ -0,0 +1,64 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <text style="left:114px;top:20px;width:300px;height:40px;">list2</text>
+  <input type="button" style="left:227px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list
+      id="list1"
+      style="left:113px;top:73px;width:250px;height:240px;border-width:1px; border-color:#ff0000;flex-direction: column"
+      onclick="listClick"
+      onscrollend="scrollEnd"
+    >
+    <list-item style="width:250px;height:120px;" for="{{listData}}">
+      <image src="{{$item}}" style="width:67px;height:67px;" />
+      <text style="color: #ffa500;width:130px;height:50px;">
+        item--{{$idx}}
+      </text>
+    </list-item>
+  </list>
+  <input
+    type="button"
+    style="left:113px;top:320px;width:80px;height:30px;"
+    value="splice"
+    onclick="clickSplice"
+  />
+  <input
+    type="button"
+    style="left:203px;top:320px;width:80px;height:30px;"
+    value="push"
+    onclick="clickPush"
+  />
+  <input
+    type="button"
+    style="left:293px;top:320px;width:80px;height:30px;"
+    value="pop"
+    onclick="clickPop"
+  />
+  <input
+    type="button"
+    style="left:113px;top:360px;width:80px;height:30px;"
+    value="shift"
+    onclick="clickShift"
+  />
+  <input
+    type="button"
+    style="left:203px;top:360px;width:80px;height:30px;"
+    value="unshift"
+    onclick="clickUnShift"
+  />
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list2/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list2/index.js
new file mode 100755
index 0000000..3b79076
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/list/list2/index.js
@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { alterPage } from "../../../common/js/general";
+import { listData } from "../../../common/js/list";
+export default {
+  data: {
+    listData: listData
+  },
+  ...alterPage("pages/list/list1/index", ""),
+  listClick() {
+    console.log("list onclick is triggered");
+  },
+  scrollStart(startState, startComponentIndex) {
+    console.log(
+      "list onscrollstart is triggered, start component index=" +
+        startComponentIndex
+    );
+  },
+  scrollEnd(endState, endComponentIndex) {
+    console.log(
+      "list onscrollend is triggered, end component index=" + endComponentIndex
+    );
+  },
+  itemSelected(passState, passComponentIndex) {
+    console.log(
+      "list onitemselected is triggered, pass component index=" +
+        passComponentIndex
+    );
+  },
+  clickSplice() {
+    console.log("delete first item and add new item at current position");
+    this.listData.splice(0, 1, "common/leftHead.png");
+  },
+  clickPush() {
+    console.log("add new item after last item");
+    this.listData.push("common/leftHead.png");
+  },
+  clickPop() {
+    console.log("delete the last item");
+    this.listData.pop();
+  },
+  clickShift() {
+    console.log("delete the first item");
+    this.listData.shift();
+  },
+  clickUnShift() {
+    console.log("add new item before the first item");
+    this.listData.unshift("common/leftHead.png");
+  },
+  onInit() {
+    console.log("on init called...");
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr006/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr006/index.hml
new file mode 100644
index 0000000..1db9abd
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr006/index.hml
@@ -0,0 +1,43 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;">attr006</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        type="time"
+        selected="1:10"
+        style="left:50px;top:120px;width:300px;height:200px;"
+        onchange="getTime"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr006/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr006/index.js
new file mode 100644
index 0000000..0e72f0b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr006/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getText, getTime, data} from "../../../common/js/picker_view"
+export default {
+  data: data,
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/index/index", "pages/picker_view/attr007/index"),
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr007/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr007/index.hml
new file mode 100644
index 0000000..af25bda
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr007/index.hml
@@ -0,0 +1,42 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;">attr007</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        type="time"
+        style="left:50px;top:120px;width:300px;height:200px;"
+        onchange="getTime"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr007/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr007/index.js
new file mode 100644
index 0000000..aeba621
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr007/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getText, getTime, data} from "../../../common/js/picker_view"
+export default {
+  data: data,
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/picker_view/attr006/index", "pages/picker_view/attr008/index"),
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr008/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr008/index.hml
new file mode 100644
index 0000000..0d92f6e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr008/index.hml
@@ -0,0 +1,43 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;">attr008</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        type="time"
+        style="left:50px;top:120px;width:300px;height:200px;"
+        selected="25:61px;"
+        onchange="getTime"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr008/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr008/index.js
new file mode 100644
index 0000000..e8ab2e8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/attr008/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getText, getTime, data} from "../../../common/js/picker_view"
+export default {
+  data: data,
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/picker_view/attr007/index", "pages/picker_view/event001/index"),
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind001/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind001/index.hml
new file mode 100644
index 0000000..775eec6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind001/index.hml
@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;" onclick="changeAttrs">bind001</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        type="text"
+        style="left:100px;top:120px;width:200px;height:200px;"
+        range="{{rangeList}}"
+        onchange="getText"
+        selected="{{selectedIndex}}"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind001/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind001/index.js
new file mode 100644
index 0000000..a7cec1b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind001/index.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+import {
+  lifeCycleFunc,
+  getText,
+  getTime
+} from "../../../common/js/picker_view";
+export default {
+  data: {
+    textValue: "text",
+    rangeList: ["Aa", "Bb", "Cc", "Dd", "Ee", "Ff", "Gg", "Hh", "Ii"],
+    selectedIndex: 1
+  },
+  getText: getText,
+  getTime: getTime,
+  ...routePage(
+    "pages/picker_view/event004/index",
+    "pages/picker_view/bind002/index"
+  ),
+  changeAttrs() {
+    this.selectedIndex++;
+    this.rangeList = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+  },
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind002/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind002/index.hml
new file mode 100644
index 0000000..8278d85
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind002/index.hml
@@ -0,0 +1,45 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;" onclick="changeStyles">bind002</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        type="text"
+        style="left:100px;top:120px;width:200px;height:200px;color:{{fontcolor}};selected-color:{{selectedfontcolor}};
+        font-size:{{fontsize}};selected-font-size:{{selectedfontsize}}"
+        range="{{rangeList}}"
+        onchange="getText"
+        selected=2
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind002/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind002/index.js
new file mode 100644
index 0000000..021322e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind002/index.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getTime, getText} from "../../../common/js/picker_view"
+export default {
+  data: {
+    textValue: "text",
+    rangeList: ["Aa", "Bb", "Cc", "Dd", "Ee", "Ff", "Gg", "Hh", "Ii"],
+    fontcolor: 255,
+    selectedfontcolor: 8386312,
+    fontsize: 30,
+    selectedfontsize: 38
+  },
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/picker_view/bind001/index", "pages/picker_view/bind003/index"),
+  changeStyles() {
+    this.fontcolor = 8386312;
+    this.selectedfontcolor = 255;
+    this.fontsize = 38;
+    this.selectedfontsize = 30;
+  },
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind003/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind003/index.hml
new file mode 100644
index 0000000..c2eda23
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind003/index.hml
@@ -0,0 +1,43 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;" onclick="changeAttrs">bind003</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        type="time"
+        style="left:100px;top:120px;width:200px;height:200px;"
+        onchange="getTime"
+        selected="{{selectedTime}}"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind003/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind003/index.js
new file mode 100644
index 0000000..822797e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind003/index.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getTime, getText} from "../../../common/js/picker_view"
+export default {
+  data: {
+    textValue: "time",
+    selectedTime: "0:0"
+  },
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/picker_view/bind002/index", "pages/picker_view/bind004/index"),
+  changeAttrs() {
+    this.selectedTime = "11:11";
+  },
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind004/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind004/index.hml
new file mode 100644
index 0000000..4316a5d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind004/index.hml
@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;" onclick="changeStyles">bind004</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        type="time"
+        style="left:100px;top:120px;width:200px;height:200px;color:{{fontcolor}};selected-color:{{selectedfontcolor}};
+        font-size:{{fontsize}};selected-font-size:{{selectedfontsize}}"
+        onchange="getTime"
+        selected="11:11px;"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind004/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind004/index.js
new file mode 100644
index 0000000..198a77d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/bind004/index.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getTime, getText} from "../../../common/js/picker_view"
+export default {
+  data: {
+    textValue: "time",
+    fontcolor: 255,
+    selectedfontcolor: 8386312,
+    fontsize: 30,
+    selectedfontsize: 38
+  },
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/picker_view/bind003/index", "pages/index/index"),
+  changeStyles() {
+    this.fontcolor = 8386312;
+    this.selectedfontcolor = 255;
+    this.fontsize = 38;
+    this.selectedfontsize = 30;
+  },
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event001/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event001/index.hml
new file mode 100644
index 0000000..ae7bbe0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event001/index.hml
@@ -0,0 +1,43 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;">event001</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        type="text"
+        style="left:100px;top:120px;width:200px;height:200px;"
+        range="{{rangeList}}"
+        onchange="textValue"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event001/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event001/index.js
new file mode 100644
index 0000000..c8d58e7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event001/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getTime, getText} from "../../../common/js/picker_view"
+export default {
+  data: {
+    textValue: "text",
+    rangeList: ["Aa", "Bb", "Cc", "Dd", "Ee", "Ff", "Gg", "Hh", "Ii"]
+  },
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/picker_view/attr008/index", "pages/picker_view/event002/index"),
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event002/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event002/index.css
new file mode 100644
index 0000000..a86744c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event002/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.pickStyle {
+    color:blue;
+    font-size:30px;
+    font-family:HYQiHei-65S;
+    selected-color:#7ff708;
+    selected-font-size:38px;
+    selected-font-family:HYQiHei-65S;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event002/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event002/index.hml
new file mode 100644
index 0000000..5a60c62
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event002/index.hml
@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;">event002</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        class="pickStyle"
+        type="text"
+        style="left:100px;top:120px;width:200px;height:200px;"
+        range="{{rangeList}}"
+        onchange="getText"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event002/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event002/index.js
new file mode 100644
index 0000000..6e19c6b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event002/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getText, getTime} from "../../../common/js/picker_view"
+export default {
+  data: {
+    textValue: "text",
+    rangeList: ["Aa", "Bb", "Cc", "Dd", "Ee", "Ff", "Gg", "Hh", "Ii"]
+  },
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/picker_view/event001/index", "pages/picker_view/event003/index"),
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event003/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event003/index.hml
new file mode 100644
index 0000000..594c913
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event003/index.hml
@@ -0,0 +1,42 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;">event003</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        type="time"
+        style="left:50px;top:120px;width:300px;height:200px;"
+        onchange="textValue"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event003/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event003/index.js
new file mode 100644
index 0000000..833378a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event003/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getText, getTime, data} from "../../../common/js/picker_view"
+export default {
+  data: data,
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/picker_view/event002/index", "pages/picker_view/event004/index"),
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event004/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event004/index.css
new file mode 100644
index 0000000..a86744c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event004/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.pickStyle {
+    color:blue;
+    font-size:30px;
+    font-family:HYQiHei-65S;
+    selected-color:#7ff708;
+    selected-font-size:38px;
+    selected-font-family:HYQiHei-65S;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event004/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event004/index.hml
new file mode 100644
index 0000000..296b6b4
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event004/index.hml
@@ -0,0 +1,43 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <text style="left:150px;top:30px;width:300px;height:50px;">event004</text>
+    <text style="left:150px;top:70px;width:200px;height:50px;">{{textValue}}</text>
+    <picker-view
+        class="pickStyle"
+        type="time"
+        style="left:50px;top:120px;width:300px;height:200px;"
+        onchange="getTime"
+    ></picker-view>
+    <input
+        type="button"
+        value="上页"
+        style="width:90px;height:40px;left:80px;top:340px;"
+        onclick="changePrev"
+    />
+    <input
+        type="button"
+        value="首页"
+        style="width:90px;height:40px;left:180px;top:340px;"
+        onclick="backMain"
+    />
+    <input
+        type="button"
+        value="下页"
+        style="width:90px;height:40px;left:280px;top:340px;"
+        onclick="changeNext"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event004/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event004/index.js
new file mode 100644
index 0000000..c24199e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/picker_view/event004/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+import {lifeCycleFunc, getText, getTime, data} from "../../../common/js/picker_view"
+export default {
+  data: data,
+  getText: getText,
+  getTime: getTime,
+  ...routePage("pages/picker_view/event003/index", "pages/picker_view/bind001/index"),
+  ...lifeCycleFunc
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource005/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource005/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource005/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource005/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource005/index.hml
new file mode 100644
index 0000000..01ab347
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource005/index.hml
@@ -0,0 +1,38 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">resource005</text>
+  <image src="/common/test.png" style="left:100px;top:80px;width:116px;height:116px;" />
+  <image src="{{imgSrc}}" style="left:100px;top:200px;width:116px;height:116px;" />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource005/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource005/index.js
new file mode 100644
index 0000000..322aa37
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource005/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+  data: {
+    imgSrc: "common/test.png"
+  },
+  ...routePage('', "pages/resource/resource007/index")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource007/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource007/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource007/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource007/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource007/index.hml
new file mode 100644
index 0000000..b856d99
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource007/index.hml
@@ -0,0 +1,38 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">resource007</text>
+  <image src="/abc/test.png" style="left:100px;top:80px;width:116px;height:116px;" />
+  <image src="{{imgSrc}}" style="left:100px;top:200px;width:116px;height:116px;" />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource007/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource007/index.js
new file mode 100644
index 0000000..e39a1e1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/resource/resource007/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+  data: {
+    imgSrc: "abc/test.png"
+  },
+  ...routePage("pages/resource/resource005/index", "")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/01/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/01/index.css
new file mode 100644
index 0000000..2066c1a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/01/index.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.buttonBlock {
+    width: 300px;
+    height: 50px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/01/index.hml
new file mode 100644
index 0000000..0ba03e3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/01/index.hml
@@ -0,0 +1,39 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+        <text style="width:300px;height:80px;text-overflow:ellipsis">Router_Replace_Test_001</text>
+    </div>
+    <div style="height:260px;" class="divFrame">
+        <div style="width: 454px;height:260px">
+            <text style="margin-left:5px;width:150px;height:220px">
+                this is the first page
+            </text>
+            <div style="width:300px;height:260px;flex-direction:column;">
+                <input onclick="button1" type="button" class="buttonBlock" value="replace()"></input>
+                <input onclick="button2" type="button" class="buttonBlock" value="replace({})"></input>
+                <input onclick="button3" type="button" class="buttonBlock" value="{uri:'pages/page2/'}"></input>
+                <input onclick="button4" type="button" class="buttonBlock" value="{uri:}"></input>
+                <input onclick="button5" type="button" class="buttonBlock" value="{uri:''}"></input>
+            </div>
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/01/index.js
new file mode 100644
index 0000000..df75ecd
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/01/index.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage, routeSimplePage } from "../../../common/js/general";
+export default {
+  data: {},
+  button1() {
+    router.replace();
+  },
+  button2() {
+    router.replace({});
+  },
+  button3() {
+    router.replace({ uri: "pages/page2/" });
+  },
+  button4() {
+    router.replace({ uri: 123 });
+  },
+  button5() {
+    router.replace({ uri: "" });
+  },
+  ...routePage("pages/index/index", "pages/router/02/index")
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/02/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/02/index.css
new file mode 100644
index 0000000..761fc5f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/02/index.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.buttonBlock {
+    width: 454px;
+    height: 75px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/02/index.hml
new file mode 100644
index 0000000..27b20e2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/02/index.hml
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+        <text style="width:300px;height:80px;text-overflow:ellipsis">Router_Replace_Test_002</text>
+    </div>
+    <div style="height:260px;flex-direction:column" class="divFrame">
+        <input onclick="button1" type="button" class="buttonBlock" value="{uri:'pages/router/page2/page2', xyz:'1'}"></input>
+        <input onclick="button2" type="button" class="buttonBlock" value="uri:'/'" style="height:30px"></input>
+        <input onclick="button3" type="button" class="buttonBlock" value="{uri:'pages/router/page2/page2', params:123}"></input>
+        <input onclick="button4" type="button" class="buttonBlock" value="{uri:'page/router/page2/page2', params:{xyz:'1'}}"></input>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/02/index.js
new file mode 100644
index 0000000..782261e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/02/index.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+export default {
+  data: {},
+  button1() {
+    router.replace({
+      uri: "pages/router/page2/page2",
+      xyz: "1"
+    });
+  },
+  button2() {
+    router.replace({
+      uri: "/"
+    });
+  },
+  button3() {
+    router.replace({
+      uri: "pages/router/page2/page2",
+      params: { xyz: 123 }
+    });
+  },
+  button4() {
+    router.replace({
+      uri: "pages/router/page2/page2",
+      params: { xyz: "1" }
+    });
+  },
+  ...routePage("pages/router/01/index", "pages/router/03/index")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/03/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/03/index.css
new file mode 100644
index 0000000..4aebbb8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/03/index.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.buttonBlock {
+    width: 454px;
+    height: 75px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/03/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/03/index.hml
new file mode 100644
index 0000000..31b1345
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/03/index.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+        <text style="width:300px;height:80px;text-overflow:ellipsis">Router_Replace_Test_002</text>
+    </div>
+    <div style="height:260px;flex-direction:column" class="divFrame">
+        <text style="width:400px;height:50px">
+            this is the first page
+        </text>
+        <div style="width:454px;height:210px;flex-direction:column;">
+            <input onclick="button1" type="button" class="buttonBlock" value="switch to root"></input>
+            <input onclick="button2" type="button" class="buttonBlock" value="switch to page3"></input>
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/03/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/03/index.js
new file mode 100644
index 0000000..784f736
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/03/index.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+export default {
+  data: {},
+  button1() {
+    router.replace({
+      uri: "/"
+    });
+  },
+  button2() {
+    router.replace({
+      uri: "pages/router/page3/page3"
+    });
+  },
+  ...routePage("pages/router/02/index", "pages/router/04/index")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/04/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/04/index.css
new file mode 100644
index 0000000..2066c1a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/04/index.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:454px;
+    height:54px;
+}
+
+.buttonBlock {
+    width: 300px;
+    height: 50px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/04/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/04/index.hml
new file mode 100644
index 0000000..ea5920d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/04/index.hml
@@ -0,0 +1,36 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:320px;height:80px;" class="divFrame">
+        <text style="width:300px;height:80px;text-overflow:ellipsis">Router_Replace_Test_004</text>
+    </div>
+    <div style="height:260px;" class="divFrame">
+        <div style="width: 454px;height:260px">
+            <text style="margin-left:5px;width:150px;height:220px">
+                this is the first page
+            </text>
+            <div style="width:300px;height:260px;flex-direction:column;">
+                <input onclick="button1" type="button" class="buttonBlock" value="replace('')"></input>
+                <input onclick="button2" type="button" class="buttonBlock" value="{uri:1}"></input>
+                <input onclick="button2" type="button" class="buttonBlock" value="{path:'123'}"></input>
+            </div>
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/04/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/04/index.js
new file mode 100644
index 0000000..c330c8d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/04/index.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../../common/js/general";
+export default {
+  data: {},
+  button1() {
+    router.replace("");
+  },
+  button2() {
+    router.replace({ uri: 1 });
+  },
+  button3() {
+    router.replace({ path: "123" });
+  },
+  ...routePage("pages/router/03/index", "")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page2/page2.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page2/page2.css
new file mode 100644
index 0000000..817f9f2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page2/page2.css
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page2/page2.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page2/page2.hml
new file mode 100644
index 0000000..1b2a4f9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page2/page2.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <div class="container">
+        <div style="margin-top:150px;width: 454px;height:400px;flex-direction:column;">
+            <text style="width:454px;height:150px;text-overflow:ellipsis" onclick="switchToFirst">
+                this is the second page, click to return to first page
+            </text>
+            <input type="button" style="width:454px;height:200px" value="xyz={{xyz}}">
+
+            </input>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page2/page2.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page2/page2.js
new file mode 100644
index 0000000..615c10f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page2/page2.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage, routeSimplePage } from "../../../common/js/general";
+export default {
+  data: {
+    xyz: ""
+  },
+  onInit() {
+    this.xyz = $page.xyz;
+  },
+  switchToFirst: routeSimplePage("pages/router/02/index")
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page3/page3.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page3/page3.css
new file mode 100644
index 0000000..817f9f2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page3/page3.css
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page3/page3.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page3/page3.hml
new file mode 100644
index 0000000..a6bea5c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page3/page3.hml
@@ -0,0 +1,24 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <div class="container">
+        <div style="margin-top:150px;width: 454px;height:400px;flex-direction:column;">
+            <text style="width:454px;height:50px">
+                this is the second page
+            </text>
+            <input onclick="button1" style="width:454px;height:50px" class="buttonBlock" value="switch to self"></input>
+            <input onclick="button2" style="width:454px;height:50px" class="buttonBlock" value="switch to first page"></input>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page3/page3.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page3/page3.js
new file mode 100644
index 0000000..b6f9be7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/router/page3/page3.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage, routeSimplePage } from "../../../common/js/general";
+export default {
+  data: {},
+  button1: routeSimplePage("pages/router/page3/page3"),
+  button2: routeSimplePage("pages/router/03/index")
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll1/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll1/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll1/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll1/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll1/index.hml
new file mode 100755
index 0000000..babaa46
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll1/index.hml
@@ -0,0 +1,21 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;border-width:20px;border-color:#ffa500">
+<text style="left:114px;top:40px;width:120px;height:40px;">scroll1</text>
+<input type="button" style="left:247px;top:40px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+<image src="common/preRow.png" style="left:30px;top:247px;width:30px;height:45px;" onclick="prePage"/>
+<image src="common/nextRow.png" style="left:380px;top:247px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll1/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll1/index.js
new file mode 100644
index 0000000..b7b2ca1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll1/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { alterPage } from "../../../common/js/general";
+export default {
+  ...alterPage("", "pages/scroll/scroll2/index"),
+  onInit() {
+    console.log("on init called...");
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll2/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll2/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll2/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll2/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll2/index.hml
new file mode 100755
index 0000000..1f796a6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll2/index.hml
@@ -0,0 +1,21 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:1000px;border-width:20px;border-color:#ffa500">
+<text style="left:114px;top:40px;width:120px;height:40px;">scroll2</text>
+<input type="button" style="left:247px;top:40px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+<image src="common/preRow.png" style="left:30px;top:247px;width:30px;height:45px;" onclick="prePage"/>
+<image src="common/nextRow.png" style="left:380px;top:247px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll2/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll2/index.js
new file mode 100644
index 0000000..a3bf161
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll2/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { alterPage } from "../../../common/js/general";
+export default {
+  ...alterPage("pages/scroll/scroll1/index", "pages/scroll/scroll3/index"),
+  onInit() {
+    console.log("on init called...");
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll3/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll3/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll3/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll3/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll3/index.hml
new file mode 100755
index 0000000..2ce2a4a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll3/index.hml
@@ -0,0 +1,21 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:1000px;height:454px;border-width:20px;border-color:#ffa500">
+<text style="left:114px;top:40px;width:120px;height:40px;">scroll3</text>
+<input type="button" style="left:247px;top:40px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+<image src="common/preRow.png" style="left:30px;top:247px;width:30px;height:45px;" onclick="prePage"/>
+<image src="common/nextRow.png" style="left:380px;top:247px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll3/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll3/index.js
new file mode 100644
index 0000000..04e2d45
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll3/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { alterPage } from "../../../common/js/general";
+export default {
+  ...alterPage("pages/scroll/scroll2/index", "pages/scroll/scroll4/index"),
+  onInit() {
+    console.log("on init called...");
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll4/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll4/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll4/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll4/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll4/index.hml
new file mode 100755
index 0000000..0c084c1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll4/index.hml
@@ -0,0 +1,21 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:1000px;height:1000px;border-width:20px;border-color:#ffa500">
+<text style="left:114px;top:40px;width:120px;height:40px;">scroll4</text>
+<input type="button" style="left:247px;top:40px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+<image src="common/preRow.png" style="left:30px;top:247px;width:30px;height:45px;" onclick="prePage"/>
+<image src="common/nextRow.png" style="left:380px;top:247px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll4/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll4/index.js
new file mode 100644
index 0000000..58389e5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll4/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { alterPage } from "../../../common/js/general";
+export default {
+  ...alterPage("pages/scroll/scroll3/index", "pages/scroll/scroll5/index"),
+  onInit() {
+    console.log("on init called...");
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll5/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll5/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll5/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll5/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll5/index.hml
new file mode 100755
index 0000000..14d4f75
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll5/index.hml
@@ -0,0 +1,22 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:1000px;height:1000px;border-width:20px;border-color:#ffa500">
+    <text style="left:114px;top:40px;width:120px;height:40px;">scroll5</text>
+    <input type="button" style="left:247px;top:40px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+    <input type="button" style="left:190px;top:190px;width:120px;height:40px;" value="go" onclick="go"/>
+    <image src="common/preRow.png" style="left:30px;top:247px;width:30px;height:45px;" onclick="prePage"/>
+    <image src="common/nextRow.png" style="left:380px;top:247px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll5/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll5/index.js
new file mode 100644
index 0000000..ce8e22e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll5/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { alterPage, routeSimplePage } from "../../../common/js/general";
+export default {
+  ...alterPage("pages/scroll/scroll4/index", ""),
+  go: routeSimplePage("pages/scroll/scroll6/index"),
+  onInit() {
+    console.log("on init called...");
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll6/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll6/index.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll6/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll6/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll6/index.hml
new file mode 100755
index 0000000..050808b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll6/index.hml
@@ -0,0 +1,22 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:1000px;height:1000px;border-width:10px;border-color:#ff69b4">
+    <text style="left:114px;top:40px;width:120px;height:40px;">scroll6</text>
+    <input type="button" style="left:247px;top:40px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+    <input type="button" style="left:190px;top:190px;width:120px;height:40px;" value="back" onclick="back"/>
+    <image src="common/preRow.png" style="left:30px;top:247px;width:30px;height:45px;" onclick="prePage"/>
+    <image src="common/nextRow.png" style="left:380px;top:247px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll6/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll6/index.js
new file mode 100644
index 0000000..8503154
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/scroll/scroll6/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { alterPage, routeSimplePage } from "../../../common/js/general";
+export default {
+  ...alterPage("pages/scroll/scroll4/index", ""),
+  back: routeSimplePage("pages/scroll/scroll5/index"),
+  onInit() {
+    console.log("on init called...");
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/style/StyleBaseTest001/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/style/StyleBaseTest001/index.css
new file mode 100644
index 0000000..6b5ad26
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/style/StyleBaseTest001/index.css
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+#container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+#testTitle {
+  font-size: 30px;
+  text-align: center;
+  width: 300px;
+  height: 65px;
+}
+.title {
+  font-size: 30px;
+  text-align: center;
+  border-color: aqua;
+  border-width: 2px;
+  width: 200px;
+  height: 30px;
+}
+.title2 {
+  margin: 20px;
+  font-size: 38px;
+  border-color: aqua;
+  border-width: 2px;
+  text-align: center;
+  width: 350px;
+  height: 30px;
+}
+#secDiv {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  left: 0px;
+  top: 200px;
+  width: 454px;
+  height: 60px;
+}
+.button {
+  width: 150px;
+  height: 50px;
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/style/StyleBaseTest001/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/style/StyleBaseTest001/index.hml
new file mode 100644
index 0000000..243da60
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/style/StyleBaseTest001/index.hml
@@ -0,0 +1,35 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div id="container">
+  <text id="testTitle">测试ID/Class选择器及内联样式</text>
+  <text
+    class="title"
+    onclick="changeTitle"
+    style="height:50px; color:{{textColor}}"
+  >
+    Hello {{title}}
+  </text>
+  <text
+    class="title2"
+    onclick="changeTitle2"
+    style="height:50px; color:{{text2Color}}"
+  >
+    {{title}} {{title2}}
+  </text>
+  <div id="secDiv">
+    <input class="button" type="button" value="返回首页" onclick="exitPage" />
+  </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/style/StyleBaseTest001/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/style/StyleBaseTest001/index.js
new file mode 100644
index 0000000..7cbf233
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/style/StyleBaseTest001/index.js
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage, routeSimplePage } from "../../../common/js/general";
+export default {
+  data: {
+    title: "World",
+    titleIndex: 0,
+    textColor: 16645886,
+    title2: "World",
+    title2Index: 0,
+    text2Color: 16645886
+  },
+  exitPage: routeSimplePage("pages/index/index"),
+  // change second title
+  changeTitle2() {
+    this.title2Index++;
+    if (this.title2Index % 2 > 0) {
+      this.title2 = "冲冲";
+      this.text2Color = 6749952;
+    } else {
+      this.title2 = "你好";
+      this.text2Color = 16750848;
+    }
+  },
+  // change first title
+  changeTitle() {
+    this.titleIndex++;
+    if (this.titleIndex % 2 > 0) {
+      this.title = "JS";
+      this.textColor = 13321031;
+    } else {
+      this.title = "世界";
+      this.textColor = 16645886;
+    }
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA06/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA06/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA06/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA06/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA06/index.hml
new file mode 100644
index 0000000..41ef326
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA06/index.hml
@@ -0,0 +1,52 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        index="{{index}}"
+        style="width:250px;height:250px;left:75px;top:75px;"
+        vertical="false"
+        onchange="showPage"
+        onclick="updateIndex"
+    >
+        <stack style="width:250px;height:250px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="width:250px;height:250px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="width:250px;height:250px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr006
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA06/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA06/index.js
new file mode 100644
index 0000000..0d92b53
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA06/index.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    data: {
+        index: 2
+    },
+    updateIndex() {
+        this.index = 0;
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage('', "pages/swiper/SwiperA15/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA15/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA15/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA15/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA15/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA15/index.hml
new file mode 100644
index 0000000..9649ba7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA15/index.hml
@@ -0,0 +1,51 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        vertical="{{vert}}"
+        style="width:300px;height:300px;left:75px;top:75px;"
+        onchange="showPage"
+        onclick="updateVert"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr015
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA15/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA15/index.js
new file mode 100644
index 0000000..22bde47
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA15/index.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0,
+        vert: true
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    updateVert() {
+        this.vert = false;
+        console.log(this.vert);
+    },
+    ...routePage("pages/swiper/SwiperA06/index", "pages/swiper/SwiperA16/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA16/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA16/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA16/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA16/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA16/index.hml
new file mode 100644
index 0000000..e593052
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA16/index.hml
@@ -0,0 +1,46 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper style="width:300px;height:300px;left:75px;top:75px;" onchange="showPage">
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr016
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA16/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA16/index.js
new file mode 100644
index 0000000..d8ea98e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA16/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage("pages/swiper/SwiperA15/index", "pages/swiper/SwiperA17/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA17/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA17/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA17/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA17/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA17/index.hml
new file mode 100644
index 0000000..d709bc6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA17/index.hml
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        loop="false"
+        style="width:300px;height:300px;left:75px;top:75px;"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr017
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA17/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA17/index.js
new file mode 100644
index 0000000..d9d7c98
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA17/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage("pages/swiper/SwiperA16/index", "pages/swiper/SwiperA18/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA18/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA18/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA18/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA18/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA18/index.hml
new file mode 100644
index 0000000..459b454
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA18/index.hml
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        loop="{{loop}}"
+        style="width:300px;height:300px;left:75px;top:75px;"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr018
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA18/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA18/index.js
new file mode 100644
index 0000000..91e75a3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA18/index.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0,
+        loop: 100
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage("pages/swiper/SwiperA17/index", "pages/swiper/SwiperA20/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA20/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA20/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA20/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA20/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA20/index.hml
new file mode 100644
index 0000000..5e06763
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA20/index.hml
@@ -0,0 +1,65 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        loop="{{loopVal}}"
+        style="width:300px;height:300px;left:75px;top:75px;"
+        onchange="showPage"
+        onclick="updateLoop"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共4页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr020
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共4页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共4页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共4页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共4页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA20/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA20/index.js
new file mode 100644
index 0000000..34a746f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperA20/index.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0,
+        loopVal: true
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    updateLoop() {
+        this.loopVal = false;
+        console.log(this.loopVal);
+    },
+    ...routePage("pages/swiper/SwiperA18/index", "pages/swiper/SwiperE01/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC01/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC01/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC01/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC01/index.hml
new file mode 100644
index 0000000..9d2f0eb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC01/index.hml
@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        style="width:300px;height:250px;left:75px;top:75px;"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:454px;height:454px;background-color:#00ff00;">
+            <text
+                style="width:220px;height:60px;left:150px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;left:150px;">
+              children001
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:454px;height:454px;background-color:#00ff00;">
+            <text
+                style="width:220px;height:60px;left:150px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:454px;height:454px;background-color:#00ff00;">
+            <text
+                style="width:220px;height:60px;left:150px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC01/index.js
new file mode 100644
index 0000000..4538ece
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC01/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage("pages/swiper/SwiperS02/index", "pages/swiper/SwiperC02/index")
+}
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC02/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC02/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC02/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC02/index.hml
new file mode 100644
index 0000000..ba99d1a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC02/index.hml
@@ -0,0 +1,51 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        style="width:300px;height:250px;left:75px;top:75px;"
+        index="{{indexVal}}"
+        onclick="changeIf"
+        onlongpress="changeIndex"
+    >
+        <stack style="left:0px;top:0px;width:454px;height:454px;background-color:#00ff00;" for="{{listData0}}">
+            <text
+                style="width:220px;height:60px;left:150px;"
+            >
+              第{{$item}}页
+            </text>
+            <text style="width:220px;height:60px;top:80px;left:150px;">
+              children002
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:454px;height:454px;background-color:#00ff00;" for="{{listData1}}">
+            <text
+                style="width:220px;height:60px;left:150px;"
+            >
+              第{{$item}}页
+            </text>
+        </stack>
+        <stack if="{{ifStatus}}" style="left:0px;top:0px;width:454px;height:454px;background-color:#00ff00;">
+            <text
+                style="width:220px;height:60px;left:150px;"
+            >
+              第7页
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC02/index.js
new file mode 100644
index 0000000..b17d636
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperC02/index.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        listData0: [
+            1,
+            2,
+            3
+        ],
+        listData1: [
+            4,
+            5,
+            6
+        ],
+        indexVal: 6,
+        ifStatus: true
+    },
+    ...routePage("pages/swiper/SwiperC01/index", ""),
+    changeIf() {
+        this.ifStatus = false;
+        this.indexVal = 6;
+    },
+    changeIndex() {
+        this.indexVal = 5;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE01/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE01/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE01/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE01/index.hml
new file mode 100644
index 0000000..51f9692
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE01/index.hml
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        style="width:300px;height:300px;left:75px;top:75px;"
+        vertical="false"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              event001
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE01/index.js
new file mode 100644
index 0000000..3bfddd6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE01/index.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0,
+        text1: "change事件触发引起页面标号改变"
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage("pages/swiper/SwiperA20/index", "pages/swiper/SwiperE02/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE02/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE02/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE02/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE02/index.hml
new file mode 100644
index 0000000..b1db8ab
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE02/index.hml
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        style="width:300px;height:300px;left:75px;top:75px;"
+        vertical="false"
+        onchange="changePage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              event002
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE02/index.js
new file mode 100644
index 0000000..0dac421
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE02/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage("pages/swiper/SwiperE01/index", "pages/swiper/SwiperE03/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE03/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE03/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE03/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE03/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE03/index.hml
new file mode 100644
index 0000000..b558df8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE03/index.hml
@@ -0,0 +1,67 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        style="width:300px;height:300px;left:75px;top:75px;"
+        vertical="false"
+        onclick="textChange3"
+        onlongpress="textChange2"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="top:0px;width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text
+                style="top:80px;width:220px;height:100px;"
+                value="{{text1}}"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:200px;">
+              event003
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="top:0px;width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text
+                style="top:80px;width:290px;height:100px;"
+                value="{{text2}}"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="top:0px;width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text
+                style="top:80px;width:220px;height:100px;"
+                value="{{text3}}"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE03/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE03/index.js
new file mode 100644
index 0000000..0014160
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperE03/index.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0,
+        text2: "longpress",
+        text3: "click"
+    },
+    textChange2() {
+        this.text2 = "triggered";
+    },
+    textChange3() {
+        this.text3 = "triggered";
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage("pages/swiper/SwiperE02/index", "pages/swiper/SwiperS01/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS01/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS01/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS01/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS01/index.hml
new file mode 100644
index 0000000..0f3e3e9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS01/index.hml
@@ -0,0 +1,52 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="width:454px;height:454px;flex-direction:column;">
+    <swiper
+        style="width:300px;height:250px;margin-left:75px;margin-top:75px;background-color:#00ff00;"
+        vertical="false"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              style001
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <stack style="width:320px;height:60px;margin-left:80px;margin-top:10px;">
+      <input type="button" value="上页" style="width:90px;height:40px;left:0px;" onclick="changePrev"/>
+      <input type="button" value="首页" style="width:90px;height:40px;left:100px;" onclick="backMain"/>
+      <input type="button" value="下页" style="width:90px;height:40px;left:200px;" onclick="changeNext"/>
+    </stack>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS01/index.js
new file mode 100644
index 0000000..f58ac2a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS01/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage("pages/swiper/SwiperE03/index", "pages/swiper/SwiperS02/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS02/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS02/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS02/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS02/index.hml
new file mode 100644
index 0000000..35eecf8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS02/index.hml
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <swiper
+        style="width:300px;height:230px;left:50px;top:50px;background-color:#00ff00;padding:10px;border-color:#0000ff;border-width:10px;border-radius:20px;"
+        vertical="false"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              style002
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+                value="第{{index}}页，共2页"
+            >
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS02/index.js
new file mode 100644
index 0000000..13e7f71
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/swiper/SwiperS02/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        index: 0
+    },
+    showPage(e) {
+        this.index = e.index;
+    },
+    ...routePage("pages/swiper/SwiperS01/index", "pages/swiper/SwiperC01/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_radio_value_test010/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_radio_value_test010/index.css
new file mode 100644
index 0000000..4d58560
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_radio_value_test010/index.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    width:454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.radio {
+    margin-left: 150px;
+    margin-top: 50px;
+}
+
+.page {
+    width: 454px;
+    height: 120px;
+    flex-direction: row;
+}
+
+.button {
+    width: 120px;
+    height: 80px;
+    margin-top: 20px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_radio_value_test010/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_radio_value_test010/index.hml
new file mode 100644
index 0000000..8278eea
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_radio_value_test010/index.hml
@@ -0,0 +1,22 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "radio" class = "radio" style = "width: {{width}};height: {{height}};" onclick = "changeArea"/>
+    <div class = "page">
+        <input type = "button" class = "button" style = "margin-left: 50px;" value = "上一页" onclick = "goPrevious"/>
+        <input type = "button" class = "button" style = "margin-left: 20px;" value = "首页" onclick = "goHome"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_radio_value_test010/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_radio_value_test010/index.js
new file mode 100644
index 0000000..693b6ce
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_radio_value_test010/index.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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"
+export default {
+    data : {
+        width:80,
+        height:90
+    },
+    changeArea: function() {
+        if (this.width == 80) {
+            this.width = 40;
+        } else {
+            this.width = 80;
+        }
+        if (this.height == 90) {
+            this.height = 50;
+        } else {
+            this.height = 90;
+        }
+    },
+    goHome: function() {
+        router.replace({uri: "pages/index/index"});
+    },
+    goPrevious: function() {
+        router.replace({uri: "pages/switch-radio-width/width_switch_value_test009/index"});
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_switch_value_test009/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_switch_value_test009/index.css
new file mode 100644
index 0000000..cfc67d2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_switch_value_test009/index.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    width : 454px;
+    height : 454px;
+    flex-direction : column;
+}
+
+.switch {
+    margin-top : 50px;
+    margin-left : 150px;
+}
+
+.button {
+    width : 100px;
+    height : 60px;
+}
+
+.page {
+    width : 454px;
+    height : 120px;
+    flex-direction : row;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_switch_value_test009/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_switch_value_test009/index.hml
new file mode 100644
index 0000000..5766921
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_switch_value_test009/index.hml
@@ -0,0 +1,22 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <switch class = "switch" style = "width:{{width}}; height: {{height}}" onclick = "changeArea"></switch>
+    <div class = "page">
+        <input type = "button" class = "button" style = "margin-left : 80px" onclick = "changeNext" value = "下一页"/>
+        <input type = "button" class = "button" style = "margin-left : 20px" onclick = "goHome" value = "首页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_switch_value_test009/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_switch_value_test009/index.js
new file mode 100644
index 0000000..1eb6dd7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch-radio-width/width_switch_value_test009/index.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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"
+
+export default {
+    data : {
+        width : 80,
+        height : 90
+    },
+    changeArea : function() {
+        if (this.width == 80) {
+            this.width = 40;
+        } else {
+            this.width = 80;
+        }
+        if (this.height == 90) {
+            this.height = 50;
+        } else {
+            this.height = 90;
+        }
+    },
+    goHome : function() {
+        router.replace({uri : "pages/index/index"});
+    },
+    changeNext : function() {
+        router.replace({uri : "pages/switch-radio-width/width_radio_value_test010/index"});
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchA04/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchA04/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchA04/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchA04/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchA04/index.hml
new file mode 100644
index 0000000..859c3eb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchA04/index.hml
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <switch checked={{state}}
+        style="width:64px;height:64px;left:100px;top:100px;"
+        onlongpress=changeState
+    />
+    <text style="width:200px;height:40px;left:100px;top:200px;">
+      {{state}}
+    </text>
+    <text style="width:200px;height:40px;left:100px;top:260px;">
+      attr004
+    </text>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchA04/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchA04/index.js
new file mode 100644
index 0000000..52d2b1c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchA04/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+export default {
+    data: {
+        state: false
+    },
+    changeState() {
+        this.state = !this.state;
+    },
+    ...routePage('', "pages/switch/SwitchE01/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE01/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE01/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE01/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE01/index.hml
new file mode 100644
index 0000000..635da86
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE01/index.hml
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <switch checked={{state}}
+        style="width:64px;height:64px;left:100px;top:100px;"
+        onchange=changeState
+    />
+    <text style="width:200px;height:40px;left:100px;top:200px;">
+      {{state}}
+    </text>
+    <text style="width:200px;height:40px;left:100px;top:260px;">
+      event001
+    </text>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE01/index.js
new file mode 100644
index 0000000..063e750
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE01/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        state: false
+    },
+    changeState() {
+        this.state = !this.state;
+    },
+    ...routePage("pages/switch/SwitchA04/index", "pages/switch/SwitchE02/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE02/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE02/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE02/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE02/index.hml
new file mode 100644
index 0000000..b77a52e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE02/index.hml
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <switch checked={{state}}
+        style="width:64px;height:64px;left:100px;top:100px;"
+        onchange=showState
+    />
+    <text style="width:200px;height:40px;left:100px;top:200px;">
+      {{state}}
+    </text>
+    <text style="width:200px;height:40px;left:100px;top:260px;">
+      event002
+    </text>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE02/index.js
new file mode 100644
index 0000000..a81fdee
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE02/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        state: false
+    },
+    changeState() {
+        this.state = !this.state;
+    },
+    ...routePage("pages/switch/SwitchE01/index", "pages/switch/SwitchE03/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE03/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE03/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE03/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE03/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE03/index.hml
new file mode 100644
index 0000000..594d540
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE03/index.hml
@@ -0,0 +1,40 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <switch
+        style="width:64px;height:64px;left:100px;top:100px;"
+        onclick="changeText1"
+        onlongpress="changeText2"
+    />
+    <text
+        style="width:200px;height:40px;left:100px;top:160px;font-size:30px;"
+    >
+      {{text1}}
+    </text>
+    <text
+        style="width:200px;height:40px;left:100px;top:210px;font-size:30px;"
+    >
+      {{text2}}
+    </text>
+    <text
+        style="width:200px;height:40px;left:100px;top:260px;font-size:30px;"
+    >
+      event003
+    </text>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE03/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE03/index.js
new file mode 100644
index 0000000..032c689
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE03/index.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        text1: "click",
+        text2: "longpress"
+    },
+    changeText1() {
+        this.text1 = "triggered";
+    },
+    changeText2() {
+        this.text2 = "triggered";
+    },
+    ...routePage("pages/switch/SwitchE02/index", "pages/switch/SwitchE04/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE04/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE04/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE04/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE04/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE04/index.hml
new file mode 100644
index 0000000..4a07c6b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE04/index.hml
@@ -0,0 +1,40 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <switch
+        style="width:64px;height:64px;left:100px;top:100px;"
+        onclick="changeText1"
+        onchange="changeText2"
+    />
+    <text
+        style="width:200px;height:40px;left:100px;top:160px;font-size:30px;"
+    >
+      {{text1}}
+    </text>
+    <text
+        style="width:200px;height:40px;left:100px;top:210px;font-size:30px;"
+    >
+      {{text2}}
+    </text>
+    <text
+        style="width:200px;height:40px;left:100px;top:260px;font-size:30px;"
+    >
+      event004
+    </text>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE04/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE04/index.js
new file mode 100644
index 0000000..b008643
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchE04/index.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    data: {
+        text1: "click",
+        text2: "change"
+    },
+    changeText1() {
+        this.text1 = "triggered";
+    },
+    changeText2() {
+        this.text2 = "triggered";
+    },
+    ...routePage("pages/switch/SwitchE03/index", "pages/switch/SwitchS01/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS01/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS01/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS01/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS01/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS01/index.hml
new file mode 100644
index 0000000..4070d87
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS01/index.hml
@@ -0,0 +1,28 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div id="div" style="width:454px;height:454px;flex-direction:column;">
+    <switch style="width:100px;height:100px;margin-left:100px;margin-top:100px;background-color:#00FF00;" />
+    <text
+        style="width:200px;height:40px;margin-left:100px;margin-top:10px;font-size:30px;"
+    >
+      style001
+    </text>
+    <stack style="width:320px;height:60px;margin-left:80px;margin-top:10px;">
+      <input type="button" value="上页" style="width:90px;height:40px;left:0px;" onclick="changePrev"/>
+      <input type="button" value="首页" style="width:90px;height:40px;left:100px;" onclick="backMain"/>
+      <input type="button" value="下页" style="width:90px;height:40px;left:200px;" onclick="changeNext"/>
+    </stack>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS01/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS01/index.js
new file mode 100644
index 0000000..8281713
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS01/index.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    ...routePage("pages/switch/SwitchE03/index", "pages/switch/SwitchS02/index")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS02/index.css b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS02/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS02/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS02/index.hml b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS02/index.hml
new file mode 100644
index 0000000..3e69013
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS02/index.hml
@@ -0,0 +1,28 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px;">
+    <switch
+        style="width:64px;height:64px;left:100px;top:100px;border-color:#00FF00;border-width:10px;border-radius:20px;padding:10px;"
+    />
+    <text
+        style="width:200px;height:40px;left:100px;top:240px;font-size:30px;"
+    >
+      style002
+    </text>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS02/index.js b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS02/index.js
new file mode 100644
index 0000000..009ec0c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_auto_test/src/main/js/default/pages/switch/SwitchS02/index.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general"
+export default {
+    ...routePage("pages/switch/SwitchS01/index", "")
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/res/drawable/icon.png b/test/moduletest/common/test_app/ui_auto_test/src/main/res/drawable/icon.png
new file mode 100644
index 0000000..6ebbe65
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/res/drawable/icon.png differ
diff --git a/test/moduletest/common/test_app/ui_auto_test/src/main/res/drawable/icon_small.png b/test/moduletest/common/test_app/ui_auto_test/src/main/res/drawable/icon_small.png
new file mode 100644
index 0000000..c69db78
Binary files /dev/null and b/test/moduletest/common/test_app/ui_auto_test/src/main/res/drawable/icon_small.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/config.json b/test/moduletest/common/test_app/ui_manual_test/config.json
new file mode 100755
index 0000000..6ccfda6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/config.json
@@ -0,0 +1,148 @@
+{
+    "app": {
+        "bundleName": "com.company.ui_manual_test",
+        "version": {
+            "code": 1,
+            "name": "1.0.0"
+        },
+        "apiVersion": {
+            "compatible": 3,
+            "target": 3
+        }
+    },
+    "deviceConfig": {
+        "default": {
+        }
+    },
+    "module": {
+        "description": "",
+        "deviceType": [
+            "fitnessWatch",
+            "smartVision"
+        ],
+        "distro": {
+            "deliveryWithInstall": true,
+            "moduleName": "entry",
+            "moduleType": "entry"
+        },
+        "abilities": [
+            {
+                "name": "default",
+                "icon": "res/drawable",
+                "label": "ui_manual_test",
+                "type": "page"
+            }
+        ],
+        "js": [
+            {
+                "name": "default",
+                "pages": [
+                    "pages/index/index",
+                    "pages/camera/camera001/index",
+                    "pages/camera/camera002/index",
+                    "pages/camera/camera003/index",
+                    "pages/camera/camera004/index",
+                    "pages/video/video001/index",
+                    "pages/swiper/SwiperA07/index",
+                    "pages/swiper/SwiperA08/index",
+                    "pages/swiper/SwiperA09/index",
+                    "pages/swiper/SwiperA10/index",
+                    "pages/swiper/SwiperA11/index",
+                    "pages/swiper/SwiperA12/index",
+                    "pages/Base/VersionCheck001/index",
+                    "pages/Base/JSHeapOverFlow001/index",
+                    "pages/Base/PercentSupport/index",
+                    "pages/marquee/marquee1/marquee1",
+                    "pages/marquee/marquee2/marquee2",
+                    "pages/marquee/marquee3/marquee3",
+                    "pages/marquee/marquee4/marquee4",
+                    "pages/marquee/marquee5/marquee5",
+                    "pages/resource/resource001/index",
+                    "pages/resource/resource002/index",
+                    "pages/resource/resource003/index",
+                    "pages/resource/resource004/index",
+                    "pages/resource/resource006/index",
+                    "pages/async/async001/index",
+                    "pages/timer/setTimeout01/index",
+                    "pages/timer/setInterval02/index",
+                    "pages/timer/setTimeout03/index",
+                    "pages/timer/setTimeout04/index",
+                    "pages/timer/setInterval05/index",
+                    "pages/timer/setInterval06/index",
+                    "pages/timer/setInterval07/index",
+                    "pages/timer/clearInterval08/index",
+                    "pages/timer/clearInterval09/index",
+                    "pages/timer/timerLimit10/index",
+                    "pages/input/ButtonA30/index",
+                    "pages/input/CheckboxImage31/index",
+                    "pages/list/list3/list3",
+                    "pages/list/list4/list4",
+                    "pages/list/list5/list5",
+                    "pages/list/list6/list6",
+                    "pages/list/list7/list7",
+                    "pages/list/list8/list8",
+                    "pages/list-item/item5/item5",
+                    "pages/text/text001/index",
+                    "pages/text/text002/index",
+                    "pages/transition/01/index",
+                    "pages/transition/0203/index",
+                    "pages/transition/0405/index",
+                    "pages/transition/0607/index",
+                    "pages/transition/0809/index",
+                    "pages/transition/1011/index",
+                    "pages/transition/1213/index",
+                    "pages/transition/1415/index",
+                    "pages/transition/16/index",
+                    "pages/transition/17/index",
+                    "pages/transition/18/index",
+                    "pages/transition/19/index",
+                    "pages/transition/20/index",
+                    "pages/transition/21/index",
+                    "pages/slider/index/index",
+                    "pages/slider/second/second",
+                    "pages/slider/third/index",
+                    "pages/dfx/dfx1/index",
+                    "pages/dfx/dfx2/index",
+                    "pages/dfx/dfx3/index",
+                    "pages/dfx/dfx4/index",
+                    "pages/dfx/dfx5/index",
+                    "pages/dfx/dfx6/index",
+                    "pages/dfx/dfx7/index",
+                    "pages/dfx/assist1/index",
+                    "pages/dfx/assist2/index",
+                    "pages/dfx/assist3/index",
+                    "pages/event/click/index",
+                    "pages/event/longpress/index",
+                    "pages/event/start/index",
+                    "pages/event/move/index",
+                    "pages/event/cancel/index",
+                    "pages/event/end/index",
+                    "pages/event/key/index",
+                    "pages/image-animator/01/index",
+                    "pages/image-animator/02/index",
+                    "pages/image-animator/03/index",
+                    "pages/image-animator/04/index",
+                    "pages/image-animator/05/index",
+                    "pages/image-animator/06/index",
+                    "pages/file/file01/index",
+                    "pages/file/file02/index",
+                    "pages/file/file03/index",
+                    "pages/file/file04/index",
+                    "pages/file/file05/index",
+                    "pages/file/file06/index",
+                    "pages/file/file07/index",
+                    "pages/deviceInfo/index",
+                    "pages/storage/storage01/index",
+                    "pages/storage/storage02/index",
+                    "pages/storage/storage03/index",
+                    "pages/opacity/01/index",
+                    "pages/opacity/02/index",
+                    "pages/opacity/03/index",
+                    "pages/dialog/dialog001/index",
+                    "pages/qrcode/index/index"
+                ]
+            }
+        ],
+        "reqPermissions": []
+    }
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/app.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/app.js
new file mode 100644
index 0000000..5672086
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/app.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+// for ui_manual_test
+export default {
+  onCreate() {
+    console.info("Application onCreate");
+  },
+  onDestroy() {
+    console.info("Application onDestroy");
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_051.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_051.png
new file mode 100755
index 0000000..e1b7f1c
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_051.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_052.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_052.png
new file mode 100755
index 0000000..ec68bde
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_052.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_053.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_053.png
new file mode 100755
index 0000000..8a03617
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_053.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_054.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_054.png
new file mode 100755
index 0000000..dfb035b
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_054.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_055.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_055.png
new file mode 100755
index 0000000..3942ba6
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_055.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_056.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_056.png
new file mode 100755
index 0000000..8a3e96b
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_056.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_057.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_057.png
new file mode 100755
index 0000000..4f95746
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_057.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_058.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_058.png
new file mode 100755
index 0000000..54d4b2c
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_058.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_059.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_059.png
new file mode 100755
index 0000000..7816eb7
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_059.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_060.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_060.png
new file mode 100755
index 0000000..3fc64f6
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_060.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_061.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_061.png
new file mode 100755
index 0000000..09af081
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_061.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_062.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_062.png
new file mode 100755
index 0000000..4c21e58
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_062.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_063.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_063.png
new file mode 100755
index 0000000..1a5854e
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_063.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_064.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_064.png
new file mode 100755
index 0000000..b505054
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_064.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_065.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_065.png
new file mode 100755
index 0000000..97ac46c
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_065.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_066.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_066.png
new file mode 100755
index 0000000..4efaf07
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_066.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_067.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_067.png
new file mode 100755
index 0000000..cc00071
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/A094_067.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/goAhead.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/goAhead.png
new file mode 100644
index 0000000..92e794f
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/goAhead.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/icon.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/icon.png
new file mode 100644
index 0000000..6ebbe65
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/icon.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/event.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/event.js
new file mode 100644
index 0000000..688de16
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/event.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 const commonFunc = function(obj, e) {
+  if (obj.flag) {
+    obj.color = 16766720;
+    obj.flag = false;
+  } else {
+    obj.color = 32768;
+    obj.flag = true;
+  }
+  obj.pointX = e.point.x;
+  obj.pointY = e.point.y;
+  obj.timeStamp = e.timeStamp;
+};
+export const dataCommon = {
+  color: "#5265ef",
+  flag: false,
+  pointX: 0,
+  pointY: 0,
+  timeStamp: 0
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/general.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/general.js
new file mode 100644
index 0000000..4c6253d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/general.js
@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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";
+
+export const backPage = function(superiorUri) {
+  return {
+    // back to main page
+    backMain() {
+      router.replace({ uri: "/pages/index/index" });
+    },
+    // back to superior page
+    backSuperior() {
+      router.replace({ uri: superiorUri });
+    }
+  };
+};
+export const imageFrames = [
+  { src: "/common/A094_051.png" },
+  { src: "/common/A094_052.png" },
+  { src: "/common/A094_053.png" },
+  { src: "/common/A094_054.png" },
+  { src: "/common/A094_055.png" },
+  { src: "/common/A094_056.png" },
+  { src: "/common/A094_057.png" },
+  { src: "/common/A094_058.png" },
+  { src: "/common/A094_059.png" },
+  { src: "/common/A094_060.png" },
+  { src: "/common/A094_061.png" },
+  { src: "/common/A094_062.png" },
+  { src: "/common/A094_063.png" },
+  { src: "/common/A094_064.png" },
+  { src: "/common/A094_065.png" },
+  { src: "/common/A094_066.png" },
+  { src: "/common/A094_067.png" }
+];
+export const pageRoute = function(prevUri, nextUri) {
+  return {
+    changePrev() {
+      router.replace({
+        uri: prevUri
+      });
+    },
+    backMain() {
+      router.replace({
+        uri: "pages/index/index"
+      });
+    },
+    changeNext() {
+      router.replace({
+        uri: nextUri
+      });
+    }
+  };
+};
+// route new page
+export const routePage = function(uri) {
+  return {
+    changePage() {
+      router.replace({ uri: uri });
+    }
+  };
+};
+// for back prev page
+export const goPage = function(prevUri) {
+  return {
+    goHome() {
+      router.replace({ uri: "pages/index/index" });
+    },
+    goPrevious() {
+      router.replace({ uri: prevUri });
+    }
+  };
+};
+export const lifeCycleFunc = function() {
+  return {
+    onInit() {
+      console.log("onInit called...");
+    },
+    onReady() {
+      console.log("onReady called...");
+    },
+    onShow() {
+      console.log("onShow called...");
+    },
+    onDestroy() {
+      console.log("onDestroy called...");
+    }
+  };
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/list.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/list.js
new file mode 100755
index 0000000..c65ad8d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/list.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 const addData = function() {
+  for (var i = 0; i < 50; i++) {
+    this.listData.push("common/left.png");
+    this.listData.push("common/right.png");
+    this.listData.push("common/music_prev.png");
+    this.listData.push("common/music_next.png");
+    this.listData.push("common/music_play.png");
+    this.listData.push("common/goAhead.png");
+  }
+};
+export const resource = [
+  "common/left.png",
+  "common/right.png",
+  "common/music_prev.png",
+  "common/music_next.png",
+  "common/music_play.png",
+  "common/goAhead.png"
+];
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/swiper.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/swiper.js
new file mode 100644
index 0000000..288ecad
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/js/swiper.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 const showPage = function(e) {
+  this.index = e.index;
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/left.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/left.png
new file mode 100644
index 0000000..ea923f5
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/left.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/music_next.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/music_next.png
new file mode 100644
index 0000000..93ced91
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/music_next.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/music_play.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/music_play.png
new file mode 100644
index 0000000..362b671
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/music_play.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/music_prev.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/music_prev.png
new file mode 100644
index 0000000..6101ca4
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/music_prev.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/nextRow.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/nextRow.png
new file mode 100644
index 0000000..c4bc654
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/nextRow.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/preRow.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/preRow.png
new file mode 100644
index 0000000..c9bf0b5
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/preRow.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/right.png b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/right.png
new file mode 100644
index 0000000..0b6229a
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/common/right.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/async/async001/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/async/async001/index.hml
new file mode 100644
index 0000000..b50d0d0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/async/async001/index.hml
@@ -0,0 +1,22 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+    <text style="left:50px;top:200px;width:200px;height:50px">FSModule</text>
+    <text style="left:250px;top:200px;width:150px;height:50px">{{testRes}}</text>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="backMain"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="backMain"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/async/async001/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/async/async001/index.js
new file mode 100644
index 0000000..6327e4b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/async/async001/index.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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";
+export default {
+  data: {
+    testRes: "failed"
+  },
+  backMain() {
+    router.replace({ uri: "pages/index/index" });
+  },
+  onInit() {
+    console.log("onInit called...");
+  },
+  onReady() {
+    console.log("onReady called...");
+  },
+  onShow() {
+    console.log("onShow called...");
+    var thisCtx = this;
+    var file = require("@system.file");
+    file.access({
+      uri: 'internal://app/test',
+      success: function() {
+        console.log('file.access success');
+        thisCtx.testRes = "passed";
+      },
+      fail: function(data, code) {
+        console.log('file.access fail, data: ' + data + ', code: ' + code);
+        thisCtx.testRes = "passed";
+      }
+    });
+    console.log('file.access execute finished!');
+    thisCtx.testRes = "failed";
+  },
+  onDestroy() {
+    console.log("onDestroy called...");
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/JSHeapOverFlow001/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/JSHeapOverFlow001/index.css
new file mode 100644
index 0000000..1cd5796
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/JSHeapOverFlow001/index.css
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+#container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 620px;
+}
+
+#testTitle {
+  font-size: 30px;
+  text-align: center;
+  width: 300px;
+  height: 65px;
+}
+
+.title {
+  font-size: 30px;
+  text-align: center;
+  border-color: aqua;
+  border-width: 2px;
+  width: 300px;
+  height: 30px;
+  padding: 5px;
+  margin: 5px;
+}
+
+#secDiv {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  left: 0px;
+  top: 200px;
+  width: 454px;
+  height: 60px;
+}
+
+.button {
+  width: 160px;
+  height: 50px;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/JSHeapOverFlow001/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/JSHeapOverFlow001/index.hml
new file mode 100644
index 0000000..55e9060
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/JSHeapOverFlow001/index.hml
@@ -0,0 +1,26 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div id="container">
+  <text id="testTitle">异常场景</text>
+  <text class="title" on:click="onClickOOM" style="height:50px">
+    onClick OOM
+  </text>
+  <div id="secDiv">
+    <input class="button" type="button" value="上一页" on:click="prePage" />
+    <div style="width: 20px; height: 20px"></div>
+    <input class="button" type="button" value="退出应用" on:click="exitPage" />
+  </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/JSHeapOverFlow001/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/JSHeapOverFlow001/index.js
new file mode 100755
index 0000000..4de045e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/JSHeapOverFlow001/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {
+  onClickOOM() {
+    var a = "1";
+    for (var i = 0; i < 100000; i++) {
+      a = a + 1;
+    }
+    console.log(a);
+  },
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/PercentSupport/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/PercentSupport/index.css
new file mode 100644
index 0000000..0ab23fb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/PercentSupport/index.css
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+.divContainer {
+    width: 100%;
+    height: 100%;
+    background-color: darkseagreen;
+    justify-content: center;
+    align-items: center;
+}
+.divContainer2 {
+    width: 90%;
+    height: 90%;
+    background-color: gainsboro;
+    justify-content: center;
+    align-items: center;
+}
+.stackContainer {
+    width: 50%;
+    height: 30%;
+    background-color: mistyrose;
+}
+.title {
+    width: 70%;
+    height: 60%;
+    font-size: 30px;
+    text-align: left;
+    background-color: black;
+}
+.contentCenter {
+    justify-content: center;
+    align-items: center;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/PercentSupport/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/PercentSupport/index.hml
new file mode 100644
index 0000000..6d808b1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/PercentSupport/index.hml
@@ -0,0 +1,46 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="divContainer" style="flex-direction: column;">
+    <div class="divContainer2" style="flex-direction: column;">
+        <stack style="width: {{stackWidth}}; height: {{stackHeight}}; background-color: mistyrose;"
+                grab:click="changePercentToPercent">
+            <text style="width: 300px;height: 35px; color: black;">
+                父组件{{stackWidth}},{{stackHeight}}
+            </text>
+            <text class="title" style="top: {{topValue}}; left: {{leftValue}};" grab:click="changePercentToPX">
+                宽60%，高50%, top {{topValue}} left {{leftValue}}
+            </text>
+        </stack>
+        <div class="contentCenter"
+                style="width: 100%; height: 70%; background-color: burlywood; flex-direction: column;">
+            <text style="width: 340px;height: 40px; text-align: center;background-color: aqua; margin:{{marginValue}};"
+                    grab:click="changeMargin">
+                margin {{marginValue}}
+            </text>
+            <list style="width: 70%; height: 75%; background-color: black;">
+                <list-item style="width: 100%; height: 35px;">
+                    <text style="width: 340px;height: 35px;">
+                        list 70%, 75%
+                    </text>
+                </list-item>
+                <list-item class="contentCenter" for="{{listData}}"
+                        style="width: 100%; height: 30%; background-color: white;">
+                    <input type="button" style="width: 60%; height: 60%;" value="{{$item}}"
+                            grab:click="returnIndex"></input>
+                </list-item>
+            </list>
+        </div>
+    </div>
+</div>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/PercentSupport/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/PercentSupport/index.js
new file mode 100644
index 0000000..b8f5812
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/PercentSupport/index.js
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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';
+
+export default {
+    data: {
+        title: 'World',
+        listData: [
+            "返回首页 1",
+            "返回首页 2",
+            "返回首页 3",
+            "返回首页 4",
+            "返回首页 5",
+            "返回首页 6",
+            "返回首页 7",
+            "返回首页 8",
+            "返回首页 9",
+            "返回首页 10"
+        ],
+        stackClickCount: 0,
+        stackWidth: "50%",
+        stackHeight: "30%",
+        topValue: "30%",
+        leftValue: "0px",
+        topLeftClickCount: 0,
+        marginValue: "8.5%",
+        marginClickCount: 0
+    },
+    changePercentToPercent() {
+        this.topLeftClickCount++;
+        if (this.topLeftClickCount % 2 == 0) {
+            this.stackWidth = "80%";
+            this.stackHeight = "40%";
+        } else {
+            this.stackWidth = "50%";
+            this.stackHeight = "30%";
+        }
+    },
+    changePercentToPX() {
+        this.topLeftClickCount++;
+        if (this.topLeftClickCount % 2 == 0) {
+            this.topValue = "0px";
+            this.leftValue = "30%";
+        } else {
+            this.topValue = "30%";
+            this.leftValue = "0px";
+        }
+    },
+    changeMargin() {
+        this.marginClickCount++;
+        if (this.marginClickCount % 2 == 0) {
+            this.marginValue = "8.5%";
+        } else {
+            this.marginValue = "10px";
+        }
+    },
+    returnIndex() {
+        router.replace({ uri:"pages/index/index" });
+    }
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/VersionCheck001/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/VersionCheck001/index.css
new file mode 100644
index 0000000..e257aa9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/VersionCheck001/index.css
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+#container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+#testTitle {
+  font-size: 30px;
+  text-align: center;
+  width: 300px;
+  height: 65px;
+}
+.title {
+  font-size: 30px;
+  text-align: center;
+  width: 400px;
+  height: 40px;
+}
+.title2 {
+  margin: 20px;
+  font-size: 38px;
+  text-align: center;
+  width: 350px;
+  height: 30px;
+}
+#secDiv {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  left: 0px;
+  top: 200px;
+  width: 454px;
+  height: 60px;
+}
+.button {
+  width: 150px;
+  height: 50px;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/VersionCheck001/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/VersionCheck001/index.hml
new file mode 100644
index 0000000..a1da3b1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/VersionCheck001/index.hml
@@ -0,0 +1,32 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div id="container">
+  <text id="testTitle">显示框架版本信息</text>
+  <text class="title" style="height:50px; color:{{textColor}}">
+    aceVersion: {{versionStr}}
+  </text>
+  <text class="title" style="height:50px; color:{{text2Color}}">
+    commit: {{commitStr}}
+  </text>
+  <text class="title" style="height:50px; color:{{text2Color}}">
+    {{buildStamp}}
+  </text>
+  <div id="secDiv">
+    <input class="button" type="button" value="下一页" onclick="nextPage" />
+    <div style="width: 20px; height: 20px"></div>
+    <input class="button" type="button" value="返回首页" onclick="exitPage" />
+  </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/VersionCheck001/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/VersionCheck001/index.js
new file mode 100644
index 0000000..28b83d8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/base/VersionCheck001/index.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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';
+
+export default {
+  data: {
+    versionStr: 'null',
+    commitStr: 'null',
+    buildStamp: 'null'
+  },
+  exitPage() {
+    router.replace({ uri:"pages/index/index" });
+  },
+  nextPage() {
+    router.replace({ uri:"pages/Base/PercentSupport/index" });
+  },
+  onShow() {
+    if(getAceVersion && typeof(getAceVersion) == "function") {
+      this.versionStr = getAceVersion();
+    }
+    if(getAceCommit && typeof(getAceCommit) == "function") {
+      this.commitStr = getAceCommit();
+    }
+    if(getAceStamp && typeof(getAceStamp) == "function") {
+      this.buildStamp = getAceStamp();
+    }
+  }
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera001/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera001/index.hml
new file mode 100644
index 0000000..0149727
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera001/index.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:140px;top:0px;width:200px;height:40px">camera001</text>
+  <input type="button" style="left:125px;top:50px;width:200px;height:60px;" value="takePhoto"onclick="takePhoto">
+  </input>
+  <camera ref="cam" style="left:100px;top:120px;width:250px;height:200px;" onerror="error">
+  </camera>
+  <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="backMain"/>
+  <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+  <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera001/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera001/index.js
new file mode 100644
index 0000000..514b242
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera001/index.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+export default {
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/camera/camera002/index").changePage,
+  ...lifeCycleFunc(),
+  takePhoto() {
+    console.log("JS::takePhoto called!");
+    var camera = this.$refs.cam;
+    camera.takePhoto({
+      quality: "high",
+      success: (res) => {
+        console.log("JS::camera.takePhoto success, uri=" + res.uri);
+      },
+      fail: (erromsg, errocode) => {
+        console.log("JS::camera.takePhoto fail, errocode=" + errocode + " erromsg=" + erromsg);
+      },
+      complete: () => {
+        console.log("JS::camera.takePhoto complete");
+      }
+    });
+  },
+  error: function (e) {
+    console.log("JS::camera.onerror detail=" + e.detail + " errorCode=" + e.errorCode);
+  },
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera002/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera002/index.hml
new file mode 100644
index 0000000..e2ceb31
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera002/index.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:140px;top:0px;width:200px;height:40px">camera002</text>
+  <input type="button" style="left:125px;top:50px;width:200px;height:60px;" value="takePhoto" onclick="takePhoto">
+  </input>
+  <camera ref="cam" style="left:100px;top:120px;width:250px;height:200px;">
+  </camera>
+  <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+  <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+  <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera002/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera002/index.js
new file mode 100644
index 0000000..4a04bac
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera002/index.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+export default {
+  changePrev:routePage("pages/camera/camera001/index").changePage,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/camera/camera003/index").changePage,
+  ...lifeCycleFunc(),
+  takePhoto() {
+    var camera = this.$refs.cam;
+    camera.takePhoto({
+      quality: "normal"
+    });
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera003/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera003/index.hml
new file mode 100644
index 0000000..9f09e41
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera003/index.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:140px;top:0px;width:200px;height:40px">camera003</text>
+  <input type="button" style="left:125px;top:50px;width:200px;height:60px;" value="takePhoto" onclick="takePhoto">
+  </input>
+  <camera ref="cam" style="left:100px;top:120px;width:250px;height:200px;">
+  </camera>
+  <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+  <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+  <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera003/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera003/index.js
new file mode 100644
index 0000000..e8e200a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera003/index.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+export default {
+  changePrev:routePage("pages/camera/camera002/index").changePage,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/camera/camera004/index").changePage,
+  ...lifeCycleFunc(),
+  takePhoto() {
+    var camera = this.$refs.cam;
+    camera.takePhoto({
+      quality: "low"
+    });
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera004/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera004/index.hml
new file mode 100644
index 0000000..32368e1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera004/index.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:140px;top:0px;width:200px;height:40px">camera004</text>
+  <input type="button" style="left:125px;top:50px;width:200px;height:60px;" value="takePhoto" onclick="takePhoto">
+  </input>
+  <camera ref="cam" style="left:100px;top:120px;width:250px;height:200px;">
+  </camera>
+  <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+  <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+  <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="backMain"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera004/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera004/index.js
new file mode 100644
index 0000000..16b7ea8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/camera/camera004/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+export default {
+  changePrev:routePage("pages/camera/camera003/index").changePage,
+  backMain:backPage().backMain,
+  ...lifeCycleFunc(),
+  takePhoto() {
+    var camera = this.$refs.cam;
+    camera.takePhoto({
+      quality: "illegal"
+    });
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/deviceInfo/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/deviceInfo/index.css
new file mode 100755
index 0000000..04fe1df
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/deviceInfo/index.css
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    display: flex;
+    flex-direction: column;
+    left: 0px;
+    top: 0px;
+    width: 454px;
+    height: 800px;
+}
+
+.title {
+    width: 454px;
+    height: 45px;
+    text-align: center;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/deviceInfo/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/deviceInfo/index.hml
new file mode 100755
index 0000000..8726fa4
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/deviceInfo/index.hml
@@ -0,0 +1,32 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container">
+    <text class="title">device api</text>
+    <text class="title" onclick="clickAction">点击获取信息</text>
+    <text class="title">{{brand}}</text>
+    <text class="title">{{manufacturer}}</text>
+    <text class="title">{{model}}</text>
+    <text class="title">{{product}}</text>
+    <text class="title">{{language}}</text>
+    <text class="title">{{region}}</text>
+    <text class="title">{{windowWidth}}</text>
+    <text class="title">{{windowHeight}}</text>
+    <text class="title">{{screenDensity}}</text>
+    <text class="title">{{screenShape}}</text>
+    <text class="title">{{apiVersion}}</text>
+    <text class="title">{{deviceType}}</text>
+    <text class="title" onclick="backMain">退出</text>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/deviceInfo/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/deviceInfo/index.js
new file mode 100755
index 0000000..57e7dc6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/deviceInfo/index.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 device from '@system.device';
+import {backPage} from "../../common/js/general";
+
+export default {
+    data: {
+        brand:'',
+        manufacturer:'',
+        model:'',
+        product:'',
+        language:'',
+        region:'',
+        windowWidth:'',
+        windowHeight:'',
+        screenDensity:'',
+        screenShape:'',
+        apiVersion:'',
+        deviceType:''
+    },
+    backMain:backPage().backMain,
+    clickAction:function(){
+        let that = this;
+        device.getInfo({
+            success:function(data){
+                that.brand = 'band:' + data.brand;
+                that.manufacturer = 'manufacturer:' + data.manufacturer;
+                that.model = 'model:' + data.model;
+                that.product = 'product:' + data.product;
+                that.language = 'language:' + data.language;
+                that.region = 'region:' + data.region;
+                that.windowHeight = 'windowHeight:' + data.windowHeight;
+                that.windowWidth = 'windowWidth:' + data.windowWidth;
+                that.screenDensity = 'screenDensity:' + data.screenDensity;
+                that.screenShape = 'screenShape:' + data.screenShape;
+                that.apiVersion = 'apiVersion:' + data.apiVersion;
+                that.deviceType = 'deviceType:' + data.deviceType;
+                console.log("get device info success");
+            },
+            fail:function(data,code){
+                that.brand = "get device info failed, errorcode:"+code;
+                console.log("get device info failed");
+            },
+            complete:function(){
+                console.log("get device info completed");
+            }
+        });
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist1/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist1/index.css
new file mode 100755
index 0000000..8fa6854
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist1/index.css
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+
+.title {
+  font-size: 30px;
+  width: 350px;
+  height: 80px;
+}
+
+.btn {
+  width: 150px;
+  height: 50px;
+  top: 230px;
+  left: 120px;
+}
+
+.testTitle {
+  font-size: 30px;
+  text-align: center;
+  width: 350px;
+  height: 65px;
+  top: 100px;
+  left: 50px;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist1/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist1/index.hml
new file mode 100755
index 0000000..a16d79f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist1/index.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text class="testTitle">DFX 功能增强1</text>
+  <text class="title" style="left:130px;top:150px;color:{{textColor}}">
+    {{textValue}}
+  </text>
+  <input type="button" class="btn" value="click" onclick="showChange" />
+  <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev" />
+  <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain" />
+  <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext" />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist1/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist1/index.js
new file mode 100755
index 0000000..cabe80a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist1/index.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage} from "../../../common/js/general";
+export default {
+  data: {
+    textValue: "Hello World",
+    textColor: 65280
+  },
+  showChange() {
+    this.textValue = "Hello ACE";
+    this.textColor = 16711680;
+  },
+  changePrev:routePage("pages/dfx/dfx7/index").changePage,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/dfx/assist2/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist2/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist2/index.css
new file mode 100755
index 0000000..30f4111
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist2/index.css
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+
+.title {
+  font-size: 30px;
+  width: 350px;
+  height: 80px;
+}
+
+.btn {
+  width: 150px;
+  height: 50px;
+  top: 230px;
+  left: 120px;
+}
+
+.testTitle {
+  font-size: 30px;
+  text-align: center;
+  width: 350px;
+  height: 65px;
+  top: 100px;
+  left: 50px;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist2/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist2/index.hml
new file mode 100755
index 0000000..d751b8b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist2/index.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text class="testTitle">DFX 功能增强2</text>
+  <text class="title" style="left:130px;top:150px;color:{{textColor}}">
+    {{textValue}}
+  </text>
+  <input type="button" class="btn" value="click" onclick="showChange" />
+  <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev" />
+  <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain" />
+  <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext" />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist2/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist2/index.js
new file mode 100755
index 0000000..cce9bf4
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist2/index.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+export default {
+  data: {
+    textValue: "Hello World",
+    textColor: 65280
+  },
+  showChange() {
+    // construct undefined variable
+    var sum = num + 1;
+  },
+  changePrev:routePage("pages/dfx/assist1/index").changePage,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/dfx/assist3/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist3/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist3/index.css
new file mode 100755
index 0000000..30f4111
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist3/index.css
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+
+.title {
+  font-size: 30px;
+  width: 350px;
+  height: 80px;
+}
+
+.btn {
+  width: 150px;
+  height: 50px;
+  top: 230px;
+  left: 120px;
+}
+
+.testTitle {
+  font-size: 30px;
+  text-align: center;
+  width: 350px;
+  height: 65px;
+  top: 100px;
+  left: 50px;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist3/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist3/index.hml
new file mode 100755
index 0000000..f1a548f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist3/index.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text class="testTitle">DFX 功能增强3</text>
+  <text class="title" style="left:130px;top:150px;color:{{textColor}}">
+    {{textValue}}
+  </text>
+  <input type="button" class="btn" value="click" onclick="showChange" />
+  <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev" />
+  <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain" />
+  <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext" />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist3/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist3/index.js
new file mode 100755
index 0000000..6c4c884
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/assist3/index.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    textValue: "Hello World",
+    textColor: 65280
+  },
+  showChange() {
+    // construct undefined method
+    this.xxx();
+  },
+  changePrev:routePage("pages/dfx/assist2/index").changePage,
+  backMain:backPage().backMain
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx1/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx1/index.css
new file mode 100644
index 0000000..19f28f3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx1/index.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 75px;
+  width: 200px;
+  height: 150px;
+  margin: 10px;
+  padding: 30px;
+  border-width: 1px;
+  border-radius: 10px;
+  background-color: #ff0000;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx1/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx1/index.hml
new file mode 100644
index 0000000..d26390e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx1/index.hml
@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;"
+>
+  <text
+    id="textid"
+    style="left:70px;top:20px;width:400px;height:50px;"
+    onclick="getDomNode('textid')"
+    >get dom node</text
+  >
+  <div class="commonStyle"></div>
+  <text style="left:70px;top:320px;width:400px;height:40px;">domId: {{domId}}</text>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx1/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx1/index.js
new file mode 100644
index 0000000..12d6886
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx1/index.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+var dfx = require("@system.dfx");
+import {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+
+export default {
+  data: {
+    domId: ""
+  },
+  getDomNode(viewid) {
+    var info = dfx.dumpDomNode(viewid);
+    if (info == undefined) {
+      console.log("dump dom node error");
+      this.domId = "error";
+    } else {
+      var jsonInfo = JSON.parse(info);
+      this.domId = jsonInfo.id;
+    }
+  },
+  ...lifeCycleFunc(),
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/dfx/dfx2/index").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx2/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx2/index.css
new file mode 100644
index 0000000..b586b71
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx2/index.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 95px;
+  width: 200px;
+  height: 150px;
+  margin: 10px;
+  padding: 30px;
+  border-width: 1px;
+  border-radius: 10px;
+  background-color: #ff0000;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx2/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx2/index.hml
new file mode 100644
index 0000000..4ba0d14
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx2/index.hml
@@ -0,0 +1,45 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;"
+>
+  <text
+    id="textid"
+    style="left:50px;top:20px;width:400px;height:50px"
+    onclick="getDomTree"
+    >get dom tree default</text
+  >
+  <div class="commonStyle"></div>
+  <text style="left:70px;top:320px;width:400px;height:40px">{{msg}}</text>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx2/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx2/index.js
new file mode 100644
index 0000000..ddffbf9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx2/index.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+var dfx = require("@system.dfx");
+import {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+
+export default {
+  data: {
+    msg: ""
+  },
+  getDomTree() {
+    if (dfx.dumpDomTree()) {
+      console.log("dump dom tree success");
+      this.msg = "success";
+    } else {
+      console.log("dum dom tree fail");
+      this.msg = "fail";
+    }
+  },
+  ...lifeCycleFunc(),
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/dfx/dfx3/index").changePage,
+  changePrev:routePage("pages/dfx/dfx1/index").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx3/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx3/index.css
new file mode 100644
index 0000000..b586b71
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx3/index.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 95px;
+  width: 200px;
+  height: 150px;
+  margin: 10px;
+  padding: 30px;
+  border-width: 1px;
+  border-radius: 10px;
+  background-color: #ff0000;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx3/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx3/index.hml
new file mode 100644
index 0000000..d9f9461
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx3/index.hml
@@ -0,0 +1,45 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;opacity: 0.5"
+>
+  <text
+    id="treeid"
+    style="left:70px;top:20px;width:400px;height:50px"
+    onclick="getDomTree('treeid')"
+    >get dom tree</text
+  >
+  <div class="commonStyle"></div>
+  <text style="left:70px;top:320px;width:400px;height:40px">{{msg}}</text>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx3/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx3/index.js
new file mode 100644
index 0000000..43bdce6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx3/index.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+var dfx = require("@system.dfx");
+import {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+
+export default {
+  data: {
+    msg: ""
+  },
+  getDomTree(viewId) {
+    if (dfx.dumpDomTree(viewId)) {
+      console.log("dump dom tree success");
+      this.msg = "success";
+    } else {
+      console.log("dum dom tree fail");
+      this.msg = "fail";
+    }
+  },
+  ...lifeCycleFunc(),
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/dfx/dfx4/index").changePage,
+  changePrev:routePage("pages/dfx/dfx2/index").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx4/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx4/index.css
new file mode 100644
index 0000000..fc4fd96
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx4/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 130px;
+  width: 200px;
+  height: 200px;
+  border-width: 1px;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx4/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx4/index.hml
new file mode 100644
index 0000000..c2d6e13
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx4/index.hml
@@ -0,0 +1,46 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;"
+>
+  <text style="left:80px;top:20px;width:400px;height:50px" onclick="clickEvent"
+    >click event</text
+  >
+  <div
+    class="commonStyle"
+    style="background-color:{{color}}"
+    onclick="changeGreen"
+    onlongpress="changeRed"
+  ></div>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx4/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx4/index.js
new file mode 100644
index 0000000..4e87168
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx4/index.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+var dfx = require("@system.dfx");
+import {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+
+export default {
+  data: {
+    color: "#5265ef"
+  },
+  changeGreen() {
+    this.color = 32768;
+  },
+  changeRed() {
+    this.color = 16711680;
+  },
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/dfx/dfx5/index").changePage,
+  changePrev:routePage("pages/dfx/dfx3/index").changePage,
+  onInit: lifeCycleFunc().onInit,
+  onReady: lifeCycleFunc().onReady,
+  onShow() {
+    console.log("onShow called...");
+
+    console.log("click...");
+    var points = [
+      [200, 250, 1],
+      [200, 250, 1],
+      [200, 250, 1],
+      [200, 250, 1],
+      [200, 250, 0]
+    ];
+
+    dfx.injectEvent(points, "point");
+    console.log("click...");
+  },
+  onDestroy: lifeCycleFunc().onDestroy
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx5/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx5/index.css
new file mode 100644
index 0000000..fc4fd96
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx5/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 130px;
+  width: 200px;
+  height: 200px;
+  border-width: 1px;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx5/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx5/index.hml
new file mode 100644
index 0000000..41e38c6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx5/index.hml
@@ -0,0 +1,46 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;"
+>
+  <text style="left:70px;top:20px;width:400px;height:50px" onclick="clickEvent"
+    >long press event</text
+  >
+  <div
+    class="commonStyle"
+    style="background-color:{{color}}"
+    onclick="changeGreen"
+    onlongpress="changeRed"
+  ></div>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx5/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx5/index.js
new file mode 100644
index 0000000..49bb20c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx5/index.js
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+var dfx = require("@system.dfx");
+import { backPage, routePage, lifeCycleFunc } from "../../../common/js/general";
+
+export default {
+  data: {
+    color: "#5265ef"
+  },
+  changeRed() {
+    this.color = 16711680;
+  },
+  changeGreen() {
+    this.color = 32768;
+  },
+  onInit: lifeCycleFunc().onInit,
+  onReady: lifeCycleFunc().onReady,
+  onShow() {
+    var pointss = [];
+    function addData() {
+      for (var i = 0; i < 20; i++) {
+        pointss.push([200, 250, 1]);
+      }
+      pointss.push([200, 250, 0]);
+    }
+    console.log("onShow called...");
+    console.log("press...");
+    addData();
+    dfx.injectEvent(pointss, "point");
+    console.log("press...");
+  },
+  onDestroy: lifeCycleFunc().onDestroy,
+  backMain: backPage().backMain,
+  changeNext: routePage("pages/dfx/dfx6/index").changePage,
+  changePrev: routePage("pages/dfx/dfx4/index").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx6/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx6/index.css
new file mode 100644
index 0000000..611548d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx6/index.css
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.sliderStyle {
+  left: 100px;
+  top: 280px;
+  color: #b22222;
+  height: 30px;
+  width: 250px;
+  selected-color: #00ff00;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx6/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx6/index.hml
new file mode 100644
index 0000000..49f8718
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx6/index.hml
@@ -0,0 +1,48 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;"
+>
+  <text style="left:80px;top:20px;width:400px;height:50px" onclick="dragEvent"
+    >drag event</text
+  >
+  <slider
+    class="sliderStyle"
+    min="100"
+    max="200"
+    value="{{dynamicValue}}"
+    onclick="clickSlider"
+    onchange="valueChange"
+  />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx6/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx6/index.js
new file mode 100644
index 0000000..be9bb73
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx6/index.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+var dfx = require("@system.dfx");
+import {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+
+export default {
+  getDomNode(viewid) {
+    var info = dfx.dumpDomNode(viewid);
+    if (info == undefined) {
+      console.log("dump dom node error");
+    } else {
+      console.log(JSON.stringify(info));
+    }
+  },
+  onInit: lifeCycleFunc().onInit,
+  onReady: lifeCycleFunc().onReady,
+  onShow() {
+    console.log("onShow called...");
+    console.log("drag...");
+    var drag_points = [
+      [228, 299, 1],
+      [248, 299, 1],
+      [289, 299, 0]
+    ];
+    dfx.injectEvent(drag_points, "point");
+    console.log("drag...");
+  },
+  onDestroy: lifeCycleFunc().onDestroy,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/dfx/dfx7/index").changePage,
+  changePrev:routePage("pages/dfx/dfx5/index").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx7/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx7/index.css
new file mode 100644
index 0000000..b586b71
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx7/index.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 95px;
+  width: 200px;
+  height: 150px;
+  margin: 10px;
+  padding: 30px;
+  border-width: 1px;
+  border-radius: 10px;
+  background-color: #ff0000;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx7/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx7/index.hml
new file mode 100644
index 0000000..f225f0d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx7/index.hml
@@ -0,0 +1,42 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;"
+>
+  <text id="textid" style="left:100px;top:20px;width:400px;height:50px"
+    >screensnap</text
+  >
+  <div class="commonStyle" onclick="makeScreenshot"></div>
+  <text style="left:70px;top:320px;width:400px;height:40px">{{msg}}</text>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx7/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx7/index.js
new file mode 100755
index 0000000..327672c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dfx/dfx7/index.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+
+var dfx = require("@system.dfx");
+import { backPage, routePage, lifeCycleFunc } from "../../../common/js/general";
+
+export default {
+  data: {
+    msg: ""
+  },
+  makeScreenshot() {
+    if (dfx.screenshotToFile()) {
+      this.msg = "success";
+      console.log("screen success");
+    } else {
+      this.msg = "fail";
+      console.log("screen fail");
+    }
+  },
+  ...lifeCycleFunc(),
+  backMain: backPage().backMain,
+  changePrev: routePage("pages/dfx/dfx6/index").changePage,
+  changeNext: routePage("pages/dfx/assist1/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dialog/dialog001/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dialog/dialog001/index.hml
new file mode 100755
index 0000000..6ad4042
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dialog/dialog001/index.hml
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:140px;top:0px;width:200px;height:40px">dialog</text>
+  <input type="button" style="left:125px;top:50px;width:200px;height:50px;" value="showDialog"onclick="showDialog">
+  </input>
+  <input type="button" style="left:125px;top:110px;width:200px;height:50px;" value="showDialog01"onclick="showDialog01">
+  </input>
+  <input type="button" style="left:125px;top:170px;width:200px;height:50px;" value="showDialog02"onclick="showDialog02">
+  </input>
+  <input type="button" style="left:125px;top:230px;width:200px;height:50px;" value="showDialog03"onclick="showDialog03">
+  </input>
+  <input type="button" style="left:125px;top:290px;width:200px;height:50px;" value="showDialog04"onclick="showDialog04">
+  </input>
+  <input type="button" style="left:125px;top:350px;width:200px;height:50px;" value="showDialog05"onclick="showDialog05">
+  </input>
+  <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:410px;" onclick="backMain"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dialog/dialog001/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dialog/dialog001/index.js
new file mode 100755
index 0000000..6e96327
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/dialog/dialog001/index.js
@@ -0,0 +1,233 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+import prompt from "@system.prompt";
+
+export default {
+  backMain:backPage().backMain,
+  ...lifeCycleFunc(),
+  showDialog() {
+    console.log("JS::show dialog called!");
+    prompt.showDialog({title: '弹框标题',});
+  },
+
+  showDialog01() {
+    console.log("JS::show dialog01 called!");
+    prompt.showDialog({
+    title: '弹框标题',
+    message: '弹框显示内容01',
+    buttons: [
+      {
+        text: '确认',
+        color: '#666666',
+      },
+    ],
+    success: function(data) {
+      console.log('dialog success callback，click button : ' + data.index);
+      switch(data.index)
+      {
+          case 0:
+              console.log("JS::dialog confirm button clicked!");
+              break;
+      }
+    },
+    });
+  },
+
+    showDialog02() {
+      console.log("JS::show dialog02 called!");
+      prompt.showDialog({
+      title: '弹框标题',
+      message: '弹框显示内容02',
+      buttons: [
+        {
+          text: '确认',
+          color: '#666666',
+        },
+        {
+          text: '取消',
+          color: '#666666',
+        },
+      ],
+      success: function(data) {
+        console.log('dialog success callback，click button : ' + data.index);
+        switch(data.index)
+        {
+            case 0:
+                console.log("JS::dialog confirm button clicked!");
+                break;
+            case 1:
+                console.log("JS::dialog cancel button clicked!");
+                break;
+        }
+      },
+    });
+  },
+
+  showDialog03() {
+      console.log("JS::show dialog03 called!");
+      prompt.showDialog({
+      title: '弹框标题',
+      message: '弹框显示内容03',
+      buttons: [
+        {
+          text: '确认',
+          color: '#666666',
+        },
+        {
+          text: '取消',
+          color: '#666666',
+        },
+        {
+          text: '完成',
+          color: '#666666',
+        },
+      ],
+      success: function(data) {
+        console.log('dialog success callback，click button : ' + data.index);
+        switch(data.index)
+        {
+            case 0:
+                console.log("JS::dialog confirm button index 0 clicked!");
+                break;
+            case 1:
+                console.log("JS::dialog cancel button index 1 clicked!");
+                break;
+            case 2:
+                console.log("JS::dialog complete button index 2 clicked!");
+                break;
+        }
+      },
+    });
+  },
+
+  showDialog04() {
+      console.log("JS::show dialog04 called!");
+      prompt.showDialog({
+      title: '弹框标题',
+      message: '弹框显示内容04',
+      buttons: [
+        {
+          text: '确认',
+          color: '#666666',
+        },
+        {
+          text: '取消',
+          color: '#666666',
+        },
+        {
+          text: '完成',
+          color: '#666666',
+        },
+        {
+          text: 'button04',
+          color: '#666666',
+        },
+      ],
+      success: function(data) {
+        console.log('dialog success callback，click button : ' + data.index);
+        switch(data.index)
+        {
+            case 0:
+                console.log("JS::dialog confirm button index 0 clicked!");
+                break;
+            case 1:
+                console.log("JS::dialog cancel button clicked!");
+                break;
+            case 2:
+                console.log("JS::dialog complete button clicked!");
+                break;
+            case 3:
+                console.log("JS::dialog buttontest04 button clicked!");
+                break;
+        }
+      },
+    });
+  },
+
+      showDialog05() {
+      var dialogContext = this;
+      console.log("JS::show dialog05 called!");
+      prompt.showDialog({
+      title: '弹框标题',
+      message: '弹框显示内容06',
+      buttons: [
+        {
+          text: '确认',
+          color: '#ff0000',
+        },
+        {
+          text: '取消',
+          color: '#00ff00',
+        },
+      ],
+      success: function(data) {
+        console.log('dialog success callback，click button : ' + data.index);
+        switch(data.index)
+        {
+            case 0:
+                console.log("JS::dialog confirm button clicked!");
+                dialogContext.showDialog07();
+                break;
+            case 1:
+                console.log("JS::dialog cancel button clicked!");
+                break;
+        }
+      },
+    });
+    setTimeout(
+      () => {
+        this.showDialog06();
+      }, 5 * 1000
+    );
+
+  },
+
+  showDialog06() {
+    console.log("JS::show dialog 06 called!");
+    prompt.showDialog({message: 'only ShowMessage',});
+  },
+
+  showDialog07() {
+    console.log("JS::show dialog 07 called !");
+    prompt.showDialog({
+      title: '弹框标题',
+      message: 'show second dialog',
+      buttons: [
+        {
+          text: '确认',
+          color: '#0000ff',
+        },
+        {
+          text: '取消',
+          color: '#0000ff',
+        },
+      ],
+      success: function(data) {
+        console.log('dialog success callback，click button : ' + data.index);
+        switch(data.index)
+        {
+            case 0:
+                console.log("JS::dialog confirm button clicked!");
+                break;
+            case 1:
+                console.log("JS::dialog cancel button clicked!");
+                break;
+        }
+      },
+    });
+  },
+
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/cancel/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/cancel/index.css
new file mode 100644
index 0000000..cce4b4a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/cancel/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 100px;
+  width: 200px;
+  height: 150px;
+  border-width: 1px;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/cancel/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/cancel/index.hml
new file mode 100644
index 0000000..4085b50
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/cancel/index.hml
@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;"
+>
+  <text style="left:150px;top:20px;width:400px;height:40px">touch cancel</text>
+  <div
+    class="commonStyle"
+    style="background-color:{{color}}"
+    ontouchcancel="touchcancel"
+  ></div>
+  <text style="left:30px;top:280px;width:400px;height:40px;"
+    >x: {{pointX}} , y: {{pointY}}</text
+  >
+  <text style="left:30px;top:330px;width:400px;height:40px;"
+    >timeStamp: {{timeStamp}}</text
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/cancel/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/cancel/index.js
new file mode 100644
index 0000000..0bf512a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/cancel/index.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage, lifeCycleFunc } from "../../../common/js/general";
+import { commonFunc, dataCommon } from "../../../common/js/event";
+
+export default {
+  data: {
+    ...dataCommon
+  },
+  touchcancel(e) {
+    console.log("touch end start");
+    commonFunc(this, e);
+    console.log("touch end stop");
+  },
+  ...lifeCycleFunc(),
+  backMain: backPage().backMain,
+  changeNext: routePage("pages/event/end/index").changePage,
+  changePrev: routePage("pages/event/move/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/click/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/click/index.css
new file mode 100644
index 0000000..cce4b4a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/click/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 100px;
+  width: 200px;
+  height: 150px;
+  border-width: 1px;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/click/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/click/index.hml
new file mode 100644
index 0000000..a428083
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/click/index.hml
@@ -0,0 +1,48 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;"
+>
+  <text style="left:150px;top:20px;width:400px;height:40px">click</text>
+  <div
+    class="commonStyle"
+    style="background-color:{{color}}"
+    onclick="clickEvent"
+  ></div>
+  <text style="left:30px;top:280px;width:400px;height:40px;"
+    >x: {{pointX}} , y: {{pointY}}</text
+  >
+  <text style="left:30px;top:330px;width:400px;height:40px;"
+    >timeStamp: {{timeStamp}}</text
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/click/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/click/index.js
new file mode 100644
index 0000000..e484c8c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/click/index.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+import {commonFunc, dataCommon} from "../../../common/js/event";
+
+export default {
+  data: {
+    ...dataCommon
+  },
+  clickEvent(e) {
+    console.log("click start");
+    commonFunc(this, e);
+    console.log("click stop");
+  },
+  ...lifeCycleFunc(),
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/event/longpress/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/end/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/end/index.css
new file mode 100644
index 0000000..cce4b4a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/end/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 100px;
+  width: 200px;
+  height: 150px;
+  border-width: 1px;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/end/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/end/index.hml
new file mode 100644
index 0000000..6ca952a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/end/index.hml
@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;opacity: 0.5"
+>
+  <text style="left:150px;top:20px;width:400px;height:40px">touch end</text>
+  <div
+    class="commonStyle"
+    style="background-color:{{color}}"
+    ontouchend="touchend"
+  ></div>
+  <text style="left:30px;top:280px;width:400px;height:40px;"
+    >x: {{pointX}} , y: {{pointY}}</text
+  >
+  <text style="left:30px;top:330px;width:400px;height:40px;"
+    >timeStamp: {{timeStamp}}</text
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/end/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/end/index.js
new file mode 100644
index 0000000..a4b0298
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/end/index.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+import {commonFunc, dataCommon} from "../../../common/js/event"
+
+export default {
+  data: {
+    ...dataCommon
+  },
+  touchend(e) {
+    console.log("touch end start");
+    commonFunc(this, e);
+    console.log("touch end stop");
+  },
+  ...lifeCycleFunc(),
+  backMain:backPage().backMain,
+  changePrev:routePage("pages/event/cancel/index").changePage,
+  changeNext:routePage("pages/event/key/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/key/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/key/index.css
new file mode 100644
index 0000000..cce4b4a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/key/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 100px;
+  width: 200px;
+  height: 150px;
+  border-width: 1px;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/key/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/key/index.hml
new file mode 100644
index 0000000..8df38ac
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/key/index.hml
@@ -0,0 +1,43 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;"
+>
+  <text style="left:150px;top:20px;width:400px;height:40px;">key event</text>
+  <div
+    class="commonStyle"
+    style="background-color:{{color}}"
+    onkey="keyEvent"
+  ></div>
+  <text style="left:30px;top:280px;width:400px;height:40px;">{{msg}}</text>
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/key/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/key/index.js
new file mode 100644
index 0000000..d6dab58
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/key/index.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+
+export default {
+  data: {
+    color: "#5265ef",
+    flag: false,
+    msg: "key event"
+  },
+  keyEvent(e) {
+    console.log("key start");
+    if (this.flag) {
+      this.color = 16766720;
+      this.flag = false;
+      this.msg = "color is 16766720";
+    } else {
+      this.color = 32768;
+      this.flag = true;
+      this.msg = "color is 32768";
+    }
+    console.log("key stop");
+  },
+  ...lifeCycleFunc(),
+  backMain:backPage().backMain,
+  changePrev:routePage("pages/event/end/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/longpress/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/longpress/index.css
new file mode 100644
index 0000000..cce4b4a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/longpress/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 100px;
+  width: 200px;
+  height: 150px;
+  border-width: 1px;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/longpress/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/longpress/index.hml
new file mode 100644
index 0000000..d665c62
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/longpress/index.hml
@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;opacity: 0.5"
+>
+  <text style="left:150px;top:20px;width:400px;height:40px">long press</text>
+  <div
+    class="commonStyle"
+    style="background-color:{{color}}"
+    onlongpress="longPressEvent"
+  ></div>
+  <text style="left:30px;top:280px;width:400px;height:40px;"
+    >x: {{pointX}} , y: {{pointY}}</text
+  >
+  <text style="left:30px;top:330px;width:400px;height:40px;"
+    >timeStamp: {{timeStamp}}</text
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/longpress/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/longpress/index.js
new file mode 100644
index 0000000..6fe4d3a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/longpress/index.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+import {commonFunc, dataCommon} from "../../../common/js/event"
+
+export default {
+  data: {
+    ...dataCommon
+  },
+  longPressEvent(e) {
+    console.log("press start");
+    commonFunc(this, e);
+    console.log("press stop");
+  },
+  ...lifeCycleFunc(),
+  backMain:backPage().backMain ,
+  changeNext:routePage("pages/event/start/index").changePage,
+  changePrev:routePage("pages/event/click/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/move/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/move/index.css
new file mode 100644
index 0000000..cce4b4a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/move/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 100px;
+  width: 200px;
+  height: 150px;
+  border-width: 1px;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/move/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/move/index.hml
new file mode 100644
index 0000000..ebd7519
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/move/index.hml
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;opacity: 0.5"
+>
+  <text style="left:150px;top:20px;width:400px;height:40px;">touch move</text>
+  <div
+    class="commonStyle"
+    style="background-color:{{color}}"
+    ontouchstart="touchstart"
+    ontouchmove="touchmove"
+  ></div>
+  <text style="left:30px;top:280px;width:400px;height:40px;"
+    >start X: {{startX}} , Y: {{startY}}</text
+  >
+  <text style="left:30px;top:330px;width:400px;height:40px;"
+    >timeStamp: {{timeStamp}}</text
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/move/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/move/index.js
new file mode 100644
index 0000000..916744f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/move/index.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, lifeCycleFunc, routePage} from "../../../common/js/general";
+import {commonFunc, dataCommon} from "../../../common/js/event";
+
+export default {
+  data: {
+    ...dataCommon,
+    startX: 0,
+    startY: 0
+  },
+  touchstart(e) {
+    console.log("touch  start");
+    commonFunc(this, e);
+    console.log("touch  stop");
+  },
+  touchmove(e) {
+    console.log("touch move start");
+    commonFunc(this, e);
+    this.startX = e.touches.startX;
+    this.startY = e.touches.startY;
+    console.log("touch move end");
+  },
+  ...lifeCycleFunc(),
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/event/cancel/index").changePage,
+  changePrev:routePage("pages/event/start/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/start/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/start/index.css
new file mode 100644
index 0000000..cce4b4a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/start/index.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.commonStyle {
+  left: 95px;
+  top: 100px;
+  width: 200px;
+  height: 150px;
+  border-width: 1px;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/start/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/start/index.hml
new file mode 100644
index 0000000..acdf8d0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/start/index.hml
@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  style="width: 444px;height: 444px;margin: 20px;border-width: 5px;border-color: #00ff00;border-radius: 10px;opacity: 0.5"
+>
+  <text style="left:150px;top:20px;width:400px;height:40px;">touch start</text>
+  <div
+    class="commonStyle"
+    style="background-color:{{color}}"
+    ontouchstart="touchstart"
+  ></div>
+  <text style="left:30px;top:280px;width:400px;height:40px;"
+    >x: {{pointX}} , y: {{pointY}}</text
+  >
+  <text style="left:30px;top:330px;width:400px;height:40px;"
+    >timeStamp: {{timeStamp}}</text
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:380px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:380px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:380px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/start/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/start/index.js
new file mode 100644
index 0000000..fc13093
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/event/start/index.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, lifeCycleFunc, routePage} from "../../../common/js/general";
+import {commonFunc, dataCommon} from "../../../common/js/event"
+
+export default {
+  data: {
+    ...dataCommon
+  },
+  touchstart(e) {
+    console.log("touch end start");
+    commonFunc(this, e);
+    console.log("touch end stop");
+  },
+  ...lifeCycleFunc(),
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/event/move/index").changePage,
+  changePrev:routePage("pages/event/longpress/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file01/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file01/index.hml
new file mode 100644
index 0000000..2582736
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file01/index.hml
@@ -0,0 +1,62 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:340px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      step1:move()
+    </text>
+    <input
+      type="button"
+      value="move"
+      style="width:100px;height:60px;left:60px;top:100px;"
+      onclick="fileMove"
+    />
+    <input
+      type="button"
+      value="{{srcStatus}}"
+      style="width:100px;height:60px;left:60px;top:170px;"
+      onclick="checkSrc"
+    />
+    <input
+      type="button"
+      value="{{desStatus}}"
+      style="width:100px;height:60px;left:60px;top:240px;"
+      onclick="checkDes"
+    />
+  </stack>
+
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file01/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file01/index.js
new file mode 100644
index 0000000..7b4520a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file01/index.js
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import file from "@system.file";
+
+export default {
+  data: {
+    srcStatus: false,
+    desStatus: false
+  },
+  backMain: backPage().backMain,
+  changeNext: routePage("pages/file/file02/index").changePage,
+  fileMove: function() {
+    file.move({
+      srcUri: "internal://app/testfile1",
+      dstUri: "internal://app/testfile2",
+      success: function(uri) {
+        console.log("move call success :" + uri);
+      },
+      fail: function(data, code) {
+        console.log("move call fail");
+      },
+      complete: function() {
+        console.log("move call complete");
+      }
+    })
+  },
+  checkSrc: function() {
+    var obj = this;
+    file.access({
+      uri: "internal://app/testfile1",
+      success: function(data) {
+        console.log("move src file exist.");
+      },
+      fail: function(data, code) {
+        console.log("move src file not exist.");
+        obj.srcStatus = true;
+      },
+      complete: function() {
+        console.log("move src access call complete.");
+      }
+    })
+  },
+  checkDes: function() {
+    var obj = this;
+    file.access({
+      uri: "internal://app/testfile2",
+      success: function(data) {
+        console.log("move des file exist.");
+        obj.desStatus = true;
+      },
+      fail: function(data, code) {
+        console.log("move des file not exist.");
+      },
+      complete: function() {
+        console.log("move des access call complete.");
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file02/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file02/index.hml
new file mode 100644
index 0000000..d30a434
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file02/index.hml
@@ -0,0 +1,62 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:340px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      step2:copy()
+    </text>
+    <input
+      type="button"
+      value="copy"
+      style="width:100px;height:60px;left:60px;top:100px;"
+      onclick="fileCopy"
+    />
+    <input
+      type="button"
+      value="{{srcStatus}}"
+      style="width:100px;height:60px;left:60px;top:170px;"
+      onclick="checkSrc"
+    />
+    <input
+      type="button"
+      value="{{desStatus}}"
+      style="width:100px;height:60px;left:60px;top:240px;"
+      onclick="checkDes"
+    />
+  </stack>
+
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file02/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file02/index.js
new file mode 100644
index 0000000..41d933e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file02/index.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import file from "@system.file";
+
+export default {
+  data: {
+    srcStatus: false,
+    desStatus: false
+  },
+  backMain: backPage().backMain,
+  changePrev: routePage("pages/file/file01/index").changePage,
+  changeNext: routePage("pages/file/file03/index").changePage,
+  fileCopy: function() {
+    file.copy({
+      srcUri: "internal://app/testfile2",
+      dstUri: "internal://app/testfile1",
+      success: function(uri) {
+        console.log("copy call success :" + uri);
+      },
+      fail: function(data, code) {
+        console.log("copy call fail");
+      },
+      complete: function() {
+        console.log("copy call complete");
+      }
+    })
+  },
+  checkSrc: function() {
+    var obj = this;
+    file.access({
+      uri: "internal://app/testfile2",
+      success: function(data) {
+        console.log("copy src file exist.");
+        obj.srcStatus = true;
+      },
+      fail: function(data, code) {
+        console.log("copy src file not exist.");
+      },
+      complete: function() {
+        console.log("copy src access call complete.");
+      }
+    })
+  },
+  checkDes: function() {
+    var obj = this;
+    file.access({
+      uri: "internal://app/testfile1",
+      success: function(data) {
+        console.log("copy des file exist.");
+        obj.desStatus = true;
+      },
+      fail: function(data, code) {
+        console.log("copy des file not exist.");
+      },
+      complete: function() {
+        console.log("copy des access call complete.");
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file03/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file03/index.hml
new file mode 100644
index 0000000..2b16f0c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file03/index.hml
@@ -0,0 +1,56 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:340px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      step3:delete()
+    </text>
+    <input
+      type="button"
+      value="delete"
+      style="width:120px;height:60px;left:50px;top:100px;"
+      onclick="fileDel"
+    />
+    <input
+      type="button"
+      value="{{srcStatus}}"
+      style="width:100px;height:60px;left:60px;top:170px;"
+      onclick="checkDel"
+    />
+  </stack>
+
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file03/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file03/index.js
new file mode 100644
index 0000000..03f2d61
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file03/index.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import file from "@system.file";
+
+export default {
+  data: {
+    srcStatus: false
+  },
+  backMain: backPage().backMain,
+  changePrev: routePage("pages/file/file02/index").changePage,
+  changeNext: routePage("pages/file/file04/index").changePage,
+  fileDel: function() {
+    file.delete({
+      uri: "internal://app/testfile2",
+      success: function(data) {
+        console.log("del call success");
+      },
+      fail: function(data, code) {
+        console.log("del call fail");
+      },
+      complete: function() {
+        console.log("del call complete");
+      }
+    })
+  },
+  checkDel: function() {
+    var obj = this;
+    file.access({
+      uri: "internal://app/testfile2",
+      success: function(data) {
+        console.log("del src file exist.");
+      },
+      fail: function(data, code) {
+        console.log("del src file not exist.");
+        obj.srcStatus = true;
+      },
+      complete: function() {
+        console.log("del src access call complete.");
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file04/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file04/index.hml
new file mode 100644
index 0000000..ab1e08a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file04/index.hml
@@ -0,0 +1,56 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:340px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      step4:{{status}}
+    </text>
+    <input
+      type="button"
+      value="write"
+      style="width:100px;height:60px;left:60px;top:100px;"
+      onclick="fileWrite"
+    />
+    <input
+      type="button"
+      value="read"
+      style="width:100px;height:60px;left:60px;top:170px;"
+      onclick="fileRead"
+    />
+  </stack>
+
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file04/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file04/index.js
new file mode 100644
index 0000000..2723d86
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file04/index.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import file from "@system.file";
+
+export default {
+  data: {
+    status: "write"
+  },
+  backMain: backPage().backMain,
+  changePrev: routePage("pages/file/file03/index").changePage,
+  changeNext: routePage("pages/file/file05/index").changePage,
+  fileWrite: function() {
+    file.writeText({
+      uri: "internal://app/testfile1",
+      text: "read",
+      success: function(data) {
+        console.log("write call success");
+      },
+      fail: function(data, code) {
+        console.log("write call fail");
+      },
+      complete: function() {
+        console.log("write call complete");
+      }
+    })
+  },
+  fileRead: function() {
+    var obj = this;
+    file.readText({
+      uri: "internal://app/testfile1",
+      success: function(data) {
+        console.log("read call success");
+        obj.status = data.text;
+      },
+      fail: function(data, code) {
+        console.log("read call fail");
+      },
+      complete: function() {
+        console.log("read call complete");
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file05/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file05/index.hml
new file mode 100644
index 0000000..5a3520b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file05/index.hml
@@ -0,0 +1,56 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:340px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      step5:{{status}}
+    </text>
+    <input
+      type="button"
+      value="mkdir"
+      style="width:100px;height:60px;left:60px;top:100px;"
+      onclick="fileMkdir"
+    />
+    <input
+      type="button"
+      value="rmdir"
+      style="width:100px;height:60px;left:60px;top:170px;"
+      onclick="fileRmdir"
+    />
+  </stack>
+
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file05/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file05/index.js
new file mode 100644
index 0000000..6c3eb52
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file05/index.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import file from "@system.file";
+
+export default {
+  data: {
+    status: "mkdir"
+  },
+  backMain: backPage().backMain,
+  changePrev: routePage("pages/file/file04/index").changePage,
+  changeNext: routePage("pages/file/file06/index").changePage,
+  fileMkdir: function() {
+    file.mkdir({
+      uri: "internal://app/testDirectory",
+      success: function(data) {
+        console.log("mkdir call success");
+      },
+      fail: function(data, code) {
+        console.log("mkdir call fail");
+      },
+      complete: function() {
+        console.log("mkdir call complete");
+      }
+    })
+  },
+  fileRmdir: function() {
+    var obj = this;
+    file.rmdir({
+      uri: "internal://app/testDirectory",
+      recursive: true,
+      success: function(data) {
+        console.log("rmdir call success");
+        obj.status = "rmdir";
+      },
+      fail: function(data, code) {
+        console.log("rmdir call fail");
+      },
+      complete: function() {
+        console.log("rmdir call complete");
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file06/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file06/index.hml
new file mode 100644
index 0000000..b2e094f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file06/index.hml
@@ -0,0 +1,53 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:170px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      step6:file.list()
+    </text>
+    <input
+      type="button"
+      value="list"
+      style="width:100px;height:60px;left:60px;top:100px;"
+      onclick="fileList"
+    />
+  </stack>
+  <text style="width:400px;height:170px;top:170px;left:60px">
+    {{content}}
+  </text>
+
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file06/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file06/index.js
new file mode 100644
index 0000000..62d73c7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file06/index.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import file from "@system.file";
+
+export default {
+  data: {
+    content: "content"
+  },
+  backMain: backPage().backMain,
+  changePrev: routePage("pages/file/file05/index").changePage,
+  changeNext: routePage("pages/file/file07/index").changePage,
+  fileList: function() {
+    var obj = this;
+    file.list({
+      uri: "internal://app",
+      success: function(data) {
+        console.log("list call success " + JSON.stringify(data.fileList));
+        obj.content = JSON.stringify(data.fileList);
+      },
+      fail: function(data, code) {
+        console.log("list call fail");
+      },
+      complete: function() {
+        console.log("list call complete");
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file07/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file07/index.hml
new file mode 100644
index 0000000..338d51d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file07/index.hml
@@ -0,0 +1,53 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:340px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      step7:file.get()
+    </text>
+    <input
+      type="button"
+      value="get"
+      style="width:100px;height:60px;left:60px;top:100px;"
+      onclick="fileGet"
+    />
+  </stack>
+  <text style="width:400px;height:170px;top:170px;left:60px">
+    {{content}}
+  </text>
+
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file07/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file07/index.js
new file mode 100644
index 0000000..b6b7d37
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/file/file07/index.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import file from "@system.file";
+
+export default {
+  data: {
+    content: "content"
+  },
+  backMain: backPage().backMain,
+  changePrev: routePage("pages/file/file06/index").changePage,
+  fileGet: function() {
+    var obj = this;
+    file.get({
+      uri: "internal://app/testfile1",
+      success: function(data) {
+        console.log("get call success " + JSON.stringify(data));
+        obj.content = JSON.stringify(data);
+      },
+      fail: function(data, code) {
+        console.log("get call fail");
+      },
+      complete: function() {
+        console.log("get call complete");
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/01/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/01/index.hml
new file mode 100644
index 0000000..029ca42
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/01/index.hml
@@ -0,0 +1,47 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width: 454px; height: 454px;">
+  <image-animator
+    class="image-animator"
+    images="{{frames}}"
+    duration="1s"
+    style="
+      height: 220px;
+      width: 220px;
+      left: 117px;
+      top: 77px;
+    "
+  ></image-animator>
+
+  <input
+    type="button"
+    value="上页"
+    style="width: 90px; height: 40px; left: 80px; top: 340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width: 90px; height: 40px; left: 180px; top: 340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width: 90px; height: 40px; left: 280px; top: 340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/01/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/01/index.js
new file mode 100644
index 0000000..babfec1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/01/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { pageRoute, imageFrames } from "../../../common/js/general";
+
+
+
+export default {
+  data: {
+    frames: imageFrames
+  },
+  ...pageRoute("", "pages/image-animator/02/index")
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/02/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/02/index.hml
new file mode 100644
index 0000000..682003f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/02/index.hml
@@ -0,0 +1,58 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width: 454px; height: 454px;">
+  <image-animator
+    ref="animator"
+    class="image-animator"
+    images="{{frames}}"
+    duration="1s"
+    iteration="{{iteration}}"
+    style="height: 220px; width: 220px; left: 117px; top: 24px;"
+  ></image-animator>
+  <text style="width: 200px; height: 40px; left: 50px; top: 250px;"
+    >iteration: {{iteration}}</text
+  >
+  <input
+    type="button"
+    value="+"
+    style="width: 50px; left: 250px; top: 245px;"
+    onclick="increase"
+  />
+  <input
+    type="button"
+    value="-"
+    style="width: 50px; left: 320px; top: 245px;"
+    onclick="decrease"
+  />
+  <input
+    type="button"
+    value="上页"
+    style="width: 90px; height: 40px; left: 80px; top: 340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width: 90px; height: 40px; left: 180px; top: 340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width: 90px; height: 40px; left: 280px; top: 340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/02/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/02/index.js
new file mode 100644
index 0000000..71f7226
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/02/index.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { pageRoute, imageFrames as frames } from "../../../common/js/general";
+
+
+export default {
+  data: {
+    frames,
+    iteration: 5
+  },
+  ...pageRoute("pages/image-animator/01/index", "pages/image-animator/03/index"),
+  increase() {
+    this.iteration++;
+    this.$refs.animator.start();
+  },
+  decrease() {
+    this.iteration--;
+    this.$refs.animator.start();
+  }
+
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/03/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/03/index.hml
new file mode 100644
index 0000000..e3f8f50
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/03/index.hml
@@ -0,0 +1,52 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width: 454px; height: 454px;">
+  <image-animator
+    ref="animator"
+    class="image-animator"
+    images="{{frames}}"
+    reverse="{{reverse}}"
+    duration="1s"
+    style="height: 220px; width: 220px; left: 117px; top: 24px;"
+  ></image-animator>
+  <text style="width: 200px; height: 40px; left: 100px; top: 250px;"
+    >{{reverse ? '逆序播放': '正序播放'}}</text
+  >
+  <input
+    type="button"
+    value="置反"
+    style="left: 250px; top: 245px;"
+    onclick="toggle"
+  />
+  <input
+    type="button"
+    value="上页"
+    style="width: 90px; height: 40px; left: 80px; top: 340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width: 90px; height: 40px; left: 180px; top: 340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width: 90px; height: 40px; left: 280px; top: 340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/03/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/03/index.js
new file mode 100644
index 0000000..963c4dd
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/03/index.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { pageRoute, imageFrames as frames } from "../../../common/js/general";
+
+
+export default {
+  data: {
+    frames,
+    reverse: false
+  },
+  ...pageRoute("pages/image-animator/02/index", "pages/image-animator/04/index"),
+  toggle() {
+    this.reverse = !this.reverse;
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/04/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/04/index.css
new file mode 100644
index 0000000..37ce441
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/04/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.button {
+  border-radius: 4px;
+  width: 100px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/04/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/04/index.hml
new file mode 100644
index 0000000..80c0f11
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/04/index.hml
@@ -0,0 +1,81 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width: 454px; height: 454px;">
+  <text
+    style="
+      width: 200px;
+      height: 50px;
+      text-align: center;
+      left: 127px;
+      top: 10px;
+    "
+    >{{state}}</text
+  >
+  <image-animator
+    ref="animator"
+    class="image-animator"
+    images="{{frames}}"
+    duration="1s"
+    style="height: 220px; width: 220px; left: 117px; top: 14px;"
+    onstop="logStop"
+  ></image-animator>
+  <input
+    class="button"
+    type="button"
+    value="播放"
+    onclick="handleStart"
+    style="left: 27px; top: 220px;"
+  />
+  <input
+    class="button"
+    type="button"
+    value="暂停"
+    onclick="handlePause"
+    style="left: 127px; top: 220px;"
+  />
+  <input
+    class="button"
+    type="button"
+    value="恢复"
+    onclick="handleResume"
+    style="left: 227px; top: 220px;"
+  />
+  <input
+    class="button"
+    type="button"
+    value="停止"
+    onclick="handleStop"
+    style="left: 327px; top: 220px;"
+  />
+  <input
+    type="button"
+    value="上页"
+    style="width: 90px; height: 40px; left: 80px; top: 340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width: 90px; height: 40px; left: 180px; top: 340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width: 90px; height: 40px; left: 280px; top: 340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/04/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/04/index.js
new file mode 100644
index 0000000..82aa0b8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/04/index.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { pageRoute, imageFrames as frames } from "../../../common/js/general";
+
+export default {
+  data: {
+    frames,
+    state: null,
+  },
+  ...pageRoute("pages/image-animator/03/index", "pages/image-animator/05/index"),
+  onShow() {
+    const animator = this.$refs.animator;
+    this.state = animator.getState();
+  },
+  handleStart() {
+    const animator = this.$refs.animator;
+    animator.start();
+    this.state = animator.getState();
+  },
+  handlePause() {
+    const animator = this.$refs.animator;
+    animator.pause();
+    this.state = animator.getState();
+  },
+  handleResume() {
+    const animator = this.$refs.animator;
+    animator.resume();
+    this.state = animator.getState();
+  },
+  handleStop() {
+    const animator = this.$refs.animator;
+    animator.stop();
+    this.state = animator.getState();
+  },
+  logStop() {
+    console.log("Stopped");
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/05/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/05/index.hml
new file mode 100644
index 0000000..6517e12
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/05/index.hml
@@ -0,0 +1,57 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width: 454px; height: 454px;">
+  <image-animator
+    ref="animator"
+    class="image-animator"
+    images="{{frames}}"
+    duration="{{duration}}"
+    style="height: 220px; width: 220px; left: 117px; top: 14px;"
+  ></image-animator>
+  <text style="width: 454px; height: 40px; top: 200px; text-align: center;"
+    >duration: {{duration}}</text
+  >
+  <input
+    type="button"
+    value="+"
+    style="width: 50px; left: 167px; top: 250px;"
+    onclick="increase"
+  />
+  <input
+    type="button"
+    value="-"
+    style="width: 50px; left: 237px; top: 250px;"
+    onclick="decrease"
+  />
+  <input
+    type="button"
+    value="上页"
+    style="width: 90px; height: 40px; left: 80px; top: 340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width: 90px; height: 40px; left: 180px; top: 340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width: 90px; height: 40px; left: 280px; top: 340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/05/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/05/index.js
new file mode 100644
index 0000000..d470593
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/05/index.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { pageRoute, imageFrames as frames } from "../../../common/js/general";
+
+
+export default {
+  data: {
+    frames,
+    duration: '540ms',
+  },
+  ...pageRoute("pages/image-animator/04/index", "pages/image-animator/06/index"),
+  increase() {
+    const animator = this.$refs.animator;
+    animator.stop();
+    const duration = parseInt(this.duration);
+    this.duration = `${duration + 540}ms`;
+    animator.start();
+  },
+  decrease() {
+    const animator = this.$refs.animator;
+    animator.stop();
+    const duration = parseInt(this.duration);
+    this.duration = `${duration - 540}ms`;
+    animator.start();
+  }
+
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/06/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/06/index.css
new file mode 100644
index 0000000..335313e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/06/index.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.title {
+  width: 400px;
+  height: 40px;
+  text-align: center;
+}
+.player {
+  width: 220px;
+  height: 220px;
+}
+.box {
+  width: 420px;
+  height: 110px;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.btn {
+  width: 100px;
+  height: 50px;
+  border-radius: 2px;
+  margin-top: 4px;
+  margin-right: 4px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/06/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/06/index.hml
new file mode 100644
index 0000000..6871b83
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/06/index.hml
@@ -0,0 +1,61 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container">
+  <text class="title">duration: {{duration}}ms</text>
+  <image-animator
+    class="player"
+    images="{{frames}}"
+    duration="{{duration}}"
+  />
+  <div class="box">
+    <input
+      class="btn"
+      type="button"
+      value="QUICK"
+      @click="quick"
+    />
+    <input
+      class="btn"
+      type="button"
+      value="SLOW"
+      @click="slow"
+    />
+    <input
+      class="btn"
+      type="button"
+      value="SET 0"
+      @click="set0"
+    />
+    <input
+      class="btn"
+      type="button"
+      value="SET 1"
+      @click="set1"
+    />
+    <input
+      class="btn"
+      type="button"
+      value="SET A"
+      @click="setA"
+    />
+    <input
+      class="btn"
+      type="button"
+      value="HOME"
+      @click="goHome"
+    />
+  </div>
+</div>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/06/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/06/index.js
new file mode 100644
index 0000000..8f99b18
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/image-animator/06/index.js
@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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';
+
+const frames = [
+  { src: '/common/A094_051.png' },
+  { src: '/common/A094_052.png' },
+  { src: '/common/A094_053.png' },
+  { src: '/common/A094_054.png' },
+  { src: '/common/A094_055.png' },
+  { src: '/common/A094_056.png' },
+  { src: '/common/A094_057.png' },
+  { src: '/common/A094_058.png' },
+  { src: '/common/A094_059.png' },
+  { src: '/common/A094_060.png' },
+  { src: '/common/A094_061.png' },
+  { src: '/common/A094_062.png' },
+  { src: '/common/A094_063.png' },
+  { src: '/common/A094_064.png' },
+  { src: '/common/A094_065.png' },
+  { src: '/common/A094_066.png' },
+  { src: '/common/A094_067.png' },
+];
+
+const framesSize = frames.length;
+const MILLIONS_PER_TICK = 30;
+const duration = framesSize * MILLIONS_PER_TICK;
+
+export default {
+  data: {
+    frames,
+    duration
+  },
+  quick() {
+    this.duration -= duration;
+  },
+  slow() {
+    this.duration += duration;
+  },
+  set0() {
+    this.duration = 0;
+  },
+  set1() {
+    this.duration = 1;
+  },
+  setA() {
+    this.duration = 'A';
+  },
+  goHome() {
+    router.replace({ uri: "/" });
+  }
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000..5bfa218
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.css
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+
+.listItem {
+  width: 454px;
+  height: 80px;
+}
+
+.titleContainerStyle {
+  width: 454px;
+  height: 70px;
+}
+
+.titleTextStyle {
+  width: 454px;
+  height: 50px;
+  margin-left: 140px;
+  margin-top: 0px;
+}
+
+.separatorContainerStyle {
+  width: 454px;
+  height: 4px;
+  background-color: #8b8b7a;
+}
+
+.buttonContainerStyle {
+  width: 454px;
+  height: 80px;
+}
+
+.buttonStyle {
+  width: 240px;
+  height: 60px;
+  margin-left: 110px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.hml
new file mode 100755
index 0000000..a7e03f6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,208 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<list class="container">
+  <list-item style="height: 40px; width: 454px;"> </list-item>
+  <list-item class="titleContainerStyle">
+    <text class="titleTextStyle">
+      UI手动测试
+    </text>
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="async-module"
+      onclick="changeAsync"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="base"
+      onclick="changeBase"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="camera"
+      onclick="changeCamera"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="text"
+      onclick="changeText"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="dfx"
+      onclick="changeDfx"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="event"
+      onclick="changeEvent"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="img-animator"
+      onclick="changeImageAnimator"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="input"
+      onclick="changeInput"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="list"
+      onclick="changeList"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="listitem"
+      onclick="changeListItem"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="marquee"
+      onclick="changeMarquee"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="resource"
+      onclick="changeResource"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="swiper"
+      onclick="changeSwiper"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="timer"
+      onclick="changeTimer"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="trasition"
+      onclick="changeTransition"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="slider"
+      onclick="changeSlider"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="file"
+      onclick="changeFile"
+    />
+  </list-item>
+   <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="device_info"
+      onclick="changeDeviceInfo"
+    />
+  </list-item>
+   <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="storage"
+      onclick="changeStorage"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="video"
+      onclick="changeVideo"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="opacity"
+      onclick="changeOpacity"
+    />
+  </list-item>
+  <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="qrcode"
+      onclick="changeQrcode"
+    />
+  </list-item>
+    <list-item class="listItem">
+    <input
+      type="button"
+      class="buttonStyle"
+      value="dialog"
+      onclick="changeDialog"
+    />
+  </list-item>
+  <list-item style="height: 40px; width: 454px;"> </list-item>
+</list>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.js
new file mode 100755
index 0000000..a63c777
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { routePage } from "../../common/js/general";
+
+export default {
+  changeSwiper: routePage("pages/swiper/SwiperA07/index").changePage,
+  changeMarquee: routePage("pages/marquee/marquee1/marquee1").changePage,
+  changeAsync: routePage("pages/async/async001/index").changePage,
+  changeDfx: routePage("pages/dfx/dfx1/index").changePage,
+  changeEvent: routePage("pages/event/click/index").changePage,
+  changeTimer: routePage("pages/timer/setTimeout01/index").changePage,
+  changeInput: routePage("pages/input/ButtonA30/index").changePage,
+  changeList: routePage("pages/list/list3/list3").changePage,
+  changeListItem: routePage("pages/list-item/item5/item5").changePage,
+  changeText: routePage("pages/text/text001/index").changePage,
+  changeTransition: routePage("pages/transition/01/index").changePage,
+  changeBase: routePage("pages/base/VersionCheck001/index").changePage,
+  changeSlider: routePage("pages/slider/index/index").changePage,
+  changeImageAnimator: routePage("pages/image-animator/01/index").changePage,
+  changeCamera: routePage("pages/camera/camera001/index").changePage,
+  changeFile: routePage("pages/file/file01/index").changePage,
+  changeDeviceInfo: routePage("pages/deviceInfo/index").changePage,
+  changeStorage: routePage("pages/storage/storage01/index").changePage,
+  changeVideo: routePage("pages/video/video001/index").changePage,
+  changeOpacity: routePage("pages/opacity/01/index").changePage,
+  changeQrcode: routePage("pages/qrcode/index/index").changePage,
+  changeResource: routePage("pages/resource/resource001/index").changePage,
+  changeDialog: routePage("pages/dialog/dialog001/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/ButtonA30/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/ButtonA30/index.css
new file mode 100644
index 0000000..e68826f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/ButtonA30/index.css
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  width: 454px;
+  height:600px;
+  flex-direction: column;
+}
+
+.backColorBtn{
+  width: 150px;
+  height:50px;
+  margin-left:100px;
+  margin-top: 10px;
+  background-color: aqua
+}
+
+.backColorBtn:active{
+background-color: coral
+}
+
+.backImgBtn{
+  width: 150px;
+  height:50px;
+  margin-left:100px;
+  margin-top: 10px;
+  background-image: url(common/left.png)
+}
+
+.backImgBtn:active{
+background-image: url(common/right.png)
+}
+
+.bottom {
+  width:454px;
+  height:200px;
+}
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top:10px;
+}
+
+.page {
+    width:120px;
+    height:60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/ButtonA30/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/ButtonA30/index.hml
new file mode 100644
index 0000000..b931036
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/ButtonA30/index.hml
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="width:454px;height:600px;flex-direction:column">
+    <div style = "width:450px;height:200px;flex-direction:column">
+        <text style = "width:300px;height:60px;margin-left:50px;margin-top:30px">backgroundColor</text>
+        <input type = "button" value = "点击" class = "backColorBtn"/>
+    </div>
+    <div style = "width:450px;height:200px;flex-direction:column">
+        <text style = "width:300px;height:60px;margin-left:50px;margin-top:30px">backgroundImg</text>
+        <input type = "button" value = "点击" class = "backImgBtn"/>
+    </div>
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value = "首页"/>
+        <input type = "button" class = "page" onclick = "goNext" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/ButtonA30/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/ButtonA30/index.js
new file mode 100644
index 0000000..db953d4
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/ButtonA30/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage, routePage} from "../../../common/js/general";
+
+export default {
+    goHome:routePage("/").changePage,
+    goPrevious:routePage("pages/input/CheckboxA029/index").changePage,
+    goNext:routePage("pages/input/CheckboxImage31/index").changePage
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/CheckboxImage31/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/CheckboxImage31/index.css
new file mode 100644
index 0000000..da01e72
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/CheckboxImage31/index.css
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width:454px;
+    height:454px;
+    flex-direction: column;
+}
+
+.checkbox{
+    margin-left:100px;
+    margin-top:40px;
+    width:60px;
+    height:60px;
+    background-image:url(common/left.png)
+}
+
+.checkbox:checked{
+    background-image:url(common/right.png);
+}
+
+.radio{
+    margin-left:100px;
+    margin-top:40px;
+    width:60px;
+    height:60px;
+    background-image:url(common/left.png)
+}
+
+.radio:checked{
+    background-image:url(common/right.png);
+}
+
+.bottom {
+  width:454px;
+  height:200px;
+}
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top:10px;
+}
+
+.page {
+    width:120px;
+    height:60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/CheckboxImage31/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/CheckboxImage31/index.hml
new file mode 100644
index 0000000..75e2e84
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/CheckboxImage31/index.hml
@@ -0,0 +1,23 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "checkbox" class = "checkbox" />
+    <input type = "radio" class = "radio" />
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value = "首页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/CheckboxImage31/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/CheckboxImage31/index.js
new file mode 100644
index 0000000..2aaf0d2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/input/CheckboxImage31/index.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {routePage} from "../../../common/js/general";
+
+export default{
+    goPrevious:routePage("pages/input/ButtonA30/index").changePage,
+    goHome:routePage("/").changePage
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list-item/item5/item5.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list-item/item5/item5.css
new file mode 100644
index 0000000..2b43894
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list-item/item5/item5.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:240px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list-item/item5/item5.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list-item/item5/item5.hml
new file mode 100755
index 0000000..e8e267d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list-item/item5/item5.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px">
+  <text style="left:70px;top:20px;width:170px;height:40px">list-item5</text>
+  <input type="button" style="left:240px;top:20px;width:90px;height:40px" value="首页" onclick="backMain"/>
+  <list
+      id="list1"
+      style="left:70px;top:73px;width:300px;height:240px;border-width:2px;border-color:#1e90ff;flex-direction: column"
+      onclick="listClick"
+      onscrollend="scrollEnd"
+    >
+    <list-item style="width:300px;height:120px" for="{{listData}}">
+      <image src="{{$item}}" style="width:67px;height:67px" />
+      <text style="color: #ffa500;width:180px;height:50px">
+        item--{{$idx}}
+      </text>
+    </list-item>
+  </list>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list-item/item5/item5.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list-item/item5/item5.js
new file mode 100755
index 0000000..01f9d23
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list-item/item5/item5.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+
+export default {
+  data: {
+    listData: []
+  },
+  onInit() {
+    for (var i = 0; i < 100; i++) {
+      this.listData.push("common/left.png");
+      this.listData.push("common/right.png");
+      this.listData.push("common/music_prev.png");
+      this.listData.push("common/music_next.png");
+      this.listData.push("common/music_play.png");
+      this.listData.push("common/goAhead.png");
+    }
+  },
+  backMain: backPage().backMain,
+  prePage: routePage("").changePage,
+  nextPage: routePage("").changePage,
+  scrollEnd(endState, endComponentIndex) {
+    console.log(
+      "list onscrollend is triggered, end component index=" + endComponentIndex
+    );
+  },
+  listClick() {
+    console.log("list onclick is triggered");
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list3/list3.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list3/list3.css
new file mode 100644
index 0000000..6220000
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list3/list3.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:250px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list3/list3.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list3/list3.hml
new file mode 100755
index 0000000..c995dc5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list3/list3.hml
@@ -0,0 +1,46 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:450px;height:450px;border-width:1px;border-color:#ff69b4">
+  <text style="left:114px;top:20px;width:300px;height:40px">list3</text>
+  <input type="button" style="left:227px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list style="left:113px;top:73px;width:180px;height:70px;flex-direction:column;border-width:1px;border-color:#ff69b4" onclick="go" onscrollend="scrollEnd">
+    <list-item style="width:180px;height:40px;">
+      <text style="width:180px;height:40px;">
+        mytext0
+      </text>
+    </list-item>
+    <list-item style="width:180px;height:40px;">
+      <text style="width:180px;height:40px;">
+        mytext1
+      </text>
+    </list-item>
+    <list-item style="width:180px;height:40px;">
+      <text style="width:180px;height:40px;">
+        mytext2
+      </text>
+    </list-item>
+    <list-item style="width:180px;height:40px;">
+      <text style="width:180px;height:40px;">
+        mytext3
+      </text>
+    </list-item>
+  </list>
+  <text style="left:54px;top:163px;width:400px;height:40px;">
+      单击list内部做页面跳转
+  </text>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list3/list3.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list3/list3.js
new file mode 100644
index 0000000..60704f4
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list3/list3.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  backMain:backPage().backMain,
+  prePage:routePage("").changePage,
+  nextPage:routePage("pages/list/list5/list5").changePage,
+  go:routePage("pages/list/list4/list4").changePage,
+  scrollEnd(endState, endComponentIndex) {
+    console.log("list onscrollend is triggered, end component index=" + endComponentIndex);
+  },
+  onInit() {
+    console.log("on init called...");
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list4/list4.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list4/list4.css
new file mode 100644
index 0000000..6220000
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list4/list4.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:250px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list4/list4.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list4/list4.hml
new file mode 100755
index 0000000..28c2685
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list4/list4.hml
@@ -0,0 +1,46 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:450px;height:450px;border-width:1px;border-color:#0000ff">
+  <text style="left:114px;top:20px;width:300px;height:40px;">list4</text>
+  <input type="button" style="left:227px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list style="left:113px;top:73px;width:180px;height:70px;flex-direction:column;border-width:1px;border-color:#0000ff" onclick="back"  onscrollend="scrollEnd">
+    <list-item style="width:180px;height:40px;">
+      <text style="width:180px;height:40px;">
+        mytext0
+      </text>
+    </list-item>
+    <list-item style="width:180px;height:40px;">
+      <text style="width:180px;height:40px;">
+        mytext1
+      </text>
+    </list-item>
+    <list-item style="width:180px;height:40px;">
+      <text style="width:180px;height:40px;">
+        mytext2
+      </text>
+    </list-item>
+    <list-item style="width:180px;height:40px;">
+      <text style="width:180px;height:40px;">
+        mytext3
+      </text>
+    </list-item>
+  </list>
+  <text style="left:54px;top:163px;width:400px;height:40px;">
+      单击list内部做页面跳转
+  </text>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list4/list4.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list4/list4.js
new file mode 100644
index 0000000..73040d0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list4/list4.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  backMain:backPage().backMain,
+  prePage:routePage("pages/list/list2/list2").changePage,
+  nextPage:routePage("pages/list/list5/list5").changePage,
+  back:routePage("pages/list/list3/list3").changePage,
+  scrollEnd(endState, endComponentIndex) {
+    console.log("list onscrollend is triggered, end component index=" + endComponentIndex);
+  },
+  onInit() {
+    console.log("on init called...");
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list5/list5.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list5/list5.css
new file mode 100644
index 0000000..6220000
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list5/list5.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:250px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list5/list5.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list5/list5.hml
new file mode 100755
index 0000000..8f84671
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list5/list5.hml
@@ -0,0 +1,32 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:450px;height:450px;border-width:1px;border-color:#0000ff">
+  <text style="left:114px;top:20px;width:300px;height:40px;">list5</text>
+  <input type="button" style="left:227px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list style="left:113px;top:73px;width:280px;height:70px;flex-direction:column;border-width:1px;border-color:#0000ff"
+  onclick="go"  onscrollend="scrollEnd">
+    <list-item style="width:280px;height:40px;" for="{{listData}}">
+      <text style="width:280px;height:40px;">
+        {{$idx}}--{{$item}}
+      </text>
+    </list-item>
+  </list>
+  <text style="left:54px;top:163px;width:400px;height:40px;">
+      单击list内部做页面跳转
+  </text>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list5/list5.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list5/list5.js
new file mode 100644
index 0000000..a0cd087
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list5/list5.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    listData: [
+      "Item0",
+      "Item1",
+      "Item2",
+      "Item3"
+    ]
+  },
+  prePage:routePage("pages/list/list3/list3").changePage,
+  backMain:backPage().backMain,
+  nextPage:routePage("pages/list/list7/list7").changePage,
+  go:routePage("pages/list/list6/list6").changePage,
+  scrollEnd(endState, endComponentIndex) {
+  },
+  onInit() {
+    console.log("on init called...");
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list6/list6.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list6/list6.css
new file mode 100644
index 0000000..6220000
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list6/list6.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:250px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list6/list6.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list6/list6.hml
new file mode 100755
index 0000000..cef8022
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list6/list6.hml
@@ -0,0 +1,32 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:450px;height:450px;border-width:1px;border-color:#ff69b4">
+  <text style="left:114px;top:20px;width:300px;height:40px;">list6</text>
+  <input type="button" style="left:227px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list style="left:113px;top:73px;width:280px;height:70px;flex-direction:column;border-width:1px;border-color:#ff69b4"
+  onclick="back"  onscrollend="scrollEnd">
+    <list-item style="width:280px;height:40px;" for="{{listData}}">
+      <text style="width:280px;height:40px;">
+        {{$idx}}--{{$item}}
+      </text>
+    </list-item>
+  </list>
+  <text style="left:54px;top:163px;width:400px;height:40px;">
+      单击list内部做页面跳转
+  </text>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list6/list6.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list6/list6.js
new file mode 100644
index 0000000..deedfd0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list6/list6.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+import {addData} from "../../../common/js/list"
+export default {
+  data: {
+    listData: [
+      "Item0",
+      "Item1",
+      "Item2",
+      "Item3"
+    ]
+  },
+  backMain:backPage().backMain,
+  prePage:routePage("pages/list/list3/list3").changePage,
+  nextPage:routePage("pages/list/list7/list7").changePage,
+  back:routePage("pages/list/list5/list5").changePage,
+  scrollEnd(endState, endComponentIndex) {
+  },
+  onInit() {
+    console.log("on init called...");
+  }
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list7/list7.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list7/list7.css
new file mode 100644
index 0000000..6220000
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list7/list7.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:250px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list7/list7.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list7/list7.hml
new file mode 100755
index 0000000..79e2d7f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list7/list7.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <text style="left:114px;top:20px;width:300px;height:40px;">list7</text>
+  <input type="button" style="left:227px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list
+      id="list1"
+      style="left:73px;top:73px;width:300px;height:240px;border-width:1px;border-color:#ff69b4;flex-direction: column"
+      onclick="listClick"
+      onscrollend="scrollEnd"
+    >
+    <list-item style="width:300px;height:120px;" for="{{listData}}">
+      <image src="{{$item}}" style="width:67px;height:67px;" />
+      <text style="color: #ffa500;width:180px;height:50px;">
+        item--{{$idx}}
+      </text>
+    </list-item>
+  </list>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list7/list7.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list7/list7.js
new file mode 100644
index 0000000..8468d32
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list7/list7.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import { addData } from "../../../common/js/list";
+export default {
+  data: {
+    listData: []
+  },
+  onInit: addData,
+  backMain: backPage().backMain,
+  prePage: routePage("pages/list/list5/list5").changePage,
+  nextPage: routePage("pages/list/list8/list8").changePage,
+  listClick() {
+    console.log("list onclick is triggered");
+  },
+  scrollEnd(endState, endComponentIndex) {
+    console.log(
+      "list onscrollend is triggered, end component index=" + endComponentIndex
+    );
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list8/list8.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list8/list8.css
new file mode 100644
index 0000000..6220000
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list8/list8.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.itemStyle {
+  width:250px;
+  height:120px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list8/list8.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list8/list8.hml
new file mode 100755
index 0000000..81b3d7c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list8/list8.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="left:0px;top:0px;width:454px;height:454px;">
+  <text style="left:114px;top:20px;width:300px;height:40px;">list8</text>
+  <input type="button" style="left:227px;top:20px;width:90px;height:40px;" value="首页" onclick="backMain"/>
+  <list
+      id="list1"
+      style="left:73px;top:73px;width:300px;height:240px;border-width:1px;border-color:#ff69b4;flex-direction:row"
+      onclick="listClick"
+      onscrollend="scrollEnd"
+    >
+    <list-item style="width:300px;height:120px;" for="{{listData}}">
+      <image src="{{$item}}" style="width:67px;height:67px;" />
+      <text style="color: #ffa500;width:180px;height:50px;">
+        item--{{$idx}}
+      </text>
+    </list-item>
+  </list>
+  <image src="common/preRow.png" style="left:20px;top:227px;width:30px;height:45px;" onclick="prePage"/>
+  <image src="common/nextRow.png" style="left:390px;top:227px;width:30px;height:45px;" onclick="nextPage"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list8/list8.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list8/list8.js
new file mode 100644
index 0000000..6ed4063
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/list/list8/list8.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import { addData } from "../../../common/js/list";
+export default {
+  data: {
+    listData: []
+  },
+  onInit: addData,
+  backMain: backPage().backMain,
+  prePage: routePage("pages/list/list7/list7").changePage,
+  nextPage: routePage("").changePage,
+  listClick() {
+    console.log("list onclick is triggered");
+  },
+  scrollEnd(endState, endComponentIndex) {
+    console.log(
+      "list onscrollend is triggered, end component index=" + endComponentIndex
+    );
+  }
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee1/marquee1.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee1/marquee1.css
new file mode 100644
index 0000000..b3657e3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee1/marquee1.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.textStyle {
+  color: #ff0000;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee1/marquee1.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee1/marquee1.hml
new file mode 100644
index 0000000..2c7f06e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee1/marquee1.hml
@@ -0,0 +1,48 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">marquee1</text>
+  <marquee
+    scrollamount="1"
+    style="color:#00ff00;left:50px;top:130px;width:256px;height:60px"
+    >Hello JS, we are friends.</marquee
+  >
+  <marquee
+    scrollamount="{{speed}}"
+    class="textStyle"
+    style="left:50px;top:230px;width:256px;height:60px"
+    onclick="changeSpeed()"
+    >{{text}}</marquee
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee1/marquee1.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee1/marquee1.js
new file mode 100644
index 0000000..7e7ac55
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee1/marquee1.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+export default {
+  data: {
+    text: "Hello JS, we are friends.",
+    speed: 1,
+    flag: true
+  },
+  changeSpeed() {
+    if (this.flag) {
+      this.speed = 5;
+      this.flag = false;
+    } else {
+      this.speed = 50;
+      this.flag = true;
+    }
+  },
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/marquee/marquee2/marquee2").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee2/marquee2.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee2/marquee2.css
new file mode 100644
index 0000000..b3657e3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee2/marquee2.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.textStyle {
+  color: #ff0000;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee2/marquee2.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee2/marquee2.hml
new file mode 100644
index 0000000..935d080
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee2/marquee2.hml
@@ -0,0 +1,47 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">marquee2</text>
+  <marquee
+    scrollamount="65535"
+    style="color:#00ff00;left:50px;top:130px;width:256px;height:60px"
+    >Hello JS, scrollamount is 65535.</marquee
+  >
+  <marquee
+    scrollamount="65535"
+    class="textStyle"
+    style="left:50px;top:230px;width:256px;height:60px"
+    >{{text}}</marquee
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee2/marquee2.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee2/marquee2.js
new file mode 100644
index 0000000..d66753d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee2/marquee2.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+export default {
+  data: {
+    text: "Hello JS, scrollamount is 65535."
+  },
+  changePrev:routePage("pages/marquee/marquee1/marquee1").changePage,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/marquee/marquee3/marquee3").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee3/marquee3.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee3/marquee3.css
new file mode 100644
index 0000000..b3657e3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee3/marquee3.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.textStyle {
+  color: #ff0000;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee3/marquee3.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee3/marquee3.hml
new file mode 100644
index 0000000..1ad74b3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee3/marquee3.hml
@@ -0,0 +1,47 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">marquee3</text>
+  <marquee
+    scrollamount="6"
+    style="color:#00ff00;left:50px;top:130px;width:256px;height:60px"
+    >Hello JS, scrollamount is default value 6.</marquee
+  >
+  <marquee
+    scrollamount="6"
+    class="textStyle"
+    style="left:50px;top:230px;width:256px;height:60px"
+    >{{text}}</marquee
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee3/marquee3.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee3/marquee3.js
new file mode 100644
index 0000000..eb60044
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee3/marquee3.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+export default {
+  data: {
+    text: "Hello JS, scrollamount is default value 6."
+  },
+  changePrev:routePage("pages/marquee/marquee2/marquee2").changePage,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/marquee/marquee4/marquee4").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee4/marquee4.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee4/marquee4.css
new file mode 100644
index 0000000..b3657e3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee4/marquee4.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.textStyle {
+  color: #ff0000;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee4/marquee4.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee4/marquee4.hml
new file mode 100644
index 0000000..30b3af2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee4/marquee4.hml
@@ -0,0 +1,47 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">marquee4</text>
+  <marquee
+    scrollamount="0"
+    style="color:#00ff00;left:50px;top:130px;width:256px;height:60px"
+    >Scrollamount is 0.</marquee
+  >
+  <marquee
+    scrollamount="0"
+    class="textStyle"
+    style="left:50px;top:230px;width:256px;height:60px"
+    >{{text}}</marquee
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee4/marquee4.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee4/marquee4.js
new file mode 100644
index 0000000..dfe77d7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee4/marquee4.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    text: "Scrollamount is 0."
+  },
+  changePrev:routePage("pages/marquee/marquee3/marquee3").changePage ,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/marquee/marquee5/marquee5").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee5/marquee5.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee5/marquee5.css
new file mode 100644
index 0000000..b3657e3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee5/marquee5.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.textStyle {
+  color: #ff0000;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee5/marquee5.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee5/marquee5.hml
new file mode 100644
index 0000000..ce15e84
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee5/marquee5.hml
@@ -0,0 +1,47 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">marquee5</text>
+  <marquee
+    scrollamount="65536"
+    style="color:#00ff00;left:50px;top:130px;width:256px;height:60px"
+    >Hello JS, scrollamount is 65536.</marquee
+  >
+  <marquee
+    scrollamount="65536"
+    class="textStyle"
+    style="left:50px;top:230px;width:256px;height:60px"
+    >{{text}}</marquee
+  >
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee5/marquee5.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee5/marquee5.js
new file mode 100644
index 0000000..bd89ad8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/marquee/marquee5/marquee5.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    text: "Hello JS, scrollamount is 65536."
+  },
+  changePrev:routePage("pages/marquee/marquee4/marquee4").changePage ,
+  backMain:backPage().backMain
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/01/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/01/index.css
new file mode 100755
index 0000000..17ae082
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/01/index.css
@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock1 {
+    width:100px;
+    height:100px;
+    background-color: #00ff80;
+}
+
+.divBlock2 {
+    width:100px;
+    height:100px;
+    background-color: #00ff80;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+}
+
+@keyframes opacityAnimation {
+    from {
+        width:100px;
+        opacity: 1.0;
+    }
+    to {
+        width:50px;
+        opacity: 0.1;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/01/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/01/index.hml
new file mode 100755
index 0000000..8a3b91e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/01/index.hml
@@ -0,0 +1,32 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:50px;" class="divFrame">
+        <text style="width:380px;height:50px;text-overflow:ellipsis">Animation_Opacity_StyleSet_Test_01</text>
+    </div>
+    <div style="height:120px;flex-direction:column" class="divFrame">
+        <div class="divBlock1 divAnimationStyle" style="animation-name:opacityAnimation">
+        </div>
+    </div>
+    <div style="height:120px;flex-direction:column;opacity:0.5" class="divFrame">
+        <div class="divBlock2 divAnimationStyle" style="animation-name:opacityAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/01/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/01/index.js
new file mode 100755
index 0000000..d01bf23
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/01/index.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    backMain:backPage().backMain,
+    changeNext:routePage('pages/opacity/02/index').changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/02/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/02/index.css
new file mode 100755
index 0000000..76615a9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/02/index.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff55;
+}
+
+.imageBlock {
+    width:120px;
+    height:120px;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/02/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/02/index.hml
new file mode 100755
index 0000000..eea94e3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/02/index.hml
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:50px;" class="divFrame">
+        <text style="width:380px;height:50px;text-overflow:ellipsis">Image_Opacity_StyleSet_Test_02</text>
+    </div>
+    <div style="height:80px;" class="divFrame">
+        <image src="common/icon.png" class="imageBlock"></image>
+    </div>
+    <div style="height:80px; opacity:0.5" class="divFrame">
+        <image src="common/icon.png" class="imageBlock"></image>
+    </div>
+    <div style="height:80px; opacity:0.5" class="divFrame">
+        <image src="common/icon.png" style="opacity:0.5" class="imageBlock"></image>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/02/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/02/index.js
new file mode 100755
index 0000000..d2effe5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/02/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    backMain:backPage().backMain,
+    backPage:routePage('pages/opacity/01/index').changePage,
+    changeNext:routePage('pages/opacity/03/index').changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/03/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/03/index.css
new file mode 100755
index 0000000..3866335
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/03/index.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+}
+
+.textBlock {
+    border-width: 2px;
+    color: rgba(255, 0, 0, 0.5);
+    border-color: #6f00ff00;
+}
+
+.textBackGroundColor {
+    background-color: rgba(250, 250, 250, 0.5);
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/03/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/03/index.hml
new file mode 100755
index 0000000..86399b9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/03/index.hml
@@ -0,0 +1,37 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:50px;" class="divFrame">
+        <text style="width:380px;height:50px;text-overflow:ellipsis">Opacity_StyleSet_Test_02</text>
+    </div>
+        <div style="height:80px;" class="divFrame">
+        <text class="textBlock">normal</text>
+    </div>
+    <div style="height:80px; opacity:0.5" class="divFrame">
+        <text class="textBlock">div opacity</text>
+    </div>
+    <div style="height:80px; opacity:0.5" class="divFrame">
+        <text style="opacity:0.5" class="textBlock">dir&text opacity</text>
+    </div>
+    <div style="height:80px; opacity:0.5" class="divFrame">
+        <text class="textBlock textBackGroundColor">background opacity</text>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/03/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/03/index.js
new file mode 100755
index 0000000..2e584a0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/opacity/03/index.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    backMain:backPage().backMain,
+    backPage:routePage('pages/opacity/02/index').changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/qrcode/index/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/qrcode/index/index.css
new file mode 100755
index 0000000..2067d72
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/qrcode/index/index.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 754px;
+    height: 754px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/qrcode/index/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/qrcode/index/index.hml
new file mode 100755
index 0000000..6721153
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/qrcode/index/index.hml
@@ -0,0 +1,26 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack class="container">
+    <div style="width: 700px; height: 50px; left: 20px;">
+        <input onclick="changeStyle" style="width: 150px; height: 50px;" value="修改样式"></input>
+        <input onclick="changeValue" style="width: 150px; height: 50px;" value="修改值"></input>
+        <input onclick="invalidColor" style="width: 150px; height: 50px;" value="异常颜色"></input>
+        <input onclick="invalidSize" style="width: 150px; height: 50px;" value="异常大小"></input>
+        <input type="button" style="width:80px;height:50px;" value="首页" @click="backMain"/>
+    </div>
+    <qrcode onclick="clickAction" onswipe="swipeAction" style="width: {{width}}; height: {{height}}; top:{{top}}; left:{{left}}; border-width:{{borderWidth}}; border-color: red; color: {{color}}; background-color: {{bgcolor}};" value="{{qrValue}}">
+    </qrcode>
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/qrcode/index/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/qrcode/index/index.js
new file mode 100755
index 0000000..9aa4662
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/qrcode/index/index.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+export default {
+    data: {
+        top: 50,
+        left: 10,
+        width: 100,
+        height: 200,
+        borderWidth: 5,
+        qrValue: 'helloworld',
+        bgcolor: '#00ff00',
+        color: '#0000ff'
+    },
+    clickAction:function(){
+        console.log('trigger click');
+    },
+    swipeAction:function(){
+        console.log('trigger swipe');
+    },
+    changeStyle:function(){
+        this.top = this.top + 10;
+        this.left = this.left + 10;
+        this.borderWidth = this.borderWidth + 5;
+        this.bgcolor = '#0000ff';
+        this.color = '#00ff00';
+        this.width = 200;
+        console.log('qrcode top:' + this.top);
+        console.log('qrcode left:' + this.left);
+        console.log('qrcode borderWidth:' + this.borderWidth);
+    },
+    changeValue:function(){
+        this.qrValue = this.qrValue + 'qrcode';
+        console.log('qrcode top:' + this.value);
+    },
+    invalidColor:function(){
+        console.log('invalidColor');
+        this.bgcolor = 'invalid bgcolor';
+        this.color = 'invalid color';
+    },
+    invalidSize:function(){
+        console.log('invalidSize');
+        this.width = 14;
+        this.height = 14;
+    },
+    backMain:backPage().backMain
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource001/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource001/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource001/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource001/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource001/index.hml
new file mode 100644
index 0000000..ad747ed
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource001/index.hml
@@ -0,0 +1,38 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">resource001</text>
+  <image src="./test.png" style="left:100px;top:80px;width:116px;height:116px" />
+  <image src="{{imgSrc}}" style="left:100px;top:200px;width:116px;height:116px" />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource001/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource001/index.js
new file mode 100644
index 0000000..4694fbd
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource001/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default{
+  data: {
+    imgSrc: "./test.png"
+  },
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/resource/resource002/index").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource002/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource002/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource002/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource002/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource002/index.hml
new file mode 100644
index 0000000..8999c4c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource002/index.hml
@@ -0,0 +1,38 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">resource002</text>
+  <image src="./abc/test.png" style="left:100px;top:80px;width:116px;height:116px" />
+  <image src="{{imgSrc}}" style="left:100px;top:200px;width:116px;height:116px" />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource002/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource002/index.js
new file mode 100644
index 0000000..247199f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource002/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    imgSrc: "./abc/def/test.png"
+  },
+  changePrev:routePage("pages/resource/resource001/index").changePage,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/resource/resource003/index").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource003/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource003/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource003/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource003/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource003/index.hml
new file mode 100644
index 0000000..613b1d2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource003/index.hml
@@ -0,0 +1,38 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">resource003</text>
+  <image src="./te#&st.png" style="left:100px;top:80px;width:116px;height:116px" />
+  <image src="{{imgSrc}}" style="left:100px;top:200px;width:116px;height:116px" />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource003/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource003/index.js
new file mode 100644
index 0000000..cadcaa0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource003/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    imgSrc: "./te#&st.png"
+  },
+  changePrev:routePage("pages/resource/resource002/index").changePage,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/resource/resource004/index").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource004/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource004/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource004/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource004/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource004/index.hml
new file mode 100644
index 0000000..b080bb5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource004/index.hml
@@ -0,0 +1,38 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">resource004</text>
+  <image src="./testError.png" style="left:100px;top:80px;width:116px;height:116px" />
+  <image src="{{imgSrc}}" style="left:100px;top:200px;width:116px;height:116px" />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource004/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource004/index.js
new file mode 100644
index 0000000..011fcb3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource004/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    imgSrc: "./abc/testError.png"
+  },
+  changePrev:routePage("pages/resource/resource003/index").changePage,
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/resource/resource006/index").changePage
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource006/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource006/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource006/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource006/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource006/index.hml
new file mode 100644
index 0000000..739836f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource006/index.hml
@@ -0,0 +1,41 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width:454px;height:454px">
+  <text style="left:170px;top:30px;width:300px;height:40px">resource006</text>
+  <image
+    src="/common/go#&Ahead/test.png"
+    style="left:100px;top:80px;width:116px;height:116px"
+  />
+  <image src="{{imgSrc}}" style="left:100px;top:200px;width:116px;height:116px" />
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource006/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource006/index.js
new file mode 100644
index 0000000..6f1bb77
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/resource/resource006/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    imgSrc: "common/go#&Ahead/test.png"
+  },
+  changePrev:routePage( "pages/resource/resource004/index").changePage,
+  backMain:backPage().backMain
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/index/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/index/index.css
new file mode 100644
index 0000000..275ce72
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/index/index.css
@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+  background-color:yellow;
+}
+
+.showBox {
+  width: 200px;
+  top: 0px;
+  left: 0px;
+  height: 150px;
+
+  border-width: 2px;
+  border-radius: 1px;
+  background-color: aliceblue;
+  border-width: 2px;
+
+}
+
+.outlineBox {
+  width: 454px;
+  top: 170px;
+  left: 0px;
+  height: 280px;
+
+  border-width: 2px;
+  border-radius:1px;
+  background-color: aliceblue;
+
+  flex-wrap: wrap;
+  justify-content:center;
+}
+
+
+.outlineBtn {
+  width:135px;
+  height: 30px;
+  font-size: 30px;
+  border-color: blueviolet
+}
+
+.BordWidthTwo {
+  border-width: 5px;
+}
+
+.BordWidthThree {
+  border-width: 8px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/index/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/index/index.hml
new file mode 100644
index 0000000..7002752
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/index/index.hml
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack class="container">
+  <slider class="showBox" min="0" max="100" value="50"
+          style="top:{{top}};
+              left:{{left}};
+              width:{{width}};
+              height:{{height}};
+              padding-left:{{padding}};
+              background-color:{{bkgcor}};
+              border-radius:{{bordradius}};
+              color:{{color}};
+              selected-color:{{selectedColor}};
+              block-color:{{blockColor}};"
+      class="BordWidthOne">
+  </slider>
+<div id="outline" class="outlineBox">
+  <input type="button" class="outlineBtn" value="top+5" @click="onClickBtnTopAdd"/>
+  <input type="button" class="outlineBtn" value="top-5" @click="onClickBtnTopSub"/>
+  <input type="button" class="outlineBtn" value="left+5" @click="onClickBtnLeftAdd"/>
+  <input type="button" class="outlineBtn" value="left-5" @click="onClickBtnLeftSub"/>
+  <input type="button" class="outlineBtn" value="wid+20" @click="onClickBtnWidthAdd"/>
+  <input type="button" class="outlineBtn" value="wid-20" @click="onClickBtnWidthSub"/>
+  <input type="button" class="outlineBtn" value="heit+20" @click="onClickBtnHeightAdd"/>
+  <input type="button" class="outlineBtn" value="heit-20" @click="onClickBtnHeightSub"/>
+  <input type="button" class="outlineBtn" value="pad+10" @click="onClickBtnPaddingAdd"/>
+  <input type="button" class="outlineBtn" value="pad-10" @click="onClickBtnPaddingSub"/>
+  <input type="button" class="outlineBtn" value="bdrd+1" @click="onClickBtnBoardRadiusAdd"/>
+  <input type="button" class="outlineBtn" value="bdrd-1" @click="onClickBtnBoardRadiusSub"/>
+  <input type="button" class="outlineBtn" value="bdwd" @click="onClickBtnBoardWidthAdd"/>
+  <input type="button" class="outlineBtn" value="bkgcor" @click="onClickBtnBKGColor"/>
+  <input type="button" class="outlineBtn" value="color" @click="onClickBtnColor"/>
+  <input type="button" class="outlineBtn" value="selColor" @click="onClickBtnSelectedColor"/>
+  <input type="button" class="outlineBtn" value="bColor" @click="onClickBtnBlockColor"/>
+   <input type="button" class="outlineBtn" value="next" @click="onClickBtnNextPage"/>
+</div>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/index/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/index/index.js
new file mode 100644
index 0000000..085b724
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/index/index.js
@@ -0,0 +1,139 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    top: 20,
+    left:150,
+    width:100,
+    height:100,
+    padding:2,
+    bordradius:2,
+    bordWidth:2,
+    bkgcor:0xD4F2E7,
+    bordColor:0x8A2BE2,
+    color:0xff0000,
+    colorIndex:0,
+    blockColor:0x00ff00,
+    blockColorIndex:0,
+    selectedColor:0x0000ff,
+    selectedColorIndex:0,
+    // bordWidth:'BordWidthOne',
+    // special 初始值
+    min:0,
+    max:100,
+    value:50,
+    bkgcorlorIndex: 0,
+    bordColorIndex: 0,
+    bordWidthIndex:0,
+    colors:[0xFAEBD7,0xFFFF00,0xD4F2E7,0x8A2BE2,0x00FFFF,
+    0x0000FF,0x00ff00,0xA52A2A,0xFF0000],
+
+    bordWidths:[3,5,10,1,7,12,15],
+  },
+
+  onClickBtnTopAdd(){
+      this.top += 5;
+      console.log("top:" + this.top);
+  },
+  onClickBtnTopSub(){
+      this.top -= 5;
+      console.log("top:" + this.top);
+  },
+  onClickBtnLeftAdd(){
+      this.left += 5;
+      console.log("left:" + this.left);
+  },
+  onClickBtnLeftSub(){
+      this.left -= 5;
+      console.log("left:" + this.left);
+  },
+  onClickBtnWidthAdd(){
+      this.width +=20;
+      console.log("width:" + this.width);
+  },
+  onClickBtnWidthSub(){
+      this.width -=20;
+      console.log("width:" + this.width);
+  },
+  onClickBtnHeightAdd(){
+      this.height +=20;
+      console.log("height:" + this.height);
+  },
+  onClickBtnHeightSub(){
+      this.height -=20;
+      console.log("height:" + this.height);
+  },
+  onClickBtnPaddingAdd(){
+      this.padding +=10;
+      console.log('pad:'+ this.padding);
+  },
+  onClickBtnPaddingSub(){
+      this.padding -=10;
+      console.log('pad:'+ this.padding);
+  },
+  onClickBtnBoardRadiusAdd(){
+      this.bordradius += 1;
+      console.log("bordradius:" + this.bordradius);
+  },
+  onClickBtnBoardRadiusSub(){
+      this.bordradius -= 1;
+      console.log("bordradius:" + this.bordradius);
+  },
+  onClickBtnBoardWidthAdd(){
+      if(this.bordWidthIndex >= this.bordWidths.length){
+       this.bordWidthIndex = 0;
+     }
+      this.bordWidth = this.bordWidths[this.bordWidthIndex];
+      this.bordWidthIndex += 1;
+      console.log("bordWidth:" + this.bordWidth);
+  },
+  onClickBtnBKGColor(){
+     if(this.bkgcorlorIndex >= this.colors.length){
+       this.bkgcorlorIndex = 0;
+     }
+     this.bkgcor = this.colors[this.bkgcorlorIndex];
+     console.log('index:'+this.bkgcorlorIndex + '    ' +'bkgcolor:'+ this.bkgcor);
+     this.bkgcorlorIndex += 1;
+  },
+   onClickBtnColor(){
+     if(this.colorIndex >= this.colors.length){
+       this.colorIndex = 0;
+     }
+     this.color = this.colors[this.colorIndex];
+     console.log('index:'+this.colorIndex + '    ' +'color:'+ this.color);
+     this.colorIndex += 1;
+  },
+  onClickBtnSelectedColor(){
+     if(this.selectedColorIndex >= this.colors.length){
+       this.selectedColorIndex = 0;
+     }
+     this.selectedColor = this.colors[this.selectedColorIndex];
+     console.log('selectedColorIndex:'+this.selectedColorIndex + '    ' +'selectedColor:'+ this.selectedColor);
+     this.selectedColorIndex += 1;
+  },
+  onClickBtnBlockColor(){
+     if(this.blockColorIndex >= this.colors.length){
+       this.blockColorIndex = 0;
+     }
+     this.blockColor = this.colors[this.blockColorIndex];
+     console.log('blockColorIndex:'+this.blockColorIndex + '    ' +'blockColor:'+ this.blockColor);
+     this.blockColorIndex += 1;
+  },
+   onClickBtnNextPage:routePage('pages/slider/second/second').changePage
+
+}
+/*  */
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/second/second.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/second/second.css
new file mode 100644
index 0000000..1496a84
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/second/second.css
@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+  background-color:yellow;
+}
+
+.showBox {
+  width: 200px;
+  top: 0px;
+  left: 0px;
+  height: 150px;
+
+  border-width: 2px;
+  border-radius: 1px;
+  background-color: aliceblue;
+  border-width: 2px;
+
+}
+
+.outlineBox {
+  width: 454px;
+  top: 170px;
+  left: 0px;
+  height: 280px;
+
+  border-width: 2px;
+  border-radius:1px;
+  background-color: aliceblue;
+
+  flex-wrap: wrap;
+  justify-content:center;
+}
+
+
+.outlineBtn {
+  width:135px;
+  height: 36px;
+  font-size: 30px;
+  border-color: blueviolet
+}
+
+.BordWidthTwo {
+  border-width: 5px;
+}
+
+.BordWidthThree {
+  border-width: 8px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/second/second.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/second/second.hml
new file mode 100644
index 0000000..427e98a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/second/second.hml
@@ -0,0 +1,39 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container">
+  <slider class="showBox" min="0" max="100" value="50"
+          style="
+              margin:{{margin}};
+              margin-left:{{marginLeft}};
+              margin-right:{{marginRight}};
+              margin-top:{{marginTop}};
+              margin-bottom:{{marginBottom}};"
+      class="BordWidthOne">
+  </slider>
+<div id="outline" class="outlineBox">
+  <input type="button" class="outlineBtn" value="mar+5" @click="onClickBtnmargin('+')"/>
+  <input type="button" class="outlineBtn" value="mar-5" @click="onClickBtnmargin('-')"/>
+  <input type="button" class="outlineBtn" value="mart+5" @click="onClickBtnmarginTop('+')"/>
+  <input type="button" class="outlineBtn" value="mart-5" @click="onClickBtnmarginTop('-')"/>
+  <input type="button" class="outlineBtn" value="marl+5" @click="onClickBtnmarginLeft('+')"/>
+  <input type="button" class="outlineBtn" value="marl-5" @click="onClickBtnmarginLeft('-')"/>
+  <input type="button" class="outlineBtn" value="marr+5" @click="onClickBtnmarginRight('+')"/>
+  <input type="button" class="outlineBtn" value="marr-5" @click="onClickBtnmarginRight('-')"/>
+  <input type="button" class="outlineBtn" value="marb+5" @click="onClickBtnmarginBottom('+')"/>
+  <input type="button" class="outlineBtn" value="marb-5" @click="onClickBtnmarginBottom('-')"/>
+  <input type="button" class="outlineBtn" value="下一页" @click="onClickBtnNextPage"/>
+</div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/second/second.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/second/second.js
new file mode 100644
index 0000000..a8a848f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/second/second.js
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    margin:0,
+    marginLeft:0,
+    marginRight:0,
+    marginTop:0,
+    marginBottom:0
+  },
+
+  onClickBtnmargin(operator){
+      if(operator == "+"){
+       this.margin += 5;
+     }else if(operator == "-"){
+       this.margin -= 5;
+     }
+      console.log("marginLeft:" + this.marginLeft);
+      console.log("margin:" + this.margin);
+  },
+  onClickBtnmarginLeft(operator){
+     if(operator == "+"){
+       this.marginLeft += 5;
+     }else if(operator == "-"){
+       this.marginLeft -= 5;
+     }
+      console.log("marginLeft:" + this.marginLeft);
+  },
+  onClickBtnmarginRight(operator){
+      if(operator == "+"){
+        this.marginRight += 5;
+      }else if(operator == "-"){
+        this.marginRight -= 5;
+      }
+      console.log("marginRight:" + this.marginRight);
+  },
+  onClickBtnmarginTop(operator){
+      if(operator == "+"){
+        this.marginTop += 5;
+      }else if(operator == "-"){
+        this.marginTop -= 5;
+      }
+      console.log("marginTop:" + this.marginTop);
+  },
+  onClickBtnmarginBottom(operator){
+    if(operator == "+"){
+        this.marginBottom += 5;
+      }else if(operator == "-"){
+        this.marginBottom -= 5;
+      }
+      console.log("marginBottom:" + this.marginBottom);
+  },
+  onClickBtnNextPage:routePage('pages/slider/third/index').changePage
+
+}
+/*  */
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/third/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/third/index.css
new file mode 100644
index 0000000..c3a959d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/third/index.css
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.sliderStyle {
+    left: 100px;
+    top: 100px;
+    color: #b22222;
+    height: 30px;
+    width: 250px;
+    selected-color: #00ff00;
+    border-radius: 10px;
+}
+
+.verticalSliderStyle {
+    left: 200px;
+    top: 200px;
+    color: #b22222;
+    height: 250px;
+    width: 30px;
+    selected-color: #00ff00;
+    direction: column;
+    border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/third/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/third/index.hml
new file mode 100755
index 0000000..af1a3cf
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/third/index.hml
@@ -0,0 +1,43 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack style="width: 454px;height: 454px;margin: 20px;opacity: 0.5;">
+    <text style="left:150px;top:20px;width:150px;height:40px">slider</text>
+    <slider
+        class="sliderStyle"
+        min="100"
+        max="200"
+        value="{{dynamicValue}}"
+        onclick="clickSlider"
+        onchange="valueChange"
+    />
+    <text style="left:150px;top:60px;width:256px;height:50px">{{sliderValue}}</text>
+    <slider
+        class="verticalSliderStyle"
+        min="100"
+        max="200"
+        value="200"
+        onclick="clickVerticalSlider"
+        onchange="verticalValueChange"
+    />
+    <text style="left:150px;top:150px;width:256px;height:50px"
+        >{{verticalSliderValue}}</text
+    >
+    <image
+        src="common/nextRow.png"
+        style="left:400px;top:227px;width:30px;height:42px"
+        onclick="nextPage"
+    />
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/third/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/third/index.js
new file mode 100644
index 0000000..5b2a71b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/slider/third/index.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage, lifeCycleFunc} from "../../../common/js/general";
+
+export default {
+  data: {
+    sliderValue: 150,
+    verticalSliderValue: 200,
+    dynamicValue: 150
+  },
+  nextPage: routePage("pages/index/index").changePage,
+  clickSlider() {
+    console.log("onClick called...");
+    this.sliderValue = "slider clicked";
+  },
+
+  clickVerticalSlider() {
+    console.log("onClick called...");
+    this.verticalSliderValue = "v slider clicked";
+  },
+
+  valueChange(value) {
+    this.sliderValue = value.progress;
+  },
+
+  verticalValueChange(value) {
+    this.verticalSliderValue = value.progress;
+    this.dynamicValue = value.progress;
+  },
+  ...lifeCycleFunc()
+};
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage01/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage01/index.hml
new file mode 100755
index 0000000..3136e14
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage01/index.hml
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:340px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      storage:{{status}}
+    </text>
+    <input
+      type="button"
+      value="set"
+      style="width:100px;height:60px;left:60px;top:100px;"
+      onclick="storageSet"
+    />
+    <input
+      type="button"
+      value="get"
+      style="width:100px;height:60px;left:60px;top:170px;"
+      onclick="storageGet"
+    />
+  </stack>
+
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage01/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage01/index.js
new file mode 100755
index 0000000..d7744bf
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage01/index.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import storage from "@system.storage";
+
+export default {
+  data: {
+    status: "click set"
+  },
+  backMain: backPage().backMain,
+  changeNext: routePage("pages/storage/storage02/index").changePage,
+  storageSet: function() {
+    this.status = "click get"
+    storage.set({
+      key: "Storage1",
+      value: "Info1",
+      success: function() {
+        console.log("storageSet call success, key = Storage1, value = Info1");
+      },
+      fail: function(data, code) {
+        console.log("storageSet call fail, key = Storage1, value = Info1");
+      },
+      complete: function() {
+        console.log("storageSet call complete")
+      }
+    })
+  },
+  storageGet: function() {
+    var obj = this;
+    storage.get({
+      key: "Storage1",
+      success: function(data) {
+        console.log("storageGet call success, key = Storage1, expected value = Info1");
+        obj.status = JSON.stringify(data);
+      },
+      fail: function(data, code) {
+        console.log("storageGet call fail, key = Storage1");
+      },
+      complete: function() {
+        console.log("storageGet call complete")
+      }
+    })
+  }
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage02/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage02/index.hml
new file mode 100755
index 0000000..3cdb84d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage02/index.hml
@@ -0,0 +1,56 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:340px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      storage:{{status}}
+    </text>
+    <input
+      type="button"
+      value="delete"
+      style="width:100px;height:60px;left:60px;top:100px;"
+      onclick="storageDelete"
+    />
+    <input
+      type="button"
+      value="get"
+      style="width:100px;height:60px;left:60px;top:170px;"
+      onclick="storageGet"
+    />
+  </stack>
+
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+  <input
+    type="button"
+    value="下页"
+    style="width:90px;height:40px;left:280px;top:340px;"
+    onclick="changeNext"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage02/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage02/index.js
new file mode 100755
index 0000000..46ceefa
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage02/index.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import storage from "@system.storage";
+
+export default {
+  data: {
+    status: "click delete"
+  },
+  backMain: backPage().backMain,
+  changePrev: routePage("pages/storage/storage01/index").changePage,
+  changeNext: routePage("pages/storage/storage03/index").changePage,
+  storageDelete: function() {
+    this.status = "click get";
+    storage.delete({
+      key: "Storage1",
+      success: function(data) {
+        console.log("storageDelete call success, key = Storage1");
+      },
+      fail: function(data, code) {
+        console.log("storageDelete call fail, key = Storage1");
+      },
+      complete: function() {
+        console.log("storageDelete call complete")
+      }
+    })
+  },
+  storageGet: function() {
+    var obj = this;
+    storage.get({
+      key: "Storage1",
+      success: function(data) {
+        console.log("storageGet call success, key = Storage1, expected value = \"\"");
+        obj.status = JSON.stringify(data);
+      },
+      fail: function(data, code) {
+        console.log("storageGet call fail, key = Storage1");
+      },
+      complete: function() {
+        console.log("storageGet call complete")
+      }
+    })
+  }
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage03/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage03/index.hml
new file mode 100755
index 0000000..f1c495d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage03/index.hml
@@ -0,0 +1,68 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack
+  id="div"
+  style="width:454px;height:454px;"
+>
+  <stack style="width:250px;height:340px;left:120px">
+    <text style="width:250px;height:60px;top:40px;">
+      storage:{{status}}
+    </text>
+    <input
+      type="button"
+      value="set info1"
+      style="width:100px;height:60px;left:10px;top:100px;"
+      onclick="storageSet1"
+    />
+    <input
+      type="button"
+      value="set info2"
+      style="width:100px;height:60px;left:120px;top:100px;"
+      onclick="storageSet2"
+    />
+    <input
+      type="button"
+      value="clear"
+      style="width:100px;height:60px;left:75px;top:170px;"
+      onclick="storageClear"
+    />
+    <input
+      type="button"
+      value="get info1"
+      style="width:100px;height:60px;left:10px;top:240px;"
+      onclick="storageGet1"
+    />
+    <input
+      type="button"
+      value="get info2"
+      style="width:100px;height:60px;left:120px;top:240px;"
+      onclick="storageGet2"
+    />
+  </stack>
+
+  <input
+    type="button"
+    value="上页"
+    style="width:90px;height:40px;left:80px;top:340px;"
+    onclick="changePrev"
+  />
+  <input
+    type="button"
+    value="首页"
+    style="width:90px;height:40px;left:180px;top:340px;"
+    onclick="backMain"
+  />
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage03/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage03/index.js
new file mode 100755
index 0000000..196a06b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/storage/storage03/index.js
@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 { backPage, routePage } from "../../../common/js/general";
+import storage from "@system.storage";
+
+export default {
+  data: {
+    status: "click set info1"
+  },
+  backMain: backPage().backMain,
+  changePrev: routePage("pages/storage/storage02/index").changePage,
+  storageSet1: function() {
+    this.status = "click set info2";
+    storage.set({
+      key: "Storage2",
+      value: "Info2",
+      success: function() {
+        console.log("storageSet call success, key = Storage2, value = Info2");
+      },
+      fail: function(data, code) {
+        console.log("storageSet call fail, key = Storage2, value = Info2");
+      },
+      complete: function() {
+        console.log("storageSet call complete")
+      }
+    })
+  },
+  storageSet2: function() {
+    this.status = "click clear";
+    storage.set({
+      key: "Storage3",
+      value: "Info3",
+      success: function() {
+        console.log("storageSet call success, key = Storage3, value = Info3");
+      },
+      fail: function(data, code) {
+        console.log("storageSet call fail, key = Storage3, value = Info3");
+      },
+      complete: function() {
+        console.log("storageSet call complete")
+      }
+    })
+  },
+  storageClear: function() {
+    this.status = "click getInfo1 and getInfo2";
+    storage.clear({
+      success: function(data) {
+        console.log("storageClear call success");
+      },
+      fail: function(data, code) {
+        console.log("storageClear call fail");
+      },
+      complete: function() {
+        console.log("storageClear call complete")
+      }
+    })
+  },
+  storageGet1: function() {
+    var object = this;
+    storage.get({
+      key: "Storage2",
+      success: function(data) {
+        console.log("storageGet call success, key = Storage2");
+        object.status = JSON.stringify(data);
+      },
+      fail: function(data, code) {
+        console.log("storageGet call fail, key = Storage2");
+      },
+      complete: function() {
+        console.log("storageGet call complete")
+      }
+    })
+  },
+  storageGet2: function() {
+    var object = this;
+    storage.get({
+      key: "Storage3",
+      success: function(data) {
+        console.log("storageGet call success, key = Storage3");
+        object.status = JSON.stringify(data);
+      },
+      fail: function(data, code) {
+        console.log("storageGet call fail, key = Storage3");
+      },
+      complete: function() {
+        console.log("storageGet call complete")
+      }
+    })
+  }
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA07/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA07/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA07/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA07/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA07/index.hml
new file mode 100644
index 0000000..4833169
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA07/index.hml
@@ -0,0 +1,51 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        duration="1000"
+        style="width:250px;height:250px;left:75px;top:75px;"
+        vertical="false"
+        onchange="showPage"
+    >
+        <stack style="width:250px;height:250px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr007
+            </text>
+        </stack>
+        <stack style="width:250px;height:250px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+        <stack style="width:250px;height:250px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA07/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA07/index.js
new file mode 100644
index 0000000..f9190ad
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA07/index.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+import {showPage} from "../../../common/js/swiper";
+
+export default {
+    data: {
+        index: 0
+    },
+    showPage: showPage,
+    backMain:backPage().backMain,
+    changeNext:routePage("pages/swiper/SwiperA08/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA08/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA08/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA08/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA08/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA08/index.hml
new file mode 100644
index 0000000..4c347db
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA08/index.hml
@@ -0,0 +1,51 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        duration=0
+        style="width:300px;height:300px;left:75px;top:75px;"
+        vertical="false"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr008
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA08/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA08/index.js
new file mode 100644
index 0000000..0663234
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA08/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+import {showPage} from "../../../common/js/swiper";
+
+export default {
+    data: {
+        index: 0
+    },
+    showPage: showPage,
+    backMain:backPage().backMain,
+    changePrev:routePage("pages/swiper/SwiperA07/index").changePage,
+    changeNext:routePage("pages/swiper/SwiperA09/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA09/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA09/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA09/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA09/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA09/index.hml
new file mode 100644
index 0000000..1acfbf3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA09/index.hml
@@ -0,0 +1,51 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        duration="-32769"
+        style="width:300px;height:300px;left:75px;top:75px;"
+        vertical="false"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr009
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA09/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA09/index.js
new file mode 100644
index 0000000..9b029c0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA09/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+import {showPage} from "../../../common/js/swiper";
+
+export default {
+    data: {
+        index: 0
+    },
+    showPage: showPage,
+    backMain:backPage().backMain,
+    changePrev:routePage("pages/swiper/SwiperA08/index").changePage,
+    changeNext:routePage("pages/swiper/SwiperA10/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA10/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA10/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA10/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA10/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA10/index.hml
new file mode 100644
index 0000000..237334a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA10/index.hml
@@ -0,0 +1,52 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        index="{{index}}"
+        duration="32768"
+        style="width:300px;height:300px;left:75px;top:75px;"
+        vertical="false"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr010
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA10/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA10/index.js
new file mode 100644
index 0000000..c7cd450
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA10/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+import {showPage} from "../../../common/js/swiper";
+
+export default {
+    data: {
+        index: 0
+    },
+    showPage: showPage,
+    backMain:backPage().backMain,
+    changePrev:routePage("pages/swiper/SwiperA09/index").changePage,
+    changeNext:routePage("pages/swiper/SwiperA11/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA11/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA11/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA11/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA11/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA11/index.hml
new file mode 100644
index 0000000..c6a142a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA11/index.hml
@@ -0,0 +1,51 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        duration="-1000"
+        style="width:300px;height:300px;left:75px;top:75px;"
+        vertical="false"
+        onchange="showPage"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr011
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA11/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA11/index.js
new file mode 100644
index 0000000..15c7864
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA11/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+import {showPage} from "../../../common/js/swiper";
+
+export default {
+    data: {
+        index: 0
+    },
+    showPage: showPage,
+    backMain:backPage().backMain,
+    changePrev:routePage("pages/swiper/SwiperA10/index").changePage,
+    changeNext:routePage("pages/swiper/SwiperA12/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA12/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA12/index.css
new file mode 100644
index 0000000..2e73d04
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA12/index.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA12/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA12/index.hml
new file mode 100644
index 0000000..948ea1a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA12/index.hml
@@ -0,0 +1,52 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack id="div" style="width:454px;height:454px;">
+    <swiper
+        duration="{{duration}}"
+        style="width:300px;height:300px;left:75px;top:75px;"
+        vertical="false"
+        onchange="showPage"
+        onclick="updateDuration"
+    >
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+            <text style="width:220px;height:60px;top:80px;">
+              attr012
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+        <stack style="left:0px;top:0px;width:300px;height:300px;">
+            <text
+                style="width:220px;height:60px;"
+            >
+                第{{index}}页，共2页
+            </text>
+        </stack>
+    </swiper>
+    <input type="button" value="上页" style="width:90px;height:40px;left:80px;top:340px;" onclick="changePrev"/>
+    <input type="button" value="首页" style="width:90px;height:40px;left:180px;top:340px;" onclick="backMain"/>
+    <input type="button" value="下页" style="width:90px;height:40px;left:280px;top:340px;" onclick="changeNext"/>
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA12/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA12/index.js
new file mode 100644
index 0000000..eeb42cb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/swiper/SwiperA12/index.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+import {showPage} from "../../../common/js/swiper";
+
+export default {
+    data: {
+        index: 0,
+        duration: 1000
+    },
+    showPage: showPage,
+    updateDuration() {
+        this.duration = 500;
+    },
+    backMain:backPage().backMain,
+    changePrev:routePage("pages/swiper/SwiperA11/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text001/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text001/index.css
new file mode 100644
index 0000000..afb7e90
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text001/index.css
@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+  background-color:yellow;
+}
+.title {
+  font-size: 30px;
+  text-align: center;
+  width: 454px;
+  height: 50px;
+  top:0px;
+  border-width: 2px;
+  border-color: greenyellow;
+  color: red;
+}
+
+
+.showBox {
+  width: 454px;
+  top: 40px;
+  left: 0px;
+  height: 170px;
+
+  border-width: 2px;
+  border-radius: 1px;
+  background-color: aliceblue;
+
+}
+
+.showBoxDiv {
+  width: 454px;
+  top: 40px;
+  left: 0px;
+  height: 170px;
+  justify-content: center;
+  align-items: center;
+  border-width: 2px;
+  border-radius: 1px;
+  background-color: aliceblue;
+
+  flex-wrap: wrap;
+}
+
+.outlineBox {
+  width: 454px;
+  top: 215px;
+  left: 0px;
+  height: 240px;
+
+  border-width: 2px;
+  border-radius:1px;
+  background-color: aliceblue;
+
+  flex-wrap: wrap;
+  justify-content:center;
+}
+
+.specialBtn {
+  width:200px;
+  height: 36px;
+  font-size: 30px;
+  border-width: 1px;
+  border-color: blueviolet
+
+}
+.outlineBtn {
+  width:135px;
+  height: 36px;
+  font-size: 30px;
+  border-width: 1px;
+  border-color: blueviolet
+}
+
+.BordWidthOne {
+  border-width: 2px;
+}
+
+.BordWidthTwo {
+  border-width: 5px;
+}
+
+.BordWidthThree {
+  border-width: 8px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text001/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text001/index.hml
new file mode 100644
index 0000000..55401ad
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text001/index.hml
@@ -0,0 +1,57 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack class="container">
+  <text class="title">
+     text
+  </text>
+<div id="show" class="showBoxDiv">
+      <text  style="top:20px;
+                  left:100px;
+                  width:200px;
+                  height:60px;
+                  padding-left:2px;
+                  border-left-width:2px;
+                  border-left-color:0x8a2be2;
+                  display:flex;
+                  margin-left:2px;
+                  margin-left:2px;
+                  margin-right:2px;
+                  margin-top:2px;
+                  margin-bottom:2px;
+
+                  color:{{color}};
+                  font-size:{{fontsize}};
+                  letter-spacing:{{letterspacing}};
+                  text-align:{{textalign}};
+                  text-overflow:{{textoverflow}};
+                  font-family:{{fontfamily}};
+                 "
+      >
+      this is text
+      </text>
+</div>
+<div id="outline" class="outlineBox">
+  <input type="button" class="specialBtn" value="color" @click="onClickBtncolor"/>
+  <input type="button" class="specialBtn" value="fSize" @click="onClickBtnFontsize"/>
+  <input type="button" class="specialBtn" value="lSpac+1" @click="onClickBtnLetterspacingAdd"/>
+  <input type="button" class="specialBtn" value="lSpac-1" @click="onClickBtnLetterspacingSub"/>
+  <input type="button" class="specialBtn" value="tAlign" @click="onClickBtnTextalign"/>
+  <input type="button" class="specialBtn" value="overFlow" @click="onClickBtnTextoverflow"/>
+  <input type="button" value="首页" @click="backMain"/>
+  <input type="button" value="下页" @click="changeNext"/>
+</div>
+
+</stack>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text001/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text001/index.js
new file mode 100644
index 0000000..7dd3d2d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text001/index.js
@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    title: "Text",
+    top: 20,
+    left: 100,
+    width: 200,
+    height: 60,
+    padding: 2,
+    bordradius: 2,
+    bordwidth: 2,
+    bkgcor: 0xd4f2e7,
+
+    margin: 2,
+    marginLeft: 2,
+    marginRight: 2,
+    marginTop: 2,
+    marginBottom: 2,
+
+    bordColor: 0x8a2be2,
+    display: "flex",
+    bordWidth: "BordWidthOne",
+    // special init value
+    color: 0x8a2be2,
+    fontsize: 30,
+    letterspacing: 2,
+    textalign: "left",
+    textoverflow: "clip",
+    fontfamily: "HYQiHei-65S",
+
+    bkgcorlorIndex: 0,
+    bordColorIndex: 0,
+    displayIndex: 0,
+    bordWidthIndex: 0,
+    // special Index
+    colorIndex: 0,
+    fontsizeIndex: 0,
+    textalignIndex: 0,
+    textoverflowIndex: 0,
+    fontfamilyIndex: 0,
+
+    colors: [
+      0xfaebd7,
+      0xffff00,
+      0xd4f2e7,
+      0x8a2be2,
+      0x00ffff,
+      0x0000ff,
+      0x00ff00,
+      0xa52a2a,
+      0xff0000
+    ],
+
+    displays: ["flex", "none"],
+
+    bordWidths: ["BordWidthOne", "BordWidthTwo", "BordWidthThree"],
+
+    // special Array
+
+    fontsizes: [38, 30],
+    textaligns: ["left", "center", "right"],
+    textoverflows: ["clip", "ellipsis"],
+    fontfamilys: ["HYQiHei-65S"]
+  },
+
+  /****************************  special **************************************/
+  onClickBtncolor() {
+    if (this.colorIndex >= this.colors.length) {
+      this.colorIndex = 0;
+    }
+    this.color = this.colors[this.colorIndex];
+    console.log("color:" + this.color);
+
+    this.colorIndex += 1;
+  },
+  onClickBtnFontsize() {
+    if (this.fontsizeIndex >= this.fontsizes.length) {
+      this.fontsizeIndex = 0;
+    }
+    this.fontsize = this.fontsizes[this.fontsizeIndex];
+    console.log("fontsize:" + this.fontsize);
+    this.fontfamily = "HYQiHei-65S";
+    this.fontsizeIndex += 1;
+  },
+  onClickBtnLetterspacingAdd() {
+    this.letterspacing += 1;
+  },
+  onClickBtnLetterspacingSub() {
+    this.letterspacing -= 1;
+  },
+  onClickBtnTextalign() {
+    if (this.textalignIndex >= this.textaligns.length) {
+      this.textalignIndex = 0;
+    }
+    this.textalign = this.textaligns[this.textalignIndex];
+    console.log("textalign:" + this.textalign);
+    this.textalignIndex += 1;
+  },
+  onClickBtnTextoverflow() {
+    if (this.textoverflowIndex >= this.textoverflows.length) {
+      this.textoverflowIndex = 0;
+    }
+    this.textoverflow = this.textoverflows[this.textoverflowIndex];
+    console.log("textoverflow:" + this.textoverflow);
+    this.textoverflowIndex += 1;
+  },
+  onClickBtnFontfamily() {
+    if (this.fontfamilyIndex >= this.fontfamilys.length) {
+      this.fontfamilyIndex = 0;
+    }
+    this.fontfamily = this.fontfamilys[this.fontfamilyIndex];
+    console.log("fontfamily:" + this.fontfamily);
+    this.fontfamilyIndex += 1;
+  },
+
+
+  //  *************************  pages  *********************************
+  backMain:backPage().backMain,
+  changeNext:routePage("pages/text/text002/index").changePage
+};
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text002/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text002/index.css
new file mode 100644
index 0000000..fbc549c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text002/index.css
@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+  background-color:yellow;
+}
+.title {
+  font-size: 30px;
+  text-align: center;
+  width: 454px;
+  height: 50px;
+  top:0px;
+  border-width: 2px;
+  border-color: greenyellow;
+  color: red;
+}
+
+
+.showBox {
+  width: 454px;
+  top: 40px;
+  left: 0px;
+  height: 170px;
+
+  border-width: 2px;
+  border-radius: 1px;
+  background-color: aliceblue;
+
+}
+
+.showBoxDiv {
+  width: 454px;
+  top: 40px;
+  left: 0px;
+  height: 170px;
+  justify-content: center;
+  align-items: center;
+  border-width: 2px;
+  border-radius: 1px;
+  background-color: aliceblue;
+
+  flex-wrap: wrap;
+}
+
+.outlineBox {
+  width: 454px;
+  top: 215px;
+  left: 0px;
+  height: 240px;
+
+  border-width: 2px;
+  border-radius:1px;
+  background-color: aliceblue;
+
+  flex-wrap: wrap;
+  justify-content:center;
+}
+
+
+.outlineBtn {
+  width:135px;
+  height: 36px;
+  font-size: 30px;
+  border-color: blueviolet
+}
+
+.divBordWidth {
+  border-width: 3px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text002/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text002/index.hml
new file mode 100644
index 0000000..be29c7b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text002/index.hml
@@ -0,0 +1,55 @@
+<!--
+Copyright (c) 2021 Huawei Device 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.
+-->
+
+<stack class="container">
+  <text class="title">
+     text
+  </text>
+<div id="show" class="showBoxDiv">
+      <text  style="top:20px;
+                  left:100px;
+                  width:{{width}};
+                  height:{{height}};
+                  padding-left:{{padding}};
+                  border-radius:{{bordradius}};
+                  display:flex;
+                  color:#F00;
+                  margin-left:{{margin}};
+                 "
+      >
+      this is text
+      </text>
+</div>
+
+<div id="outline" class="outlineBox">
+  <input type="button" class="outlineBtn" value="wid+20" @click="onClickBtnWidthAdd"/>
+  <input type="button" class="outlineBtn" value="wid-20" @click="onClickBtnWidthSub"/>
+  <input type="button" class="outlineBtn" value="heit+5" @click="onClickBtnHeightAdd"/>
+  <input type="button" class="outlineBtn" value="heit-5" @click="onClickBtnHeightSub"/>
+  <input type="button" class="outlineBtn" value="pad+10" @click="onClickBtnPaddingAdd"/>
+  <input type="button" class="outlineBtn" value="pad-10" @click="onClickBtnPaddingSub"/>
+  <input type="button" class="outlineBtn" value="bdrd+1" @click="onClickBtnBoardRadiusAdd"/>
+  <input type="button" class="outlineBtn" value="bdrd-1" @click="onClickBtnBoardRadiusSub"/>
+  <input type="button" class="outlineBtn" value="bdwd+3" @click="onClickBtnBoardWidthAdd"/>
+  <input type="button" class="outlineBtn" value="bdwd-3" @click="onClickBtnBoardWidthSub"/>
+
+  <input type="button" class="outlineBtn" value="mrg+2" @click="onClickBtnMarginAdd"/>
+  <input type="button" class="outlineBtn" value="mrg-2" @click="onClickBtnMarginSub"/>
+
+  <input type="button" value="上一页" @click="changePrev"/>
+  <input type="button" value="首页" @click="backMain"/>
+</div>
+
+</stack>
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text002/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text002/index.js
new file mode 100644
index 0000000..9060cc0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/text/text002/index.js
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    top: 20,
+    left:100,
+    width:200,
+    height:60,
+    padding:2,
+    bordradius:2,
+    bordwidth:2,
+    bkgcor: 0xD4F2E7,
+    margin:2,
+    marginLeft:2,
+    marginRight:2,
+    marginTop:2,
+    marginBottom:2,
+    bordColor:0x8A2BE2,
+    display:'flex',
+    color: 0x8a2be2,
+
+    bkgcorlorIndex: 0,
+    bordColorIndex: 0,
+    displayIndex: 0,
+
+    colors:[0xFAEBD7,0xFFFF00,0xD4F2E7,0x8A2BE2,0x00FFFF,
+    0x0000FF,0x00ff00,0xA52A2A,0xFF0000],
+    displays:['flex','none'],
+  },
+
+  onClickBtnWidthAdd(){
+      this.width +=20;
+  },
+  onClickBtnWidthSub(){
+      this.width -=20;
+  },
+  onClickBtnHeightAdd(){
+      this.height +=20;
+  },
+  onClickBtnHeightSub(){
+      this.height -=20;
+  },
+  onClickBtnPaddingAdd(){
+      this.padding +=10;
+      console.log('pad:'+ this.padding);
+  },
+  onClickBtnBoardRadiusAdd(){
+      this.bordradius += 1;
+  },
+  onClickBtnPaddingSub(){
+      this.padding -=10;
+      console.log('pad:'+ this.padding);
+  },
+  onClickBtnBoardRadiusSub(){
+      this.bordradius -= 1;
+  },
+  onClickBtnBoardWidthAdd(e){
+      this.bordwidth += 3;
+      console.log("border-width:"+ this.bordwidth);
+  },
+  onClickBtnBoardWidthSub(e){
+      this.bordwidth -= 3;
+      console.log("border-width:"+ this.bordwidth);
+  },
+  onClickBtnBKGColor(){
+     if(this.bkgcorlorIndex >= this.colors.length){
+       this.bkgcorlorIndex = 0;
+     }
+     this.bkgcor = this.colors[this.bkgcorlorIndex];
+     console.log('index:'+this.bkgcorlorIndex + '    ' +'bkgcolor:'+ this.bkgcor);
+     this.bkgcorlorIndex += 1;
+  },
+
+  onClickBtnMarginAdd(){
+      console.log('margin:'+ this.margin);
+      this.margin += 2;
+  },
+  onClickBtnMarginSub(){
+      console.log('margin:'+ this.margin);
+      this.margin -=2;
+  },
+   onClickBtnBoardColor(){
+     if(this.bordColorIndex >= this.colors.length){
+     this.bordColorIndex = 0;
+     }
+     this.bordColor = this.bkgcors[this.bordColorIndex];
+     this.bordColorIndex += 1;
+  },
+
+  //  *************************  pages  *********************************
+  backMain:backPage().backMain,
+  changePrev:routePage("pages/text/text001/index").changePage
+}
+/*  */
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval08/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval08/index.css
new file mode 100644
index 0000000..7b01629
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval08/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 50px;
+    margin-left: 150px;
+}
+
+.text {
+    width:200px;
+    height: 60px;
+    margin-left: 100px;
+    margin-top:10px;
+}
+
+.bottom {
+    margin-top: 20px;
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval08/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval08/index.hml
new file mode 100644
index 0000000..667a184
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval08/index.hml
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" onclick = "clearSetInterval" class = "button" value = "clearInterval"/>
+    <input type = "button" onclick = "clearSetTimeout" class = "button" value = "clearTimeout"/>
+    <text class = "text">{{value}}</text>
+    <div class = "bottom">
+        <input type = "button" onclick = "goPrevious" class = "previous" value = "上一页"/>
+        <input type = "button" onclick = "goHome" class = "page" value = "首页"/>
+        <input type = "button" onclick = "goNext" class = "page" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval08/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval08/index.js
new file mode 100644
index 0000000..87f2971
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval08/index.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data:{
+       value:"show"
+    },
+    clearSetTimeout:function() {
+        clearTimeout(1);
+        this.value = "clearSuccess";
+    },
+    clearSetInterval:function() {
+        clearInterval(1);
+        this.value = "intervalSuccess";
+    },
+    goHome:routePage("/").changePage,
+    goPrevious:routePage("/pages/timer/setInterval07/index").changePage,
+    goNext:routePage("pages/timer/clearInterval09/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval09/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval09/index.css
new file mode 100644
index 0000000..23c435f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval09/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 50px;
+    margin-left: 150px;
+}
+
+.text {
+    width:200px;
+    height:60px;
+    margin-left:100px;
+    margin-top:10px;
+}
+
+.bottom {
+    margin-top: 20px;
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval09/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval09/index.hml
new file mode 100644
index 0000000..5056c5e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval09/index.hml
@@ -0,0 +1,27 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" onclick = "testMinTime" class = "button" value = "minTime"/>
+    <input type = "button" onclick = "testMaxTime" class = "button" value = "maxTime"/>
+    <input type = "button" onclick = "testMinInterval" class = "button" value = "minInterval"/>
+    <input type = "button" onclick = "testMaxInterval" class = "button" value = "maxInterval"/>
+    <text class = "text">{{value}}</text>
+    <div class = "bottom">
+        <input type = "button" onclick = "goPrevious" class = "previous" value = "上一页"/>
+        <input type = "button" onclick = "goHome" class = "page" value = "首页"/>
+        <input type = "button" onclick = "goNext" class = "page" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval09/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval09/index.js
new file mode 100644
index 0000000..50fd15a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/clearInterval09/index.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data:{
+        value:"show"
+    },
+    testMinTime:function() {
+        setTimeout(()=>{this.value = "min"},-2);
+    },
+    testMaxTime:function() {
+        setTimeout(()=>{this.value = "max"},4294967297);
+    },
+    testMinInterval:function() {
+        var id = setInterval(()=>{this.value = "min"; clearInterval(id);},-1);
+    },
+    testMaxInterval:function() {
+        var id = setInterval(()=>{this.value = "max", clearInterval(id);},4294967295);
+    },
+    goPrevious:routePage("pages/timer/clearInterval08/index").changePage,
+    goHome:routePage("/").changePage,
+    goNext:routePage("/pages/timer/timerLimit10/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval02/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval02/index.css
new file mode 100644
index 0000000..6c9658e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval02/index.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 60px;
+    margin-left: 150px;
+    margin-top: 30px;
+}
+
+.text {
+    width: 200px;
+    height:60px;
+    margin-left: 150px;
+    margin-top: 30px;
+}
+
+.bottom {
+    margin-top: 20px;
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval02/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval02/index.hml
new file mode 100644
index 0000000..06b3a0f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval02/index.hml
@@ -0,0 +1,24 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" onclick = "startTimer" class = "button" value = "startInterval"/>
+    <text class = "text">{{show}}</text>
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value = "首页"/>
+        <input type = "button" class = "page" onclick = "goNext" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval02/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval02/index.js
new file mode 100644
index 0000000..d0881eb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval02/index.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+var index = 0;
+export default {
+    data:{show:"show",
+        index:0},
+    startTimer:function() {
+        var id = setInterval(()=> {
+            if(index >5) {
+                this.show = "clearInterval";
+                clearInterval(id);
+            }
+            index ++;
+            this.show = index;
+        }, 200);
+    },
+    goPrevious:routePage("/pages/timer/setTimeout01/index").changePage,
+    goHome:routePage("/").changePage,
+    goNext:routePage("/pages/timer/setTimeout03/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval05/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval05/index.css
new file mode 100644
index 0000000..93883ad
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval05/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 50px;
+    margin-left: 150px;
+}
+
+.text {
+    width: 200px;
+    height:60px;
+    margin-left: 80px;
+    margin-top: 10px;
+}
+
+.bottom {
+    margin-top: 20px;
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval05/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval05/index.hml
new file mode 100644
index 0000000..a2dc3a3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval05/index.hml
@@ -0,0 +1,26 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" onclick = "triggerNo" class = "button" value = "triggerNo"/>
+    <input type = "button" onclick = "triggerOne" class = "button" value = "triggerOne"/>
+    <input type = "button" onclick = "triggerTwo" class = "button" value = "triggerTwo"/>
+    <text class = "text">{{value}}</text>
+    <div class = "bottom">
+        <input type = "button" onclick = "goPrevious" class = "previous" value = "上一页"/>
+        <input type = "button" onclick = "goHome" class = "page" value = "首页"/>
+        <input type = "button" onclick = "goNext" class = "page" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval05/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval05/index.js
new file mode 100644
index 0000000..ecd02ae
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval05/index.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data:{
+        value:"show"
+    },
+    triggerOne:function() {
+        var id = setInterval((a)=>{
+            this.value = a;
+            clearInterval(id);
+        }, 200, "one Arg");
+    },
+    triggerNo:function() {
+        var id = setInterval((a)=>{
+            this.value = a;
+            clearInterval(id);
+        }, 200);
+    },
+    tiggerTwo:function() {
+        var id = setInterval((a)=>{
+            this.value = a;
+            clearInterval(id);
+        }, 200, "args1", "args2");
+    },
+    goHome:routePage("/").changePage,
+    goPrevious:routePage("pages/timer/setTimeout04/index").changePage,
+    goNext:routePage("pages/timer/setInterval06/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval06/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval06/index.css
new file mode 100644
index 0000000..485bc9d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval06/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 50px;
+    margin-left: 150px;
+}
+
+.text {
+    width: 200px;
+    height:60px;
+    margin-left: 100px;
+    margin-top:10px;
+}
+
+.bottom {
+    margin-top: 20px;
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval06/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval06/index.hml
new file mode 100644
index 0000000..049e4e9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval06/index.hml
@@ -0,0 +1,24 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" class = "button" onclick = "checkSetTimeout" value = "setTimeout"/>
+    <text class = "text">{{value}}</text>
+    <div class = "bottom">
+        <input type = "button" class  = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value = "首页"/>
+        <input type = "button" class = "page" onclick = "goNext" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval06/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval06/index.js
new file mode 100644
index 0000000..434eafa
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval06/index.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data:{
+        value:"show"
+    },
+    checkSetTimeout:function() {
+        var id = setTimeout(
+            ()=>{
+                this.value = "trigger start";
+                clearTimeout(id);
+                this.value = "trigger success";
+            }, 200
+        );
+    },
+    goHome:routePage("/").changePage,
+    goPrevious:routePage("/pages/timer/setInterval05/index").changePage,
+    goNext:routePage("/pages/timer/setInterval07/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval07/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval07/index.css
new file mode 100644
index 0000000..641691f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval07/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 50px;
+    margin-left: 150px;
+}
+
+.text {
+    width:200px;
+    height:60px;
+    margin-left: 80px;
+    margin-top:10px;
+}
+
+.bottom {
+    margin-top: 20px;
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval07/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval07/index.hml
new file mode 100644
index 0000000..049e4e9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval07/index.hml
@@ -0,0 +1,24 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" class = "button" onclick = "checkSetTimeout" value = "setTimeout"/>
+    <text class = "text">{{value}}</text>
+    <div class = "bottom">
+        <input type = "button" class  = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value = "首页"/>
+        <input type = "button" class = "page" onclick = "goNext" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval07/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval07/index.js
new file mode 100644
index 0000000..0accc28
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setInterval07/index.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data:{
+        value:"show"
+    },
+    checkSetTimeout:function() {
+        var id = setInterval(
+            ()=>{
+                this.value = "trigger start";
+                clearInterval(id);
+                this.value = "trigger success";
+            },200
+        );
+    },
+    goHome:routePage("/").changePage,
+    goPrevious:routePage("/pages/timer/setInterval06/index").changePage,
+    goNext:routePage("/pages/timer/clearInterval08/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout01/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout01/index.css
new file mode 100644
index 0000000..6c9658e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout01/index.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 60px;
+    margin-left: 150px;
+    margin-top: 30px;
+}
+
+.text {
+    width: 200px;
+    height:60px;
+    margin-left: 150px;
+    margin-top: 30px;
+}
+
+.bottom {
+    margin-top: 20px;
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout01/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout01/index.hml
new file mode 100644
index 0000000..671b2bf
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout01/index.hml
@@ -0,0 +1,24 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" onclick = "startTimer" class = "button" value = "startTimer"/>
+    <text class = "text">{{show}}</text>
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value = "首页"/>
+        <input type = "button" class = "page" onclick = "goNext" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout01/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout01/index.js
new file mode 100644
index 0000000..8227369
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout01/index.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data:{show:"show"},
+    startTimer:function() {
+        setTimeout(()=> {this.show = "once_timer success"}, 1000);
+    },
+    goPrevious:routePage("/").changePage,
+    goHome:routePage("/").changePage,
+    goNext:routePage("/pages/timer/setInterval02/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout03/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout03/index.css
new file mode 100644
index 0000000..6c9658e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout03/index.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 60px;
+    margin-left: 150px;
+    margin-top: 30px;
+}
+
+.text {
+    width: 200px;
+    height:60px;
+    margin-left: 150px;
+    margin-top: 30px;
+}
+
+.bottom {
+    margin-top: 20px;
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout03/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout03/index.hml
new file mode 100644
index 0000000..2c7ad26
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout03/index.hml
@@ -0,0 +1,24 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" onclick = "startTimer" class = "button" value = "startTimer"/>
+    <text class = "text">{{value}}</text>
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value = "首页"/>
+        <input type = "button" class = "page" onclick = "goNext" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout03/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout03/index.js
new file mode 100644
index 0000000..af423d7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout03/index.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data:{
+        value:"show"
+        },
+    startTimer:function() {
+        var id = setTimeout(()=> {
+            clearTimeout(id);
+            this.value = "clearSuccess";
+        }, 1000);
+    },
+    goPrevious:routePage("/pages/timer/setTimeout01/index").changePage,
+    goHome:routePage("/").changePage,
+    goNext:routePage("/pages/timer/setTimeout04/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout04/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout04/index.css
new file mode 100644
index 0000000..86a782f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout04/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+}
+
+.button {
+    width: 200px;
+    height: 50px;
+    margin-left: 150px;
+}
+
+.text {
+    width:200px;
+    height:60px;
+    margin-left: 80px;
+    margin-top: 10px;
+}
+
+.bottom {
+    margin-top: 20px;
+    width: 454px;
+    height:150px;
+}
+
+.previous{
+    width: 120px;
+    height: 60px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
+
+.page {
+    width:120px;
+    height: 60px;
+    margin-left: 20px;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout04/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout04/index.hml
new file mode 100644
index 0000000..a2dc3a3
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout04/index.hml
@@ -0,0 +1,26 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" onclick = "triggerNo" class = "button" value = "triggerNo"/>
+    <input type = "button" onclick = "triggerOne" class = "button" value = "triggerOne"/>
+    <input type = "button" onclick = "triggerTwo" class = "button" value = "triggerTwo"/>
+    <text class = "text">{{value}}</text>
+    <div class = "bottom">
+        <input type = "button" onclick = "goPrevious" class = "previous" value = "上一页"/>
+        <input type = "button" onclick = "goHome" class = "page" value = "首页"/>
+        <input type = "button" onclick = "goNext" class = "page" value = "下一页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout04/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout04/index.js
new file mode 100644
index 0000000..9cda384
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/setTimeout04/index.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data:{
+        value:"show"
+    },
+    triggerOne:function() {
+        setTimeout((a)=>{
+            this.value = a;
+        }, 200, "one Arg");
+    },
+    triggerNo:function() {
+        setTimeout((a)=>{
+            this.value = a;
+        }, 200);
+    },
+    tiggerTwo:function() {
+        setTimeout((a)=>{
+            this.value = a;
+        }, 200, "args1", "args2");
+    },
+    goHome:routePage("/").changePage,
+    goPrevious:routePage("pages/timer/setTimeout03/index").changePage,
+    goNext:routePage("pages/timer/setInterval05/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/timerLimit10/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/timerLimit10/index.css
new file mode 100644
index 0000000..542deea
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/timerLimit10/index.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width:454px;
+    height:454px;
+    flex-direction: column;
+}
+
+.button {
+    width:200px;
+    height:60px;
+    margin-left: 100px;
+    margin-top: 20px;
+}
+
+.text {
+    width:300px;
+    height:60px;
+    margin-left: 100px;
+    margin-top: 20px;
+}
+
+.bottom {
+    width:454px;
+    height:200px;
+}
+
+.previous {
+    width:120px;
+    height:60px;
+    margin-left: 80px;
+    margin-top:20px;
+}
+
+.page {
+    width:120px;
+    height:60px;
+    margin-left: 10px;
+    margin-top:20px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/timerLimit10/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/timerLimit10/index.hml
new file mode 100644
index 0000000..ea6fa8d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/timerLimit10/index.hml
@@ -0,0 +1,23 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class = "container">
+    <input type = "button" class = "button" onclick = "startMaxTimer" value = "maxTimer"/>
+    <text class = "text">{{value}}</text>
+    <div class = "bottom">
+        <input type = "button" class = "previous" onclick = "goPrevious" value = "上一页"/>
+        <input type = "button" class = "page" onclick = "goHome" value = "首页"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/timerLimit10/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/timerLimit10/index.js
new file mode 100644
index 0000000..30939ab
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/timer/timerLimit10/index.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data:{
+        value:"show"
+    },
+    startMaxTimer:function() {
+        setTimeout(()=>{
+            this.value = "timer1";
+        }, 4000);
+        setTimeout(()=>{
+            this.value = "timer2";
+        },4000);
+        setTimeout(()=>{
+            this.value = "timer3";
+        },4000);
+        setTimeout(()=>{
+            this.value = "timer4";
+        }, 4000);
+    },
+    goHome:routePage("/").changePage,
+    goPrevious:routePage("/pages/timer/clearInterval09/index").changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/01/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/01/index.css
new file mode 100644
index 0000000..b0ad1ec
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/01/index.css
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:100px;
+    height:120px;
+    background-color: #00ff7f;
+}
+
+.divAnimationStyle {
+    animation-duration: 1000ms;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 500ms;
+    animation-iteration-count: 2;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+@keyframes animationTest {
+    from {
+        transform: translateX(-15px);
+        height: 100px;
+        width: 20px;
+        background-color: #00ced1;
+    }
+    to {
+        transform: translateX(200px);
+        height: 30px;
+        width: 100px;
+        background-color: #008000;
+    }
+}
+
+@keyframes 76788 {
+    from {
+        height: 200px;
+    }
+    to {
+        height: 30px;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/01/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/01/index.hml
new file mode 100644
index 0000000..d76aa39
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/01/index.hml
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_001</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName2}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/01/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/01/index.js
new file mode 100644
index 0000000..04e995f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/01/index.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName: "animationTest",
+            animationName2: 76788
+        },
+        changePrev:routePage('pages/index/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/0203/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0203/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0203/index.css
new file mode 100644
index 0000000..116292c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0203/index.css
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:80px;
+    height:50px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle1 {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 2s;
+    animation-iteration-count: 2;
+}
+
+.divAnimationStyle2 {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: 2;
+}
+
+.divAnimationStyle3 {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 00000;
+    animation-iteration-count: 2;
+}
+
+.divAnimationStyle4 {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 2;
+    animation-iteration-count: 2;
+}
+
+@keyframes animationTest {
+    from {
+        height: 20px;
+    }
+    to {
+        height: 100px;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0203/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0203/index.hml
new file mode 100644
index 0000000..45222c9
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0203/index.hml
@@ -0,0 +1,35 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_0203</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <div class="divBlock divAnimationStyle1" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle2" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle3" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle4" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0203/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0203/index.js
new file mode 100644
index 0000000..8c80fea
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0203/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName: "animationTest"
+        },
+        changePrev:routePage('pages/transition/01/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/0405/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0405/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0405/index.css
new file mode 100644
index 0000000..81d9f3a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0405/index.css
@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:80px;
+    height:50px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle1 {
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 500ms;
+    animation-iteration-count: 2;
+}
+
+.divAnimationStyle2 {
+    animation-duration: 1000ms;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 500ms;
+    animation-iteration-count: 2;
+}
+
+.divAnimationStyle3 {
+    animation-duration: -1;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 500ms;
+    animation-iteration-count: 2;
+}
+
+.divAnimationStyle4 {
+    animation-duration: 1000;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 500ms;
+    animation-iteration-count: 2;
+}
+
+.divAnimationStyle5 {
+    animation-duration: 2;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 500ms;
+    animation-iteration-count: 2;
+}
+
+@keyframes animationTest {
+    from {
+        height: 20px;
+    }
+    to {
+        height: 100px;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0405/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0405/index.hml
new file mode 100644
index 0000000..5ef5f4c
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0405/index.hml
@@ -0,0 +1,37 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_0405</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <div class="divBlock divAnimationStyle1" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle2" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle3" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle4" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle5" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0405/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0405/index.js
new file mode 100644
index 0000000..c6c6470
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0405/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName: "animationTest"
+        },
+        changePrev:routePage('pages/transition/0203/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/0607/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0607/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0607/index.css
new file mode 100644
index 0000000..4d4b4dc
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0607/index.css
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:80px;
+    height:50px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle1 {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: 005;
+}
+
+.divAnimationStyle2 {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: infinite;
+}
+
+.divAnimationStyle3 {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: 2;
+}
+
+.divAnimationStyle4 {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: -1;
+}
+
+@keyframes animationTest {
+    from {
+        height: 20px;
+    }
+    to {
+        height: 100px;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0607/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0607/index.hml
new file mode 100644
index 0000000..ac47edd
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0607/index.hml
@@ -0,0 +1,35 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_0607</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <div class="divBlock divAnimationStyle1" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle2" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle3" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle4" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0607/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0607/index.js
new file mode 100644
index 0000000..b029213
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0607/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName: "animationTest"
+        },
+        changePrev:routePage('pages/transition/0405/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/0809/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0809/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0809/index.css
new file mode 100644
index 0000000..68484e7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0809/index.css
@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:70px;
+    height:50px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle1 {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: infinite;
+}
+
+.divAnimationStyle2 {
+    animation-duration: 3s;
+    animation-timing-function: ease-in;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: infinite;
+}
+
+.divAnimationStyle3 {
+    animation-duration: 3s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: infinite;
+}
+
+.divAnimationStyle4 {
+    animation-duration: 3s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: infinite;
+}
+
+.divAnimationStyle5 {
+    animation-duration: 3s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: infinite;
+}
+
+.divAnimationStyle6 {
+    animation-duration: 3s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: infinite;
+}
+
+@keyframes animationTest {
+    from {
+        height: 20px;
+    }
+    to {
+        height: 200px;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0809/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0809/index.hml
new file mode 100644
index 0000000..a1787b1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0809/index.hml
@@ -0,0 +1,39 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_0809</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <div class="divBlock divAnimationStyle1" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle2" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle3" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle4" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle5" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle6" style="animation-name:{{animationName}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0809/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0809/index.js
new file mode 100644
index 0000000..699f65e
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/0809/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName: "animationTest"
+        },
+        changePrev:routePage('pages/transition/0607/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/1011/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1011/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1011/index.css
new file mode 100644
index 0000000..90777eb
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1011/index.css
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:100px;
+    height:100px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+}
+
+@keyframes animationTest1 {
+    from {
+        transform: translateX(20);
+    }
+    to {
+        transform: translateX(200);
+    }
+}
+
+@keyframes animationTest2 {
+    from {
+        transform: translateX(20px);
+    }
+    to {
+        transform: translateX(200px);
+    }
+}
+
+@keyframes animationTest3 {
+    from {
+        transform: translateX(jhkhj);
+    }
+    to {
+        transform: translateX(jhkhj);
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1011/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1011/index.hml
new file mode 100644
index 0000000..69eebbd
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1011/index.hml
@@ -0,0 +1,33 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_1011</text>
+    </div>
+    <div style="height:220px;flex-direction:column" class="divFrame">
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName1}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName2}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName3}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1011/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1011/index.js
new file mode 100644
index 0000000..641fe5f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1011/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName1: "animationTest1",
+            animationName2: "animationTest2",
+            animationName3: "animationTest3",
+        },
+        changePrev:routePage('pages/transition/0809/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/1213/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1213/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1213/index.css
new file mode 100644
index 0000000..5ddb0af
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1213/index.css
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:100px;
+    height:100px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+}
+
+@keyframes animationTest1 {
+    from {
+        transform: translateY(20);
+    }
+    to {
+        transform: translateY(200);
+    }
+}
+
+@keyframes animationTest2 {
+    from {
+        transform: translateY(20px);
+    }
+    to {
+        transform: translateY(200px);
+    }
+}
+
+@keyframes animationTest3 {
+    from {
+        transform: translateY(jhkhj);
+    }
+    to {
+        transform: translateY(jhkhj);
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1213/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1213/index.hml
new file mode 100644
index 0000000..d467495
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1213/index.hml
@@ -0,0 +1,33 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_1213</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName1}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName2}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName3}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1213/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1213/index.js
new file mode 100644
index 0000000..8f9765a
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1213/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+    data: {
+        animationName1: "animationTest1",
+        animationName2: "animationTest2",
+        animationName3: "animationTest3",
+    },
+    changePrev:routePage('pages/transition/1011/index').changePage,
+    backMain:backPage().backMain,
+    changeNext:routePage('pages/transition/1415/index').changePage
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1415/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1415/index.css
new file mode 100644
index 0000000..f50227b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1415/index.css
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:100px;
+    height:100px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: 3;
+}
+
+@keyframes animationTest1 {
+    from {
+        background-color: #d87093;
+    }
+    to {
+        background-color: #ff0000;
+    }
+}
+
+@keyframes animationTest2 {
+    from {
+        background-color: "98988";
+    }
+    to {
+        background-color: "908877";
+    }
+}
+
+@keyframes animationTest3 {
+    from {
+        background-color: #1f3ffffff8f;
+    }
+    to {
+        background-color: #-31ffffffbe;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1415/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1415/index.hml
new file mode 100644
index 0000000..5d85cc2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1415/index.hml
@@ -0,0 +1,33 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_1415</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName1}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName2}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName3}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1415/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1415/index.js
new file mode 100644
index 0000000..7d480d2
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/1415/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName1: "animationTest1",
+            animationName2: "animationTest2",
+            animationName3: "animationTest3",
+        },
+        changePrev:routePage('pages/transition/1213/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/16/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/16/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/16/index.css
new file mode 100644
index 0000000..321a767
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/16/index.css
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:100px;
+    height:100px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+    animation-iteration-count: 3;
+}
+
+@keyframes animationTest1 {
+    from {
+        opacity: 20;
+    }
+    to {
+        opacity: 255;
+    }
+}
+
+@keyframes animationTest2 {
+    from {
+        opacity: 0.1;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes animationTest3 {
+    from {
+        opacity: "dd";
+    }
+    to {
+        opacity: "255";
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/16/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/16/index.hml
new file mode 100644
index 0000000..716439d
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/16/index.hml
@@ -0,0 +1,33 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_016</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName1}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName2}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName3}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/16/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/16/index.js
new file mode 100644
index 0000000..6cacd32
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/16/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName1: "animationTest1",
+            animationName2: "animationTest2",
+            animationName3: "animationTest3",
+        },
+        changePrev:routePage('pages/transition/1415/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/17/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/17/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/17/index.css
new file mode 100644
index 0000000..47332c5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/17/index.css
@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:100px;
+    height:100px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+}
+
+@keyframes animationTest1 {
+    from {
+        width:100px;
+    }
+    to {
+        width:50px;
+    }
+}
+
+@keyframes animationTest2 {
+    from {
+        width:100px;
+    }
+    to {
+        width:40px;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/17/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/17/index.hml
new file mode 100644
index 0000000..9537c00
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/17/index.hml
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_017</text>
+    </div>
+    <div style="height:220px;flex-direction:column" class="divFrame">
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName1}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName2}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/17/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/17/index.js
new file mode 100644
index 0000000..e423ac0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/17/index.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName1: "animationTest1",
+            animationName2: "animationTest2",
+        },
+        changePrev:routePage('pages/transition/16/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/18/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/18/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/18/index.css
new file mode 100644
index 0000000..c946390
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/18/index.css
@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:100px;
+    height:100px;
+    background-color: #00ff7f;
+    }
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+}
+
+@keyframes animationTest1 {
+    from {
+        height:200px;
+    }
+    to {
+        height:50px;
+    }
+}
+
+@keyframes animationTest2 {
+    from {
+        height:100px;
+    }
+    to {
+        height:40px;
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/18/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/18/index.hml
new file mode 100644
index 0000000..60ef668
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/18/index.hml
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_018</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName1}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName2}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/18/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/18/index.js
new file mode 100644
index 0000000..400dbc6
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/18/index.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName1: "animationTest1",
+            animationName2: "animationTest2",
+        },
+        changePrev:routePage('pages/transition/17/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/19/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/19/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/19/index.css
new file mode 100644
index 0000000..88f1cf1
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/19/index.css
@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:100px;
+    height:100px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+}
+
+@keyframes animationTest1 {
+    from {
+        transform: translate(20);
+    }
+    to {
+        transform: translate(200);
+    }
+}
+
+@keyframes animationTest2 {
+    from {
+        transform: translateX(20);
+        aaa:"aa";
+    }
+    to {
+        transform: translateX(200);
+        aaa:"aab";
+    }
+}
+
+@keyframes animationTest3 {
+    from {
+        transform: translateX(200);
+        aaa:"aa";
+    }
+    to {
+        transform: translateX(20);
+        aaa:"aab";
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/19/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/19/index.hml
new file mode 100644
index 0000000..3c83de5
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/19/index.hml
@@ -0,0 +1,33 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_019</text>
+    </div>
+    <div style="height:220px;flex-direction:column" class="divFrame">
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName1}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName2}}" onclick="changeAnimation">
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:{{animationName3}}" onclick="changeAnimation">
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90:height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/19/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/19/index.js
new file mode 100644
index 0000000..c8d8e57
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/19/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName1: "animationTest1",
+            animationName2: "animationTest2",
+            animationName3: "animationTest3",
+        },
+        changePrev:routePage('pages/transition/18/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/20/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/20/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/20/index.css
new file mode 100644
index 0000000..be346b8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/20/index.css
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divBlock {
+    width:100px;
+    height:100px;
+    background-color: #00ff7f;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+.divAnimationStyle {
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    animation-delay: 1000ms;
+}
+
+@keyframes animationTest1 {
+    from {
+        rotate: "270deg";
+    }
+    to {
+        rotate: "-10deg";
+    }
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/20/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/20/index.hml
new file mode 100644
index 0000000..893c238
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/20/index.hml
@@ -0,0 +1,28 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_020</text>
+    </div>
+    <div style="height:220px;" class="divFrame">
+        <image style="width:120px;height:120px;animation-name:{{animationName1}};" class="divAnimationStyle" src="common/icon.png"></image>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+        <input type="button" value="下页" style="width:90px;height:40px;" onclick="changeNext"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/20/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/20/index.js
new file mode 100644
index 0000000..624c2f4
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/20/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+    export default {
+        data: {
+            animationName1: "animationTest1",
+        },
+        changePrev:routePage('pages/transition/19/index').changePage,
+        backMain:backPage().backMain,
+        changeNext:routePage('pages/transition/21/index').changePage
+    }
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/21/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/21/index.css
new file mode 100644
index 0000000..6684dbe
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/21/index.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    left:0px;
+    top:0px;
+    width:454px;
+    height:454px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 227px;
+    border-width: 2px;
+    border-color: #00ff00;
+}
+
+.divFrame {
+    width:454px;
+    height:50px;
+    justify-content:center;
+    align-items:center;
+}
+
+@keyframes rotate1{
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(90deg);
+  }
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/21/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/21/index.hml
new file mode 100644
index 0000000..3dd45b8
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/21/index.hml
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="container" style="flex-direction:column; align-items:center">
+    <div style="margin-top:40px;width:380px;height:80px;" class="divFrame">
+        <text style="width:380px;height:80px;text-overflow:ellipsis">Component_animation_StyleSet_Test_021</text>
+    </div>
+    <div style="height:220px;flex-direction: column;;" class="divFrame">
+        <image style="width: 120px;height: 120px;animation-name:{{animationName}};animation-duration: 3s;
+               animation-iteration-count: 3;animation-fill-mode: forwards;" class="divAnimationStyle"
+               src="common/icon.png" if="{{ifFlag}}"></image>
+        <div style="width: 250px; height: 50px; justify-content: center;" onclick="changeIf">
+          <text style="color: #0000ff">click to trigger if</text>
+        </div>
+    </div>
+    <div class="divFrame">
+        <input type="button" value="上页" style="width:90px;height:40px;" onclick="changePrev"/>
+        <input type="button" value="首页" style="width:90px;height:40px;" onclick="backMain"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/21/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/21/index.js
new file mode 100644
index 0000000..1301ec0
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/transition/21/index.js
@@ -0,0 +1,37 @@
+/*
+* Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+    title: 'World',
+    animationName:'rotate1',
+    index:1,
+    ifFlag:true
+  },
+  clickAction(){
+     if(this.index > 4){
+       this.index = 1;
+     }
+     console.log(this.index);
+     this.animationName = "rotate"+this.index;
+     this.index++;
+  },
+  changeIf() {
+    this.ifFlag = this.ifFlag == true ? false : true;
+  },
+  changePrev:routePage('pages/transition/20/index').changePage,
+  backMain:backPage().backMain
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/video/video001/index.css b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/video/video001/index.css
new file mode 100755
index 0000000..83bd42f
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/video/video001/index.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+.specialVideo {
+margin-left:1px;
+margin-top:1px;
+width:900px;
+height:380px;
+}
+
+.specialImage {
+    height:50px;
+    width:50px;
+}
+
+.specialSlider {
+    color: #b22222;
+    height: 30px;
+    width: 150px;
+    selected-color: #00ff00;
+    border-radius: 10px;
+}
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/video/video001/index.hml b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/video/video001/index.hml
new file mode 100755
index 0000000..a7ea1c7
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/video/video001/index.hml
@@ -0,0 +1,33 @@
+<!--
+Copyright (c) 2021 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div style="width:960px;height:480px;left:0px;top:0px;flex-direction:column;" >
+  <video ref="vid" muted="false" autoplay="true" controls="{{showControls}}" src="{{videoSrc}}"  class="specialVideo"
+   onprepared="preparedfn" onstart="startfunc" onpause="pausefn" onfinish="finishfn"
+   onerror="error" onseeking="seekingfn" onseeked="seekedfn" ontimeupdate="timeupdatefn">
+  </video>
+
+<div style="width:640px;height:80px;left:0px;top:0px;flex-direction:row;">
+  <input type="button" style="margin-left:25px;width:80px;height:60px;" value="播放" onclick="startPlayVideo">
+  </input>
+  <input type="button" style="margin-left:25px;width:80px;height:60px;" value="暂停" onclick="stopPlayVideo">
+  </input>
+  <input type="button" style="margin-left:25px;width:80px;height:60px;" value="跳转" onclick="setCurrentTime(10)">
+  </input>
+  <input type="button" style="margin-left:25px;width:80px;height:60px;" value="下一首" onclick="playNext">
+  </input>
+  <input type="button" style="margin-left:25px;width:80px;height:60px;" value="首页" @click="backMain"/>
+</div>
+</div>
\ No newline at end of file
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/video/video001/index.js b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/video/video001/index.js
new file mode 100755
index 0000000..d7abd5b
--- /dev/null
+++ b/test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/video/video001/index.js
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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 {backPage,routePage} from "../../../common/js/general";
+
+export default {
+  data: {
+      photoUri: "",
+      videoSrc:"/sdcard/video/test_720p_no_audio.LRV",
+      showControls: true,
+      startTime:"00:00",
+      endTime:"00:00",
+      index : 1,
+  },
+  startPlayVideo: function () {
+    console.log("JS::startPlayVideo called!");
+    var video = this.$refs.vid;
+    video.start();
+  },
+  stopPlayVideo: function () {
+    console.log("JS::pausePlayVideo called!");
+    var video = this.$refs.vid;
+    video.pause();
+  },
+  setCurrentTime: function (val) {
+    console.log("JS::setCurrentTime called!");
+    var video = this.$refs.vid;
+    video.setCurrentTime(10);
+  },
+
+  playNext: function () {
+    console.log("JS::playNext video!");
+  if (this.index % 2 == 0) {
+      console.log("click change to play image startPlayVideo called!");
+      this.videoSrc = "/sdcard/video/test_720p_no_audio.LRV";
+    } else {
+      console.log("click change to stop image stopPlayVideo called!");
+      this.videoSrc = "/sdcard/video/test.mp4";
+    }
+  this.index ++;
+  },
+
+  valueChange(value) {
+    var video = this.$refs.vid;
+    video.setCurrentTime(value.progress);
+    this.startTime = value.progress;
+  },
+
+  preparedfn: function() {
+    console.log('js video preparedfn called');
+  },
+
+  startfunc: function() {
+    console.log('js video startfunc called');
+  },
+
+  pausefn: function() {
+    console.log('js video pausefn called');
+  },
+
+  finishfn: function() {
+    console.log('js video finishfn called');
+  },
+
+  error: function () {
+    console.log('onerror called');
+  },
+
+  seekingfn: function(e) {
+    console.log('js video seeking called:' + e.currenttime);
+  },
+  seekedfn: function(e) {
+    console.log('js video seeked called' + e.currenttime);
+  },
+  timeupdatefn: function(e) {
+    console.log('js video timeUpdate called' + e.currenttime);
+  },
+
+//  *************************  pages  *********************************
+  backMain:backPage().backMain
+
+}
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/res/drawable/icon.png b/test/moduletest/common/test_app/ui_manual_test/src/main/res/drawable/icon.png
new file mode 100644
index 0000000..6ebbe65
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/res/drawable/icon.png differ
diff --git a/test/moduletest/common/test_app/ui_manual_test/src/main/res/drawable/icon_small.png b/test/moduletest/common/test_app/ui_manual_test/src/main/res/drawable/icon_small.png
new file mode 100644
index 0000000..c69db78
Binary files /dev/null and b/test/moduletest/common/test_app/ui_manual_test/src/main/res/drawable/icon_small.png differ
diff --git a/test/moduletest/common/test_common.h b/test/moduletest/common/test_common.h
new file mode 100755
index 0000000..cd608e5
--- /dev/null
+++ b/test/moduletest/common/test_common.h
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021 Huawei Device 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.
+ */
+#ifndef ACELITE_JSFWK_TEST_COMMON_H
+#define ACELITE_JSFWK_TEST_COMMON_H
+
+#ifdef TDD_ASSERTIONS
+#define TDD_CASE_BEGIN() void()
+#define TDD_CASE_END() void()
+#else
+#define TDD_CASE_BEGIN() SetUp()
+#define TDD_CASE_END() TearDown()
+#define EXPECT_STREQ(arg1, args2) void()
+#define EXPECT_TRUE(arg1) void()
+#define EXPECT_EQ(arg1, arg2) void()
+#define EXPECT_NE(arg1, arg2) void()
+#define EXPECT_FALSE(arg1) void()
+#define HWTEST_F(className, funcName, level) void className::funcName()
+#endif
+#endif // ACELITE_JSFWK_TEST_COMMON_H
\ No newline at end of file