Re: [csswg-drafts] [css-values] The lh and rlh units are more complicated than what they seem. (#3257)

The CSS Working Group just discussed `lh and rlh are complicated`, and agreed to the following:

* `RESOLVED: browser "fixups" of line height on form controls do *not* affect lh/rlh on the element itself. Effect of fixups on lh/rlh of descendants is explicitly undefined.`

<details><summary>The full IRC log of that discussion</summary>
&lt;TabAtkins> Topic: lh and rlh are complicated<br>
&lt;TabAtkins> github: https://github.com/w3c/csswg-drafts/issues/3257<br>
&lt;TabAtkins> emilio: I don't think this is too controversial<br>
&lt;TabAtkins> emilio: fantasai added it to agenda<br>
&lt;TabAtkins> emilio: main issue is browsers have different line-height fixups<br>
&lt;TabAtkins> emilio: sometimes at used, sometimes at computed time<br>
&lt;TabAtkins> emilio: the ones at computed time should change the lh unit<br>
&lt;TabAtkins> emilio: but that's not possible, you've computed everything at that point<br>
&lt;TabAtkins> emilio: at very least, would like to either agree...<br>
&lt;TabAtkins> emilio: get interop on these adjustments<br>
&lt;TabAtkins> emilio: so they don't cause weird interop issues<br>
&lt;TabAtkins> emilio: the gecko adjustments are in the issue comment<br>
&lt;TabAtkins> emilio: we force a minimum line-height on inputs at used value time<br>
&lt;TabAtkins> emilio: for select we force line-height normal at computed-value time<br>
&lt;TabAtkins> emilio: i believe these adjustments are done in other browsers, maybe in subtly different ways<br>
&lt;iank_> we do them differently.<br>
&lt;TabAtkins> emilio: forgot to look into details<br>
&lt;TabAtkins> emilio: just don't know how differently<br>
&lt;TabAtkins> iank_: for some form controls we will look at the computed style and apply a bunch of fixups right at the end of computed style<br>
&lt;TabAtkins> iank_: so the two you're referring to will force it to line-height:initial<br>
&lt;iank_> https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_theme_default.cc;l=201-205<br>
&lt;fantasai> TabAtkins: I agree with fantasai, whatever we do here doesn't make any difference for real uses cases of lh/rlh. We will put anything you want in the spec, don't care.<br>
&lt;TabAtkins> emilio: agree, it would just be great ot ahve those fixups documented<br>
&lt;TabAtkins> fantasai: further than taht - i think having them documented is a nice-to-have. don't really think they need to be interop<br>
&lt;TabAtkins> fantasai: if people ship without interop, that's fine.<br>
&lt;TabAtkins> emilio: given they're already for webcompat...<br>
&lt;TabAtkins> fantasai: right, they're to make sure the line height doesn't shrink below usable for a form control<br>
&lt;TabAtkins> fantasai: nobody's gonna depend on that for a form control<br>
&lt;TabAtkins> emilio: this is the sort of thing that always bites us<br>
&lt;fantasai> s/for a form contro/for using lh or rlh on a form control/<br>
&lt;TabAtkins> emilio: I think this shoudln't be hard to get right<br>
&lt;astearns> ack dbaron<br>
&lt;TabAtkins> fantasai: I'm totally happy to get it right. don't want to delay shipping for 5 years for this one small detail that doesn't matter<br>
&lt;TabAtkins> dbaron: I think if people have the lh unit they might sometimes use them for the height of a form control<br>
&lt;TabAtkins> astearns: people will use the unit everywhere<br>
&lt;TabAtkins> astearns: so ian is saying chrome's fixups are different...<br>
&lt;TabAtkins> iank_: yeah ours are different than what emilio described<br>
&lt;TabAtkins> iank_: we just force, at least for select, reset it to initial line-height<br>
&lt;TabAtkins> iank_: we've been slowly trying to remove these custom style fixups, but very gradually<br>
&lt;TabAtkins> iank_: you can imagine a lot of this depends on if the form element has auto appearance<br>
&lt;TabAtkins> iank_: so this is the difficulty<br>
&lt;TabAtkins> iank_: if we didn't have appearance, all of these could be UA stylesheets<br>
&lt;TabAtkins> iank_: but we explicitly allow things to be overwritten if they don't have the appearance<br>
&lt;emilio> https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/forms/text_control_inner_elements.cc;l=173-194;drc=7fe33e343d08dc8815b5ca48b96f76e98a3d67c7 is for text controls, https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/forms/menu_list_inner_element.cc;l=37-45;drc=04861b524177edda323dc6c37ad58e9bf1e85c12 is for select<br>
&lt;TabAtkins> emilio: think i found the chromium bits<br>
&lt;TabAtkins> emilio: seems like in chromium you apply the fixups not on the element, but on the inner shadow dom of the control<br>
&lt;TabAtkins> iank_: not 100% sure on that<br>
&lt;TabAtkins> iank_: thought we did some on the actual element<br>
&lt;TabAtkins> astearns: so emilio, are you discussing putting these into the spec based on gecko?<br>
&lt;TabAtkins> emilio: not necessarily, just making sure lh/rlh dont' change across browsers<br>
&lt;TabAtkins> emilio: it seems to me that implementing lh/rlh do end up with the wrong value, but wrong consistently<br>
&lt;TabAtkins> emilio: so if you did a line-height less than 1, you'd get that value for lh unit even if the final line-height is 'normal'<br>
&lt;astearns> q?<br>
&lt;TabAtkins> dbaron: i think the key question is whether the fixup changes what the lh does on itself, and on descendants<br>
&lt;iank_> https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10518<br>
&lt;TabAtkins> dbaron: and if it's easy for impls to come to agreement we can just spec that<br>
&lt;iank_> https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10519<br>
&lt;TabAtkins> emilio: right and even descendants might not be too important for input, bc replaced<br>
&lt;TabAtkins> florian: do any of these have descendants?<br>
&lt;TabAtkins> emilio: can set font-size on &lt;option>, yeah<br>
&lt;TabAtkins> iank_: these two examples show what we do with &lt;select><br>
&lt;TabAtkins> iank_: first has line-height on &lt;select>, and we log 'normal' - it resets to initial<br>
&lt;TabAtkins> iank_: In second I set appearance:none and it logs 5px, so it shows fixup is dependent on appearance<br>
&lt;TabAtkins> iank_: we do all of this as a fixup step on the computed style at the very end<br>
&lt;TabAtkins> iank_: so an easy impl for us of lh unit would be these fixups apply at the end, and don't interfere with lh unit<br>
&lt;TabAtkins> emilio: I agree that's the most reasonable thing to do<br>
&lt;TabAtkins> iank_: and a lot of people do set appearance:none if they want more styling control, and it'll work then<br>
&lt;TabAtkins> astearns: so do we have enough?<br>
&lt;TabAtkins> emilio: yeah seems reasonable, as long as we agree that fixups dont' change the meaning of the lh/rlh units<br>
&lt;TabAtkins> emilio: firefox behaviro is similar<br>
&lt;TabAtkins> emilio: on &lt;select> we do post-style fixup<br>
&lt;TabAtkins> emilio: On webkit maybe the same, they do weird stuff on form controls<br>
&lt;TabAtkins> iank_: yeah we've diverged a lot<br>
&lt;fantasai> TabAtkins: so proposed resolution is that these fixups don't affect these units on form controls or descendants<br>
&lt;TabAtkins> emilio: descendants might get affected, since we do computed fixup<br>
&lt;TabAtkins> emilio: but on the element itself it's clear<br>
&lt;TabAtkins> iank_: I think today fo rus if we apply this fixup, and some inner form control has line-height:inherit, it'll get the fixed up value, but don't think that's important<br>
&lt;TabAtkins> dbaron: so if it affects descendants but not itself is interoperable, maybe specify it even tho it's weird<br>
&lt;TabAtkins> emilio: eh, we've got some todos to shift some computation to layout time rather than compute time<br>
&lt;TabAtkins> emilio: don't think it matters too much since it only applies to a few form controls<br>
&lt;TabAtkins> fantasai: so we can spec it doesn't affect the form control itslef, but undefined whethe rit affects descendants<br>
&lt;TabAtkins> emilio: yeah<br>
&lt;TabAtkins> iank_: fine with that<br>
&lt;fantasai> s/we can/can we/<br>
&lt;emilio> https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10520<br>
&lt;TabAtkins> RESOLVED: browser "fixups" of line height on form controls do *not* affect lh/rlh on the element itself. Effect of fixups on lh/rlh of descendants is explicitly undefined.<br>
&lt;emilio> ScribeNick: emilio<br>
</details>


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


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

Received on Wednesday, 3 August 2022 15:56:58 UTC