New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Define how margin-top on fieldset's legend works #3929

Closed
zcorpan opened this Issue Aug 16, 2018 · 11 comments

Comments

3 participants
@zcorpan
Member

zcorpan commented Aug 16, 2018

See demos

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/6107
http://software.hixie.ch/utilities/js/live-dom-viewer/saved/6108

WebKit/Chromium ignore the margin

EdgeHTML honors the margin. The fieldset's border is centered within the border edge of the legend.

Gecko honors the margin. The fieldset's border is centered within the margin edge of the legend.

@zcorpan

This comment has been minimized.

Show comment
Hide comment
Member

zcorpan commented Aug 16, 2018

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan

zcorpan Aug 23, 2018

Member

Pages in httparchive with non-zero margin on legend

https://gist.github.com/zcorpan/85e8a646fdeb15f0580e37a92de3709f

Member

zcorpan commented Aug 23, 2018

Pages in httparchive with non-zero margin on legend

https://gist.github.com/zcorpan/85e8a646fdeb15f0580e37a92de3709f

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan

zcorpan Aug 23, 2018

Member

http://www.umassonline.net/ is a page that renders differently between browsers. Firefox has more space above the fieldset/legend ("Step 1: Your Contact Details") compared to Safari and Chrome. Edge has as much space as Firefox, but the fieldset background is shown above the legend.

screen shot 2018-08-23 at 14 40 53

Member

zcorpan commented Aug 23, 2018

http://www.umassonline.net/ is a page that renders differently between browsers. Firefox has more space above the fieldset/legend ("Step 1: Your Contact Details") compared to Safari and Chrome. Edge has as much space as Firefox, but the fieldset background is shown above the legend.

screen shot 2018-08-23 at 14 40 53

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan

zcorpan Aug 23, 2018

Member

I've looked at the first 60. Although I filtered the list for pages that contain a fieldset, most of them don't contain a legend. The above was the only one I found with an actual clear difference.

This suggests to me that, web compat-wise, ignoring margin in the block-flow direction should be OK.

Member

zcorpan commented Aug 23, 2018

I've looked at the first 60. Although I filtered the list for pages that contain a fieldset, most of them don't contain a legend. The above was the only one I found with an actual clear difference.

This suggests to me that, web compat-wise, ignoring margin in the block-flow direction should be OK.

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan

zcorpan Aug 27, 2018

Member

@MatsPalmgren are you ok with ignoring block margins?

Member

zcorpan commented Aug 27, 2018

@MatsPalmgren are you ok with ignoring block margins?

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan
Member

zcorpan commented Sep 7, 2018

@MatsPalmgren

This comment has been minimized.

Show comment
Hide comment
@MatsPalmgren

MatsPalmgren Sep 12, 2018

I tend to think that block-axis margins are useful also on a rendered legend. Ignoring them introduces an exception and exceptions are bad in general.

@tabatkins @mstensho WDYT?

MatsPalmgren commented Sep 12, 2018

I tend to think that block-axis margins are useful also on a rendered legend. Ignoring them introduces an exception and exceptions are bad in general.

@tabatkins @mstensho WDYT?

@mstensho

This comment has been minimized.

Show comment
Hide comment
@mstensho

mstensho Sep 12, 2018

Interop for margins is horrible at the moment, so we're free to spec whatever. :)
Ignoring them seemed like one compelling option, making it easy to deal with.

But I agree that margins could be useful. But then let's specify that they don't collapse with anything on the outside (It's already implicit that they don't collapse with anything on the inside the legend, since legends establish a BFC).

We also need to spec how this affects alignment with the fieldset border. Are we still going to use the legend border box for alignment? I guess so? And the margins contribute to the size of the size of the block-start border area of the fieldset (just like the remaining parts (border box) of the legend), right?

mstensho commented Sep 12, 2018

Interop for margins is horrible at the moment, so we're free to spec whatever. :)
Ignoring them seemed like one compelling option, making it easy to deal with.

But I agree that margins could be useful. But then let's specify that they don't collapse with anything on the outside (It's already implicit that they don't collapse with anything on the inside the legend, since legends establish a BFC).

We also need to spec how this affects alignment with the fieldset border. Are we still going to use the legend border box for alignment? I guess so? And the margins contribute to the size of the size of the block-start border area of the fieldset (just like the remaining parts (border box) of the legend), right?

zcorpan added a commit that referenced this issue Sep 12, 2018

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan

zcorpan Sep 12, 2018

Member

OK I changed the spec in 16d86e5

Member

zcorpan commented Sep 12, 2018

OK I changed the spec in 16d86e5

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan

zcorpan Sep 12, 2018

Member

Are we still going to use the legend border box for alignment? I guess so?

Yes. This is like Edge. Doing it like Firefox appears buggy since the legend ends up "floating" somewhere if you have different margins on each side.

Member

zcorpan commented Sep 12, 2018

Are we still going to use the legend border box for alignment? I guess so?

Yes. This is like Edge. Doing it like Firefox appears buggy since the legend ends up "floating" somewhere if you have different margins on each side.

@MatsPalmgren

This comment has been minimized.

Show comment
Hide comment
@MatsPalmgren

MatsPalmgren Sep 12, 2018

Sounds reasonable to me. (I filed bug 1490747 to fix the alignment.)

MatsPalmgren commented Sep 12, 2018

Sounds reasonable to me. (I filed bug 1490747 to fix the alignment.)

zcorpan added a commit that referenced this issue Sep 14, 2018

zcorpan added a commit to web-platform-tests/wpt that referenced this issue Sep 18, 2018

zcorpan added a commit that referenced this issue Sep 19, 2018

Revamp how fieldset and legend rendering is defined
Properly define the rendering of the fieldset and legend elements.

The layout model used is most similar to Gecko, which uses an anonymous box to hold the fieldset's contents.

Fixes #3955, fixes #3930, fixes #3929, fixes #3928, fixes #3927, fixes #3915, fixes #3913, fixes #3660, fixes #3331, fixes #2756, fixes #4013.

Tests:
https://github.com/web-platform-tests/wpt/tree/master/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements
https://github.com/web-platform-tests/wpt/tree/master/html/semantics/forms/the-fieldset-element

moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Sep 20, 2018

Bug 1484683 [wpt PR 12569] - HTML: test inline margin on fieldset's l…
…egend, a=testonly

Automatic update from web-platform-testsHTML: test inline margin on fieldset's legend

See whatwg/html#3929
--

wpt-commits: c033091462612c88abe00a81162e230ce2069b24
wpt-pr: 12569

xeonchen pushed a commit to xeonchen/gecko that referenced this issue Sep 20, 2018

Bug 1484683 [wpt PR 12569] - HTML: test inline margin on fieldset's l…
…egend, a=testonly

Automatic update from web-platform-testsHTML: test inline margin on fieldset's legend

See whatwg/html#3929
--

wpt-commits: c033091462612c88abe00a81162e230ce2069b24
wpt-pr: 12569
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment