tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

bug785684-x-ref.html (3267B)

      1 <html><head>
      2 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      3 <style type="text/css">
      4    .outer {
      5     display:table;
      6     height:20px;
      7     width:300px;
      8     max-width:300px;            
      9 }
     10 
     11 .inner {  
     12     background-color: silver;
     13     display:table-cell;
     14     height:20px;
     15     min-height:20px;
     16     width:150px;
     17     max-width:150px;
     18     padding: 4px;
     19 }
     20 .inner.clipped {
     21     padding: 0;
     22 }
     23 .inner.clipped > .clip {
     24     padding: 4px;
     25 }
     26 .clip {
     27    overflow:hidden;
     28    width: 300px;
     29    box-sizing: border-box;
     30 }
     31  </style>
     32 </head>
     33 <body>
     34 <h2>Testing CSS overflow on display:table-cell</h2>
     35 <div class="outer">
     36  <div class="inner clipped">
     37    <div class="clip">
     38      <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     39    </div>
     40  </div>
     41 </div>
     42 <div class="outer">
     43  <div class="inner clipped">
     44    <div class="clip" style="overflow-x: scroll">
     45      <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     46    </div>
     47  </div>
     48 </div>
     49 <div class="outer">
     50  <div class="inner clipped">
     51    <div class="clip" style="overflow-x: clip">
     52      <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     53    </div>
     54  </div>
     55 </div>
     56 <div class="outer">
     57  <div class="inner clipped">
     58    <div class="clip" style="overflow: hidden">
     59      <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     60    </div>
     61  </div>
     62 </div>
     63 <div class="outer">
     64  <div class="inner clipped">
     65    <div class="clip" style="overflow: scroll">
     66      <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     67    </div>
     68  </div>
     69 </div>
     70 <div class="outer">
     71  <div class="inner clipped">
     72    <div class="clip" style="overflow: clip">
     73      <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     74    </div>
     75  </div>
     76 </div>
     77 <h2>Testing CSS overflow on display:table</h2>
     78 <div class="outer">
     79    <div class="inner">
     80       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     81    </div>
     82 </div>
     83 <div class="outer">
     84    <div class="inner">
     85       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     86    </div>
     87 </div>
     88 <div class="clip"><div class="outer">
     89    <div class="inner">
     90       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     91    </div>
     92 </div></div>
     93 <div class="clip"><div class="outer">
     94    <div class="inner">
     95       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
     96    </div>
     97 </div></div>
     98 <div class="outer">
     99    <div class="inner">
    100       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
    101    </div>
    102 </div>
    103 <div class="clip"><div class="outer">
    104    <div class="inner">
    105       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
    106    </div>
    107 </div></div>
    108 </body></html>