overflow-clip-margin-visual-box-and-value-with-border-radius.html (1113B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Verifies overflow-clip-margin supports visual-box</title> 4 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> 5 <link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="overflow-clip-margin-visual-box-and-value-with-border-radius-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-100" /> 8 <style> 9 .container { 10 width: 100px; 11 height: 100px; 12 overflow: clip; 13 padding: 10px; 14 border: 10px solid black; 15 border-radius: 0px 15px 25px 35px; 16 margin: 10px; 17 background: grey; 18 } 19 20 .inner { 21 width: 150px; 22 height: 150px; 23 position: relative; 24 top: -25px; 25 left: -25px; 26 background: blue; 27 } 28 </style> 29 <div class="container" style="overflow-clip-margin: border-box 5px;"> 30 <div class="inner"></div> 31 </div> 32 <div class="container" style="overflow-clip-margin: padding-box 5px;"> 33 <div class="inner"></div> 34 </div> 35 <div class="container" style="overflow-clip-margin: content-box 5px;"> 36 <div class="inner"></div> 37 </div>