mix-blend-mode-overflowing-child.html (1453B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: blended element overflows parent</title> 5 <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> 6 <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> 7 <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> 8 <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> 9 <meta name="assert" content="Test checks that an overflowing element with mix-blend-mode blends with the parent element."> 10 <link rel="match" href="reference/mix-blend-mode-overflowing-child-ref.html"> 11 <style type="text/css"> 12 body { 13 background: lightgray; 14 } 15 .container { 16 position: absolute; 17 z-index: 1; 18 width: 100px; 19 height: 100px; 20 background: #0F0; 21 } 22 .blender { 23 background: #0F0; 24 margin: 50px; 25 width: 100px; 26 height: 100px; 27 mix-blend-mode: difference; 28 } 29 </style> 30 </head> 31 <body> 32 <p>Test passes if you can see two green squares and a black square as their intersection,<br> 33 drawn over a light gray background.</p> 34 <div class="container"> 35 <div class="blender"></div> 36 </div> 37 </body> 38 </html>