Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: dynamic effects - overflow: hidden

Test 1

There is a DIV below with a P inside it. The DIV has overflow: hidden, the P, margin-left: -20px. As a result, the left should be partially obscured.

The left of this should be hidden.

You should see something like this:

e left of this should be hidden.

Test 2

In the example below, there is a word that is longer than its containing block. However, the containing block has overflow: hidden on it so the element should not be any wider than this element but should be cut off.

style="overflow: hidden"> alongwofsdfhsdklfhsdkjfhsdkfhsdkfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkfhsdkjfhsdfkjsdfkjsdfhsdkjfsdjk

Test 3

In the example below, there is a replaced element that is wider than its containing block. However, the containing block has overflow: hidden on it so the containing block should not be any wider than this one, but the element should be partially obscured.

Test 4

In the example below, there is a replaced element that is taller than its containing block. As a result, 2/3 of it should be cut off.

Here's how it looked when not cut off:

Test 5

The element below has 11 line boxes each of 10px height, resulting in a content height of 150px. It has a height: 50px declaration resulting in a block height of 50px. It also has overflow: hidden. As a result, you should only see 'Some text that is here.' - not 'And some more that is here.'

Some
text
that
is
here.
And
some
more
that
is
here.

Test 6

The element below has 11 line boxes each of 10px height, resulting in a content height of 150px. It has a height: 50px declaration resulting in a block height of 50px. It also has overflow: hidden. As a result, you should only see 'Some text that is here.' - not 'And some more that is here.' It is exactly the same as the previous example, except this is a P and that was a DIV.

Some
text
that
is
here.
And
some
more
that
is
here.

Test 7

There is some text below that states 'Some text'. You should not, however, be able to see it due to overflow: hidden (provided relative positioning is supported - see here).

Some text.