From c5d9f5e6c3d3fb0883cada46b6bf2891676c962e Mon Sep 17 00:00:00 2001
From: Andrea Verlicchi <andrea.verlicchi@gmail.com>
Date: Tue, 2 Apr 2024 17:30:05 +0200
Subject: [PATCH] Testing background images

---
 tests/e2e/background_image.spec.js | 40 ++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 tests/e2e/background_image.spec.js

diff --git a/tests/e2e/background_image.spec.js b/tests/e2e/background_image.spec.js
new file mode 100644
index 0000000..ee48c6d
--- /dev/null
+++ b/tests/e2e/background_image.spec.js
@@ -0,0 +1,40 @@
+import { expect, test } from "@playwright/test";
+
+const pagesWithSimpleImages = [
+  { url: "/demos/background_images.html", description: "Background images" }
+];
+
+for (const { url, description } of pagesWithSimpleImages) {
+  test(description, async ({ page }) => {
+    await page.goto(url);
+    const lazyElements = await page.locator(".lazy");
+    await page.waitForLoadState("load");
+    const elementsCount = await lazyElements.count();
+
+    const devicePixelRatio = await page.evaluate(() => window.devicePixelRatio);
+
+    // Eventually scroll into view and check if it loads
+    for (let i = 0; i < elementsCount; i++) {
+      const element = lazyElements.nth(i);
+      await element.scrollIntoViewIfNeeded();
+
+      // Check the src attribute
+      const expectedBg = await element.getAttribute("data-bg");
+      const expectedHiDpiBg = await element.getAttribute("data-bg-hidpi");
+
+      if (!expectedHiDpiBg) {
+        await expect(element).toHaveAttribute("style", `background-image: url("${expectedBg}");`);
+        continue;
+      }
+
+      if (devicePixelRatio === 1) {
+        await expect(element).toHaveAttribute("style", `background-image: url("${expectedBg}");`);
+      } else {
+        await expect(element).toHaveAttribute(
+          "style",
+          `background-image: url("${expectedHiDpiBg}");`
+        );
+      }
+    }
+  });
+}