DEV Community

Devanshu Biswas
Devanshu Biswas

Posted on

Five of Eight Toolbar Implementations Satisfy the Only Property Anyone Tests, and Three of Those Five Are Wrong

A toolbar has more controls than fit. You hide the overflow behind a "+3" chip. There is exactly one number to compute — how many come off — and the space you must reserve for the chip is a function of that number.

So the fit test is self-referential, and no single forward pass over the row can be right. That is the part everyone gets wrong, and it is not the interesting part.

Try it at every width: https://dev48.infy.uk/design/day73-toolbar-overflow.html

The interesting part

Overflow — nothing sticks out past the container — is the only thing you can see and the only thing anybody tests. Across 2,309 whole-pixel container widths, five of eight implementations satisfy it at every single width.

Three of those five are wrong:

implementation passes overflow what is actually broken
A ✅ every width permanently gives up a control that fits, on 10.3% of widths
B ✅ every width hides the wrong controls on 78.5%, while its count is right on 47.7%
C ✅ every width right on all five properties — and never stops repainting

C is the one worth sitting with. It is correct on every property this page can name, and 688 of 759 widths are a two-cycle: it measures the row it just changed, so it settles into an infinite alternation between two layouts. A correctness test cannot see it. A frame counter can.

The other measurement

There are 3 pixels of container width where hiding one control makes the row wider than showing it. Removing a button removes its margin collapse; the chip that replaces it is wider than the gap it filled. Monotonicity is the assumption every binary-search implementation makes, and it is false on a measurable set.

// the self-reference, stated honestly
// need(n) = width of n visible controls + (n < total ? chipWidth(total - n) : 0)
// you cannot evaluate need(n) without knowing n, and n is what you are solving for.
// Iterate to a fixed point, and check that the fixed point exists.
Enter fullscreen mode Exit fullscreen mode

What to take from it

If your overflow test asserts "nothing sticks out", you are testing the one property that every plausible implementation satisfies, including the ones that hide the wrong buttons and the one that repaints forever. Test which controls came off, and test that the layout is stable after one pass.

Independently verified: 836 verifier asserts, 1,949 in-page checks, 0 failures.

Top comments (0)