[csswg-drafts] (CSS 2.2) discrepancy in handling auto values for properties in width equality constraint (#11267)

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

== (CSS 2.2) discrepancy in handling auto values for properties in width equality constraint ==
According to the special note on the definition of 'Block Layout' in [CSS Box Model Module Level 4](https://www.w3.org/TR/css-box-4/#intro):

> "This module originally contained the CSS Level 3 specification prose relating to box generation (now defined in [css-display-3]), the box model (defined here), as well as block layout (now only defined in [CSS2] Chapters 9 and 10). Since its maintenance was put aside during the development of CSS2.1, its prose was severely outdated by the time CSS2 Revision 1 was finally completed. Therefore, the block layout portion of the prose has been retired, to be re-synched to CSS2 and updated as input to a new Block Layout module at some point in the future."

Currently, the specification for width, height, and margin calculations for non-absolutely positioned elements in normal flow is defined under:

- [10.3. Calculating widths and margins](https://drafts.csswg.org/css2/#Computing_widths_and_margins)
- [10.6. Calculating heights and margins](https://drafts.csswg.org/css2/#Computing_heights_and_margins)

In particular, CSS2 Section [10.3.3. Block-level, non-replaced elements in normal flow](https://drafts.csswg.org/css2/#blockwidth) states:

> The following constraints must hold among the used values of the other properties:
>
> ```
> margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block
> ```
>
> ...
>
> If there is exactly one value specified as `auto`, its used value follows from the equality.


**Scenario:**

```html
<!DOCTYPE html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #parent {
        width: 200px;
        height: 100px;
        background-color: blue;
      }

      #child {
        background-color: red;
        margin-left: 0;
        border-left-width: 0;
        padding-left: auto;
        width: 100px;
        padding-right: 0;
        border-right-width: 0;
        margin-right: 0;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">BOX</div>
    </div>
    <script>
      const element = document.getElementById("child");
      const styles = getComputedStyle(element);
      console.log("padding-left:", styles.paddingLeft); // 0
    </script>
  </body>
</html>
```

**Expected result:**

The used value for `padding-left` should be `100px`.


**Actual result:**

(Tested on both Chrome and Firefox)

The used value for `padding-left` is `0px`.

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


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

Received on Sunday, 24 November 2024 09:06:05 UTC