dom/tests/js/style2.html

   1 <html>
   2 <head>
   3 <title>Example 0</title>
   4 <style>
   5  a#id.foo:visited:first-line { color: red; }
   6  a#id.foo:first-line { color: red; }
   7  a#id.foo:visited { color: red; }
   8  a#id:first-line { color: red; }
   9  a#id:visited { color: red; }
  10  a:first-line { color: red; }
  11  a:visited { color: red; }
  12  a:visited:first-line { color: red; }
  13  a:visited:visited { color: red; }
  14  a:first-line:visited { color: red; }
  15  :active { color: blue; }
  16  :first-letter { color: green; }
  17 </style>
  18 </head>
  19
  20 <body bgcolor="#FFFFFF" text="#000000">
  21 <table border=4>
  22 <tr>
  23 <td>
  24 <h1>Example 0: Basic HTML Text Styles</h1>
  25 </td>
  26 <td>
  27 more table cell
  28 </td>
  29 </tr>
  30 <tr>
  31 <td>second row</td>
  32 <td>second row</td>
  33 </tr>
  34 </table>
  35 <p><br></p>
  36 <h2>Formatted Text</h2>
  37 <p>This is a basic paragraph with <b>bold</b>, <i>italic</i> and <i>bold-italic
  38   </i> text. It also includes <font color="#FF0000">red</font>, <font color="#00FF00">green</font>
  39   and <font color="#0000FF">blue</font> text. It has <s>strikethru</s> and <u>underline</u>.
  40   <u> </u></p>
  41 <p>This is a paragraph with font variations: <b><font face="Arial, Helvetica, sans-serif">Arial,</font></b><font face="Arial, Helvetica, sans-serif">
  42   <i><font face="Verdana, Arial, Helvetica, sans-serif">Verdana</font>,</i> <font face="co">COURIER,
  43   <font face="Times New Roman, Times, serif">Times New Roman.</font></font></font></p>
  44 <p><font size=7>Font size=7, </font><font size=6>Font size=6, </font><font size=5>Font
  45   size=5, </font><font size=4>Font size=4, </font><font size=3>Font size=3, </font><font size=2>Font
  46   size=2, </font><font size=1>Font size=1, </font><font point-size=24 font-weight=700>Font
  47   point-size=24 font-weight=700</font></p>
  48 <p><THREED>3D Text. 3D Text. 3D Text. 3D Text. 3D Text. </THREED><br>
  49 <h2><br>
  50 </h2>
  51 <h2>Listings</h2>
  52 <h3>Bulleted List </h3>
  53 <ul>
  54   <li>One</li>
  55   <li>Two
  56     <ul>
  57       <li>Apples</li>
  58       <li>Oranges</li>
  59       <li>Bananas</li>
  60     </ul>
  61   </li>
  62   <li>Three</li>
  63 </ul>
  64 <br>
  65 <h3>Numbered List </h3>
  66 <ol>
  67   <li>One</li>
  68   <li>Two
  69     <ol>
  70       <li>Apples</li>
  71       <li>Oranges</li>
  72       <li>Bananas</li>
  73     </ol>
  74   </li>
  75   <li>Three</li>
  76 </ol>
  77 <h2>Justified Text</h2>
  78 <p>This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>.
  79   This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>.
  80   This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>.
  81   This paragraph is aligned <b>left</b>. </p>
  82 <p align="RIGHT">This paragarph is aligned <b>right. </b>This paragarph is aligned
  83   <b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned
  84   <b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned
  85   <b>right. </b>This paragarph is aligned <b>right. </b><b> </b>This paragarph
  86   is aligned <b>right. </b></p>
  87 <p align="CENTER">This paragraph is aligned <b>center</b>. This paragraph is aligned
  88   <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned
  89   <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned
  90   <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned
  91   <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned
  92   <b>center</b>.</p>
  93 <p></p>
  94 <p>&nbsp;</p>
  95 <script>
  96 var r = 0, g = 0, b = 0;
  97 var h = document.documentElement.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[1];
  98 h.style.borderStyle = "groove";
  99
 100 function changeColor() {
 101   r += 5;
 102   g += 2;
 103   b += 3;
 104   r %= 255;
 105   g %= 255;
 106   b %= 255;
 107
 108   h.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
 109   h.style.color = "rgb(" + (255-r) + "," + (255-g) + "," + (255-b) + ")";
 110   h.style.fontSize = "" + (r/3) + "pt";
 111   h.style.borderWidth = "" + (r/5) + "px";
 112   h.style.borderColor = h.style.color;
 113 }
 114
 115 setInterval(changeColor, 40);
 116 </script>
 117 </body>
 118 </html>