@@ -106,11 +106,11 @@ Determining The Anchor {#determining}
106
106
<!-- Big Text: a-name
107
107
108
108
███▌ █ █▌ ███▌ █ █ █████▌
109
- ▐█ ▐█ █▌ █▌ ▐█ ▐█ ██ ██ █▌
110
- █▌ █▌ ██▌ █▌ █▌ █▌ █▌█ █▐█ █▌
111
- █▌ █▌ ████▌ █▌▐█ █▌ █▌ █▌ █▌ █ ▐█ ████
112
- █████▌ █▌ ██▌ █████▌ █▌ ▐█ █▌
113
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌
109
+ ▐█ ▐█ █▌ █▌ ▐█ ▐█ ██ ██ █▌
110
+ █▌ █▌ ██▌ █▌ █▌ █▌ █▌█ █▐█ █▌
111
+ █▌ █▌ ████▌ █▌▐█ █▌ █▌ █▌ █▌ █ ▐█ ████
112
+ █████▌ █▌ ██▌ █████▌ █▌ ▐█ █▌
113
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌
114
114
█▌ █▌ █▌ ▐▌ █▌ █▌ █▌ ▐█ █████▌
115
115
-->
116
116
@@ -271,12 +271,12 @@ or nothing (a missing specifier).
271
271
<!-- Big Text: default
272
272
273
273
████▌ █████▌ █████▌ ███▌ █▌ █▌ █▌ █████▌
274
- █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
275
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
276
- █▌ █▌ ████ ████ █▌ █▌ █▌ █▌ █▌ █▌
277
- █▌ █▌ █▌ █▌ █████▌ █▌ █▌ █▌ █▌
278
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
279
- ████▌ █████▌ █▌ █▌ █▌ ███▌ █████ █▌
274
+ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
275
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
276
+ █▌ █▌ ████ ████ █▌ █▌ █▌ █▌ █▌ █▌
277
+ █▌ █▌ █▌ █▌ █████▌ █▌ █▌ █▌ █▌
278
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
279
+ ████▌ █████▌ █▌ █▌ █▌ ███▌ █████ █▌
280
280
-->
281
281
282
282
<h3 id=anchor-default>
@@ -349,8 +349,8 @@ to explicitly refer to edges of an [=anchor element=].
349
349
350
350
<!-- Big Text: inset-area
351
351
352
- ████ █ █▌ ███▌ █████▌ █████▌ ███▌ ████▌ █████▌ ███▌
353
- ▐▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ ▐█ ▐█
352
+ ████ █ █▌ ███▌ █████▌ █████▌ ███▌ ████▌ █████▌ ███▌
353
+ ▐▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ ▐█ ▐█
354
354
▐▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
355
355
▐▌ █▌▐█ █▌ ███▌ ████ █▌ ████▌ █▌ █▌ ████▌ ████ █▌ █▌
356
356
▐▌ █▌ ██▌ █▌ █▌ █▌ █████▌ █▌▐█ █▌ █████▌
@@ -564,13 +564,13 @@ will resolve the contradiction.
564
564
565
565
<!-- Big Text: anchor()
566
566
567
- ███▌ █ █▌ ███▌ █▌ █▌ ███▌ ████▌ ██ ██
568
- ▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
567
+ ███▌ █ █▌ ███▌ █▌ █▌ ███▌ ████▌ ██ ██
568
+ ▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
569
569
█▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
570
570
█▌ █▌ █▌▐█ █▌ █▌ █████▌ █▌ █▌ ████▌ █▌ ▐█
571
571
█████▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌▐█ █▌ ▐█
572
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌ ▐█
573
- █▌ █▌ █▌ ▐▌ ███▌ █▌ █▌ ███▌ █▌ █▌ ██ ██
572
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌ ▐█
573
+ █▌ █▌ █▌ ▐▌ ███▌ █▌ █▌ ███▌ █▌ █▌ ██ ██
574
574
-->
575
575
576
576
The ''anchor()'' Function {#anchor-pos}
@@ -749,12 +749,12 @@ as if by an additional ''translate()'' transform.
749
749
750
750
<!-- Big Text: a-center
751
751
752
- ███▌ ███▌ █████▌ █ █▌ █████▌ █████▌ ████▌
752
+ ███▌ ███▌ █████▌ █ █▌ █████▌ █████▌ ████▌
753
753
▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
754
754
█▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌
755
- █▌ █▌ ████▌ █▌ ████ █▌▐█ █▌ █▌ ████ ████▌
756
- █████▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌▐█
757
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
755
+ █▌ █▌ ████▌ █▌ ████ █▌▐█ █▌ █▌ ████ ████▌
756
+ █████▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌▐█
757
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
758
758
█▌ █▌ ███▌ █████▌ █▌ ▐▌ █▌ █████▌ █▌ █▌
759
759
-->
760
760
@@ -781,11 +781,6 @@ if the positioned element has a [=default anchor element=],
781
781
then it is aligned so as to center itself
782
782
over the [=default anchor element=]
783
783
in the appropriate axis.
784
- If this alignment would cause it to overflow its [=inset-modified containing block=]
785
- in the appropriate axis,
786
- it instead is aligned flush with the side that it would have overflowed;
787
- if it would overflow both sides,
788
- it's instead aligned as for ''justify-self/start'' .
789
784
790
785
Additionally,
791
786
if both [=inset properties=] in the appropriate axis are ''top/auto'' ,
@@ -805,20 +800,15 @@ or does not have a [=default anchor element=],
805
800
this value behaves as ''<self-position>/center''
806
801
and has no additional effect on how [=inset properties=] resolve.
807
802
808
- Issue: Do we want to hook the "try to stay in the IMCB" behavior to safe vs unsafe?
809
- Right now it'll only trigger fallback if it overflows both sides;
810
- it might be useful to be able to trigger fallback
811
- as soon as it can't center itself.
812
-
813
803
814
804
<!-- Big Text: scroll
815
805
816
- ███▌ ███▌ ████▌ ███▌ █▌ █▌
817
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
818
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
819
- ███▌ █▌ ████▌ █▌ █▌ █▌ █▌
820
- █▌ █▌ █▌▐█ █▌ █▌ █▌ █▌
821
- █▌ █▌ █▌ █▌ █▌ ▐█ █▌ █▌ █▌ █▌
806
+ ███▌ ███▌ ████▌ ███▌ █▌ █▌
807
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
808
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
809
+ ███▌ █▌ ████▌ █▌ █▌ █▌ █▌
810
+ █▌ █▌ █▌▐█ █▌ █▌ █▌ █▌
811
+ █▌ █▌ █▌ █▌ █▌ ▐█ █▌ █▌ █▌ █▌
822
812
███▌ ███▌ █▌ █▌ ███▌ █████ █████
823
813
-->
824
814
@@ -915,13 +905,13 @@ it resolves to ''0px''.
915
905
916
906
<!-- Big Text: a-size()
917
907
918
- ███▌ ███▌ ████ █████▌ █████▌ ██ ██
919
- ▐█ ▐█ █▌ █▌ ▐▌ ▐▌ █▌ █▌ ▐█
908
+ ███▌ ███▌ ████ █████▌ █████▌ ██ ██
909
+ ▐█ ▐█ █▌ █▌ ▐▌ ▐▌ █▌ █▌ ▐█
920
910
█▌ █▌ █▌ ▐▌ ▐▌ █▌ █▌ ▐█
921
911
█▌ █▌ ████▌ ███▌ ▐▌ █▌ ████ █▌ ▐█
922
912
█████▌ █▌ ▐▌ █ █▌ █▌ ▐█
923
- █▌ █▌ █▌ █▌ ▐▌ █ █▌ █▌ ▐█
924
- █▌ █▌ ███▌ ████ █████▌ █████▌ ██ ██
913
+ █▌ █▌ █▌ █▌ ▐▌ █ █▌ █▌ ▐█
914
+ █▌ █▌ ███▌ ████ █████▌ █████▌ ██ ██
925
915
-->
926
916
927
917
Anchor-based Sizing {#sizing}
@@ -994,11 +984,11 @@ it resolves to ''0px''.
994
984
<!-- Big Text: fallback
995
985
996
986
█████▌ ███▌ █▌ █▌ ████▌ ███▌ ███▌ █▌ █▌
997
- █▌ ▐█ ▐█ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
998
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌█▌
999
- ████ █▌ █▌ █▌ █▌ █████ █▌ █▌ █▌ ██
1000
- █▌ █████▌ █▌ █▌ █▌ █▌ █████▌ █▌ █▌█▌
1001
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
987
+ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
988
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌█▌
989
+ ████ █▌ █▌ █▌ █▌ █████ █▌ █▌ █▌ ██
990
+ █▌ █████▌ █▌ █▌ █▌ █▌ █████▌ █▌ █▌█▌
991
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
1002
992
█▌ █▌ █▌ █████ █████ ████▌ █▌ █▌ ███▌ █▌ █▌
1003
993
-->
1004
994
@@ -1192,15 +1182,15 @@ this property determines which [=position option=] to use.
1192
1182
</dl>
1193
1183
1194
1184
1195
- <!-- Big Text: @pos-try
1185
+ <!-- Big Text: @pos-try
1196
1186
1197
1187
████▌ ████▌ ███▌ ███▌ █████▌ ████▌ █ ▐▌
1198
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐▌ █
1199
- █▌▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █ ▐▌
1200
- █▌▐█ █▌ ████▌ █▌ █▌ ███▌ ████▌ █▌ ████▌ ▐▌█
1201
- █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌▐█ █▌
1202
- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌
1203
- ████▌ █▌ ███▌ ███▌ █▌ █▌ █▌ █▌
1188
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐▌ █
1189
+ █▌▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █ ▐▌
1190
+ █▌▐█ █▌ ████▌ █▌ █▌ ███▌ ████▌ █▌ ████▌ ▐▌█
1191
+ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌▐█ █▌
1192
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌
1193
+ ████▌ █▌ ███▌ ███▌ █▌ █▌ █▌ █▌
1204
1194
-->
1205
1195
1206
1196
The ''@position-try'' Rule {#fallback-rule}
0 commit comments