clipped-opacity-containing-unclipped-mixblendmode.html (761B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>Blend mode containers shouldn't clip unclipped children to their own clip</title> 5 6 <style> 7 8 body { 9 margin: 0; 10 } 11 12 .content { 13 box-sizing: border-box; 14 border: 10px solid black; 15 width: 100px; 16 height: 100px; 17 } 18 19 .clip { 20 box-sizing: border-box; 21 width: 300px; 22 height: 200px; 23 border: 10px solid black; 24 overflow: hidden; 25 } 26 27 .opacity { 28 opacity: 0.5; 29 } 30 31 .absolutelyPositioned { 32 position: absolute; 33 top: 20px; 34 left: 250px; 35 } 36 37 .mixBlendMode { 38 mix-blend-mode: multiply; 39 border-color: blue; 40 margin-left: auto; 41 } 42 43 </style> 44 45 <div class="clip"> 46 <div class="opacity"> 47 <div class="absolutelyPositioned content"></div> 48 <div class="mixBlendMode content"></div> 49 </div> 50 </div>