[css-text] [css-inline] Define how to deal with inline backgrounds whose boundary falls into a ligature #5251
Description
For this test-case:
<!doctype html>
<style>
div {
font-size: 180px;
font-family: "Nimbus Roman", Times;
}
span { background: rgba(255, 0, 0, .5); }
span + span { background: rgba(0, 255, 0, .5); }
</style>
<div><span>f</span><span>iona</span></div>This is what I see on different browsers:
Both Gecko's and Blink's behavior make some amount of sense to me. It seems Blink puts the whole ligature inside the first inline box. Gecko instead does something where the text is painted atomically on top of the inline backgrounds, crossing the inline boundary.
WebKit's behavior of not shaping the ligature may also be reasonable for this case (not in general of course).
It's not clear to me what the right answer is... But maybe the spec ought to have a model of how this is supposed to work?