dom/tests/js/style1.html

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/dom/tests/js/style1.html	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,111 @@
     1.4 +<html>
     1.5 +<head>
     1.6 +<title>Example 0</title>
     1.7 +<style title="hello" media="screen, print">
     1.8 + :first-letter { color: green; }
     1.9 + a#id.foo:visited:first-line { color: red; }
    1.10 + a#id.foo:first-line { color: red; }
    1.11 + a#id.foo:visited { color: red; }
    1.12 + a#id:first-line { color: red; }
    1.13 + a#id:visited { color: red; }
    1.14 + a:first-line { color: red; }
    1.15 + a:visited { color: red; }
    1.16 + a:visited:first-line { color: red; }
    1.17 + a:visited:visited { color: red; }
    1.18 + a:first-line:visited { color: red; }
    1.19 + :active { color: blue; }
    1.20 + P.first:first-line { color: blue; }
    1.21 + P.first:first-letter { color: yellow; }
    1.22 +</style>
    1.23 +</head>
    1.24 +
    1.25 +<body bgcolor="#FFFFFF" text="#000000">
    1.26 +<h1>Example 0: Basic HTML Text Styles</h1>
    1.27 +<p><br></p>
    1.28 +<h2>Formatted Text</h2>
    1.29 +<p>This is a basic paragraph with <b>bold</b>, <i>italic</i> and <i>bold-italic 
    1.30 +  </i> text. It also includes <font color="#FF0000">red</font>, <font color="#00FF00">green</font> 
    1.31 +  and <font color="#0000FF">blue</font> text. It has <s>strikethru</s> and <u>underline</u>. 
    1.32 +  <u> </u></p>
    1.33 +<p>This is a paragraph with font variations: <b><font face="Arial, Helvetica, sans-serif">Arial,</font></b><font face="Arial, Helvetica, sans-serif"> 
    1.34 +  <i><font face="Verdana, Arial, Helvetica, sans-serif">Verdana</font>,</i> <font face="co">COURIER, 
    1.35 +  <font face="Times New Roman, Times, serif">Times New Roman.</font></font></font></p>
    1.36 +<p class="first"><font size=7>Font size=7, </font><font size=6>Font size=6, </font><font size=5>Font 
    1.37 +  size=5, </font><font size=4>Font size=4, </font><font size=3>Font size=3, </font><font size=2>Font 
    1.38 +  size=2, </font><font size=1>Font size=1, </font><font point-size=24 font-weight=700>Font 
    1.39 +  point-size=24 font-weight=700</font></p>
    1.40 +<p><THREED>3D Text. 3D Text. 3D Text. 3D Text. 3D Text. </THREED><br>
    1.41 +<h2><br>
    1.42 +</h2>
    1.43 +<h2>Listings</h2>
    1.44 +<h3>Bulleted List </h3>
    1.45 +<ul>
    1.46 +  <li>One</li>
    1.47 +  <li>Two
    1.48 +    <ul>
    1.49 +      <li>Apples</li>
    1.50 +      <li>Oranges</li>
    1.51 +      <li>Bananas</li>
    1.52 +    </ul>
    1.53 +  </li>
    1.54 +  <li>Three</li>
    1.55 +</ul>
    1.56 +<br>
    1.57 +<h3>Numbered List </h3>
    1.58 +<ol>
    1.59 +  <li>One</li>
    1.60 +  <li>Two 
    1.61 +    <ol>
    1.62 +      <li>Apples</li>
    1.63 +      <li>Oranges</li>
    1.64 +      <li>Bananas</li>
    1.65 +    </ol>
    1.66 +  </li>
    1.67 +  <li>Three</li>
    1.68 +</ol>
    1.69 +<h2>Justified Text</h2>
    1.70 +<p>This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>. 
    1.71 +  This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>. 
    1.72 +  This paragraph is aligned <b>left</b>. This paragraph is aligned <b>left</b>. 
    1.73 +  This paragraph is aligned <b>left</b>. </p>
    1.74 +<p align="RIGHT">This paragarph is aligned <b>right. </b>This paragarph is aligned 
    1.75 +  <b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned 
    1.76 +  <b>right. </b>This paragarph is aligned <b>right. </b>This paragarph is aligned 
    1.77 +  <b>right. </b>This paragarph is aligned <b>right. </b><b> </b>This paragarph 
    1.78 +  is aligned <b>right. </b></p>
    1.79 +<p align="CENTER">This paragraph is aligned <b>center</b>. This paragraph is aligned 
    1.80 +  <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned 
    1.81 +  <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned 
    1.82 +  <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned 
    1.83 +  <b>center</b>.This paragraph is aligned <b>center</b>.This paragraph is aligned 
    1.84 +  <b>center</b>.</p>
    1.85 +<p></p>
    1.86 +<p>&nbsp;</p>
    1.87 +<script>
    1.88 +var r = 0, g = 0, b = 0;
    1.89 +var h = document.documentElement.childNodes[1].childNodes[1];
    1.90 +var sheet = document.styleSheets[0];
    1.91 +var rule = sheet.cssRules[0];
    1.92 +var size = 10;
    1.93 +
    1.94 +function changeColor() {
    1.95 +  r += 5;
    1.96 +  g += 2;
    1.97 +  b += 3;
    1.98 +  r %= 255;
    1.99 +  g %= 255;
   1.100 +  b %= 255;
   1.101 +  size += 1;
   1.102 +  if (size > 48) {
   1.103 +    size = 10;
   1.104 +  }
   1.105 +
   1.106 +  h.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
   1.107 +  rule.style.color = "rgb(" + r + "," + g + "," + b + ")";
   1.108 +  rule.style.fontSize = size + "pt";
   1.109 +}
   1.110 +
   1.111 +setInterval(changeColor, 40);
   1.112 +</script>
   1.113 +</body>
   1.114 +</html>

mercurial