Bug 249094 - Implement baseline-source CSS property
Summary: Implement baseline-source CSS property
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2022-12-11 07:52 PST by Tim Nguyen (:ntim)
Modified: 2023-10-27 07:13 PDT (History)
6 users (show)

See Also:

A HTML file showcasing alignment issues with textareas (747 bytes, text/html)
2023-04-05 05:52 PDT, samuel
no flags Details
Screenshot of the textarea alignment issue (19.84 KB, image/png)
2023-04-05 05:53 PDT, samuel
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tim Nguyen (:ntim) 2022-12-11 07:52:45 PST

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
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>:


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