clip-003.html (1716B)
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-003-ref.html"> 7 <style> 8 .wrapper { 9 margin-left: 30px; 10 margin-bottom: 20px; 11 width: 50px; 12 height: 50px; 13 } 14 .outer { 15 width: 50px; 16 height: 50px; 17 background: black; 18 } 19 20 .inner { 21 position: relative; 22 top: -10px; 23 left: -10px; 24 height: 100px; 25 width: 100px; 26 background: blue; 27 opacity: 0.5; 28 } 29 </style> 30 <!-- there should be no scrollbars --> 31 <div class="wrapper" style="overflow: auto"> 32 <div class="outer" style="overflow:clip; outline:solid red"> 33 <div class="inner"></div> 34 </div> 35 </div> 36 37 <!-- there should be no white areas inside the outline --> 38 <div class="wrapper" style="outline: solid"> 39 <div class="outer" style="overflow-x:clip"> 40 <div class="inner"></div> 41 </div> 42 </div> 43 44 <!-- there should be a vertical scrollbar, but not a horizontal one --> 45 <div class="wrapper" style="overflow: auto; margin-top:50px"> 46 <div class="outer" style="overflow-x:clip"> 47 <div class="inner" style="width:1px"></div> 48 </div> 49 </div> 50 51 <!-- there should be no white areas inside the outline --> 52 <div class="wrapper" style="outline: solid"> 53 <div class="outer" style="overflow-y:clip"> 54 <div class="inner"></div> 55 </div> 56 </div> 57 58 <!-- there should be horizontal scrollbar, but not a vertical one --> 59 <div class="wrapper" style="overflow: auto"> 60 <div class="outer" style="overflow-y:clip"> 61 <div class="inner" style="height:1px"></div> 62 </div> 63 </div>