<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Backgrounds and Borders Test: background-size '52px auto' with background-repeat 'repeat round'</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-15 -->
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" title="3.4. Tiling Images: the 'background-repeat' property">
<link rel="match" href="reference/background-size-027-ref.xht">
<meta name="flags" content="image">
<meta name="assert" content="Check if 'background-size' is '52px auto' and 'background-repeat' is 'repeat round', then the width of the corresponding background image is 52px and then repeated while the height is first rescaled from 100px to 52px to keep the original image aspect ratio and then to 60px due to 'round'.">
<meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-5000">
<style>
div {
background-color: red;
background-image: url(support/100x100-blue-and-orange.png);
background-repeat: repeat round;
background-size: 52px auto;
height: 180px;
width: 156px;
/*
Background positioning area is 156px wide by 180px tall.
The width of the background image is 52px.
So, the height is rescaled to 52px to keep the original aspect ratio.
Then, because background-repeat is set to repeat round, the
height is rescaled as following:
Newest height = 180px / (round [180px / 52px]);
Newest height = 180px / (round [3.46]);
Newest height = 180px / (3);
Newest height = 60px;
*/
}
</style>
</head>
<body>
<p>Test passes if there is 3 rows of 3 blue-and-orange rectangles and if there is <strong>no partially</strong> displayed rectangles and <strong>no red</strong>.</p>
<div></div>
</body>
</html>
Codebase Browser
chromium