This commit is contained in:
kipp%netscape.com 1998-12-05 19:13:58 +00:00
parent b5ed9e2b7e
commit 2f392118fc
35 changed files with 892 additions and 0 deletions

View File

@ -0,0 +1,31 @@
file:/j:/html/block/alternating-frame-types.html
file:/j:/html/block/alternating-margins.html
file:/j:/html/block/auto-side-margins.html
file:/j:/html/block/bcl-float.html
file:/j:/html/block/clear-border-left.html
file:/j:/html/block/clear-left.html
file:/j:/html/block/collapsing-border-margins.html
file:/j:/html/block/collapsing-nested-margins.html
file:/j:/html/block/collapsing-sibling-margins.html
file:/j:/html/block/dangling-list-item.html
file:/j:/html/block/float.html
file:/j:/html/block/i-alternating-margins.html
file:/j:/html/block/i-auto-side-margins.html
file:/j:/html/block/i-collapsing-border-margins.html
file:/j:/html/block/i-collapsing-nested-margins.html
file:/j:/html/block/i-collapsing-sibling-margins.html
file:/j:/html/block/i-dangling-list-item.html
file:/j:/html/block/i-float.html
file:/j:/html/block/i-list-item.html
file:/j:/html/block/i-top-margin.html
file:/j:/html/block/i-width.html
file:/j:/html/block/list-item.html
file:/j:/html/block/over-clear.html
file:/j:/html/block/relative-pos.html
file:/j:/html/block/rs-coverage.html
file:/j:/html/block/top-margin.html
file:/j:/html/block/width.html
file:/j:/html/block/first-line.html
file:/j:/html/block/i-first-line.html
file:/j:/html/block/first-letter.html
file:/j:/html/block/i-first-letter.html

View File

@ -0,0 +1,17 @@
<HTML>
<HEAD>
<STYLE type="text/css">
P { margin: auto 0; background-color: khaki; }
</STYLE>
</HEAD>
<BODY>
This test demonstrates non-collapsing margins by alternating text with
paragraphs:
<P>This is a paragraph</P>
Some text
<B><P>This is a bold paragraph</P></B>
Some text
<P>This is a paragraph</P>
Some text
</BODY>
</HTML>

View File

@ -0,0 +1,15 @@
<HTML>
<HEAD>
<STYLE type="text/css">
P { margin: auto 0; background-color: khaki; }
</STYLE>
</HEAD>
<BODY>
This test demonstrates non-collapsing margins by alternating text with
paragraphs:
<P>This is a paragraph</P>
Some text
<P>This is a paragraph</P>
Some text
</BODY>
</HTML>

View File

@ -0,0 +1,33 @@
<HTML>
<HEAD>
<STYLE type="text/css">
DIV { border: 2px solid green; }
DIV.nowidth { margin: auto 0 auto auto; }
DIV.left { margin: auto 0 auto auto; width: 50%; }
DIV.center { margin: auto; width: 50%; }
DIV.right { margin: auto auto auto 0; width: 50%; }
BODY {
background: url(bluedot.gif) repeat-y center;
}
</STYLE>
</HEAD>
<BODY>
Demonstrate auto side margins (this also demonstrates the width property
as applied to a block frame):
<DIV CLASS=nowidth>
This block has width=auto therefore no auto side margins will apply
</DIV>
<DIV CLASS=left>
This block has width=50% therefore auto side margins will apply.
The left margin is auto therefore this should be right-aligned.
</DIV>
<DIV CLASS=center>
This block has width=50% therefore auto side margins will apply.
Both margins are auto therefore this should be centered.
</DIV>
<DIV CLASS=right>
This block has width=50% therefore auto side margins will apply.
The right margin is auto therefore this should be left-aligned.
</DIV>
</BODY>
</HTML>

View File

@ -0,0 +1,28 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
<IMG SRC="raptor.jpg" align=left height=50 border=2>
This is some basic text flowing around a floating image.
<BR clear=all>
<BR>
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
<IMG SRC="raptor.jpg" align=right height=50 border=2>
This is some basic text flowing around a floating image.
<BR clear=all>
<BR>
This is some basic text flowing between some floating images.
This is some basic text flowing between some floating images.
<IMG SRC="raptor.jpg" align=left height=50 border=2>
<IMG SRC="raptor.jpg" align=right height=50 border=2>
This is some basic text flowing between some floating images.
<BR clear=all>
</BODY>
</HTML>

View File

@ -0,0 +1,21 @@
<HTML>
<HEAD>
<STYLE type="text/css">
.r { border: 5px solid red; }
.g { border: 10px solid green; }
.b { border: 15px solid blue; }
</STYLE>
</HEAD>
<BODY>
<DIV CLASS=r>
<DIV CLASS=g>
<DIV CLASS=b>
<IMG SRC="raptor.jpg" align=left height=50 border=2>
This is some basic text flowing around a floating image.
<BR clear=left>
Done clearing left.
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>

View File

@ -0,0 +1,12 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
<IMG SRC="raptor.jpg" align=left height=50 border=2>
This is some basic text flowing around a floating image.
<BR clear=left>
Done clearing left.
</BODY>
</HTML>

View File

@ -0,0 +1,13 @@
<HTML>
<HEAD>
<STYLE type="text/css">
DIV { margin: auto 0; border: 2px solid green; }
</STYLE>
</HEAD>
<BODY>
Demonstrate collapsing nested + sibling margins:
<DIV><DIV>Auto margins</DIV></DIV>
<DIV><DIV>Auto margins</DIV></DIV>
<DIV><DIV>Auto margins</DIV></DIV>
</BODY>
</HTML>

View File

@ -0,0 +1,13 @@
<HTML>
<HEAD>
<STYLE type="text/css">
DIV { margin: auto 0; background-color: khaki; }
</STYLE>
</HEAD>
<BODY>
Demonstrate collapsing nested + sibling margins:
<DIV><DIV>Auto margins</DIV></DIV>
<DIV><DIV>Auto margins</DIV></DIV>
<DIV><DIV>Auto margins</DIV></DIV>
</BODY>
</HTML>

View File

@ -0,0 +1,13 @@
<HTML>
<HEAD>
<STYLE type="text/css">
P { background-color: khaki; }
</STYLE>
</HEAD>
<BODY>
Demonstrate collapsing sibling margins:
<P>Auto margins</P>
<P>Auto margins</P>
<P>Auto margins</P>
</BODY>
</HTML>

View File

@ -0,0 +1,10 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
<LI>A dangling list item (not in a list container)
<P>A paragraph</P>
</BODY>
</HTML>

View File

@ -0,0 +1,31 @@
<HTML>
<HEAD>
<STYLE type="text/css">
P:first-letter {
font-size: 24pt;
color: green;
}
P {
font-size: 12pt;
}
</STYLE>
</HEAD>
<BODY>
<P>
Once upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</P>
<P>
<B>
<I>O</I>nce upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</B>
</P>
</BODY>
</HTML>

View File

@ -0,0 +1,38 @@
<HTML>
<HEAD>
<STYLE type="text/css">
P:first-line {
font-size: 24pt;
border: 2px solid khaki;
background-color: rgb(128,128,128);
}
P {
font-size: 12pt;
text-indent: 5em;
}
</STYLE>
</HEAD>
<BODY>
<P>
Once upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</P>
<P><B>
Once upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</B></P>
<P><B><I>
Once upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</I></B></P>
</BODY>
</HTML>

View File

@ -0,0 +1,28 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
<IMG SRC="raptor.jpg" align=left height=50 border=2>
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
<BR clear=all>
<BR>
<IMG SRC="raptor.jpg" align=right height=50 border=2>
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
<BR clear=all>
<BR>
<IMG SRC="raptor.jpg" align=left height=50 border=2>
<IMG SRC="raptor.jpg" align=right height=50 border=2>
This is some basic text flowing between some floating images.
This is some basic text flowing between some floating images.
This is some basic text flowing between some floating images.
<BR clear=all>
</BODY>
</HTML>

View File

@ -0,0 +1,18 @@
<HTML>
<HEAD>
<STYLE type="text/css">
B { background-color: rgb(180,180,180); }
P { margin: auto 0; background-color: khaki; }
</STYLE>
</HEAD>
<BODY>
This test demonstrates non-collapsing margins by alternating text with
paragraphs:
<B>
<P>This is a paragraph</P>
Some text
<P>This is a paragraph</P>
Some text
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,36 @@
<HTML>
<HEAD>
<STYLE type="text/css">
B { background-color: rgb(180,180,180); }
DIV { border: 2px solid green; }
DIV.nowidth { margin: auto 0 auto auto; }
DIV.left { margin: auto 0 auto auto; width: 50%; }
DIV.center { margin: auto; width: 50%; }
DIV.right { margin: auto auto auto 0; width: 50%; }
BODY {
background: url(bluedot.gif) repeat-y center;
}
</STYLE>
</HEAD>
<BODY>
Demonstrate auto side margins (this also demonstrates the width property
as applied to a block frame):
<B>
<DIV CLASS=nowidth>
This block has width=auto therefore no auto side margins will apply
</DIV>
<DIV CLASS=left>
This block has width=50% therefore auto side margins will apply.
The left margin is auto therefore this should be right-aligned.
</DIV>
<DIV CLASS=center>
This block has width=50% therefore auto side margins will apply.
Both margins are auto therefore this should be centered.
</DIV>
<DIV CLASS=right>
This block has width=50% therefore auto side margins will apply.
The right margin is auto therefore this should be left-aligned.
</DIV>
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,16 @@
<HTML>
<HEAD>
<STYLE type="text/css">
B { background-color: rgb(180,180,180); }
DIV { margin: auto 0; border: 2px solid green; }
</STYLE>
</HEAD>
<BODY>
<B>
Demonstrate collapsing nested + sibling margins:
<DIV><DIV>Auto margins</DIV></DIV>
<DIV><DIV>Auto margins</DIV></DIV>
<DIV><DIV>Auto margins</DIV></DIV>
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,16 @@
<HTML>
<HEAD>
<STYLE type="text/css">
B { background-color: rgb(180,180,180); }
DIV { margin: auto 0; background-color: khaki; }
</STYLE>
</HEAD>
<BODY>
Demonstrate collapsing nested + sibling margins:
<B>
<DIV><DIV>Auto margins</DIV></DIV>
<DIV><DIV>Auto margins</DIV></DIV>
<DIV><DIV>Auto margins</DIV></DIV>
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,16 @@
<HTML>
<HEAD>
<STYLE type="text/css">
B { background-color: rgb(180,180,180); }
P { background-color: khaki; }
</STYLE>
</HEAD>
<BODY>
Demonstrate collapsing sibling margins:
<B>
<P>Auto margins</P>
<P>Auto margins</P>
<P>Auto margins</P>
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,13 @@
<HTML>
<HEAD>
<STYLE type="text/css">
B { background-color: rgb(180,180,180); }
</STYLE>
</HEAD>
<BODY>
<B>
<LI>A dangling list item (not in a list container)
<P>A paragraph</P>
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,31 @@
<HTML>
<HEAD>
<STYLE type="text/css">
P:first-letter {
font-size: 24pt;
color: green;
}
P {
font-size: 12pt;
}
</STYLE>
</HEAD>
<BODY>
<TT>
<P>
Once upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</P>
<P><B>
<I>O</I>nce upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</B></P>
</TT>
</BODY>
</HTML>

View File

@ -0,0 +1,40 @@
<HTML>
<HEAD>
<STYLE type="text/css">
P:first-line {
font-size: 24pt;
border: 2px solid khaki;
background-color: rgb(128,128,128);
}
P {
font-size: 12pt;
text-indent: 5em;
}
</STYLE>
</HEAD>
<BODY>
<TT>
<P>
Once upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</P>
<P><B>
Once upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</B></P>
<P><B><I>
Once upon a time, there was a silly man
<IMG SRC="raptor.jpg" width=25>
who lived in a silly house
upon the silly lane. The silly lane was so thilly becathe it was near
the silly man.
</I></B></P>
</TT>
</BODY>
</HTML>

View File

@ -0,0 +1,30 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
<B>
<IMG SRC="raptor.jpg" align=left height=50 border=2>
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
<BR clear=all>
<BR>
<IMG SRC="raptor.jpg" align=right height=50 border=2>
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
This is some basic text flowing around a floating image.
<BR clear=all>
<BR>
<IMG SRC="raptor.jpg" align=left height=50 border=2>
<IMG SRC="raptor.jpg" align=right height=50 border=2>
This is some basic text flowing between some floating images.
This is some basic text flowing between some floating images.
This is some basic text flowing between some floating images.
<BR clear=all>
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,21 @@
<HTML>
<HEAD>
<STYLE type="text/css">
B { background-color: rgb(180,180,180); }
</STYLE>
</HEAD>
<BODY>
<B>
A simple un-ordered list:
<UL>
<LI>Bullet number one
<LI>Bullet number two
</UL>
A simple ordered list:
<OL>
<LI>Bullet number one
<LI>Bullet number two
</OL>
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,29 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
<I>
<P>
Test the block/inline handling of the various reflow status values returned
from child frames. This lead in is a long line of text which will trigger
the handling of "not-complete" reflow status. In addition, because the
line ends in a BR tag this will also test the handling of the "break-after"
reflow status.
<BR>
Same idea, but with the test wrapped in a B tag container:
<BR>
<B>
Test the block/inline handling of the various reflow status values returned
from child frames. This lead in is a long line of text which will trigger
the handling of "not-complete" reflow status. In addition, because the
line ends in a BR tag this will also test the handling of the "break-after"
reflow status.
<BR>
</B>
</P>
</I>
</BODY>
</HTML>

View File

@ -0,0 +1,50 @@
<HTML>
<HEAD>
<STYLE type="text/css">
.rel {
background-color: khaki;
opacity: 75%;
margin: 0;
padding: 10px;
position: relative;
top: -3em;
left: 5px;
}
.rel2 {
background-color: green;
opacity: 75%;
margin: 0;
padding: 10px;
position: relative;
top: -3em;
left: 5px;
}
</STYLE>
</HEAD>
<BODY>
<B>
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
<P CLASS=rel>
This paragraph is in-flow, but relatively positioned.
This paragraph is in-flow, but relatively positioned.
This paragraph is in-flow, but relatively positioned.
</P>
This text is in-flow normal.
This text is in-flow normal.
<SPAN CLASS=rel2>
This span is in-flow, but relatively positioned.
This span is in-flow, but relatively positioned.
This span is in-flow, but relatively positioned.
</SPAN>
This text is in-flow normal.
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,16 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
<B>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P>This is a paragraph</P>
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,21 @@
<HTML>
<HEAD>
<STYLE type="text/css">
.w1 { width: 100px; border: solid 2px green; }
.w2 { width: 50%; border: solid 2px green; }
.w3 { width: 100%; border: solid 2px green; }
</STYLE>
</HEAD>
<BODY>
Verify that width does not apply to inline frames:<BR>
<B CLASS=w1>
This box should NOT be 100 pixels wide with zero margins.
</B>
<B CLASS=w2>
This box should NOT be half the width of its parent.
</B>
<B CLASS=w3>
This box should be NOT be 100% the width of its parent.
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,18 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
A simple un-ordered list:
<UL>
<LI>Bullet number one
<LI>Bullet number two
</UL>
A simple ordered list:
<OL>
<LI>Bullet number one
<LI>Bullet number two
</OL>
</BODY>
</HTML>

View File

@ -0,0 +1,15 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
This is a below current line
<IMG SRC="raptor.jpg" height=50 border=2 align=left>
floater. It starts below some of the text and then
takes up space.
<BR clear=all>
<IMG SRC="raptor.jpg" height=50 border=2 align=left>
Clear we go!
</BODY>
</HTML>

View File

@ -0,0 +1,25 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
Test the block/inline handling of the various reflow status values returned
from child frames. This lead in is a long line of text which will trigger
the handling of "not-complete" reflow status. In addition, because the
line ends in a BR tag this will also test the handling of the "break-after"
reflow status.
<BR>
Same idea, but with the test wrapped in a B tag container:
<BR>
<B>
Test the block/inline handling of the various reflow status values returned
from child frames. This lead in is a long line of text which will trigger
the handling of "not-complete" reflow status. In addition, because the
line ends in a BR tag this will also test the handling of the "break-after"
reflow status.
<BR>
</B>
</BODY>
</HTML>

View File

@ -0,0 +1,46 @@
<HTML>
<HEAD>
<STYLE type="text/css">
.rel {
background-color: khaki;
opacity: 75%;
margin: 0;
padding: 10px;
position: relative;
top: -3em;
left: 5px;
}
.rel2 {
background-color: green;
border: solid 2px black;
opacity: 75%;
margin: 0;
padding: 10px;
position: relative;
left: -50px;
}
</STYLE>
</HEAD>
<BODY>
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
This text is in-flow normal.
<P CLASS=rel>
This paragraph is in-flow, but relatively positioned up and
to the left by 1em.
</P>
<NOBR>
(in-flow normal)
<SPAN CLASS=rel2>
relatively positioned span.
</SPAN>
(in-flow normal)
</NOBR>
</BODY>
</HTML>

View File

@ -0,0 +1,89 @@
<HTML>
<HEAD>
<STYLE type="text/css">
DIV { margin-left: 1em; }
IMG.block { display: block; }
</STYLE>
</HEAD>
<BODY>
Block parent, inline child reflow status section<BR><BR>
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
The last line will trigger complete status. The break will
trigger break-after-complete status.<BR>
<B>This should trigger<BR>break-after-not-complete status</B><BR>
<B>This should trigger break-after-complete status<BR></B><BR>
Word<I><P>This will trigger break-before status</P></I><BR>
<HR>
Block parent, block child reflow status section (requires
pagination to test)<BR>
<DIV>
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
<DIV>
A longish paragraph that will trigger incomplete status.
<DIV>
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
</DIV>
Ding<IMG CLASS=block SRC="raptor.jpg" height=200 border=1>Dong!
A longish paragraph that will trigger incomplete status.
</DIV>
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
</DIV>
<TT>
Inline parent, inline child reflow status section<BR><BR>
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
The last line will trigger complete status. The break will
trigger break-after-complete status.<BR>
<B>This should trigger<BR>break-after-not-complete status</B><BR>
<B>This should trigger break-after-complete status<BR></B><BR>
Word<I><P>This will trigger break-before status</P></I><BR>
<HR>
Inline parent, block child reflow status section (requires
pagination to test)<BR>
<DIV>
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
<DIV>
A longish paragraph that will trigger incomplete status.
<DIV>
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
</DIV>
Ding<IMG CLASS=block SRC="raptor.jpg" height=200 border=1>Dong!
A longish paragraph that will trigger incomplete status.
</DIV>
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
A longish paragraph that will trigger incomplete status.
</DIV>
</TT>
</BODY>
</HTML>

View File

@ -0,0 +1,14 @@
<HTML>
<HEAD>
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P>This is a paragraph</P>
</BODY>
</HTML>

View File

@ -0,0 +1,29 @@
<HTML>
<HEAD>
<STYLE type="text/css">
.w1 { width: 100px; border: solid 2px green; }
.w2 { width: 50%; border: solid 2px green; }
.w3 { width: 100%; border: solid 2px green; }
</STYLE>
</HEAD>
<BODY>
This test demonstrates the "width" style property as applied to blocks:
<DIV CLASS=w1>
This block should be 100 pixels wide with zero margins which means
that it should be attached to the left edge because the outer block
has a direction of left-to-right.
</DIV>
<DIV CLASS=w2>
This block should be half the width of its parent,
with zero margins which means
that it should be attached to the left edge because the outer block
has a direction of left-to-right.
</DIV>
<DIV CLASS=w3>
This block should be 100% the width of its parent,
with zero margins which means
that it should be attached to the left edge because the outer block
has a direction of left-to-right.
</DIV>
</BODY>
</HTML>