tor-browser

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

fixed-table-layout-003e10.xht (3954B)

      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: table-layout: fixed - cell in the first row with specified width</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#fixed-table-layout" />
     11   <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0502.html" title="[css21] Section 17.5.2.1 should be clarified" />
     12   <link rel="match" href="fixed-table-layout-003e10-ref.xht" />
     13 
     14   <meta name="assert" content="A cell in the first row with specified non-auto 'width' sets the width for its column in the absence of a column element with specified non-auto width. This test checks the 'border-collapse: collapse' model with non-zero symetrical horizontal cell padding and with one non-zero horizontal cell border." />
     15 
     16   <style type="text/css"><![CDATA[
     17   div, table {font: 1.25em/1.2 serif;}
     18 
     19   table
     20   {
     21   border-collapse: collapse;
     22   table-layout: fixed;
     23   width: 300px;
     24   }
     25 
     26   td {padding: 0px 24px;}
     27 
     28   td#tested-cell
     29   {
     30   background-color: blue;
     31   border-left: orange solid 0px;
     32   border-right: orange solid 72px;
     33   color: blue;
     34   width: 80px;
     35   }
     36 
     37   div#reference
     38   {
     39   background-color: black;
     40   color: black;
     41   margin-left: 68px;
     42 
     43 
     44   /*
     45 
     46   "
     47   In the fixed table layout algorithm, the width of each column is determined as follows:
     48 
     49   (...) a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. (...)
     50     Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).
     51   "
     52   Section 17.5.2.1 Fixed table layout
     53   http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
     54 
     55 
     56   Middle column width calculations
     57   --------------------------------
     58 
     59    24px : padding-left of the cell in the middle column
     60  +
     61    80px : width of the cell in the middle column
     62  +
     63    24px : padding-right of the cell in the middle column
     64  +
     65    36px : half of border-right since such border must be split with cell in 3rd column
     66 
     67   =======
     68   164px : width of the middle column
     69 
     70 
     71   So,
     72       300px : table set width
     73     -
     74       164px : width of the middle column
     75       ======
     76       136px
     77 
     78       So, each of the 2 remaining columns must be
     79       half of such extra horizontal table space,
     80       which is 136px divided by 2 == 68px.
     81 
     82   1st column width calculations
     83   -----------------------------
     84 
     85     24px    : padding-left of cell in 1st column
     86   +
     87     (solve) : width of cell in 1st column
     88   +
     89     24px    : padding-right of cell in 1st column
     90 
     91    ======
     92     68px    : width of 1st column
     93 
     94   So, the width of the cell in first column must be exactly 20px.
     95 
     96 
     97   3rd column width calculations
     98   -----------------------------
     99 
    100     36px    : border-left of cell in 3rd column
    101 
    102     24px    : padding-left of cell in 3rd column
    103   +
    104     (solve) : width of cell in 3rd column
    105   +
    106     24px    : padding-right of cell in 3rd column
    107    =======
    108     68px    : width of 3rd column
    109 
    110    So, the width of the cell in 3rd column must be exactly -16px !
    111 
    112 
    113   Finally, the precise horizontal point where the border-right of cell
    114   in first column begins to be drawn, painted is:
    115 
    116     24px    : padding left of cell in 1st column
    117   +
    118     20px    : width of cell in 1st column
    119   +
    120     24px    : padding right of cell in 1st column
    121   =======
    122     68px
    123 
    124   Therefore the margin-left: 68px value of the div#reference.
    125 
    126   */
    127 
    128   width: 200px;
    129   }
    130   ]]></style>
    131 
    132  </head>
    133 
    134  <body>
    135 
    136   <p>Test passes if the blue stripe and orange stripe are as a whole <strong>exactly as wide as</strong> the black stripe.</p>
    137 
    138   <table>
    139 
    140    <col />
    141    <col />
    142    <col />
    143 
    144    <tr>
    145     <td></td>
    146     <td id="tested-cell">E10</td>
    147     <td></td>
    148    </tr>
    149 
    150   </table>
    151 
    152   <div id="reference">200px wide</div>
    153 
    154  </body>
    155 </html>