Bug 257811 – Inline-level elements with self-painting layer renders overlapping ellipsis.

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

[Ethan Wong]

Created attachment 466623 [details]
A case to reproduce this issue

Inline-level elements with self-painting layer (`hasSelfPaintingLayer == true`) may be rendered renders overlapping ellipsis generated by `text-overflow: ellipsis`. 

See the attached case and screenshot. Specifically `position: relative` causes the `<span>` element to be self-painted from the layer.

This issue is caused due to self-painting layer chilldrens being painted in a different flow without the knowledge about its the line layout context. The actual behavior that hides the overflow element happens at `InlineContentPainter::paintDisplayBox(const InlineDisplay::Box&)` when `box.isFullyTruncated() == true`.

[Ethan Wong]

Created attachment 466624 [details]
Browser comparations of the attached case

[zalan]

that's a good catch. so this can be triggered on any self-painting inline level element e.g.

<style>
div {
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}
img {
  height: 50px;
  width: 50px;
  background: green;
}
.overflow {
  background: red;
  transform: translateZ(0);
}
</style>
PASS in no red shows.
<div><img><img class=overflow></div>

[Ethan Wong]

Right, the initial issue we discovered in our app was an inline image with `position: relative` being cut in half.

[zalan]

Ethan, are you planning on working on this? (asking because you landed some great fixes in the past and wanted to make sure we don't start working on the same issue).

[Ethan Wong]

(In reply to zalan from comment #4)
> Ethan, are you planning on working on this? (asking because you landed some
> great fixes in the past and wanted to make sure we don't start working on
> the same issue).

I spent some time debugging on this issue but have no idea how to fix it, so I just reported it here.

[zalan]

(In reply to Ethan Wong from comment #5)
> (In reply to zalan from comment #4)
> > Ethan, are you planning on working on this? (asking because you landed some
> > great fixes in the past and wanted to make sure we don't start working on
> > the same issue).
> 
> I spent some time debugging on this issue but have no idea how to fix it, so
> I just reported it here.
Thank you. Looking into it now.

[Radar WebKit Bug Importer]

<rdar://problem/110408920>

[zalan]

Created attachment 466628 [details]
Patch

[zalan]

^^^ fixes the attached test case (I still need to come up with some more cases and include them in this patch).

[zalan]

Created attachment 466630 [details]
Patch

[EWS]

Committed 264973@main (c38822c4ed1c): <https://commits.webkit.org/264973@main>

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