CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jeevankumar S 2026-02-11 15:00:40 +05:30 committed by GitHub
parent 9b5a7f064d
commit 0ed5f0d7f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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