[css-inline-3] text-box accumulation unexpected behavior

[bakura10]

Hello,

I've been playing with text-trim and found a rather unexpected behavior when applying text-trim on a parent, which applies what is apparently called "text-box-trim accumulation" (#5426).

You can reproduce the issue here: https://codepen.io/bakura10/pen/GgKMvqR

Ideally, this is the end result I would like:

This is apparently the expected result but I find it rather surprising and I'm sure other developers will find it surprising.

What we want in most cases is trimming of the first and last elements on content where I don't control the exact order of elements or which elements are being added (think of RTE or builder), independently of what they are (basically, I expected it to work a bit like margin-trim).

I am currently emulating what I want using this:

.prose > :first-child:not(.button) {
  text-trim: trim-start cap alphabetic;
}

.prose > :last-child:not(.button) {
  text-trim: trim-end cap alphabetic;
}

This however won't work if the DOM ended up being nested:

<div class="prose">
  <p>I'm trimed start</p>

  <div clas="max-w-sm">
    <p>I won't be trim end<p>
  </div>
</div>

Thanks.