From 0985255d72a5325135d5e18c442d9351f2f9d21f Mon Sep 17 00:00:00 2001
From: jixinbao <jixinbao@dcloud.io>
Date: Fri, 23 Aug 2024 20:15:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=20background=20=E6=B5=8B=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/CSS/background/background-image.test.js | 28 ++++++++++-
 pages/CSS/background/background-image.uvue    | 46 +++++++++++++------
 2 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/pages/CSS/background/background-image.test.js b/pages/CSS/background/background-image.test.js
index e2a60d20..59f28507 100644
--- a/pages/CSS/background/background-image.test.js
+++ b/pages/CSS/background/background-image.test.js
@@ -8,14 +8,38 @@ describe('background-image-test', () => {
 
   it('background-image-screenshot', async () => {
     await page.waitFor(300);
-    const image = await program.screenshot({fullPage: true});
+    const image = await program.screenshot({
+      fullPage: true
+    });
     expect(image).toSaveImageSnapshot();
   });
 
   it('background-image-select', async () => {
     await page.callMethod('updateBackgroundSelect')
     await page.waitFor(300);
-    const image = await program.screenshot({fullPage: true});
+    const image = await program.screenshot({
+      fullPage: true
+    });
     expect(image).toSaveImageSnapshot();
   });
+
+  it('动态切换 background color', async () => {
+    await page.callMethod('setBackgroundColor')
+    await page.waitFor(300);
+    const image = await program.screenshot({
+      fullPage: true
+    });
+    expect(image).toSaveImageSnapshot();
+
+  })
+  it('动态切换 background color/image', async () => {
+    await page.callMethod('setBackgroundImage')
+    await page.waitFor(300);
+
+    const image = await program.screenshot({
+      fullPage: true
+    });
+    expect(image).toSaveImageSnapshot();
+
+  })
 });
diff --git a/pages/CSS/background/background-image.uvue b/pages/CSS/background/background-image.uvue
index da5dcd1b..b56356f5 100644
--- a/pages/CSS/background/background-image.uvue
+++ b/pages/CSS/background/background-image.uvue
@@ -2,15 +2,20 @@
   <!-- #ifdef APP -->
   <scroll-view style="flex:1">
   <!-- #endif -->
-		<view>
+    <view>
       <!-- 测试iOS平台宽高为0时，设置渐变色会不会导致闪退 -->
       <view style="width: 0px; height: 0px; background-image: linear-gradient(to bottom,#f5f5f5,#eff2f5);"></view>
-			<text>不支持背景图片，仅支持linear-gradient方法</text>
-				<view v-for="(direction) in directionData">
-					<text>background-image: linear-gradient({{direction}}, red, yellow)</text>
-				<view class="common" :style="{'background-image': backgroundSelect ?'linear-gradient('+direction+', red, yellow)':''}"></view>
+      <text>不支持背景图片，仅支持linear-gradient方法</text>
+      <view v-for="(direction) in directionData">
+        <text>background-image: linear-gradient({{direction}}, red, yellow)</text>
+        <view class="common"
+          :style="{'background-image': backgroundSelect ?'linear-gradient('+direction+', red, yellow)':''}"></view>
       </view>
-		</view>
+      <view>
+        <text>style 动态切换 background</text>
+        <view @click='changeBg' class="common" :style='testStyle'></view>
+      </view>
+    </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -18,24 +23,39 @@
 
 <script>
   export default {
-    data(){
+    data() {
       return {
-        backgroundSelect : true,
-        directionData: ['to right', 'to left', 'to bottom', 'to top', 'to bottom left', 'to bottom right', 'to top left', 'to top right']
+        backgroundSelect: true,
+        directionData: ['to right', 'to left', 'to bottom', 'to top', 'to bottom left', 'to bottom right', 'to top left', 'to top right'],
+        testStyle: "background:linear-gradient(to right, red, yellow)"
       }
     },
     methods: {
       //供自动化测试使用
       updateBackgroundSelect() {
         this.backgroundSelect = !this.backgroundSelect
+      },
+      changeBg() {
+        const isColor = this.testStyle == "background:blue"
+        if (isColor) {
+          this.setBackgroundImage()
+        } else {
+          this.setBackgroundColor()
+        }
+      },
+      setBackgroundColor() {
+        this.testStyle = "background:blue"
+      },
+      setBackgroundImage() {
+        this.testStyle = "background:linear-gradient(to right, red, yellow)"
       }
     }
   }
 </script>
 
 <style>
-	.common {
-		width: 250px;
-		height: 250px;
-	}
+  .common {
+    width: 250px;
+    height: 250px;
+  }
 </style>
-- 
GitLab