[CSS 2.2] discrepancy in handling auto values for properties in width equality constraint #11267
Comments
|
Additionally, the following claim appears to hold in Firefox but not in Chrome:
Scenario: <!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 Actual result: Chrome: The used value for |
|
Additionally, the following claim does not appear to hold in either Firefox or Chrome:
Scenario: <!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: 50px;
}
</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 Actual result: (Tested on both Chrome and Firefox) The used value for |
This is not valid.
CSS Align overrides this, see #2328 (comment) |
Since CSS3 is intended to be backward compatible with CSS2, is there any document that outlines the key changes? It would be helpful to have a clear summary to avoid potential confusion when navigating the new specifications. |
Thanks! I learned something. The claim, "If there is exactly one value specified as auto, its used value follows from the equality," is indeed correct and quite clever! I suggest alternate phrasing for a more straightforward explanation: "If only one margin (either left or right) is set to auto while the other is not, and the width is not auto, the used value of the auto margin follows from the equality. Similarly, if the width is auto and both margins are non-auto, the used value of the auto width also follows from the equality." |
According to the special note on the definition of 'Block Layout' in CSS Box Model Module Level 4:
Currently, the specification for width, height, and margin calculations for non-absolutely positioned elements in normal flow is defined under:
In particular, CSS2 Section 10.3.3. Block-level, non-replaced elements in normal flow states:
Scenario:
Expected result:
The used value for
padding-leftshould be100px.Actual result:
(Tested on both Chrome and Firefox)
The used value for
padding-leftis0px.The text was updated successfully, but these errors were encountered: