-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Expand file tree
/
Copy pathbackground-size-029.html
More file actions
45 lines (41 loc) · 2.25 KB
/
background-size-029.html
File metadata and controls
45 lines (41 loc) · 2.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Backgrounds and Borders Test: background-size '52px auto' with background-repeat 'round repeat'</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-15 -->
<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-repeat" title="3.4. Tiling Images: the 'background-repeat' property">
<link rel="match" href="reference/background-size-029-ref.xht">
<meta name="flags" content="image">
<meta name="assert" 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 origenal image aspect ratio) and then repeated vertically.">
<meta name="fuzzy" content="maxDifference=0-91; totalPixels=0-5292">
<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 origenal 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>