Bug 1281101 Part 2 - Remove mask-image support checking in mochitests. draft
authorTing-Yu Lin <tlin@mozilla.com>
Thu, 21 Sep 2017 17:39:37 +0800
changeset 668857 b8e0d51ad0d98212979400ed0021fe6204952922
parent 668215 9a94905ef63f1b696174ab214676e0f0ef08627e
child 668858 160eaa3ca9fca9949caf3d9f8be1ddb08b28e09b
push id81142
push userbmo:tlin@mozilla.com
push dateFri, 22 Sep 2017 03:50:38 +0000
bugs1281101
milestone57.0a1
Bug 1281101 Part 2 - Remove mask-image support checking in mochitests. MozReview-Commit-ID: I0GI8ae3J1x
layout/style/test/property_database.js
layout/style/test/test_computed_style.html
layout/style/test/test_transitions_per_property.html
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -2035,16 +2035,275 @@ var gCSSProperties = {
       "calc(-2px)",
       "calc(50%)",
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
     ],
     invalid_values: [ "5", "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ],
   },
+  "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", "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 left top",
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
+      "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 0% 0%",
+      "subtract",
+      "0% top subtract alpha repeat none",
+      "top",
+      "left",
+      "50% 50%",
+      "center",
+      "top / 100px",
+      "left / contain",
+      "left / cover",
+      "10px / 10%",
+      "10em / 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",
+      "50% alpha",
+      "alpha 50%",
+      "50%",
+      "url(#mymask)",
+      "radial-gradient(at 10% bottom, #ffffff, black) add no-repeat",
+      "repeating-radial-gradient(at 10% bottom, #ffffff, black) no-repeat",
+      "-moz-element(#test) alpha",
+      /* multiple mask-image */
+      "url(404.png), url(404.png)",
+      "repeat-x, subtract, none",
+      "0% top url(404.png), url(404.png) 50% top",
+      "subtract repeat-y top left url(404.png), repeat-x 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",
+      "url(404.png) alpha padding-box border-box",
+      "content-box border-box url(404.png)",
+      "alpha padding-box url(404.png) border-box",
+      "alpha padding-box url(404.png) padding-box",
+    ],
+    invalid_values: [
+      /* mixes with keywords have to be in correct order */
+      "50% left", "top 50%",
+      /* no quirks mode colors */
+      "radial-gradient(at 10% bottom, ffffff, black) add no-repeat",
+      /* no quirks mode lengths */
+      "linear-gradient(red -99, yellow, green, blue 120%)",
+      /* bug 258080: don't accept background-position separated */
+      "left url(404.png) top", "top url(404.png) left",
+      "-moz-element(#a rubbish)",
+      "left top / match-source"
+    ]
+  },
+  "mask-clip": {
+    domProp: "maskClip",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "border-box" ],
+    other_values: [ "content-box", "fill-box", "stroke-box", "view-box", "no-clip", "padding-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ],
+    invalid_values: [ "content-box content-box", "margin-box" ]
+  },
+  "mask-composite": {
+    domProp: "maskComposite",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "add" ],
+    other_values: [ "subtract", "intersect", "exclude", "add, add", "subtract, intersect", "subtract, subtract, add"],
+    invalid_values: [ "add subtract", "intersect exclude" ]
+  },
+  "mask-image": {
+    domProp: "maskImage",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "none" ],
+    other_values: [
+    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+    "none, none",
+    "none, none, none, none, none",
+    "url(#mymask)",
+    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none",
+    "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none",
+    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
+    ].concat(validGradientAndElementValues),
+    invalid_values: [
+    ].concat(invalidGradientAndElementValues),
+    unbalanced_values: [
+    ].concat(unbalancedGradientAndElementValues)
+  },
+  "mask-mode": {
+    domProp: "maskMode",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "match-source" ],
+    other_values: [ "alpha", "luminance", "match-source, match-source", "match-source, alpha", "alpha, luminance, match-source"],
+    invalid_values: [ "match-source match-source", "alpha match-source" ]
+  },
+  "mask-origin": {
+    domProp: "maskOrigin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "border-box" ],
+    other_values: [ "padding-box", "content-box", "fill-box", "stroke-box", "view-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ],
+    invalid_values: [ "padding-box padding-box", "no-clip", "margin-box" ]
+  },
+  "mask-position": {
+    domProp: "maskPosition",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    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)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)",
+      "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%"
+    ],
+    subproperties: [ "mask-position-x", "mask-position-y" ],
+    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",
+                      "0px calc(0px + rubbish)"],
+  },
+  "mask-position-x": {
+    domProp: "maskPositionX",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    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%)",
+      "right 20px",
+      "left 20px",
+      "right -50px",
+      "left -50px",
+      "right 20px",
+      "right 3em",
+    ],
+    invalid_values: [ "center 10px", "right 10% 50%", "left right", "left left",
+                      "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%"],
+  },
+  "mask-position-y": {
+    domProp: "maskPositionY",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    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%)",
+      "bottom 20px",
+      "top 20px",
+      "bottom -50px",
+      "top -50px",
+      "bottom 20px",
+      "bottom 3em",
+    ],
+    invalid_values: [ "center 10px", "bottom 10% 50%", "top bottom", "top top",
+                      "right 20px", "left 10%", "right 3em",
+                      "left", "right", "left, left", "left, right", "right, left", "left, 0%", "left, left, left, left, left",
+                      "calc(0px + rubbish)", "center 0%"],
+  },
+  "mask-repeat": {
+    domProp: "maskRepeat",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "repeat", "repeat repeat" ],
+    other_values: [ "repeat-x", "repeat-y", "no-repeat",
+      "repeat-x, repeat-x",
+      "repeat, no-repeat",
+      "repeat-y, no-repeat, repeat-y",
+      "repeat, repeat, repeat",
+      "repeat no-repeat",
+      "no-repeat repeat",
+      "no-repeat no-repeat",
+      "repeat no-repeat",
+      "no-repeat no-repeat, no-repeat no-repeat",
+    ],
+    invalid_values: [ "repeat repeat repeat",
+                      "repeat-x repeat-y",
+                      "repeat repeat-x",
+                      "repeat repeat-y",
+                      "repeat-x repeat",
+                      "repeat-y repeat" ]
+  },
+  "mask-size": {
+    domProp: "maskSize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "auto", "auto auto" ],
+    other_values: [ "contain", "cover", "100px auto", "auto 100px", "100% auto", "auto 100%", "25% 50px", "3em 40%",
+      "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)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)"
+    ],
+    invalid_values: [ "contain contain", "cover cover", "cover auto", "auto cover", "contain cover", "cover contain", "-5px 3px", "3px -5px", "auto -5px", "-5px auto", "5 3", "10px calc(10px + rubbish)" ]
+  },
   "mask-type": {
     domProp: "maskType",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "luminance" ],
     other_values: [ "alpha" ],
     invalid_values: [],
   },
@@ -7240,291 +7499,16 @@ if (IsCSSPropertyPrefEnabled("layout.css
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "none" ],
     other_values: ["mandatory", "proximity"],
     invalid_values: [ "auto",  "1px" ]
   };
 }
 
-function SupportsMaskShorthand() {
-  return "maskImage" in document.documentElement.style;
-}
-
-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", "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 left top",
-      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
-      "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 0% 0%",
-      "subtract",
-      "0% top subtract alpha repeat none",
-      "top",
-      "left",
-      "50% 50%",
-      "center",
-      "top / 100px",
-      "left / contain",
-      "left / cover",
-      "10px / 10%",
-      "10em / 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",
-      "50% alpha",
-      "alpha 50%",
-      "50%",
-      "url(#mymask)",
-      "radial-gradient(at 10% bottom, #ffffff, black) add no-repeat",
-      "repeating-radial-gradient(at 10% bottom, #ffffff, black) no-repeat",
-      "-moz-element(#test) alpha",
-      /* multiple mask-image */
-      "url(404.png), url(404.png)",
-      "repeat-x, subtract, none",
-      "0% top url(404.png), url(404.png) 50% top",
-      "subtract repeat-y top left url(404.png), repeat-x 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",
-      "url(404.png) alpha padding-box border-box",
-      "content-box border-box url(404.png)",
-      "alpha padding-box url(404.png) border-box",
-      "alpha padding-box url(404.png) padding-box",
-    ],
-    invalid_values: [
-      /* mixes with keywords have to be in correct order */
-      "50% left", "top 50%",
-      /* no quirks mode colors */
-      "radial-gradient(at 10% bottom, ffffff, black) add no-repeat",
-      /* no quirks mode lengths */
-      "linear-gradient(red -99, yellow, green, blue 120%)",
-      /* bug 258080: don't accept background-position separated */
-      "left url(404.png) top", "top url(404.png) left",
-      "-moz-element(#a rubbish)",
-      "left top / match-source"
-    ]
-  };
-  gCSSProperties["mask-clip"] = {
-    domProp: "maskClip",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "border-box" ],
-    other_values: [ "content-box", "fill-box", "stroke-box", "view-box", "no-clip", "padding-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ],
-    invalid_values: [ "content-box content-box", "margin-box" ]
-  };
-  gCSSProperties["mask-image"] = {
-    domProp: "maskImage",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "none" ],
-    other_values: [
-    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
-    "none, none",
-    "none, none, none, none, none",
-    "url(#mymask)",
-    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none",
-    "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none",
-    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
-    ].concat(validGradientAndElementValues),
-    invalid_values: [
-    ].concat(invalidGradientAndElementValues),
-    unbalanced_values: [
-    ].concat(unbalancedGradientAndElementValues)
-  };
-  gCSSProperties["mask-mode"] = {
-    domProp: "maskMode",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "match-source" ],
-    other_values: [ "alpha", "luminance", "match-source, match-source", "match-source, alpha", "alpha, luminance, match-source"],
-    invalid_values: [ "match-source match-source", "alpha match-source" ]
-  };
-  gCSSProperties["mask-composite"] = {
-    domProp: "maskComposite",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "add" ],
-    other_values: [ "subtract", "intersect", "exclude", "add, add", "subtract, intersect", "subtract, subtract, add"],
-    invalid_values: [ "add subtract", "intersect exclude" ]
-  };
-  gCSSProperties["mask-origin"] = {
-    domProp: "maskOrigin",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "border-box" ],
-    other_values: [ "padding-box", "content-box", "fill-box", "stroke-box", "view-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ],
-    invalid_values: [ "padding-box padding-box", "no-clip", "margin-box" ]
-  };
-  gCSSProperties["mask-position"] = {
-    domProp: "maskPosition",
-    inherited: false,
-    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-    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)",
-      "calc(-20px) calc(-50%)",
-      "calc(-20%) calc(-50%)",
-      "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%"
-    ],
-    subproperties: [ "mask-position-x", "mask-position-y" ],
-    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",
-                      "0px calc(0px + rubbish)"],
-  };
-  gCSSProperties["mask-position-x"] = {
-    domProp: "maskPositionX",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    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%)",
-      "right 20px",
-      "left 20px",
-      "right -50px",
-      "left -50px",
-      "right 20px",
-      "right 3em",
-    ],
-    invalid_values: [ "center 10px", "right 10% 50%", "left right", "left left",
-                      "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: [ "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%)",
-      "bottom 20px",
-      "top 20px",
-      "bottom -50px",
-      "top -50px",
-      "bottom 20px",
-      "bottom 3em",
-    ],
-    invalid_values: [ "center 10px", "bottom 10% 50%", "top bottom", "top top",
-                      "right 20px", "left 10%", "right 3em",
-                      "left", "right", "left, left", "left, right", "right, left", "left, 0%", "left, left, left, left, left",
-                      "calc(0px + rubbish)", "center 0%"],
-  };
-  gCSSProperties["mask-repeat"] = {
-    domProp: "maskRepeat",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "repeat", "repeat repeat" ],
-    other_values: [ "repeat-x", "repeat-y", "no-repeat",
-      "repeat-x, repeat-x",
-      "repeat, no-repeat",
-      "repeat-y, no-repeat, repeat-y",
-      "repeat, repeat, repeat",
-      "repeat no-repeat",
-      "no-repeat repeat",
-      "no-repeat no-repeat",
-      "repeat no-repeat",
-      "no-repeat no-repeat, no-repeat no-repeat",
-    ],
-    invalid_values: [ "repeat repeat repeat",
-                      "repeat-x repeat-y",
-                      "repeat repeat-x",
-                      "repeat repeat-y",
-                      "repeat-x repeat",
-                      "repeat-y repeat" ]
-  };
-  gCSSProperties["mask-size"] = {
-    domProp: "maskSize",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "auto", "auto auto" ],
-    other_values: [ "contain", "cover", "100px auto", "auto 100px", "100% auto", "auto 100%", "25% 50px", "3em 40%",
-      "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)",
-      "calc(-20px) calc(-50%)",
-      "calc(-20%) calc(-50%)"
-    ],
-    invalid_values: [ "contain contain", "cover cover", "cover auto", "auto cover", "contain cover", "cover contain", "-5px 3px", "3px -5px", "auto -5px", "-5px auto", "5 3", "10px calc(10px + rubbish)" ]
-  };
-} else {
-  gCSSProperties["mask"] = {
-    domProp: "mask",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "none" ],
-    other_values: [ "url(#mymask)" ],
-    invalid_values: []
-  };
-}
-
 if (IsCSSPropertyPrefEnabled("layout.css.prefixes.webkit")) {
   gCSSProperties["-webkit-animation"] = {
     domProp: "webkitAnimation",
     inherited: false,
     type: CSS_TYPE_TRUE_SHORTHAND,
     alias_for: "animation",
     subproperties: [ "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-direction", "animation-fill-mode", "animation-iteration-count", "animation-play-state" ],
   };
@@ -7939,91 +7923,88 @@ if (IsCSSPropertyPrefEnabled("layout.css
   };
   gCSSProperties["-webkit-user-select"] = {
     domProp: "webkitUserSelect",
     inherited: false,
     type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
     alias_for: "-moz-user-select",
     subproperties: [ "-moz-user-select" ],
   };
-
-  if (SupportsMaskShorthand()) {
-    gCSSProperties["-webkit-mask"] = {
-      domProp: "webkitMask",
-      inherited: false,
-      type: CSS_TYPE_TRUE_SHORTHAND,
-      alias_for: "mask",
-      subproperties: [ "mask-clip", "mask-image", "mask-mode", "mask-origin", "mask-position", "mask-repeat", "mask-size" , "mask-composite" ],
-    };
-    gCSSProperties["-webkit-mask-clip"] = {
-      domProp: "webkitMaskClip",
-      inherited: false,
-      type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      alias_for: "mask-clip",
-      subproperties: [ "mask-clip" ],
-    };
-
-    gCSSProperties["-webkit-mask-composite"] = {
-      domProp: "webkitMaskComposite",
-      inherited: false,
-      type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      alias_for: "mask-composite",
-      subproperties: [ "mask-composite" ],
-    };
-
-    gCSSProperties["-webkit-mask-image"] = {
-      domProp: "webkitMaskImage",
-      inherited: false,
-      type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      alias_for: "mask-image",
-      subproperties: [ "mask-image" ],
-    };
-    gCSSProperties["-webkit-mask-origin"] = {
-      domProp: "webkitMaskOrigin",
-      inherited: false,
-      type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      alias_for: "mask-origin",
-      subproperties: [ "mask-origin" ],
-    };
-    gCSSProperties["-webkit-mask-position"] = {
-      domProp: "webkitMaskPosition",
-      inherited: false,
-      type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      alias_for: "mask-position",
-      subproperties: [ "mask-position" ],
-    };
-    gCSSProperties["-webkit-mask-position-x"] = {
-      domProp: "webkitMaskPositionX",
-      inherited: false,
-      type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      alias_for: "mask-position-x",
-      subproperties: [ "mask-position-x" ],
-    };
-    gCSSProperties["-webkit-mask-position-y"] = {
-      domProp: "webkitMaskPositionY",
-      inherited: false,
-      type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      alias_for: "mask-position-y",
-      subproperties: [ "mask-position-y" ],
-    };
-    gCSSProperties["-webkit-mask-repeat"] = {
-      domProp: "webkitMaskRepeat",
-      inherited: false,
-      type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      alias_for: "mask-repeat",
-      subproperties: [ "mask-repeat" ],
-    };
-    gCSSProperties["-webkit-mask-size"] = {
-      domProp: "webkitMaskSize",
-      inherited: false,
-      type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      alias_for: "mask-size",
-      subproperties: [ "mask-size" ],
-    };
-  }
+  gCSSProperties["-webkit-mask"] = {
+    domProp: "webkitMask",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    alias_for: "mask",
+    subproperties: [ "mask-clip", "mask-image", "mask-mode", "mask-origin", "mask-position", "mask-repeat", "mask-size" , "mask-composite" ],
+  };
+  gCSSProperties["-webkit-mask-clip"] = {
+    domProp: "webkitMaskClip",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-clip",
+    subproperties: [ "mask-clip" ],
+  };
+
+  gCSSProperties["-webkit-mask-composite"] = {
+    domProp: "webkitMaskComposite",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-composite",
+    subproperties: [ "mask-composite" ],
+  };
+
+  gCSSProperties["-webkit-mask-image"] = {
+    domProp: "webkitMaskImage",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-image",
+    subproperties: [ "mask-image" ],
+  };
+  gCSSProperties["-webkit-mask-origin"] = {
+    domProp: "webkitMaskOrigin",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-origin",
+    subproperties: [ "mask-origin" ],
+  };
+  gCSSProperties["-webkit-mask-position"] = {
+    domProp: "webkitMaskPosition",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-position",
+    subproperties: [ "mask-position" ],
+  };
+  gCSSProperties["-webkit-mask-position-x"] = {
+    domProp: "webkitMaskPositionX",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-position-x",
+    subproperties: [ "mask-position-x" ],
+  };
+  gCSSProperties["-webkit-mask-position-y"] = {
+    domProp: "webkitMaskPositionY",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-position-y",
+    subproperties: [ "mask-position-y" ],
+  };
+  gCSSProperties["-webkit-mask-repeat"] = {
+    domProp: "webkitMaskRepeat",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-repeat",
+    subproperties: [ "mask-repeat" ],
+  };
+  gCSSProperties["-webkit-mask-size"] = {
+    domProp: "webkitMaskSize",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-size",
+    subproperties: [ "mask-size" ],
+  };
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.prefixes.gradients")) {
   gCSSProperties["background"].other_values.push(
     "-moz-radial-gradient(10% bottom, #ffffff, black) scroll 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) scroll no-repeat",
@@ -8035,33 +8016,31 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "-moz-radial-gradient(10% bottom, ffffff, black) scroll no-repeat",
     /* no quirks mode lengths */
     "-moz-linear-gradient(10 10px -45deg, red, blue) repeat",
     "-moz-linear-gradient(10px 10 -45deg, red, blue) repeat",
     /* bug 513395: old syntax for gradients */
     "-moz-radial-gradient(10% bottom, 30px, 20px 20px, 10px, from(#ffffff), to(black)) scroll no-repeat",
     "-moz-linear-gradient(10px 10px, 20px 20px, from(red), to(blue)) repeat",
   );
-  if (SupportsMaskShorthand()) {
-    gCSSProperties["mask"].other_values.push(
-      "-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",
-      "url(404.png), -moz-linear-gradient(20px 20px -45deg, blue, green), -moz-element(#a) alpha",
-    );
-    gCSSProperties["mask"].invalid_values.push(
-      /* no quirks mode colors */
-      "-moz-radial-gradient(10% bottom, ffffff, black) add no-repeat",
-      /* no quirks mode lengths */
-      "-moz-linear-gradient(10 10px -45deg, red, blue) repeat",
-      "-moz-linear-gradient(10px 10 -45deg, red, blue) repeat",
-    );
-  }
+  gCSSProperties["mask"].other_values.push(
+    "-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",
+    "url(404.png), -moz-linear-gradient(20px 20px -45deg, blue, green), -moz-element(#a) alpha",
+  );
+  gCSSProperties["mask"].invalid_values.push(
+    /* no quirks mode colors */
+    "-moz-radial-gradient(10% bottom, ffffff, black) add no-repeat",
+    /* no quirks mode lengths */
+    "-moz-linear-gradient(10 10px -45deg, red, blue) repeat",
+    "-moz-linear-gradient(10px 10 -45deg, red, blue) repeat",
+  );
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.unset-value.enabled")) {
   gCSSProperties["animation"].invalid_values.push("2s unset");
   gCSSProperties["animation-direction"].invalid_values.push("normal, unset", "unset, normal");
   gCSSProperties["animation-name"].invalid_values.push("bounce, unset", "unset, bounce");
   gCSSProperties["-moz-border-bottom-colors"].invalid_values.push("red unset", "unset red");
   gCSSProperties["-moz-border-left-colors"].invalid_values.push("red unset", "unset red");
--- a/layout/style/test/test_computed_style.html
+++ b/layout/style/test/test_computed_style.html
@@ -238,20 +238,16 @@ var noframe_container = document.getElem
     p.style.backgroundImage = test[0];
     is(cs.backgroundImage, test[1], "computed value of " + test[2] + " background-image");
   }
 
   p.remove();
 })();
 
 (function test_bug_1235015() {
-  if (!("maskImage" in document.documentElement.style)) {
-    return;
-  }
-
   // "masks" object contains non-initial mask longhand values.
   var emptyMasks = {
     // More then one <mask-reference>, or any mask-image value other then
     // <mask-source>,
     "mask-image": [
       "url(#mask1), url(#mask2)",
       "linear-gradient(red, yellow)",
       "-moz-element(#test)"
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -189,16 +189,40 @@ var supported_properties = {
                      test_length_percent_calc_transition,
                      test_length_unclamped, test_percent_unclamped ],
     "margin-right": [ test_length_transition, test_percent_transition,
                       test_length_percent_calc_transition,
                       test_length_unclamped, test_percent_unclamped ],
     "margin-top": [ test_length_transition, test_percent_transition,
                     test_length_percent_calc_transition,
                     test_length_unclamped, test_percent_unclamped ],
+    "mask-position": [ test_background_position_transition,
+                       // FIXME: We don't currently test clamping,
+                       // since mask-position uses calc() as
+                       // an intermediate form.
+                       /* test_length_percent_pair_unclamped */ ],
+    "mask-position-x": [ test_background_position_coord_transition,
+                         test_length_transition,
+                         test_percent_transition,
+                         // FIXME: We don't currently test clamping,
+                         // since background-position-x uses calc() as
+                         // an intermediate form.
+                         /* test_length_percent_pair_unclamped */ ],
+    "mask-position-y": [ test_background_position_coord_transition,
+                         test_length_transition,
+                         test_percent_transition,
+                         // FIXME: We don't currently test clamping,
+                         // since background-position-y uses calc() as
+                         // an intermediate form.
+                         /* test_length_percent_pair_unclamped */ ],
+    "mask-size": [ test_background_size_transition,
+                   // FIXME: We don't currently test clamping,
+                   // since mask-size uses calc() as an
+                   // intermediate form.
+                   /* test_length_percent_pair_clamped */ ],
     "max-height": [ test_length_transition, test_percent_transition,
                     test_length_clamped, test_percent_clamped ],
     "max-width": [ test_length_transition, test_percent_transition,
                    test_length_clamped, test_percent_clamped ],
     "min-height": [ test_length_transition, test_percent_transition,
                     test_length_clamped, test_percent_clamped ],
     "min-width": [ test_length_transition, test_percent_transition,
                    test_length_clamped, test_percent_clamped ],
@@ -286,43 +310,16 @@ var supported_properties = {
                                    test_true_currentcolor_transition ]
 };
 
 if (SpecialPowers.getBoolPref("layout.css.shape-outside.enabled")) {
   supported_properties["shape-outside"] =
     [ test_basic_shape_or_url_transition ];
 }
 
-if (SupportsMaskShorthand()) {
-  supported_properties["mask-position"] = [ test_background_position_transition,
-                                     // FIXME: We don't currently test clamping,
-                                     // since mask-position uses calc() as
-                                     // an intermediate form.
-                                     /* test_length_percent_pair_unclamped */ ];
-  supported_properties["mask-position-x"] = [ test_background_position_coord_transition,
-                                              test_length_transition,
-                                              test_percent_transition,
-                                            // FIXME: We don't currently test clamping,
-                                            // since background-position-x uses calc() as
-                                            // an intermediate form.
-                                            /* test_length_percent_pair_unclamped */ ];
-  supported_properties["mask-position-y"] = [ test_background_position_coord_transition,
-                                              test_length_transition,
-                                              test_percent_transition,
-                                            // FIXME: We don't currently test clamping,
-                                            // since background-position-y uses calc() as
-                                            // an intermediate form.
-                                            /* test_length_percent_pair_unclamped */ ];
-  supported_properties["mask-size"] = [ test_background_size_transition,
-                                     // FIXME: We don't currently test clamping,
-                                     // since mask-size uses calc() as an
-                                     // intermediate form.
-                                     /* test_length_percent_pair_clamped */ ];
-}
-
 if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) {
   supported_properties["font-variation-settings"] = [ test_font_variations_transition ];
 }
 
 var div = document.getElementById("display");
 var OMTAdiv = document.getElementById("transformTest");
 var cs = getComputedStyle(div, "");
 var OMTACs = getComputedStyle(OMTAdiv, "");