Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-08 06:55:31 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Do not use orthogonal baselines in flex layout (#33347)

Browse source 
When a baseline is orthogonal to the main flexbox axis, it should not
take part in baseline alignment. This change does that for column flex.
While there is no support for vertical writing modes, this change is
made to be as writing mode-agnostic as possible.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson 2024-09-07 15:08:48 -07:00 • committed by GitHub
parent a43e296436
commit f3f96c3393
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 92 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

13
tests/wpt/meta/MANIFEST.json vendored
View file

@ -169326,6 +169326,19 @@
{}
]
],
"flexbox-align-self-baseline-compatability.html": [
"42270c1b364c14dc21ba0eb67294eb263a4732f1",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"flexbox-align-self-baseline-horiz-001a.xhtml": [
"0460f4162f5f424b4693c19cab688f5b5db16fa3",
[

36
tests/wpt/tests/css/css-flexbox/flexbox-align-self-baseline-compatability.html vendored Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"/>
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-baselines"/>
<meta name="assert" content="Test checks that item baselines orthogonal to the flex container's main axis do not affect baseline alignment.">
<style>
.flex {
display: flex;
background: red;
width: 100px;
flex-direction: column;
flex-wrap: wrap;
}
.flex > div {
width: 100px;
height: 50px;
background: green;
color: transparent;
align-self: baseline;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="flex">
<div>A</div>
<!--The baseline of this child is different from the first, but because it
is orthogonal to the main axis of the flexbox, it does not affect the
positioning of the item, even with `baseline` alignment -->
<div style="font-size: 200%">A</div>
</div>
</html>