<!DOCTYPE html><html><head><metacharset="utf-8"><title>CSS Backgrounds and Borders Test: background-size '20% 30%' with background-repeat 'no-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-17 --><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-031-ref.xht"><metaname="flags"content="image"><metaname="assert"content="Check if 'background-size' is '20% 30%' and 'background-repeat' is 'no-repeat round', then the height of the corresponding background image is 50px 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 to 20% (50px in this test) of the background area."><metaname="fuzzy"content="maxDifference=1; totalPixels=0-948"><style>#ref-overlapped-red{background-color:red;height:150px;width:50px;}#test-overlapping-square{background-image:url(support/100x100-blue-and-orange.png);background-repeat:no-repeatround;background-size:20%30%;bottom:150px;height:150px;position:relative;width:250px;}/* Background positioning area is 250px wide by 150px tall. The width of the background image is 20% of 250px == 50px. The height is rescaled to 30% of 150px == 45px. Then, because background-repeat is set to no-repeat round, the height is rescaled as following: Newest height = 150px / (round [150px / 45px]); Newest height = 150px / (round [3.33]); Newest height = 150px / (3); Newest height = 50px; */</style></head><body><p>Test passes if there is 1 column of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed square and <strong>no red</strong>.</p><divid="ref-overlapped-red"></div><divid="test-overlapping-square"></div></body></html>
