Bug 295936
fantasai
Our anchor() resolution fails to account for the effects of grid-area when position-area is also used, so boxes end up in the wrong place. See testcase:
<!DOCTYPE html>
<div style="height: 100px; width: 100px; border: solid; position: relative; ">
<div style="position: absolute; border: solid orange; margin: 2em; anchor-name: --foo"></div>
<div style="height: 40px; width: 40px; background: silver; margin: 0.5em"></div>
<div style="position: absolute; top: anchor(bottom); position-area: bottom right; position-anchor: --foo; border: solid blue"></div>
</div>
<div style="height: 100px; width: 100px; border: solid; position: relative; ">
<div style="position: absolute; border: solid orange; margin: 2em; anchor-name: --foo"></div>
<div style="height: 40px; width: 40px; background: silver; margin: 0.5em; anchor-name: --bar"></div>
<div style="position: absolute; top: anchor(--foo bottom); position-area: bottom right; position-anchor: --bar; border: solid blue"></div>
</div>
https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cdiv%20style%3D%22height%3A%20100px%3B%20width%3A%20100px%3B%20border%3A%20solid%3B%20position%3A%20relative%3B%20%22%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20border%3A%20solid%20orange%3B%20margin%3A%202em%3B%20anchor-name%3A%20--foo%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22height%3A%2040px%3B%20width%3A%2040px%3B%20background%3A%20silver%3B%20margin%3A%200.5em%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20top%3A%20anchor(bottom)%3B%20position-area%3A%20bottom%20right%3B%20position-anchor%3A%20--foo%3B%20border%3A%20solid%20blue%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20style%3D%22height%3A%20100px%3B%20width%3A%20100px%3B%20border%3A%20solid%3B%20position%3A%20relative%3B%20%22%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20border%3A%20solid%20orange%3B%20margin%3A%202em%3B%20anchor-name%3A%20--foo%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22height%3A%2040px%3B%20width%3A%2040px%3B%20background%3A%20silver%3B%20margin%3A%200.5em%3B%20anchor-name%3A%20--bar%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20top%3A%20anchor(--foo%20bottom)%3B%20position-area%3A%20bottom%20right%3B%20position-anchor%3A%20--bar%3B%20border%3A%20solid%20blue%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
fantasai
Related: [css-anchor-1] anchor() fails to account for grid-area
https://bugs.webkit.org/show_bug.cgi?id=295924
rdar://155823420
Radar WebKit Bug Importer
<rdar://problem/155826872>
fantasai
Pull request: https://github.com/WebKit/WebKit/pull/48339
EWS
Committed 297723@main (440717a86ea1): <https://commits.webkit.org/297723@main>
Reviewed commits have been landed. Closing PR #48339 and removing active labels.
Kiet Ho
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/54018
Kiet Ho
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/54032