wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Scott Johnson 2011-12-19 23:11:54 -06:00
parent 1e33d301f0
commit 78a7cf00ef
43 changed files with 194 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dom/interfaces/css/nsIDOMCSS2Properties.idl
View File

@ -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

3
layout/base/nsStyleConsts.h
View File

@ -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

1
layout/generic/crashtests/399412-1.html
View File

@ -17,6 +17,7 @@ body {
width: 300px;
-moz-column-width: 50px;
-moz-column-gap: 1px;
-moz-column-fill: auto;
}
</style>

2
layout/generic/crashtests/673770.html
View File

@ -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>

12
layout/generic/nsColumnSetFrame.cpp
View File

@ -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;
}

2
layout/reftests/bugs/368020-1-ref.html
View File

@ -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);">

2
layout/reftests/bugs/368020-1.html
View File

@ -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;">

1
layout/reftests/bugs/379349-2-ref.xhtml
View File

@ -41,6 +41,7 @@
width: 300pt;
-moz-column-width: 100pt;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: solid gray;
position: relative;
}

1
layout/reftests/bugs/379349-2a.xhtml
View File

@ -48,6 +48,7 @@
width: 300pt;
-moz-column-width: 100pt;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: solid gray;
}
</style>

1
layout/reftests/bugs/379349-2b.xhtml
View File

@ -48,6 +48,7 @@
width: 300pt;
-moz-column-width: 100pt;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: solid gray;
}
</style>

2
layout/reftests/bugs/563584-9c.html
View File

@ -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>

2
layout/reftests/bugs/563584-9d.html
View File

@ -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>

4
layout/reftests/columns/ahem.css Normal file
View File

@ -0,0 +1,4 @@
@font-face {
font-family: "Ahem";
src: url(../fonts/Ahem.ttf);
}

33
layout/reftests/columns/columnfill-auto-ref.html Normal file
View File

@ -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>

17
layout/reftests/columns/columnfill-auto.html Normal file
View File

@ -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>

33
layout/reftests/columns/columnfill-balance-ref.html Normal file
View File

@ -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>

16
layout/reftests/columns/columnfill-balance.html Normal file
View File

@ -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>

3
layout/reftests/columns/reftest.list
View File

@ -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

1
layout/reftests/pagination/abspos-overflow-01-cols.xhtml
View File

@ -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;
}

1
layout/reftests/pagination/border-breaking-000-cols.xhtml
View File

@ -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;
}

1
layout/reftests/pagination/border-breaking-001-cols.ref.xhtml
View File

@ -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;

1
layout/reftests/pagination/border-breaking-001-cols.xhtml
View File

@ -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;
}

1
layout/reftests/pagination/border-breaking-002-cols.ref.xhtml
View File

@ -16,6 +16,7 @@
width: 300px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: solid silver;
}
</style>

1
layout/reftests/pagination/border-breaking-002-cols.xhtml
View File

@ -17,6 +17,7 @@
width: 300px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: solid silver;
}
</style>

1
layout/reftests/pagination/border-breaking-003-cols.xhtml
View File

@ -20,6 +20,7 @@
width: 300px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: solid silver;
}
</style>

1
layout/reftests/pagination/content-inserted-002.ref.xhtml
View File

@ -13,6 +13,7 @@
width: 450px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: 3px solid silver;
}

1
layout/reftests/pagination/content-inserted-002.xhtml
View File

@ -13,6 +13,7 @@
width: 450px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: 3px solid silver;
}

1
layout/reftests/pagination/content-inserted-003.xhtml
View File

@ -13,6 +13,7 @@
width: 450px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: 3px solid silver;
}

1
layout/reftests/pagination/content-inserted-004.xhtml
View File

@ -13,6 +13,7 @@
width: 450px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: 3px solid silver;
}

1
layout/reftests/pagination/content-inserted-005.xhtml
View File

@ -13,6 +13,7 @@
width: 450px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: 3px solid silver;
}

1
layout/reftests/pagination/content-inserted-006.xhtml
View File

@ -13,6 +13,7 @@
width: 450px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: 3px solid silver;
}

1
layout/reftests/pagination/content-inserted-007.xhtml
View File

@ -13,6 +13,7 @@
width: 450px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: 3px solid silver;
}

1
layout/reftests/pagination/content-inserted-009.xhtml
View File

@ -13,6 +13,7 @@
width: 450px;
-moz-column-width: 150px;
-moz-column-gap: 0;
-moz-column-fill: auto;
border: 3px solid silver;
}

1
layout/style/nsCSSKeywordList.h
View File

@ -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)

9
layout/style/nsCSSPropList.h
View File

@ -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,

6
layout/style/nsCSSProps.cpp
View File

@ -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)
{

1
layout/style/nsCSSProps.h
View File

@ -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[];

11
layout/style/nsComputedDOMStyle.cpp
View File

@ -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),

1
layout/style/nsComputedDOMStyle.h
View File

@ -365,6 +365,7 @@ private:
/* Column properties */
nsIDOMCSSValue* DoGetColumnCount();
nsIDOMCSSValue* DoGetColumnFill();
nsIDOMCSSValue* DoGetColumnWidth();
nsIDOMCSSValue* DoGetColumnGap();
nsIDOMCSSValue* DoGetColumnRuleWidth();

7
layout/style/nsRuleNode.cpp
View File

@ -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)
}

4
layout/style/nsStyleStruct.cpp
View File

@ -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() ||

2
layout/style/nsStyleStruct.h
View File

@ -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;

8
layout/style/test/property_database.js
View File

@ -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,