Bug 53147 - CSS 2.1 Failure: table-anonymous-object-188 ::after on an inline parent messes up anonymous table box creation around table-cell boxes
Summary: CSS 2.1 Failure: table-anonymous-object-188 ::after on an inline parent messe...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC OS X 10.5
: P2 Normal
Assignee: Nobody
URL: http://test.csswg.org/suites/css2.1/2...
Keywords:
: 53144 (view as bug list)
Depends on:
Blocks: 47141
  Show dependency treegraph
 
Reported: 2011-01-25 17:02 PST by Tab Atkins
Modified: 2022-06-21 20:32 PDT (History)
7 users (show)

See Also:


Attachments
Safari 15.5 matches Chrome but differs from Firefox (423.01 KB, image/png)
2022-06-21 17:04 PDT, Ahmad Saleem
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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. ***