css/css-backgrounds/background-size-025.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Backgrounds and Borders Test: background-size 'auto 61px' with background-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-025-ref.xht">

    <meta name="flags" content="image">
    <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.">
    <meta name="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: auto 61px;
            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>