mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Never resolve margin-left:auto to a negative amount (#30065)
With direction:ltr (and we don't support direction:rtl yet), the rules from https://drafts.csswg.org/css2/#blockwidth imply that margin-left shouldn't resolve auto to a negative amount. This aligns Servo with Gecko and Blink. WebKit may resolve to a negative amount in some cases.
This commit is contained in:
parent
1296ddf273
commit
d90e3078a6
4 changed files with 158 additions and 6 deletions
|
@ -1142,12 +1142,15 @@ fn solve_inline_margins_for_in_flow_block_level(
|
|||
pbm: &PaddingBorderMargin,
|
||||
inline_size: Length,
|
||||
) -> (Length, Length) {
|
||||
let available = containing_block.inline_size - pbm.padding_border_sums.inline - inline_size;
|
||||
match (pbm.margin.inline_start, pbm.margin.inline_end) {
|
||||
(LengthOrAuto::Auto, LengthOrAuto::Auto) => (available / 2., available / 2.),
|
||||
(LengthOrAuto::Auto, LengthOrAuto::LengthPercentage(end)) => (available - end, end),
|
||||
(LengthOrAuto::LengthPercentage(start), _) => (start, available - start),
|
||||
}
|
||||
let free_space = containing_block.inline_size - pbm.padding_border_sums.inline - inline_size;
|
||||
let margin_inline_start = match (pbm.margin.inline_start, pbm.margin.inline_end) {
|
||||
(LengthOrAuto::Auto, LengthOrAuto::Auto) => Length::zero().max(free_space / 2.),
|
||||
(LengthOrAuto::Auto, LengthOrAuto::LengthPercentage(end)) => {
|
||||
Length::zero().max(free_space - end)
|
||||
},
|
||||
(LengthOrAuto::LengthPercentage(start), _) => start,
|
||||
};
|
||||
(margin_inline_start, free_space - margin_inline_start)
|
||||
}
|
||||
|
||||
/// State that we maintain when placing blocks.
|
||||
|
|
|
@ -73328,6 +73328,19 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"margin-auto-on-block-box.html": [
|
||||
"1afc98a91322feab5fe249b34c26274468fb0b22",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/CSS2/margin-padding-clear/margin-auto-on-block-box-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"margin-backgrounds-002.xht": [
|
||||
"75c0211ca4b9c541eddb4b2698efd185574f0df4",
|
||||
[
|
||||
|
@ -365406,6 +365419,10 @@
|
|||
"287a58e369391edd2c3c3c6bcb6c5da4292ecb80",
|
||||
[]
|
||||
],
|
||||
"margin-auto-on-block-box-ref.html": [
|
||||
"efc41cff10c179da1a3cfe0da1cfea72530fa7d9",
|
||||
[]
|
||||
],
|
||||
"margin-border-padding-001-ref.xht": [
|
||||
"0578570aaef4f6b46557feb12b7368e0008dbb5b",
|
||||
[]
|
||||
|
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<pre style="font: 5px/1 Ahem">
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
</pre>
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Resolution of margin-left or margin-right set to auto on a non-replaced block box</title>
|
||||
<link rel="match" href="margin-auto-on-block-box-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#blockwidth">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<meta name="assert" content="
|
||||
margin-left:auto shouldn't resolve to a negative amount (assuming direction:ltr).
|
||||
margin-right:auto may resolve to a negative amount when there is over-constraintment.">
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 100px;
|
||||
margin-left: 250px;
|
||||
}
|
||||
.test {
|
||||
width: 50px;
|
||||
height: 5px;
|
||||
background: black;
|
||||
margin: auto;
|
||||
}
|
||||
.test.big {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="test"></div>
|
||||
<div class="test big"></div>
|
||||
|
||||
<div class="test" style="margin-left: -125px"></div>
|
||||
<div class="test" style="margin-left: -100px"></div>
|
||||
<div class="test" style="margin-left: -75px"></div>
|
||||
<div class="test" style="margin-left: -50px"></div>
|
||||
<div class="test" style="margin-left: -25px"></div>
|
||||
<div class="test" style="margin-left: 0"></div>
|
||||
<div class="test" style="margin-left: 25px"></div>
|
||||
<div class="test" style="margin-left: 50px"></div>
|
||||
<div class="test" style="margin-left: 75px"></div>
|
||||
<div class="test" style="margin-left: 100px"></div>
|
||||
<div class="test" style="margin-left: 125px"></div>
|
||||
|
||||
<div class="test big" style="margin-left: -250px"></div>
|
||||
<div class="test big" style="margin-left: -200px"></div>
|
||||
<div class="test big" style="margin-left: -150px"></div>
|
||||
<div class="test big" style="margin-left: -100px"></div>
|
||||
<div class="test big" style="margin-left: -50px"></div>
|
||||
<div class="test big" style="margin-left: 0"></div>
|
||||
<div class="test big" style="margin-left: 50px"></div>
|
||||
<div class="test big" style="margin-left: 100px"></div>
|
||||
<div class="test big" style="margin-left: 150px"></div>
|
||||
<div class="test big" style="margin-left: 200px"></div>
|
||||
<div class="test big" style="margin-left: 250px"></div>
|
||||
|
||||
<div class="test" style="margin-right: -125px"></div>
|
||||
<div class="test" style="margin-right: -100px"></div>
|
||||
<div class="test" style="margin-right: -75px"></div>
|
||||
<div class="test" style="margin-right: -50px"></div>
|
||||
<div class="test" style="margin-right: -25px"></div>
|
||||
<div class="test" style="margin-right: 0"></div>
|
||||
<div class="test" style="margin-right: 25px"></div>
|
||||
<div class="test" style="margin-right: 50px"></div>
|
||||
<div class="test" style="margin-right: 75px"></div>
|
||||
<div class="test" style="margin-right: 100px"></div>
|
||||
<div class="test" style="margin-right: 125px"></div>
|
||||
|
||||
<div class="test big" style="margin-right: -250px"></div>
|
||||
<div class="test big" style="margin-right: -200px"></div>
|
||||
<div class="test big" style="margin-right: -150px"></div>
|
||||
<div class="test big" style="margin-right: -100px"></div>
|
||||
<div class="test big" style="margin-right: -50px"></div>
|
||||
<div class="test big" style="margin-right: 0"></div>
|
||||
<div class="test big" style="margin-right: 50px"></div>
|
||||
<div class="test big" style="margin-right: 100px"></div>
|
||||
<div class="test big" style="margin-right: 150px"></div>
|
||||
<div class="test big" style="margin-right: 200px"></div>
|
||||
<div class="test big" style="margin-right: 250px"></div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue