mirror of
https://github.com/servo/servo.git
synced 2025-08-07 22:45:34 +01:00
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:
commit
9f2079f6ba
7 changed files with 116 additions and 5 deletions
34
tests/ref/background_clip_a.html
Normal file
34
tests/ref/background_clip_a.html
Normal 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>
|
||||
|
40
tests/ref/background_clip_ref.html
Normal file
40
tests/ref/background_clip_ref.html
Normal 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>
|
||||
|
|
@ -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
|
||||
|
|
|
@ -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),
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue