Auto merge of #6046 - Jinwoo-Song:background_origin, r=pcwalton

This property determines the background positioning area, that is the position of
the origin of an image specified using the 'background-image' CSS property.

'background-origin' is ignored when background-attachment is fixed.

Spec: http://dev.w3.org/csswg/css-backgrounds-3/#background-origin

Fixes #6045.

r? @pcwalton 
cc @yichoi

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/6046)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-05-14 20:53:02 -05:00
commit 8c40272824
7 changed files with 119 additions and 8 deletions

View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<style>
#foo1 {
background: url(400x400_green.png);
background-origin: padding-box;
background-repeat: no-repeat;
width: 400px;
height: 400px;
padding: 20px;
border: 20px dotted red;
}
#foo2 {
background: url(400x400_green.png);
background-origin: border-box;
background-repeat: no-repeat;
width: 400px;
height: 400px;
padding: 20px;
border: 20px dotted red;
}
#foo3 {
background: url(400x400_green.png);
background-origin: content-box;
background-repeat: no-repeat;
width: 400px;
height: 400px;
padding: 20px;
border: 20px dotted red;
}
</style>
</head>
<body>
<div id=foo1></div>
<div id=foo2></div>
<div id=foo3></div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<style>
#foo1 {
background: url(400x400_green.png);
background-repeat: no-repeat;
width: 400px;
height: 400px;
padding: 20px;
border: 20px dotted red;
}
#foo2 {
background: url(400x400_green.png);
background-position: -20px -20px;
background-repeat: no-repeat;
width: 400px;
height: 400px;
padding: 20px;
border: 20px dotted red;
}
#foo3 {
background: url(400x400_green.png);
background-position: 20px 20px;
background-repeat: no-repeat;
width: 400px;
height: 400px;
padding: 20px;
border: 20px dotted red;
}
</style>
</head>
<body>
<div id=foo1></div>
<div id=foo2></div>
<div id=foo3></div>
</body>
</html>

View file

@ -25,6 +25,7 @@ flaky_cpu == append_style_a.html append_style_b.html
== background_external_stylesheet.html background_ref.html
== background_image_position_a.html background_image_position_ref.html
== background_none_a.html background_none_b.html
== background_origin_a.html background_origin_ref.html
== background_position_a.html background_position_b.html
== background_position_keyword.html background_position_b.html
== background_position_percent.html background_position_b.html

View file

@ -116,6 +116,7 @@ fn test_parse_stylesheet() {
],
declarations: PropertyDeclarationBlock {
normal: Arc::new(vec![
PropertyDeclaration::BackgroundOrigin(DeclaredValue::Initial),
PropertyDeclaration::BackgroundSize(DeclaredValue::Initial),
PropertyDeclaration::BackgroundImage(DeclaredValue::Initial),
PropertyDeclaration::BackgroundAttachment(DeclaredValue::Initial),