W3C CSS3 overflow-x, overflow-y tests

Partially supported in Gecko 1.8, Safari 3, Opera 9.5, IE.

In all the following test cases the green box has fixed dimensions (80px × 80px, with padding 9px, border 10px.) The blue bar (width 119px, border 1px) should overflow at the right, and the red one (height 119px, border 1px) at the bottom. When one of the two properties is ‘auto’ there are four cases: two with only one overflowing bar at a time, one with both overflowing, one with no overflow (the third case should behave as with ‘scroll’ instead of ‘auto’).

According to the spec ... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ....

All browsers seem to further reduce the number of combinations giving different results:

• In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
• In IE7, IE8 ‘visible’ becomes ‘hidden’ when combined with ‘hidden’.
• IE6 seems to render all combinations differently, but of course here ‘visible’ means ‘expand’ the box (in the specified direction) to enclose the content.

	overflow-x: visible	overflow-x: hidden	overflow-x: scroll	overflow-x: auto
overflow-y: visible								overflow-y: visible
overflow-y: hidden								overflow-y: hidden
overflow-y: scroll								overflow-y: scroll
overflow-y: auto								overflow-y: auto
	overflow-x: visible	overflow-x: hidden	overflow-x: scroll	overflow-x: auto

Neglecting the cases with ‘auto’ (which depend on content), there are 9 (= 3 × 3) possible combinations of values of overflow-x and overflow-y, but only five distinct results in Gecko, Safari, Opera. These correspond to:

1. visible,visible
2. hidden,hidden
3. scroll,scroll; visible,scroll; scroll,visible (3 combinations)
4. scroll,hidden; visible,hidden (2 combinations)
5. hidden,scroll; hidden,visible (2 combinations)

In IE7, IE8 there are also the same five distinct results, but they correspond to a different grouping of values:

1. visible,visible
2. hidden,hidden; visible,hidden; hidden,visible (3 combinations)
3. scroll,scroll; visible,scroll; scroll,visible (3 combinations)
4. scroll,hidden
5. hidden,scroll

css test home http://www.brunildo.org/test/