Bug 1308963 - Part 4. Correct initial value of mask-position in property_database.js draft
authorcku <cku@mozilla.com>
Thu, 13 Oct 2016 23:25:00 +0800
changeset 430267 c9d524a749ed0a252c311e2be5c9ab3184ff8ece
parent 430266 b1bfc78fe17f685edf5b636285d61c1b15a2d72f
child 535174 f4de6f8e8a2faf317b597beadf2e00ffeeccb0cd
push id33792
push userbmo:cku@mozilla.com
push dateThu, 27 Oct 2016 13:20:18 +0000
bugs1308963
milestone52.0a1
Bug 1308963 - Part 4. Correct initial value of mask-position in property_database.js MozReview-Commit-ID: 9BUNMX8zw5r
layout/reftests/w3c-css/submitted/masking/mask-image-6.html
layout/style/test/property_database.js
layout/style/test/test_computed_style.html
--- a/layout/reftests/w3c-css/submitted/masking/mask-image-6.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-6.html
@@ -12,16 +12,17 @@
       div {
         width: 100px;
         height: 100px;
       }
       span {
         font-size: 100px;
         line-height: 100px;
         mask-image: url(support/transparent-100x50-blue-100x50.png);
+        mask-position: center;
         mask-repeat: repeat;
       }
 
     </style>
   </head>
   <body>
     <div>
       <span>A B</span>
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -7016,59 +7016,59 @@ function SupportsMaskShorthand() {
 
 if (SupportsMaskShorthand()) {
   gCSSProperties["mask"] = {
     domProp: "mask",
     inherited: false,
     type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
     /* FIXME: All mask-border-* should be added when we implement them. */
     subproperties: ["mask-clip", "mask-image", "mask-mode", "mask-origin", "mask-position-x", "mask-position-y", "mask-repeat", "mask-size" , "mask-composite"],
-    initial_values: [ "match-source", "none", "repeat", "add", "50% 50%", "center center", "50% 50% / auto", "center / auto", "center center / auto", "50% 50% / auto auto",
-      "center none", "center center none", "none center", "none center center", "none 50% 50%", "center / auto none",
-      "center center / auto auto none",
-      "match-source none repeat add center center", "center center repeat none add", "none repeat add center center / auto", "center center / auto repeat none add match-source", "none repeat add 50% 50% / auto auto match-source",
+    initial_values: [ "match-source", "none", "repeat", "add", "0% 0%", "top left", "0% 0% / auto", "top left / auto", "left top / auto", "0% 0% / auto auto",
+      "top left none", "left top none", "none left top", "none top left", "none 0% 0%", "top left / auto none", "left top / auto none",
+      "top left / auto auto none",
+      "match-source none repeat add top left", "top left repeat none add", "none repeat add top left / auto", "top left / auto repeat none add match-source", "none repeat add 0% 0% / auto auto match-source",
       "border-box", "border-box border-box" ],
     other_values: [
-      "none alpha repeat add center",
+      "none alpha repeat add left top",
       "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
-      "no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==') alpha center add",
+      "no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==') alpha left top add",
       "repeat-x",
       "repeat-y",
       "no-repeat",
-      "none repeat-y alpha add 50% 50%",
+      "none repeat-y alpha add 0% 0%",
       "subtract",
-      "50% center subtract alpha repeat none",
+      "0% top subtract alpha repeat none",
       "top",
       "left",
-      "0% 0%",
-      "top left",
-      "center / 100px",
-      "center / contain",
-      "center / cover",
+      "50% 50%",
+      "center",
+      "top / 100px",
+      "left / contain",
+      "left / cover",
       "10px / 10%",
       "10em / calc(20px)",
-      "center center / 100px 100px",
-      "center center / 100px auto",
-      "center center / 100px 10%",
-      "center center / 100px calc(20px)",
+      "top left / 100px 100px",
+      "top left / 100px auto",
+      "top left / 100px 10%",
+      "top left / 100px calc(20px)",
       "bottom right add none alpha repeat",
-      "0% alpha",
-      "alpha 0%",
-      "0%",
+      "50% alpha",
+      "alpha 50%",
+      "50%",
       "url(#mymask)",
       "-moz-radial-gradient(10% bottom, #ffffff, black) add no-repeat",
       "-moz-linear-gradient(10px 10px -45deg, red, blue) repeat",
       "-moz-linear-gradient(10px 10px -0.125turn, red, blue) repeat",
       "-moz-repeating-radial-gradient(10% bottom, #ffffff, black) add no-repeat",
       "-moz-repeating-linear-gradient(10px 10px -45deg, red, blue) repeat",
       "-moz-element(#test) alpha",
       /* multiple mask-image */
       "url(404.png), url(404.png)",
       "repeat-x, subtract, none",
-      "50% top url(404.png), url(404.png) 50% top",
+      "0% top url(404.png), url(404.png) 50% top",
       "subtract repeat-y top left url(404.png), repeat-x alpha",
       "url(404.png), -moz-linear-gradient(20px 20px -45deg, blue, green), -moz-element(#a) alpha",
       "top left / contain, bottom right / cover",
       /* test cases with clip+origin in the shorthand */
       "url(404.png) alpha padding-box",
       "url(404.png) border-box alpha",
       "content-box url(404.png)",
       "url(404.png) alpha padding-box padding-box",
@@ -7142,19 +7142,18 @@ if (SupportsMaskShorthand()) {
     initial_values: [ "border-box" ],
     other_values: [ "padding-box", "content-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ],
     invalid_values: [ "margin-box", "padding-box padding-box" ]
   };
   gCSSProperties["mask-position"] = {
     domProp: "maskPosition",
     inherited: false,
     type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-    initial_values: [ "left 50% top 50%", "left 50% center", "center", "center center", "50% 50%", "50% center", "center 50%" ],
-    other_values: [ "top", "left", "right", "bottom", "center bottom", "bottom center", "center right", "right center", "center top", "top center", "center left", "left center", "right bottom", "bottom right", "0%", "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",
-      "top 0% left 0%", "top 0% left", "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",
       "calc(20px)",
       "calc(20px) 10px",
       "10px calc(20px)",
       "calc(20px) 25%",
       "25% calc(20px)",
       "calc(20px) calc(20px)",
       "calc(20px + 1em) calc(20px / 2)",
       "calc(20px + 50%) calc(50% - 10px)",
@@ -7186,18 +7185,18 @@ if (SupportsMaskShorthand()) {
                       "top bottom", "left 10% right",
                       "top 20px bottom 20px", "left left",
                       "0px calc(0px + rubbish)"],
   };
   gCSSProperties["mask-position-x"] = {
     domProp: "maskPositionX",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "center", "50%" ],
-    other_values: [ "right", "left", "0%", "left, left", "left, right", "right, left", "left, 0%", "10%, 20%, 40%", "0px", "30px", "0%, 10%, 20%, 30%", "left, left, left, left, left",
+    initial_values: [ "left", "0%" ],
+    other_values: [ "right", "center", "50%", "center, center", "center, right", "right, center", "center, 50%", "10%, 20%, 40%", "1px", "30px", "50%, 10%, 20%, 30%", "center, center, center, center, center",
       "calc(20px)",
       "calc(20px + 1em)",
       "calc(20px / 2)",
       "calc(20px + 50%)",
       "calc(50% - 10px)",
       "calc(-20px)",
       "calc(-50%)",
       "calc(-20%)",
@@ -7212,18 +7211,18 @@ if (SupportsMaskShorthand()) {
                       "bottom 20px", "top 10%", "bottom 3em",
                       "top", "bottom", "top, top", "top, bottom", "bottom, top", "top, 0%", "top, top, top, top, top",
                       "calc(0px + rubbish)", "center 0%"],
   };
   gCSSProperties["mask-position-y"] = {
     domProp: "maskPositionY",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "center", "50%" ],
-    other_values: [ "bottom", "top", "0%", "top, top", "top, bottom", "bottom, top", "top, 0%", "10%, 20%, 40%", "0px", "30px", "0%, 10%, 20%, 30%", "top, top, top, top, top",
+    initial_values: [ "top", "0%" ],
+    other_values: [ "bottom", "center", "50%", "center, center", "center, bottom", "bottom, center", "center, 0%", "10%, 20%, 40%", "1px", "30px", "50%, 10%, 20%, 30%", "center, center, center, center, center",
       "calc(20px)",
       "calc(20px + 1em)",
       "calc(20px / 2)",
       "calc(20px + 50%)",
       "calc(50% - 10px)",
       "calc(-20px)",
       "calc(-50%)",
       "calc(-20%)",
--- a/layout/style/test/test_computed_style.html
+++ b/layout/style/test/test_computed_style.html
@@ -272,20 +272,20 @@ var noframe_container = document.getElem
     // any mask-composite value other than "add".
     "mask-composite": [
       "subtract", "intersect", "exclude"
     ],
     // any mask-mode value other than "match-source".
     "mask-mode": [
       "alpha", "luminance"
     ],
-    // any mask-position value other then "50%" "50% 50%" "center"
+    // any mask-position value other then "0%" "top" "left"
     // "center center".
     "mask-position": [
-      "left", "right", "top", "bottom", "0%", "100%"
+      "0%", "center", "right", "bottom", "50%", "100%"
     ],
     // any mask-repeat value other then "repeat" "repeat repeat".
     "mask-repeat": [
       "repeat-x", "repeat-y", "no-repeat", "space", "round"
     ],
     // any mask-size value other then "auto" "auto auto".
     "mask-size": [
       "10px", "100%", "cover", "contain", "auto 5px"
@@ -305,17 +305,17 @@ var noframe_container = document.getElem
     ],
     "mask-composite": [
       "add"
     ],
     "mask-mode": [
       "match-source"
     ],
     "mask-position": [
-      "50%", "50% 50%", "center"
+      "0% 0%", "left top"
     ],
     "mask-repeat": [
       "repeat", "repeat repeat"
     ],
     "mask-size": [
       "auto", "auto auto"
     ],
   };