ladybird
ladybird copied to clipboard
Published
20 hours ago •
LadybirdBrowser
LadybirdBrowser
`inline-block` element inside of `inline` element leads to wrong layout
Test page:
<!DOCTYPE html>
<html>
<head>
<style>
* {
border: 1px solid black;
}
.outer {
background: red;
}
.inner {
display: inline-block;
background: lime;
margin: 50px;
padding: 10px;
}
</style>
</head>
<body>
A
<span class="outer">
<span class="inner">B</span>
</span>
C
</body>
Screenshot Ladybird:
Screenshot Firefox/Chrome:
I found a layout order issue in the wild and simplified it to this repro, which might be the same root bug as yours
<style>
.first {
background-color: green;
}
.second {
background-color: red;
display: inline-block;
}
</style>
<span>
<div class="first">1</div>
<div class="second">2</div>
</span>
Firefox
Ladybird
Current state of master for the original repro:
The other repro by @incognitojam seems to be fixed though:
