| <!-- This page is used to test that CSS resources are retrieved correctly by |
| the FrameSerializer. |
| --> |
| <html> |
| <head> |
| |
| <link rel="stylesheet" type="text/css" href="link_styles.css" /> |
| <link rel="stylesheet" type="text/css" href="encoding.css" /> |
| <!-- Data URL that contains an image URL. Note that it must be an absolute URL |
| as relative ones will not work from inside a data URL. |
| It's raw contents are: |
| #divFuchsia { |
| background-image: url('http://www.dataurl.com/fuchsia_background.png'); |
| } |
| --> |
| <link rel="stylesheet" type="text/css" |
| href="data:text/css;charset=utf-8,%23divFuchsia%20%7B%0D%0A%20%20background-image%3A%20url%28%27http%3A%2F%2Fwww.dataurl.com%2Ffuchsia_background.png%27%29%3B%0D%0A%7D" /> |
| <!-- This should be skipped for already being included from another frame --> |
| <link rel="stylesheet" type="text/css" href="included_in_another_frame.css" /> |
| |
| <style> |
| @import url('import_styles.css'); |
| |
| @font-face { |
| font-family: Chunkfive; |
| } |
| |
| #chunkfiveDiv { |
| font-family: Chunkfive, sans-serif; |
| } |
| </style> |
| |
| <style> |
| @media not all { |
| body { |
| background-image: url('do_not_serialize.png'); |
| } |
| } |
| |
| @supports (invalid-css-property: invalid-css-value) { |
| body { |
| background-image: url('do_not_serialize.png'); |
| } |
| } |
| |
| #nonexistentDiv { |
| background-image: url('do_not_serialize.png'); |
| } |
| |
| #divBlue { |
| background-image:url('blue_background.png'); |
| } |
| |
| ul { |
| list-style-image: url('ul-dot.png'); |
| } |
| |
| ol { |
| list-style-image: url('ol-dot.png'); |
| } |
| |
| @media all { |
| #divPink { |
| background-image: url('pink_background.png'); |
| } |
| } |
| |
| @supports not (invalid-css-property: invalid-css-value) { |
| #divBrown { |
| background-image: url('brown_background.png'); |
| } |
| } |
| |
| // Tries to import a CSS that was already previously linked. |
| @import url('link_styles.css'); |
| |
| </style> |
| |
| <script> |
| // Dynamically creates a CSS style. |
| function onLoad() { |
| var styleText = "#divPurple {background-image:url('purple_background.png')}"; |
| var div = document.getElementById('divPurple'); |
| var styleNode= document.createElement('style'); |
| styleNode.type= 'text/css'; |
| styleNode.media= 'screen'; |
| styleNode.appendChild(document.createTextNode(styleText)); |
| div.appendChild(styleNode); |
| } |
| </script> |
| </head> |
| |
| <body onload="onLoad()"> |
| |
| <!-- Text using an imported font --> |
| <div id='chunkfiveDiv'>This text uses the Chunkfive font.</div> |
| |
| <!-- Style is in linked file --> |
| <div id='divRed'> |
| This div has a red image as its background. |
| </div> |
| |
| <!-- Style is in a file imported in the linked file --> |
| <div id='divOrange'> |
| This div has a orange image as its background. |
| </div> |
| |
| <!-- Style is in an imported file --> |
| <div id='divYellow'> |
| This div has a yellow image as its background. |
| </div> |
| |
| <!-- Style is defined in a style section in the header --> |
| <div id='divBlue'> |
| This div has a blue image as its background. |
| </div> |
| |
| <!-- Style is inlined --> |
| <div id='divGreen' style="background-image:url('green_background.png')"> |
| This div has a green image as its background. |
| </div> |
| |
| <!-- Style id dynamically generated with JavaScript in the onload handler --> |
| <div id='divPurple'> |
| This div has a purple image as its background. |
| </div> |
| |
| <!-- Style is defined in a media query --> |
| <div id='divPink'> |
| This div has a pink image as its background. |
| </div> |
| |
| <!-- Style is defined in a supports feature query --> |
| <div id='divBrown'> |
| This div has a brown image as its background. |
| </div> |
| |
| <!-- Style is defined in linked data URL --> |
| <div id='divFuchsia'> |
| This div has a fuchsia image as its background. |
| </div> |
| |
| Unordered list:<br> |
| <ul> |
| <li>Blue</li> |
| <li>Red</li> |
| <li>Yellow</li> |
| <li>Blue</li> |
| <li>Green</li> |
| <li>Red</li> |
| </ul> |
| <br> |
| |
| Ordered list:<br> |
| <ol> |
| <li>Blue</li> |
| <li>Red</li> |
| <li>Yellow</li> |
| <li>Blue</li> |
| <li>Green</li> |
| <li>Red</li> |
| </ol> |
| |
| </body> |
| |
| </html> |
