mirror of
https://github.com/servo/servo
synced 2026-04-28 18:37:39 +02:00
44 lines
2.3 KiB
HTML
44 lines
2.3 KiB
HTML
<!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>
|
|
<meta charset="utf-8" />
|
|
<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> |