mix-blend-mode-overflowing-child-of-blended-element.html (1801B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: blend an element having an overflowing child.</title> 6 <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> 7 <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> 8 <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> 9 <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> 10 <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> 11 <meta name="assert" content="Test checks that a group consisting of an element 12 with mix-blend-mode and an overflowing child blends as a whole with the 13 underlying stacking context."> 14 <link rel="match" href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.html"> 15 <style type="text/css"> 16 .parent { 17 position: absolute; 18 z-index: 1; 19 background: #00F; 20 width: 100px; 21 height: 100px; 22 margin: 10px; 23 } 24 .blender { 25 background: #777; 26 width: 120px; 27 height: 120px; 28 margin: -10px; 29 mix-blend-mode: difference; 30 } 31 .child { 32 background: #0FF; 33 width: 120px; 34 height: 120px; 35 } 36 </style> 37 </head> 38 <body> 39 <p>Test passes if you can see a lime square with aqua borders.<br> 40 If the borders are red, the test fails.</p> 41 <div class="parent"> 42 <div class="blender"> 43 <div class="child"></div> 44 </div> 45 </div> 46 </body> 47 </html>