Skip to content

Commit c0a4c57

Browse files
committed
[css-sizing-3] Add missing case to cyclic percentage list, and add summarizing table.
1 parent 48d5b78 commit c0a4c57

File tree

1 file changed

+55
-6
lines changed

1 file changed

+55
-6
lines changed

css-sizing-3/Overview.bs

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -952,23 +952,35 @@ Extrinsic Size Determination</h2>
952952
which itself depends on that percentage--
953953
is resolved specially:
954954

955-
956-
* If the box is [=non-replaced=],
955+
<ol type=a>
956+
<li id=non-replaced-percentage-contribution>
957+
If the box is [=non-replaced=],
957958
then the entire value of any
958959
[=max size property=] or [=preferred size property=]
959960
('width'/'max-width'/'height'/'max-height')
960961
specified as an expression containing a percentage
961962
(such as ''10%'' or ''calc(10px + 0%)'')
962963
that is <a lt="cyclic percentage">cyclic</a>
963964
is treated
964-
<em>for the purpose of calculating the box’s intrinsic size contribution only</em>
965+
<em>for the purpose of calculating the box’s intrinsic size contributions only</em>
965966
as that property’s [=initial value=].
966967
For example, given a box with ''width: calc(20px + 50%)'',
967968
its max-content contribution is calculated as if its 'width' were ''width/auto''.
968969
(The percentage is honored as usual, however,
969970
during the actual sizing of the box itself; see below.)
970971

971-
* If the box is [=replaced element|replaced=],
972+
<li id=replaced-percentage-max-contribution>
973+
Likewise, if the box is [=replaced element|replaced=],
974+
then the entire value of any
975+
[=max size property=] or [=preferred size property=]
976+
specified as an expression containing a percentage
977+
that is <a lt="cyclic percentage">cyclic</a>
978+
is treated
979+
<em>for the purpose of calculating the box’s <a>max-content contributions</a> only</em>
980+
as that property’s [=initial value=].
981+
982+
<li id=replaced-percentage-min-contribution>
983+
If the box is [=replaced element|replaced=],
972984
a <a>cyclic percentage</a> in the value of any
973985
[=max size property=] or [=preferred size property=]
974986
('width'/'max-width'/'height'/'max-height'),
@@ -989,10 +1001,47 @@ Extrinsic Size Determination</h2>
9891001
Note: We are not 100% sure if zeroing out a percentage 'max-width' on form controls is web-compatible.
9901002
See <a href="https://github.com/w3c/csswg-drafts/issues/765">Issue 765</a>.
9911003

992-
* For the [=min size properties=],
1004+
<li id=min-percentage-contribution>
1005+
For the [=min size properties=],
9931006
as well as for margins and paddings,
9941007
a <a>cyclic percentage</a> is resolved against zero
995-
for determining the intrinsic size contribution.
1008+
for determining intrinsic size contributions.
1009+
</ol>
1010+
1011+
<table class="data">
1012+
<caption>Summary of the Cyclic-Percentage Intrinsic Size Contribution Rules (Above)</caption>
1013+
<colgroup span=1></colgroup>
1014+
<colgroup span=2></colgroup>
1015+
<colgroup span=2></colgroup>
1016+
<thead>
1017+
<tr>
1018+
<th scope=row>Element Type
1019+
<th colspan=2 scope=colgroup>[=Replaced=]
1020+
<th colspan=2 scope=colgroup>[=Non-replaced=]
1021+
<tr>
1022+
<th scope=row>Contribution Type
1023+
<th scope=col>[=min-content contribution|min-content=]
1024+
<th scope=col>[=max-content contribution|max-content=]
1025+
<th scope=col>[=min-content contribution|min-content=]
1026+
<th scope=col>[=max-content contribution|max-content=]
1027+
<tbody>
1028+
<tr>
1029+
<th scope=row>[=min size property|min size=] & [=margin properties|margin=]/[=padding properties|padding=]
1030+
<td><a href="#min-percentage-contribution">zeroᵈ</a>
1031+
<td><a href="#min-percentage-contribution">zeroᵈ</a>
1032+
<td><a href="#min-percentage-contribution">zeroᵈ</a>
1033+
<td><a href="#min-percentage-contribution">zeroᵈ</a>
1034+
<tr>
1035+
<th scope=row>[=max size property|max=] & [=preferred size property|preferred size=]
1036+
<td><a href="#replaced-percentage-min-contribution">zeroᶜ</a>
1037+
<td><a href="#replaced-percentage-max-contribution">initialᵇ</a>
1038+
<td><a href="#non-replaced-percentage-contribution">initialᵃ</a>
1039+
<td><a href="#non-replaced-percentage-contribution">initialᵃ</a>
1040+
</table>
1041+
<style>
1042+
table.data th[scope=row] { text-align: right; text-align: end; }
1043+
</style>
1044+
9961045

9971046
Then, unless otherwise specified,
9981047
when calculating the used sizes and positions of the containing block’s <em>contents</em>:

0 commit comments

Comments
 (0)