Bug 550426 - Add a few reftests for background-position-x/-y. r?dbaron
MozReview-Commit-ID: 7SoQqnS46A9
copy from layout/reftests/backgrounds/background-position-1a.html
copy to layout/reftests/backgrounds/background-position-1d.html
--- a/layout/reftests/backgrounds/background-position-1a.html
+++ b/layout/reftests/backgrounds/background-position-1d.html
@@ -8,41 +8,45 @@
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
- background-position: right 25% bottom 75%;
+ background-position-x: right 25%;
+ background-position-y: bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner2
{
width: 128px;
height: 128px;
- background-position: bottom 75% right 25%;
+ background-position-x: right 25%;
+ background-position-y: bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner3
{
width: 128px;
height: 128px;
- background-position: right 24px bottom 72px;
+ background-position-x: right 24px;
+ background-position-y: bottom 72px;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner4
{
width: 128px;
height: 128px;
- background-position: bottom 72px right 24px;
+ background-position-x: right 24px;
+ background-position-y: bottom 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>copy from layout/reftests/backgrounds/background-position-1b.html
copy to layout/reftests/backgrounds/background-position-1e.html
--- a/layout/reftests/backgrounds/background-position-1b.html
+++ b/layout/reftests/backgrounds/background-position-1e.html
@@ -8,41 +8,45 @@
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
- background-position: left 75% top 25%;
+ background-position-x: left 75%;
+ background-position-y: top 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner2
{
width: 128px;
height: 128px;
- background-position: top 25% left 75%;
+ background-position-x: left 75%;
+ background-position-y: top 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner3
{
width: 128px;
height: 128px;
- background-position: left 72px top 24px;
+ background-position-x: left 72px;
+ background-position-y: top 24px;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner4
{
width: 128px;
height: 128px;
- background-position: top 24px left 72px;
+ background-position-x: left 72px;
+ background-position-y: top 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>copy from layout/reftests/backgrounds/background-position-1c.html
copy to layout/reftests/backgrounds/background-position-1f.html
--- a/layout/reftests/backgrounds/background-position-1c.html
+++ b/layout/reftests/backgrounds/background-position-1f.html
@@ -8,41 +8,45 @@
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
- background-position: left 75% bottom 75%;
+ background-position-x: left 75%;
+ background-position-y: bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner2
{
width: 128px;
height: 128px;
- background-position: right 25% top 25%;
+ background-position-x: right 25%;
+ background-position-y: top 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner3
{
width: 128px;
height: 128px;
- background-position: bottom 75% left 75%;
+ background-position-x: left 75%;
+ background-position-y: bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
#inner4
{
width: 128px;
height: 128px;
- background-position: right 25% top 25%;
+ background-position-x: right 25%;
+ background-position-y: 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>--- a/layout/reftests/backgrounds/background-position-2a.html
+++ b/layout/reftests/backgrounds/background-position-2a.html
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
<head>
- <title>background-position: center bottom 75%</title>
+ <title>background-position: left 25% bottom 75%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1copy from layout/reftests/backgrounds/background-position-2a.html
copy to layout/reftests/backgrounds/background-position-2c.html
--- a/layout/reftests/backgrounds/background-position-2a.html
+++ b/layout/reftests/backgrounds/background-position-2c.html
@@ -1,24 +1,25 @@
<!DOCTYPE html>
<html>
<head>
- <title>background-position: center bottom 75%</title>
+ <title>background-position: left 25% 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-position-x: left 25%;
+ background-position-y: bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>copy from layout/reftests/backgrounds/background-position-2b.html
copy to layout/reftests/backgrounds/background-position-2d.html
--- a/layout/reftests/backgrounds/background-position-2b.html
+++ b/layout/reftests/backgrounds/background-position-2d.html
@@ -8,17 +8,18 @@
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
- background-position: 25% 25%;
+ background-position-x: 25%;
+ background-position-y: 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>copy from layout/reftests/backgrounds/background-position-3a.html
copy to layout/reftests/backgrounds/background-position-3c.html
--- a/layout/reftests/backgrounds/background-position-3a.html
+++ b/layout/reftests/backgrounds/background-position-3c.html
@@ -8,17 +8,18 @@
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
- background-position: center bottom 75%;
+ background-position-x: center;
+ background-position-y: bottom 75%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>copy from layout/reftests/backgrounds/background-position-3b.html
copy to layout/reftests/backgrounds/background-position-3d.html
--- a/layout/reftests/backgrounds/background-position-3b.html
+++ b/layout/reftests/backgrounds/background-position-3d.html
@@ -8,17 +8,18 @@
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
- background-position: center 25%;
+ background-position-x: center;
+ background-position-y: 25%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>copy from layout/reftests/backgrounds/background-position-4a.html
copy to layout/reftests/backgrounds/background-position-4d.html
--- a/layout/reftests/backgrounds/background-position-4a.html
+++ b/layout/reftests/backgrounds/background-position-4d.html
@@ -1,24 +1,24 @@
<!DOCTYPE html>
<html>
<head>
- <title>background-position: left center</title>
+ <title>background-position-y: bottom 50%</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
- background-position: left center;
+ background-position-y: bottom 50%;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>copy from layout/reftests/backgrounds/background-position-4b.html
copy to layout/reftests/backgrounds/background-position-4e.html
--- a/layout/reftests/backgrounds/background-position-4b.html
+++ b/layout/reftests/backgrounds/background-position-4e.html
@@ -1,24 +1,24 @@
<!DOCTYPE html>
<html>
<head>
- <title>background-position: left</title>
+ <title>background-position-y: center</title>
<style type="text/css">
#outer
{
border: 1px solid black;
width: 128px;
height: 128px;
}
#inner1
{
width: 128px;
height: 128px;
- background-position: left;
+ background-position-y: center;
background-image: url(aqua-32x32.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="outer"><div id="inner1"></div></div>
</body>rename from layout/reftests/backgrounds/background-position-6.html
rename to layout/reftests/backgrounds/background-position-6a.html
copy from layout/reftests/backgrounds/background-position-6.html
copy to layout/reftests/backgrounds/background-position-6b.html
--- a/layout/reftests/backgrounds/background-position-6.html
+++ b/layout/reftests/backgrounds/background-position-6b.html
@@ -1,24 +1,25 @@
<!DOCTYPE html>
<html>
<head>
- <title>background-position: top, bottom</title>
+ <title>background-position-y: 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-position: top; /* sets background-position-x to center */
+ background-position-y: 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>--- a/layout/reftests/backgrounds/reftest.list
+++ b/layout/reftests/backgrounds/reftest.list
@@ -30,25 +30,35 @@ skip-if(B2G||Mulet) == continuous-inline
== background-redraw-237766.html background-redraw-237766-ref.html
== background-clip-1.html background-clip-1-ref.html
== background-clip-2.html background-clip-2-ref.html
skip-if(B2G||Mulet) == background-position-1a.html background-position-1-ref.html # Initial mulet triage: parity with B2G/B2G Desktop
== background-position-1b.html background-position-1-ref.html
== background-position-1c.html background-position-1-ref.html
+skip-if(B2G||Mulet) == background-position-1d.html background-position-1-ref.html # Initial mulet triage: parity with B2G/B2G Desktop
+== background-position-1e.html background-position-1-ref.html
+== background-position-1f.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-2c.html background-position-2-ref.html
+== background-position-2d.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-3c.html background-position-3-ref.html
+== background-position-3d.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-4d.html background-position-4-ref.html
+== background-position-4e.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-6a.html background-position-6-ref.html
+== background-position-6b.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
== background-size-cover.html background-size-cover-ref.html
== background-size-auto-length.html background-size-auto-length-ref.html
