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 in Scrolling Backgrounds</title>
5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
7 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/block/003.html" type="text/html">
8 <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background">
9 <meta name="flags" content="image interact scroll">
10 <style type="text/css">
11 .outer {
12 background: red url(support/bordered-rectangle.png) -5px -5px scroll;
13 border: 10px dotted;
14 overflow: auto; height: 190px; width: 390px;
15 white-space: pre; font-size: 16px;
16 text-align: center;
17 }
18 .inner {
19 background: orange url(support/cat.png) scroll no-repeat;
20 border: 10px dotted yellow; margin: 0 auto;
21 overflow: auto; height: 99px; width: 98px;
22 color: orange;
23 }
24 ul { color: navy; }
25 </style>
26 </head>
27 <body>
28
29 <ul>
30 <li>You should see teal underneath the dotted black border below.</li>
31 <li>There should be exactly four aqua rectangles visible inside the dotted border at all times.</li>
32 <li>As you scroll the element below the teal and aqua should not move.</li>
33 <li>However, as you scroll the aqua-and-teal element, a cat surrounded by an orange border with yellow dots should come into view, with its own associated nested scrolling mechanism.</li>
34 <li>As you scroll the aqua-and-teal element, the cat should move up and down with its border.</li>
35 <li>As you scroll the numbers inside the orange border, the cat should not move.</li>
36 </ul>
37
38 <div class="outer"> 1
39 2
40 3
41 4
42 5
43 6
44 7
45 8
46 9
47 <div class="inner"> 1
48 2
49 3
50 4
51 5
52 6
53 7
54 8
55 9
56 10
57 11
58 12
59 13
60 14
61 15
62 16
63 17
64 18
65 19
66 20</div>
67 10
68 11
69 12
70 13
71 14
72 15
73 16
74 17
75 18
76 19
77 20</div>
78 </body>
79 </html>