[css-inline-3] `text-box` and `text-overflow` interaction

[mabeyj]

I've been experimenting with text-box and found that it doesn't seem to work as expected when used in combination with text-overflow to truncate text to a single line.

Example: https://jsfiddle.net/ar1pu6qL/

The use case is, I want to use text-box to vertically centre some text in a box, but I also want to truncate that text to a single line using text-overflow: ellipsis. It could be showing a one-line preview of some potentially long text in a box or beside an icon and having it perfectly vertically centred. In order for text-overflow to work, I also have to specify overflow: hidden which seems to be problematic.

In Chrome, overflow: hidden cuts off the tops and bottoms of content/letters that are trimmed by text-box:

(The first red box is without text-box, the second is with text-box.)

In Safari, text-box seems to be completely ignored when overflow is specified:

The result I was expecting is that text-box both with and without text-overflow would look exactly the same (not cutting off vertically trimmed content) except for truncating the text. Similar to using negative margins.

This seems intentional according to the spec. The following seems to suggest that both results could be correct because the content trimmed by text-box is overflow: https://drafts.csswg.org/css-inline-3/#text-box-trim

NOTE: Content and ink overflowing a box due to non-initial values of text-box-trim is handled the same as content that would overflow the box or line box otherwise.

If, when printing, trimming a line box would cause its content to be clipped, the UA may ignore text-box-trim on that edge of that line box.

I find it a bit concerning so far that the two major browsers that claim support for text-box are giving different results in this case.

My next thought was, text-box trim causes vertical overflow, but text-overflow should only apply to horizontal overflow, so let's try overflow-x: hidden; overflow-y: visible. But this doesn't work either: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#syntax

If overflow-x is hidden, scroll, or auto and the overflow-y property is visible (default), the value will be implicitly computed as auto.

Unless I'm missing something, I couldn't find a way to use both text-box and text-overflow without issue. Negative margins can of course achieve the desired effect both with and without text-overflow, but it doesn't feel right that I can only use text-box with untruncated text.

Is there a better way?