gecko/layout/html/tests/printer/general/test0.html

211 lines
5.6 KiB
HTML

<html>
<head>
<title>Example 0</title>
<style>
a#id.foo:visited:first-line { color: red; }
a#id.foo:first-line { color: red; }
a#id.foo:visited { color: red; }
a#id:first-line { color: red; }
a#id:visited { color: red; }
a:first-line { color: red; }
a:visited { color: red; }
a:visited:first-line { color: red; }
a:visited:visited { color: red; }
a:first-line:visited { color: red; }
:first-letter { color: green; }
#line:first-line { font-size: 200%; letter-spacing: -.25em; }
#letter:first-letter { font-size: 48pt; font-weight: bold; float: left; }
</style>
<meta name="crc" content=3268488385">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<!-- GOOFY Comment tests... -->
<!-- xx -- yy -- zz -->
<!-- also interesting --!>
<!--------------------->
<!-- ####################################################################
# #
# * Here's another interesting comment problem we encountered #
# this came from mozilla.org of all places! "!-- * --" #
####################################################################
-->
<h1>Example 0: Basic HTML Text Styles</h1>
<P><br></p>
<h2>Formatted Text</h2>
<p>
This is a basic paragraph with <b>bold</b>, <i>italic</i> and
<i><b>bold</b></i><b><i>-italic </i></b>
text. It also includes <font color="#FF0000">red</font>,
<font color="#00FF00">green</font>
and <font color="#0000FF">blue</font> text.
It has <s>strikethru</s> and <u>underline</u>.
<u> </u>
</p>
<p>
Text decoration color test:
<span style="color: red">
red
<span style="text-decoration: underline">
underline
<span style="color: cyan">
cyan
<span style="text-decoration: line-through">
line-through
<span style="color: blue">
blue
<span style="text-decoration: overline">
overline
<span style="color: black">
black
</span>
overline
</span>
blue
</span>
line-through
</span>
cyan
</span>
underline
</span>
red
</span>
</p>
<p>This is a paragraph with font variations: <b><font face="Arial, Helvetica, sans-serif">Bold Arial,</font></b><font face="Arial, Helvetica, sans-serif">
<i><font face="Verdana, Arial, Helvetica, sans-serif">Italic Verdana</font>,</i> <font face="courier">COURIER,
<font face="Times New Roman, Times, serif">Times New Roman.</font></font></font></p>
<p><font size=7>Font size=7, </font><font size=6>Font size=6, </font><font size=5>Font
size=5, </font><font size=4>Font size=4, </font><font size=3>Font size=3, </font><font size=2>Font
size=2, </font><font size=1>Font size=1, </font><font point-size=24 font-weight=700>Font
point-size=24 font-weight=700</font><BR>
<SPAN style="font-family: Verdana Bold, Times; font-weight: bold; font-size: 18pt; font-variant: small-caps;">This Text Is Small-caps</SPAN>
</P>
<h2>Text styles</h2>
<P>
<SPAN style="text-transform: capitalize;">
this text was capitalized &aring; &egrave;
</SPAN>
<BR>
<SPAN style="text-transform: lowercase;">
THIS TEXT WAS LOWERCASED &Aring; &Egrave;
</SPAN>
<BR>
<SPAN style="text-transform: uppercase;">
this text was uppercased &aring; &egrave;
</SPAN>
<BR>
<SPAN style="letter-spacing: 2em;">
Letter spacing set to 2em's.
</SPAN>
<BR>
<SPAN style="word-spacing: 2em;">
Word spacing set to 2em's.
</SPAN>
<BR>
<SPAN style="text-transform: capitalize; letter-spacing: 1em; word-spacing: 5em; font-variant: small-caps;">
this text is capitalized small-caps with letter spacing set to 1em and
the word spacing set to 5em's. enjoy!
</SPAN>
</P>
<H2>Pseudo-element tests</H2>
<P ID=line>
This paragraph demonstrates the :first-line pseudo
element. The first line of text should use a font twice the size and
have the letter spacing set so that the text is jammed together in an
unpleasant fashion.
</P>
<P ID=letter>
First letter style is really cool. The facility is very powerful because it
takes an innocuous looking content model and spices it up dramatically while
allowing a backwards compatible answer for older browsers.
</P>
<h2><br>
</h2>
<h2>Listings</h2>
<h3>Bulleted List </h3>
<ul>
<li>One</li>
<li>Two
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</li>
<li>Three</li>
</ul>
<br>
<h3>Numbered List </h3>
<ol>
<li>One</li>
<li>Two
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>
</li>
<li>Three</li>
</ol>
<h2>Justified Text</h2>
<p align=left>
This paragraph is aligned <b>left</b>.
This paragraph is aligned <b>left</b>.
This paragraph is aligned <b>left</b>.
This paragraph is aligned <b>left</b>.
This paragraph is aligned <b>left</b>.
This paragraph is aligned <b>left</b>.
This paragraph is aligned <b>left</b>.
</p>
<p align=center>
This paragraph is aligned <b>center</b>.
This paragraph is aligned <b>center</b>.
This paragraph is aligned <b>center</b>.
This paragraph is aligned <b>center</b>.
This paragraph is aligned <b>center</b>.
This paragraph is aligned <b>center</b>.
This paragraph is aligned <b>center</b>.
</p>
<p align=right>
This paragraph is aligned <b>right</b>.
This paragraph is aligned <b>right</b>.
This paragraph is aligned <b>right</b>.
This paragraph is aligned <b>right</b>.
This paragraph is aligned <b>right</b>.
This paragraph is aligned <b>right</b>.
This paragraph is aligned <b>right</b>.
</p>
<p align=justify>
This paragraph is <B>justified</B>.
This paragraph is <B>justified</B>.
This paragraph is <B>justified</B>.
This paragraph is <B>justified</B>.
This paragraph is <B>justified</B>.
This paragraph is <B>justified</B>.
This paragraph is <B>justified</B>.
</p>
</body>
</html>