• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<html>
2
3<!-- This page is used to test that CSS resources are retrieved correctly by the
4     WebPageSerializer::generateSnapshot method
5-->
6
7<head>
8
9<link rel="stylesheet" type="text/css" href="link_styles.css" />
10
11<style>
12@import url('import_styles.css');
13
14@font-face {
15  font-family: Chunkfive;
16}
17
18#chunkfiveDiv {
19  font-family: Chunkfive, sans-serif;
20}
21</style>
22
23<style>
24#divBlue {
25  background-image:url('blue_background.png');
26}
27
28ul {
29  list-style-image: url('ul-dot.png');
30}
31
32ol {
33  list-style-image: url('ol-dot.png');
34}
35
36</style>
37
38<script>
39// Dynamically creates a CSS style.
40function onLoad() {
41  var styleText = "#divPurple {background-image:url('purple_background.png')}";
42  var div = document.getElementById('divPurple');
43  var styleNode= document.createElement('style');
44  styleNode.type= 'text/css';
45  styleNode.media= 'screen';
46  styleNode.appendChild(document.createTextNode(styleText));
47  div.appendChild(styleNode);
48}
49</script>
50</head>
51
52<body onload="onLoad()">
53
54<!-- Text using an imported font -->
55<div id='chunkfiveDiv'>This text uses the Chunkfive font.</div>
56
57<!-- Style is in linked file -->
58<div id='divRed'>
59This div has a red image as its background.
60</div>
61
62<!-- Style is in a file imported in the linked file -->
63<div id='divOrange'>
64This div has a orange image as its background.
65</div>
66
67<!-- Style is in an imported file -->
68<div id='divYellow'>
69This div has a yellow image as its background.
70</div>
71
72<!-- Style is defined in a style section in the header -->
73<div id='divBlue'>
74This div has a blue image as its background.
75</div>
76
77<!-- Style is inlined -->
78<div id='divGreen' style="background-image:url('green_background.png')">
79This div has a green image as its background.
80</div>
81
82<!-- Style id dynamically generated with JavaScript in the onload handler -->
83<div id='divPurple'>
84This div has a purple image as its background.
85</div>
86
87Unordered list:<br>
88<ul>
89  <li>Blue</li>
90  <li>Red</li>
91  <li>Yellow</li>
92  <li>Blue</li>
93  <li>Green</li>
94  <li>Red</li>
95</ul>
96<br>
97
98Ordered list:<br>
99<ol>
100  <li>Blue</li>
101  <li>Red</li>
102  <li>Yellow</li>
103  <li>Blue</li>
104  <li>Green</li>
105  <li>Red</li>
106</ol>
107
108</body>
109
110</html>
111