@@ -605,6 +605,35 @@ spec:css22; type:property; text:display
605605 to make it easier to understand.
606606 </p>
607607 <img src="images/CSS-Tables-Layout-Merged.svg" style="width: 100%" />
608+ <details style="border: 3px solid silver">
609+ <summary style="background:silver"> Legend</summary>
610+ <div>
611+
612+ <b> Sizing algorithms: </b>
613+ Each drawing of the table represents a way of sizing the columns.
614+ The four cases in the left are the sizing-guesses described above in the spec:
615+ <a href="#min-content-guess">min-content</a> ,
616+ <a href="#min-content-percentage-guess">min-content-percentage</a> ,
617+ <a href="#min-content-specified-guess">min-content-specified</a> , and
618+ <a href="#max-content-guess">max-content</a> .
619+ The cases on the right are interpolations required for sizes that do not match exactly one of the four sizing-guesses.
620+
621+ <b> Choice of sizing method: </b>
622+ The sizing method selection always starts by the min-content sizing-guess (top let),
623+ and then proceeds by comparing the available space and the space consumed by the method currently in use.
624+ Green arrows is the direction you should follow
625+ if you have extra space to distribute after applying the current method.
626+ Red arrows is the direction you should follow
627+ if you have distributed too much space by applying the current method and need to backtrack.
628+
629+ <b> Columns types: </b>
630+ Each type of column (auto, px, %) has its own color (yellow, blue, orange).
631+ In an interpolation:
632+ columns that get shrinked down from their size in previous sizing-guess are repainted red, and
633+ columns that get expanded from their size in previous sizing-guess are repainted green.
634+
635+ </div>
636+ </details>
608637 <figcaption> Overview of the table layout algorithm. Not normative.</figcaption>
609638 </figure>
610639
@@ -1645,13 +1674,13 @@ spec:css22; type:property; text:display
16451674 - <dfn>auto-column</dfn> :<br>
16461675 any other column
16471676
1648- Then, valid sizing methods are to be assigned to the columns by sizing type, yielding the following guesses:
1677+ Then, valid sizing methods are to be assigned to the columns by sizing type, yielding the following sizing- guesses:
16491678
16501679 <ol>
1651- <li> The <dfn>min-content guess</dfn> is the set of column width assignments where
1680+ <li> The <dfn>min-content sizing- guess</dfn> is the set of column width assignments where
16521681 each column is assigned its min-content width.
16531682
1654- <li> The <dfn>min-content-percentage guess</dfn> is the set of column width assignments where:
1683+ <li> The <dfn>min-content-percentage sizing- guess</dfn> is the set of column width assignments where:
16551684 <ul>
16561685 <li> each <a>percent-column</a>
16571686 is assigned the larger of:
@@ -1663,7 +1692,7 @@ spec:css22; type:property; text:display
16631692 <li> all other columns are assigned their min-content width.
16641693 </ul>
16651694
1666- <li> The <dfn>min-content-specified guess</dfn> is the set of column width assignments where:
1695+ <li> The <dfn>min-content-specified sizing- guess</dfn> is the set of column width assignments where:
16671696 <ul>
16681697 <li> each <a>percent-column</a>
16691698 is assigned the larger of:
@@ -1678,7 +1707,7 @@ spec:css22; type:property; text:display
16781707 <li> all other columns are assigned their min-content width.
16791708 </ul>
16801709
1681- <li> The <dfn>max-content guess</dfn> is the set of column width assignments where:
1710+ <li> The <dfn>max-content sizing- guess</dfn> is the set of column width assignments where:
16821711 <ul>
16831712 <li> each <a>percent-column</a>
16841713 is assigned the larger of:
@@ -1695,18 +1724,18 @@ spec:css22; type:property; text:display
16951724 Note that:
16961725
16971726 - The <a>assignable table width</a> is always greater than or equal
1698- to the table width resulting from the min-content guess.
1699- - The widths for each column in the four guesses
1700- (min-content guess , min-content-percentage guess , min-content-specified guess , and max-content guess )
1727+ to the table width resulting from the min-content sizing- guess.
1728+ - The widths for each column in the four sizing- guesses
1729+ (min-content, min-content-percentage, min-content-specified, and max-content)
17011730 are in nondecreasing order.
17021731
17031732 </div>
17041733
1705- If the <a>assignable table width</a> is less than or equal to the <a>max-content guess</a> ,
1734+ If the <a>assignable table width</a> is less than or equal to the <a>max-content sizing- guess</a> ,
17061735 the used widths of the columns must be the linear combination (with weights adding to 1)
1707- of the two consecutive guesses whose width sums bound the available width.
1736+ of the two consecutive sizing- guesses whose width sums bound the available width.
17081737
1709- Otherwise, the used widths of the columns are the result of starting from the <a>max-content guess</a>
1738+ Otherwise, the used widths of the columns are the result of starting from the <a>max-content sizing- guess</a>
17101739 and distributing the excess width to the columns of the table
17111740 according to the rules for <a>distributing excess width to columns</a> (for used width).
17121741
0 commit comments