Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

This commit is contained in:
James Graham
2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-size '50% auto' with background-clip 'padding-box'</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<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">
<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>