css-ruby-1 says:
The UA is not required to support any of the background properties or outline properties, or any other property that illustrates the bounds of the box on ruby base container boxes or ruby annotation container boxes. The UA may implement these boxes simply as abstractions for inheritance and control over the layout of their contents.
That sounds very nice, except that the "bounds of the box" become relevant for "the layout of their contents" when the box has position: relative and a child has position: absolute.
Turns out that browsers are wildly non-interoperable on this and produce results of... varying sensibility:
From left to right, these are WebKit, Chromium and Gecko. (the regular inline box is just provided as a reference)
The HTML for this is:
<!DOCTYPE html>
<style>
rt, #test {
position: relative;
border: 2px solid #f008;
&::before {
content: "";
display: block;
width: 100%;
height: 1em;
background-color: green;
position: absolute;
left: 0;
z-index: -1;
}
}
</style>
<ruby>混沌<rt>こんとん</rt>より<rt></rt>監視<rt>かんし</rt>する<rt></rt>者<rt>もの</rt></ruby>
<br><br>
<span id="test">Regular inline element</span>I also think #7404 is potentially related.
css-ruby-1 says:
That sounds very nice, except that the "bounds of the box" become relevant for "the layout of their contents" when the box has
position: relativeand a child hasposition: absolute.Turns out that browsers are wildly non-interoperable on this and produce results of... varying sensibility:
From left to right, these are WebKit, Chromium and Gecko. (the regular inline box is just provided as a reference)
The HTML for this is:
I also think #7404 is potentially related.