mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Implement 'background-origin' property in CSS3 Background
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.
This commit is contained in:
parent
b05c3fc0c0
commit
b1b22c0c53
7 changed files with 119 additions and 8 deletions
40
tests/ref/background_origin_a.html
Normal file
40
tests/ref/background_origin_a.html
Normal 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>
|
||||
|
39
tests/ref/background_origin_ref.html
Normal file
39
tests/ref/background_origin_ref.html
Normal 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>
|
||||
|
|
@ -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
|
||||
|
|
|
@ -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),
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue