1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html lang="en">
3 <head>
4 <title>CSS Test: Scrolling Backgrounds</title>
5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/block/001.html" type="text/html">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background">
8 <meta name="flags" content="image interact scroll">
9 <style type="text/css">
10 .inner {
11 background: transparent -15px -15px url(support/swatch-teal.png) repeat-x scroll;
12 border: 10px dotted silver;
13 overflow: auto; height: 80px; width: 180px;
14 white-space: pre; font-size: 16px;
15 margin: -10px;
16 }
17 .outer {
18 border: 10px solid teal;
19 border-top-color: red;
20 background: aqua;
21 width: 180px;
22 }
23 ul { color: navy; }
24 </style>
25 </head>
26 <body>
27
28 <ul>
29 <li>There should be a gray dotted box below.</li>
30 <li>There should be a teal border underneath the dotted box.</li>
31 <li>The box should be painted aqua inside the border.</li>
32 <li>There should be no red.</li>
33 <li>As you scroll the element through the numbers, the aqua, teal, and gray colors should not change position.</li>
34 </ul>
35
36 <div class="outer">
37 <div class="inner"> 1
38 2
39 3
40 4
41 5
42 6
43 7
44 8
45 9
46 10
47 11
48 12
49 13
50 14
51 15
52 16
53 17
54 18
55 19
56 20 </div>
57 </div>
58 </body>
59 </html>