Bug 249094

Summary: Implement baseline-source CSS property
Product: WebKit Reporter: Tim Nguyen (:ntim) <ntim>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: samuel, sebastianzartner, sgill26, sime.vidas, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
A HTML file showcasing alignment issues with textareas
none
Screenshot of the textarea alignment issue none

Description Tim Nguyen (:ntim) 2022-12-11 07:52:45 PST 
https://drafts.csswg.org/css-inline-3/#baseline-source

Allows choosing between first or last baseline (or auto behavior).

WPT being added by https://github.com/web-platform-tests/wpt/pull/37443/
Comment 1 Radar WebKit Bug Importer 2022-12-18 07:53:16 PST 
<rdar://problem/103495495>
Comment 2 samuel 2023-04-05 05:52:38 PDT 
Created attachment 465773 [details]
A HTML file showcasing alignment issues with textareas

Textareas are a problematic area with regards to "vertical-align: baseline".

I'd expect elements with "vertical-align: baseline" in the same row of a table to be aligned together. As can be seen using the attached HTML file, the label, and the input texts are aligned, but the textarea text isn't.

Using "baseline-source: first" solves this issue in Chrome, it would be nice to have the same possibility in webkit. Firefox textareas don't have this issue.
Comment 3 samuel 2023-04-05 05:53:09 PDT 
Created attachment 465774 [details]
Screenshot of the textarea alignment issue
Comment 4 Šime Vidas 2023-10-27 07:13:10 PDT 
It’s worth mentioning that <textarea> does not have this issue in flex layouts with align-items: baseline. I have created a test page with flex layout instead of <table>:

https://jsbin.com/cijerob/edit?css,output

So it seems that baseline-source would be useful in <table>, but it’s not really needed in flex layouts.