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
|
||||
.unwrap_or_default(),
|
||||
shared_alignment_baseline.unwrap_or_default(),
|
||||
flex_context.flex_wrap_reverse,
|
||||
);
|
||||
|
||||
let start_corner = FlexRelativeVec2 {
|
||||
|
|
@ -1886,24 +1887,34 @@ impl FlexItem<'_> {
|
|||
line_cross_size: Au,
|
||||
propagated_baseline: Au,
|
||||
max_propagated_baseline: Au,
|
||||
wrap_reverse: bool,
|
||||
) -> Au {
|
||||
let ending_alignment = line_cross_size - *used_cross_size - self.pbm_auto_is_zero.cross;
|
||||
let outer_cross_start =
|
||||
if self.margin.cross_start.is_auto() || self.margin.cross_end.is_auto() {
|
||||
Au::zero()
|
||||
} else {
|
||||
match self.align_self.0.value() {
|
||||
AlignFlags::STRETCH | AlignFlags::FLEX_START => Au::zero(),
|
||||
AlignFlags::FLEX_END => {
|
||||
let margin_box_cross = *used_cross_size + self.pbm_auto_is_zero.cross;
|
||||
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::FLEX_START | AlignFlags::STRETCH => Au::zero(),
|
||||
AlignFlags::FLEX_END => ending_alignment,
|
||||
AlignFlags::CENTER => ending_alignment / 2,
|
||||
AlignFlags::BASELINE | AlignFlags::LAST_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(),
|
||||
}
|
||||
};
|
||||
|
|
|
|||
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": [
|
||||
"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