RichInStyle.com test pages: dynamic effects - clip

Inapplicability to elements with overflow: visible test

The two elements below should look the same:

The difference between the two is that the second defined a clipping region, but this ineffective unless overflow != visible.

True test

The above image should only have its middle visible - clip: rect(100px, 100px, 100px, 100px); overflow: hidden. Cf.:

The above image should have the same width as the first image except there should be a scroll bar with which to view the remainder.

The above image should either

1. have the same width as the first image except there should be a scroll bar with which to view the remainder, OR
2. have the same width as the second image - not clipped - overflow: auto treated as visible.

Finally, the following should be 400*400 pixel.

Whereas, the following should be 400*400 pixel but with only the middle 200*200 visible.

Alternative syntax test

These test the (sadly acceptable) alternative syntax of missing commas, measured from the top left of the element:

The above image should have only its middle visible - clip: rect(100px 300px 300px 100px); overflow: hidden. Cf.:

The above image should have the same width as the first image except there should be a scroll bar with which to view the remainder.

The above image should either

1. have the same width as the first image except there should be a scroll bar with which to view the remainder, OR
2. have the same width as the second image - not clipped - overflow: auto treated as visible.

Finally, the following should be 400*400 pixel.

Whereas, the following should be 400*400 pixel but with only the middle 200*200 visible.

Alternative syntax test 2

These test the (sadly acceptable) alternative syntax with commas, measured from the top left of the element:

The above image should have only its middle visible - clip: rect(100px, 300px, 300px, 100px); overflow: hidden. Cf.:

The above image should have the same width as the first image except there should be a scroll bar with which to view the remainder.

The above image should either

1. have the same width as the first image except there should be a scroll bar with which to view the remainder, OR
2. have the same width as the second image - not clipped - overflow: auto treated as visible.

Finally, the following should be 400*400 pixel.

Whereas the following should be 400*400 pixel but with only the middle 200*200 visible.

Alternative syntax test 3

These test the (sadly acceptable) alternative syntax with commas, measured from the sides of the element:

The above image should have only its middle visible - clip: rect(100px 100px 100px 100px); overflow: hidden. Cf.:

The above image should have the same width as the first image except there should be a scroll bar with which to view the remainder.

The above image should either

1. have the same width as the first image except there should be a scroll bar with which to view the remainder, OR
2. have the same width as the second image - not clipped - overflow: auto treated as visible.

Finally, the following should be 400*400 pixel.

Whereas the following should be 400*400 pixel but with only the middle 200*200 visible.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.