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

fieldset's legend should probably inherit alignment #3913

Closed
zcorpan opened this Issue Aug 14, 2018 · 5 comments

Comments

4 participants
@zcorpan
Member

zcorpan commented Aug 14, 2018

https://html.spec.whatwg.org/#the-fieldset-and-legend-elements:inline-size

If the legend element in question has an align attribute, and its value is an ASCII case-insensitive match for one of the strings in the first column of the following table, then the legend is expected to be rendered aligned in the inline direction over the border edge in the position given in the corresponding cell on the same row in the second column. If the attribute is absent or has a value that doesn't match any of the cases in the table, then the position is expected to be on the inline-start side. [CSSWM]

Consider this test case

<!DOCTYPE html>
<div align=center><fieldset><legend>TEST</legend></fieldset></div>

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

It's centered in Safari/Chrome/Edge, but left-aligned in Firefox.

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan

zcorpan Aug 14, 2018

Member

https://www.soccervista.com/ is an example site affected by this.

cc @bzbarsky

Member

zcorpan commented Aug 14, 2018

https://www.soccervista.com/ is an example site affected by this.

cc @bzbarsky

@domenic

This comment has been minimized.

Show comment
Hide comment
@domenic

domenic Aug 14, 2018

Member

Vaguely related: #372 and #3428

Member

domenic commented Aug 14, 2018

Vaguely related: #372 and #3428

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan

zcorpan Aug 15, 2018

Member

It appears that in WebKit and Chromium, the alignment depends on text-align. Edge left-aligns if you specify text-align explicitly, even if there's an align attribute (maybe the magic alignment is a special value of text-align?)

The shortest path to interop is probably to match WebKit and Chromium.

Member

zcorpan commented Aug 15, 2018

It appears that in WebKit and Chromium, the alignment depends on text-align. Edge left-aligns if you specify text-align explicitly, even if there's an align attribute (maybe the magic alignment is a special value of text-align?)

The shortest path to interop is probably to match WebKit and Chromium.

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

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

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

@annevk annevk added the interop label Aug 15, 2018

@bzbarsky

This comment has been minimized.

Show comment
Hide comment
@bzbarsky

bzbarsky Aug 15, 2018

Collaborator

What behavior do the non-Gecko engines actually implement? Do they map the align attribute into CSS (which property and value?) and then just use the CSS property value when determining alignment?

<div align> gets mapped to text-align in Gecko, with a magic "-moz-center" value that has some curious behavior. So using the text-align property for legend alignment might make sense. The legend's or the fieldset's? At first glance Chrome and Safari use the legend's, I think.

Collaborator

bzbarsky commented Aug 15, 2018

What behavior do the non-Gecko engines actually implement? Do they map the align attribute into CSS (which property and value?) and then just use the CSS property value when determining alignment?

<div align> gets mapped to text-align in Gecko, with a magic "-moz-center" value that has some curious behavior. So using the text-align property for legend alignment might make sense. The legend's or the fieldset's? At first glance Chrome and Safari use the legend's, I think.

@zcorpan

This comment has been minimized.

Show comment
Hide comment
@zcorpan

zcorpan Aug 15, 2018

Member

Specifying text-align on just the legend changes its position (see demo), so I think they must be using the text-align on the legend.

cc @eaenet

Member

zcorpan commented Aug 15, 2018

Specifying text-align on just the legend changes its position (see demo), so I think they must be using the text-align on the legend.

cc @eaenet

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

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

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

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

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

Bug 1483519 [wpt PR 12498] - HTML: fieldset legend should inherit ali…
…gnment, a=testonly

Automatic update from web-platform-testsHTML: fieldset legend should inherit alignment

See whatwg/html#3913.
--

wpt-commits: 8dd18afacc7a7cf9969592d8dbd74c20e6d6df8e
wpt-pr: 12498

jankeromnes pushed a commit to jankeromnes/gecko that referenced this issue Aug 31, 2018

Bug 1483519 [wpt PR 12498] - HTML: fieldset legend should inherit ali…
…gnment, a=testonly

Automatic update from web-platform-testsHTML: fieldset legend should inherit alignment

See whatwg/html#3913.
--

wpt-commits: 8dd18afacc7a7cf9969592d8dbd74c20e6d6df8e
wpt-pr: 12498

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment