Bug 695222 - Implement column-fill part of CSS3 multicol spec. r=roc,dbaron

2011-12-19 23:11:54 -06:00 · 2011-12-19 23:11:54 -06:00 · c1e845eb8b
--- a/dom/interfaces/css/nsIDOMCSS2Properties.idl
+++ b/dom/interfaces/css/nsIDOMCSS2Properties.idl
@ -51,7 +51,7 @@
 * http://www.w3.org/TR/DOM-Level-2-Style
 */

-[builtinclass, scriptable, uuid(0a6fc4c6-a62a-4f52-9ab6-3d398b958843)]
+[builtinclass, scriptable, uuid(b4afb8f4-d9ab-44d9-9d0c-f765c47d57c2)]
 interface nsIDOMCSS2Properties : nsISupports
 {
           attribute DOMString        background;
@ -532,6 +532,9 @@ interface nsIDOMCSS2Properties : nsISupports
           attribute DOMString        MozColumnWidth;
                                        // raises(DOMException) on setting

+           attribute DOMString        MozColumnFill;
+                                        // raises(DOMException) on setting
+
           attribute DOMString        MozColumnGap;
                                        // raises(DOMException) on setting

--- a/layout/base/nsStyleConsts.h
+++ b/layout/base/nsStyleConsts.h
@ -789,6 +789,9 @@ static inline mozilla::css::Side operator++(mozilla::css::Side& side, int) {
 #define NS_STYLE_COLUMN_COUNT_AUTO              0
 #define NS_STYLE_COLUMN_COUNT_UNLIMITED         (-1)

+#define NS_STYLE_COLUMN_FILL_AUTO               0
+#define NS_STYLE_COLUMN_FILL_BALANCE            1
+
 // See nsStyleUIReset
 #define NS_STYLE_IME_MODE_AUTO                  0
 #define NS_STYLE_IME_MODE_NORMAL                1
--- a/layout/generic/crashtests/399412-1.html
+++ b/layout/generic/crashtests/399412-1.html
@ -17,6 +17,7 @@ body {
  width: 300px;
  -moz-column-width: 50px;
  -moz-column-gap: 1px;
+  -moz-column-fill: auto;
 }
 </style>

--- a/layout/generic/crashtests/673770.html
+++ b/layout/generic/crashtests/673770.html
@ -13,7 +13,7 @@
      }
    </script>
  </head>
-  <body style="-moz-column-width: 1px;" onload="boom();">
+  <body style="-moz-column-width: 1px; -moz-column-fill: auto;" onload="boom();">
    <hr size="100" color="blue"><div style="position: absolute;"></div><div id="x" style="height: 5px;"></div>
  </body>
 </html>
--- a/layout/generic/nsColumnSetFrame.cpp
+++ b/layout/generic/nsColumnSetFrame.cpp
@ -416,18 +416,22 @@ nsColumnSetFrame::ChooseColumnStrategy(const nsHTMLReflowState& aReflowState)
    expectedWidthLeftOver = extraSpace - (extraToColumns*numColumns);
  }

-  // NOTE that the non-balancing behavior for non-auto computed height
-  // is not in the CSS3 columns draft as of 18 January 2001
-  if (aReflowState.ComputedHeight() == NS_INTRINSICSIZE) {
+  // If column-fill is set to 'balance', then we want to balance the columns.
+  if (colStyle->mColumnFill == NS_STYLE_COLUMN_FILL_BALANCE) {
    // Balancing!
+
    if (numColumns <= 0) {
      // Hmm, auto column count, column width or available width is unknown,
      // and balancing is required. Let's just use one column then.
      numColumns = 1;
    }
-    colHeight = NS_MIN(mLastBalanceHeight, GetAvailableContentHeight(aReflowState));
+
+    colHeight = NS_MIN(mLastBalanceHeight,
+                       GetAvailableContentHeight(aReflowState));
  } else {
+    // This is the case when the column-fill property is set to 'auto'.
    // No balancing, so don't limit the column count
+
    numColumns = PR_INT32_MAX;
  }

--- a/layout/reftests/bugs/368020-1-ref.html
+++ b/layout/reftests/bugs/368020-1-ref.html
@ -5,7 +5,7 @@
 </head>
 <body>

-<div style="-moz-column-count: 2; column-count: 2; height: 3.5em; background:yellow">
+<div style="-moz-column-count: 2; column-count: 2; -moz-column-fill: auto; height: 3.5em; background:yellow">

  <div style="margin: 7px 1% 2px 2em; border: medium dotted; border-width: 2px 3px 4px 5px;">
    <div style="background: url(repeatable-diagonal-gradient.png);">
--- a/layout/reftests/bugs/368020-1.html
+++ b/layout/reftests/bugs/368020-1.html
@ -5,7 +5,7 @@
 </head>
 <body>

-<div style="-moz-column-count: 2; column-count: 2; height: 3.5em; background:yellow">
+<div style="-moz-column-count: 2; column-count: 2;  -moz-column-fill: auto; height: 3.5em; background:yellow">

  <div>
    <div style="background: url(repeatable-diagonal-gradient.png); background-clip: padding-box; background-clip: padding; background-origin: padding-box; background-origin: padding; margin: 7px 1% 2px 2em; border: medium dotted; border-width: 2px 3px 4px 5px; padding: 8px 6px 4px 2px;">
--- a/layout/reftests/bugs/379349-2-ref.xhtml
+++ b/layout/reftests/bugs/379349-2-ref.xhtml
@ -41,6 +41,7 @@
      width: 300pt;
      -moz-column-width: 100pt;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: solid gray;
      position: relative;
    }
--- a/layout/reftests/bugs/379349-2a.xhtml
+++ b/layout/reftests/bugs/379349-2a.xhtml
@ -48,6 +48,7 @@
      width: 300pt;
      -moz-column-width: 100pt;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: solid gray;
    }
  </style>
--- a/layout/reftests/bugs/379349-2b.xhtml
+++ b/layout/reftests/bugs/379349-2b.xhtml
@ -48,6 +48,7 @@
      width: 300pt;
      -moz-column-width: 100pt;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: solid gray;
    }
  </style>
--- a/layout/reftests/bugs/563584-9c.html
+++ b/layout/reftests/bugs/563584-9c.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <title>Test for pushing of floats to next column when float breaking in columns is disabled</title>
-<body style="-moz-column-width: 200px; margin: 0; -moz-column-gap: 0; height: 200px;">
+<body style="-moz-column-width: 200px; -moz-column-fill: auto; margin: 0; -moz-column-gap: 0; height: 200px;">
 <div style="float: left;">
  <div style="display: inline-block; vertical-align: top; height: 150px; width: 200px; background: yellow"></div>
 </div>
--- a/layout/reftests/bugs/563584-9d.html
+++ b/layout/reftests/bugs/563584-9d.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <title>Test for pushing of floats to next column when float breaking in columns is disabled</title>
-<body style="-moz-column-width: 200px; margin: 0; -moz-column-gap: 0; height: 200px;">
+<body style="-moz-column-width: 200px; margin: 0; -moz-column-fill: auto; -moz-column-gap: 0; height: 200px;">
 <div style="float: left;">
  <div style="display: inline-block; vertical-align: top; height: 150px; width: 200px; background: yellow"></div>
 </div>
--- a/layout/reftests/columns/ahem.css
+++ b/layout/reftests/columns/ahem.css
@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(../fonts/Ahem.ttf);
+}
--- a/layout/reftests/columns/columnfill-auto-ref.html
+++ b/layout/reftests/columns/columnfill-auto-ref.html
@ -0,0 +1,33 @@
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+  <style>
+    td.text {
+      width: 33.33%;
+      text-align: left;
+      font-family: ahem;
+      padding-right: 1px;
+      font-size: 12pt;
+      line-height: 1.1;
+    }
+
+    table {
+      width: 100%;
+      font-family: ahem;
+      font-size: 12pt;
+      line-height: 1.1;
+    }
+  </style>
+</head>
+
+<body>
+  <table cellpadding=0 cellspacing=0>
+    <tr>
+      <td class="text" valign="top">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam.</td>
+      <td class="text" valign="top">Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci</td>
+      <td valign="top">vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris.</td>
+    </tr>
+  </table>
+</body>
--- a/layout/reftests/columns/columnfill-auto.html
+++ b/layout/reftests/columns/columnfill-auto.html
@ -0,0 +1,17 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+  </head>
+
+  <body>
+    <div style="-moz-column-count: 3;
+                -moz-column-gap: 0px;
+                -moz-column-fill: auto;
+                height: 120px;
+                font-family: ahem;
+                font-size: 12pt;
+		line-height: 1.1;">
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris.
+    </div>
+  </body>
+</html>
--- a/layout/reftests/columns/columnfill-balance-ref.html
+++ b/layout/reftests/columns/columnfill-balance-ref.html
@ -0,0 +1,33 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+    <style>
+      td {
+        width: 200px;
+        font-family: ahem;
+      }
+
+      table {
+        width: 100%;
+        height: 100px;
+        padding-bottom: 0;
+        margin-bottom: 0;
+        font-family: ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <table cellpadding=0 cellspacing=0>
+      <tr>
+        <td valign="top">
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam.
+        </td>
+        <td valign="top">Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci
+        </td>
+        <td valign="top">vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris.
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
--- a/layout/reftests/columns/columnfill-balance.html
+++ b/layout/reftests/columns/columnfill-balance.html
@ -0,0 +1,16 @@
+<html>
+  <head>
+      <link rel="stylesheet" type="text/css" href="ahem.css" />
+  </head>
+  <body>
+    <div style="-moz-column-width: 200px;
+                -moz-column-gap: 0px;
+                -moz-column-fill: balance;
+                height: 100px;
+                margin-bottom: 0;
+                padding-bottom: 0;
+                font-family: ahem;">
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat libero vel diam. Pellentesque pulvinar commodo lacus. Sed fringilla. Sed lectus. Praesent laoreet orci vitae nisi. Duis venenatis tristique massa. Sed commodo diam at mauris.
+    </div>
+  </body>
+</html>
--- a/layout/reftests/columns/reftest.list
+++ b/layout/reftests/columns/reftest.list
@ -16,6 +16,9 @@
 == column-balancing-002.html column-balancing-002.ref.html
 == column-balancing-003.html column-balancing-000.ref.html
 == column-balancing-004.html column-balancing-004.ref.html
+HTTP(..) == columnfill-balance.html columnfill-balance-ref.html
+HTTP(..) == columnfill-auto.html columnfill-auto-ref.html
+HTTP(..) == columnfill-change.html columnfill-change-ref.html
 == columnrule-basic.html columnrule-basic-ref.html
 == columnrule-complex.html columnrule-complex-ref.html
 != columnrule-linestyles.html columnrule-linestyles-notref.html
--- a/layout/reftests/pagination/abspos-overflow-01-cols.xhtml
+++ b/layout/reftests/pagination/abspos-overflow-01-cols.xhtml
@ -34,6 +34,7 @@
      height: 2in;
      -moz-column-count: 3;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: silver 2pt;
      border-style: none solid;
    }
--- a/layout/reftests/pagination/border-breaking-000-cols.xhtml
+++ b/layout/reftests/pagination/border-breaking-000-cols.xhtml
@ -25,6 +25,7 @@
      width: 300px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: solid silver;
      border-style: none solid;
    }
--- a/layout/reftests/pagination/border-breaking-001-cols.ref.xhtml
+++ b/layout/reftests/pagination/border-breaking-001-cols.ref.xhtml
@ -20,6 +20,7 @@
      width: 300px;
      -moz-column-width: 100px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: solid silver;
      border-style: none solid;
      background: yellow;
--- a/layout/reftests/pagination/border-breaking-001-cols.xhtml
+++ b/layout/reftests/pagination/border-breaking-001-cols.xhtml
@ -49,6 +49,7 @@
      width: 300px;
      -moz-column-width: 100px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: solid silver;
      border-style: none solid;
    }
--- a/layout/reftests/pagination/border-breaking-002-cols.ref.xhtml
+++ b/layout/reftests/pagination/border-breaking-002-cols.ref.xhtml
@ -16,6 +16,7 @@
      width: 300px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: solid silver;
    }
  </style>
--- a/layout/reftests/pagination/border-breaking-002-cols.xhtml
+++ b/layout/reftests/pagination/border-breaking-002-cols.xhtml
@ -17,6 +17,7 @@
      width: 300px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: solid silver;
    }
  </style>
--- a/layout/reftests/pagination/border-breaking-003-cols.xhtml
+++ b/layout/reftests/pagination/border-breaking-003-cols.xhtml
@ -20,6 +20,7 @@
      width: 300px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: solid silver;
    }
  </style>
--- a/layout/reftests/pagination/content-inserted-002.ref.xhtml
+++ b/layout/reftests/pagination/content-inserted-002.ref.xhtml
@ -13,6 +13,7 @@
      width: 450px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: 3px solid silver;
    }

--- a/layout/reftests/pagination/content-inserted-002.xhtml
+++ b/layout/reftests/pagination/content-inserted-002.xhtml
@ -13,6 +13,7 @@
      width: 450px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: 3px solid silver;
    }

--- a/layout/reftests/pagination/content-inserted-003.xhtml
+++ b/layout/reftests/pagination/content-inserted-003.xhtml
@ -13,6 +13,7 @@
      width: 450px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: 3px solid silver;
    }

--- a/layout/reftests/pagination/content-inserted-004.xhtml
+++ b/layout/reftests/pagination/content-inserted-004.xhtml
@ -13,6 +13,7 @@
      width: 450px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: 3px solid silver;
    }

--- a/layout/reftests/pagination/content-inserted-005.xhtml
+++ b/layout/reftests/pagination/content-inserted-005.xhtml
@ -13,6 +13,7 @@
      width: 450px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: 3px solid silver;
    }

--- a/layout/reftests/pagination/content-inserted-006.xhtml
+++ b/layout/reftests/pagination/content-inserted-006.xhtml
@ -13,6 +13,7 @@
      width: 450px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: 3px solid silver;
    }

--- a/layout/reftests/pagination/content-inserted-007.xhtml
+++ b/layout/reftests/pagination/content-inserted-007.xhtml
@ -13,6 +13,7 @@
      width: 450px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: 3px solid silver;
    }

--- a/layout/reftests/pagination/content-inserted-009.xhtml
+++ b/layout/reftests/pagination/content-inserted-009.xhtml
@ -13,6 +13,7 @@
      width: 450px;
      -moz-column-width: 150px;
      -moz-column-gap: 0;
+      -moz-column-fill: auto;
      border: 3px solid silver;
    }

--- a/layout/style/nsCSSKeywordList.h
+++ b/layout/style/nsCSSKeywordList.h
@ -198,6 +198,7 @@ CSS_KEY(auto, auto)
 CSS_KEY(avoid, avoid)
 CSS_KEY(background, background)
 CSS_KEY(backwards, backwards)
+CSS_KEY(balance, balance)
 CSS_KEY(baseline, baseline)
 CSS_KEY(bidi-override, bidi_override)
 CSS_KEY(blink, blink)
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@ -1256,6 +1256,15 @@ CSS_PROP_COLUMN(
    nsnull,
    offsetof(nsStyleColumn, mColumnCount),
    eStyleAnimType_Custom)
+CSS_PROP_COLUMN(
+    -moz-column-fill,
+    _moz_column_fill,
+    CSS_PROP_DOMPROP_PREFIXED(ColumnFill),
+    CSS_PROPERTY_PARSE_VALUE,
+    VARIANT_HK,
+    kColumnFillKTable,
+    CSS_PROP_NO_OFFSET,
+    eStyleAnimType_None)
 CSS_PROP_COLUMN(
    -moz-column-width,
    _moz_column_width,
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@ -1468,6 +1468,12 @@ const PRInt32 nsCSSProps::kColorInterpolationKTable[] = {
  eCSSKeyword_UNKNOWN, -1
 };

+const PRInt32 nsCSSProps::kColumnFillKTable[] = {
+  eCSSKeyword_auto, NS_STYLE_COLUMN_FILL_AUTO,
+  eCSSKeyword_balance, NS_STYLE_COLUMN_FILL_BALANCE,
+  eCSSKeyword_UNKNOWN, -1
+};
+
 bool
 nsCSSProps::FindKeyword(nsCSSKeyword aKeyword, const PRInt32 aTable[], PRInt32& aResult)
 {
--- a/layout/style/nsCSSProps.h
+++ b/layout/style/nsCSSProps.h
@ -359,6 +359,7 @@ public:
  static const PRInt32 kTextAnchorKTable[];
  static const PRInt32 kTextRenderingKTable[];
  static const PRInt32 kColorInterpolationKTable[];
+  static const PRInt32 kColumnFillKTable[];
  static const PRInt32 kBoxPropSourceKTable[];
  static const PRInt32 kBoxShadowTypeKTable[];
  static const PRInt32 kBoxSizingKTable[];
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@ -740,6 +740,16 @@ nsComputedDOMStyle::DoGetColumnGap()
  return val;
 }

+nsIDOMCSSValue*
+nsComputedDOMStyle::DoGetColumnFill()
+{
+  nsROCSSPrimitiveValue *val = GetROCSSPrimitiveValue();
+  val->SetIdent(
+    nsCSSProps::ValueToKeywordEnum(GetStyleColumn()->mColumnFill,
+                                   nsCSSProps::kColumnFillKTable));
+  return val;
+}
+
 nsIDOMCSSValue*
 nsComputedDOMStyle::DoGetColumnRuleWidth()
 {
@ -4570,6 +4580,7 @@ nsComputedDOMStyle::GetQueryablePropertyMap(PRUint32* aLength)
    COMPUTED_STYLE_MAP_ENTRY(box_pack,                      BoxPack),
    COMPUTED_STYLE_MAP_ENTRY(box_sizing,                    BoxSizing),
    COMPUTED_STYLE_MAP_ENTRY(_moz_column_count,             ColumnCount),
+    COMPUTED_STYLE_MAP_ENTRY(_moz_column_fill,              ColumnFill),
    COMPUTED_STYLE_MAP_ENTRY(_moz_column_gap,               ColumnGap),
    //// COMPUTED_STYLE_MAP_ENTRY(_moz_column_rule,         ColumnRule),
    COMPUTED_STYLE_MAP_ENTRY(_moz_column_rule_color,        ColumnRuleColor),
--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@ -365,6 +365,7 @@ private:

  /* Column properties */
  nsIDOMCSSValue* DoGetColumnCount();
+  nsIDOMCSSValue* DoGetColumnFill();
  nsIDOMCSSValue* DoGetColumnWidth();
  nsIDOMCSSValue* DoGetColumnGap();
  nsIDOMCSSValue* DoGetColumnRuleWidth();
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@ -6496,6 +6496,13 @@ nsRuleNode::ComputeColumnData(void* aStartStruct,
    column->mColumnRuleColorIsForeground = false;
  }

+  // column-fill: enum
+  SetDiscrete(*aRuleData->ValueForColumnFill(),
+                column->mColumnFill, canStoreInRuleTree,
+                SETDSC_ENUMERATED, parent->mColumnFill,
+                NS_STYLE_COLUMN_FILL_BALANCE,
+                0, 0, 0, 0);
+
  COMPUTE_END_RESET(Column, column)
 }

--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@ -776,6 +776,7 @@ nsStyleColumn::nsStyleColumn(nsPresContext* aPresContext)
  mColumnCount = NS_STYLE_COLUMN_COUNT_AUTO;
  mColumnWidth.SetAutoValue();
  mColumnGap.SetNormalValue();
+  mColumnFill = NS_STYLE_COLUMN_FILL_BALANCE;

  mColumnRuleWidth = (aPresContext->GetBorderWidthTable())[NS_STYLE_BORDER_WIDTH_MEDIUM];
  mColumnRuleStyle = NS_STYLE_BORDER_STYLE_NONE;
@ -807,7 +808,8 @@ nsChangeHint nsStyleColumn::CalcDifference(const nsStyleColumn& aOther) const
    return NS_STYLE_HINT_FRAMECHANGE;

  if (mColumnWidth != aOther.mColumnWidth ||
-      mColumnGap != aOther.mColumnGap)
+      mColumnGap != aOther.mColumnGap ||
+      mColumnFill != aOther.mColumnFill)
    return NS_STYLE_HINT_REFLOW;

  if (GetComputedColumnRuleWidth() != aOther.GetComputedColumnRuleWidth() ||
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@ -2085,6 +2085,8 @@ struct nsStyleColumn {

  nscolor      mColumnRuleColor;  // [reset]
  PRUint8      mColumnRuleStyle;  // [reset]
+  PRUint8      mColumnFill;  // [reset] see nsStyleConsts.h
+
  // See https://bugzilla.mozilla.org/show_bug.cgi?id=271586#c43 for why
  // this is hard to replace with 'currentColor'.
  bool mColumnRuleColorIsForeground;
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@ -491,6 +491,14 @@ var gCSSProperties = {
 		// negative and zero invalid per editor's draft
 		invalid_values: [ "-1", "0", "3px" ]
 	},
+	"-moz-column-fill": {
+		domProp: "MozColumnFill",
+		inherited: false,
+		type: CSS_TYPE_LONGHAND,
+		initial_values: [ "balance" ],
+		other_values: [ "auto" ],
+		invalid_values: [ "2px", "dotted", "5em" ]
+	},
 	"-moz-column-gap": {
 		domProp: "MozColumnGap",
 		inherited: false,