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 522607 - Tests for new css3-background background-position syntax. r=dbaron

Browse Source
This commit is contained in:
William Chen 2012-02-20 12:16:11 +13:00
parent c075b7dd27
commit 4a16132bcb
24 changed files with 721 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
layout/reftests/backgrounds/background-position-1-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: right 25% bottom 75% reference</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
margin-left: 72px; /** 128px - 128px * 0.25 - 32px * 0.75 **/
margin-top: 24px; /** 128px - 128px * 0.75 - 32px * 0.25 **/
width: 32px;
height: 32px;
background-image: url(aqua-32x32.png);
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
<div id="outer"><div id="inner1"></div></div>
<div id="outer"><div id="inner1"></div></div>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

52
layout/reftests/backgrounds/background-position-1a.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: right 25% bottom 75%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: right 25% bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner2
{
width: 128px;
height: 128px;
background-position: bottom 75% right 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner3
{
width: 128px;
height: 128px;
background-position: right 24px bottom 72px;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner4
{
width: 128px;
height: 128px;
background-position: bottom 72px right 24px;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
<div id="outer"><div id="inner2"></div></div>
<div id="outer"><div id="inner3"></div></div>
<div id="outer"><div id="inner4"></div></div>
</body>
</html>

52
layout/reftests/backgrounds/background-position-1b.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left 75% top 25%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: left 75% top 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner2
{
width: 128px;
height: 128px;
background-position: top 25% left 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner3
{
width: 128px;
height: 128px;
background-position: left 72px top 24px;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner4
{
width: 128px;
height: 128px;
background-position: top 24px left 72px;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
<div id="outer"><div id="inner2"></div></div>
<div id="outer"><div id="inner3"></div></div>
<div id="outer"><div id="inner4"></div></div>
</body>
</html>

52
layout/reftests/backgrounds/background-position-1c.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left 75% bottom 75%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: left 75% bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner2
{
width: 128px;
height: 128px;
background-position: right 25% top 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner3
{
width: 128px;
height: 128px;
background-position: bottom 75% left 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner4
{
width: 128px;
height: 128px;
background-position: right 25% top 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
<div id="outer"><div id="inner2"></div></div>
<div id="outer"><div id="inner3"></div></div>
<div id="outer"><div id="inner4"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-2-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left 25% bottom 75% reference</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
margin-left: 24px; /** 128px * 0.25 - 32 * 0.25 **/
margin-top: 24px; /** 128px - 128px * 0.75 + 32px * 0.75 - 32px **/
width: 32px;
height: 32px;
background-image: url(aqua-32x32.png);
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-2a.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: center bottom 75%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: left 25% bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-2b.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: 25% 25%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: 25% 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-3-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: center bottom 75% reference</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
margin-left: 48px; /** 128px - 128px * 0.50 - 32px * 0.50 **/
margin-top: 24px; /** 128px - 128px * 0.75 + 32px * 0.75 - 32px **/
width: 32px;
height: 32px;
background-image: url(aqua-32x32.png);
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-3a.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: center bottom 75%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: center bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-3b.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: center 25%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: center 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-4-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left center reference</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
margin-left: 0px;
margin-top: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
width: 32px;
height: 32px;
background-image: url(aqua-32x32.png);
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-4a.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left center</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: left center;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-4b.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: left;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-4c.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left bottom 50%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: left bottom 50%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-5-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background: url(aqua-32x32.png) left no-repeat reference</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
margin-left: 0px;
margin-top: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
width: 32px;
height: 32px;
background-image: url(aqua-32x32.png);
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

23
layout/reftests/backgrounds/background-position-5.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>background: url(aqua-32x32.png) left no-repeat reference</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background: url(aqua-32x32.png) left no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

33
layout/reftests/backgrounds/background-position-6-ref.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: top, bottom reference</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
margin-left: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
margin-top: 0px;
width: 32px;
height: 32px;
background-image: url(aqua-32x32.png);
}
#inner2
{
margin-left: 48px; /** 128px - 32px - 32px **/
margin-top: 64px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
width: 32px;
height: 32px;
background-image: url(aqua-32x32.png);
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div><div id="inner2"></div></div>
</body>
</html>

25
layout/reftests/backgrounds/background-position-6.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: top, bottom</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
background-position: top, bottom;
background-image: url(aqua-32x32.png), url(aqua-32x32.png);
background-repeat: no-repeat, no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>
</html>

28
layout/reftests/backgrounds/background-position-7-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left 25% bottom reference</title>
<style type="text/css">
.outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
.inner1
{
margin-left: 24px;
margin-top: 96px;
width: 32px;
height: 32px;
background-image: url(aqua-32x32.png);
}
</style>
</head>
<body>
<div class="outer"><div class="inner1"></div></div>
<div class="outer"><div class="inner1"></div></div>
<div class="outer"><div class="inner1"></div></div>
<div class="outer"><div class="inner1"></div></div>
</body>
</html>

43
layout/reftests/backgrounds/background-position-7.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left 25% bottom</title>
<style type="text/css">
.outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
.outer > div
{
width: 128px;
height: 128px;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner1
{
background-position: left 24px bottom;
}
#inner2
{
background-position: left 25% bottom;
}
#inner3
{
background-position: right 75% bottom;
}
#inner4
{
background-position: right 72px bottom;
}
</style>
</head>
<body>
<div class="outer"><div id="inner1"></div></div>
<div class="outer"><div id="inner2"></div></div>
<div class="outer"><div id="inner3"></div></div>
<div class="outer"><div id="inner4"></div></div>
</body>
</html>

28
layout/reftests/backgrounds/background-position-8-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left 25% bottom reference</title>
<style type="text/css">
.outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
.inner1
{
margin-left: 96px;
margin-top: 24px;
width: 32px;
height: 32px;
background-image: url(aqua-32x32.png);
}
</style>
</head>
<body>
<div class="outer"><div class="inner1"></div></div>
<div class="outer"><div class="inner1"></div></div>
<div class="outer"><div class="inner1"></div></div>
<div class="outer"><div class="inner1"></div></div>
</body>
</html>

43
layout/reftests/backgrounds/background-position-8.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>background-position: left 25% bottom</title>
<style type="text/css">
.outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
.outer > div
{
width: 128px;
height: 128px;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner1
{
background-position: right top 25%;
}
#inner2
{
background-position: right top 24px;
}
#inner3
{
background-position: right bottom 75%;
}
#inner4
{
background-position: right bottom 72px;
}
</style>
</head>
<body>
<div class="outer"><div id="inner1"></div></div>
<div class="outer"><div id="inner2"></div></div>
<div class="outer"><div id="inner3"></div></div>
<div class="outer"><div id="inner4"></div></div>
</body>
</html>

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

@ -32,6 +32,21 @@ fails-if(Android) == viewport-translucent-color-3.html viewport-translucent-colo
== background-clip-1.html background-clip-1-ref.html
== background-clip-2.html background-clip-2-ref.html
== background-position-1a.html background-position-1-ref.html
== background-position-1b.html background-position-1-ref.html
== background-position-1c.html background-position-1-ref.html
== background-position-2a.html background-position-2-ref.html
== background-position-2b.html background-position-2-ref.html
== background-position-3a.html background-position-3-ref.html
== background-position-3b.html background-position-3-ref.html
== background-position-4a.html background-position-4-ref.html
== background-position-4b.html background-position-4-ref.html
== background-position-4c.html background-position-4-ref.html
== background-position-5.html background-position-5-ref.html
== background-position-6.html background-position-6-ref.html
== background-position-7.html background-position-7-ref.html
== background-position-8.html background-position-8-ref.html
== background-size-auto-auto.html background-size-auto-ref.html
== background-size-auto.html background-size-auto-ref.html
== background-size-contain.html background-size-contain-ref.html

27
layout/style/test/property_database.js
View File

@ -1565,7 +1565,7 @@ var gCSSProperties = {
domProp: "backgroundPosition",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "top left", "left top", "0% 0%", "0% top", "left 0%" ],
initial_values: [ "top 0% left 0%", "top 0% left", "top left", "left top", "0% 0%", "0% top", "left 0%" ],
other_values: [ "top", "left", "right", "bottom", "center", "center bottom", "bottom center", "center right", "right center", "center top", "top center", "center left", "left center", "right bottom", "bottom right", "50%", "top left, top left", "top left, top right", "top right, top left", "left top, 0% 0%", "10% 20%, 30%, 40%", "top left, bottom right", "right bottom, left top", "0%", "0px", "30px", "0%, 10%, 20%, 30%", "top, top, top, top, top",
"-moz-calc(20px)",
"-moz-calc(20px) 10px",
@ -1577,9 +1577,30 @@ var gCSSProperties = {
"-moz-calc(20px + 50%) -moz-calc(50% - 10px)",
"-moz-calc(-20px) -moz-calc(-50%)",
"-moz-calc(-20%) -moz-calc(-50%)",
"0px 0px"
"0px 0px",
"right 20px top 60px",
"right 20px bottom 60px",
"left 20px top 60px",
"left 20px bottom 60px",
"right -50px top -50px",
"left -50px bottom -50px",
"right 20px top -50px",
"right -20px top 50px",
"right 3em bottom 10px",
"bottom 3em right 10px",
"top 3em right 10px",
"left 15px",
"10px top",
"left top 15px",
"left 10px top",
"left 20%",
"right 20%"
],
invalid_values: [ "50% left", "top 50%" ]
invalid_values: [ "center 10px center 4px", "center 10px center",
"top 20%", "bottom 20%", "50% left", "top 50%",
"50% bottom 10%", "right 10% 50%", "left right",
"top bottom", "left 10% right",
"top 20px bottom 20px", "left left" ]
},
"background-repeat": {
domProp: "backgroundRepeat",