Re: [csswg-drafts] [css-anchor-1] More declarative syntax for simple cases (#7757)

I don't see major issues with 3a60ac6d3f4dc76af96a8d6e8ecc4ec83105e2d4, but some minor ones:

1. What happens when we use `anchor(auto)` in a `@position-fallback` list?

I think the correct behavior is to insert some flipped fallback position entries immediately after the current entry.

2. If the `anchor(auto)` is invalid (i.e. the other side is not `auto`), does it still add entries to the position fallback list?

I think it should not. It doesn't make much sense when the base style is `{top: 100px; bottom: anchor(auto)}` and then we try fallback position `{top: anchor(auto); bottom: auto}` -- it's not properly flipping the element.

3. It doesn't work with how position fallback currently works. Currently, if an element uses `position-fallback`, then we never try to layout the element with its base (computed) style -- we start directly with the first fallback position. So in the [example](https://drafts4.csswg.org/css-anchor-1/#example-b75f9105) in the spec, the two are not really equivalent:

```css
.foo {
  position: absolute;
  top: calc(.5em + anchor(--foo auto));
}
```

```css
.foo {
  position: absolute;
  top: calc(.5em + anchor(--foo bottom));
  position-fallback: --flip;
}
@position-fallback --flip {
  @try {
    top: auto;
    bottom: calc(.5em + anchor(--foo top));
  }
}
```

In the second CSS, we'll always end up with the fallback position.

To make this example work, if `anchor(auto)` is used in the base style, we actually add two entries: a copy of the base style, followed by the flipped style; If it's used in both axes, we add four entries where the first is a copy of the base style.

Alternatively, we can change the [fallback position application algorithm](https://drafts4.csswg.org/css-anchor-1/#fallback-apply) into: try to use the base style first, and then if it overflows, try each fallback position. Not sure if it's a good idea...

-- 
GitHub Notification of comment by xiaochengh
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7757#issuecomment-1412872476 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 1 February 2023 23:06:24 UTC