|
1 <!doctype html> |
|
2 <title>CSS Test: background-attachment: local; positioning area with dir=rtl, top left</title> |
|
3 <link rel="match" href="attachment-local-positioning-4-ref.html" /> |
|
4 <meta name="flags" content="dom" /> |
|
5 <link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> |
|
6 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> |
|
7 <style> |
|
8 #outer { |
|
9 border: solid; |
|
10 /* With scrolling, effective position is -10px -10px */ |
|
11 background: url(aqua-yellow-32x32.png) local no-repeat 0 0; |
|
12 overflow: hidden; |
|
13 width: 200px; |
|
14 height: 300px; |
|
15 } |
|
16 div div { |
|
17 width: 250px; |
|
18 height: 370px; |
|
19 } |
|
20 p { |
|
21 margin: 0; |
|
22 padding-top: 100px; |
|
23 } |
|
24 </style> |
|
25 <div id=outer dir=rtl> |
|
26 <div> |
|
27 <p><img src=blue-32x32.png style="width: 160px"></p> |
|
28 </div> |
|
29 </div> |
|
30 <script> |
|
31 var outer = document.getElementById('outer'); |
|
32 // See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values. |
|
33 outer.scrollLeft = -40; |
|
34 outer.scrollTop = 10; |
|
35 </script> |