diff --git a/index.html b/index.html index c092eb6..ce04829 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,7 @@ + @@ -960,6 +961,37 @@

#my-target-size { width: anchor-size(--my-anchor width); +} + +
+

+ + anchor-size() on margin and inset +

+
+
Anchor
+
Target
+
+

+ With polyfill applied: Target's margin is the height of the + anchor, and its right inset is the width of the anchor. +

+ 
#my-anchor-anchor-size-extended {
+  anchor-name: --my-anchor-size-extended;
+  resize: both;
+  overflow: hidden;
+}
+
+#my-target-anchor-size-extended {
+  position: absolute;
+  position-anchor: --my-anchor-size-extended;
+  right: anchor-size(width);
+  margin: anchor-size(height);
 }
diff --git a/public/anchor-size-extended.css b/public/anchor-size-extended.css new file mode 100644 index 0000000..22cb7a4 --- /dev/null +++ b/public/anchor-size-extended.css @@ -0,0 +1,12 @@ +#my-anchor-anchor-size-extended { + anchor-name: --my-anchor-size-extended; + resize: both; + overflow: hidden; +} + +#my-target-anchor-size-extended { + position: absolute; + position-anchor: --my-anchor-size-extended; + right: anchor-size(width); + margin: anchor-size(height); +} diff --git a/src/parse.ts b/src/parse.ts index c90a94d..6cf2a46 100644 --- a/src/parse.ts +++ b/src/parse.ts @@ -18,10 +18,12 @@ import { } from './dom.js'; import { parsePositionFallbacks, type PositionTryOrder } from './fallback.js'; import { + type AcceptedAnchorSizeProperty, type AcceptedPositionTryProperty, type AnchorSide, type AnchorSize, type InsetProperty, + isAcceptedAnchorSizeProp, isAnchorSide, isAnchorSize, isInsetProp, @@ -53,10 +55,12 @@ export interface AnchorFunction { uuid: string; } -// `key` is the property being declared -// `value` is the anchor-positioning data for that property +// - `key` is the property being declared +// - `value` is the anchor-positioning data for that property +// The valid properties for `anchor()` is a subset of the properties that are +// valid for `anchor-size()`, so functional validation should be used as well. export type AnchorFunctionDeclaration = Partial< - Record + Record >; // `key` is the target element selector @@ -228,8 +232,9 @@ function getAnchorFunctionData(node: CssNode, declaration: Declaration | null) { return { changed: true }; } if ( - isInsetProp(declaration.property) || - isSizingProp(declaration.property) + (isAnchorFunction(node) && isInsetProp(declaration.property)) || + (isAnchorSizeFunction(node) && + isAcceptedAnchorSizeProp(declaration.property)) ) { const data = parseAnchorFn(node, true); return { prop: declaration.property, data, changed: true }; diff --git a/src/polyfill.ts b/src/polyfill.ts index b4aa1eb..4093337 100644 --- a/src/polyfill.ts +++ b/src/polyfill.ts @@ -21,8 +21,8 @@ import { type AnchorSide, type AnchorSize, type InsetProperty, + isAcceptedAnchorSizeProp, isInsetProp, - isSizingProp, type SizingProperty, } from './syntax.js'; import { transformCSS } from './transform.js'; @@ -154,9 +154,7 @@ export const getPixelValue = async ({ return fallback; } if (anchorSize) { - // anchor-size() can only be assigned to sizing properties: - // https://drafts.csswg.org/css-anchor-1/#queries - if (!isSizingProp(targetProperty)) { + if (!isAcceptedAnchorSizeProp(targetProperty)) { return fallback; } // Calculate value for `anchor-size()` fn... diff --git a/src/syntax.ts b/src/syntax.ts index 084702e..47a22a1 100644 --- a/src/syntax.ts +++ b/src/syntax.ts @@ -92,6 +92,32 @@ export const ACCEPTED_POSITION_TRY_PROPERTIES = [ export type AcceptedPositionTryProperty = (typeof ACCEPTED_POSITION_TRY_PROPERTIES)[number]; +export function isAcceptedPositionTryProp( + property: string, +): property is AcceptedPositionTryProperty { + return ACCEPTED_POSITION_TRY_PROPERTIES.includes( + property as AcceptedPositionTryProperty, + ); +} + +// Accepted anchor-size() properties +export const ACCEPTED_ANCHOR_SIZE_PROPERTIES = [ + ...SIZING_PROPS, + ...INSET_PROPS, + ...MARGIN_PROPERTIES, +] as const; + +export type AcceptedAnchorSizeProperty = + (typeof ACCEPTED_ANCHOR_SIZE_PROPERTIES)[number]; + +export function isAcceptedAnchorSizeProp( + property: string, +): property is AcceptedAnchorSizeProperty { + return ACCEPTED_ANCHOR_SIZE_PROPERTIES.includes( + property as AcceptedAnchorSizeProperty, + ); +} + // Anchor Side properties export const ANCHOR_SIDES = [ 'top',