There is a DIV below with a P inside it. The DIV has overflow: scroll, the P, margin-left: -10px. As a result, a horizontal scroll bar should be provided with which to view the 10 pixels of P that overflow the left of the DIV.
The left of this should be scrolled.
Note that the scroller in the scroll bar should be at the right of the scrolling area initially - you should see something like this:
e left of this should be scrolled.
When the scroll bar is scrolled to the left, you should see something like this:
The left of this should be scroll
The left of the content area of the scrolled element should be precisely aligned with the left of the rest of the document.
In the example below, there is a word that is longer than its containing block. However, the containing block has overflow: scroll on it so the element should not be any wider than this element, but a scroll bar should be provided.
alongwofsdfhsdklfhsdkjfhsdkfhsdkfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkjfhsdkfhsdkjfhsdfkjsdfkjsdfhsdkjfsdjk
In the example below, there is a replaced element that is wider than its containing block. However, the containing block has overflow: scroll on it so the containing block should not be any wider than this one, but a scroll bar should be provided so that the whole of the replaced element can be seen.
In the example below, there is a replaced element that is taller than its containing block. A scroll bar should be provided so that the whole of the replaced element can be seen.
The element below has 15 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: scroll, so it should scroll at that height.
The element below has 15 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: scroll, so it should scroll at that height. It is exactly the same as the previous example except it is a P element rather than a DIV.
Some
text
that
is
here.
And
some
more
that
is
here.
There is some text below that states 'Some text'. You should not, however, be able to see it until you have scrolled up the containing DIV. This is due to a position: relative; top: -10px with a height of 10px on the relatively positioned element (set indirectly via line-height).
The DIV element below has width: 200%, which causes it to overflow its DIV container. The DIV container has overflow: scroll, which means that you should be able to scroll across to see exactly as much again of the DIV.
There is some text below that states 'This is some text'. You should be able to see it, since the margins collapse, and margins collapse outside the elements, so margin-top: -10px does not cause overflow.
In this case, however, there should be scrolling required, since the inner DIV has 1 pixel of padding, which pre-empts margin collapsing
Although CSS is silent on the location of scroll bars, it would destroy the box model to place them anywhere other than in the content area of elements. This section of this test works on that basis.
|
Some content.
Some content. Some content. Some content. Some content. Some content. Some content. |
Some content. |
The above two elements should have the same width and height - the bottom of the scroll bar should be in line with the bottom of the element to the right's background; equally, the top of the left element should be in line with the top of the right one.
In between
The above two elements should have the same width - the right of the scroll bar and the right of the red should be lined up.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.