transform-fixed-bg-002.html (1413B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): Fixed Background (with scrolling)</title> 5 <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> 6 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 7 <link rel="author" title="Google" href="http://www.google.com/"> 8 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> 9 <meta name="assert" content='"Fixed backgrounds on the root element are 10 affected by any transform specified for that element. For all other 11 elements that are effected by a transform (i.e. have a transform applied 12 to them, or to any of their ancestor elements), a value of fixed for the 13 background-attachment property is treated as if it had a value of scroll." 14 Here we translate the div 150px down instead of 50px, and also scroll down 15 100px. This should be the same as the previous test.'> 16 <meta name="flags" content="svg dom"> 17 <link rel="match" href="transform-fixed-bg-ref.html"> 18 <style> 19 body { 20 margin: 0; 21 height: 5000px; 22 overflow: hidden; 23 } 24 div { 25 background: url(support/transform-triangle-left.svg) fixed; 26 width: 100px; 27 height: 100px; 28 transform: translate(50px, 150px); 29 } 30 </style> 31 </head> 32 <body> 33 <div></div> 34 <script>scroll(0, 100)</script> 35 </body> 36 </html>