Some wpt ref files place font styling on the inline element, affecting line height #4
Description
An example is webvtt/rendering/cues-with-video/processing-model/size_50.html. Here is Safari's rendering of size_50.html:
And Safari's rendering of size_50-ref.html:
The extra line height in size_50-ref.html is caused by font-family: ahem, sans-serif being applied to the innermost span instead of its parent:
.cue {
position: absolute;
bottom: 0;
left: 25%;
right: 0;
width: 50%;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
}
</style>
<div class="video"><span class="cue"><span>This is a test subtitle that should wrap</span></span></div>
Due to the way line height is calculated, "If the inline box contains no glyphs at all, or if it contains only glyphs from fallback fonts, it is considered to contain a “strut” (an invisible glyph of zero width) with the metrics of the box’s first available font." Because <span class="cue"> isn't given a font, the line height is based on the default font instead of Ahem.
To fix this, font-family: Ahem, sans-serif should be applied on <span class="cue"> for all affected tests.
This change would make Chrome and Safari pass several tests, and make Firefox fail them. This is because Firefox applies ::cue styles on the inline span, like size_50-ref.html currently does, resulting in the same bug. Firefox can fix this by applying ::cue styles onto the block-level parent of the span (except for background properties, which should remain applied on the inline element, as expected by the spec).