Re: [csswg-drafts] [css-position-3] Section 3.5.1 Conflicts with CSS2 Positioning Behavior (#11258)

Examples (tested in both Chrome and Firefox)

```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: red;
        left: 10px;
        width: 100px;
        height: 50px;
        /* Computes to 90px in compliance with CSS 2, Case 6 */
        /* https://drafts.csswg.org/css2/#abs-non-replaced-width */
        right: auto; 
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child"></div>
    </div>
  </body>
</html>
```
![case6](https://github.com/user-attachments/assets/8b14f0dc-f62f-42ca-9737-3d37e300b200)

```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: red;
        left: 10px;
        width: 100px;
        height: 50px;
        /* 
          According to Section 3.5.1, 'auto' is converted to 0. 
          The rendered output complies with the CSS 2 specification, 
          which states: "solve the equation under the extra constraint 
          that the two margins get equal values."
          https://drafts.csswg.org/css2/#abs-non-replaced-width
        */
        right: 0;
        margin-left: auto; /* 45px */
        margin-right: auto; /* 45px */
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child"></div>
    </div>
  </body>
</html>
```

![margin-case](https://github.com/user-attachments/assets/e75bb484-0a86-43bb-ba91-c3cbf5ecdaaf)




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


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

Received on Thursday, 21 November 2024 14:25:19 UTC