scroll-positioned-multiple-background-images

Scroll multiple background images that are positioned

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
dom, image, scroll
Assertion
When multiple background images are positioned at (0px, 0px) and (0, 60px) of each 60px by 60px in a scrollable element, and the element is scrolled to (0, 60px), only the second image is shown.

Source

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 3 <title>CSS Test: Scroll multiple background images that are positioned</title>
 4 <link href="http://www.google.com/" rel="author" title="Google">
 5 <link href="reference/60x60-green-background.htm" rel="match">
 6 <link href="http://www.w3.org/TR/css3-background/#layering" rel="help">
 7 <meta content="dom image scroll" name="flags">
 8 <meta content="When multiple background images are positioned at (0px, 0px) and (0, 60px) of each 60px by 60px in a scrollable element,
 9 and the element is scrolled to (0, 60px), only the second image is shown." name="assert">
10 <style type="text/css">
11 
12 #container {
13     width: 200px;
14     height: 200px;
15     overflow: hidden;
16 }
17 
18 #element-with-attachment-scroll {
19     width: 500px;
20     height: 500px;
21     background-image: url('support/60x60-red.png'), url('support/60x60-green.png');
22     background-position: 0 0, 0 60px;
23     background-repeat: no-repeat;
24 }
25 
26 </style>
27 </head>
28 <body>
29 <div id="container"><div id="element-with-attachment-scroll"><br></div></div>
30 <script>
31 document.getElementById('container').scrollTop = 60;
32 </script>
33 
34 
35 </body></html>