Bug 220793 – Floated <legend> inside flexed <fieldset> is positioned incorrectly.

• Status: NEW
• Component: Layout and Rendering

[Manuel Meister]

Created attachment 418034 [details]
Expected styling

Steps to Reproduce:
Open: https://jsbin.com/nukoqozuko/edit?html,css,output

Expected result (image):
<legend> is in line with content
This works in Firefox 84, Chrome 87, Edge 87

Actual result:
<legend> behaves as if its not floated

[Manuel Meister]

Created attachment 418036 [details]
Actual styling

[Smoley]

Thanks for filing, I can reproduce this on Safari 13.1.3 and STP118.

[Radar WebKit Bug Importer]

<rdar://problem/73477828>

[Manuel Meister]

(In reply to Smoley from comment #2)
> Thanks for filing, I can reproduce this on Safari 13.1.3 and STP118.

Thank you. How can I see the progress of this bug?

[Ben Rush]

I ran across this issue on a grid layout, and noted that it also effects flex layouts as well. I was testing against Safari 14x on OSX, and 15x on iOS. 

Here is a reduced test case in a grid layout: 
https://codepen.io/ShonenKnife/pen/dyJXERG

SO Question: 
https://stackoverflow.com/q/71560733/362445
SO discussion has expected vs actual layout images, and our eventual workaround.

[Ahmad Saleem]

Blink Commit - https://chromium.googlesource.com/chromium/src.git/+/906abd41e4f6c786a1927f6edd69d6926e20317b

https://github.com/WebKit/WebKit/blob/407bf5b3e4df1c25be1ac59021623d370e2f435c/Source/WebCore/style/StyleAdjuster.cpp#LL345

Remove - style.setFloating(Float::None);

and then

https://github.com/WebKit/WebKit/blob/407bf5b3e4df1c25be1ac59021623d370e2f435c/Source/WebCore/rendering/RenderBlock.cpp#L3310

and few more changes. Might be difficult for me and might need input but I think we can do similar changes.