overflow-clip-margin-004.html (1119B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Verifies overflow-clip-margin extends outside bounds with contain: paint</title> 4 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> 5 <link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> 6 <link rel="match" href="overflow-clip-margin-004-ref.html"> 7 <style> 8 .container { 9 display: flex; 10 } 11 .parent { 12 width: 100px; 13 height: 100px; 14 flex: none; 15 contain: paint; 16 overflow-clip-margin: 10px; 17 } 18 .child { 19 width: 200px; 20 height: 200px; 21 position: relative; 22 top: -50px; 23 left: -50px; 24 background-color: green; 25 } 26 .spacer { 27 flex: none; 28 height: 100px; 29 width: 100px; 30 } 31 32 </style> 33 <p>You should see two green squares touching each other. The one on the 34 right should be slightly larger.</p> 35 <div class="spacer"></div> 36 <div class="container"> 37 <div class="spacer" style="width: 90px; background-color: green"></div> 38 <div class="spacer" style="width: 10px"></div> 39 <div class="parent"> 40 <div class="child"></div> 41 </div> 42 </div>