Bug 261154 - To avoid circular dependency, use the intrinsic size of replaced element as width
Summary: To avoid circular dependency, use the intrinsic size of replaced element as w...
Status: REOPENED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Ahmad Saleem
URL:
Keywords: BrowserCompat, InRadar
Depends on: 263903
Blocks:
  Show dependency tree / graph
 
Reported: 2023-09-05 06:44 PDT by Ahmad Saleem
Modified: 2024-03-20 15:28 PDT (History)
6 users (show)

See Also:

Attachments
incorrect layout (913.57 KB, image/png)
2023-10-30 12:07 PDT, zalan 		no flags Details
Test Case (11.85 KB, text/html)
2024-03-20 15:28 PDT, Ahmad Saleem 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

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