[css-align] align-content: baseline is busted

I've been meaning to file this issue for a while, but finally got around to creating a testcase:

Code

<!DOCTYPE html>
<style>
.container {
  margin: 10px;
  gap: 5px;
  border: solid 3px;
  height: 100px;
  width: max-content;
}
.container :is(div, td):nth-child(1) {
  font-size: 40px;
  align-self: baseline;
  background: lime;
  &::before {
    content: 'large text';
  }
}
.container :is(div, td):nth-child(2) {
  font-size: 12px;
  align-content: baseline;
  background: cyan;
  &::before {
    content: 'small text';
  }
}
.container :is(div, td):nth-child(3) {
  display: flex;
  font-size: 12px;
  align-content: baseline;
  background: orange;
  &::before {
    content: 'small text';
  }
}
.container :is(div, td):nth-child(4) {
  display: grid;
  font-size: 12px;
  align-content: baseline;
  background: cornflowerblue;
  &::before {
    content: 'small text';
  }
}

td {
  vertical-align: middle;
}
</style>
<div class="container" style="display: flex;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</div>

<div class="container" style="display: grid; grid-auto-flow: column;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</div>

<table class="container">
  <td style="align-content: baseline;"></td>
  <td></td>
</table>

https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=14481

Parsing align-content: baseline / align-content: last baseline
- Blink/Gecko/WebKit parses align-content: baseline
- Gecko/WebKit parse align-content: last baseline (Blink explicitly didn't ship this as we knew is was broken, but WebKit appears to have shipped sometime in ~2022 https://webkit.org/blog/13591/webkit-features-in-safari-16-2/#:~:text=align%2Dcontent%3A%20last%20baseline ).
Fallback alignment (no baseline alignment context)
- Gecko/WebKit only support the fallback alignment for last baseline if the container is display: block (from my testing).
Baseline alignment (testcase above, another item providing a baseline-context).
- Blink/WebKit - not supported in grid/flexbox, supported in table.
- Gecko - not supported in flexbox/table, very broken support in grid (there is hysterisis, and for the life of my cannot work out what Gecko is doing).

So options.

We do nothing. IMO this risks anyone actually trying to ship this feature properly. E.g. sites may have align-content: last baseline specified on things assuming it'll do nothing.
Everyone unships align-content: baseline / align-content: last baseline. Likely won't break anything due to the poor compat we have already, and move align-content: baseline to a later spec or similar or mark at-risk.
We specify that these features are broken, and just fallback to start/end alignment.

IMO this isn't a highly requested feature from web-developers (e.g. we haven't seen requests in our bug tracker to fix align-content: baseline), but at the moment the status quo is particularly bad.

Since it's not working on anything except tables (which historically use vertical-align anyway) I think unshipping the parsing support makes the most sense.

@dholbert

I'm ok with trying to unship it given the above...

@dholbert, do you have some context on what our grid code is doing? If it's useful I could try to dig...

I'm ok too. It was never fully complete, so it doesn't surprise me that there's weirdness. Probably not worth spending time debugging it at this point if there's consensus on unshipping.

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=2044513 to put it behind an about:config pref, at the parser level.

Hand-edited minutes

RESOLVED: Unship align-content: baseline/last baseline for now
RESOLVED: Add a note to the spec so people don't get tripped-up

Details

Topic: align-content: baseline
IanK: This is broken in basically every browser.
IanK: It parses in, but the actual feature is sort-of only supported in table layout for Blink and WebKit (as a result of 'vertical-align')
IanK: And it kinda works in Firefox in grid layout with block children
IanK: So basically completely broken.
Iank: 3 possibilities
Iank: 1. Do nothing. May break sites if in the future try to support it.
Iank: 2. Unship it in all browsers.
Iank: 3. Specify the broken behavior.
astearns: Seems like some sentiment in favor of unshipping
astearns: [missed]
IanK: It's complicated to get correct, because it affects every layout mode and type of chid.
IanK: Current testing is very sporadic
IanK: Part of the reason it came up was that a non-Blink implementer proposed to implement the feature by getting the tests to pass
Iank: Someone with experience might be able to get it to work property in several months of work, but current situation is very bad
seems fine to unship given the (sad) state
fine with me to unship for now, certainly
Iank: Chrome is hoping others will make the first move.
IanK: We're in the most unshipped state atm.
dholbert: Do you forsee compat problems?
IanK: Not particularly concerned. We occasionally get a bug report that "does stuff in Firefox, why not Chrome"
IanK: Otherwise we'll need to match you
dholbert: I'm fine unshipping. Don't anticipate breaking stuff
IanK: Should it be marked at-risk?
florian: at-risk is very procedural thing that I think we don't care about
fantasai: so FF supports it on Grid
?
iank_: grid with block-level children but it's broken because they have hysteresis
... not in a functional state
... there's four tests in the whole of WPT
... but not super well supported
... if you use a flex child instead of a block container then it's busted
fantasai: I think we should unship the syntax given it's not well implemented
... going forward the feature should maybe only apply to blocks?
... to get like a toolbar where the text lines up but the buttons take the whole area
astearns: but that seems separate work right?
fantasai: if we tweak the spec to say that it should only work on blocks it scopes down the work to ship it eventually
astearns: right
astearns: objections to unship for now?
RESOLVED: Unship align-content: baseline/last baseline for now
fantasai: do we want to resolve to make it only support blocks?
astearns: I'd like a separate issue
florian: do we want to warn in the spec?
fantasai: we already say that you shouldn't ship syntax you don't support
iank_: it'd be helpful for servo/ladybird
... it's non-obvious what this feature actually does
... I've seen two people make an incorrect assumptions
... a warning in the spec might be useful
fantasai: what would the warning say?— bramus Danger, here be dragons
iank_: still working on it, known to be broken on major browser engines
fantasai: hopefully it'll be unshipped in a couple months
astearns: I think a note in the spec would be useful
Note: Reminder that implementers are not supposed to parse features they don't fully support.
... proposed to add a note that nobody implements the feature right as of 2025 and we're working on it
fantasai: :p
RESOLVED: Add a note to the spec so people don't get tripped-up
"nobody implements the feature except for parsing, which is a spec violation"

[css-align-3] Add note about partial implementations #13421

Navigation Menu

Repository navigation

[css-align] `align-content: baseline` is busted #13421

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-align] align-content: baseline is busted #13421

Description

Activity

fantasai commented on Jun 2, 2026

emilio commented on Jun 2, 2026

dholbert commented on Jun 2, 2026

dholbert commented on Jun 3, 2026

astearns commented on Jun 3, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[css-align] `align-content: baseline` is busted #13421