mirror of
https://github.com/servo/servo.git
synced 2025-07-31 03:00:29 +01:00
6c9524b687
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."
29 lines
803 B
HTML
29 lines
803 B
HTML
<!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>
|
|
|