5 <title>CSS Backgrounds and Borders Test: background-size 'auto
61px' with background-repeat 'round'
</title>
6 <link rel=
"author" title=
"Intel" href=
"http://www.intel.com">
7 <link rel=
"reviewer" title=
"GĂ©rard Talbot" href=
"http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-15 -->
8 <link rel=
"help" href=
"http://www.w3.org/TR/css3-background/#the-background-size" title=
"3.9. Sizing Images: the 'background-size' property">
9 <link rel=
"help" href=
"http://www.w3.org/TR/css3-background/#the-background-repeat" title=
"3.4. Tiling Images: the 'background-repeat' property">
10 <link rel=
"match" href=
"reference/background-size-025-ref.xht">
12 <meta name=
"flags" content=
"image">
13 <meta name=
"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.">
16 background-color: red;
17 background-image: url(
"support/100x100-blue-and-orange.png");
18 background-repeat: round; /* round round */
19 background-size: auto
61px;
24 Background positioning area is
210px wide by
210px tall.
25 The set background size height is
61px. But because
26 background repeat is round, then the background image
27 is rescaled as follows:
28 Newest height =
210px / (round [
210px /
61px]);
29 Newest height =
210px / (round [
3.44]);
30 Newest height =
210px / (
3);
33 The width is rescaled to
70px to keep the original aspect ratio.
39 <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>