|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
5 <title>YUI 3.x: CSS Fonts Contextual Example</title> |
|
6 <link rel="stylesheet" href="../../build/cssreset/cssreset.css" type="text/css"> |
|
7 <link rel="stylesheet" href="../../build/cssfonts-context/cssfonts-context.css" type="text/css"> |
|
8 <script src="../../build/yui/yui-min.js"></script> |
|
9 </head> |
|
10 <body> |
|
11 |
|
12 <div class="yui3-cssfonts"> |
|
13 <br> |
|
14 ************************************************************************************************************************************************ |
|
15 <h1>In Context</h1> |
|
16 |
|
17 <h1>This is a H1 element.</h1> |
|
18 <h2>This is a H2 element.</h2> |
|
19 <h3>This is a H3 element.</h3> |
|
20 <h4>This is a H4 element.</h4> |
|
21 <h5>This is a H5 element.</h5> |
|
22 <h6>This is a H6 element.</h6> |
|
23 |
|
24 <ul> |
|
25 <li>This is a LI in a UL</li> |
|
26 </ul> |
|
27 |
|
28 <ol> |
|
29 <li>This is a LI in a UL</li> |
|
30 </ol> |
|
31 |
|
32 <dl> |
|
33 <dt>This is a DT in a DL</dt> |
|
34 <dd>This is a DD in a DL</dd> |
|
35 </dl> |
|
36 |
|
37 <form> |
|
38 <input type="text" value="This is an INPUT type TEXT in a FORM"/> |
|
39 |
|
40 <select> |
|
41 <option>This is an OPTION in a SELECT</option> |
|
42 <option>This is an OPTION in a SELECT</option> |
|
43 <optgroup> |
|
44 <option>This is an OPTION in a OPTGROUP in a SELECT</option> |
|
45 <option>This is an OPTION in a OPTGROUP in a SELECT</option> |
|
46 </optgroup> |
|
47 <option>This is an OPTION in a SELECT</option> |
|
48 </select> |
|
49 |
|
50 <textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea> |
|
51 |
|
52 <fieldset> |
|
53 <textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea> |
|
54 </fieldset> |
|
55 |
|
56 <button>This is a BUTTON</button> |
|
57 |
|
58 </form> |
|
59 |
|
60 <p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p> |
|
61 |
|
62 <blockquote>This is a BLOCKQUOTE element.</blockquote> |
|
63 |
|
64 <table> |
|
65 <caption>This is a CAPTION in a TABLE</caption> |
|
66 <thead> |
|
67 <tr> |
|
68 <th>This is a TH in a TR in a THEAD in a TABLE</th> |
|
69 <td>This is a TD in a TR in a THEAD in a TABLE</td> |
|
70 </tr> |
|
71 </thead> |
|
72 <tfoot> |
|
73 <tr> |
|
74 <th>This is a TH in a TR in a TFOOT in a TABLE</th> |
|
75 <td>This is a TD in a TR in a TFOOT in a TABLE</td> |
|
76 </tr> |
|
77 </tfoot> |
|
78 <tbody> |
|
79 <tr> |
|
80 <th>This is a TH in a TR in a TBODY in a TABLE</th> |
|
81 <td>This is a TD in a TR in a TBODY in a TABLE</td> |
|
82 </tr> |
|
83 </tbody> |
|
84 </table> |
|
85 |
|
86 </div> |
|
87 |
|
88 <div> |
|
89 <br> |
|
90 ************************************************************************************************************************************************ |
|
91 <h1>Out of Context</h1> |
|
92 |
|
93 <h1>This is a H1 element.</h1> |
|
94 <h2>This is a H2 element.</h2> |
|
95 <h3>This is a H3 element.</h3> |
|
96 <h4>This is a H4 element.</h4> |
|
97 <h5>This is a H5 element.</h5> |
|
98 <h6>This is a H6 element.</h6> |
|
99 |
|
100 <ul> |
|
101 <li>This is a LI in a UL</li> |
|
102 </ul> |
|
103 |
|
104 <ol> |
|
105 <li>This is a LI in a UL</li> |
|
106 </ol> |
|
107 |
|
108 <dl> |
|
109 <dt>This is a DT in a DL</dt> |
|
110 <dd>This is a DD in a DL</dd> |
|
111 </dl> |
|
112 |
|
113 <form> |
|
114 <input type="text" value="This is an INPUT type TEXT in a FORM"/> |
|
115 |
|
116 <select> |
|
117 <option>This is an OPTION in a SELECT</option> |
|
118 <option>This is an OPTION in a SELECT</option> |
|
119 <optgroup> |
|
120 <option>This is an OPTION in a OPTGROUP in a SELECT</option> |
|
121 <option>This is an OPTION in a OPTGROUP in a SELECT</option> |
|
122 </optgroup> |
|
123 <option>This is an OPTION in a SELECT</option> |
|
124 </select> |
|
125 |
|
126 <textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea> |
|
127 |
|
128 <fieldset> |
|
129 <textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea> |
|
130 </fieldset> |
|
131 |
|
132 <button>This is a BUTTON</button> |
|
133 |
|
134 </form> |
|
135 |
|
136 <p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p> |
|
137 |
|
138 <blockquote>This is a BLOCKQUOTE element.</blockquote> |
|
139 |
|
140 <table> |
|
141 <caption>This is a CAPTION in a TABLE</caption> |
|
142 <thead> |
|
143 <tr> |
|
144 <th>This is a TH in a TR in a THEAD in a TABLE</th> |
|
145 <td>This is a TD in a TR in a THEAD in a TABLE</td> |
|
146 </tr> |
|
147 </thead> |
|
148 <tfoot> |
|
149 <tr> |
|
150 <th>This is a TH in a TR in a TFOOT in a TABLE</th> |
|
151 <td>This is a TD in a TR in a TFOOT in a TABLE</td> |
|
152 </tr> |
|
153 </tfoot> |
|
154 <tbody> |
|
155 <tr> |
|
156 <th>This is a TH in a TR in a TBODY in a TABLE</th> |
|
157 <td>This is a TD in a TR in a TBODY in a TABLE</td> |
|
158 </tr> |
|
159 </tbody> |
|
160 </table> |
|
161 </div> |
|
162 </body> |
|
163 |
|
164 |
|
165 <script> |
|
166 YUI.Env.Tests = { |
|
167 examples: [], |
|
168 project: '../assets', |
|
169 assets: '../assets/cssfonts', |
|
170 name: 'cssfonts-context', |
|
171 title: 'CSS Fonts Contextual Example', |
|
172 newWindow: '', |
|
173 auto: false |
|
174 }; |
|
175 YUI.Env.Tests.examples.push('cssfonts-basic'); |
|
176 YUI.Env.Tests.examples.push('cssfonts-context'); |
|
177 YUI.Env.Tests.examples.push('cssfonts-size'); |
|
178 |
|
179 </script> |
|
180 <script src="../assets/yui/test-runner.js"></script> |
|
181 |