clip-002.html (1072B)
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-002-ref.html"> 7 <style> 8 .outer { 9 width: 50px; 10 height: 50px; 11 margin-left: 100px; 12 margin-top: 100px; 13 background: black; 14 } 15 16 .inner { 17 position: relative; 18 top: -20px; 19 left: -40px; 20 background: blue; 21 height: 100px; 22 width: 100px; 23 opacity: 0.5; 24 } 25 </style> 26 <!-- there should be no overflow --> 27 <div class="outer" style="overflow:clip"> 28 <div class="inner"></div> 29 </div> 30 31 <!-- there should be overflow in the vertical dimension, but not horizontally --> 32 <div class="outer" style="overflow-x:clip"> 33 <div class="inner"></div> 34 </div> 35 36 <!-- there should be overflow in the horizontal dimension, but not vertically --> 37 <div class="outer" style="overflow-y:clip"> 38 <div class="inner"></div> 39 </div>