Skip to content

Commit dac1559

Browse files
tabatkinstabatkins
committed
[css-position-3] Add a note to 'inset' about it resolving against the physical longhands.
1 parent 5f0bb95 commit dac1559

1 file changed

Lines changed: 69 additions & 53 deletions

File tree

‎css-position-3/Overview.bs‎

Lines changed: 69 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ Link Defaults: css-transforms-1 (property) transform
9999
</style>
100100

101101
<pre class=anchors>
102-
urlPrefix: https://www.w3.org/TR/CSS2/visuren.html; spec: CSS2;
102+
urlPrefix: https://www.w3.org/TR/CSS2/visuren.html; spec: CSS2;
103103
url: #normal-flow; text: normal flow; type: dfn;
104104
url: #x1; text: viewport; type: dfn;
105105
urlPrefix: https://www.w3.org/TR/CSS21/media.html; spec: CSS2;
@@ -130,7 +130,7 @@ Introduction</h2>
130130
* [=Sticky positioning=], which visually shifts a box relative to its laid-out location
131131
in order to keep it visible when a scrollable ancestor
132132
would otherwise scroll it out of sight.
133-
* [=Absolute positioning=], which ignores normal layout entirely,
133+
* [=Absolute positioning=], which ignores normal layout entirely,
134134
pulling the element [=out of flow=] and
135135
positioning it relative to its [=containing block=]
136136
with no regard for other content.
@@ -150,7 +150,7 @@ Introduction</h2>
150150
<h3 id="placement">
151151
Module Interactions</h3>
152152

153-
This module replaces and extends the [=positioning scheme=] features
153+
This module replaces and extends the [=positioning scheme=] features
154154
defined in [[!CSS2]] sections:
155155

156156
<ul>
@@ -326,7 +326,7 @@ Containing Blocks of Positioned Boxes</h3>
326326
</dl>
327327

328328
If no ancestor establishes one,
329-
the [=absolute positioning containing block=] is
329+
the [=absolute positioning containing block=] is
330330
the [=initial containing block=].
331331

332332
Note: Properties that can cause a box to establish
@@ -489,7 +489,7 @@ Box Insets: the 'top', 'right', 'bottom', 'left', 'inset-block-start', 'inset-in
489489
in the corresponding axis
490490
(e.g. width for 'left' or 'right', height for 'top' and 'bottom').
491491
For [=sticky positioned=] boxes,
492-
the inset is instead
492+
the inset is instead
493493
relative to the relevant [=scrollport=]’s size.
494494
Negative values are allowed.
495495

@@ -544,6 +544,22 @@ Box Insets Shorthands: the 'inset-block', 'inset-inline', and 'inset' properties
544544
assigning values to the longhands representing each side
545545
exactly as the 'margin' property does for its longhands.
546546

547+
<div class=note>
548+
549+
By default, the 'inset' property values
550+
are assigned to the corresponding <em>[=physical=]</em> [=longhand properties=]--
551+
'top', 'right', 'bottom', and 'left'--
552+
which for historical reasons do not have an <css>inset-</css> prefix.
553+
This matches the behavior of other "4 values assigned to sides" properties,
554+
such as 'margin'.
555+
556+
Allowing properties such as this to resolve to the [=flow-relative=] [=longhands=] is under discussion in [[CSS-LOGICAL-1]].
557+
558+
Yes, we understand it's a little confusing
559+
that 'inset' doesn't expand to any 'inset-*' properties.
560+
</div>
561+
562+
547563

548564
<h3 id="relpos-insets" oldids="relpos">
549565
Relative Positioning</h3>
@@ -607,7 +623,7 @@ Sticky positioning</h3>
607623
in reference to the [=nearest scrollport=].
608624

609625
For a [=sticky positioned=] [=box=],
610-
the [=inset properties=]
626+
the [=inset properties=]
611627
represent insets from the respective edges of the [=nearest scrollport=],
612628
defining the <dfn export>sticky view rectangle</dfn>
613629
used to constrain the box’s position.
@@ -670,7 +686,7 @@ Scroll Position of Sticky-Positioned Boxes</h4>
670686
For example, if a user clicks a link targetting a [=sticky-positioned=] element,
671687
even if the element's [=nearest scrollport=] is currently scrolled
672688
such that the [=sticky positioned=] element is offset from its initial position,
673-
the [=scrollport=] will be scrolled back
689+
the [=scrollport=] will be scrolled back
674690
so that the element's initial position is visible.
675691
</div>
676692

@@ -712,7 +728,7 @@ Absolute (and Fixed) Positioning</h3>
712728
(<var>containing block size</var> - 2 &times; |<var>start distance</var>|);
713729
otherwise,
714730
set the end-edge [=inset property=] to zero
715-
and the start-edge [=inset property=] to
731+
and the start-edge [=inset property=] to
716732
(<var>containing block size</var> - 2 &times; |<var>end distance</var>|).
717733
</dl>
718734

@@ -1162,7 +1178,7 @@ The width of absolute or fixed positioned, replaced elements</h3>
11621178

11631179
<li>
11641180
If at this point the values are over-constrained,
1165-
ignore the value for either 'left'
1181+
ignore the value for either 'left'
11661182
(in case the 'direction' property of the <a>containing block</a> is ''rtl'')
11671183
or 'right' (in case 'direction' is ''ltr'')
11681184
and solve for that value.
@@ -1171,8 +1187,8 @@ The width of absolute or fixed positioned, replaced elements</h3>
11711187
<h3 id="abs-non-replaced-height">
11721188
The Height Of Absolutely Positioned, Non-Replaced Elements</h3>
11731189

1174-
For absolutely positioned elements,
1175-
the used values of the vertical dimensions
1190+
For absolutely positioned elements,
1191+
the used values of the vertical dimensions
11761192
must satisfy this constraint:
11771193

11781194
<code>
@@ -1181,95 +1197,95 @@ The Height Of Absolutely Positioned, Non-Replaced Elements</h3>
11811197
= <span>height of containing block</span>
11821198
</code>
11831199

1184-
If all three of 'top', 'height', and 'bottom' are ''top/auto'':
1185-
First set any ''top/auto'' values for 'margin-top' and 'margin-bottom' to ''0'',
1186-
then set 'top' to the static position,
1200+
If all three of 'top', 'height', and 'bottom' are ''top/auto'':
1201+
First set any ''top/auto'' values for 'margin-top' and 'margin-bottom' to ''0'',
1202+
then set 'top' to the static position,
11871203
and finally apply rule number <em>three</em> below.
11881204

1189-
If none of the three are ''top/auto'':
1205+
If none of the three are ''top/auto'':
11901206
If both 'margin-top' and 'margin-bottom' are ''top/auto'',
1191-
solve the equation under the extra constraint that the two margins get equal values.
1192-
If one of 'margin-top' or 'margin-bottom' is ''top/auto'',
1193-
solve the equation for that value.
1194-
If the values are over-constrained,
1207+
solve the equation under the extra constraint that the two margins get equal values.
1208+
If one of 'margin-top' or 'margin-bottom' is ''top/auto'',
1209+
solve the equation for that value.
1210+
If the values are over-constrained,
11951211
ignore the value for 'bottom' and solve for that value.
11961212

1197-
Otherwise,
1198-
set ''top/auto'' values for 'margin-top' and 'margin-bottom' to ''0'',
1213+
Otherwise,
1214+
set ''top/auto'' values for 'margin-top' and 'margin-bottom' to ''0'',
11991215
and pick one of the following six rules that apply.
12001216

12011217
1. If 'top' and 'height' are ''top/auto''
1202-
and 'bottom' is not ''top/auto'',
1203-
then the height is based on the
1218+
and 'bottom' is not ''top/auto'',
1219+
then the height is based on the
12041220
<a href="https://www.w3.org/TR/CSS2/visudet.html#root-height">Auto heights for block formatting context roots</a>,
12051221
and solve for 'top'.
12061222

1207-
2. If 'top' and 'bottom' are ''top/auto''
1208-
and 'height' is not ''top/auto'',
1209-
then set 'top' to the static position,
1223+
2. If 'top' and 'bottom' are ''top/auto''
1224+
and 'height' is not ''top/auto'',
1225+
then set 'top' to the static position,
12101226
then solve for 'bottom'.
12111227

1212-
3. If 'height' and 'bottom' are ''top/auto''
1213-
and 'top' is not ''top/auto'',
1214-
then the height is based on the
1228+
3. If 'height' and 'bottom' are ''top/auto''
1229+
and 'top' is not ''top/auto'',
1230+
then the height is based on the
12151231
<a href="https://www.w3.org/TR/CSS2/visudet.html#root-height">Auto heights for block formatting context roots</a>,
12161232
and solve for 'bottom'.
12171233

1218-
4. If 'top' is ''top/auto'',
1219-
'height' and 'bottom' are not ''top/auto'',
1234+
4. If 'top' is ''top/auto'',
1235+
'height' and 'bottom' are not ''top/auto'',
12201236
then solve for 'top'.
12211237

1222-
5. If 'height' is ''top/auto'',
1223-
'top' and 'bottom' are not ''top/auto'',
1238+
5. If 'height' is ''top/auto'',
1239+
'top' and 'bottom' are not ''top/auto'',
12241240
then solve for 'height'.
12251241

1226-
6. If 'bottom' is ''top/auto'',
1227-
'top' and 'height' are not ''top/auto'',
1242+
6. If 'bottom' is ''top/auto'',
1243+
'top' and 'height' are not ''top/auto'',
12281244
then solve for 'bottom'.
12291245

12301246
<h3 id="abs-replaced-height">
12311247
The Height Of Absolutely Positioned, Replaced Elements</h3>
12321248

1233-
If 'height' and 'width' both have computed values of ''top/auto''
1234-
and the element also has an intrinsic height,
1249+
If 'height' and 'width' both have computed values of ''top/auto''
1250+
and the element also has an intrinsic height,
12351251
then that intrinsic height is the used value of 'height'.
12361252

1237-
Otherwise, if 'height' has a computed value of ''top/auto''
1238-
and the element has an intrinsic ratio
1253+
Otherwise, if 'height' has a computed value of ''top/auto''
1254+
and the element has an intrinsic ratio
12391255
then the used value of 'height' is:
12401256

12411257
<code>(used width) / (intrinsic ratio)</code></p>
12421258

1243-
Otherwise, if 'height' has a computed value of ''top/auto''
1244-
and the element has an intrinsic height,
1259+
Otherwise, if 'height' has a computed value of ''top/auto''
1260+
and the element has an intrinsic height,
12451261
then that intrinsic height is the used value of 'height'.
12461262

1247-
Otherwise, if 'height' has a computed value of ''top/auto'',
1248-
but none of the conditions above are met,
1249-
then the used value of 'height' must be set to
1250-
the height of the largest rectangle that has a 2:1 ratio,
1251-
has a height not greater than ''150px'',
1263+
Otherwise, if 'height' has a computed value of ''top/auto'',
1264+
but none of the conditions above are met,
1265+
then the used value of 'height' must be set to
1266+
the height of the largest rectangle that has a 2:1 ratio,
1267+
has a height not greater than ''150px'',
12521268
and has a width not greater than the device width.
12531269

1254-
After establishing the 'height',
1255-
in order to position the replaced element,
1270+
After establishing the 'height',
1271+
in order to position the replaced element,
12561272
apply the following rules as appropriate.
12571273

1258-
1. If both 'top' and 'bottom' have the value ''top/auto'',
1274+
1. If both 'top' and 'bottom' have the value ''top/auto'',
12591275
replace 'top' with the element’s static position.
12601276

1261-
2. If 'bottom' is ''top/auto'',
1277+
2. If 'bottom' is ''top/auto'',
12621278
replace any ''top/auto'' on 'margin-top' or 'margin-bottom'
12631279
with ''0''.
12641280

12651281
3. If at this point both 'margin-top' and 'margin-bottom' are still ''top/auto'',
1266-
solve the equation under the extra constraint
1282+
solve the equation under the extra constraint
12671283
that the two margins must get equal values.
12681284

1269-
4. If at this point there is only one ''top/auto'' remaining,
1285+
4. If at this point there is only one ''top/auto'' remaining,
12701286
solve the equation for that value.
12711287

1272-
5. If at this point the values are over-constrained,
1288+
5. If at this point the values are over-constrained,
12731289
ignore the value for 'bottom' and solve for that value.
12741290

12751291
<h2 id="comparison">

0 commit comments

Comments
 (0)