wpt/css/css-backgrounds/background-size-026.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Backgrounds and Borders Test: background-size 'auto' with background-repeat 'repeat'</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-14 -->
    <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="match" href="reference/background-size-026-ref.xht">
    <meta name="flags" content="image">
    <meta name="assert" content="Check if 'background-size' is 'auto' and 'background-repeat' is 'repeat', that the background image is shown at its intrinsic size (98px wide by 99px tall in this test) and repeats in both horizontal and vertical to cover the background painting area (the same as background positioning area in this test).">
    <style>
        div {
            background-color: red;
            background-image: url(support/cat.png);  /* 98px wide by 99px tall */
            background-repeat: repeat;  /* default */
            background-size: auto;  /* default */
            height: 198px;
            width: 196px;

            /*
            Background positioning area is 196px wide by 198px tall.
            So, the image should be repeated twice in horizontal and vertical.
            */
        }
    </style>
  </head>
  <body>
    <p>Test passes if there is 2 rows of 2 cats and if there is <strong>no partially</strong> displayed cat and <strong>no red</strong>.</p>
    <div></div>
  </body>
</html>