serenity icon indicating copy to clipboard operation
serenity copied to clipboard

Published 20 hours ago • verified publisher icon SerenityOS

Ladybird: input with width set to auto has wrong size

Open warpdesign opened this issue 1 year ago • 2 comments

Test page:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input {
    width: auto;
    border: 1px solid red;
}
</style>
</head>
<body>
<input />

First is Chrome, second is Ladybird:

Screenshot 2024-02-16 at 10 38 31

Note that weirdly, adding a placeholder to the input will make the width grow to cover the placeholder text:

Screenshot 2024-02-16 at 10 42 26

Real world example:

Screenshot 2024-02-16 at 10 43 18

warpdesign avatar Feb 16 '24 09:02 warpdesign

When width is set to auto it seems Ladybird doesn't care about the size attribute (which defaults to 20) anymore.

warpdesign avatar Feb 16 '24 13:02 warpdesign

When width is set to auto it seems Ladybird doesn't care about the size attribute (which defaults to 20) anymore.

The way we set the width usually is this CSS:

https://github.com/SerenityOS/serenity/blob/17b22250b6afa30366903b314a62b78a8a94fb79/Userland/Libraries/LibWeb/CSS/Default.css#L32

So as soon as the user sets width to something, that no longer applies.

I guess HTMLInputElement need to catch the width: auto somewhere and implement its own width calculation. And then probably get rid of that CSS line.

AtkinsSJ avatar Feb 16 '24 13:02 AtkinsSJ

I still see some problems on this page:

Screenshot 2024-03-07 at 11 59 29

Chrome for comparison: Screenshot 2024-03-07 at 12 00 08

warpdesign avatar Mar 07 '24 11:03 warpdesign

Hmmm, looks like that has width: 100% set. That's a different issue, but yeah, we're definitely doing something wrong there!

AtkinsSJ avatar Mar 07 '24 11:03 AtkinsSJ