@@ -332,16 +332,6 @@ in ''anchor()'' and ''anchor-size()''.
332332</div>
333333
334334
335- <!--
336- ███ ██ ██ ██████ ██ ██ ███████ ████████ ███ ███
337- ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
338- ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
339- ██ ██ ██ ██ ██ ██ █████████ ██ ██ ████████ ██ ██
340- █████████ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██
341- ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
342- ██ ██ ██ ██ ██████ ██ ██ ███████ ██ ██ ███ ███
343- -->
344-
345335Anchor-Based Positioning {#positioning}
346336========================
347337
@@ -354,6 +344,17 @@ for more complex positioning or positioning relative to multiple elements,
354344the ''anchor()'' function can be used in the [=inset properties=]
355345to explicitly refer to edges of an [=anchor element=] .
356346
347+ <!-- Big Text: inset-area
348+
349+ ████ █ █▌ ███▌ █████▌ █████▌ ███▌ ████▌ █████▌ ███▌
350+ ▐▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ ▐█ ▐█
351+ ▐▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
352+ ▐▌ █▌▐█ █▌ ███▌ ████ █▌ ████▌ █▌ █▌ ████▌ ████ █▌ █▌
353+ ▐▌ █▌ ██▌ █▌ █▌ █▌ █████▌ █▌▐█ █▌ █████▌
354+ ▐▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌ █▌ █▌
355+ ████ █▌ ▐▌ ███▌ █████▌ █▌ █▌ █▌ █▌ █▌ █████▌ █▌ █▌
356+ -->
357+
357358The 'inset-area' Property {#inset-area}
358359---------------------------------------
359360
@@ -558,7 +559,16 @@ the rules for handling over-constrained [=inset properties=]
558559will resolve the contradiction.
559560
560561
562+ <!-- Big Text: anchor()
561563
564+ ███▌ █ █▌ ███▌ █▌ █▌ ███▌ ████▌ ██ ██
565+ ▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
566+ █▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
567+ █▌ █▌ █▌▐█ █▌ █▌ █████▌ █▌ █▌ ████▌ █▌ ▐█
568+ █████▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌▐█ █▌ ▐█
569+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌ ▐█
570+ █▌ █▌ █▌ ▐▌ ███▌ █▌ █▌ ███▌ █▌ █▌ ██ ██
571+ -->
562572
563573The ''anchor()'' Function {#anchor-pos}
564574---------------------------------------------------
@@ -1331,73 +1341,6 @@ This limit must be <em>at least</em> five.
13311341
13321342
13331343
1334- Fallback and Automatic Positioning {#fallback-automatic}
1335- ----------------------------------
1336-
1337- When an element TODO FILL IN NEW DETAILS,
1338- the element is said to be trying to use <dfn>automatic anchor fallbacks</dfn>
1339- in that axis.
1340-
1341- If the element has ''position-fallback: none'' ,
1342- and is trying to use [=automatic anchor fallbacks=] in one axis,
1343- it automatically generates a [=position fallback list=]
1344- consisting of two entries:
1345-
1346- * the first entry contains all the base-style properties on the element
1347- that are valid to use in ''@try'' rules,
1348- with ''anchor()/inside'' /''outside'' keywords
1349- resolved to their appropriate side.
1350- * one containing the same,
1351- but with the [=inset properties=] in the affected axis swapped
1352- (resolving the ''inside'' /''outside'' keywords accordingly).
1353-
1354- If the element uses [=automatic anchor fallbacks=] in both axises,
1355- it instead adds four entries to the [=position fallback list=] :
1356- one specifying the base styles, as above,
1357- then one reversing just the block axis,
1358- followed by one reversing just the inline axis,
1359- followed by one reversing both axises at once.
1360-
1361- [=Automatic anchor fallback=] can also be used as a shorthand
1362- in ''@try'' blocks.
1363-
1364- If applying an entry in the element's [=position fallback list=]
1365- would cause the resulting styles
1366- to satisfy the conditions of [=automatic anchor fallbacks=] ,
1367- and the relevant ''anchor()'' function comes from a ''@try'' block
1368- (rather than from the base styles),
1369- then that entry of the [=position fallback list=]
1370- must instead be treated as 2 or 4 consecutive entries,
1371- generated as above.
1372-
1373- <div class=example>
1374- For example, the following ''@position-fallback'' rule:
1375-
1376- <pre class=lang-css>
1377- @position-fallback --compact {
1378- @try {
1379- TODO FILL IN
1380- }
1381- }
1382- </pre>
1383-
1384- is equivalent to the following longer, more explicit rule:
1385-
1386- <pre class=lang-css>
1387- @position-fallback --expanded {
1388- @try {
1389- top: anchor(bottom);
1390- bottom: auto;
1391- }
1392- @try {
1393- top: auto;
1394- bottom: anchor(top);
1395- }
1396- }
1397- </pre>
1398- </div>
1399-
1400-
14011344<!--
14021345 ██████ ██████ ██████ ███████ ██ ██
14031346██ ██ ██ ██ ██ ██ ██ ██ ███ ███
0 commit comments