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

Position the background image on the padding box.

Browse source 
According to CSS2.1 spec, background image should be positioned on padding box.
Spec: http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

Fixes #6034.
This commit is contained in:
Jinwoo Song 2015-05-13 19:15:57 +09:00
parent b3b9deafa7
commit 7283f75679
3 changed files with 49 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/layout/display_list_builder.rs
View file

@ -435,8 +435,11 @@ impl FragmentDisplayListBuilding for Fragment {
let vertical_position = model::specified(background.background_position.vertical,
bounds.size.height - image_size.height);
let abs_x = virtual_origin_x + horizontal_position;
let abs_y = virtual_origin_y + vertical_position;
// Background image should be positioned on the padding box basis.
let border = style.logical_border_width().to_physical(style.writing_mode);
let abs_x = border.left + virtual_origin_x + horizontal_position;
let abs_y = border.top + virtual_origin_y + vertical_position;
// Adjust origin and size based on background-repeat
match background.background_repeat {

22
tests/ref/background_image_a.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url("test.jpeg");
width: 420px;
height: 298px;
border-width: 10px 20px 30px 40px;
border-style: solid;
border-color: red;
padding: 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

22
tests/ref/background_image_ref.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 560px;
height: 418px;
background-color: red;
}
</style>
</head>
<body>
<div>
<!-- Image dimension is 500x378. -->
<img src="test.jpeg" style="position:relative; left:40px; top:10px;">
</div>
</body>
</html>