Bug 1221677 - "[css-grid] Put the 'subgrid' support behind a pref, disabled by default". r=mats

dom/locales/en-US/chrome/layout/css.properties

@@ -171,3 +171,4 @@ PEExpectedVariableNameEOF=identifier for variable name
 PEExpectedVariableName=Expected identifier for variable name but found '%1$S'.
 PEExpectedVariableFallback=Expected variable reference fallback after ','.
 PEExpectedVariableCommaOrCloseParen=Expected ',' or ')' after variable name in variable reference but found '%1$S'.
+PESubgridNotSupported=Support for the 'subgrid' keyword of CSS Grid is not enabled.

layout/base/nsLayoutUtils.cpp

@@ -131,6 +131,7 @@ using namespace mozilla::layout;
 using namespace mozilla::gfx;
 
 #define GRID_ENABLED_PREF_NAME "layout.css.grid.enabled"
+#define GRID_TEMPLATE_SUBGRID_ENABLED_PREF_NAME "layout.css.grid-template-subgrid-value.enabled"
 #define RUBY_ENABLED_PREF_NAME "layout.css.ruby.enabled"
 #define STICKY_ENABLED_PREF_NAME "layout.css.sticky.enabled"
 #define DISPLAY_CONTENTS_ENABLED_PREF_NAME "layout.css.display-contents.enabled"
@@ -730,6 +731,22 @@ nsLayoutUtils::UnsetValueEnabled()
   return sUnsetValueEnabled;
 }
 
+bool
+nsLayoutUtils::IsGridTemplateSubgridValueEnabled()
+{
+  static bool sGridTemplateSubgridValueEnabled;
+  static bool sGridTemplateSubgridValueEnabledPrefCached = false;
+
+  if (!sGridTemplateSubgridValueEnabledPrefCached) {
+    sGridTemplateSubgridValueEnabledPrefCached = true;
+    Preferences::AddBoolVarCache(&sGridTemplateSubgridValueEnabled,
+                                 GRID_TEMPLATE_SUBGRID_ENABLED_PREF_NAME,
+                                 false);
+  }
+
+  return sGridTemplateSubgridValueEnabled;
+}
+
 bool
 nsLayoutUtils::IsTextAlignTrueValueEnabled()
 {

layout/base/nsLayoutUtils.h

@@ -2308,6 +2308,12 @@ public:
    */
   static bool UnsetValueEnabled();
 
+  /**
+   * Checks whether support for the CSS grid-template-{columns,rows} 'subgrid X'
+   * value is enabled.
+   */
+  static bool IsGridTemplateSubgridValueEnabled();
+
   /**
    * Checks whether support for the CSS text-align (and -moz-text-align-last)
    * 'true' value is enabled.

layout/style/nsCSSParser.cpp

@@ -8775,6 +8775,10 @@ CSSParserImpl::ParseGridTemplateColumnsRows(nsCSSProperty aPropID)
   nsSubstring* ident = NextIdent();
   if (ident) {
     if (ident->LowerCaseEqualsLiteral("subgrid")) {
+      if (!nsLayoutUtils::IsGridTemplateSubgridValueEnabled()) {
+        REPORT_UNEXPECTED(PESubgridNotSupported);
+        return false;
+      }
       if (!ParseOptionalLineNameListAfterSubgrid(value)) {
         return false;
       }
@@ -8946,6 +8950,10 @@ CSSParserImpl::ParseGridTemplate()
   nsSubstring* ident = NextIdent();
   if (ident) {
     if (ident->LowerCaseEqualsLiteral("subgrid")) {
+      if (!nsLayoutUtils::IsGridTemplateSubgridValueEnabled()) {
+        REPORT_UNEXPECTED(PESubgridNotSupported);
+        return false;
+      }
       if (!ParseOptionalLineNameListAfterSubgrid(value)) {
         return false;
       }
@@ -9019,6 +9027,10 @@ CSSParserImpl::ParseGridTemplateAfterSlash(bool aColumnsIsTrackList)
   nsSubstring* ident = NextIdent();
   if (ident) {
     if (ident->LowerCaseEqualsLiteral("subgrid")) {
+      if (!nsLayoutUtils::IsGridTemplateSubgridValueEnabled()) {
+        REPORT_UNEXPECTED(PESubgridNotSupported);
+        return false;
+      }
       if (!ParseOptionalLineNameListAfterSubgrid(rowsValue)) {
         return false;
       }

layout/style/test/property_database.js

@@ -5703,6 +5703,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.ruby.enabled")) {
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) {
+  var isGridTemplateSubgridValueEnabled =
+    IsCSSPropertyPrefEnabled("layout.css.grid-template-subgrid-value.enabled");
+
   gCSSProperties["display"].other_values.push("grid", "inline-grid");
   gCSSProperties["grid-auto-flow"] = {
     domProp: "gridAutoFlow",
@@ -5797,15 +5800,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) {
       "[a] 2.5fr [z] Repeat(4, [a] 20px [] auto [b c]) [d]",
       "[a] 2.5fr [z] Repeat(4, [a] 20px [] auto) [d]",
       "[a] 2.5fr [z] Repeat(4, 20px [b c] auto [b c]) [d]",
-      "[a] 2.5fr [z] Repeat(4, 20px auto) [d]",
+      "[a] 2.5fr [z] Repeat(4, 20px auto) [d]"
-
-      // See https://bugzilla.mozilla.org/show_bug.cgi?id=981300
-      "[none auto subgrid min-content max-content foo] 40px",
-
-      "subgrid",
-      "subgrid [] [foo bar]",
-      "subgrid repeat(1, [])",
-      "subgrid Repeat(4, [a] [b c] [] [d])",
     ],
     invalid_values: [
       "",
@@ -5842,6 +5837,23 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) {
       "repeat(2.5, 20px)",
       "repeat(2, (foo))",
       "repeat(2, foo)",
+      "40px calc(0px + rubbish)"
+    ],
+    unbalanced_values: [
+      "(foo] 40px",
+    ]
+  };
+  if (isGridTemplateSubgridValueEnabled) {
+    gCSSProperties["grid-template-columns"].other_values.push(
+      // See https://bugzilla.mozilla.org/show_bug.cgi?id=981300
+      "[none auto subgrid min-content max-content foo] 40px",
+
+      "subgrid",
+      "subgrid [] [foo bar]",
+      "subgrid repeat(1, [])",
+      "subgrid Repeat(4, [a] [b c] [] [d])"
+    );
+    gCSSProperties["grid-template-columns"].invalid_values.push(
       "subgrid (foo) 40px",
       "subgrid (foo 40px)",
       "(foo) subgrid",
@@ -5854,13 +5866,9 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) {
       "subgrid repeat(1)",
       "subgrid repeat(1, )",
       "subgrid repeat(2, (40px))",
-      "subgrid repeat(2, foo)",
+      "subgrid repeat(2, foo)"
-      "40px calc(0px + rubbish)",
+    );
-    ],
+  }
-    unbalanced_values: [
-      "(foo] 40px",
-    ]
-  };
   gCSSProperties["grid-template-rows"] = {
     domProp: "gridTemplateRows",
     inherited: false,
@@ -5910,18 +5918,11 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) {
       "none / none",
     ],
     other_values: [
-      "subgrid",
       // <'grid-template-columns'> / <'grid-template-rows'>
       "40px / 100px",
       "[foo] 40px [bar] / [baz] 100px [fizz]",
       " none/100px",
       "40px/none",
-      "subgrid/40px 20px",
-      "subgrid [foo] [] [bar baz] / 40px 20px",
-      "40px 20px/subgrid",
-      "40px 20px/subgrid  [foo] [] repeat(3, [a] [b]) [bar baz]",
-      "subgrid/subgrid",
-      "subgrid [foo] [] [bar baz]/subgrid [foo] [] [bar baz]",
       // [ <track-list> / ]? [ <line-names>? <string> <track-size>? <line-names>? ]+
       "'fizz'",
       "[bar] 'fizz'",
@@ -5933,15 +5934,28 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) {
       "[foo] 40px / [bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b]",
     ],
     invalid_values: [
-      "subgrid []",
-      "subgrid [] / 'fizz'",
-      "subgrid / 'fizz'",
       "[foo] [bar] 40px / 100px",
       "40px / [fizz] [buzz] 100px",
       "40px / [fizz] [buzz] 'foo'",
       "none / 'foo'"
     ]
   };
+  if (isGridTemplateSubgridValueEnabled) {
+    gCSSProperties["grid-template"].other_values.push(
+      "subgrid",
+      "subgrid/40px 20px",
+      "subgrid [foo] [] [bar baz] / 40px 20px",
+      "40px 20px/subgrid",
+      "40px 20px/subgrid  [foo] [] repeat(3, [a] [b]) [bar baz]",
+      "subgrid/subgrid",
+      "subgrid [foo] [] [bar baz]/subgrid [foo] [] [bar baz]"
+    );
+    gCSSProperties["grid-template"].invalid_values.push(
+      "subgrid []",
+      "subgrid [] / 'fizz'",
+      "subgrid / 'fizz'"
+    );
+  }
 
   gCSSProperties["grid"] = {
     domProp: "grid",

layout/style/test/test_grid_container_shorthands.html

@@ -12,6 +12,9 @@
 
 <script>
 
+var isGridTemplateSubgridValueEnabled =
+    SpecialPowers.getBoolPref("layout.css.grid-template-subgrid-value.enabled");
+
 var initial_values = {
     gridTemplateAreas: "none",
     gridTemplateColumns: "none",
@@ -139,37 +142,39 @@ var grid_template_test_cases = [
     },
     {
         specified: "subgrid",
-        gridTemplateColumns: "subgrid",
+        gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
-        gridTemplateRows: "subgrid",
+        gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
     },
     {
         specified: "subgrid / subgrid",
-        gridTemplateColumns: "subgrid",
+        gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
-        gridTemplateRows: "subgrid",
+        gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
     },
     {
         specified: "subgrid / subgrid [foo]",
-        gridTemplateColumns: "subgrid",
+        gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
-        gridTemplateRows: "subgrid [foo]",
+        gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid [foo]" : "none",
     },
     {
         specified: "subgrid / subgrid [foo] repeat(3, [] [a b] [c])",
-        gridTemplateColumns: "subgrid",
+        gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
-        gridTemplateRows: "subgrid [foo] [] [a b] [c] [] [a b] [c] [] [a b] [c]",
+        gridTemplateRows: isGridTemplateSubgridValueEnabled ?
+            "subgrid [foo] [] [a b] [c] [] [a b] [c] [] [a b] [c]" : "none",
     },
     {
         // https://bugzilla.mozilla.org/show_bug.cgi?id=978478#c1
         // The number of repetitions is clamped to
         // #define GRID_TEMPLATE_MAX_REPETITIONS 10000
         specified: "subgrid / subgrid [foo] repeat(999999999, [a])",
-        gridTemplateColumns: "subgrid",
+        gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
         // Array(n + 1).join(s) is a hack for the non-standard s.repeat(n)
-        gridTemplateRows: "subgrid [foo]" + Array(10000 + 1).join(" [a]"),
+        gridTemplateRows: isGridTemplateSubgridValueEnabled ?
+            "subgrid [foo]" + Array(10000 + 1).join(" [a]") : "none",
     },
     {
         specified: "subgrid [] [foo]/ subgrid [bar",
-        gridTemplateColumns: "subgrid [] [foo]",
+        gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid [] [foo]" : "none",
-        gridTemplateRows: "subgrid [bar]",
+        gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid [bar]" : "none",
     },
 ];
 

layout/style/test/test_grid_shorthand_serialization.html

@@ -12,6 +12,9 @@
 
 <script>
 
+var isGridTemplateSubgridValueEnabled =
+    SpecialPowers.getBoolPref("layout.css.grid-template-subgrid-value.enabled");
+
 var initial_values = {
     gridTemplateAreas: "none",
     gridTemplateColumns: "none",
@@ -37,7 +40,7 @@ var grid_template_test_cases = [
     {
         gridTemplateColumns: "40px",
         gridTemplateRows: "subgrid",
-        shorthand: "40px / subgrid",
+        shorthand: isGridTemplateSubgridValueEnabled ? "40px / subgrid" : "",
     },
     {
         gridTemplateColumns: "[foo] 40px [bar]",

modules/libpref/init/all.js

@@ -2382,6 +2382,9 @@ pref("layout.css.grid.enabled", false);
 pref("layout.css.grid.enabled", true);
 #endif
 
+// Is support for CSS "grid-template-{columns,rows}: subgrid X" enabled?
+pref("layout.css.grid-template-subgrid-value.enabled", false);
+
 // Is support for CSS contain enabled?
 pref("layout.css.contain.enabled", false);