background-attachment-fixed.html (1131B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-slice"> 4 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-image"> 5 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> 6 <link rel="match" href="background-attachment-fixed-ref.html"> 7 <style> 8 body { 9 overflow: hidden; 10 margin: 0; 11 } 12 </style> 13 <div style="height: 300px"></div> 14 <div style="width: 320px; height: 200px; columns: 3; column-gap: 10px"> 15 <div style="height: 600px; 16 border: 20px solid transparent; 17 box-sizing: border-box; 18 padding: 10px; 19 background-size: 200px 200px; 20 background-image: linear-gradient(blue 50%, green 50%); 21 background-clip: content-box; 22 background-attachment: fixed"> 23 </div> 24 </div> 25 <div style="width: 2000px; height: 2000px"></div> 26 <script> 27 requestAnimationFrame(() => { 28 requestAnimationFrame(() => { 29 window.scrollTo(0, 300); 30 document.documentElement.classList.remove('reftest-wait'); 31 }); 32 }); 33 </script>