[csswg-drafts] HTML inputs have different compressibility behavior depending on internal implementation details (#6347)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== HTML inputs have different compressibility behavior depending on internal implementation details ==
See the [following testcase](http://software.hixie.ch/utilities/js/live-dom-viewer/saved/9358):

```html
<!DOCTYPE html>
<style>
.flexbox {
 width: 50px;
 border: thin dotted;
 display: flex;
}
.test {
 width: 100px;
}
</style>

<div class=flexbox>
 <input class=test>
</div>
<div class=flexbox>
 <input class=test type=date>
</div>
```

Browsers consistently treat these two inputs differently: the text input stays at 100px wide, overflowing its flexbox parent, while the date input compresses to the available space and doesn't overflow.

In discussion with implementors, this is due to differences in internal implementations and default UA styles: 

* the text input contains a (100px wide) internal box to actually receive the textual input, so the input's automatic minimum size is 100px
* the date input has a similar internal structure, but also has overflow:hidden set directly on it by the UA stylesheet (rather than on one of the internal bits, as for the text input), so its automatic minimum size is 0 due to it being a scrollable box.

Other input types have a similar split in behavior depending on how they're implemented internally. This is pretty confusing for authors! There's nothing about the elements that suggests they should have such divergent behavior, and it means authors can't predict how their input elements will work, even when they appear to be very similar types.

This divergent internal structure also probably contributes to our confusion about how compressible elements work in the Sizing spec...

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6347 using your GitHub account


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

Received on Thursday, 3 June 2021 22:52:07 UTC