Test zoom and four content conditions
See this course’s project requirements
A local community schedule with Grid/Flexbox, long-label wrapping, narrow-screen source order, zoom checks and a four-case layout stress test.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- Deliver a repeatable overflow trigger and an observed element/viewport record.
- Demonstrate and explain the combined track, item-minimum, and long-text wrapping repair.
- Produce aligned source, visual, and keyboard-order evidence at a narrow viewport.
- Verify wrapped navigation and an inspectable wide table without ordinary whole-page overflow.
- Complete a four-condition rendered stress matrix or identify the exact unperformed conditions.
- Deliver the fixed selected layout, failing baseline, source assertions, and honest rendered test record.
Review and revise
Use these criteria to check your work and choose what to improve.
- The implementation or declared simulation follows the supplied contract and retains inspectable original inputs.
- Normal, boundary and rejected cases are recorded with expected versus observed results.
- The changed case has a correct explanation and does not rely on hidden state.
- The project includes source, outputs, instructions and honest tool, privacy and verification limits.
Want more background?
The idea in everyday life
Use schedule.html, fixed.css, broken.css and test-layout.py. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1. The final source links fixed.css; switch that link temporarily to broken.css to reproduce the supplied narrow/long-content stress case.
Viewport width, long content, and browser zoom expose different pressures. Passing one screenshot does not establish resilience in all four cases.
Test zoom and four content conditions — original worked practice
Viewport width, long content, and browser zoom expose different pressures. Passing one screenshot does not establish resilience in all four cases.
Use schedule.html, fixed.css, broken.css and test-layout.py. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1. The final source links fixed.css; switch that link temporarily to broken.css to reproduce the supplied narrow/long-content stress case.
1. Step 1
Create four rows: 900px short text, 320px short text, 320px long text, and 200% browser zoom.
You should see: The stress matrix states four distinct conditions.
Viewport width, long content, and browser zoom expose different pressures. Passing one screenshot does not establish resilience in all four cases.
2. Step 2
For each row use the actual browser, recording page overflow, card wrapping, controls, and table access.
You should see: Each condition has observed results.
Viewport width, long content, and browser zoom expose different pressures. Passing one screenshot does not establish resilience in all four cases.
3. Step 3
At 200% zoom check readable text and reachable controls; record browser and viewport rather than assuming a fixed CSS width.
You should see: The zoom condition is described reproducibly.
Viewport width, long content, and browser zoom expose different pressures. Passing one screenshot does not establish resilience in all four cases.
4. Step 4
Keep any failure and its triggering condition; mark a missing browser as unverified.
You should see: A four-case rendered stress record.
Viewport width, long content, and browser zoom expose different pressures. Passing one screenshot does not establish resilience in all four cases.
What to finish
Complete a four-condition rendered stress matrix or identify the exact unperformed conditions.
Watch for this
Calling a single ordinary screenshot a passed narrow/long/zoom stress suite.
How can I tell I understand it?
Demonstrate the rule: Viewport width, long content, and browser zoom expose different pressures. Passing one screenshot does not establish resilience in all four cases. Use the supplied variant to distinguish a changed result from a broken implementation.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.