Chromium Code Reviews Chromium Code Reviews| 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 } /* media not all */ | |
|
philipj_slow
2015/06/25 09:07:41
Don't need these /* end comments */ I think.
| |
| 27 | |
| 28 @supports (invalid-css-property: invalid-css-value) { | |
| 29 body { | |
| 30 background-image: url('do_not_serialize.png'); | |
| 31 } | |
| 32 } /* supports (invalid-css-property: invalid-css-value) */ | |
| 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 } /* media all */ | |
| 55 | |
| 56 @supports (background-image: url('brown_background.png')) { | |
|
philipj_slow
2015/06/25 09:07:41
Maybe something trivial like display:block so that
| |
| 57 #divBrown { | |
| 58 background-image: url('brown_background.png'); | |
| 59 } | |
| 60 } /* @supports (background-image: url('brown_background.png')) */ | |
| 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...) 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 |
