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