serenity Ladybird: CSS: display:inline clears text-shadow property

Hello, When display:inline is added to an element, the element loses its text-shadow property. Remove the display:inline, and the shadow appears.

Code: ( I left the .tibiaorange in the code so that it looks nicer to look at while debugging)

<html>
<head>
<style>
/* The display: inline; in li causes the problem */
li {
 display:inline;
}

.tibiatext {
 text-shadow:0.1em 0.1em 0.08em #000,-0.1em -0.1em 0.08em #000,0.1em -0.1em 0.08em #000,-0.1em 0.1em 0.08em #000,-0.1em 0 0.08em #000,0.1em 0 0.08em #000;
}
.tibiaorange {
 color:#FF6600
}
</style>
</head>

<body>
	<span class="tibiatext tibiaorange">
		<ul>
			<li>Mew!</li>
			<li>Meow!</li>
			<li>Meow meow!</li>
		</ul>
	</span>
</body>
</html>

Less minimal code: (Only as a reference to know what's going on on the website. But the code above behaves exactly the same)

<html>
<head>
<style>
.sound-list {
 overflow:auto;
 list-style:none
}

/* The display: inline; in .sound-list > li causes the problem */
.sound-list > li {
 display:inline;
}

.sound-list > li:after,
.sound-list > li:before {
 content:"\0022";
 font-size:1.3em;
 text-shadow:none;
 color:black
}
.tibiatext {
 font-family:Verdana,Tahoma;
 font-size:8pt;
 font-weight:bold;
 text-shadow:0.1em 0.1em 0.08em #000,-0.1em -0.1em 0.08em #000,0.1em -0.1em 0.08em #000,-0.1em 0.1em 0.08em #000,-0.1em 0 0.08em #000,0.1em 0 0.08em #000;
 text-decoration:none;
 line-height:normal
}
.tibiaorange {
 color:#FF6600
}
</style>
</head>

<body>
	<span class="tibiatext tibiaorange">
		<ul class="sound-list">
			<li>Mew!</li>
			<li>Meow!</li>
			<li>Meow meow!</li>
		</ul>
	</span>
</body>
</html>

This code comes from https://tibia.fandom.com/wiki/Cat

EDIT: Since it's best to have the most minimal code possible, I think this is it:

<li style="text-shadow:0.1em 0.1em 0.08em #000,-0.1em -0.1em 0.08em #000,0.1em -0.1em 0.08em #000,-0.1em 0.1em 0.08em #000,-0.1em 0 0.08em #000,0.1em 0 0.08em #000;display:inline;">abcdefgh</li>

Or even:

<li style="text-shadow:0.2em 0.2em 0.08em #000;display:inline;">abcdefgh</li>

Feb 16 '24 06:02 kuchikuu

Can you elaborate your problem , what you have said i can't get it properly ?? I think so you are saying that when you applying the inline property , shadow property is disappearing . So you don't want that thing , am I right ??

Feb 18 '24 16:02 Jeanish

This is an example where Ladybird's behaviour differs of that of Firefox. Even when display:inline is applied, text-shadow should still be visible. In Firefox it is still visible, in Ladybird it isn't.

Feb 18 '24 21:02 kuchikuu

Even smaller repro:

<span style="text-shadow:0.1em 0.1em 0.08em #000">Well hello friends!</span>

Inline nodes have their own painting code, so previously in #10146 I had to manually implement styling that already worked on block nodes. Whoever wants to work on this, take a look at https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/Painting/InlinePaintable.cpp where that painting code now lives. It's lacking the text-shadow code that's in PaintableWithLines::paint(), though you'll need to adapt it.

Feb 18 '24 22:02 AtkinsSJ