Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(742)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/backgrounds/background-position-parsing-2.html

Issue 38573003: Use 4 value syntax for getComputedStyle of background-position and -webkit-mask-position (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebased Created 7 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/animations/resources/animation-test-helpers.js ('k') | LayoutTests/fast/backgrounds/background-position-parsing-2-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/backgrounds/background-position-parsing-2.html
diff --git a/LayoutTests/fast/backgrounds/background-position-parsing-2.html b/LayoutTests/fast/backgrounds/background-position-parsing-2.html
index f711de9a3922885081d5bef65a8724357378fe86..261e009bfadf1d07460a47d22f9ab21de700195c 100644
--- a/LayoutTests/fast/backgrounds/background-position-parsing-2.html
+++ b/LayoutTests/fast/backgrounds/background-position-parsing-2.html
@@ -21,162 +21,162 @@ style.backgroundRepeat = "no-repeat";
debug("background-position with one value");
// Initial test.
-shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%'");
style.backgroundPosition = "70%";
// Second value is assuming to be 'center'
shouldBe("style.backgroundPosition", "'70% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'70% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 70% top 50%'");
style.backgroundPosition = "84px";
shouldBe("style.backgroundPosition", "'84px 50%'");
-shouldBe("computedStyle.backgroundPosition", "'84px 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 84px top 50%'");
style.backgroundPosition = "left";
shouldBe("style.backgroundPosition", "'0% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'0% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 50%'");
style.backgroundPosition = "right";
shouldBe("style.backgroundPosition", "'100% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 100% top 50%'");
style.backgroundPosition = "bottom";
shouldBe("style.backgroundPosition", "'50% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 100%'");
style.backgroundPosition = "top";
shouldBe("style.backgroundPosition", "'50% 0%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 0%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 0%'");
style.backgroundPosition = "center";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
debug("background-position with two values");
style.backgroundPosition = "left bottom";
shouldBe("style.backgroundPosition", "'0% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'0% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 100%'");
style.backgroundPosition = "bottom left";
shouldBe("style.backgroundPosition", "'0% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'0% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 100%'");
style.backgroundPosition = "100% bottom";
shouldBe("style.backgroundPosition", "'100% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'100% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 100% top 100%'");
style.backgroundPosition = "100% top";
shouldBe("style.backgroundPosition", "'100% 0%'");
-shouldBe("computedStyle.backgroundPosition", "'100% 0%'");
+shouldBe("computedStyle.backgroundPosition", "'left 100% top 0%'");
style.backgroundPosition = "54px bottom";
shouldBe("style.backgroundPosition", "'54px 100%'");
-shouldBe("computedStyle.backgroundPosition", "'54px 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 54px top 100%'");
style.backgroundPosition = "center center";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "5% bottom";
shouldBe("style.backgroundPosition", "'5% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'5% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 5% top 100%'");
style.backgroundPosition = "30pt -20px";
shouldBe("style.backgroundPosition", "'30pt -20px'");
-shouldBe("computedStyle.backgroundPosition", "'40px -20px'");
+shouldBe("computedStyle.backgroundPosition", "'left 40px top -20px'");
style.backgroundPosition = "right center";
shouldBe("style.backgroundPosition", "'100% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 100% top 50%'");
style.backgroundPosition = "100% 0";
shouldBe("style.backgroundPosition", "'100% 0px'");
-shouldBe("computedStyle.backgroundPosition", "'100% 0px'");
+shouldBe("computedStyle.backgroundPosition", "'left 100% top 0px'");
style.backgroundPosition = "center right";
shouldBe("style.backgroundPosition", "'100% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 100% top 50%'");
style.backgroundPosition = "center 50%";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "center left";
shouldBe("style.backgroundPosition", "'0% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'0% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 50%'");
style.backgroundPosition = "-20% center";
shouldBe("style.backgroundPosition", "'-20% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'-20% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left -20% top 50%'");
style.backgroundPosition = "top right";
shouldBe("style.backgroundPosition", "'100% 0%'");
-shouldBe("computedStyle.backgroundPosition", "'100% 0%'");
+shouldBe("computedStyle.backgroundPosition", "'left 100% top 0%'");
style.backgroundPosition = "50% center";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
debug("background-position invalid with one or two values, no change expected");
style.backgroundPosition = "5 right";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "0 right";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "0px right";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "top 108px";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "top 100%";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "60 50%";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "hidden";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "hidden solid";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "bottombottom";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "left left";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "left right";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "top top";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "50% left";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "50";
shouldBe("style.backgroundPosition", "'50% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
style.backgroundPosition = "1px+1px";
shouldBe("style.backgroundPosition", "'1px 1px'");
-shouldBe("computedStyle.backgroundPosition", "'1px 1px'");
+shouldBe("computedStyle.backgroundPosition", "'left 1px top 1px'");
debug("background-position with CSS3 comma separator, one or two values");
style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)";
@@ -184,32 +184,32 @@ style.backgroundRepeat = "no-repeat";
style.backgroundPosition = "50%, 100%";
shouldBe("style.backgroundPosition", "'50% 50%, 100% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%, 100% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%, left 100% top 50%'");
style.backgroundPosition = "top, bottom";
shouldBe("style.backgroundPosition", "'50% 0%, 50% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'50% 0%, 50% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 0%, left 50% top 100%'");
style.backgroundPosition = "right center, 5px bottom";
shouldBe("style.backgroundPosition", "'100% 50%, 5px 100%'");
-shouldBe("computedStyle.backgroundPosition", "'100% 50%, 5px 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 100% top 50%, left 5px top 100%'");
style.backgroundPosition = "top left, bottom right";
shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%, left 100% top 100%'");
debug("background-position with CSS3 comma separator, with invalid one or two values, no change expected");
style.backgroundPosition = "0 center, right right";
shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%, left 100% top 100%'");
style.backgroundPosition = "center right, right right";
shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%, left 100% top 100%'");
style.backgroundPosition = "center 20px, solid 20px";
shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'");
-shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%, left 100% top 100%'");
debug("background-position with CSS3 four values");
style.backgroundImage = "url(resources/diamond.png)";
@@ -247,7 +247,7 @@ shouldBe("computedStyle.backgroundPosition", "'left 30px top 50%'");
style.backgroundPosition = "";
shouldBe("style.backgroundPosition", "''");
-shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
+shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%'");
style.backgroundPosition = "left 20% top";
shouldBe("style.backgroundPosition", "'left 20% top 0%'");
@@ -375,11 +375,11 @@ style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)";
style.backgroundPosition = "center, left bottom 20px";
shouldBe("style.backgroundPosition", "'50% 50%, left 0% bottom 20px'");
-shouldBe("computedStyle.backgroundPosition", "'50% 50%, left 0% bottom 20px'");
+shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%, left 0% bottom 20px'");
style.backgroundPosition = "right 20px bottom 20px, center left";
shouldBe("style.backgroundPosition", "'right 20px bottom 20px, 0% 50%'");
-shouldBe("computedStyle.backgroundPosition", "'right 20px bottom 20px, 0% 50%'");
+shouldBe("computedStyle.backgroundPosition", "'right 20px bottom 20px, left 0% top 50%'");
style.backgroundPosition = "left 10px top 15px, right 20% bottom 20px";
shouldBe("style.backgroundPosition", "'left 10px top 15px, right 20% bottom 20px'");
@@ -433,15 +433,15 @@ shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50
style.background = "top center round fixed border-box";
shouldBe("style.background", "'50% 0% round fixed border-box border-box'");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50% 0% / auto border-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50% top 0% / auto border-box border-box'");
style.background = "50px 60px / 50px round fixed border-box";
shouldBe("style.background", "'50px 60px / 50px round fixed border-box border-box'");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 60px / 50px border-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50px top 60px / 50px border-box border-box'");
style.background = "50px / 50px round fixed border-box";
shouldBe("style.background", "'50px 50% / 50px round fixed border-box border-box'");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 50% / 50px border-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50px top 50% / 50px border-box border-box'");
style.background = "left top 60px / 50px round fixed border-box";
shouldBe("style.background", "'left 0% top 60px / 50px round fixed border-box border-box'");
@@ -476,59 +476,59 @@ style.background = "";
style.background = "top 10% left 30% 50% gray round fixed border-box";
shouldBe("style.background", "''");
// This is the default computed style.
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "top 10% solid 30% gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "top 10% left round gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "top 10% top 30% gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "center center center / 10em gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "center center 30px / 10em gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "top center left / 10em gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "50% left / 10em gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "solid / 10em gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "top 10% left 20px 50% 50px gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "20px 20px 30px / 40px gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "20px 20px 30px 60px / 40px gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "20px 20px 30px 60px 70px / 40px gray round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
style.background = "20px 20px 30px / 40px gray top left round fixed border-box";
shouldBe("style.background", "''");
-shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
+shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
document.body.removeChild(testContainer);
</script>
« no previous file with comments | « LayoutTests/animations/resources/animation-test-helpers.js ('k') | LayoutTests/fast/backgrounds/background-position-parsing-2-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698