tor-browser

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

table-margin-004.xht (2608B)

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3     <head>
      4         <title>CSS Test: CSS Tables: Margin Collapsing</title>
      5         <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch" />
      6         <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-12-12 -->
      7         <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/016.xml" type="application/xhtml+xml" />
      8         <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" />
      9         <link rel="match" href="reference/table-margin-004-ref.xht" />
     10 
     11         <meta name="flags" content="ahem" />
     12 
     13         <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     14         <style type="text/css">
     15             div#wrapper
     16             {
     17                 border: blue solid medium;
     18                 height: 180px;
     19                 /*
     20                   20px (margin-top) + 20px (content) + max(20px, 20px) 1st div table
     21                 + 20px (content) + max(20px, 20px)  2nd div table
     22                 + 20px (content) + max(20px, 20px)  1st p table
     23                 + 20px (content) + 20px 2nd p table
     24                 ========================================================
     25                 180px
     26                 */
     27             }
     28 
     29             .table
     30             {
     31                 border-spacing: 0;
     32                 display: table;
     33                 font: 20px/1 Ahem;
     34                 height: 1em;
     35                 margin: 1em;
     36             }
     37 
     38             div.table-row
     39             {
     40                 display: table-row;
     41             }
     42 
     43             div.cell
     44             {
     45                 display: table-cell;
     46             }
     47         </style>
     48     </head>
     49     <body>
     50         <p>Test passes if there are 4 black bars which do not overflow a wide blue rectangle. The black bars are evenly distributed (vertically) in the blue rectangle: the gap between the blue border at the top and the first black bar should be equal to the gap between the 4th bar and the blue border at the bottom.</p>
     51 
     52         <div id="wrapper">
     53             <div class="table">
     54                 <div class="table-row">
     55                     <div class="cell">Test</div>
     56                 </div>
     57             </div>
     58             <div class="table">
     59                 <div class="table-row">
     60                     <div class="cell">Test</div>
     61                 </div>
     62             </div>
     63             <p class="table">Test</p>
     64             <p class="table">Test</p>
     65         </div>
     66 
     67     </body>
     68 </html>