tor-browser

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

separated-border-model-004d.xht (2947B)

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      2 
      3 <html xmlns="http://www.w3.org/1999/xhtml">
      4 
      5  <head>
      6 
      7   <title>CSS Test: width of CSS table in border-collapse separate model</title>
      8 
      9   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
     10   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model" />
     11   <link rel="match" href="separated-border-model-004d-ref.xht" />
     12 
     13   <meta content="The width of a CSS table is the distance from the left inner padding edge to the right inner padding edge (including the table border-spacing but excluding table padding and table borders)." name="assert" />
     14 
     15   <style type="text/css"><![CDATA[
     16   div#table-width-set
     17   {
     18   background-color: green;
     19   border-left: white solid 32px;
     20   border-top: white solid 8px;
     21   border-spacing: 17px 0;
     22   display: table;
     23   padding: 0px;
     24   table-layout: fixed;
     25   width: 100px;
     26   /*
     27   The set width (100px) of this CSS table is larger than sum of columns plus
     28   border spacing
     29 
     30    17px   (left-most border-spacing)
     31  +
     32    16px   (div#td's width)
     33  +
     34    17px   (right-most border-spacing)
     35   ======
     36    50px : sum of columns plus border spacing
     37 
     38   100px (width of table)
     39  -
     40    50px (sum of columns plus border spacing)
     41   ======
     42    50px : such extra (exceeding) 50px width will be distributed
     43    over the columns, therefore given to the unique cell of such
     44    div#table-width-set .
     45   */
     46   }
     47 
     48   div.tr {display: table-row;}
     49 
     50   div.td
     51   {
     52   display: table-cell;
     53   height: 100px;
     54   width: 16px;
     55   }
     56 
     57   div#table-sum-of-columns
     58   {
     59   background-color: green;
     60   border-left: white solid 32px;
     61   border-top: white solid 8px;
     62   border-spacing: 42px 0;
     63   display: table;
     64   padding: 0px;
     65   table-layout: fixed;
     66   width: 9px;
     67 
     68   /*
     69   The width of a CSS table is given by the greater of the value of
     70   the 'width' property as set for the table element and the sum of the columns'
     71   width (plus border spacing):
     72 
     73   max(set width, sum of columns width plus border spacing)
     74 
     75   The set width (9px) is smaller than sum of columns (plus border spacing)
     76 
     77    42px   (left-most border-spacing)
     78  +
     79    16px   (div.td's width)
     80  +
     81    42px   (right-most border-spacing)
     82   ======
     83   100px : sum of columns plus border spacing
     84   */
     85   }
     86 
     87   div#reference
     88   {
     89   background-color: green;
     90   height: 100px;
     91   left: 32px; /* equal to the tables' border-left */
     92   position: relative;
     93   top: 8px;  /* equal to the tables' border-top */
     94   width: 100px;
     95   }
     96   ]]></style>
     97 
     98  </head>
     99 
    100  <body>
    101 
    102   <p>Test passes if there are 3 filled green squares with the <strong>same width</strong>.</p>
    103 
    104   <div id="table-width-set">
    105     <div class="tr">
    106       <div class="td"></div>
    107     </div>
    108   </div>
    109 
    110   <div id="table-sum-of-columns">
    111     <div class="tr">
    112       <div class="td"></div>
    113     </div>
    114   </div>
    115 
    116   <div id="reference"></div>
    117 
    118  </body>
    119 </html>