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

Additionally, the following claim appears to hold in Firefox but not in Chrome:

>If [width](https://drafts.csswg.org/css2/#propdef-width) is not [auto](https://drafts.csswg.org/css2/#valdef-width-auto) and [border-left-width](https://drafts.csswg.org/css2/#propdef-border-left-width) + [padding-left](https://drafts.csswg.org/css2/#propdef-padding-left) + width + [padding-right](https://drafts.csswg.org/css2/#propdef-padding-right) + [border-right-width](https://drafts.csswg.org/css2/#propdef-border-right-width) (plus any of [margin-left](https://drafts.csswg.org/css2/#propdef-margin-left) or [margin-right](https://drafts.csswg.org/css2/#propdef-margin-right) that are not auto) is larger than the width of the containing block, then any auto values for margin-left or margin-right are, for the following rules, treated as **zero**.

**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: 0;
        width: 250px;
        padding-right: 0;
        border-right-width: 0;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">BOX</div>
    </div>
    <script>
      const element = document.getElementById("child");
      const styles = getComputedStyle(element);
      console.log("margin-right:", styles.marginRight); // -50
    </script>
  </body>
</html>
```

**Expected result:**

The used value for margin-right should be 0px.

**Actual result:**

Chrome: The used value for margin-right is -50px.
Firefox: The used value for margin-right is 0px.



-- 
GitHub Notification of comment by gitspeaks
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11267#issuecomment-2495960955 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 11:50:35 UTC