Description
Consider the following example:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10618
<!DOCTYPE html>
<div style="display: grid; grid-template: 100px 100px / 100px; justify-items: baseline;">
<div style="writing-mode: vertical-rl; background: lime;">
line1<br>line2
</div>
<div style="writing-mode: vertical-lr; background: hotpink;">
line1<br>line2
</div>
</div>Here we have two separate baseline sharing groups.
css-align-3 states that if things are first-baseline aligned their default alignment should be start aligned.
Blink/WebKit's behaviour here is likely "correct" based on this. Then consider:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10619
<!DOCTYPE html>
<div style="display: grid; grid-template: 100px 100px 100px / 100px; justify-items: baseline;">
<div style="writing-mode: vertical-rl; background: lime;">
line1<br>line2
</div>
<div style="writing-mode: vertical-lr; background: hotpink;">
line1<br>line2
</div>
<div style="writing-mode: vertical-lr; justify-self: last baseline; background: cyan;">
line1<br>line2
</div>
</div>Here we can't both be start & end aligned?
Two potential solutions to this problem.
-
Make everything start aligned by default (including last-baseline).
-
In Blink we have the concept of a "major" baseline sharing group (the one that would be start aligned), and a "minor" (the one that is end aligned). Particular care needs to be done when defining which writing-mode+directions go into the "major"/"minor" group.
If we go with (2) the likely affected WPTs are:
external/wpt/css/css-grid/alignment/grid-alignment-style-changes-003.html
external/wpt/css/css-grid/alignment/grid-alignment-style-changes-004.html
external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html
external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html
external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html
external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html
external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html
external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html
external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html
external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html
external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html
external/wpt/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-001.html
external/wpt/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-002.html
external/wpt/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html