fix(curriculum): improve lightbox display tests and allow vw/vh units (freeCodeCamp#65739)

Author: Jeevankumar-s

curriculum/challenges/english/blocks/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md

@@ -131,8 +131,20 @@ assert.equal(new __helpers.CSSHelp(document).getStyle(".lightbox")?.position, "f
 Your `.lightbox` element should cover the entire viewport.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle(".lightbox")?.width, "100%");
-assert.equal(new __helpers.CSSHelp(document).getStyle(".lightbox")?.height, "100%");
+const style = new __helpers.CSSHelp(document).getStyle(".lightbox");
+
+const width = style?.width;
+const height = style?.height;
+
+assert.oneOf(
+  width,
+  ["100%", "100vw"]
+);
+
+assert.oneOf(
+  height,
+  ["100%", "100vh"]
+);
 ```
 
 Your `.lightbox` element should be aligned with top left corner of the container.
@@ -197,15 +209,18 @@ When your `.lightbox` element is visible and you click the `#close-btn` button,
 
 ```js
 const lightbox = document.querySelector(".lightbox");
-const background = document.getElementById("close-btn"); 
+const closeBtn = document.getElementById("close-btn"); 
+const galleryItem = document.querySelector(".gallery-item");
 
 function getComputedDisplay(element) {
   return window.getComputedStyle(element).display;
 }
 
-lightbox.style.display = "flex";
+galleryItem.dispatchEvent(new Event("click", { bubbles: true }));
 
-background.dispatchEvent(new Event("click"));
+assert.strictEqual(getComputedDisplay(lightbox), "flex");
+
+closeBtn.dispatchEvent(new Event("click", { bubbles: true }));
 
 assert.strictEqual(getComputedDisplay(lightbox), "none");
 ```
@@ -219,9 +234,12 @@ function getComputedDisplay(element) {
   return window.getComputedStyle(element).display;
 }
 
-lightbox.style.display = "flex";
+const galleryItem = document.querySelector(".gallery-item");
+galleryItem.dispatchEvent(new Event("click", { bubbles: true }));
+
+assert.strictEqual(getComputedDisplay(lightbox), "flex");
 
-lightbox.dispatchEvent(new Event("click"));
+lightbox.dispatchEvent(new Event("click", { bubbles: true }));
 
 assert.strictEqual(getComputedDisplay(lightbox), "none");
 ```