clipped-opacity-containing-unclipped-mixblendmode-ref.html (733B)
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 border-color: blue; 39 margin-left: auto; 40 } 41 42 </style> 43 44 <div class="clip"> 45 <div class="opacity"> 46 <div class="absolutelyPositioned content"></div> 47 <div class="mixBlendMode content"></div> 48 </div> 49 </div>