background-size-023

background-size '50% auto' with background-clip 'padding-box'

WeasyPrint

This browser

Flags
image
Assertion
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 150px by 150px in this test) horizontally. Therefore the used width of the background-size in this test should be 75px.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3     <title>CSS Backgrounds and Borders Test: background-size '50% auto' with background-clip 'padding-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-clip" 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 150px by 150px in this test) horizontally. Therefore the used width of the background-size in this test should be 75px." name="assert">
 9     <style>
10         #ref-overlapped-red {
11             background-color: red;
12             left: 5px;
13             height: 150px;
14             position: relative;
15             top: 5px;
16             width: 150px;
17         }
18         #test-overlapping-img {
19             background-clip: padding-box;
20             background-image: url(support/100x100-blue-and-orange.png);
21             background-size: 50% auto;
22             border: transparent dotted 5px;
23             bottom: 150px;
24             height: 100px;
25             padding: 25px;
26             position: relative;
27             width: 100px;
28 
29             /*
30             Background painting area is 150px wide by 150px tall.
31             So, the image should be scaled to 75px by 75px (near),
32             and repeated once in both horizontally and vertically.
33             */
34         }
35     </style>
36   </head>
37   <body>
38     <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>
39     <div id="ref-overlapped-red"></div>
40     <div id="test-overlapping-img"></div>
41   
42 
43 </body></html>