DailyRNG
Login
Advanced

Asserting on layout, not on markup

Layout bugs are invisible in the document. The assertion is on geometry: a box exists, it has size, and it is where the design says. Those numbers come from the browser's own calculation, which is the only fair source.

What you will see

True. False means something covers it and the click is broken, which no markup test would show.

About 1 min of reading

Try It

Assert geometry on one component

1

Read the box

add a check that reads the bounding box of the first card and prints width and height

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Two numbers above zero. A zero height is a real bug the markup test missed.
2

Assert with tolerance

printf 'ok = w > 40 && h > 40;\nconsole.log(ok ? "PASS" : "FAIL box too small");\nprocess.exit(ok ? 0 : 1);\n' | tee -a fe-title.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints
PASS on a rendered card. The thresholds are minimums, not exact values.
3

Check the narrow width

set the viewport to 375 wide before goto, then re-run the box check

Before you run it, say out loud what it will print. Then open the answer.

What it prints
The card still has size and its right edge is inside 375. Overflow fails here.
4

Hit-test the centre

ask whether the point at the centre of a button belongs to that button

Before you run it, say out loud what it will print. Then open the answer.

What it prints
True. False means something covers it and the click is broken, which no markup test would show.
Never assert an exact pixel width. Rounding differs between engines and the test fails on its own noise.

Data Flow

Element to a geometry verdict
1 Select the element
↓
2 Read its box
↓
3 Assert width and height are above zero
↓
4 Assert the edges are inside the viewport
Why this works
The widths to check

The narrowest supported and the widest supported. Two widths catch the collapse and the overflow, and they cost one extra navigation.

Where tolerance belongs

Sub-pixel rounding differs between engines. Assert with a tolerance of a few pixels, never on an exact number.

Examples

A box with size

An element that renders with zero height is present in the markup and invisible to the user. A geometry assertion catches it and a presence assertion does not.

Inside the viewport

A box whose left edge is past the viewport width is off-screen. Assert the edge is inside, at the widths the design supports.

Not covered by something else

A button under an overlapping panel is unreachable. Assert the point at its centre belongs to the button, which is how the click is tested.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Driving a real browser from a test
Previous Lesson
Driving a real browser from a test
Next Lesson
Testing reachability and focus order
Testing reachability and focus order →