testing/web-platform/tests/css/css-backgrounds/background-size-029.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CSS Backgrounds and Borders Test: background-size '52px auto' with background-repeat 'round repeat'</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-029-ref.xht">
  11
  12     <meta name="flags" content="image">
  13     <meta name="assert" content="Check if 'background-size' is '52px auto' and 'background-repeat' is 'round repeat', then the width is first rescaled to from 100px to 52px and then rescaled to 60px due to 'round' and the height of the corresponding background image is rescaled from 100px to 60px (to keep the original image aspect ratio) and then repeated vertically.">
  14     <meta name="fuzzy" content="maxDifference=0-91; totalPixels=0-5292">
  15     <style>
  16         div {
  17             background-color: red;
  18             background-image: url(support/100x100-blue-and-orange.png);
  19             background-repeat: round repeat;
  20             background-size: 52px auto;
  21             height: 180px;
  22             width: 180px;
  23
  24             /*
  25             Background positioning area is 180px wide by 180px tall.
  26             The width of the background image is 52px.
  27             But, because background-repeat is set to round repeat, the
  28             width is rescaled as following:
  29             Newest width = 180px / (round [180px / 52px]);
  30             Newest width = 180px / (round [3.46]);
  31             Newest width = 180px / (3);
  32             Newest width = 60px;
  33
  34             Then the height is rescaled to from 100px to 60px to keep
  35             the original aspect ratio.
  36             */
  37         }
  38     </style>
  39   </head>
  40   <body>
  41     <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>
  42
  43     <div></div>
  44   </body>
  45 </html>