- From: Oriol Brufau via GitHub <noreply@w3.org>
- Date: Tue, 05 Aug 2025 12:04:16 +0000
- To: public-css-archive@w3.org
It's not just `auto` margins, it's also not interoperable what happens with a negative inset-modified cb and `auto` sizes.
```html
<!DOCTYPE html>
<div style="border: solid; width: 100px; height: 100px; position: relative">
<div style="position: absolute; border: solid orange 10px; margin: -50px; inset: 90px"></div>
</div>
```
| Blink | Gecko, WebKit, Servo |
| - | - |
| <img width="156" height="156" src="https://github.com/user-attachments/assets/bd3b9b3a-9560-41cd-9432-06321d5ecd06" /> | <img width="156" height="156" src="https://github.com/user-attachments/assets/c0ee670e-d5b5-4a6e-8110-2086850a3447" /> |
<details>
<summary>
Aligning Servo with Blink is quite straightforward, just a matter of flooring the size of the IMCB so that it doesn't get negative.
</summary>
```diff
--- a/components/layout/positioned.rs
+++ b/components/layout/positioned.rs
@@ -723,6 +723,11 @@ impl AbsoluteAxisSolver<'_> {
}
}
+ #[inline]
+ fn available_space(&self) -> Au {
+ Au::zero().max(self.containing_size - self.inset_sum())
+ }
+
#[inline]
fn automatic_size(&self) -> Size<Au> {
match self.alignment.value() {
@@ -736,8 +741,7 @@ impl AbsoluteAxisSolver<'_> {
#[inline]
fn stretch_size(&self) -> Au {
Au::zero().max(
- self.containing_size -
- self.inset_sum() -
+ self.available_space() -
self.padding_border_sum -
self.computed_margin_start.auto_is(Au::zero) -
self.computed_margin_end.auto_is(Au::zero),
@@ -751,8 +755,7 @@ impl AbsoluteAxisSolver<'_> {
self.computed_margin_end.auto_is(Au::zero),
)
} else {
- let free_space =
- self.containing_size - self.inset_sum() - self.padding_border_sum - size;
+ let free_space = self.available_space() - self.padding_border_sum - size;
match (self.computed_margin_start, self.computed_margin_end) {
(AuOrAuto::Auto, AuOrAuto::Auto) => {
if self.avoid_negative_margin_start && free_space < Au::zero() {
```
</details>
Other browsers seem less consistent, so I prefer either the Servo or the Blink behaviors.
--
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11478#issuecomment-3154937325 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 5 August 2025 12:04:16 UTC