mirror of
https://github.com/servo/servo.git
synced 2025-06-19 14:48:59 +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."
31 lines
648 B
HTML
31 lines
648 B
HTML
<!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>
|
|
|