<!DOCTYPE html>
<html>
<head>
<title>CSS Backgrounds and Borders Test: background-size '50% auto' with background-clip 'padding-box'</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<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-clip">
<meta name="flags" content="image">
<meta name="assert" 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.">
<style>
#ref-overlapped-red {
background-color: red;
left: 5px;
height: 150px;
position: relative;
top: 5px;
width: 150px;
}
#test-overlapping-img {
background-clip: padding-box;
background-image: url(support/100x100-blue-and-orange.png);
background-size: 50% auto;
border: transparent dotted 5px;
bottom: 150px;
height: 100px;
padding: 25px;
position: relative;
width: 100px;
/*
Background painting area is 150px wide by 150px tall.
So, the image should be scaled to 75px by 75px (near),
and repeated once in both horizontally and vertically.
*/
}
</style>
</head>
<body>
<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>
<div id="ref-overlapped-red"></div>
<div id="test-overlapping-img"></div>
</body>
</html>
Codebase Browser
chromium