clip-005.html (1118B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: overflow:clip doesn't affect the box' own outline</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-005-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 outline: 2px solid grey; 16 } 17 18 .inner { 19 position: relative; 20 top: -20px; 21 left: -40px; 22 background: blue; 23 height: 100px; 24 width: 100px; 25 opacity: 0.5; 26 } 27 </style> 28 <!-- there should be no overflow --> 29 <div class="outer" style="overflow:clip"> 30 <div class="inner"></div> 31 </div> 32 33 <!-- there should be overflow in the vertical dimension, but not horizontally --> 34 <div class="outer" style="overflow-x:clip"> 35 <div class="inner"></div> 36 </div> 37 38 <!-- there should be overflow in the horizontal dimension, but not vertically --> 39 <div class="outer" style="overflow-y:clip"> 40 <div class="inner"></div> 41 </div>