Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 03:15:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 786502 - Add reftests for background layers. r=roc

Browse Source 
Add tests that verify background layers composite correctly.
This commit is contained in:
Chris Lord 2012-09-13 11:35:14 +01:00
parent d4f38f7c0a
commit f455e70a11
5 changed files with 138 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
layout/reftests/backgrounds/background-layers-1-ref.html Normal file
View File

@ -0,0 +1,46 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
div.circle {
background: url(green-circle-alpha-32x32.png) center fixed;
width: 32px;
height: 32px;
}
div.redalpha {
background: url(red-128-alpha-32x32.png) center;
width: 32px;
height: 32px;
}
div.yellow {
background: url(yellow-32x32.png);
width: 32px;
height: 32px;
}
*#test1 {
width: 96px;
background-color: yellow;
}
*#test2 {
width: 96px;
background-color: red;
}
div.inline > div {
display: inline-block;
}
</style>
</head>
<body>
<div id="test1" class="inline"><div class="circle"><div class="redalpha"></div></div><div class="circle"><div class="redalpha"></div></div><div class="circle"><div class="redalpha"></div></div></div>
<div id="test2" class="inline"><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div></div>
<div class="inline"><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div></div>
</body>
</html>

43
layout/reftests/backgrounds/background-layers-1a.html Normal file
View File

@ -0,0 +1,43 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*#test1 > * {
background: url(red-128-alpha-32x32.png) center,
url(green-circle-alpha-32x32.png) center fixed;
background-color: yellow;
width: 32px;
height: 32px;
}
*#test2 > * {
background: url(red-128-alpha-32x32.png) center,
url(green-circle-alpha-32x32.png) center fixed,
url(yellow-32x32.png);
background-color: red;
width: 32px;
height: 32px;
}
*#test3 > * {
background: url(red-128-alpha-32x32.png) center,
url(green-circle-alpha-32x32.png) center fixed,
url(yellow-32x32.png);
width: 32px;
height: 32px;
}
div.inline > div {
display: inline-block;
}
</style>
</head>
<body>
<div id="test1" class="inline"><div></div><div></div><div></div></div>
<div id="test2" class="inline"><div></div><div></div><div></div></div>
<div id="test3" class="inline"><div></div><div></div><div></div></div>
</body>
</html>

46
layout/reftests/backgrounds/background-layers-1b.html Normal file
View File

@ -0,0 +1,46 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*#test1 > * {
background: url(red-128-alpha-32x32.png) center,
url(green-circle-alpha-32x32.png) center fixed;
background-color: yellow;
width: 32px;
height: 32px;
}
*#test2 > * {
background: url(red-128-alpha-32x32.png) center,
url(green-circle-alpha-32x32.png) center fixed,
url(yellow-32x32.png);
background-color: red;
width: 32px;
height: 32px;
}
*#test3 > * {
background: url(red-128-alpha-32x32.png) center,
url(green-circle-alpha-32x32.png) center fixed,
url(yellow-32x32.png);
width: 32px;
height: 32px;
}
table, table * {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr id="test1"><td></td><td></td><td></td></tr>
<tr id="test2"><td></td><td></td><td></td></tr>
<tr id="test3"><td></td><td></td><td></td></tr>
</table>
</body>
</html>

BIN
layout/reftests/backgrounds/green-circle-alpha-32x32.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 B

3
layout/reftests/backgrounds/reftest.list
View File

@ -87,6 +87,9 @@ random-if(bug685516) == background-size-contain-position-fifty-fifty.html backgr
random-if(bug685516) == background-size-contain-clip-padding-origin-border.html background-size-contain-clip-padding-origin-border-ref.html
random-if(bug685516) == background-size-contain-clip-padding-origin-border-padding.html background-size-contain-clip-padding-origin-border-padding-ref.html
== background-layers-1a.html background-layers-1-ref.html
== background-layers-1b.html background-layers-1-ref.html
# -moz-background-inline-policy is touchy and hard to test due to stretching
# artifacts and the difficulty of covering exact lines, and its CSS3 analog is
# on the chopping block at the moment, so just make sure background-size results