Bug 254923 – Web Inspector: REGRESSION(257050@main) Right divider of async boundary in call stack is "..." instead of a line

• Component: Web Inspector
• Status: NEW

[Devin Rousso]

Created attachment 465747 [details]
[Image] screen shot of issue

.

[Radar WebKit Bug Importer]

<rdar://problem/107562836>

[Smoley]

Hey Devin, thanks for filing. Can you link to a test case for easy repro of this issue? Thanks.

[Devin Rousso]

1. open Web Inspector on any page
2. evaluate the following the console
```
setTimeout(() => { debugger; })
```

[Tim Nguyen (:ntim)]

Created attachment 466339 [details]
Screenshot of overflowing ::after pseudo

[Tim Nguyen (:ntim)]

Created attachment 466340 [details]
Reduced testcase

[Tim Nguyen (:ntim)]

The attached reduction behaves differently across browsers:

- Firefox:
(blank output)

- Chrome:
•

- Safari:
• …

[alan]

Both Chrome and Firefox wrap the inline-block to the next line.

[alan]

Created attachment 466342 [details]
Test case (no pseudo)

[alan]

It looks like WebInspector was relying on a bug in legacy inline layout which got progressed with IFC (257050@main). -and now we match both Chrome and Firefox.
<style>
.container {
  width: 500px;
  border: 1px solid green;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
  white-space: nowrap;
}
			
.inline_block {
  width: 100%;
  display: inline-block;
  height: 0;
  border-bottom: solid;
}
</style>
<div class=container>text<div class=inline_block></div></div>

^^ this is the reduced test case of async-strack--.. 

What WI is essentially telling layout here is

1, use a fixed width container for my content (width: 500px)
2, please do not wrap my content (white-space: no wrap)
3. If some of my content overflows, please use ellipsis to indicate overflow

now I am going to fill this container with:
1, some text content (text)
2, and an inline level box (<div>)
and please stretch this inline level box as wide as the container is (width: 100%)

^^ always leads to overflow in the inline direction and we gonna truncate the inline content and replace it with ellipsis. 
(while legacy line layout simply ignores this overflow).

Not sure what the following line means
/* Disabling either of these causes the trailing line to appear, but Web Inspector expects this to work. */
but restoring the rendering of the broken behavior could be achieved simply by not adding “text-overflow: ellipsis” and just let overflow: hidden do its clipping.
(text-overflow is a misleading name as it kicks in on any overflowing inline content and not just on text)

[alan]

Created attachment 466401 [details]
Test reduction

This is the original test reduction (credit to Patrick A). This shows the progression mentioned at comment https://bugs.webkit.org/show_bug.cgi?id=254923#c9.

Both Tim's and my followup test reductions are "too reduced". Will file a new bug for them.