background-attachment-350.html (2145B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Background and Borders Test: 'background-attachment: local' and 'overflow: hidden'</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment"> 9 <link rel="match" href="reference/ref-if-there-is-no-red.xht"> 10 11 <!-- 12 13 More info: 14 15 Re: [css3-background] background-attachment: local 16 http://lists.w3.org/Archives/Public/www-style/2013May/0542.html 17 18 --> 19 20 <meta content="This test checks that when an element has 'background-attachment: local', then the background image is fixed with regard to what is the element's scrollable area and not to its viewport. In this test, what would be the scrollable area for the div element is where the red square is and such area is clipped due to 'overflow: hidden'." name="assert"> 21 22 <style> 23 div 24 { 25 background-attachment: local; 26 background-image: url("support/100x100-red.png"); 27 background-position: bottom right; 28 background-repeat: no-repeat; 29 font-size: 100px; 30 line-height: 1; 31 height: 100px; 32 overflow: hidden; 33 width: 100px; 34 } 35 </style> 36 37 <body> 38 39 <p>Test passes if there is <strong>no red</strong>. 40 41 <div id="target"> <br> </div> 42 43 <!-- 44 45 (0px, 0px) (200px, 0px) 46 +.......................+ 47 |+..........+ | 48 || +......+ | | 49 || | red | | | <== bottom right of scrolling box 50 || |square| | | when background-image dimensions 51 || | | | | are the same as the element's 52 || +......+ | | viewport dimensions 53 +..........+ | 54 | | 55 | +......+| 56 | | red || <== bottom right of scrollable area 57 | |square|| which is outside of the viewport 58 | | || area and which is clipped due 59 | +......+| to 'overflow: hidden' 60 +.......................+ 61 (0px, 200px) (200px, 200px) 62 63 -->