Testing background images

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}");`
+        );
+      }
+    }
+  });
+}