code.vuplus.com Git - vuplus_webkit/blob - Source/WebKit/chromium/tests/data/pageserializer/css_test_page.html

   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   src: url('Chunkfive.otf');
  17   src: url('Chunkfive-webfont.eot) format('eot');
  18 }
  19
  20 #chunkfiveDiv {
  21   font-family: Chunkfive, sans-serif;
  22 }
  23 </style>
  24
  25 <style>
  26 #divBlue {
  27   background-image:url('blue_background.png');
  28 }
  29
  30 ul {
  31   list-style-image: url('ul-dot.png');
  32 }
  33
  34 ol {
  35   list-style-image: url('ol-dot.png');
  36 }
  37
  38 </style>
  39
  40 <script>
  41 // Dynamically creates a CSS style.
  42 function onLoad() {
  43   var styleText = "#divPurple {background-image:url('purple_background.png')}";
  44   var div = document.getElementById('divPurple');
  45   var styleNode= document.createElement('style');
  46   styleNode.type= 'text/css';
  47   styleNode.media= 'screen';
  48   styleNode.appendChild(document.createTextNode(styleText));
  49   div.appendChild(styleNode);
  50 }
  51 </script>
  52 </head>
  53
  54 <body onload="onLoad()">
  55
  56 <!-- Text using an imported font -->
  57 <div id='chunkfiveDiv'>This text uses the Chunkfive font.</div>
  58
  59 <!-- Style is in linked file -->
  60 <div id='divRed'>
  61 This div has a red image as its background.
  62 </div>
  63
  64 <!-- Style is in a file imported in the linked file -->
  65 <div id='divOrange'>
  66 This div has a orange image as its background.
  67 </div>
  68
  69 <!-- Style is in an imported file -->
  70 <div id='divYellow'>
  71 This div has a yellow image as its background.
  72 </div>
  73
  74 <!-- Style is defined in a style section in the header -->
  75 <div id='divBlue'>
  76 This div has a blue image as its background.
  77 </div>
  78
  79 <!-- Style is inlined -->
  80 <div id='divGreen' style="background-image:url('green_background.png')">
  81 This div has a green image as its background.
  82 </div>
  83
  84 <!-- Style id dynamically generated with JavaScript in the onload handler -->
  85 <div id='divPurple'>
  86 This div has a purple image as its background.
  87 </div>
  88
  89 Unordered list:<br>
  90 <ul>
  91   <li>Blue</li>
  92   <li>Red</li>
  93   <li>Yellow</li>
  94   <li>Blue</li>
  95   <li>Green</li>
  96   <li>Red</li>
  97 </ul>
  98 <br>
  99
 100 Ordered list:<br>
 101 <ol>
 102   <li>Blue</li>
 103   <li>Red</li>
 104   <li>Yellow</li>
 105   <li>Blue</li>
 106   <li>Green</li>
 107   <li>Red</li>
 108 </ol>
 109
 110 </body>
 111
 112 </html>