bg-fixed-in-css-filter.html (899B)
1 <!DOCTYPE html> 2 <html reftest-async-scroll> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Fixed background inside blur filter</title> 6 <style> 7 .scrollable { 8 width: 100px; 9 height: 100px; 10 overflow: scroll; 11 scrollbar-width: none; 12 } 13 .bg { 14 width: 100px; 15 height: 100px; 16 background-image: url("repeatable-diagonal-gradient.png"); 17 background-repeat: no-repeat; 18 background-attachment: fixed; 19 } 20 .blur { 21 filter: blur(10px); 22 } 23 </style> 24 </head> 25 <body> 26 <div class="scrollable" 27 reftest-displayport-x="0" reftest-displayport-y="0" 28 reftest-displayport-w="100" reftest-displayport-h="200" 29 reftest-async-scroll-x="0" reftest-async-scroll-y="100"> 30 <div class="bg"></div> 31 <div class="bg blur"></div> 32 </div> 33 </body> 34 </html>