offscreen-clipped-blendmode-1.html (691B)
1 <!DOCTYPE html> 2 <html lang="en" 3 reftest-async-scroll 4 reftest-displayport-x="0" reftest-displayport-y="0" 5 reftest-displayport-w="800" reftest-displayport-h="2000" 6 reftest-async-scroll-x="0" reftest-async-scroll-y="1200"> 7 <meta charset="utf-8"> 8 <title>Scrolled blend mode</title> 9 10 <style> 11 12 body { 13 margin: 0; 14 padding: 100px; 15 height: 4000px; 16 background: white; 17 } 18 19 #outer { 20 height: 4000px; 21 overflow: hidden; 22 } 23 24 #inner-contents { 25 border: 1px solid black; 26 box-sizing: border-box; 27 width: 50px; 28 height: 50px; 29 mix-blend-mode: multiply; 30 margin-top: 1400px; 31 } 32 33 </style> 34 35 <div id="outer"> 36 <div id="inner"> 37 <div id="inner-contents"></div> 38 </div> 39 </div>