ec29db716c
Use the text-control auto content size when calculating max-content width for primitive text input widgets. CSS Sizing treats cyclic percentage preferred sizes as initial values for non-replaced max-content contributions, so an `appearance: none` input with `width: 100%` should contribute its `width: auto` size instead of collapsing to zero. Keep the min-content path unchanged so the percentage-sized replaced element rule can still compress non-button-like input controls for flex automatic minimum sizing. Add coverage for an inline-flex control matching the GitHub file search layout.
48 lines
1.2 KiB
HTML
48 lines
1.2 KiB
HTML
<!doctype html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-ui/#appearance-switching">
|
|
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution">
|
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/input.html#the-size-attribute">
|
|
<script src="include.js"></script>
|
|
<style>
|
|
.wrapper {
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
min-width: 160px;
|
|
border: 1px solid black;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wrapper > :not(:last-child) {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.visual {
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
width: 16px;
|
|
}
|
|
|
|
input {
|
|
appearance: none;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
font: 20px/1 Arial;
|
|
}
|
|
</style>
|
|
<div id="wrapper" class="wrapper">
|
|
<span class="visual"></span>
|
|
<input placeholder="Go to file">
|
|
<span class="visual"></span>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
const wrapper = document.getElementById("wrapper");
|
|
const width = wrapper.getBoundingClientRect().width;
|
|
if (width > 180)
|
|
println("PASS");
|
|
else
|
|
println(`FAIL: wrapper width was ${width}`);
|
|
});
|
|
</script>
|