clipped-mixblendmode-containing-unclipped-stuff-ref.html (935B)
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 yellow; 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 .absolutelyPositioned { 30 position: absolute; 31 top: 20px; 32 left: 250px; 33 } 34 35 .inner { 36 margin-left: auto; 37 border-color: magenta; 38 } 39 40 .blendedOverlay { 41 position: absolute; 42 top: 20px; 43 left: 290px; 44 width: 10px; 45 border-left: 0; 46 border-right: 0; 47 border-color: blue; 48 } 49 50 </style> 51 52 <div class="clip"> 53 <div class="absolutelyPositioned content"></div> 54 <div class="inner content"></div> 55 </div> 56 57 <div class="blendedOverlay content"></div>