From e4bc2bbf7ab4d9b837cc4ac34737c060678d6442 Mon Sep 17 00:00:00 2001 From: dongwei Date: Tue, 8 Mar 2022 18:05:18 +0800 Subject: [PATCH] add test cases Signed-off-by: dongwei --- .../js/default/pages/canvas/prop/index.css | 358 ++++++++++ .../js/default/pages/canvas/prop/index.hml | 174 +++++ .../js/default/pages/canvas/prop/index.js | 109 +++ .../pages/canvas/{ => router}/index.css | 3 +- .../pages/canvas/{ => router}/index.hml | 21 +- .../pages/canvas/{ => router}/index.js | 44 ++ .../js/default/pages/canvas/style/index.css | 623 ++++++++++++++++++ .../js/default/pages/canvas/style/index.hml | 235 +++++++ .../js/default/pages/canvas/style/index.js | 19 + .../js/default/pages/divider/prop/index.css | 42 +- .../js/default/pages/divider/prop/index.hml | 25 + .../js/default/pages/divider/style/index.css | 53 +- .../js/default/pages/divider/style/index.hml | 22 +- .../js/default/pages/divider/style/index.js | 5 - 14 files changed, 1662 insertions(+), 71 deletions(-) create mode 100644 ace/ace_standard/src/main/js/default/pages/canvas/prop/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/canvas/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/canvas/prop/index.js rename ace/ace_standard/src/main/js/default/pages/canvas/{ => router}/index.css (99%) rename ace/ace_standard/src/main/js/default/pages/canvas/{ => router}/index.hml (94%) rename ace/ace_standard/src/main/js/default/pages/canvas/{ => router}/index.js (91%) create mode 100644 ace/ace_standard/src/main/js/default/pages/canvas/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/canvas/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/canvas/style/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/prop/index.css b/ace/ace_standard/src/main/js/default/pages/canvas/prop/index.css new file mode 100644 index 000000000..fb49407bb --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/prop/index.css @@ -0,0 +1,358 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + flex-weight: 1; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + flex-weight: 1; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + flex-weight: 1; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + flex-weight: 1; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + flex-weight: 1; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + flex-weight: 1; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + flex-weight: 1; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + flex-weight: 1; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + flex-weight: 1; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + flex-weight: 1; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + flex-weight: 1; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + flex-weight: 1; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + flex-weight: 1; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + flex-weight: 1; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + flex-weight: 1; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + flex-weight: 1; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + flex-weight: 1; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + flex-weight: 1; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + flex-weight: 1; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropFalse { + flex-weight: 1; + background-color:#00ffff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropNone { + flex-weight: 1; + background-color:#00000d; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + flex-weight: 1; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +.propNewAdd{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/canvas/prop/index.hml new file mode 100644 index 000000000..f8dcc05d4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/prop/index.hml @@ -0,0 +1,174 @@ + + +
+
+ + canvas通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + + + + + + + + + 通用属性 -- style + + + + + + 通用属性 -- ref + + + + + + + + 通用属性 -- disabled + + + + + + + + + + 通用属性 -- focusable + + + + + + + + + + 通用属性 -- data-* + + + + + + + + 通用属性 -- dir + + + + + + + + + + + + 渲染属性 -- for + + + + + + + + + + 渲染属性 -- if + + + + + + 渲染属性 -- show + + + + + + + +
+ +
+
+
+ + canvas特有属性 + + + + 特有属性 -- tid + + + + + + + 特有属性 -- elif + + + + + + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/prop/index.js b/ace/ace_standard/src/main/js/default/pages/canvas/prop/index.js new file mode 100644 index 000000000..f69a618c6 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/prop/index.js @@ -0,0 +1,109 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; + +export default { + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + ifPropFalse : null, + ifPropNone : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null + }, + + onShow(){ + this.getCommonPropValues(); + globalThis.value = { + idProp : this.idProp, + classProp : this.classProp, + classPropNone : this.classPropNone, + styleProp : this.styleProp, + refProp : this.refProp, + refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, + disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, + focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, + focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, + dataPropNone : this.dataPropNone, + dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, + dirPropNone : this.dirPropNone, + forPropNull : this.forPropNull, + forPropOne : this.forPropOne, + forPropThree : this.forPropThree, + ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, + showPropFalse : this.showPropFalse, + showPropNone : this.showPropNone + } + }, + + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, +} diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.css b/ace/ace_standard/src/main/js/default/pages/canvas/router/index.css similarity index 99% rename from ace/ace_standard/src/main/js/default/pages/canvas/index.css rename to ace/ace_standard/src/main/js/default/pages/canvas/router/index.css index 49d51183a..b301035ea 100644 --- a/ace/ace_standard/src/main/js/default/pages/canvas/index.css +++ b/ace/ace_standard/src/main/js/default/pages/canvas/router/index.css @@ -271,10 +271,9 @@ } .event4{ - flex-direction: row; width: 90%; flex-weight: 1; - overflow:scroll; + background-color: #00ee00; } .event5{ diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.hml b/ace/ace_standard/src/main/js/default/pages/canvas/router/index.hml similarity index 94% rename from ace/ace_standard/src/main/js/default/pages/canvas/index.hml rename to ace/ace_standard/src/main/js/default/pages/canvas/router/index.hml index 929efb068..47b9601fc 100644 --- a/ace/ace_standard/src/main/js/default/pages/canvas/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/canvas/router/index.hml @@ -22,30 +22,30 @@ canvas通用样式1 - + canvas通用样式2 - + canvas通用样式3 - + canvas通用样式4 - + canvas通用样式5
- + - +
@@ -80,6 +80,11 @@ ondragover="dragOver" ondragleave="dragLeave" ondrop="drop"> + + canvas特有事件4 + + + @@ -102,7 +107,7 @@ canvas通用属性2 - @@ -110,7 +115,7 @@ canvas通用属性3 - + diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.js b/ace/ace_standard/src/main/js/default/pages/canvas/router/index.js similarity index 91% rename from ace/ace_standard/src/main/js/default/pages/canvas/index.js rename to ace/ace_standard/src/main/js/default/pages/canvas/router/index.js index 41cf7b9b6..b143cf498 100644 --- a/ace/ace_standard/src/main/js/default/pages/canvas/index.js +++ b/ace/ace_standard/src/main/js/default/pages/canvas/router/index.js @@ -97,6 +97,44 @@ export default { prompt.showToast({ message: 'prop1--' + name1 + '\nprop2--' + name2 }); + + var styleValues = this.getStyleValues(); + var propsValues = this.getPropValues(); + + globalThis.value = { + styleValues: styleValues, + propsValues: propsValues + } + }, + + getStyleValues(){ + var styleValue1 = this.$element("style1").getInspector() + var styleValue2 = this.$element("style2").getInspector() + var styleValue3 = this.$element("style3").getInspector() + var styleValue4 = this.$element("style4").getInspector() + var styleValue5 = this.$element("style5").getInspector() + var styleValue6 = this.$element("style6").getInspector() + + return { + style1:styleValue1, + style2:styleValue2, + style3:styleValue3, + style4:styleValue4, + style5:styleValue5, + style6:styleValue6 + } + }, + + getPropValues(){ + var propValue1 = this.$element("prop1").getInspector() + var propValue2 = this.$element("prop2").getInspector() + var propValue3 = this.$element("prop3").getInspector() + + return { + prop1:propValue1, + prop2:propValue2, + prop3:propValue3 + } }, touchStart(event){ @@ -462,4 +500,10 @@ export default { message: 'function5 dataURL:' + dataURL }); }, + + handleAccessibility(event) { + if(event.eventType === 1) { + console.log('handleAccessibility:' + JSON.stringify(event)) + } + }, } \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/style/index.css b/ace/ace_standard/src/main/js/default/pages/canvas/style/index.css new file mode 100644 index 000000000..2fe6e6973 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/style/index.css @@ -0,0 +1,623 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +#styleOne{ + width: 150px; + height: 20px; + padding-top: 1px; + padding-left: 2px; + padding-right: 3px; + padding-bottom: 0.5px; + margin-left: 1px; + margin-top: 2px; + margin-right: 1.5px; + margin-bottom: 0.5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dotted; + border-bottom-style: solid; + border-left-width: 1px; + border-right-width: 1.5px; + border-top-width: 2px; + border-bottom-width: 0.5px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 0px; + opacity: 0.5; + align-self:flex-end; +} + +#styleTwo{ + width: 150px; + height: 20px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleThree{ + width: 50px; + height: 20px; + padding: 2px; + margin:1px; + border-left: 1px solid #ff0000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + opacity: 1; + align-self:baseline; +} + +#styleFour{ + width: 50px; + height: 20px; + align-self:center; + border: 2px solid #00ff00; +} + +#styleFive{ + width: 150px; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleSix{ + width: 100%; + height: 2%; + background-color: #ff0000; + padding-top: 1%; + padding-left: 2%; + padding-right: 3%; + padding-bottom: 0.5%; + margin-left: 1%; + margin-top: 2%; + margin-right: 1.5%; + margin-bottom: 0.5%; +} + +#styleSeven{ + width: 70%; + height: 1%; + padding-start: 1%; + padding-end: 2%; + margin-start: 1%; + margin-end: 2%; + background-color: #00ff00; +} + +#styleEight{ + width: 60%; + height: 1%; + margin: 1%; + padding: 2%; + background-color: #0000ff; +} + +#styleNine{ + width: 100%; + height: 40px; + display:flex; +} + +#styleFive{ + width: 100%; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleTen{ + width: 100%; + height: 400%; + display: none; + background-color: #ff0000; +} + +#styleEleven{ + height: 40%; + background-color: #00ff00; + flex:1 1 20px; + z-index:10; +} + +#styleTwelve{ + height: 50%; + background-color: #ff00ff; + flex-grow:2; + flex-shrink: 3; + flex-basis: 30px; + z-index:13; +} + +#styleThirteen{ + position: absolute; + left: 10px; + top: 20px; + width: 10px; + height: 10px; + background-color: #00ff00; + z-index:12; +} + +#styleFourteen{ + position: absolute; + right: 10px; + bottom: 20px; + width: 10px; + height: 10px; + background-color: #0000ff; + z-index:3; +} + +#styleFifteen{ + position: absolute; + left: 10%; + top: 20%; + width: 10px; + height: 10px; + background-color: #fff000; + z-index:5; +} + +#styleSixteen{ + position: absolute; + right: 10%; + bottom: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:15; +} + +#styleSeventeen{ + position: absolute; + start: 50px; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:7; +} + +#styleEighteen{ + position: absolute; + end: 20px; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:4; +} + +#styleNineteen{ + position: absolute; + start: 20%; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:1; +} + +#styleTwenty{ + position: absolute; + end: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:17; +} + +#styleTwentyOne{ + height: 20px; + box-shadow: 2px 4px; + flex-weight: 1; + margin:5px; +} + +#styleTwentyTwo{ + flex-weight: 1; + height: 20px; + box-shadow: 2px 4px 6px 8px; + margin:5px; +} + +#styleTwentyThree{ + flex-weight: 1; + height: 20px; + box-shadow: 1px 2px 3px 4px #ff0000; + margin:5px; +} + +#styleTwentyFour{ + width: 150px; + height: 20px; + background-color: #00ffff; + clip-path:inset(2 23); + visibility: visible; +} + +#styleTwentyFive{ + width: 150px; + height: 20px; + background-color: #00ffff; + visibility: hidden; +} + +#styleTwentySix{ + width: 150px; + height: 20px; + background-color: #999999; +} + +#styleTwentySeven{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); +} + +#styleTwentyNine{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:contain; + background-repeat: repeat-x; + background-position: center; +} + +#styleThirty{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:50px 10px; + background-repeat: no-repeat; + background-position: 10px 10px; +} + +#styleThirtyOne{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:10% 20%; + background-repeat: repeat; + background-position: 30% 40%; + mask-image:linear-gradient(pink,#fff000); +} + +#styleThirtyTwo{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#specificOne{ + width: 70px; + height: 25px; + flex-direction: row; + flex-wrap:nowrap; +} + +#specificTwo{ + width: 100%; + height: 50px; + flex-direction: column; + flex-wrap:wrap; + justify-content:flex-start; + align-items: flex-start; + align-content: flex-start; +} + +#specificThree{ + width: 18%; + height: 48%; + border: 1px solid pink; + flex-direction: row; + justify-content:flex-end; + align-items: flex-end; + align-content: flex-end; + margin: 1%; +} + +#specificFour{ + width: 18%; + height: 48%; + border: 1px solid pink; + flex-direction: row; + justify-content:center; + align-items: center; + align-items: center; + margin: 1%; +} + +#specificFive{ + width: 18%; + height: 48%; + border: 1px solid pink; + flex-direction: row; + justify-content:space-between; + align-items:stretch; + align-content: space-between; + margin: 1%; +} + +#specificSix{ + width: 18%; + height: 48%; + border: 1px solid pink; + flex-direction: row; + justify-content:space-around; + align-items: baseline; + align-content: space-around; + margin: 1%; +} + +#specificSeven{ + width: 50px; + height: 10px; + background-color: #ff0000; + overflow: hidden; +} + +#specificEight{ + width: 70px; + height: 10px; + background-color: #00ff00; + overflow: visible; + margin-left: 10px; +} + +#specificNine{ + width: 100%; + height: 50px; + margin-top: 10px; + overflow: scroll; + flex-direction: column; + scrollbar-color:#ff0000; + scrollbar-width:2px; + overscroll-effect:spring; +} + +#specificTen{ + width: 100%; + height: 10px; + margin-top: 10px; + overflow: scroll; + scrollbar-color:#ff0000; + scrollbar-width:2px; + overscroll-effect:fade; +} + +#specificEleven{ + width: 100%; + height: 10px; + margin-top: 10px; + overflow: scroll; + scrollbar-color:#ff0000; + scrollbar-width:2px; + overscroll-effect:none; +} + +#specificTwelve{ + width: 100%; + height: 30px; + display: grid; + background-color: #000fff; + grid-template-rows: 50px 100px 60px; + grid-rows-gap:10px; + grid-row-start: 1; + grid-row-end: 2; + grid-auto-flow:row; +} + +#specificThirteen{ + width: 100%; + height: 30px; + background-color: #fff000; + display: grid; + grid-template-columns: 50px 100px 60px; + grid-columns-gap:10px; + grid-column-start: 1; + grid-column-end: 2; + grid-auto-flow:column; +} + +.flex-item{ + width: 40%; + height: 10px; +} + +.red-item{ + background-color: #ff0000; +} + +.green-item{ + background-color: #00ff00; +} + +.blue-item{ + background-color: #0000ff; +} + +.yellow-item{ + background-color: #fff000; +} + + +#addOne{ + width: 10%; + height: 20px; + background-image:url('common/images/image.png'); + background-size:cover; + align-self:stretch; + position:fixed; + transform: none; + animation-timing-function:cubic-bezier(0.4, 0.0, 0.4, 1.0); + shared-transition-effect:static; + shared-transition-name:ani; + shared-transition-timing-function:friction; + transition-enter:ani; + transition-exit: ani; + transition-duration:10; + transition-timing-function:friction; + clip-path:border-box; + display-index:1; + filter:blur(10px); + backdrop-filter:blur(10px); + window-filter:blur(10%); +} + +#addTwo{ + width: 100px; + height: 15px; + background-image:url('common/images/image.png'); + background-size:auto; + position:relative; + transform: matrix(0.5,0.1,0.2,0.9,20,10); + animation-timing-function:steps(4); + shared-transition-effect:exchange; + clip-path:padding-box; +} + +#addThree{ + width: 100px; + height: 15px; + background-color:#000000; + transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2); + clip-path:content-box; +} + +#addFour{ + width: 100px; + height: 15px; + background-color:#000000; + transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px); + clip-path:circle(1); +} + +#addFive{ + width: 100px; + height: 15px; + background-color:#000000; + transform: translateY(1px) translateZ(10px) + scale(1,2) scaleZ(0.4) + rotateX(10deg) rotateY(10deg) rotateZ(10deg) + skewX(1deg) skewY(2deg); + clip-path:ellipse(1); +} + +#addSix{ + width: 100px; + height: 15px; + background-color:#000000; + transform: scaleX(1) scaleY(0.4); + clip-path:ellipse(1) +} + +#addSeven{ + width: 100px; + height: 15px; + background-color:#000000; + clip-path:path(1); + aspect-ratio:2; +} + +#addSeven:disabled{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +#addSeven:active{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +#addSeven:focus{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); +} + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} + diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/style/index.hml b/ace/ace_standard/src/main/js/default/pages/canvas/style/index.hml new file mode 100644 index 000000000..4d27ec9a0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/style/index.hml @@ -0,0 +1,235 @@ + + +
+
+ + canvas通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + + + + + + + + + + + + + + + + + + + + 通用样式9-20 \n display flex z-index position + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + 通用样式21-23 box-shadow + +
+ + + + + + +
+ + + 通用样式23-25 visibility clip-path + + + + + + + + 通用样式26-31 background + + + + + + + + + + + + + + 通用样式32 clip-path image-fill mask-image + + + +
+
+
+
+ + canvas特有样式 + + + + 特有样式 flex-direction flex-wrap justify-content align-items align-content + +
+ + + + + + +
+
+
+ + +
+
+ + + +
+
+ + + + +
+
+ + 文本 + + + +
+
+ + + 特有样式 overflow scrollbar-color scrollbar-width overscroll-effect + +
+
+ +
+
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ + + 特有样式 grid + + + + + + +
+ + 补充样式 + + + + + + + + + + + + + + + +
+ + +
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/style/index.js b/ace/ace_standard/src/main/js/default/pages/canvas/style/index.js new file mode 100644 index 000000000..8179ff70c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/style/index.js @@ -0,0 +1,19 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export default { + + +} diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css index 6ffcda0b1..6b91fe8ed 100644 --- a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css +++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css @@ -349,7 +349,7 @@ divider { } #verticalTrue { height: 10px; - background-color:#c00000; + background-color:#990000; width: 100%; margin-left: 10px; margin-right: 10px; @@ -364,4 +364,44 @@ divider { margin-right: 10px; padding-start: 10px; padding-end: 10px; +} +#focusableTrue { + height: 10px; + background-color:#00ffff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#focusableFalse { + height: 10px; + background-color:#e00099; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +.divider { + height: 20px; + background-color:#e00099; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +.test-div { + width: 100%; + height: 20px; + background-color: pink; + margin: 10px; +} +.test-divider { + height: 20px; + margin: 4px; + width: 50%; + padding: 4px; + color: rebeccapurple; } \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml index 91d52805f..0fd3c7486 100644 --- a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml @@ -52,6 +52,12 @@ + + 通用属性 -- data + + + 通用属性 -- data-* @@ -114,6 +120,9 @@ + + + 渲染属性 -- show @@ -139,5 +148,21 @@ + + divider特有属性 -- divider + + + + + + + divider特有属性 -- tid + + + diff --git a/ace/ace_standard/src/main/js/default/pages/divider/style/index.css b/ace/ace_standard/src/main/js/default/pages/divider/style/index.css index 29a6c8679..4207bd1b7 100644 --- a/ace/ace_standard/src/main/js/default/pages/divider/style/index.css +++ b/ace/ace_standard/src/main/js/default/pages/divider/style/index.css @@ -41,44 +41,25 @@ flex-direction: column; width: 50%; } -.style-box { + +.style1 { + height: 30px; + background-color: yellow; + margin: 10px; padding: 10px; - background-color: blue; - margin-bottom: 10px; -} -divider { - stroke-width: 3px; -} -#style1 { - margin: 1px 2px 3px 4px; - color: greenyellow; - stroke-width: 3px; + color: red; + stroke-width: 5px; display: flex; visibility: visible; -} -#line-cap { - line-cap: round; - color: greenyellow; - stroke-width: 3px; -} -#lineCapButt { - line-cap: butt; - color: green; -} -#lineCapRound { - line-cap: round; - color: greenyellow; -} -#lineCapSquare { line-cap: square; - color: pink; -} -#flex { - color: pink; - flex-grow: 1; - flex-basis: 20px; - flex-shrink:1 ; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 0; + opacity: 0.5; + border: 1px solid rebeccapurple; + transform: translate(50px); } - - - +.specific-container{ + flex-direction: column; + flex-weight: 1; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/divider/style/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/style/index.hml index 8700b1694..eb3acfef7 100644 --- a/ace/ace_standard/src/main/js/default/pages/divider/style/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/divider/style/index.hml @@ -16,29 +16,13 @@
- divider特有样式 + divider样式 - 特有样式1-5 \n margin、color、stroke-width、display、visibility + 仅支持如下样式 -
- -
- - 特有样式--line-cap - -
- - - -
- - 特有样式--flex - -
- -
+
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/style/index.js b/ace/ace_standard/src/main/js/default/pages/divider/style/index.js index 8179ff70c..336492c87 100644 --- a/ace/ace_standard/src/main/js/default/pages/divider/style/index.js +++ b/ace/ace_standard/src/main/js/default/pages/divider/style/index.js @@ -12,8 +12,3 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -export default { - - -} -- GitLab