background-attachment-008.xht (2383B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" 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: url(support/bordered-rectangle.png) -5px center scroll repeat-x; 13 border: 10px dotted; 14 overflow: auto; height: 190px; width: 390px; 15 white-space: pre; font-size: 16px; 16 text-align: center; 17 margin: -10px; 18 } 19 .inner { 20 background: url(support/cat.png) scroll center no-repeat; 21 border: 10px dotted orange; margin: 0 auto; 22 overflow: auto; height: 99px; width: 80%; 23 color: orange; 24 } 25 .backdrop { 26 border: teal solid 10px; 27 background: yellow; 28 width: 390px; 29 } 30 ul { color: navy; } 31 </style> 32 </head> 33 <body> 34 35 <ul> 36 <li>You should see teal underneath the dotted black border below.</li> 37 <li>There should be exactly two teal-bordered aqua rectangles visible inside the dotted border at all times, with yellow stripes above and below.</li> 38 <li>As you scroll the element below the teal, aqua, and yellow regions should not move.</li> 39 <li>However, as you scroll the aqua-and-teal element, a cat surrounded by an orange dotted border should come into view, with its own associated nested scrolling mechanism.</li> 40 <li>As you scroll the aqua-and-teal element, the cat should move up and down with its border.</li> 41 <li>As you scroll the numbers inside the orange border, the cat should not move.</li> 42 <li>The aqua rectangles should be visible inside the dotted orange border.</li> 43 </ul> 44 45 <div class="backdrop"> 46 <div class="outer"> 1 47 2 48 3 49 4 50 5 51 6 52 7 53 8 54 9 55 <div class="inner"> 1 56 2 57 3 58 4 59 5 60 6 61 7 62 8 63 9 64 10 65 11 66 12 67 13 68 14 69 15 70 16 71 17 72 18 73 19 74 20</div> 75 10 76 11 77 12 78 13 79 14 80 15 81 16 82 17 83 18 84 19 85 20</div> 86 </div> 87 </body> 88 </html>