From bcd8d6acdc9e677211df8ac77abd40ec9a5f198b Mon Sep 17 00:00:00 2001
From: Andrea Verlicchi <andrea.verlicchi@gmail.com>
Date: Tue, 2 Apr 2024 17:50:56 +0200
Subject: [PATCH] Testing multi bg

---
 demos/background_images_multi.html       | 167 +++++++++++------------
 tests/e2e/background_image_multi.spec.js |  39 ++++++
 2 files changed, 119 insertions(+), 87 deletions(-)
 create mode 100644 tests/e2e/background_image_multi.spec.js
diff --git a/demos/background_images_multi.html b/demos/background_images_multi.html
index 7a25617..2c80a7f 100644
--- a/demos/background_images_multi.html
+++ b/demos/background_images_multi.html
@@ -2,9 +2,7 @@
 <html>
   <head lang="en">
     <meta charset="UTF-8" />
-    <title>
-      Multiple background images - Lazyload demos
-    </title>
+    <title>Multiple background images - Lazyload demos</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
       ul,
@@ -37,23 +35,23 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44721746jj.html"
-            data-bg-multi="url('./images/220x280-01.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-01.webp')"
+            data-bg-multi='url("./images/220x280-01.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-01.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/open-toe_cod44740806jx.html"
-            data-bg-multi="url('./images/220x280-02.webp')"
+            data-bg-multi='url("./images/220x280-02.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html"
-            data-bg-multi="url('./images/220x280-L-03.webp'),url('./images/440x560-R-03.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-03.webp'),url('./images/440x560-R-03.webp')"
+            data-bg-multi='url("./images/220x280-L-03.webp"), url("./images/440x560-R-03.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-03.webp"), url("./images/440x560-R-03.webp")'
             class="multiple"
           ></a>
         </li>
@@ -61,22 +59,22 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"
-            data-bg-multi="url('./images/220x280-03.webp')"
+            data-bg-multi='url("./images/220x280-03.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html"
-            data-bg-multi="url('./images/220x280-04.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-04.webp')"
+            data-bg-multi='url("./images/220x280-04.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-04.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"
-            data-bg-multi="url('./images/220x280-L-05.webp'),url('./images/440x560-R-05.webp')"
+            data-bg-multi='url("./images/220x280-L-05.webp"), url("./images/440x560-R-05.webp")'
             class="multiple"
           ></a>
         </li>
@@ -84,24 +82,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html"
-            data-bg-multi="url('./images/220x280-06.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-06.webp')"
+            data-bg-multi='url("./images/220x280-06.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-06.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"
-            data-bg-multi="url('./images/220x280-07.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-07.webp')"
+            data-bg-multi='url("./images/220x280-07.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-07.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivali_cod44736534fq.html"
-            data-bg-multi="url('./images/220x280-L-08.webp'),url('./images/440x560-R-08.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-08.webp'),url('./images/440x560-R-08.webp')"
+            data-bg-multi='url("./images/220x280-L-08.webp"), url("./images/440x560-R-08.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-08.webp"), url("./images/440x560-R-08.webp")'
             class="multiple"
           ></a>
         </li>
@@ -109,24 +107,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/stivali_cod44735388ui.html"
-            data-bg-multi="url('./images/220x280-09.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-09.webp')"
+            data-bg-multi='url("./images/220x280-09.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-09.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44739165ev.html"
-            data-bg-multi="url('./images/220x280-10.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-10.webp')"
+            data-bg-multi='url("./images/220x280-10.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-10.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44739454hf.html"
-            data-bg-multi="url('./images/220x280-L-11.webp'),url('./images/440x560-R-11.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-11.webp'),url('./images/440x560-R-11.webp')"
+            data-bg-multi='url("./images/220x280-L-11.webp"), url("./images/440x560-R-11.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-11.webp"), url("./images/440x560-R-11.webp")'
             class="multiple"
           ></a>
         </li>
@@ -134,24 +132,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/stivali_cod44719480km.html"
-            data-bg-multi="url('./images/220x280-12.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-12.webp')"
+            data-bg-multi='url("./images/220x280-12.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-12.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44719687td.html"
-            data-bg-multi="url('./images/220x280-13.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-13.webp')"
+            data-bg-multi='url("./images/220x280-13.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-13.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/decollete_cod44721899ng.html"
-            data-bg-multi="url('./images/220x280-L-14.webp'),url('./images/440x560-R-14.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-14.webp'),url('./images/440x560-R-14.webp')"
+            data-bg-multi='url("./images/220x280-L-14.webp"), url("./images/440x560-R-14.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-14.webp"), url("./images/440x560-R-14.webp")'
             class="multiple"
           ></a>
         </li>
@@ -159,24 +157,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/mocassini_cod44721744sl.html"
-            data-bg-multi="url('./images/220x280-15.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-15.webp')"
+            data-bg-multi='url("./images/220x280-15.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-15.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44716730kr.html"
-            data-bg-multi="url('./images/220x280-16.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-16.webp')"
+            data-bg-multi='url("./images/220x280-16.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-16.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/decollete_cod44718734xl.html"
-            data-bg-multi="url('./images/220x280-L-17.webp'),url('./images/440x560-R-17.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-17.webp'),url('./images/440x560-R-17.webp')"
+            data-bg-multi='url("./images/220x280-L-17.webp"), url("./images/440x560-R-17.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-17.webp"), url("./images/440x560-R-17.webp")'
             class="multiple"
           ></a>
         </li>
@@ -184,24 +182,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/decollete_cod44721796uk.html"
-            data-bg-multi="url('./images/220x280-18.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-18.webp')"
+            data-bg-multi='url("./images/220x280-18.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-18.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/francesine_cod44717679mj.html"
-            data-bg-multi="url('./images/220x280-19.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-19.webp')"
+            data-bg-multi='url("./images/220x280-19.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-19.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44724594vu.html"
-            data-bg-multi="url('./images/220x280-L-20.webp'),url('./images/440x560-R-20.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-20.webp'),url('./images/440x560-R-20.webp')"
+            data-bg-multi='url("./images/220x280-L-20.webp"), url("./images/440x560-R-20.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-20.webp"), url("./images/440x560-R-20.webp")'
             class="multiple"
           ></a>
         </li>
@@ -209,24 +207,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/decollete_cod44726148aq.html"
-            data-bg-multi="url('./images/220x280-21.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-21.webp')"
+            data-bg-multi='url("./images/220x280-21.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-21.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/mocassini_cod44719629nt.html"
-            data-bg-multi="url('./images/220x280-22.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-22.webp')"
+            data-bg-multi='url("./images/220x280-22.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-22.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/mocassini_cod44725329kq.html"
-            data-bg-multi="url('./images/220x280-L-23.webp'),url('./images/440x560-R-23.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-23.webp'),url('./images/440x560-R-23.webp')"
+            data-bg-multi='url("./images/220x280-L-23.webp"), url("./images/440x560-R-23.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-23.webp"), url("./images/440x560-R-23.webp")'
             class="multiple"
           ></a>
         </li>
@@ -234,24 +232,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/stivali_cod44724026qs.html"
-            data-bg-multi="url('./images/220x280-24.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-24.webp')"
+            data-bg-multi='url("./images/220x280-24.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-24.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44720256gw.html"
-            data-bg-multi="url('./images/220x280-25.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-25.webp')"
+            data-bg-multi='url("./images/220x280-25.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-25.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44722062id.html"
-            data-bg-multi="url('./images/220x280-L-26.webp'),url('./images/440x560-R-26.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-26.webp'),url('./images/440x560-R-26.webp')"
+            data-bg-multi='url("./images/220x280-L-26.webp"), url("./images/440x560-R-26.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-26.webp"), url("./images/440x560-R-26.webp")'
             class="multiple"
           ></a>
         </li>
@@ -259,24 +257,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/mocassini_cod44722402rh.html"
-            data-bg-multi="url('./images/220x280-27.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-27.webp')"
+            data-bg-multi='url("./images/220x280-27.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-27.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44726296vu.html"
-            data-bg-multi="url('./images/220x280-28.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-28.webp')"
+            data-bg-multi='url("./images/220x280-28.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-28.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44725755ct.html"
-            data-bg-multi="url('./images/220x280-L-29.webp'),url('./images/440x560-R-29.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-29.webp'),url('./images/440x560-R-29.webp')"
+            data-bg-multi='url("./images/220x280-L-29.webp"), url("./images/440x560-R-29.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-29.webp"), url("./images/440x560-R-29.webp")'
             class="multiple"
           ></a>
         </li>
@@ -284,24 +282,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44725348nv.html"
-            data-bg-multi="url('./images/220x280-30.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-30.webp')"
+            data-bg-multi='url("./images/220x280-30.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-30.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44721879xx.html"
-            data-bg-multi="url('./images/220x280-31.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-31.webp')"
+            data-bg-multi='url("./images/220x280-31.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-31.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/cuissardes_cod44729472iq.html"
-            data-bg-multi="url('./images/220x280-L-32.webp'),url('./images/440x560-R-32.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-32.webp'),url('./images/440x560-R-32.webp')"
+            data-bg-multi='url("./images/220x280-L-32.webp"), url("./images/440x560-R-32.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-32.webp"), url("./images/440x560-R-32.webp")'
             class="multiple"
           ></a>
         </li>
@@ -309,24 +307,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/decollete_cod44725388jv.html"
-            data-bg-multi="url('./images/220x280-33.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-33.webp')"
+            data-bg-multi='url("./images/220x280-33.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-33.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/stivaletti_cod44721854ce.html"
-            data-bg-multi="url('./images/220x280-34.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-34.webp')"
+            data-bg-multi='url("./images/220x280-34.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-34.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html"
-            data-bg-multi="url('./images/220x280-L-35.webp'),url('./images/440x560-R-35.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-35.webp'),url('./images/440x560-R-35.webp')"
+            data-bg-multi='url("./images/220x280-L-35.webp"), url("./images/440x560-R-35.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-35.webp"), url("./images/440x560-R-35.webp")'
             class="multiple"
           ></a>
         </li>
@@ -334,24 +332,24 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/mocassini_cod44727501hh.html"
-            data-bg-multi="url('./images/220x280-36.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-36.webp')"
+            data-bg-multi='url("./images/220x280-36.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-36.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html"
-            data-bg-multi="url('./images/220x280-37.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-37.webp')"
+            data-bg-multi='url("./images/220x280-37.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-37.webp")'
           ></a>
         </li>
         <li>
           <a
             class="lazy"
             href="#/it/donna/mocassini_cod44704882bq.html"
-            data-bg-multi="url('./images/220x280-L-38.webp'),url('./images/440x560-R-38.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-L-38.webp'),url('./images/440x560-R-38.webp')"
+            data-bg-multi='url("./images/220x280-L-38.webp"), url("./images/440x560-R-38.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-L-38.webp"), url("./images/440x560-R-38.webp")'
             class="multiple"
           ></a>
         </li>
@@ -359,8 +357,8 @@ <h1>Multiple background images demo</h1>
           <a
             class="lazy"
             href="#/it/donna/mocassini_cod44734002vc.html"
-            data-bg-multi="url('./images/220x280-39.webp')"
-            data-bg-multi-hidpi="url('./images/440x560-39.webp')"
+            data-bg-multi='url("./images/220x280-39.webp")'
+            data-bg-multi-hidpi='url("./images/440x560-39.webp")'
           ></a>
         </li>
       </ul>
@@ -368,11 +366,7 @@ <h1>Multiple background images demo</h1>
     <script src="../dist/lazyload.min.js"></script>
     <script>
       function logElementEvent(eventName, element) {
-        console.log(
-          Date.now(),
-          eventName,
-          element.getAttribute("data-bg-multi")
-        );
+        console.log(Date.now(), eventName, element.getAttribute("data-bg-multi"));
       }
 
       var callback_enter = function (element) {
@@ -392,8 +386,7 @@ <h1>Multiple background images demo</h1>
       };
       var callback_error = function (element) {
         logElementEvent("💀 ERROR", element);
-        element.style.backgroundImage =
-          "url('./images/440x560-Error.webp')";
+        element.style.backgroundImage = "url(&quot;./images/440x560-Error.webp&quot;)";
       };
       var callback_finish = function () {
         logElementEvent("✔️ FINISHED", document.documentElement);
diff --git a/tests/e2e/background_image_multi.spec.js b/tests/e2e/background_image_multi.spec.js
new file mode 100644
index 0000000..6d129bb
--- /dev/null
+++ b/tests/e2e/background_image_multi.spec.js
@@ -0,0 +1,39 @@
+import { expect, test } from "@playwright/test";
+
+const pagesWithSimpleImages = [
+  { url: "/demos/background_images_multi.html", description: "Multiple 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();
+
+      // Set expectations
+      const expectedBg = `background-image: ${await element.getAttribute("data-bg-multi")};`;
+      const expectedHiDpiBg = `background-image: ${await element.getAttribute(
+        "data-bg-multi-hidpi"
+      )};`;
+
+      if (!expectedHiDpiBg) {
+        await expect(element).toHaveAttribute("style", expectedBg);
+        continue;
+      }
+
+      if (devicePixelRatio > 1) {
+        await expect(element).toHaveAttribute("style", expectedHiDpiBg);
+      } else {
+        await expect(element).toHaveAttribute("style", expectedBg);
+      }
+    }
+  });
+}
