Re: [csswg-drafts] [CSS2] How do zero-width floats affect subsequent content (#2312)

Another testcase:

```html
<!DOCTYPE html>
<div style="overflow: hidden; width:50px; border: solid; margin: 10px">
  <div style="float:left; clear:left; width:25px; height:10px; background:magenta"></div>
  <div style="float:left; width:0px; height:25px; outline:solid orange"></div>
  <div style="overflow:hidden; width:40px; height:50px; background:cyan;"></div>
</div>
<div style="overflow: hidden; width:50px; border: solid; margin: 10px">
  <div style="float:left; width:10px; height:25px; background:magenta"></div>
  <div style="float:left; clear:left; width:25px; height:0px; outline:solid orange"></div>
  <div style="overflow:hidden; width:40px; height:50px; background:cyan;"></div>
</div>
```

| Gecko | WebKit | Blink | Servo | Servo+patch |
| - | - | - | - | - |
| ![](https://github.com/w3c/csswg-drafts/assets/7477678/843c3fee-3811-4a40-b29a-4c8756c18c4d) | ![](https://github.com/w3c/csswg-drafts/assets/7477678/cd6fd273-ff92-4579-87df-f3bdf3df888f) | ![](https://github.com/w3c/csswg-drafts/assets/7477678/816292df-f962-4215-b603-d37ad3d6bfe9) | ![](https://github.com/w3c/csswg-drafts/assets/7477678/0d794d61-136c-4519-89f3-168bffa4313a) | ![](https://github.com/w3c/csswg-drafts/assets/7477678/bd352a42-a3a7-4e80-8972-b970b94239af) |

Basically

| | Avoids 0px wide floats | Avoids 0px tall floats |
| - | - | - |
| Gecko | ❌ | ❌ |
| WebKit | Sometimes | ❌ |
| Blink | ❌ | ✅ |
| Servo | ✅ | ❌ |
| Servo+patch | ✅ | ✅ |

I was actually interpreting the spec to mean "Servo+patch", and I have written a patch for Servo to implement that. But then I noticed this in https://drafts.csswg.org/css2/#floats

> A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.
> Note: this means that floats with zero outer height or negative outer height do not shorten line boxes. 

Effectively, both Blink and Servo+patch are then wrong here:

```html
<!DOCTYPE html>
<div style="float: left; width: 10px; height: 10px; background: cyan"></div>
<div style="float: left; clear: left; width: 100px; outline: solid magenta"></div>
lorem ipsum
```

| Gecko / WebKit / Servo | Blink / Servo+patch |
| - | - |
| ![](https://github.com/w3c/csswg-drafts/assets/7477678/e58c8123-ecc6-4a9b-97c9-14ec6ecce885) | ![](https://github.com/w3c/csswg-drafts/assets/7477678/4d0a43e2-b6d9-4180-964b-27cf3c749747) |

I'm not convinced it makes sense for independent formatting contexts to avoid 0px tall floats if text shouldn't avoid them.

And then it could be said that 0px wide floats shouldn't be avoided either for consistency?

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


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

Received on Friday, 20 October 2023 17:13:19 UTC