SCROLLIN' ALONG...
Phase III - Body = Peep-Hole
Test Criteria & Considerations

This last phase of the study concentrates on investigating the behavior of the default scrollbars (as well as those of the body and html elements as applicable) as a function of the overflow property, where the body element is set to be equal (both in height & width) to the html element.

This scanerio may be consired more of a real-life application, as compared to the models used in Phase I: body < Peep-Hole and Phase II: body > Peep-Hole, both of which covered the rather extreme cases.

However, this model also leaves the doors open to possible misintrepretations due to other "interferences", especially due to the manner the Browsers make Width & Height Calculations to control their Scrollbar(s), as covered in 100% ≠ 100% !. Consequently, this model was left to the last, with the hopes that the lessons learned from the previous phases of this experiment will eliminate (or, at least, minimize) the possibility of such.

Another difference in this model is that the experiments were designed not only to test the Vertical and Horizontal Scrollbar indivually, but also together, in the form of Combined Scroll Tests.

Overflow Matrix

The basic 5x5 Overflow Matrix established - setting each possible value of the "overflow" property of the body element against those of the html element, were used to formulate the basic test structure:

The above matrix results in a total of 25 possible combinations/and permutations (5x5). Since the experiments involved testing Vertical Scroll (forcing the Vertical Scrollbar alone) and Horizontal Scroll (forcing the Horizontal Scrollbar alone) behavior individually, as well as Combined Scroll (forcing both Scrollbars simultaneously), a total of 75 test files were involved in this phase.

Background Colors

Again, we employed the simple-minded trick of using different background colors (chosen for no other reason than to provide a sharp contrast) for each of three elements that constitute the basis of these experiments (i.e. html, body & #test) in order to identify the limits of each clearly.

During the course of these experiments, it was observed that the background color of the scrollbar(s) (i.e. the color behind scrollbar itself) for Opera 7.54 consistently coincided with that of the element it belong to (dark red for html, dark green for body). This provided a further and very useful tool in identifying clearly which element any given scrollbar belongs to. Furthermore, a gray background - a background color not used in these files, distinguished - beyond the shadow of doubt, the "Browser Default Scrollbars" from the others.

Elements Used & Settings

Html:

Body:

#test:

Tests & Results

Each test page used in these experiments is:

The following browsers/versions were used in this study:

Within the scope of this study, the results of two Netscape verions tests were the same. The two versions of Internet Explorer showed some, but not signifiacant, differences. However, the two versions of Opera were dramatically different.

Consequently, the result of each set of experiment have been documented in a tabular format for each Browser, as follows:

Feed-back & Comments:
Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
Further Reading:
You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,

Web Design & Engineering: Dr. Z
© 2004-2008 Martian Melodies.
All rights reserved.www.Web-ZoneZ.com