clip-004.html (1091B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: overflow:clip can be combined with overflow:visible</title> 4 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> 6 <link rel="match" href="clip-004-ref.html"> 7 <style> 8 .outer { 9 width: 30px; 10 height: 30px; 11 padding: 10px; 12 margin-left: 100px; 13 margin-top: 100px; 14 background: black; 15 } 16 17 .inner { 18 position: relative; 19 top: -20px; 20 left: -40px; 21 background: blue; 22 height: 100px; 23 width: 100px; 24 opacity: 0.5; 25 } 26 </style> 27 <!-- there should be no overflow --> 28 <div class="outer" style="overflow:clip"> 29 <div class="inner"></div> 30 </div> 31 32 <!-- there should be overflow in the vertical dimension, but not horizontally --> 33 <div class="outer" style="overflow-x:clip"> 34 <div class="inner"></div> 35 </div> 36 37 <!-- there should be overflow in the horizontal dimension, but not vertically --> 38 <div class="outer" style="overflow-y:clip"> 39 <div class="inner"></div> 40 </div>