| 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 |