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