Skip to content

Commit 714ac76

Browse files
FremyCompanyFremyCompany
committed
[css-tables] Clarified percentage resolution for table-cell descendants
1 parent a67cac8 commit 714ac76

1 file changed

Lines changed: 157 additions & 113 deletions

File tree

‎css-tables-3/Overview.bs‎

Lines changed: 157 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Previous Version: https://www.w3.org/TR/2016/WD-css-tables-3-20161025/
1111
Previous Version: https://www.w3.org/TR/CSS2/tables.html
1212
Repository: w3c/csswg-drafts
1313
Warning: not ready
14-
Editor: Francois Remy, Microsoft, w3cid 53348
14+
Editor: Francois Remy, Invited Expert, w3cid 53348
1515
Editor: Greg Whitworth, Microsoft, w3cid 69511
1616
Former editor: Bert Bos, W3C
1717
Former editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
@@ -1892,125 +1892,30 @@ spec:css-sizing-3; type:property; text:box-sizing
18921892

18931893
The <strong>height of a table</strong> is the sum of the row heights plus any cell spacing or borders.
18941894
If the table has a 'height' property with a value other than auto, it is treated as a minimum height for the table grid,
1895-
and will eventually be distributed to the height of the rows.
1895+
and will eventually be distributed to the height of the rows if their collective <a href="#">minimum height</a> ends up smaller than this number.
1896+
If their collective size ends up being greater than the specified 'height', the specified 'height' will have no effect.
18961897

18971898
The <strong>minimum height of a row</strong> is the maximum of:
18981899
<ul><li>the computed 'height' (if definite, percentages being considered 0px) of its corresponding table-row (if nay)
18991900
<li>the computed 'height' of each cell spanning the current row exclusively (if definite, percentages being treated as 0px), and
19001901
<li>the minimum height (<a>ROWMIN</a>) required by the cells spanning the row.</ul>
19011902

1902-
<dfn id="ROWMIN">ROWMIN</dfn> is defined as the sum of the <a href="#TODO">minimum height of the rows</a>
1903-
after a first row layout pass.
1903+
<dfn id="ROWMIN">ROWMIN</dfn> is defined as
1904+
the sum of the <a href="#row-layout">minimum height of the rows</a>
1905+
after a first row layout pass.
19041906

1905-
Once the table height has been determined, a second row layout pass must happen
1906-
to assign the correct minimum height to table rows, by taking percentages used in rows/cells specified 'height' into account.
1907+
To compute the <strong>height of a table</strong>, it is therefore necessary to
1908+
perform a first-pass layout on all its rows,
1909+
compute the sum of all minimum row heights plus spacings/borders,
1910+
and return the greater of either that value or the table-root specified 'height' (min-height).
19071911

1908-
Then, if the sum of the new heights of the table rows after this second pass
1909-
is different from what is needed to fill the table height,
1910-
the height distribution algorithm defined <a href="#height-distribution-algorithm">below</a> is applied
1911-
(either to size rows intermediately between their first minimum height and their new,
1912-
or to increase the heights of rows beyond their new minimum height;
1913-
in neither case, this will have an impact on the baseline of the rows).
1914-
1915-
<div class="advisement">
1916-
1917-
Once the final size of the table and the rows has been determined,
1918-
the content of the table-cells must also go through a second layout pass,
1919-
where, if appropriate, percentage-based heights are this time resolved
1920-
against their parent cell used height.
1921-
1922-
<div class="note">
1923-
Note that this means it is required to keep track of the usage of percentages
1924-
in the properties of any direct child of the table-cell including but not limited to
1925-
the 'height' and 'min-height' properties for horizontal flows and
1926-
the 'width' and 'min-width' properties for vertical flows.
1927-
</div>
1928-
1929-
It is appropriate to resolve percentage heights on direct children of a table-cell
1930-
if the cell is considered to have its height specified explicitly
1931-
or the child is absolutely positioned, see <a href="http://www.w3.org/TR/CSS2/visudet.html#the-height-property">CSS 2</a>.
1932-
1933-
For compat reasons, it is further clarified that
1934-
a cell is considered to have its height specified explicitly
1935-
if the computed height of the cell is a length, or
1936-
if the computed height of its table-root ancestor is a length or percentage,
1937-
regardless of whether that percentage does <a>behave as auto</a> or not.
1938-
1939-
</div>
1940-
1941-
<div class="example">
1942-
To clarify the preceding statements, here is a table of the resulting "A" div height based on the value being used:
1943-
<xmp>
1944-
<section style="height: var(--wrapper-height)">
1945-
<table style="height: var(--table-height)">
1946-
<tr>
1947-
<td style="height: var(--table-cell-height)">
1948-
1949-
<div style="height:100%; background:yellow">A</div>
1950-
1951-
</td>
1952-
<td style="height: var(--other-table-cell-height)">
1953-
1954-
B<br>C
1955-
1956-
</td>
1957-
</tr>
1958-
</table>
1959-
</section>
1960-
</xmp>
1961-
1962-
<table border="1" rules="all" style="margin: auto; font-family: 'Consolas', monospace">
1963-
<thead>
1964-
<tr>
1965-
<th>--table-cell-height&nbsp;&nbsp;</th>
1966-
<th>--table-height&nbsp;&nbsp;</th>
1967-
<th>result&nbsp;&nbsp;</th>
1968-
</tr>
1969-
</thead>
1970-
1971-
<tbody>
1972-
<tr>
1973-
<td>&lt;length&gt;</td>
1974-
<td><i style="opacity:0.5">&lt;any&gt;</i></td>
1975-
<td><img src="images/percentage-heights-hundred-percent.png" width="23" height="29" style="vertical-align: middle" alt="100%" title="Percentage honored during second layout pass"></td>
1976-
</tr>
1977-
<tr>
1978-
<td><i style="opacity:0.5">&lt;any&gt;</i></td>
1979-
<td>&lt;length&gt;</td>
1980-
<td><img src="images/percentage-heights-hundred-percent.png" width="23" height="29" style="vertical-align: middle" alt="100%" title="Percentage honored during second layout pass"></td>
1981-
</tr>
1982-
<tr>
1983-
<td><i style="opacity:0.5">&lt;any&gt;</i></td>
1984-
<td>&lt;percentage&gt;</td>
1985-
<td><img src="images/percentage-heights-hundred-percent.png" width="23" height="29" style="vertical-align: middle" alt="100%" title="Percentage honored during second layout pass"></td>
1986-
</tr>
1987-
<tr>
1988-
<td>auto</td>
1989-
<td>auto</td>
1990-
<td><img src="images/percentage-heights-auto.png" width="23" height="29" style="vertical-align: middle" alt="auto" title="Percentage ignored; no second layout pass"></td>
1991-
</tr>
1992-
<tr>
1993-
<td>&lt;percentage&gt;</td>
1994-
<td>auto</td>
1995-
<td><img src="images/percentage-heights-auto.png" width="23" height="29" style="vertical-align: middle" alt="auto" title="Percentage ignored; no second layout pass"></td>
1996-
</tr>
1997-
</tbody>
1998-
</table>
1999-
2000-
Note that neither <code>--other-table-cell-height</code> nor <code>--wrapper-height</code> do influence the algorithm's outcome.
2001-
2002-
A previous version of this specification incorrectly stated that <code>--wrapper-height</code> was taken into account when the table had a percentage height,
2003-
but compat issues appeared when an implementation landed, and the behavior was then special-cased.
2004-
2005-
</div>
2006-
2007-
<div class="note">
2008-
It is possible that this second layout pass (where height percentages are being resolved)
2009-
will make some cell contents overflow their parent cell. This is by design.
2010-
</div>
1912+
Once the table height has been determined,
1913+
rows will usually get a <a href="#row-relayout">second layout pass</a> (where their cells' heights are no longer considered auto),
1914+
then <a href="#height-distribution-algorithm">height distribution</a> will happen to adjust their heights to collectively meet the table height,
1915+
then table-cell descendants might get a <a href="#table-cell-content-relayout">second layout</a> (where their percentage heights are resolved).
20111916

20121917
<!--——————————————————————————————————————————————————————————————————————————-->
2013-
<h4 id="row-layout">Row layout</h3>
1918+
<h4 id="row-layout">Row layout (first pass)</h3>
20141919

20151920
The <strong>minimum height of a row</strong> (without spanning-related height distribution)
20161921
is defined as the height of
@@ -2021,14 +1926,22 @@ spec:css-sizing-3; type:property; text:box-sizing
20211926
but their other properties are conserved.
20221927

20231928
For the purpose of calculating this height,
2024-
descendants of table cells whose height depends on percentages of their parent cell' height
1929+
descendants of table cells whose height depends on percentages of their parent cell' height
1930+
<a href="#appropriateness-of-child-percentage-resolution">(see section below)</a>
20251931
are considered to have an auto height
20261932
if they have 'overflow' set to <code>visible</code> or <code>hidden</code>
20271933
or if they are replaced elements,
20281934
and a 0px height if they have not.
20291935
<a href="https://jsfiddle.net/0e12ve9b/">Testcase</a>
20301936
<a href="https://jsfiddle.net/0e12ve9b/3/">!!Testcase</a>
20311937

1938+
<div class="note">
1939+
For table-cell descendants whose percentage height was ignored as a result of the above,
1940+
a second layout pass of the table-cell content will happen once height distribution has concluded
1941+
to attempt to properly take this sizing into account
1942+
<a href="#resolving-percentages-heights-in-table-cell-content">(see section below)</a>
1943+
</div>
1944+
20321945
The <dnf id="table-cell-baseline">baseline of a cell</dfn> is defined as
20331946
the baseline of the first in-flow line box in the cell, or
20341947
the first in-flow table-row in the cell,
@@ -2188,7 +2101,30 @@ spec:css-sizing-3; type:property; text:box-sizing
21882101
</div>
21892102

21902103
<!--——————————————————————————————————————————————————————————————————————————-->
2191-
<h4 id="height-distribution-principles">Core distribution principles</h3>
2104+
<h4 id="row-relayout">Row layout (second pass)</h4>
2105+
2106+
Once the table height has been determined, a second row layout pass will be performed, if necessary,
2107+
to assign the correct minimum height to table rows, by taking percentages used in rows/cells specified 'height' into account.
2108+
Other than that, all instructions for the first-pass row layout apply <a href="#row-layout">(see above)</a>.
2109+
2110+
<div class="note">
2111+
Please note that this second-pass minimum height therefore still treats percentage heights of table-cell descendants as advised for the first pass
2112+
<a href="#row-layout">(see above)</a>.
2113+
For this reason, it is not required to relayout the content of table-cells to compute the new row minimum height.
2114+
If necessary, table-cell content will undergo a relayout later,
2115+
after table height distribution has concluded
2116+
<a href="#table-cell-content-relayout">(see below)</a>.
2117+
</div>
2118+
2119+
Then, if the sum of the new heights of the table rows after this second pass
2120+
is different from what is needed to fill the table height previously determined,
2121+
the height distribution algorithm defined <a href="#height-distribution-algorithm">below</a> is applied
2122+
(either to shrink rows by sizing them intermediately between their first-pass minimum height and their second-pass one,
2123+
or to increase the heights of all rows beyond their second-pass minimum height to fill the available space;
2124+
in neither case, this will have an impact on the baseline of the rows).
2125+
2126+
<!--——————————————————————————————————————————————————————————————————————————-->
2127+
<h4 id="height-distribution-principles">Core distribution principles</h4>
21922128

21932129
<div class="issue">
21942130
EDITORIAL. TODO. For current proposal, skip to [[#height-distribution-algorithm]].
@@ -2265,7 +2201,7 @@ spec:css-sizing-3; type:property; text:box-sizing
22652201
</details>
22662202

22672203
<!--——————————————————————————————————————————————————————————————————————————-->
2268-
<h4 id="height-distribution-algorithm">Distribution algorithm</h3>
2204+
<h4 id="height-distribution-algorithm">Distribution algorithm</h4>
22692205

22702206
The first step is to attribute to each row its base size and its reference size.
22712207

@@ -2311,6 +2247,114 @@ spec:css-sizing-3; type:property; text:box-sizing
23112247

23122248
</div>
23132249

2250+
<!--——————————————————————————————————————————————————————————————————————————-->
2251+
<h4 id="table-cell-content-relayout">Table-cell content layout (second pass)</h4>
2252+
2253+
Once table-height distribution has concluded, and the sum of row heights plus spacing/border is equal to the table height,
2254+
the content of table-cells which contained descendants whose percentage heights were ignored
2255+
or treated as 0px by the first-pass row layout rules <a href="#row-layout">(see above)</a>
2256+
must undergo a second layout pass, as defined below.
2257+
2258+
<div class="note">
2259+
Note that this means UAs are either required to keep track of the usage of percentages
2260+
in the properties of any direct child of the table-cell including (but not limited to)
2261+
the 'height' and 'min-height' properties for horizontal flows and
2262+
the 'width' and 'min-width' properties for vertical flows,
2263+
or else required to perform this second layout pass on table-cell content in all cases.
2264+
</div>
2265+
2266+
<dfn id="resolving-percentages-heights-in-table-cell-content">
2267+
Resolve percentage heights in table-cell content:</dfn>
2268+
Once the final size of the table and the rows has been determined,
2269+
after height distribution has concluded,
2270+
the content of the table-cells must also go through a second layout pass,
2271+
where, if <a href="#appropriateness-of-child-percentage-resolution">appropriate</a>, percentage-based heights are this time resolved
2272+
against their parent cell used height.
2273+
2274+
<dfn id="appropriateness-of-child-percentage-resolution">
2275+
It is appropriate to resolve percentage heights on direct children of a table-cell</dfn>
2276+
if the cell is considered to have its height specified explicitly
2277+
or the child is absolutely positioned, see <a href="http://www.w3.org/TR/CSS2/visudet.html#the-height-property">CSS 2</a>.
2278+
2279+
For compat reasons, it is further clarified that
2280+
a cell is considered to have its height specified explicitly
2281+
if the computed height of the cell is a length, or
2282+
if the computed height of its table-root ancestor is a length or percentage,
2283+
regardless of whether that percentage does <a>behave as auto</a> or not.
2284+
2285+
<div class="example">
2286+
To clarify the preceding statements, here is a table of the resulting "A" div height based on the value being used:
2287+
<xmp>
2288+
<section style="height: var(--wrapper-height)">
2289+
<table style="height: var(--table-height)">
2290+
<tr>
2291+
<td style="height: var(--table-cell-height)">
2292+
2293+
<div style="height:100%; background:yellow">A</div>
2294+
2295+
</td>
2296+
<td style="height: var(--other-table-cell-height)">
2297+
2298+
B<br>C
2299+
2300+
</td>
2301+
</tr>
2302+
</table>
2303+
</section>
2304+
</xmp>
2305+
2306+
<table border="1" rules="all" style="margin: auto; font-family: 'Consolas', monospace">
2307+
<thead>
2308+
<tr>
2309+
<th>--table-cell-height&nbsp;&nbsp;</th>
2310+
<th>--table-height&nbsp;&nbsp;</th>
2311+
<th>result&nbsp;&nbsp;</th>
2312+
</tr>
2313+
</thead>
2314+
2315+
<tbody>
2316+
<tr>
2317+
<td>&lt;length&gt;</td>
2318+
<td><i style="opacity:0.5">&lt;any&gt;</i></td>
2319+
<td><img src="images/percentage-heights-hundred-percent.png" width="23" height="29" style="vertical-align: middle" alt="100%" title="Percentage honored during second layout pass"></td>
2320+
</tr>
2321+
<tr>
2322+
<td><i style="opacity:0.5">&lt;any&gt;</i></td>
2323+
<td>&lt;length&gt;</td>
2324+
<td><img src="images/percentage-heights-hundred-percent.png" width="23" height="29" style="vertical-align: middle" alt="100%" title="Percentage honored during second layout pass"></td>
2325+
</tr>
2326+
<tr>
2327+
<td><i style="opacity:0.5">&lt;any&gt;</i></td>
2328+
<td>&lt;percentage&gt;</td>
2329+
<td><img src="images/percentage-heights-hundred-percent.png" width="23" height="29" style="vertical-align: middle" alt="100%" title="Percentage honored during second layout pass"></td>
2330+
</tr>
2331+
<tr>
2332+
<td>auto</td>
2333+
<td>auto</td>
2334+
<td><img src="images/percentage-heights-auto.png" width="23" height="29" style="vertical-align: middle" alt="auto" title="Percentage ignored; no second layout pass"></td>
2335+
</tr>
2336+
<tr>
2337+
<td>&lt;percentage&gt;</td>
2338+
<td>auto</td>
2339+
<td><img src="images/percentage-heights-auto.png" width="23" height="29" style="vertical-align: middle" alt="auto" title="Percentage ignored; no second layout pass"></td>
2340+
</tr>
2341+
</tbody>
2342+
</table>
2343+
2344+
Note that neither <code>--other-table-cell-height</code> nor <code>--wrapper-height</code> do influence the algorithm's outcome.
2345+
2346+
A previous version of this specification incorrectly stated that <code>--wrapper-height</code> was taken into account when the table had a percentage height,
2347+
but compat issues appeared when an implementation landed, and the behavior was then special-cased.
2348+
2349+
</div>
2350+
2351+
<div class="note">
2352+
It is possible that this second layout pass (where height percentages are being resolved)
2353+
will make some cell contents overflow their parent cell,
2354+
for instance if the sum of all percentages used is superior to 100%.
2355+
This is by design.
2356+
</div>
2357+
23142358
<!--——————————————————————————————————————————————————————————————————————————-->
23152359
<h3 id="bounding-box-assignment">Positioning of cells, captions and other internal table boxes</h3>
23162360

0 commit comments

Comments
 (0)