OLD | NEW |
| (Empty) |
1 <!-- This page is used to test that CSS resources are retrieved correctly by | |
2 the PageSerializer. | |
3 --> | |
4 <html> | |
5 <head> | |
6 | |
7 <link rel="stylesheet" type="text/css" href="link_styles.css" /> | |
8 | |
9 <style> | |
10 @import url('import_styles.css'); | |
11 | |
12 @font-face { | |
13 font-family: Chunkfive; | |
14 } | |
15 | |
16 #chunkfiveDiv { | |
17 font-family: Chunkfive, sans-serif; | |
18 } | |
19 </style> | |
20 | |
21 <style> | |
22 #divBlue { | |
23 background-image:url('blue_background.png'); | |
24 } | |
25 | |
26 ul { | |
27 list-style-image: url('ul-dot.png'); | |
28 } | |
29 | |
30 ol { | |
31 list-style-image: url('ol-dot.png'); | |
32 } | |
33 | |
34 </style> | |
35 | |
36 <script> | |
37 // Dynamically creates a CSS style. | |
38 function onLoad() { | |
39 var styleText = "#divPurple {background-image:url('purple_background.png')}"; | |
40 var div = document.getElementById('divPurple'); | |
41 var styleNode= document.createElement('style'); | |
42 styleNode.type= 'text/css'; | |
43 styleNode.media= 'screen'; | |
44 styleNode.appendChild(document.createTextNode(styleText)); | |
45 div.appendChild(styleNode); | |
46 } | |
47 </script> | |
48 </head> | |
49 | |
50 <body onload="onLoad()"> | |
51 | |
52 <!-- Text using an imported font --> | |
53 <div id='chunkfiveDiv'>This text uses the Chunkfive font.</div> | |
54 | |
55 <!-- Style is in linked file --> | |
56 <div id='divRed'> | |
57 This div has a red image as its background. | |
58 </div> | |
59 | |
60 <!-- Style is in a file imported in the linked file --> | |
61 <div id='divOrange'> | |
62 This div has a orange image as its background. | |
63 </div> | |
64 | |
65 <!-- Style is in an imported file --> | |
66 <div id='divYellow'> | |
67 This div has a yellow image as its background. | |
68 </div> | |
69 | |
70 <!-- Style is defined in a style section in the header --> | |
71 <div id='divBlue'> | |
72 This div has a blue image as its background. | |
73 </div> | |
74 | |
75 <!-- Style is inlined --> | |
76 <div id='divGreen' style="background-image:url('green_background.png')"> | |
77 This div has a green image as its background. | |
78 </div> | |
79 | |
80 <!-- Style id dynamically generated with JavaScript in the onload handler --> | |
81 <div id='divPurple'> | |
82 This div has a purple image as its background. | |
83 </div> | |
84 | |
85 Unordered list:<br> | |
86 <ul> | |
87 <li>Blue</li> | |
88 <li>Red</li> | |
89 <li>Yellow</li> | |
90 <li>Blue</li> | |
91 <li>Green</li> | |
92 <li>Red</li> | |
93 </ul> | |
94 <br> | |
95 | |
96 Ordered list:<br> | |
97 <ol> | |
98 <li>Blue</li> | |
99 <li>Red</li> | |
100 <li>Yellow</li> | |
101 <li>Blue</li> | |
102 <li>Green</li> | |
103 <li>Red</li> | |
104 </ol> | |
105 | |
106 </body> | |
107 | |
108 </html> | |
OLD | NEW |