mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Implement background-position keyword values
Also fixes calculation of background-position percentages: Rather than multiplying the container size by a percent and aligning the top left of the image at the resulting width, we also need to subtract a corresponding percent of the image size, per http://dev.w3.org/csswg/css2/colors.html#propdef-background-position "A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box."
This commit is contained in:
parent
66a7de750c
commit
6c9524b687
9 changed files with 258 additions and 50 deletions
BIN
tests/ref/100x100_green.png
Normal file
BIN
tests/ref/100x100_green.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 215 B |
20
tests/ref/background_position_keyword.html
Normal file
20
tests/ref/background_position_keyword.html
Normal file
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>You see here a scroll labeled FOOBIE BLETCH.</title>
|
||||
<style>
|
||||
#foo {
|
||||
background: url(400x400_green.png);
|
||||
background-position: right top;
|
||||
background-repeat: no-repeat;
|
||||
width: 528px;
|
||||
height: 400px;
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id=foo></div>
|
||||
</body>
|
||||
</html>
|
||||
|
20
tests/ref/background_position_percent.html
Normal file
20
tests/ref/background_position_percent.html
Normal file
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>You see here a scroll labeled FOOBIE BLETCH.</title>
|
||||
<style>
|
||||
#foo {
|
||||
background: url(400x400_green.png);
|
||||
background-position: 100% 0%;
|
||||
background-repeat: no-repeat;
|
||||
width: 528px;
|
||||
height: 400px;
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id=foo></div>
|
||||
</body>
|
||||
</html>
|
||||
|
29
tests/ref/background_position_shorthand.html
Normal file
29
tests/ref/background_position_shorthand.html
Normal file
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>background shorthand test</title>
|
||||
<style>
|
||||
div {
|
||||
float: left; /* So all the divs are visible in the test viewport */
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
/* test different orders for background position */
|
||||
#a { background: red url(100x100_green.png) no-repeat right center; }
|
||||
#b { background: red url(100x100_green.png) no-repeat center right; }
|
||||
#c { background: right center red url(100x100_green.png) no-repeat; }
|
||||
#d { background: red url(100x100_green.png) right center no-repeat; }
|
||||
#e { background: red url(100x100_green.png) no-repeat right; }
|
||||
#f { background: right red url(100x100_green.png) no-repeat; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a"></div>
|
||||
<div id="b"></div>
|
||||
<div id="c"></div>
|
||||
<div id="d"></div>
|
||||
<div id="e"></div>
|
||||
<div id="f"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
31
tests/ref/background_position_shorthand_ref.html
Normal file
31
tests/ref/background_position_shorthand_ref.html
Normal file
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>background shorthand test</title>
|
||||
<style>
|
||||
.outer {
|
||||
float: left;
|
||||
background-color: red;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.inner {
|
||||
background-image: url(100x100_green.png);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -67,6 +67,9 @@
|
|||
== min_max_height_a.html min_max_height_b.html
|
||||
== minimum_line_height_a.html minimum_line_height_b.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
|
||||
== background_position_shorthand.html background_position_shorthand_ref.html
|
||||
== background_repeat_x_a.html background_repeat_x_b.html
|
||||
== background_repeat_y_a.html background_repeat_y_b.html
|
||||
== background_repeat_none_a.html background_repeat_none_b.html
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue