Bug 261154 – To avoid circular dependency, use the intrinsic size of replaced element as width

• Status: REOPENED
• Component: Layout and Rendering

[Ahmad Saleem]

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!

[EWS]

Committed 267648@main (7c273eb0afa7): <https://commits.webkit.org/267648@main>

Reviewed commits have been landed. Closing PR #17436 and removing active labels.

[Radar WebKit Bug Importer]

<rdar://problem/115007278>

[WebKit Commit Bot]

Re-opened since this is blocked by bug 263903

[alan]

(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

[alan]

Created attachment 468412 [details]
incorrect layout

[Ahmad Saleem]

NOTE: It is reproducible on Safari Technology Preview 181 and not on Safari 17.1.

[Karl Dubost]

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;
}
```

[Ahmad Saleem]

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

[Ahmad Saleem]

Created attachment 470451 [details]
Test Case