diff --git a/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/index.ets b/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3411c72094a292c1cf9add67af3866dcb4356db6
--- /dev/null
+++ b/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/index.ets
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import file from '@system.file';
+import {Core, ExpectExtend, InstrumentLog, ReportExtend} from "deccjsunit/index.ets";
+import testsuite from "../test/List.test.ets";
+import featureAbility from "@ohos.ability.featureAbility";
+
+@Entry
+@Component
+struct MyComponent {
+  aboutToAppear() {
+    console.info("start run testcase!!!!")
+    featureAbility.getWant()
+      .then((Want) => {
+        const core = Core.getInstance();
+        const expectExtend = new ExpectExtend({
+          'id': 'extend'
+        });
+        core.addService('expect', expectExtend);
+        const reportExtend = new ReportExtend(file);
+        core.addService('report', reportExtend);
+        core.init();
+        core.subscribeEvent('task', reportExtend);
+        const configService = core.getDefaultService('config');
+        console.info('parameters---->' + JSON.stringify(Want.parameters));
+        configService.setConfig(Want.parameters);
+        testsuite();
+        core.execute();
+        console.info('Operation successful. Data: ' + JSON.stringify(Want));
+      })
+      .catch((error) => {
+        console.error('Operation failed. Cause: ' + JSON.stringify(error));
+      })
+  }
+
+  build() {
+    Flex({
+      direction: FlexDirection.Column,
+      alignItems: ItemAlign.Center,
+      justifyContent: FlexAlign.Center
+    }) {
+      Text('ACE WEBVIEW ETS TEST')
+        .fontSize(50)
+        .fontWeight(FontWeight.Bold)
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+
diff --git a/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/webEvent.ets b/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/webEvent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..678bce8e6d8417e50eb92c3f8fdb496d508283d0
--- /dev/null
+++ b/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/webEvent.ets
@@ -0,0 +1,215 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct Index {
+  @State javaScriptAccess: boolean = true;
+  @State fileAccess: boolean = true;
+
+  build() {
+    Column() {
+      Row(){
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnAlert")
+          .onAlert((event?: {
+            url: string,
+            message: string,
+            result: JsResult
+          }) => {
+            console.log("onAlert: url -- " + event.url)
+            console.log("onAlert: message -- " + event.message)
+            event.result.handleCancel(()=>{
+              console.log("onAlert: handleCancel -- ")
+            })
+            event.result.handleConfirm()(()=>{
+              console.log("onAlert: handleConfirm -- ")
+            })
+          })
+
+        Divider().width("3%")
+
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnBeforeUnload")
+          .onBeforeUnload((event?: {
+            url: string,
+            message: string,
+            result: JsResult
+          }) => {
+            console.log("onBeforeUnload: url -- " + event.url)
+            console.log("onBeforeUnload: message -- " + event.message)
+            event.result.handleCancel(()=>{
+              console.log("onBeforeUnload: handleCancel -- ")
+            })
+            event.result.handleConfirm()(()=>{
+              console.log("onBeforeUnload: handleConfirm -- ")
+            })
+          })
+
+        Divider().width("3%")
+
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnConfirm")
+          .onConfirm((event?: {
+            url: string,
+            message: string,
+            result: JsResult
+          }) => {
+            console.log("onConfirm: url -- " + event.url)
+            console.log("onConfirm: message -- " + event.message)
+            event.result.handleCancel(()=>{
+              console.log("onConfirm: handleCancel -- ")
+            })
+            event.result.handleConfirm()(()=>{
+              console.log("onConfirm: handleConfirm -- ")
+            })
+          })
+
+        Divider().width("3%")
+
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnConfirm")
+          .onConsole((event?: {
+            message: ConsoleMessage
+          }) => {
+            console.log("onConsole: getLineNumber -- " + event.message.getLineNumber())
+            console.log("onConsole: getSourceId -- " + event.message.getSourceId())
+            console.log("onConsole: getMessageLevel -- " + event.message.getMessageLevel())
+            console.log("onConsole: getMessage -- " + event.message.getMessage())
+          })
+      }
+      .width("100%")
+      .height("20%")
+
+      Divider().height("5%")
+
+      Row(){
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnDownloadStart")
+          .onDownloadStart((event?: {
+            url:string,
+            userAgent:string,
+            contentDisposition:string,
+            mimetype: string,
+            contentLength: number
+          }) => {
+            console.log("onDownloadStart: url -- " + event.url)
+            console.log("onDownloadStart: userAgent -- " + event.userAgent)
+            console.log("onDownloadStart: contentDisposition -- " + event.contentDisposition)
+            console.log("onDownloadStart: mimetype -- " + event.mimetype)
+            console.log("onDownloadStart: contentLength -- " + event.contentLength)
+          })
+
+        Divider().width("3%")
+
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnErrorReceive")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnHttpErrorReceive")
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnPageBegin")
+          .onPageBegin((event?: {
+            url: string
+          }) => {
+            console.log("onPageBegin: url -- " + event.url)
+          })
+      }
+      .width("100%")
+      .height("20%")
+
+      Divider().height("5%")
+
+      Row(){
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnPageEnd")
+          .onPageEnd((event?: {
+            url: string
+          }) => {
+            console.log("onPageEnd: url -- " + event.url)
+          })
+
+        Divider().width("3%")
+
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .key("webViewOnProgressChange")
+          .onProgressChange((event?: {
+            newProgress: number
+          }) => {
+            console.log("onProgressChange: newProgress -- " + event.newProgress)
+          })
+
+        Divider().width("3%")
+
+        Web({ src:'www.baidu.com', controller:null })
+          .width('20%')
+          .height('100%')
+          .zoomAccess(true)
+          .key("webViewOnTitleReceive")
+          .onTitleReceive((event?: {
+            title: string
+          }) => {
+            console.log("onTitleReceive: title -- " + event.title)
+          })
+      }
+      .width("100%")
+      .height("20%")
+
+    }.width('100%')
+    .height('100%').backgroundColor("#ff0000")
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/webProp.ets b/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/webProp.ets
new file mode 100644
index 0000000000000000000000000000000000000000..fe0a25db465772f11b96225743e6c48eec662b59
--- /dev/null
+++ b/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/webProp.ets
@@ -0,0 +1,418 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct Index {
+  @State javaScriptAccess: boolean = true;
+  @State fileAccess: boolean = true;
+
+  build() {
+    Column() {
+      Row(){
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .domStorageAccess(true)
+          .key("webViewDomStorageAccessTrue")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .domStorageAccess(false)
+          .key("webViewDomStorageAccessFalse")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .fileAccess(true)
+          .key("webViewFileAccessTrue")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .fileAccess(false)
+          .key("webViewFileAccessFalse")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+      }
+      .width("100%")
+      .height("20%")
+
+      Divider().height("5%")
+
+      Row(){
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .imageAccess(true)
+          .key("webViewImageAccessTrue")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .imageAccess(false)
+          .key("webViewImageAccessFalse")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .javaScriptAccess(true)
+          .key("webViewJavaScriptAccessTrue")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .javaScriptAccess(false)
+          .key("webViewJavaScriptAccessFalse")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+      }
+      .width("100%")
+      .height("20%")
+
+      Divider().height("5%")
+
+      Row(){
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .onlineImageAccess(true)
+          .key("webViewOnlineImageAccessTrue")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .onlineImageAccess(false)
+          .key("webViewOnlineImageAccessFalse")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .zoomAccess(true)
+          .key("webViewZoomAccessTrue")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .zoomAccess(false)
+          .key("webViewZoomAccessFalse")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+      }
+      .width("100%")
+      .height("20%")
+
+      Divider().height("5%")
+
+      Row(){
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .mixedMode(MixedMode.None)
+          .key("webViewMixedModeNone")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .mixedMode(MixedMode.All)
+          .key("webViewMixedModeAll")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:$rawfile('test.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .mixedMode(MixedMode.Compatible)
+          .key("webViewMixedModeCompatible")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+      }
+      .width("100%")
+      .height("20%")
+
+    }.width('100%')
+    .height('100%').backgroundColor("#ff0000")
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/webStyle.ets b/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/webStyle.ets
new file mode 100644
index 0000000000000000000000000000000000000000..416d5bbdf67888ee671cfae78d096a32a94c75c0
--- /dev/null
+++ b/arkui/ace_ets_webView/entry/src/main/ets/MainAbility/pages/webStyle.ets
@@ -0,0 +1,424 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct Index {
+  @State javaScriptAccess: boolean = true;
+  @State fileAccess: boolean = true;
+
+  build() {
+    Column() {
+
+      Row(){
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('30%')
+          .height('100%')
+          .fileAccess(this.fileAccess)
+          .key("webViewWidthPer")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width(100)
+          .height('100%')
+          .fileAccess(this.fileAccess)
+          .key("webViewWidthPx")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('20%')
+          .height('80%')
+          .fileAccess(this.fileAccess)
+          .key("webViewHeightPer")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width("20%")
+          .height(50)
+          .fileAccess(this.fileAccess)
+          .key("webViewHeightPx")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+      }
+      .width("100%")
+      .height("30%")
+
+      Divider().height("5%")
+
+      Row(){
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .padding(10)
+          .fileAccess(this.fileAccess)
+          .key("webViewPaddingAll")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .padding({left:10,right:5,top:5,bottom:5})
+          .fileAccess(this.fileAccess)
+          .key("webViewPadding")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .margin(10)
+          .fileAccess(this.fileAccess)
+          .key("webViewMarginAll")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('20%')
+          .height('100%')
+          .margin({left:10,right:5,top:5,bottom:5})
+          .fileAccess(this.fileAccess)
+          .key("webViewMargin")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+      }
+      .width("100%")
+      .height("30%")
+
+      Divider().height("5%")
+
+      Row(){
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('14%')
+          .height('100%')
+          .border({width:2,color:0x317AF7,radius:5,style:BorderStyle.Dashed})
+          .fileAccess(this.fileAccess)
+          .key("webViewBorderAll")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('14%')
+          .height('100%')
+          .borderWidth(3)
+          .fileAccess(this.fileAccess)
+          .key("webViewBorderWidth")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('14%')
+          .height('100%')
+          .borderColor(0x317AF7)
+          .fileAccess(this.fileAccess)
+          .key("webViewBorderColor")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('14%')
+          .height('100%')
+          .borderRadius(6)
+          .fileAccess(this.fileAccess)
+          .key("webViewBorderRadius")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('14%')
+          .height('100%')
+          .borderStyle(BorderStyle.Dashed)
+          .fileAccess(this.fileAccess)
+          .key("webViewBorderStyleDashed")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('14%')
+          .height('100%')
+          .borderStyle(BorderStyle.Solid)
+          .fileAccess(this.fileAccess)
+          .key("webViewBorderStyleSolid")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+
+        Divider().width("3%")
+
+        Web({ src:  $rawfile('index.html'), controller:null })
+          .width('14%')
+          .height('100%')
+          .borderStyle(BorderStyle.Dotted)
+          .fileAccess(this.fileAccess)
+          .key("webViewBorderStyleDotted")
+          .onErrorReceive((event?: {
+            request: WebResourceRequest,
+            error: WebResourceError
+          }) => {
+            console.log("onErrorReceive: errCode -- " + event.error.getErrorCode() +";errInfo -- " + event.error.getErrorInfo())
+          })
+          .onHttpErrorReceive((event?: {
+            request: WebResourceRequest,
+            response: WebResourceResponse
+          }) => {
+            console.log("onHttpErrorReceive: message -- " + event.response.getReasonMessage()
+            +";code -- " + event.response.getResponseCode()
+            +";data -- " + event.response.getResponseData()
+            +";enCoding -- " + event.response.getResponseEncoding()
+            +";header -- " + JSON.stringify(event.response.getResponseHeader())
+            +";mimeType -- " +event.response.getResponseMimeType())
+          })
+      }
+      .width("100%")
+      .height("30%")
+
+    }.width('100%')
+    .height('100%').backgroundColor("#ff0000")
+  }
+}
\ No newline at end of file