Bug 261154

Summary: To avoid circular dependency, use the intrinsic size of replaced element as width
Product: WebKit Reporter: Ahmad Saleem <ahmad.saleem792>
Component: Layout and RenderingAssignee: Ahmad Saleem <ahmad.saleem792>
Status: REOPENED ---    
Severity: Normal CC: bfulgham, commit-queue, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on: 263903    
Bug Blocks:    
Attachments:
Description Flags
incorrect layout
none
Test Case none

Description Ahmad Saleem 2023-09-05 06:44:03 PDT 
Hi Team,

While going through Blink's commit, I came across following where we are failing one test.

Test Case: https://jsfiddle.net/vcx7p8kL/show

Blink's Commit: https://chromium.googlesource.com/chromium/src.git/+/e5ade991aba279d218cfe1c4dfd125a9383f8533

WebKit Source: https://searchfox.org/wubkat/source/Source/WebCore/rendering/RenderReplaced.cpp#704

___

Locally compiling, it fixes one failing test case:

// We cannot resolve some logical width here (i.e. percent, fill-available or fit-content)
    // as the available logical width may not be set on our containing block.
    const auto logicalWidth = style().logicalWidth();
    if (logicalWidth.isPercentOrCalculated() || logicalWidth.isFillAvailable() || logicalWidth.isFitContent())

____

Just wanted to raise so we can fix it.

Thanks!
Comment 1 EWS 2023-09-05 13:34:37 PDT 
Committed 267648@main (7c273eb0afa7): <https://commits.webkit.org/267648@main>

Reviewed commits have been landed. Closing PR #17436 and removing active labels.
Comment 2 Radar WebKit Bug Importer 2023-09-05 13:35:18 PDT 
<rdar://problem/115007278>
Comment 3 WebKit Commit Bot 2023-10-30 10:40:43 PDT 
Re-opened since this is blocked by bug 263903
Comment 4 zalan 2023-10-30 12:06:48 PDT 
(In reply to WebKit Commit Bot from comment #3)
> Re-opened since this is blocked by bug 263903
1. load https://developer.apple.com/design/resources/#macos-apps
2. notice incorrect layout, e.g. the Mac laptop shown in full width
Comment 5 zalan 2023-10-30 12:07:07 PDT 
Created attachment 468412 [details]
incorrect layout
Comment 6 Ahmad Saleem 2023-10-30 12:12:08 PDT 
NOTE: It is reproducible on Safari Technology Preview 181 and not on Safari 17.1.
Comment 7 Karl Dubost 2023-10-31 11:32:15 PDT 
This is solved by deactivating `width: -webkit-fill-available;`

```csss
.download-image {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
}
```
Comment 8 Ahmad Saleem 2023-12-29 12:09:18 PST 
Please use Web Archive from October to reproduce this bug, it is not reproducible using live website version:

http://web.archive.org/web/20231019182307/https://developer.apple.com/design/resources/#macos-apps
Comment 9 Ahmad Saleem 2024-03-20 15:28:46 PDT 
Created attachment 470451 [details]
Test Case