[css-anchor-position][editorial] Switch a few of the examples to explicitly use logical props. w3c#8727

Author: tabatkins

css-anchor-position-1/Overview.bs

@@ -916,19 +916,19 @@ as if by an additional ''translate()'' transform.
 
 <div class=example>
 	For example,
-	in ''.bar { top: anchor(--foo top); }'',
+	in ''.bar { inset-block-start: anchor(--foo block-start); }'',
 	the ''anchor()'' will resolve to the length
-	that'll line up the <code>.bar</code> element's top edge
-	with the ''--foo'' anchor's top edge.
+	that'll line up the <code>.bar</code> element's block-start edge
+	with the ''--foo'' anchor's block-start edge.
 
 	On the other hand,
-	in ''.bar { bottom: anchor(--foo top); }'',
+	in ''.bar { inset-block-end: anchor(--foo block-start); }'',
 	it will instead resolve to the length
-	that'll line up the <code>.bar</code> element's <em>bottom</em> edge
-	with the ''--foo'' anchor's top edge.
+	that'll line up the <code>.bar</code> element's <em>block-end</em> edge
+	with the ''--foo'' anchor's block-start edge.
 
-	Since 'top' and 'bottom' values specify insets from different edges
-	(the top and bottom of the element's [=containing block=],
+	Since 'inset-block-start' and 'inset-block-end' values specify insets from different edges
+	(the block-start and block-end of the element's [=containing block=],
 	respectively),
 	the same ''anchor()'' will usually resolve to different lengths in each.
 </div>
@@ -1716,8 +1716,7 @@ the [=position options list=] will be tried.
 	.list {
 		position: fixed;
 		position-anchor: --foo;
-		top: anchor(bottom);
-		left: anchor(left);
+		position-area: block-end span-inline-end;
 		align-self: start;
 		position-try-fallbacks: --bottom-scrollable, flip-block, --top-scrollable;
 		position-try-order: most-height;
@@ -1726,18 +1725,15 @@ the [=position options list=] will be tried.
 		align-self: stretch;
 	}
 	@position-try --top-scrollable {
-		top: 0;
-		bottom: anchor(top);
+		position-area: block-start span-inline-end;
 		align-self: stretch;
 	}
 	</pre>
 
 	The ''flip-block'' auto-generated option and the ''--top-scrollable'' option
 	will always find the same available height,
-	since both of them stretch vertically from ''top: 0''
-	(the top edge of the viewport)
-	to ''bottom: anchor(top)''
-	(the top of the anchor),
+	since both of them stretch vertically from the top edge of the containing block
+	to the top of the anchor,
 	so they'll retain their specified order.
 	This causes the element to first try to align against the anchor
 	at its natural height