dom/tests/js/style2.html
author hg@mozilla.com
Thu, 22 Mar 2007 10:30:00 -0700
changeset 1 9b2a99adc05e53cd4010de512f50118594756650
permissions -rw-r--r--
Free the (distributed) Lizard! Automatic merge from CVS: Module mozilla: tag HG_REPO_INITIAL_IMPORT at 22 Mar 2007 10:30 PDT,

<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; }
 :active { color: blue; }
 :first-letter { color: green; }
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table border=4>
<tr>
<td>
<h1>Example 0: Basic HTML Text Styles</h1>
</td>
<td>
more table cell
</td>
</tr>
<tr>
<td>second row</td>
<td>second row</td>
</tr>
</table>
<p><br></p>
<h2>Formatted Text</h2>
<p>This is a basic paragraph with <b>bold</b>, <i>italic</i> and <i>bold-italic 
  </i> 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>This is a paragraph with font variations: <b><font face="Arial, Helvetica, sans-serif">Arial,</font></b><font face="Arial, Helvetica, sans-serif"> 
  <i><font face="Verdana, Arial, Helvetica, sans-serif">Verdana</font>,</i> <font face="co">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></p>
<p><THREED>3D Text. 3D Text. 3D Text. 3D Text. 3D Text. </THREED><br>
<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>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="RIGHT">This paragarph is aligned <b>right. </b>This paragarph is aligned 
  <b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned 
  <b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned 
  <b>right. </b>This paragarph is aligned <b>right. </b><b> </b>This paragarph 
  is aligned <b>right. </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>.This paragraph is aligned 
  <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned 
  <b>center</b>.</p>
<p></p>
<p>&nbsp;</p>
<script>
var r = 0, g = 0, b = 0;
var h = document.documentElement.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[1];
h.style.borderStyle = "groove";

function changeColor() {
  r += 5;
  g += 2;
  b += 3;
  r %= 255;
  g %= 255;
  b %= 255;

  h.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
  h.style.color = "rgb(" + (255-r) + "," + (255-g) + "," + (255-b) + ")";
  h.style.fontSize = "" + (r/3) + "pt";
  h.style.borderWidth = "" + (r/5) + "px";
  h.style.borderColor = h.style.color;
}

setInterval(changeColor, 40);
</script>
</body>
</html>