From 0ed5f0d7f1149698de6bf67739e11652a3f0359b Mon Sep 17 00:00:00 2001
From: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com>
Date: Wed, 11 Feb 2026 15:00:40 +0530
Subject: [PATCH] fix(curriculum): improve lightbox display tests and allow
 vw/vh units (#65739)

---
 .../66db57ad34c7089b9b41bfd6.md               | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/curriculum/challenges/english/blocks/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md b/curriculum/challenges/english/blocks/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
index ee1e1268023..c086d6970ec 100644
--- a/curriculum/challenges/english/blocks/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
+++ b/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 }));
 
-lightbox.dispatchEvent(new Event("click"));
+assert.strictEqual(getComputedDisplay(lightbox), "flex");
+
+lightbox.dispatchEvent(new Event("click", { bubbles: true }));
 
 assert.strictEqual(getComputedDisplay(lightbox), "none");
 ```