Bug 1547939 - Add a pref for a simpler -moz- gradient parsing. r=dholbert
authorEmilio Cobos Álvarez <emilio@crisal.io>
Tue, 30 Apr 2019 19:48:27 +0000
changeset 530830 a484a2625d18c038723fad2c4032f7859fc51bc3
parent 530829 bd1d3ebde97bf8e180f25adf954907708830955a
child 530831 cb867ce4e9ce3b40f72bff43df65ac09cffc6b22
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1547939
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1547939 - Add a pref for a simpler -moz- gradient parsing. r=dholbert This won't reintroduce any of the regressions that were triggered by our previous attempts to turn off -moz prefixed gradients, and lets us massively simplify the gradient code, if it sticks. Differential Revision: https://phabricator.services.mozilla.com/D29346
layout/reftests/bugs/1451874-ref.html
layout/reftests/bugs/1451874.html
layout/reftests/bugs/reftest.list
layout/style/test/property_database.js
modules/libpref/init/StaticPrefList.h
servo/components/style/values/specified/image.rs
deleted file mode 100644
--- a/layout/reftests/bugs/1451874-ref.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!doctype html>
-<style>
-  div {
-    width: 100px;
-    height: 100px;
-    background: green;
-  }
-</style>
-<p>Should see a green box below</p>
-<div></div>
deleted file mode 100644
--- a/layout/reftests/bugs/1451874.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<style>
-  div {
-    width: 100px;
-    height: 100px;
-    background: green;
-    background-image: -moz-linear-gradient(top,red,pink);
-  }
-</style>
-<p>Should see a green box below</p>
-<div></div>
--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@@ -2084,17 +2084,16 @@ test-pref(font.size.systemFontScale,200)
 == 1424680.html 1424680-ref.html
 == 1424798-1.html 1424798-ref.html
 fuzzy-if(!webrender,0-74,0-2234) == 1425243-1.html 1425243-1-ref.html
 fuzzy-if(Android,0-66,0-574) fuzzy-if(d2d,0-89,0-777) fuzzy-if(!Android&&!d2d,0-1,0-31341) fuzzy-if(webrender&&winWidget,1-1,31320-31320) == 1425243-2.html 1425243-2-ref.html
 == 1430869.html 1430869-ref.html
 == 1432541.html 1432541-ref.html
 pref(layout.css.moz-document.url-prefix-hack.enabled,true) == 1446470.html 1035091-ref.html
 pref(layout.css.moz-document.url-prefix-hack.enabled,false) == 1446470-2.html 1035091-ref.html
-test-pref(layout.css.prefixes.gradients,false) == 1451874.html 1451874-ref.html
 == 1456111-1.html about:blank
 test-pref(layout.css.contain.enabled,false) == 1466008.html 1466008-ref.html
 fuzzy(0-1,0-625) == 1466638-1.html 1466638-1-ref.html
 == bug1472465-1.html bug1472465-1-ref.html
 == 1475971-1.html 1475971-1-ref.html
 == 1483649-1.xul 1483649-1-ref.xul
 test-pref(layout.css.contain.enabled,true) == 1483946.html 1483946-ref.html
 test-pref(layout.css.visited_links_enabled,false) == 1488155.html 1488155-ref.html
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -355,16 +355,20 @@ var invalidGradientAndElementValues = [
   "linear-gradient(red 0% 50% 100%)",
   "linear-gradient(red 0% 50% 75%, blue 75%)",
   "linear-gradient(to bottom, red 0% 50% 100%)",
   "linear-gradient(to bottom, red 0% 50% 75%, blue 75%)",
   "radial-gradient(red 0% 50% 100%)",
   "radial-gradient(red 0% 50% 75%, blue 75%)",
   "radial-gradient(center, red 0% 50% 100%)",
   "radial-gradient(center, red 0% 50% 75%, blue 75%)",
+
+  "-moz-linear-gradient(unset, 10px 10px, from(blue))",
+  "-moz-linear-gradient(unset, 10px 10px, blue 0)",
+  "-moz-repeating-linear-gradient(unset, 10px 10px, blue 0)",
 ];
 var unbalancedGradientAndElementValues = [
   "-moz-element(#a()",
 ];
 
 var basicShapeSVGBoxValues = [
   "fill-box",
   "stroke-box",
@@ -844,71 +848,50 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "-webkit-radial-gradient(30deg, red, blue)",
     // * initial angle/position combo
     "-webkit-radial-gradient(top 30deg, red, blue)",
     "-webkit-radial-gradient(left top 30deg, red, blue)",
     "-webkit-radial-gradient(10px 20px 30deg, red, blue)"
   );
 }
 
-if (IsCSSPropertyPrefEnabled("layout.css.prefixes.gradients")) {
+if (/* mozGradientsEnabled */ true) { // Maybe one day :(
   // Extend gradient lists with valid/invalid moz-prefixed expressions:
   validGradientAndElementValues.push(
     "-moz-linear-gradient(red, blue)",
     "-moz-linear-gradient(red, yellow, blue)",
     "-moz-linear-gradient(red 1px, yellow 20%, blue 24em, green)",
     "-moz-linear-gradient(red, yellow, green, blue 50%)",
     "-moz-linear-gradient(red -50%, yellow -25%, green, blue)",
     "-moz-linear-gradient(red -99px, yellow, green, blue 120%)",
     "-moz-linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
     "-moz-linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
 
     "-moz-linear-gradient(top, red, blue)",
-    "-moz-linear-gradient(center 0%, red, blue)",
-    "-moz-linear-gradient(50% top, red, blue)",
-    "-moz-linear-gradient(50% 0%, red, blue)",
 
     "-moz-linear-gradient(to top, red, blue)",
     "-moz-linear-gradient(to bottom, red, blue)",
     "-moz-linear-gradient(to left, red, blue)",
     "-moz-linear-gradient(to right, red, blue)",
     "-moz-linear-gradient(to top left, red, blue)",
     "-moz-linear-gradient(to top right, red, blue)",
     "-moz-linear-gradient(to bottom left, red, blue)",
     "-moz-linear-gradient(to bottom right, red, blue)",
     "-moz-linear-gradient(to left top, red, blue)",
     "-moz-linear-gradient(to left bottom, red, blue)",
     "-moz-linear-gradient(to right top, red, blue)",
     "-moz-linear-gradient(to right bottom, red, blue)",
 
     "-moz-linear-gradient(top left, red, blue)",
-    "-moz-linear-gradient(0 0, red, blue)",
-    "-moz-linear-gradient(20% bottom, red, blue)",
-    "-moz-linear-gradient(center 20%, red, blue)",
-    "-moz-linear-gradient(left 35px, red, blue)",
-    "-moz-linear-gradient(10% 10em, red, blue)",
-    "-moz-linear-gradient(44px top, red, blue)",
     "-moz-linear-gradient(left, red, blue)",
     "-moz-linear-gradient(bottom, red, blue)",
 
-    "-moz-linear-gradient(0px, red, blue)",
     "-moz-linear-gradient(0, red, blue)",
-    "-moz-linear-gradient(top left 45deg, red, blue)",
-    "-moz-linear-gradient(20% bottom -300deg, red, blue)",
-    "-moz-linear-gradient(center 20% 1.95929rad, red, blue)",
-    "-moz-linear-gradient(left 35px 30grad, red, blue)",
-    "-moz-linear-gradient(left 35px 0.1turn, red, blue)",
-    "-moz-linear-gradient(10% 10em 99999deg, red, blue)",
-    "-moz-linear-gradient(44px top -33deg, red, blue)",
 
     "-moz-linear-gradient(-33deg, red, blue)",
-    "-moz-linear-gradient(30grad left 35px, red, blue)",
-    "-moz-linear-gradient(10deg 20px, red, blue)",
-    "-moz-linear-gradient(1turn 20px, red, blue)",
-    "-moz-linear-gradient(.414rad bottom, red, blue)",
 
     "-moz-linear-gradient(blue calc(0px) ,green calc(25%) ,red calc(40px) ,blue calc(60px) , yellow  calc(100px))",
     "-moz-linear-gradient(-33deg, blue calc(-25%) ,red 40px)",
     "-moz-linear-gradient(10deg, blue calc(100px + -25%),red calc(40px))",
     "-moz-linear-gradient(10deg, blue calc(-25px),red calc(100%))",
     "-moz-linear-gradient(.414rad, blue calc(100px + -25px) ,green calc(100px + -25px) ,red calc(100px + -25%) ,blue calc(-25px) , yellow  calc(-25px))",
     "-moz-linear-gradient(1turn, blue calc(-25%) ,green calc(25px) ,red calc(25%),blue calc(0px),white 50px, yellow  calc(-25px))",
 
@@ -922,53 +905,32 @@ if (IsCSSPropertyPrefEnabled("layout.css
 
     "-moz-radial-gradient(top left, red, blue)",
     "-moz-radial-gradient(20% bottom, red, blue)",
     "-moz-radial-gradient(center 20%, red, blue)",
     "-moz-radial-gradient(left 35px, red, blue)",
     "-moz-radial-gradient(10% 10em, red, blue)",
     "-moz-radial-gradient(44px top, red, blue)",
 
-    "-moz-radial-gradient(top left 45deg, red, blue)",
     "-moz-radial-gradient(0 0, red, blue)",
-    "-moz-radial-gradient(20% bottom -300deg, red, blue)",
-    "-moz-radial-gradient(center 20% 1.95929rad, red, blue)",
-    "-moz-radial-gradient(left 35px 30grad, red, blue)",
-    "-moz-radial-gradient(10% 10em 99999deg, red, blue)",
-    "-moz-radial-gradient(44px top -33deg, red, blue)",
     "-moz-radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
 
-    "-moz-radial-gradient(-33deg, red, blue)",
-    "-moz-radial-gradient(30grad left 35px, red, blue)",
-    "-moz-radial-gradient(10deg 20px, red, blue)",
-    "-moz-radial-gradient(.414rad bottom, red, blue)",
-
     "-moz-radial-gradient(cover, red, blue)",
     "-moz-radial-gradient(cover circle, red, blue)",
     "-moz-radial-gradient(contain, red, blue)",
     "-moz-radial-gradient(contain ellipse, red, blue)",
     "-moz-radial-gradient(circle, red, blue)",
     "-moz-radial-gradient(ellipse closest-corner, red, blue)",
     "-moz-radial-gradient(farthest-side circle, red, blue)",
 
     "-moz-radial-gradient(top left, cover, red, blue)",
     "-moz-radial-gradient(15% 20%, circle, red, blue)",
     "-moz-radial-gradient(45px, ellipse closest-corner, red, blue)",
     "-moz-radial-gradient(45px, farthest-side circle, red, blue)",
 
-    "-moz-radial-gradient(99deg, cover, red, blue)",
-    "-moz-radial-gradient(-1.2345rad, circle, red, blue)",
-    "-moz-radial-gradient(399grad, ellipse closest-corner, red, blue)",
-    "-moz-radial-gradient(399grad, farthest-side circle, red, blue)",
-
-    "-moz-radial-gradient(top left 99deg, cover, red, blue)",
-    "-moz-radial-gradient(15% 20% -1.2345rad, circle, red, blue)",
-    "-moz-radial-gradient(45px 399grad, ellipse closest-corner, red, blue)",
-    "-moz-radial-gradient(45px 399grad, farthest-side circle, red, blue)",
-
     "-moz-repeating-linear-gradient(red, blue)",
     "-moz-repeating-linear-gradient(red, yellow, blue)",
     "-moz-repeating-linear-gradient(red 1px, yellow 20%, blue 24em, green)",
     "-moz-repeating-linear-gradient(red, yellow, green, blue 50%)",
     "-moz-repeating-linear-gradient(red -50%, yellow -25%, green, blue)",
     "-moz-repeating-linear-gradient(red -99px, yellow, green, blue 120%)",
     "-moz-repeating-linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
     "-moz-repeating-linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
@@ -982,34 +944,16 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "-moz-repeating-linear-gradient(to bottom left, red, blue)",
     "-moz-repeating-linear-gradient(to bottom right, red, blue)",
     "-moz-repeating-linear-gradient(to left top, red, blue)",
     "-moz-repeating-linear-gradient(to left bottom, red, blue)",
     "-moz-repeating-linear-gradient(to right top, red, blue)",
     "-moz-repeating-linear-gradient(to right bottom, red, blue)",
 
     "-moz-repeating-linear-gradient(top left, red, blue)",
-    "-moz-repeating-linear-gradient(0 0, red, blue)",
-    "-moz-repeating-linear-gradient(20% bottom, red, blue)",
-    "-moz-repeating-linear-gradient(center 20%, red, blue)",
-    "-moz-repeating-linear-gradient(left 35px, red, blue)",
-    "-moz-repeating-linear-gradient(10% 10em, red, blue)",
-    "-moz-repeating-linear-gradient(44px top, red, blue)",
-
-    "-moz-repeating-linear-gradient(top left 45deg, red, blue)",
-    "-moz-repeating-linear-gradient(20% bottom -300deg, red, blue)",
-    "-moz-repeating-linear-gradient(center 20% 1.95929rad, red, blue)",
-    "-moz-repeating-linear-gradient(left 35px 30grad, red, blue)",
-    "-moz-repeating-linear-gradient(10% 10em 99999deg, red, blue)",
-    "-moz-repeating-linear-gradient(44px top -33deg, red, blue)",
-
-    "-moz-repeating-linear-gradient(-33deg, red, blue)",
-    "-moz-repeating-linear-gradient(30grad left 35px, red, blue)",
-    "-moz-repeating-linear-gradient(10deg 20px, red, blue)",
-    "-moz-repeating-linear-gradient(.414rad bottom, red, blue)",
 
     "-moz-repeating-radial-gradient(red, blue)",
     "-moz-repeating-radial-gradient(red, yellow, blue)",
     "-moz-repeating-radial-gradient(red 1px, yellow 20%, blue 24em, green)",
     "-moz-repeating-radial-gradient(red, yellow, green, blue 50%)",
     "-moz-repeating-radial-gradient(red -50%, yellow -25%, green, blue)",
     "-moz-repeating-radial-gradient(red -99px, yellow, green, blue 120%)",
     "-moz-repeating-radial-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
@@ -1027,16 +971,82 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "-moz-radial-gradient(left calc(-25%), red, blue)",
     "-moz-radial-gradient(calc(-25px) top, red, blue)",
     "-moz-radial-gradient(left calc(-25px), red, blue)",
     "-moz-radial-gradient(calc(100px + -25%) top, red, blue)",
     "-moz-radial-gradient(left calc(100px + -25%), red, blue)",
     "-moz-radial-gradient(calc(100px + -25px) top, red, blue)",
     "-moz-radial-gradient(left calc(100px + -25px), red, blue)",
   );
+
+  (IsCSSPropertyPrefEnabled("layout.css.simple-moz-gradient.enabled")
+    ? validGradientAndElementValues
+    : validGradientAndElementValues).push(
+      "-moz-radial-gradient(40%, -100px -10%, red, blue)",
+    );
+
+  (IsCSSPropertyPrefEnabled("layout.css.simple-moz-gradient.enabled")
+    ? invalidGradientAndElementValues
+    : validGradientAndElementValues).push(
+      "-moz-linear-gradient(center 0%, red, blue)",
+      "-moz-linear-gradient(50% top, red, blue)",
+      "-moz-linear-gradient(50% 0%, red, blue)",
+      "-moz-linear-gradient(0 0, red, blue)",
+      "-moz-linear-gradient(20% bottom, red, blue)",
+      "-moz-linear-gradient(center 20%, red, blue)",
+      "-moz-linear-gradient(left 35px, red, blue)",
+      "-moz-linear-gradient(10% 10em, red, blue)",
+      "-moz-linear-gradient(44px top, red, blue)",
+      "-moz-linear-gradient(0px, red, blue)",
+      "-moz-linear-gradient(top left 45deg, red, blue)",
+      "-moz-linear-gradient(20% bottom -300deg, red, blue)",
+      "-moz-linear-gradient(center 20% 1.95929rad, red, blue)",
+      "-moz-linear-gradient(left 35px 30grad, red, blue)",
+      "-moz-linear-gradient(left 35px 0.1turn, red, blue)",
+      "-moz-linear-gradient(10% 10em 99999deg, red, blue)",
+      "-moz-linear-gradient(44px top -33deg, red, blue)",
+      "-moz-linear-gradient(30grad left 35px, red, blue)",
+      "-moz-linear-gradient(10deg 20px, red, blue)",
+      "-moz-linear-gradient(1turn 20px, red, blue)",
+      "-moz-linear-gradient(.414rad bottom, red, blue)",
+      "-moz-radial-gradient(top left 45deg, red, blue)",
+      "-moz-radial-gradient(20% bottom -300deg, red, blue)",
+      "-moz-radial-gradient(center 20% 1.95929rad, red, blue)",
+      "-moz-radial-gradient(left 35px 30grad, red, blue)",
+      "-moz-radial-gradient(10% 10em 99999deg, red, blue)",
+      "-moz-radial-gradient(44px top -33deg, red, blue)",
+      "-moz-radial-gradient(-33deg, red, blue)",
+      "-moz-radial-gradient(30grad left 35px, red, blue)",
+      "-moz-radial-gradient(10deg 20px, red, blue)",
+      "-moz-radial-gradient(.414rad bottom, red, blue)",
+      "-moz-radial-gradient(99deg, cover, red, blue)",
+      "-moz-radial-gradient(-1.2345rad, circle, red, blue)",
+      "-moz-radial-gradient(399grad, ellipse closest-corner, red, blue)",
+      "-moz-radial-gradient(399grad, farthest-side circle, red, blue)",
+      "-moz-radial-gradient(top left 99deg, cover, red, blue)",
+      "-moz-radial-gradient(15% 20% -1.2345rad, circle, red, blue)",
+      "-moz-radial-gradient(45px 399grad, ellipse closest-corner, red, blue)",
+      "-moz-radial-gradient(45px 399grad, farthest-side circle, red, blue)",
+      "-moz-repeating-linear-gradient(0 0, red, blue)",
+      "-moz-repeating-linear-gradient(20% bottom, red, blue)",
+      "-moz-repeating-linear-gradient(center 20%, red, blue)",
+      "-moz-repeating-linear-gradient(left 35px, red, blue)",
+      "-moz-repeating-linear-gradient(10% 10em, red, blue)",
+      "-moz-repeating-linear-gradient(44px top, red, blue)",
+      "-moz-repeating-linear-gradient(top left 45deg, red, blue)",
+      "-moz-repeating-linear-gradient(20% bottom -300deg, red, blue)",
+      "-moz-repeating-linear-gradient(center 20% 1.95929rad, red, blue)",
+      "-moz-repeating-linear-gradient(left 35px 30grad, red, blue)",
+      "-moz-repeating-linear-gradient(10% 10em 99999deg, red, blue)",
+      "-moz-repeating-linear-gradient(44px top -33deg, red, blue)",
+      "-moz-repeating-linear-gradient(30grad left 35px, red, blue)",
+      "-moz-repeating-linear-gradient(10deg 20px, red, blue)",
+      "-moz-repeating-linear-gradient(.414rad bottom, red, blue)",
+    );
+
   invalidGradientAndElementValues.push(
     /* no quirks mode colors */
     "-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",
     /* Unitless 0 is invalid as an <angle> */
     "-moz-linear-gradient(top left 0, red, blue)",
@@ -1082,17 +1092,16 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "-moz-radial-gradient(contain, ellipse, red, blue)",
     "-moz-radial-gradient(10deg contain, red, blue)",
     "-moz-radial-gradient(10deg, contain,, red, blue)",
     "-moz-radial-gradient(contain contain, red, blue)",
     "-moz-radial-gradient(ellipse circle, red, blue)",
     "-moz-radial-gradient(to top left, red, blue)",
     "-moz-radial-gradient(center, 10%, red, blue)",
     "-moz-radial-gradient(5rad, 20px, red, blue)",
-    "-moz-radial-gradient(40%, -100px -10%, red, blue)",
 
     "-moz-radial-gradient(at top left to cover, red, blue)",
     "-moz-radial-gradient(at 15% 20% circle, red, blue)",
 
     "-moz-radial-gradient(to cover, red, blue)",
     "-moz-radial-gradient(to contain, red, blue)",
     "-moz-radial-gradient(to closest-side circle, red, blue)",
     "-moz-radial-gradient(to farthest-corner ellipse, red, blue)",
@@ -8490,50 +8499,30 @@ if (IsCSSPropertyPrefEnabled("layout.css
     inherited: false,
     type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
     logical: true,
     alias_for: "inset-inline-end",
     subproperties: [ "inset-inline-end" ],
   };
 }
 
-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",
-    "-moz-repeating-linear-gradient(10px 10px -45deg, red, blue) repeat",
-    "url(404.png), -moz-linear-gradient(20px 20px -45deg, blue, green), -moz-element(#a) black",
-  );
-  gCSSProperties["background"].invalid_values.push(
-    /* no quirks mode colors */
-    "-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",
-  );
-  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",
-  );
+{
+  const patterns = {
+    background: ["{} scroll no-repeat", "{} repeat", "url(404.png), {}, -moz-element(#a) black"],
+    mask: ["{} add no-repeat", "{} repeat", "url(404.png), {}, -moz-element(#a) alpha"],
+  };
+
+  for (const prop of ["background", "mask"]) {
+    let i = 0;
+    const p = patterns[prop];
+    for (const v of invalidGradientAndElementValues)
+      gCSSProperties[prop].invalid_values.push(p[i++ % p.length].replace("{}", v));
+    for (const v of validGradientAndElementValues)
+      gCSSProperties[prop].other_values.push(p[i++ % p.length].replace("{}", v));
+  }
 }
 
 gCSSProperties["display"].other_values.push("flow-root");
 
 if (IsCSSPropertyPrefEnabled("layout.css.column-span.enabled")) {
   gCSSProperties["column-span"] = {
     domProp: "columnSpan",
     inherited: false,
@@ -8682,24 +8671,16 @@ if (false) {
     inherited: true,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "transparent" ],
     other_values: [ "green", "#fc3" ],
     invalid_values: [ "000000", "ff00ff" ]
   };
 }
 
-if (IsCSSPropertyPrefEnabled("layout.css.prefixes.gradients")) {
-  gCSSProperties["background-image"].invalid_values.push(
-    "-moz-linear-gradient(unset, 10px 10px, from(blue))",
-    "-moz-linear-gradient(unset, 10px 10px, blue 0)",
-    "-moz-repeating-linear-gradient(unset, 10px 10px, blue 0)",
-  );
-}
-
 if (IsCSSPropertyPrefEnabled("layout.css.scrollbar-color.enabled")) {
   gCSSProperties["scrollbar-color"] = {
     domProp: "scrollbarColor",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "auto" ],
     other_values: [ "red green", "blue yellow", "#ffff00 white" ],
     invalid_values: [ "ffff00 red", "auto red", "red auto", "green" ]
--- a/modules/libpref/init/StaticPrefList.h
+++ b/modules/libpref/init/StaticPrefList.h
@@ -936,20 +936,21 @@ VARCACHE_PREF(
 // this pref has no effect if the master 'layout.css.prefixes.webkit' pref is
 // set to false.)
 VARCACHE_PREF(
   "layout.css.prefixes.device-pixel-ratio-webkit",
    layout_css_prefixes_device_pixel_ratio_webkit,
   bool, true
 )
 
-// Are -moz-prefixed gradient functions enabled?
+// Are -moz-prefixed gradients restricted to a simpler syntax? (with an optional
+// <angle> or <position>, but not both)?
 VARCACHE_PREF(
-  "layout.css.prefixes.gradients",
-   layout_css_prefixes_gradients,
+  "layout.css.simple-moz-gradient.enabled",
+   layout_css_simple_moz_gradient_enabled,
   bool, true
 )
 
 // Whether the offset-* logical property aliases are enabled.
 VARCACHE_PREF(
   "layout.css.offset-logical-properties.enabled",
    layout_css_offset_logical_properties_enabled,
   bool, false
--- a/servo/components/style/values/specified/image.rs
+++ b/servo/components/style/values/specified/image.rs
@@ -3,16 +3,18 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 //! CSS handling for the specified value of
 //! [`image`][image]s
 //!
 //! [image]: https://drafts.csswg.org/css-images/#image-values
 
 use crate::custom_properties::SpecifiedValue;
+#[cfg(feature = "gecko")]
+use crate::gecko_bindings::structs;
 use crate::parser::{Parse, ParserContext};
 #[cfg(feature = "gecko")]
 use crate::values::computed::{Context, Position as ComputedPosition, ToComputedValue};
 use crate::values::generics::image::PaintWorklet;
 use crate::values::generics::image::{self as generic, Circle, CompatMode, Ellipse, ShapeExtent};
 use crate::values::generics::position::Position as GenericPosition;
 use crate::values::specified::position::{LegacyPosition, Position, PositionComponent, Side, X, Y};
 use crate::values::specified::url::SpecifiedImageUrl;
@@ -261,26 +263,16 @@ impl Parse for Gradient {
 
         let (shape, repeating, mut compat_mode) = match result {
             Some(result) => result,
             None => {
                 return Err(input.new_custom_error(StyleParseErrorKind::UnexpectedFunction(func)));
             },
         };
 
-        #[cfg(feature = "gecko")]
-        {
-            use crate::gecko_bindings::structs;
-            if compat_mode == CompatMode::Moz &&
-                !unsafe { structs::StaticPrefs_sVarCache_layout_css_prefixes_gradients }
-            {
-                return Err(input.new_custom_error(StyleParseErrorKind::UnexpectedFunction(func)));
-            }
-        }
-
         let (kind, items) = input.parse_nested_block(|i| {
             let shape = match shape {
                 Shape::Linear => GradientKind::parse_linear(context, i, &mut compat_mode)?,
                 Shape::Radial => GradientKind::parse_radial(context, i, &mut compat_mode)?,
             };
             let items = GradientItem::parse_comma_separated(context, i)?;
             Ok((shape, items))
         })?;
@@ -543,16 +535,26 @@ impl Gradient {
             kind: kind,
             items: items,
             repeating: false,
             compat_mode: CompatMode::Modern,
         })
     }
 }
 
+#[inline]
+fn simple_moz_gradient() -> bool {
+    #[cfg(feature = "gecko")]
+    unsafe {
+        return structs::StaticPrefs_sVarCache_layout_css_simple_moz_gradient_enabled;
+    }
+    #[cfg(not(feature = "gecko"))]
+    return false;
+}
+
 impl GradientKind {
     /// Parses a linear gradient.
     /// CompatMode can change during `-moz-` prefixed gradient parsing if it come across a `to` keyword.
     fn parse_linear<'i, 't>(
         context: &ParserContext,
         input: &mut Parser<'i, 't>,
         compat_mode: &mut CompatMode,
     ) -> Result<Self, ParseError<'i>> {
@@ -578,65 +580,65 @@ impl GradientKind {
             CompatMode::Modern => {
                 let shape = input.try(|i| EndingShape::parse(context, i, *compat_mode));
                 let position = input.try(|i| {
                     i.expect_ident_matching("at")?;
                     Position::parse(context, i)
                 });
                 (shape, position.ok(), None, None)
             },
-            CompatMode::WebKit => {
-                let position = input.try(|i| Position::parse(context, i));
-                let shape = input.try(|i| {
-                    if position.is_ok() {
-                        i.expect_comma()?;
-                    }
-                    EndingShape::parse(context, i, *compat_mode)
-                });
-                (shape, position.ok(), None, None)
-            },
             // The syntax of `-moz-` prefixed radial gradient is:
             // -moz-radial-gradient(
             //   [ [ <position> || <angle> ]?  [ ellipse | [ <length> | <percentage> ]{2} ] , |
             //     [ <position> || <angle> ]?  [ [ circle | ellipse ] | <extent-keyword> ] , |
             //   ]?
             //   <color-stop> [ , <color-stop> ]+
             // )
             // where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side |
             //                          cover | contain
             // and <color-stop>     = <color> [ <percentage> | <length> ]?
-            CompatMode::Moz => {
+            CompatMode::Moz if !simple_moz_gradient() => {
                 let mut position = input.try(|i| LegacyPosition::parse(context, i));
                 let angle = input.try(|i| Angle::parse(context, i)).ok();
                 if position.is_err() {
                     position = input.try(|i| LegacyPosition::parse(context, i));
                 }
 
                 let shape = input.try(|i| {
                     if position.is_ok() || angle.is_some() {
                         i.expect_comma()?;
                     }
                     EndingShape::parse(context, i, *compat_mode)
                 });
 
                 (shape, None, angle, position.ok())
             },
+            _ => {
+                let position = input.try(|i| Position::parse(context, i));
+                let shape = input.try(|i| {
+                    if position.is_ok() {
+                        i.expect_comma()?;
+                    }
+                    EndingShape::parse(context, i, *compat_mode)
+                });
+                (shape, position.ok(), None, None)
+            },
         };
 
         if shape.is_ok() || position.is_some() || angle.is_some() || moz_position.is_some() {
             input.expect_comma()?;
         }
 
         let shape = shape.unwrap_or({
             generic::EndingShape::Ellipse(Ellipse::Extent(ShapeExtent::FarthestCorner))
         });
 
         #[cfg(feature = "gecko")]
         {
-            if *compat_mode == CompatMode::Moz {
+            if *compat_mode == CompatMode::Moz && !simple_moz_gradient() {
                 // If this form can be represented in Modern mode, then convert the compat_mode to Modern.
                 if angle.is_none() {
                     *compat_mode = CompatMode::Modern;
                 }
                 let position = moz_position.unwrap_or(LegacyPosition::center());
                 return Ok(generic::GradientKind::Radial(
                     shape,
                     GradientPosition::Legacy(position),
@@ -746,17 +748,17 @@ impl generic::LineDirection for LineDire
 }
 
 impl LineDirection {
     fn parse<'i, 't>(
         context: &ParserContext,
         input: &mut Parser<'i, 't>,
         compat_mode: &mut CompatMode,
     ) -> Result<Self, ParseError<'i>> {
-        let mut _angle = if *compat_mode == CompatMode::Moz {
+        let mut _angle = if *compat_mode == CompatMode::Moz && !simple_moz_gradient() {
             input.try(|i| Angle::parse(context, i)).ok()
         } else {
             // Gradients allow unitless zero angles as an exception, see:
             // https://github.com/w3c/csswg-drafts/issues/1162
             if let Ok(angle) = input.try(|i| Angle::parse_with_unitless(context, i)) {
                 return Ok(LineDirection::Angle(angle));
             }
             None
@@ -779,17 +781,17 @@ impl LineDirection {
                     );
                 },
                 _ => {},
             }
 
             #[cfg(feature = "gecko")]
             {
                 // `-moz-` prefixed linear gradient can be both Angle and Position.
-                if *compat_mode == CompatMode::Moz {
+                if *compat_mode == CompatMode::Moz && !simple_moz_gradient(){
                     let position = i.try(|i| LegacyPosition::parse(context, i)).ok();
                     if _angle.is_none() {
                         _angle = i.try(|i| Angle::parse(context, i)).ok();
                     };
 
                     if _angle.is_none() && position.is_none() {
                         return Err(i.new_custom_error(StyleParseErrorKind::UnspecifiedError));
                     }
@@ -869,17 +871,17 @@ impl EndingShape {
                 }
             }
             return Ok(generic::EndingShape::Ellipse(Ellipse::Extent(
                 ShapeExtent::FarthestCorner,
             )));
         }
         // -moz- prefixed radial gradient doesn't allow EndingShape's Length or LengthPercentage
         // to come before shape keyword. Otherwise it conflicts with <position>.
-        if compat_mode != CompatMode::Moz {
+        if compat_mode != CompatMode::Moz || simple_moz_gradient() {
             if let Ok(length) = input.try(|i| Length::parse(context, i)) {
                 if let Ok(y) = input.try(|i| LengthPercentage::parse(context, i)) {
                     if compat_mode == CompatMode::Modern {
                         let _ = input.try(|i| i.expect_ident_matching("ellipse"));
                     }
                     return Ok(generic::EndingShape::Ellipse(Ellipse::Radii(
                         length.into(),
                         y,