Correctly place images with background-position: center

Add a regression ref test.
See also #19680.
This commit is contained in:
Pyfisch 2018-01-05 10:45:26 +01:00
parent 3692f13dcb
commit 859f002bf2
4 changed files with 60 additions and 1 deletions

View file

@ -1581,7 +1581,7 @@ impl FragmentDisplayListBuilding for Fragment {
let mut tile_size = compute_background_image_size(bg_size, bounds.size, intrinsic_size);
let mut tile_spacing = Size2D::zero();
let own_position = bounds.size - intrinsic_size.unwrap_or(Size2D::zero());
let own_position = bounds.size - tile_size;
let pos_x = bg_position_x.to_used_value(own_position.width);
let pos_y = bg_position_y.to_used_value(own_position.height);
tile_image_axis(

View file

@ -96597,6 +96597,18 @@
{}
]
],
"css/css-backgrounds/background-image-centered.html": [
[
"/css/css-backgrounds/background-image-centered.html",
[
[
"/css/css-backgrounds/background-image-centered-ref.html",
"=="
]
],
{}
]
],
"css/css-backgrounds/background-image-first-letter.html": [
[
"/css/css-backgrounds/background-image-first-letter.html",
@ -228200,6 +228212,11 @@
{}
]
],
"css/css-backgrounds/background-image-centered-ref.html": [
[
{}
]
],
"css/css-backgrounds/background-origin/list.txt": [
[
{}
@ -463909,6 +463926,14 @@
"b0231f487c5d467ac707eb91dcdd561462a54ca1",
"reftest"
],
"css/css-backgrounds/background-image-centered-ref.html": [
"655c4a1f457630f0788d4d4eae465d757b26c6df",
"support"
],
"css/css-backgrounds/background-image-centered.html": [
"dfb5aed73f04867336a353a53698ba851b2a1da8",
"reftest"
],
"css/css-backgrounds/background-image-first-letter.html": [
"7e296a53a2abebcd5fcee2431b182efe6f148c64",
"reftest"

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Centered Background Gradient</title>
<style>
#a {
width: 200px;
height: 150px;
border-style: solid;
border-width: 10px;
background-position: 0px 0px;
background-image: repeating-radial-gradient(blue, green 20px);
}
</style>
<body>
<div id="a"></div>
</body>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Centered Background Gradient</title>
<link rel="match" href="background-image-centered-ref.html">
<link rel="help" href="http://www.w3.org/TR/css3-background/">
<style>
#a {
width: 200px;
height: 150px;
border-style: solid;
border-width: 10px;
background-position: center center;
background-image: repeating-radial-gradient(blue, green 20px);
}
</style>
<body>
<div id="a"></div>
</body>