[csswg-drafts] [css-position-3] Absolute positioning - Is the new inset & auto-size behaviour web-compatible? (#11195)

dshin-moz has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position-3] Absolute positioning - Is the new inset & auto-size behaviour web-compatible? ==
Implementing `justify-self` & `align-self` for abs-positioned elements, we ran into:

* https://bugzilla.mozilla.org/show_bug.cgi?id=1930427
* https://bugzilla.mozilla.org/show_bug.cgi?id=1930850

Which has something to the effect of:

```
<style>
.abs {
  align-self: stretch;
  height: auto;
  top: auto;
  bottom: auto;
}
</style>
<div class="abs">Test</span>
```

`align-self: stretch` should be a no-op (At least for absolute elements not within flex/grid context) in the old behaviour, but **seems to be used by websites in the wild anyway** in the linked bugs:

* [Virustotal](https://www.virustotal.com/gui/home/upload): `<uno-navbar>`'s shadow-root child
* [SAP](https://api.sap.com/api/OP_WAREHOUSEORDER_0001/resource/Warehouse_Order): `opblock-summary-method`

As per the new [absolute-positioning steps](https://drafts.csswg.org/css-position-3/#abspos-layout):

1. Calculate inset-modified containing block: 
    * [Inset resolution](https://drafts.csswg.org/css-position-3/#resolving-insets): `stretch`'s [fallback alignment](https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch) is `start`, so take the first case - static position is at `top: 0`, `bottom` is just set to 0.
1. [Resolving sizes](https://drafts.csswg.org/css-position-3/#abspos-auto-size): Definite available size is viewport, no min/max height is given, and since self-alignment is `stretch`, **auto size is stretch size**.
1. Auto margins: N/A
1. Alignment: Fits exactly in the available space

As per the [old steps](https://drafts.csswg.org/css-position-3/#abs-non-replaced-height)

1. Everything is `auto`, margins zeroed out, `top` takes its static position value, which is zero
2. Height is [Auto heights for block formatting context roots](https://www.w3.org/TR/CSS2/visudet.html#root-height) - Distance between top of the topmost line box and bottom of the bottommost line box, so **auto size is basically a shrink-fit size**.
3. Solve for `bottom`, taking up whatever empty space



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11195 using your GitHub account


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

Received on Wednesday, 13 November 2024 13:01:21 UTC