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:

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 tests home