csswg-drafts
csswg-drafts copied to clipboard
w3c
[css-align-3][css-grid-1] Alignment edge preference of baseline sharing groups.
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
@bfgeek Clarified in https://github.com/w3c/csswg-drafts/commit/d896c01cc5490a308d6fc8d355e92cc07ced5fbd ; within a baseline-sharing group, once you resolve to physical alignment directions, the fallback preferences should be the same for all items.
We believe this resolves the issue, let us know if we missed anything.
