Auto merge of #6067 - Jinwoo-Song:backgroundclip, r=pcwalton

This property determines the background painting area, which determines the area
within which the background is painted.

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

Fixes #6066.

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/6067)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-05-15 22:05:05 -05:00
commit 9f2079f6ba
7 changed files with 116 additions and 5 deletions

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: green;
width: 200px;
height: 200px;
padding: 20px;
border-width: 10px 20px 30px 40px;
border-style: dotted;
border-color: red;
}
#foo1 {
background-clip: border-box;
}
#foo2 {
background-clip: padding-box;
}
#foo3 {
background-clip: content-box;
}
</style>
</head>
<body>
<p>background-clip: border-box;</p>
<div id=foo1></div>
<p>background-clip: padding-box;</p>
<div id=foo2></div>
<p>background-clip: content-box;</p>
<div id=foo3></div>
</body>
</html>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<style>
#foo1 {
background: green;
}
#foo1, #foo2, #foo3 {
width: 200px;
height: 200px;
padding: 20px;
border-width: 10px 20px 30px 40px;
border-style: dotted;
border-color: red;
}
#foo2-color {
background: green;
width: 240px;
height: 240px;
position: relative;
left: -20px;
top: -20px;
}
#foo3-color {
background: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<p>background-clip: border-box;</p>
<div id=foo1></div>
<p>background-clip: padding-box;</p>
<div id=foo2><div id=foo2-color></div></div>
<p>background-clip: content-box;</p>
<div id=foo3><div id=foo3-color></div></div>
</body>
</html>

View file

@ -22,6 +22,7 @@ fragment=top != ../html/acid2.html acid2_ref.html
flaky_cpu == append_style_a.html append_style_b.html
== attr_exists_selector.html attr_exists_selector_ref.html
== attr_selector_case_sensitivity.html attr_selector_case_sensitivity_ref.html
== background_clip_a.html background_clip_ref.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

View file

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