添加 transform-origin 测试例

pages.json

@@ -1890,6 +1890,15 @@
         "navigationBarTitleText": "openAppAuthorizeSetting | 跳转系统授权管理页"
       }
     }
+    // #ifdef APP-ANDROID || APP-IOS || WEB || MP-WEIXIN
+    ,
+    {
+    	"path": "pages/CSS/transform/transform-origin",
+    	"style": {
+    		"navigationBarTitleText": "transform-origin"
+    	}
+    }
+    // #endif
 	],
 	"subPackages": [
 		{

pages/CSS/transform/transform-origin.test.js

+const PAGE_PATH = '/pages/CSS/transform/transform-origin'
+
+describe('transform-origin-test', () => {
+  const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+  const isAndroid = platformInfo.startsWith('android')
+  const isIOS = platformInfo.startsWith('ios')
+  const isMP = platformInfo.startsWith('mp')
+  const isWeb = platformInfo.startsWith('web')
+
+  if (
+    isWeb ||
+    isMP
+  ) {
+    it('other platform', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+
+  if (process.env.UNI_TEST_DEVICES_DIRECTION == 'landscape') {
+    it('跳过横屏模式', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500);
+  })
+
+
+  it('transform-origin-test', async () => {
+
+    let iconRect = await page.data('iconRect')
+    let x = 100
+    let y = 160
+
+    await program.tap({x: x, y: y})
+
+    await page.waitFor(500);
+    const image = await program.screenshot({
+      fullPage: true
+    })
+    expect(image).toSaveImageSnapshot()
+
+  })
+})

pages/CSS/transform/transform-origin.uvue

+<template>
+  <view style="flex:1">
+    <view ref="transformView" class="view" @click="changetransform"></view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      changetransform() {
+        var element = this.$refs["transformView"] as UniElement | null
+
+        if (this.count == 0) {
+          element?.style.setProperty("transform-origin", "60px 60px")
+          element?.style.setProperty("transform", "scale(1)")
+        }
+        else if (this.count == 1) {
+          element?.style.setProperty("transform-origin", "100% 0%")
+          element?.style.setProperty("transform", "rotate(-20deg)")
+        }
+
+        this.count++
+      }
+    }
+  }
+</script>
+
+<style>
+  .view {
+    width: 100px;
+    height: 100px;
+    transform-origin: 10px 10px;
+    background-color: aqua;
+    transform: translate(50px, 50px) scale(2);
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+  }
+</style>

pages/CSS/transform/translate.uvue

@@ -26,7 +26,10 @@
     <view class="base transform" style="transform: translate(-50%, 50%)">
       <text>translate(-50%,50%)</text>
       <text>转变后位置</text>
-    </view>
+    </view>
+    <navigator style="top: 100px; width: 80%;" url="/pages/CSS/transform/transform-origin">
+      <button type="primary">transform-origin</button>
+    </navigator>
   </scroll-view>
 </template>