offscreen-clipped-blendmode-4.html (759B)
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 { 25 transform: translateX(0); 26 } 27 28 #inner-contents { 29 border: 1px solid black; 30 box-sizing: border-box; 31 width: 50px; 32 height: 50px; 33 mix-blend-mode: multiply; 34 margin-top: 1400px; 35 transform: translateX(0); 36 } 37 38 </style> 39 40 <div id="outer"> 41 <div id="inner"> 42 <div id="inner-contents"></div> 43 </div> 44 </div>