How is the rendering of the table captured?

How is the rendering of the table captured? According to 17.5.2.1 "Fixed Table Layout" (from W3):

In the fixed table layout algorithm, the width of each column is determined as follows:

1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.

2. Otherwise, the cell in the first row with a value other than "auto" for the width property determines the width for that column.

I guess we check the width of the col element first, and if it sets something like 100px we use it and nothing else. However, the following layout proves that I am wrong. It's as if the browser were calculating MAX (col.width, first-td.width). What am I missing here? Have I misunderstood the definition of W3? Thanks to

Violin:

http://jsfiddle.net/91qozmnb/

HTML:

<table>
    <colgroup>
        <col />
        <col />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>test1
            </td>
            <td>test2
            </td>
            <td>test3
            </td>
        </tr>
    </tbody>
</table>

      

        
        
        
      

    

CSS

table
{
    table-layout:fixed;
    border-spacing:0px;
}
table > colgroup > col:nth-child(1)
{
    width:100px;
}
table > colgroup > col:nth-child(2)
{
    width:150px;
}
table > colgroup > col:nth-child(3)
{
    width:200px;
}
table > tbody > tr > td
{
    border:5px solid lightgray;
    padding:0px;
    box-sizing:border-box;
}
table > tbody > tr > td:nth-child(1)
{
    width:200px;
}
table > tbody > tr > td:nth-child(2)
{
    width:150px;
}
table > tbody > tr > td:nth-child(3)
{
    width:100px;
}