OLD | NEW |
1 <!-- This page is used to test that CSS resources are retrieved correctly by | 1 <!-- This page is used to test that CSS resources are retrieved correctly by |
2 the PageSerializer. | 2 the PageSerializer. |
3 --> | 3 --> |
4 <html> | 4 <html> |
5 <head> | 5 <head> |
6 | 6 |
7 <link rel="stylesheet" type="text/css" href="link_styles.css" /> | 7 <link rel="stylesheet" type="text/css" href="link_styles.css" /> |
8 | 8 |
9 <style> | 9 <style> |
10 @import url('import_styles.css'); | 10 @import url('import_styles.css'); |
11 | 11 |
12 @font-face { | 12 @font-face { |
13 font-family: Chunkfive; | 13 font-family: Chunkfive; |
14 } | 14 } |
15 | 15 |
16 #chunkfiveDiv { | 16 #chunkfiveDiv { |
17 font-family: Chunkfive, sans-serif; | 17 font-family: Chunkfive, sans-serif; |
18 } | 18 } |
19 </style> | 19 </style> |
20 | 20 |
21 <style> | 21 <style> |
| 22 @media not all { |
| 23 body { |
| 24 background-image: url('do_not_serialize.png'); |
| 25 } |
| 26 } |
| 27 |
| 28 @supports (invalid-css-property: invalid-css-value) { |
| 29 body { |
| 30 background-image: url('do_not_serialize.png'); |
| 31 } |
| 32 } |
| 33 |
| 34 #nonexistentDiv { |
| 35 background-image: url('do_not_serialize.png'); |
| 36 } |
| 37 |
22 #divBlue { | 38 #divBlue { |
23 background-image:url('blue_background.png'); | 39 background-image:url('blue_background.png'); |
24 } | 40 } |
25 | 41 |
26 ul { | 42 ul { |
27 list-style-image: url('ul-dot.png'); | 43 list-style-image: url('ul-dot.png'); |
28 } | 44 } |
29 | 45 |
30 ol { | 46 ol { |
31 list-style-image: url('ol-dot.png'); | 47 list-style-image: url('ol-dot.png'); |
32 } | 48 } |
33 | 49 |
| 50 @media all { |
| 51 #divPink { |
| 52 background-image: url('pink_background.png'); |
| 53 } |
| 54 } |
| 55 |
| 56 @supports not (invalid-css-property: invalid-css-value) { |
| 57 #divBrown { |
| 58 background-image: url('brown_background.png'); |
| 59 } |
| 60 } |
| 61 |
34 </style> | 62 </style> |
35 | 63 |
36 <script> | 64 <script> |
37 // Dynamically creates a CSS style. | 65 // Dynamically creates a CSS style. |
38 function onLoad() { | 66 function onLoad() { |
39 var styleText = "#divPurple {background-image:url('purple_background.png')}"; | 67 var styleText = "#divPurple {background-image:url('purple_background.png')}"; |
40 var div = document.getElementById('divPurple'); | 68 var div = document.getElementById('divPurple'); |
41 var styleNode= document.createElement('style'); | 69 var styleNode= document.createElement('style'); |
42 styleNode.type= 'text/css'; | 70 styleNode.type= 'text/css'; |
43 styleNode.media= 'screen'; | 71 styleNode.media= 'screen'; |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
75 <!-- Style is inlined --> | 103 <!-- Style is inlined --> |
76 <div id='divGreen' style="background-image:url('green_background.png')"> | 104 <div id='divGreen' style="background-image:url('green_background.png')"> |
77 This div has a green image as its background. | 105 This div has a green image as its background. |
78 </div> | 106 </div> |
79 | 107 |
80 <!-- Style id dynamically generated with JavaScript in the onload handler --> | 108 <!-- Style id dynamically generated with JavaScript in the onload handler --> |
81 <div id='divPurple'> | 109 <div id='divPurple'> |
82 This div has a purple image as its background. | 110 This div has a purple image as its background. |
83 </div> | 111 </div> |
84 | 112 |
| 113 <!-- Style is defined in a media query --> |
| 114 <div id='divPink'> |
| 115 This div has a pink image as its background. |
| 116 </div> |
| 117 |
| 118 <!-- Style is defined in a supports feature query --> |
| 119 <div id='divBrown'> |
| 120 This div has a brown image as its background. |
| 121 </div> |
| 122 |
85 Unordered list:<br> | 123 Unordered list:<br> |
86 <ul> | 124 <ul> |
87 <li>Blue</li> | 125 <li>Blue</li> |
88 <li>Red</li> | 126 <li>Red</li> |
89 <li>Yellow</li> | 127 <li>Yellow</li> |
90 <li>Blue</li> | 128 <li>Blue</li> |
91 <li>Green</li> | 129 <li>Green</li> |
92 <li>Red</li> | 130 <li>Red</li> |
93 </ul> | 131 </ul> |
94 <br> | 132 <br> |
95 | 133 |
96 Ordered list:<br> | 134 Ordered list:<br> |
97 <ol> | 135 <ol> |
98 <li>Blue</li> | 136 <li>Blue</li> |
99 <li>Red</li> | 137 <li>Red</li> |
100 <li>Yellow</li> | 138 <li>Yellow</li> |
101 <li>Blue</li> | 139 <li>Blue</li> |
102 <li>Green</li> | 140 <li>Green</li> |
103 <li>Red</li> | 141 <li>Red</li> |
104 </ol> | 142 </ol> |
105 | 143 |
106 </body> | 144 </body> |
107 | 145 |
108 </html> | 146 </html> |
OLD | NEW |