Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Specify where text baseline is for form controls / widgets #5065

Open
zcorpan opened this issue Nov 7, 2019 · 2 comments
Open

Specify where text baseline is for form controls / widgets #5065

zcorpan opened this issue Nov 7, 2019 · 2 comments
Labels
topic: forms topic: rendering

Comments

@zcorpan
Copy link
Member

zcorpan commented Nov 7, 2019

In #4082 (comment) @MatsPalmgren wrote

I added three more columns that check each of the existing cases but with -webkit-appearance:none. [...]
Chrome also synthesizes the baseline differently depending on that property for type=checkbox for example (content-box vs margin-box).

It's also worth noting that the baseline is different for some of these controls. For example, type=color uses the content-box edges, whereas type=range use the margin-box edges in Firefox but the border-box edges in Chrome. We need to agree on these baselines and specify them somewhere.

Firefox and Safari also has different baseline for radio and checkbox depending on -webkit-appearance.
@zcorpan zcorpan mentioned this issue Nov 7, 2019
Closed
zcorpan added a commit to web-platform-tests/wpt that referenced this issue Nov 18, 2019
@zcorpan
HTML: Add a tentative test for input element's baseline alignment
e8207ee 
See
whatwg/html#5065
whatwg/html#4840
zcorpan added a commit to web-platform-tests/wpt that referenced this issue Nov 18, 2019
@zcorpan
HTML: Add a tentative test for input element's baseline alignment
07085ca 
See
whatwg/html#5065
whatwg/html#4840
This was referenced Nov 18, 2019
Merged
Merged
zcorpan added a commit to web-platform-tests/wpt that referenced this issue Jan 28, 2020
@zcorpan
HTML: Add a tentative test for input element's baseline alignment
0114dd7 
See
whatwg/html#5065
whatwg/html#4840
zcorpan added a commit to web-platform-tests/wpt that referenced this issue Feb 3, 2020
@zcorpan
HTML: Add a tentative test for input element's baseline alignment
d472ae3 
See
whatwg/html#5065
whatwg/html#4840
@zcorpan
Copy link
Member Author

zcorpan commented Feb 3, 2020

The test in web-platform-tests/wpt#20306 has a comment that could be used as a starting point for specifying this.

moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Feb 11, 2020
@zcorpan @moz-wptsync-bot
Bug 1597544 [wpt PR 20306] - HTML: Add a tentative test for input ele…
84f203e 
…ment's baseline alignment, a=testonly

Automatic update from web-platform-tests
HTML: Add a tentative test for input element's baseline alignment

See
whatwg/html#5065
whatwg/html#4840
--

wpt-commits: d472ae32e215c33d1a85eade6bfd8130c4caf491
wpt-pr: 20306
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Feb 12, 2020
@marco-c
Bug 1597544 [wpt PR 20306] - HTML: Add a tentative test for input ele…
ccce55a 
…ment's baseline alignment, a=testonly

Automatic update from web-platform-tests
HTML: Add a tentative test for input element's baseline alignment

See
whatwg/html#5065
whatwg/html#4840
--

wpt-commits: d472ae32e215c33d1a85eade6bfd8130c4caf491
wpt-pr: 20306

UltraBlame original commit: ee1c56806ccb2576b1110ab46799ae9a8ff2baf3
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Feb 12, 2020
@marco-c
Bug 1597544 [wpt PR 20306] - HTML: Add a tentative test for input ele…
0939fc4 
…ment's baseline alignment, a=testonly

Automatic update from web-platform-tests
HTML: Add a tentative test for input element's baseline alignment

See
whatwg/html#5065
whatwg/html#4840
--

wpt-commits: d472ae32e215c33d1a85eade6bfd8130c4caf491
wpt-pr: 20306

UltraBlame original commit: ee1c56806ccb2576b1110ab46799ae9a8ff2baf3
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Feb 12, 2020
@marco-c
Bug 1597544 [wpt PR 20306] - HTML: Add a tentative test for input ele…
0a283dd 
…ment's baseline alignment, a=testonly

Automatic update from web-platform-tests
HTML: Add a tentative test for input element's baseline alignment

See
whatwg/html#5065
whatwg/html#4840
--

wpt-commits: d472ae32e215c33d1a85eade6bfd8130c4caf491
wpt-pr: 20306

UltraBlame original commit: ee1c56806ccb2576b1110ab46799ae9a8ff2baf3
xeonchen pushed a commit to xeonchen/gecko that referenced this issue Feb 12, 2020
@zcorpan @moz-wptsync-bot
Bug 1597544 [wpt PR 20306] - HTML: Add a tentative test for input ele…
2a9cb37 
…ment's baseline alignment, a=testonly

Automatic update from web-platform-tests
HTML: Add a tentative test for input element's baseline alignment

See
whatwg/html#5065
whatwg/html#4840
--

wpt-commits: d472ae32e215c33d1a85eade6bfd8130c4caf491
wpt-pr: 20306
@bfgeek bfgeek mentioned this issue Apr 24, 2024
Open
@bfgeek
Copy link
Member

bfgeek commented Apr 26, 2024

This also needs to specify how baselines are synthesized in an inline context. My default baselines are synthesized off the margin box.

I did some basic testing here:
web-platform-tests/wpt#45889 (comment)

But TL;DR:

  • <input type=radio>/<inpput type=checkbox> - with effective appearance they synthesize off the border-box edges, and with appearance:none of the margin-box edges.
  • <input type=range> in Blink/Webkit synthesizes off the border-box edge, Firefox margin-box.
  • <button>/<input type=button>/<input type=submit>/<input type=reset> synthesizes off the content-box edge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
topic: forms topic: rendering
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zcorpan @bfgeek