Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 20:50:07 +01:00
Code Issues Projects Releases Packages Wiki Activity

Correctly place images with background-position: center

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

2
components/layout/display_list_builder.rs
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_size = compute_background_image_size(bg_size, bounds.size, intrinsic_size);
let mut tile_spacing = Size2D::zero(); 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_x = bg_position_x.to_used_value(own_position.width);
let pos_y = bg_position_y.to_used_value(own_position.height); let pos_y = bg_position_y.to_used_value(own_position.height);
tile_image_axis( tile_image_axis(

25
tests/wpt/metadata/MANIFEST.json
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": [
[ [
"/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": [ "css/css-backgrounds/background-origin/list.txt": [
[ [
{} {}
@ -463909,6 +463926,14 @@
"b0231f487c5d467ac707eb91dcdd561462a54ca1", "b0231f487c5d467ac707eb91dcdd561462a54ca1",
"reftest" "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": [ "css/css-backgrounds/background-image-first-letter.html": [
"7e296a53a2abebcd5fcee2431b182efe6f148c64", "7e296a53a2abebcd5fcee2431b182efe6f148c64",
"reftest" "reftest"

16
tests/wpt/web-platform-tests/css/css-backgrounds/background-image-centered-ref.html Normal file
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>

18
tests/wpt/web-platform-tests/css/css-backgrounds/background-image-centered.html Normal file
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>