Bug 53147

Summary: CSS 2.1 Failure: table-anonymous-object-188 ::after on an inline parent messes up anonymous table box creation around table-cell boxes
Product: WebKit Reporter: Tab Atkins <tabatkins>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, ap, hyatt, rniwa, robert, simon.fraser, zalan
Priority: P2 Keywords: WPTImpact
Version: 528+ (Nightly build)   
Hardware: PC   
OS: OS X 10.5   
URL: http://wpt.live/css/CSS2/tables/table-anonymous-objects-188.xht
Bug Depends on:    
Bug Blocks: 47141    
Attachments:
Description Flags
Safari 15.5 matches Chrome but differs from Firefox none

Description Tab Atkins 2011-01-25 17:02:47 PST
In the linked test case, "b" and "c" are in table-cell blocks that should be grouped by a single anonymous table box.

However, the #t::after{} rule, which creates an ::after pseudoelement as a sibling of the spans containing "b" and "c", forces the "b" and "c" to generate individual anonymous table boxes, so they sit on separate lines.  

As the linked case is relatively complex, here is a stripped test case:

<!doctype html>
<style>
#wrong > span { display: table-cell; }
#wrong::after { content: "fail"; }
#right > span { display: table-cell; }
#right::before { content: "win"; }
#alsoright > span { display: table-cell; }
#alsoright::after { content: "win"; }
</style>
<span id=wrong>
  <span>a</span>
  <span>b</span>
</span>
<hr>
<span id=right>
  <span>a</span>
  <span>b</span>
</span>
<hr>
<div id=alsoright>
  <span>a</span>
  <span>b</span>
</div>

Special notes:
1. This only happens is #t is inline.
2. This only happens if you generate an ::after.  Generating ::before doesn't cause any problems.
3. Having actual text at the end, rather than a generated ::after, doesn't cause any problems.
Comment 1 Ahmad Saleem 2022-06-21 17:04:43 PDT
Created attachment 460394 [details]
Safari 15.5 matches Chrome but differs from Firefox

I am able to reproduce this bug based on the attached URL in Safari 15.5 on macOS 12.4.

Please refer to updated results across all browsers in attached screenshot. Only Firefox renders the text output without any 'red', while Safari and Chrome matches each other.

If there is any web-spec issue and Firefox is not correct then this can be marked as "RESOLVED CONFIGURATION CHANGED" else this can continue to be investigated till proper fix. Thanks!
Comment 2 Ahmad Saleem 2022-06-21 17:08:06 PDT
Further, I changed the reduction from Comment 01 into JSFiddle:

Link - https://jsfiddle.net/7p459ezm/show

^In above as well, Firefox shows "ab fail" with space compared to Safari 15.5 and Firefox, which shows it as "abfail".
Comment 3 Ryosuke Niwa 2022-06-21 17:13:12 PDT
*** Bug 53144 has been marked as a duplicate of this bug. ***
Comment 4 Ahmad Saleem 2023-05-19 09:10:20 PDT
It it also on WPT, so adding WPTImpact tag.