You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.

Skip to main content

You are here: Test Case Description for applets within <applet> tag > Test Case #2 for applets within <applet>: alignment formatting

Applets: APPLET with CSS float and CSS vertical-align properties

This test case tests the <APPLET> tag with the CSS float property and the CSS vertical-align property. This allows the java applet to be horizontally aligned with the surrounding text or to be vertically aligned with the surrounding text.

Test Instructions

  1. Verify that the sample java applet displays as stated in each of the following test cases:
  2. Verify that the java applet is maintained when you minimize/maximize the screen.
  3. Verify that the java applet is maintained when you re-size left & right the screen.
  4. Verify that the java applet is maintained when you re-size top & bottom the screen.
  5. Verify re-draw takes place correctly after maximizing the screen.
  6. Verify reload works.

Horizontally Aligned "Left" and "Right" Java Applet with Surrounding Text with CSS float property

Java Applet with the CSS float property values "left" or "right" are floating java applet types. A styled java applet with css float: left property will float down and over to the left margin (into the next available space there) and subsequent text will wrap around the right hand side of that java applet. This text should be alongside a java applet on the left margin.

Likewise for CSS float: right, the java applet aligns with the right margin and the text wraps around the left margin. All of this text should be wrapping around the side of the java applet aligned against the right margin of the page. If the java applet is not on the right margin, and this text is not wrapped around the left side, then float: right is broken.

What happens is that, while text is flowing around an java applet, the left (or right) margin of the page is temporarily redefined to be adjacent to the java applet as opposed to the edge of the page. This means that subsequent java applet with the same alignment will stack up against each other.

The following shows staggered "left" aligned java applet:

Java Applet!

next in line!

next in line!

When the text flows beyond the bottom of the java applet, the margin returns to it former position, typically at the edge of the browser window.

Vertically Aligned Java Applet with Surrounding Text

CSS vertical-align: top: the java applet aligns with the Tallest item in the line.

CSS vertical-align: text-top, the java applet aligns with the Tallest text in the line.

CSS vertical-align: middle: the middle of the java applet aligns with the of the middle of the text.

CSS vertical-align: text-bottom: the bottom of the java applet aligns with the of the bottom of the text.

CSS vertical-align: baseline: the bottom of the java applet bottom aligns with the of the baseline of the text.

CSS vertical-align: bottom: the bottom of the java applet aligns with the of the lowest item in the line.