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