Bug 301944 – -webkit-line-clamp doesn't support inline-block children

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

Created attachment 477288 [details]
Codepen reproduction

When an element with `-webkit-line-clamp: 1` has children with `display: inline-block`, ellipsis appear semi-arbitrarily. It seems like the algorithm considers these elements to be in different lines, and it tries to add ellipsis to the first element with inline-block. 

Children with `display: inline-block` are required in some situations for text animations. Chromium and Firefox seem to support this use-case correctly.


Reproduction:
https://codepen.io/aristidesfl/pen/myVgOYg?editors=1100


```html
<style>
.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;  
  overflow: clip;
}

.child {
  display: inline-block;
}
</style>

<div class="container">
  <span class="child">The</span>
  <span class="child">Quick</span>
  <span class="child">Brown</span>
  <span class="child">Fox</span>
  <span class="child">Jumps</span>
  <span class="child">Over</span>
  <span class="child">The</span>
  <span class="child">Lazy</span>
  <span class="child">Dog</span>    
</div>```

[Radar WebKit Bug Importer]

<rdar://problem/164488778>

[alan]

Created attachment 477853 [details]
Patch

[alan]

Created attachment 477854 [details]
Patch

[alan]

Created attachment 477856 [details]
[fast-cq]Patch

[EWS]

Committed 304956@main (feedd6408047): <https://commits.webkit.org/304956@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 477856 [details].