Re: [csswg-drafts] [css2][css-flow][cssom] How does avoiding floats affect margins? (#9174)

The CSS Working Group just discussed `[css2][css-flow][cssom] How does avoiding floats affect margins?`, and agreed to the following:

* `RESOLVED: Auto margins align between the remaining space after accounting for floats (existing interoperable behavior)`
* `RESOLVED: For elements with a principal box, getComputedStyle always returns used values`
* `RESOLVED: We'd like resolved margins to round-trip`

<details><summary>The full IRC log of that discussion</summary>
&lt;emilio> oriol: so CSS2 when translated in modern terminology, it says that a block level element which establishes an independent formatting context, shouldn't collapse its margins<br>
&lt;dbaron> s/collapse its margins/overlap the margin box of floats/<br>
&lt;emilio> ... it can do so by being moved next to the floats or below the floats<br>
&lt;emilio> ... if it's moved below then this is done by inserting clearance<br>
&lt;emilio> ... which is a well-defined concepts<br>
&lt;emilio> [room chuckles]<br>
&lt;emilio> dbaron: it's a defined concept<br>
&lt;emilio> oriol: problem is what to do in the inline axis<br>
&lt;emilio> ... by what mechanism are we placing this element next to the floats<br>
&lt;emilio> ... the proposal is to modify the used margin value to not overlap the floats<br>
&lt;emilio> ... we could introduce another concept instead<br>
&lt;emilio> ... I'd go with using margins<br>
&lt;emilio> ... this has one potential problem for the auto value<br>
&lt;emilio> ... because gCS exposes the used value of margins for auto<br>
&lt;emilio> ... (spec says always but they only do for auto).<br>
&lt;emilio> iank_: floats and margins don't work like you'd expect to<br>
&lt;emilio> ... margins start at the containing block edge<br>
&lt;emilio> not at the float edge<br>
&lt;emilio> ... so margins always are referring to the CB edge<br>
&lt;emilio> ... auto margins are different<br>
&lt;emilio> ... auto margins center in the area between the float and the edge of the CB<br>
&lt;emilio> oriol: right so question is what should getComputedStyle return<br>
&lt;emilio> ... gecko returns 0 and zero<br>
&lt;fantasai> [oriol reports the results of such testcases]<br>
&lt;fantasai> [they are various levels of broken]<br>
&lt;emilio> oriol: blink aligned with servo<br>
&lt;emilio> ... would like to resolve on them<br>
&lt;emilio> ... first proposed resolution would be that we avoid overlapping floats by changing the used margin<br>
&lt;emilio> iank_: don't wanna go down that road<br>
&lt;emilio> ... there are other mechanism that affect float positioning<br>
&lt;emilio> ... there's a lot of weird stuff in there, I think the current box is positioned<br>
&lt;emilio> oriol: but margin + border-box should be the width of the containing block<br>
&lt;emilio> ... should we drop that constraint?<br>
&lt;emilio> iank_: yes<br>
&lt;emilio> fantasai: that seems fine to drop in presence of floats<br>
&lt;emilio> q+<br>
&lt;emilio> astearns: this specific issue is about what value you report for gCS<br>
&lt;emilio> ... there are other things that affect placement of formatting contexts that affect that equation<br>
&lt;emilio> nicole: Can we get more consistent behavior across browsers without that constraint?<br>
&lt;emilio> iank_: yeah the biggest inconsistency is what to report for auto margins in gCS<br>
&lt;fantasai> emilio: is there inconsistency only in the presence of floats? e.g. if there's no floats, do we get reasonable results?<br>
&lt;emilio> iank_: in absence of floats you report the right values<br>
&lt;emilio> oriol: not sure if you clear what the reported behavior is<br>
&lt;fantasai> emilio: was curious about what the mechanisms are<br>
&lt;emilio> iank_: alignment of table cells<br>
&lt;emilio> ... might be a webkit-ism<br>
&lt;emilio> ... let me find the other ones<br>
&lt;astearns> ack fantasai<br>
&lt;Zakim> fantasai, you wanted to comment on alignment<br>
&lt;astearns> ack emilio<br>
&lt;emilio> fantasai: the border-box + margin-box filling the containing block we give up in the alignment spec via e.g. justify-self<br>
&lt;emilio> ... I think round-tripping via gCS would be great<br>
&lt;emilio> ... but I don't need we need to make the equation add up<br>
&lt;emilio> emilio: for round-tripping in this case you do need that equation to add up<br>
&lt;emilio> ... because the margin would start from the CB edge<br>
&lt;emilio> iank_: the other things that affect this is the webkit values of text-align<br>
&lt;emilio> ... which is equivalent to justify-self center<br>
&lt;emilio> dbaron: for the html alignment attrs?<br>
&lt;emilio> iank_: yes<br>
&lt;emilio> dbaron: gecko has similar ones<br>
&lt;emilio> oriol: I think we could resolve on auto margins centering in the remaining space which I don't think it's specified<br>
&lt;emilio> ... also that gCS should return a value that round trips<br>
&lt;emilio> ... so, align with blink and servo<br>
&lt;emilio> RESOLVED: Auto margins align between the remaining space after accounting for floats (existing interoperable behavior)<br>
&lt;dbaron> Unrelated side note:  at least I still remember CSS2's float rules well enough to be able to write a testcase where browsers are not interoperable and get it to show non-interop on the first try:<br>
&lt;dbaron> https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cdiv%20style%3D%22width%3A%20200px%22%3E%0A%20%20%3Cdiv%20style%3D%22float%3A%20left%3B%20height%3A%20100px%3B%20width%3A%2010px%3B%20background%3A%20blue%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22margin-left%3A%2020px%3B%20width%3A%2050px%3B%22%3E%0A%20%20%20%20%3Cdiv%20style%3D%22float%3A%20left%3B%20width%3A%2060px%3B%20height%3A%2020px%3B%20background%3A%2<br>
&lt;dbaron> 0fuchsia%22%3E%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E (WebKit follows the letter of the spec; Gecko and Chromium follow the spec's resummarization that follows "Loosely: ".)<br>
&lt;emilio> astearns: resolving on round-tripping doesn't seem super-useful if you're an implementor reading the spec<br>
&lt;emilio> astearns: proposal is to spec that auto-margin values round trip in getComputedStyle()<br>
&lt;emilio> fantasai: we don't know how, one is what oriol said, the other is returning "auto"<br>
&lt;emilio> astearns: might not be web compatible<br>
&lt;emilio> fantasai: specifically for the float case you could round-trip to auto<br>
&lt;emilio> iank_: no no no no<br>
&lt;emilio> ... the reason why we aligned to Servo's behavior<br>
&lt;emilio> ... we moved towards FF but too aggressively (return 0 for auto margins)<br>
&lt;emilio> ... and got bug reports<br>
&lt;emilio> ... so we need to return a decent used value<br>
&lt;emilio> fantasai: your proposed resolution has 2 interpretation, if only one is workable then we should write that down<br>
&lt;emilio> dbaron: are there any cases where there's no non-auto-value that round-trips?<br>
&lt;emilio> dbaron: can't think of one off the top of my head<br>
&lt;emilio> dbaron: part of the lesson is that we shouldn't write specs in terms of constraints because they have solutions that don't add up to what you thought<br>
&lt;emilio> dbaron: can we resolve on a goal rather than an exact spec?<br>
&lt;emilio> dbaron: if we resolve that we want ^<br>
&lt;emilio> fantasai: there shouldn't be two different ways of fixing that<br>
&lt;florian> q+<br>
&lt;fantasai> emilio: Proposed resolution 1: return used values, proposed resolution 2: they must round-trip<br>
&lt;astearns> ack florian<br>
&lt;emilio> florian: I think we shouldn't edit in css2<br>
&lt;emilio> ... wherever it goes, not css2<br>
&lt;florian> s/ not css2/ not css2: it is not in a publishable state, and after a few years, we evidently do not know how to get it to a publishable state<br>
&lt;emilio> RESOLVED: For elements with a principal box, getComputedStyle always returns used values<br>
&lt;emilio> s/used values/used values for margins<br>
&lt;emilio> RESOLVED: We'd like resolved margins to round-trip<br>
&lt;emilio> [rant about css2]<br>
&lt;bramus> ScribeNick: bramus<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9174#issuecomment-1939934462 using your GitHub account


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

Received on Tuesday, 13 February 2024 00:49:36 UTC