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

Never resolve margin-left:auto to a negative amount (#30065)

Browse source 
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:
Oriol Brufau 2023-08-03 11:21:22 +02:00 • committed by GitHub
parent 1296ddf273
commit d90e3078a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 158 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/layout_2020/flow/mod.rs
View file

@ -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.

17
tests/wpt/meta/MANIFEST.json
View file

@ -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",
[]

54
tests/wpt/tests/css/CSS2/margin-padding-clear/margin-auto-on-block-box-ref.html Normal file
View file

@ -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>

78
tests/wpt/tests/css/CSS2/margin-padding-clear/margin-auto-on-block-box.html Normal file
View file

@ -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>