mirror of
https://github.com/servo/servo.git
synced 2025-08-05 13:40:08 +01:00
layout: Support start and end values for flexbox align-self (#33032)
These are similar to `flex-start` and `flex-end`, but in `wrap-reverse` situations, they are the opposite. Signed-off-by: Martin Robinson <mrobinson@igalia.com> Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson
GitHub
parent
a6638c1952
commit
8159f03288
4 changed files with 200 additions and 9 deletions
|
|
@ -1554,6 +1554,7 @@ impl InitialFlexLineLayout<'_> {
|
||||||
.baseline_relative_to_margin_box
|
.baseline_relative_to_margin_box
|
||||||
.unwrap_or_default(),
|
.unwrap_or_default(),
|
||||||
shared_alignment_baseline.unwrap_or_default(),
|
shared_alignment_baseline.unwrap_or_default(),
|
||||||
|
flex_context.flex_wrap_reverse,
|
||||||
);
|
);
|
||||||
|
|
||||||
let start_corner = FlexRelativeVec2 {
|
let start_corner = FlexRelativeVec2 {
|
||||||
|
|
@ -1886,24 +1887,34 @@ impl FlexItem<'_> {
|
||||||
line_cross_size: Au,
|
line_cross_size: Au,
|
||||||
propagated_baseline: Au,
|
propagated_baseline: Au,
|
||||||
max_propagated_baseline: Au,
|
max_propagated_baseline: Au,
|
||||||
|
wrap_reverse: bool,
|
||||||
) -> Au {
|
) -> Au {
|
||||||
|
let ending_alignment = line_cross_size - *used_cross_size - self.pbm_auto_is_zero.cross;
|
||||||
let outer_cross_start =
|
let outer_cross_start =
|
||||||
if self.margin.cross_start.is_auto() || self.margin.cross_end.is_auto() {
|
if self.margin.cross_start.is_auto() || self.margin.cross_end.is_auto() {
|
||||||
Au::zero()
|
Au::zero()
|
||||||
} else {
|
} else {
|
||||||
match self.align_self.0.value() {
|
match self.align_self.0.value() {
|
||||||
AlignFlags::STRETCH | AlignFlags::FLEX_START => Au::zero(),
|
AlignFlags::FLEX_START | AlignFlags::STRETCH => Au::zero(),
|
||||||
AlignFlags::FLEX_END => {
|
AlignFlags::FLEX_END => ending_alignment,
|
||||||
let margin_box_cross = *used_cross_size + self.pbm_auto_is_zero.cross;
|
AlignFlags::CENTER => ending_alignment / 2,
|
||||||
line_cross_size - margin_box_cross
|
|
||||||
},
|
|
||||||
AlignFlags::CENTER => {
|
|
||||||
let margin_box_cross = *used_cross_size + self.pbm_auto_is_zero.cross;
|
|
||||||
(line_cross_size - margin_box_cross) / 2
|
|
||||||
},
|
|
||||||
AlignFlags::BASELINE | AlignFlags::LAST_BASELINE => {
|
AlignFlags::BASELINE | AlignFlags::LAST_BASELINE => {
|
||||||
max_propagated_baseline - propagated_baseline
|
max_propagated_baseline - propagated_baseline
|
||||||
},
|
},
|
||||||
|
AlignFlags::START => {
|
||||||
|
if !wrap_reverse {
|
||||||
|
Au::zero()
|
||||||
|
} else {
|
||||||
|
ending_alignment
|
||||||
|
}
|
||||||
|
},
|
||||||
|
AlignFlags::END => {
|
||||||
|
if !wrap_reverse {
|
||||||
|
ending_alignment
|
||||||
|
} else {
|
||||||
|
Au::zero()
|
||||||
|
}
|
||||||
|
},
|
||||||
_ => Au::zero(),
|
_ => Au::zero(),
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
17
tests/wpt/meta/MANIFEST.json
vendored
17
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -122594,6 +122594,19 @@
|
||||||
],
|
],
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
|
],
|
||||||
|
"self-align-start-end-flex-001.html": [
|
||||||
|
"e8ce996f40dd985b8d4d064bdb1bca3e8dfba8a0",
|
||||||
|
[
|
||||||
|
null,
|
||||||
|
[
|
||||||
|
[
|
||||||
|
"/css/css-align/self-alignment/self-align-start-end-flex-001-ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
{}
|
||||||
|
]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -393249,6 +393262,10 @@
|
||||||
"self-align-safe-unsafe-grid-003-ref.html": [
|
"self-align-safe-unsafe-grid-003-ref.html": [
|
||||||
"0d0b17977d291bcc98874f34eb5364e819050dcc",
|
"0d0b17977d291bcc98874f34eb5364e819050dcc",
|
||||||
[]
|
[]
|
||||||
|
],
|
||||||
|
"self-align-start-end-flex-001-ref.html": [
|
||||||
|
"1b8c2558c316b20177e5b6c6615193b7e9e978cf",
|
||||||
|
[]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
70
tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001-ref.html
vendored
Normal file
70
tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001-ref.html
vendored
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!-- Reference case for align-items / align-self behavior, using floated divs
|
||||||
|
in place of flex items and using margin-top in place of the align-items /
|
||||||
|
align-self properties. -->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS Reftest Reference</title>
|
||||||
|
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
height: 200px;
|
||||||
|
width: 320px;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexbox > div {
|
||||||
|
width: 40px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big {
|
||||||
|
height: 100px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Classes for each of the various align-self values */
|
||||||
|
.flex-start {
|
||||||
|
background: lime;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
}
|
||||||
|
.start {
|
||||||
|
background: lightblue;
|
||||||
|
}
|
||||||
|
.end {
|
||||||
|
background: teal;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flex-start">start</div>
|
||||||
|
<div class="flex-start big">a b c d e f</div>
|
||||||
|
<div class="flex-end" style="margin-top: 190px">end</div>
|
||||||
|
<div class="flex-end big" style="margin-top: 100px">a b c d e f</div>
|
||||||
|
<div class="start">start</div>
|
||||||
|
<div class="start big">a b c d e f</div>
|
||||||
|
<div class="end" style="margin-top: 190px">end</div>
|
||||||
|
<div class="end big" style="margin-top: 100px">a b c d e f</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flex-start" style="margin-top: 190px">start</div>
|
||||||
|
<div class="flex-start big" style="margin-top: 100px">a b c d e f</div>
|
||||||
|
<div class="flex-end">end</div>
|
||||||
|
<div class="flex-end big" >a b c d e f</div>
|
||||||
|
<div class="start">start</div>
|
||||||
|
<div class="start big">a b c d e f</div>
|
||||||
|
<div class="end" style="margin-top: 190px">end</div>
|
||||||
|
<div class="end big" style="margin-top: 100px">a b c d e f</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
93
tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001.html
vendored
Normal file
93
tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001.html
vendored
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||||
|
values included on different items within a flex container. -->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS Test: Testing the behavior of 'align-self' 'start' and 'end' property values on flex items that are blocks, in a horizontal flex container</title>
|
||||||
|
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||||
|
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"/>
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"/>
|
||||||
|
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||||
|
<link rel="match" href="self-align-start-end-flex-001-ref.html"/>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
height: 200px;
|
||||||
|
width: 320px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
|
||||||
|
/* Any children whose align-self is 'auto' (or unspecified, or
|
||||||
|
initial) will end up taking this value from us: */
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
/* Any children whose align-self is 'inherit' will end up
|
||||||
|
inheriting this value from us: */
|
||||||
|
align-self: flex-end;
|
||||||
|
|
||||||
|
/* Ensure that this test works, no matter if the flexbox
|
||||||
|
container is considered multi-line or not. */
|
||||||
|
align-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap-reverse {
|
||||||
|
flex-wrap: wrap-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexbox > div {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big {
|
||||||
|
height: 100px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Classes for each of the various align-self values */
|
||||||
|
.flex-start {
|
||||||
|
background: lime;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.start {
|
||||||
|
background: lightblue;
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
.end {
|
||||||
|
background: teal;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flex-start">start</div>
|
||||||
|
<div class="flex-start big">a b c d e f</div>
|
||||||
|
<div class="flex-end">end</div>
|
||||||
|
<div class="flex-end big">a b c d e f</div>
|
||||||
|
<div class="start">start</div>
|
||||||
|
<div class="start big">a b c d e f</div>
|
||||||
|
<div class="end">end</div>
|
||||||
|
<div class="end big">a b c d e f</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox wrap-reverse">
|
||||||
|
<div class="flex-start">start</div>
|
||||||
|
<div class="flex-start big">a b c d e f</div>
|
||||||
|
<div class="flex-end">end</div>
|
||||||
|
<div class="flex-end big">a b c d e f</div>
|
||||||
|
<div class="start">start</div>
|
||||||
|
<div class="start big">a b c d e f</div>
|
||||||
|
<div class="end">end</div>
|
||||||
|
<div class="end big">a b c d e f</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue