overflow-x, overflow-y tests

W3C CSS3 working draft: The 'overflow-x' and 'overflow-y' properties.

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:

visible,visible hidden,hidden scroll,scroll; visible,scroll; scroll,visible (3 combinations) scroll,hidden; visible,hidden (2 combinations) 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:

visible,visible hidden,hidden; visible,hidden; hidden,visible (3 combinations) scroll,scroll; visible,scroll; scroll,visible (3 combinations) scroll,hidden hidden,scroll

CSS tests home