<!DOCTYPE html><html><head><metacharset="utf-8"><title>CSS Backgrounds and Borders Test: background-size 'auto 61px' with background-repeat 'round'</title><linkrel="author"title="Intel"href="http://www.intel.com"><linkrel="reviewer"title="Gérard Talbot"href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"><!-- 2012-11-15 --><linkrel="help"href="http://www.w3.org/TR/css3-background/#the-background-size"title="3.9. Sizing Images: the 'background-size' property"><linkrel="help"href="http://www.w3.org/TR/css3-background/#the-background-repeat"title="3.4. Tiling Images: the 'background-repeat' property"><linkrel="match"href="reference/background-size-025-ref.xht"><metaname="flags"content="image"><metaname="assert"content="Check if 'background-size' is 'auto 61px' and 'background-repeat' is 'round', then the height of the corresponding background image is rounded (70px in this test) so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled (70px in this test) to keep the original aspect ratio."><metaname="fuzzy"content="maxDifference=0-70; totalPixels=0-7294"><style>div{background-color:red;background-image:url("support/100x100-blue-and-orange.png");background-repeat:round;/* round round */background-size:auto61px;height:210px;width:210px;/* Background positioning area is 210px wide by 210px tall. The set background size height is 61px. But because background repeat is round, then the background image is rescaled as follows: Newest height = 210px / (round [210px / 61px]); Newest height = 210px / (round [3.44]); Newest height = 210px / (3); Newest height = 70px; The width is rescaled to 70px to keep the original aspect ratio. */}</style></head><body><p>Test passes if there is 3 rows of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p><div></div></body></html>
