@@ -952,23 +952,35 @@ Extrinsic Size Determination</h2>
952
952
which itself depends on that percentage--
953
953
is resolved specially:
954
954
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=] ,
957
958
then the entire value of any
958
959
[=max size property=] or [=preferred size property=]
959
960
('width' /'max-width' /'height' /'max-height' )
960
961
specified as an expression containing a percentage
961
962
(such as ''10%'' or ''calc(10px + 0%)'' )
962
963
that is <a lt="cyclic percentage">cyclic</a>
963
964
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>
965
966
as that property’s [=initial value=] .
966
967
For example, given a box with ''width: calc(20px + 50%)'' ,
967
968
its max-content contribution is calculated as if its 'width' were ''width/auto'' .
968
969
(The percentage is honored as usual, however,
969
970
during the actual sizing of the box itself; see below.)
970
971
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=] ,
972
984
a <a>cyclic percentage</a> in the value of any
973
985
[=max size property=] or [=preferred size property=]
974
986
('width' /'max-width' /'height' /'max-height' ),
@@ -989,10 +1001,47 @@ Extrinsic Size Determination</h2>
989
1001
Note: We are not 100% sure if zeroing out a percentage 'max-width' on form controls is web-compatible.
990
1002
See <a href="https://github.com/w3c/csswg-drafts/issues/765">Issue 765</a> .
991
1003
992
- * For the [=min size properties=] ,
1004
+ <li id=min-percentage-contribution>
1005
+ For the [=min size properties=] ,
993
1006
as well as for margins and paddings,
994
1007
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
+
996
1045
997
1046
Then, unless otherwise specified,
998
1047
when calculating the used sizes and positions of the containing block’s <em> contents</em> :
0 commit comments