Bug 254923 - Web Inspector: REGRESSION(257050@main) Right divider of async boundary in call stack is "..." instead of a line
Summary: Web Inspector: REGRESSION(257050@main) Right divider of async boundary in cal...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on: 248370
Blocks:
  Show dependency treegraph
 
Reported: 2023-04-03 09:46 PDT by Devin Rousso
Modified: 2023-05-18 08:56 PDT (History)
7 users (show)

See Also:


Attachments
[Image] screen shot of issue (21.79 KB, image/png)
2023-04-03 09:46 PDT, Devin Rousso
no flags Details
Screenshot of overflowing ::after pseudo (780.26 KB, image/png)
2023-05-12 17:48 PDT, Tim Nguyen (:ntim)
no flags Details
Reduced testcase (166 bytes, text/html)
2023-05-12 17:55 PDT, Tim Nguyen (:ntim)
no flags Details
Test case (no pseudo) (233 bytes, text/html)
2023-05-12 18:53 PDT, zalan
no flags Details
Test reduction (1.37 KB, text/html)
2023-05-18 08:56 PDT, zalan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Devin Rousso 2023-04-03 09:46:40 PDT
Created attachment 465747 [details]
[Image] screen shot of issue

.
Comment 1 Radar WebKit Bug Importer 2023-04-03 09:59:33 PDT
<rdar://problem/107562836>
Comment 2 Smoley 2023-04-04 09:39:26 PDT
Hey Devin, thanks for filing. Can you link to a test case for easy repro of this issue? Thanks.
Comment 3 Devin Rousso 2023-04-04 17:15:07 PDT
1. open Web Inspector on any page
2. evaluate the following the console
```
setTimeout(() => { debugger; })
```
Comment 4 Tim Nguyen (:ntim) 2023-05-12 17:48:15 PDT
Created attachment 466339 [details]
Screenshot of overflowing ::after pseudo
Comment 5 Tim Nguyen (:ntim) 2023-05-12 17:55:10 PDT
Created attachment 466340 [details]
Reduced testcase
Comment 6 Tim Nguyen (:ntim) 2023-05-12 17:57:04 PDT
The attached reduction behaves differently across browsers:

- Firefox:
(blank output)

- Chrome:
•

- Safari:
• …
Comment 7 zalan 2023-05-12 18:46:29 PDT
Both Chrome and Firefox wrap the inline-block to the next line.
Comment 8 zalan 2023-05-12 18:53:24 PDT
Created attachment 466342 [details]
Test case (no pseudo)
Comment 9 zalan 2023-05-17 17:13:06 PDT
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)
Comment 10 zalan 2023-05-18 08:56:49 PDT
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.