Re: [csswg-drafts] [css-position-3] Incorrect handling of auto inset properties in absolute positioning (#11242)

In the [current spec](https://www.w3.org/TR/css-position-3/#abspos-insets), the `inset` property is used to establish a frame called the inset-modified containing block (IMCB) within the containing block, and the positioned element (abspos) is placed in that frame. According to the [layout model](https://www.w3.org/TR/css-position-3/#absolute-positioning-layout), the abspos element is sized to the dimensions of the IMCB, eliminating the need to explicitly define the 'position' of the abspos within the IMCB.

_However_, the same spec section [states](https://www.w3.org/TR/css-position-3/#abspos-auto-size), by implication, that if the abspos element has an `inset` property, it is sized to `fit-content`. This means the abspos box can be smaller than the IMCB, resulting in a scenario where the abspos position within the IMCB frame becomes _undefined_.

Example:

Consider the following code. Any of the images below could represent a legitimate rendering:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #parent {
        position: relative;
        width: 200px;
        height: 200px;
        border: 5px solid black;
      }

      #child {
        position: absolute;
        background-color: yellow;
        top: 0;
        right: 0;
        /* bottom: auto → 0 (spec 3.1. Box Insets) */
        /* left: auto → 0 (spec 3.1. Box Insets) */
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">BOX</div>
    </div>
  </body>
</html>
```
![1](https://github.com/user-attachments/assets/af5458fd-1845-4aa7-b348-5017b7758495)
![2](https://github.com/user-attachments/assets/8384bcaf-0d5a-4f48-ac8c-d733cc55b0a1)
![3](https://github.com/user-attachments/assets/c7c353d9-585e-4106-9adc-62245a1b4684)
![4](https://github.com/user-attachments/assets/583d939f-3d52-431d-9f32-0b558d45025b)

To resolve this, additional meaning would need to be added to `auto` inset values to determine the abspos position within the IMCB. This dual meaning increases complexity and does not align with the CSS2 spec, where the `inset` properties are simply defined as offsets of the abspos from the containing block. 

I propose reverting the definition to align with the CSS2 spec, which is also the behavior currently implemented across browsers.


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


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

Received on Wednesday, 20 November 2024 09:55:57 UTC