1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Backgrounds and Borders Test: background-size '50% auto' with background-origin 'border-box'</title>
4 <link href="http://www.intel.com" rel="author" title="Intel">
5 <link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
6 <link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
7 <meta content="image" name="flags">
8 <meta content="Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 160px by 160px in this test) horizontally. Therefore the used width of the background-size in this test should be 80px." name="assert">
9 <style>
10 #ref-overlapped-red {
11 background-color: red;
12 height: 160px;
13 width: 160px;
14 }
15 #test-overlapping-img {
16 background-image: url(support/100x100-blue-and-orange.png);
17 background-origin: border-box;
18 background-size: 50% auto;
19 border: transparent dotted 5px;
20 bottom: 160px;
21 height: 100px;
22 padding: 25px;
23 position: relative;
24 width: 100px;
25
26 /*
27 Background positioning area is 160px wide by 160px tall.
28 So, the image should be scaled to 80px by 80px (near),
29 and repeated once in both horizontally and vertically.
30 */
31 }
32 </style>
33 </head>
34 <body>
35 <p>Test passes if there are 2 rows of 2 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p>
36 <div id="ref-overlapped-red"></div>
37 <div id="test-overlapping-img"></div>
38
39
40 </body></html>