[csswg-drafts] Incorrect handling of auto inset properties in absolute positioning (#11242)

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

== Incorrect handling of auto inset properties in absolute positioning ==
**Spec References**

1. [3.5.1. Resolving Insets: the “Inset-Modified Containing Block”](https://www.w3.org/TR/css-position-3/#resolving-insets)  
   > "If only one inset property in a given axis is auto, it is set to zero."  

2.  [3.1. Box Insets](https://www.w3.org/TR/css-position-3/#insets)  
   > The initial value of top, right, bottom, or left is: auto.  

3.  [4. Absolute Positioning Layout Model](https://www.w3.org/TR/css-position-3/#abspos-layout)

  >Absolute positioning not only takes a box out of flow, but also lays it out in its containing block (after the final size of the containing block has been determined) according to the absolute positioning layout model:
  
   > 1. First, its inset-modified containing block is calculated, defining its available space.
   > 2. Next, its width and height are resolved against this definite available space, as its preferred size


**Scenario**

```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: 1px solid black;
      }

      #child {
        position: absolute;
        background-color: yellow;
        top:0;
        right:0;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
        BOX
      </div>
    </div>
  </body>
</html>
```

**Expected Behavior**

According to the spec, the inset properties `left` and `bottom`, being exclusively `auto` in their respective axes, should compute to `0`. This means:

1. With `top` and `right` explicitly set to `0`, the `#parent` div defines an inset of 0 on all sides, meaning the _inset-modified containing block_ will match the dimensions of the _absolute-position containing block_ (e.g `#parent` div).

2. The `#child` div should size itself to cover the maximum available space, filling the `#parent` div entirely.


**Actual Behavior**

In both Chrome and Firefox:

1. The `#child` div sizes itself to fit its inline content.  
2. Its position is aligned to the top-right edge of the `#parent` div padding edge.  


This behavior contradicts the specification, as the unset inset properties (`left` and `bottom`) are resolved to non-zero values.

Note:

- This behavior persists even when explicitly setting `left` and `bottom` to `auto`, instead of relying on their implicit initial value of `auto`.

- Explicitly setting all inset properties (`top: 0; right: 0; left: 0; bottom: 0`;) causes the `#child div` to correctly cover the `#parent` div, showing that the behavior works as expected when no `auto` values are involved.




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


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

Received on Tuesday, 19 November 2024 13:03:40 UTC