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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Backgrounds and Borders Test: background-size '52px auto' with background-repeat 'round repeat'</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-15 -->
<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-repeat" rel="help" title="3.4. Tiling Images: the 'background-repeat' property" />
<link href="reference/background-size-029-ref.xht" rel="match" />
<meta content="image" name="flags" />
<meta content="Check if 'background-size' is '52px auto' and 'background-repeat' is 'round repeat', then the width is first rescaled to from 100px to 52px and then rescaled to 60px due to 'round' and the height of the corresponding background image is rescaled from 100px to 60px (to keep the original image aspect ratio) and then repeated vertically." name="assert" />
<style>
div {
background-color: red;
background-image: url(support/100x100-blue-and-orange.png);
background-repeat: round repeat;
background-size: 52px auto;
height: 180px;
width: 180px;
/*
Background positioning area is 180px wide by 180px tall.
The width of the background image is 52px.
But, because background-repeat is set to round repeat, the
width is rescaled as following:
Newest width = 180px / (round [180px / 52px]);
Newest width = 180px / (round [3.46]);
Newest width = 180px / (3);
Newest width = 60px;
Then the height is rescaled to from 100px to 60px to keep
the original aspect ratio.
*/
}
</style>
</head>
<body>
<p>Test passes if there is 3 rows of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p>
<div></div>
</body></html>