c537-bgfxps-000

background

WeasyPrint

This browser

Flags
ahem, image, interact

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <title>CSS Test: background</title>
 5   <meta name="flags" content="ahem image interact">
 6   <link rel="help" href="http://www.w3.org/TR/REC-CSS1#background">
 7   <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
 8   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
 9   <style type="text/css">
10    html {background: url(support/swatch-blue.png) repeat-x center top fixed;}
11    div { font: 15px/1 Ahem; background: red; color: green; width: 11em; margin: 0 0 0 2em; }
12    .dummy { color: silver; }
13    .one {background: green url(support/swatch-red.png) repeat-y 100% 0%;}
14    .two {background: green url(support/swatch-red.png) repeat-y center top;}
15    .three {background: green url(support/swatch-red.png) repeat-x left top;}
16   </style>
17   <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" title="14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'">
18  </head>
19  <body>
20   <p class="dummy">Dummy text.</p>
21   <p class="dummy">Dummy text.</p>
22   <p class="dummy">Dummy text.</p>
23   <p>Scroll this document. A line of blue should remain stuck at the
24   top of the viewport the whole time, and there should be no red
25   below, just a block of green.</p>
26   <div class="one">
27     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X
28     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X
29     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X
30     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X
31     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X
32   </div>
33   <div class="two">
34     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
35     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
36     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
37     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
38     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
39   </div>
40   <div class="three">
41     XXXXXXXXXXX
42     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
43     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
44     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
45     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
46   </div>
47   <p class="dummy">Dummy text.</p>
48   <p class="dummy">Dummy text.</p>
49   <p class="dummy">Dummy text.</p>
50   <p class="dummy">Dummy text.</p>
51   <p class="dummy">Dummy text.</p>
52   <p class="dummy">Dummy text.</p>
53   <p class="dummy">Dummy text.</p>
54   <p class="dummy">Dummy text.</p>
55   <p class="dummy">Dummy text.</p>
56   <p class="dummy">Dummy text.</p>
57   <p class="dummy">Dummy text.</p>
58   <p class="dummy">Dummy text.</p>
59   <p class="dummy">Dummy text.</p>
60   <p class="dummy">Dummy text.</p>
61   <p class="dummy">Dummy text.</p>
62   <p class="dummy">Dummy text.</p>
63   <p class="dummy">Dummy text.</p>
64   <p class="dummy">Dummy text.</p>
65   <p class="dummy">Dummy text.</p>
66   <p class="dummy">Dummy text.</p>
67   <p class="dummy">Dummy text.</p>
68   <p class="dummy">Dummy text.</p>
69   <p class="dummy">Dummy text.</p>
70   <p class="dummy">Dummy text.</p>
71   <p class="dummy">Dummy text.</p>
72   <p class="dummy">Dummy text.</p>
73   <p class="dummy">Dummy text.</p>
74   <p class="dummy">Dummy text.</p>
75   <p class="dummy">Dummy text.</p>
76   <p class="dummy">Dummy text.</p>
77   <p class="dummy">Dummy text.</p>
78   <p class="dummy">Dummy text.</p>
79   <p class="dummy">Dummy text.</p>
80   <p class="dummy">Dummy text.</p>
81   <p class="dummy">Dummy text.</p>
82   <p class="dummy">Dummy text.</p>
83   <p class="dummy">Dummy text.</p>
84   <p class="dummy">Dummy text.</p>
85   <p class="dummy">Dummy text.</p>
86   <p class="dummy">Dummy text.</p>
87   <p class="dummy">Dummy text.</p>
88   <p class="dummy">Dummy text.</p>
89   <p class="dummy">Dummy text.</p>
90   <p class="dummy">Dummy text.</p>
91   <p class="dummy">Dummy text.</p>
92  </body>
93 </html>