Bug 1547162 Part 3 - Strip "-moz" prefix for all column properties in the received tests, and mark multicol-span-000-ref.xht pass. r=dbaron

multicol-span-000.xht passes because the id in

  <div id="column-span">123456</div>

was incorrect replaced by "-moz-column-span". Strip the "-moz" prefix
fixed it.

Except failures.list, other files were modified mechanically by running
import-tests.py against https://github.com/web-platform-tests/wpt commit
15f199c91a72b0d51bf0a12b3b77827ecb5051ff (the same commit in
received/import.log).

Differential Revision: https://phabricator.services.mozilla.com/D30406

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Ting-Yu Lin 2019-05-09 23:32:50 +00:00
parent a0b2a1a223
commit c169d13a59
168 changed files with 753 additions and 753 deletions

View File

@ -278,7 +278,7 @@ fails-if(!OSX) random-if(OSX) css-multicol/multicol-rule-stacking-001.xht
fails-if(!OSX||webrender) random-if(OSX) css-multicol/multicol-shorthand-001.xht
# Bug 1547160: Fix existing reftests failure related to column-span
pref(layout.css.column-span.enabled,true) fails css-multicol/multicol-span-000.xht
pref(layout.css.column-span.enabled,true) css-multicol/multicol-span-000.xht
pref(layout.css.column-span.enabled,true) css-multicol/multicol-span-all-001.xht
pref(layout.css.column-span.enabled,true) css-multicol/multicol-span-all-002.xht
pref(layout.css.column-span.enabled,true) fails-if(!OSX) random-if(OSX) css-multicol/multicol-span-all-003.xht

View File

@ -3,7 +3,7 @@
<!-- Submitted from TestTWF Paris -->
<head>
<meta charset="utf-8">
<title>CSS Test: Multi-column element via -moz-columns: [integer]</title>
<title>CSS Test: Multi-column element via columns: [integer]</title>
<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
@ -32,9 +32,9 @@
.multicol-basic-ref{
background: yellow;
width: 360px;
-moz-columns: 3;
-moz-column-gap: 0;
-moz-column-rule: none;
columns: 3;
column-gap: 0;
column-rule: none;
}
.multicol-basic-ref-item{

View File

@ -3,7 +3,7 @@
<!-- Submitted from TestTWF Paris -->
<head>
<meta charset="utf-8">
<title>CSS Test: Multi-column element via -moz-column-count: [integer]</title>
<title>CSS Test: Multi-column element via column-count: [integer]</title>
<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
@ -32,9 +32,9 @@
.multicol-basic-ref{
background: yellow;
width: 360px;
-moz-column-count: 3;
-moz-column-gap: 0;
-moz-column-rule: none;
column-count: 3;
column-gap: 0;
column-rule: none;
}
.multicol-basic-ref-item{

View File

@ -3,7 +3,7 @@
<!-- Submitted from TestTWF Paris -->
<head>
<meta charset="utf-8">
<title>CSS Test: Multi-column element via -moz-columns: [width]</title>
<title>CSS Test: Multi-column element via columns: [width]</title>
<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
@ -32,9 +32,9 @@
.multicol-basic-ref{
background: yellow;
width: 360px;
-moz-columns: 120px;
-moz-column-gap: 0;
-moz-column-rule: none;
columns: 120px;
column-gap: 0;
column-rule: none;
}
.multicol-basic-ref-item{

View File

@ -3,7 +3,7 @@
<!-- Submitted from TestTWF Paris -->
<head>
<meta charset="utf-8">
<title>CSS Test: Multi-column element via -moz-column-width: [width]</title>
<title>CSS Test: Multi-column element via column-width: [width]</title>
<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
@ -32,9 +32,9 @@
.multicol-basic-ref{
background: yellow;
width: 360px;
-moz-column-width: 120px;
-moz-column-gap: 0;
-moz-column-rule: none;
column-width: 120px;
column-gap: 0;
column-rule: none;
}
.multicol-basic-ref-item{

View File

@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-columns as -moz-column-count (basic)</title>
<title>CSS Multi-column Layout Test: columns as column-count (basic)</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#columns"/>
@ -12,13 +12,13 @@ div {
background: yellow;
border: thin solid black;
width: 600px;
-moz-columns: 3;
-moz-column-gap: 0;
-moz-column-rule: none;
columns: 3;
column-gap: 0;
column-rule: none;
}
</style>
</head>
<body>
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div>
</body>
</html>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-count (basic)</title>
<title>CSS Multi-column Layout Test: column-count (basic)</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-count"/>
@ -11,13 +11,13 @@ div {
background: yellow;
border: thin solid black;
width: 600px;
-moz-column-count: 3;
-moz-column-gap: 0;
-moz-column-rule: none;
column-count: 3;
column-gap: 0;
column-rule: none;
}
</style>
</head>
<body>
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div>
</body>
</html>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-columns as -moz-column-width (basic)</title>
<title>CSS Multi-column Layout Test: columns as column-width (basic)</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#columns"/>
@ -12,13 +12,13 @@ div {
background: yellow;
border: thin solid black;
width: 600px;
-moz-columns: 200px;
-moz-column-gap: 0;
-moz-column-rule: none;
columns: 200px;
column-gap: 0;
column-rule: none;
}
</style>
</head>
<body>
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div>
</body>
</html>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-width (basic)</title>
<title>CSS Multi-column Layout Test: column-width (basic)</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-width"/>
@ -11,13 +11,13 @@ div {
background: yellow;
border: thin solid black;
width: 600px;
-moz-column-width: 200px;
-moz-column-gap: 0;
-moz-column-rule: none;
column-width: 200px;
column-gap: 0;
column-rule: none;
}
</style>
</head>
<body>
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div>
</body>
</html>

View File

@ -23,8 +23,8 @@
widows: 1;
width: 11em;
-moz-column-count: 4;
-moz-column-gap: 1em;
column-count: 4;
column-gap: 1em;
}
h4

View File

@ -23,8 +23,8 @@
widows: 1;
width: 11em;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
h4

View File

@ -9,9 +9,9 @@
<meta name="flags" content=""/>
<style type="text/css"><![CDATA[
.multicol {
-moz-column-count: 2;
-moz-column-gap: 0;
-moz-column-fill: auto;
column-count: 2;
column-gap: 0;
column-fill: auto;
overflow: hidden;
width: 200px;
height: 300px;

View File

@ -26,9 +26,9 @@
div#test
{
-moz-column-fill: auto;
-moz-column-gap: 0;
-moz-column-width: 2em;
column-fill: auto;
column-gap: 0;
column-width: 2em;
/*

View File

@ -25,9 +25,9 @@
div#test
{
-moz-column-fill: auto;
-moz-column-gap: 0;
-moz-column-width: 2em;
column-fill: auto;
column-gap: 0;
column-width: 2em;
/*

View File

@ -25,8 +25,8 @@
widows: 1;
width: 11em;
-moz-column-count: 3;
-moz-column-gap: 4em;
column-count: 3;
column-gap: 4em;
}
span {color: black;}

View File

@ -26,8 +26,8 @@
widows: 1;
width: 11em;
-moz-column-count: 3;
-moz-column-gap: 4em;
column-count: 3;
column-gap: 4em;
}
span {color: black;}

View File

@ -32,8 +32,8 @@
orphans: 1;
widows: 1;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
h4

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that '-moz-columns: 100px 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
<meta name="assert" content="This test checks that 'columns: 100px 6' shorthand correctly set 'column-width' and 'column-count' properties." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,8 +25,8 @@
orphans: 1;
widows: 1;
-moz-columns: 100px 6;
-moz-column-gap: 0;
columns: 100px 6;
column-gap: 0;
}
]]></style>
</head>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that '-moz-columns: 6 100px' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
<meta name="assert" content="This test checks that 'columns: 6 100px' shorthand correctly set 'column-width' and 'column-count' properties." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,8 +25,8 @@
orphans: 1;
widows: 1;
-moz-columns: 6 100px;
-moz-column-gap: 0;
columns: 6 100px;
column-gap: 0;
}
]]></style>
</head>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that '-moz-columns: 100px auto' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
<meta name="assert" content="This test checks that 'columns: 100px auto' shorthand correctly set 'column-width' and 'column-count' properties." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,8 +25,8 @@
orphans: 1;
widows: 1;
-moz-columns: 100px auto;
-moz-column-gap: 0;
columns: 100px auto;
column-gap: 0;
}
]]></style>
</head>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that '-moz-columns: auto 100px' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
<meta name="assert" content="This test checks that 'columns: auto 100px' shorthand correctly set 'column-width' and 'column-count' properties." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,8 +25,8 @@
orphans: 1;
widows: 1;
-moz-columns: auto 100px;
-moz-column-gap: 0;
columns: auto 100px;
column-gap: 0;
}
]]></style>
</head>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that '-moz-columns: 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties. '-moz-columns: 6' is equivalent to '-moz-column-width: auto' and '-moz-column-count: 6'." />
<meta name="assert" content="This test checks that 'columns: 6' shorthand correctly set 'column-width' and 'column-count' properties. 'columns: 6' is equivalent to 'column-width: auto' and 'column-count: 6'." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,8 +25,8 @@
orphans: 1;
widows: 1;
-moz-columns: 6;
-moz-column-gap: 0;
columns: 6;
column-gap: 0;
}
]]></style>
</head>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that '-moz-columns: 6 auto' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
<meta name="assert" content="This test checks that 'columns: 6 auto' shorthand correctly set 'column-width' and 'column-count' properties." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,8 +25,8 @@
orphans: 1;
widows: 1;
-moz-columns: 6 auto;
-moz-column-gap: 0;
columns: 6 auto;
column-gap: 0;
}
]]></style>
</head>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that '-moz-columns: auto 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
<meta name="assert" content="This test checks that 'columns: auto 6' shorthand correctly set 'column-width' and 'column-count' properties." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,8 +25,8 @@
orphans: 1;
widows: 1;
-moz-columns: auto 6;
-moz-column-gap: 0;
columns: auto 6;
column-gap: 0;
}
]]></style>
</head>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: invalid -moz-columns shorthand</title>
<title>CSS Multi-column Layout Test: invalid columns shorthand</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
<meta name="flags" content="ahem invalid" />
<meta name="assert" content="This test checks that '-moz-columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored." />
<meta name="assert" content="This test checks that 'columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,9 +25,9 @@
widows: 1;
width: 12em;
-moz-column-count: 4;
-moz-column-gap: 0;
-moz-columns: 8 normal;
column-count: 4;
column-gap: 0;
columns: 8 normal;
}
span {color: blue;}

View File

@ -9,13 +9,13 @@
multicol-columns-invalid-002.xht
-->
<title>CSS Multi-column Layout Test: invalid -moz-columns shorthand</title>
<title>CSS Multi-column Layout Test: invalid columns shorthand</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
<meta name="flags" content="ahem invalid" />
<meta name="assert" content="This test checks that '-moz-columns: 8 auto 6em' is invalid (generating a parsing error) and therefore will be ignored." />
<meta name="assert" content="This test checks that 'columns: 8 auto 6em' is invalid (generating a parsing error) and therefore will be ignored." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -33,9 +33,9 @@
widows: 1;
width: 12em;
-moz-column-count: 4;
-moz-column-gap: 0;
-moz-columns: 8 auto 6em;
column-count: 4;
column-gap: 0;
columns: 8 auto 6em;
}
span {color: blue;}

View File

@ -4,7 +4,7 @@
<title>CSS Multi-column Layout Test: narrower inline content inside wider colum box</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-invalid-001-ref.xht"/>
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks the rendering of inline content (2em) inside wider (3em) column boxes." />
@ -25,8 +25,8 @@
widows: 1;
width: 12em;
-moz-column-count: 4;
-moz-column-gap: 0;
column-count: 4;
column-gap: 0;
}
span {color: blue;}

View File

@ -25,8 +25,8 @@
widows: 1;
width: 12em;
-moz-column-count: 3;
-moz-column-gap: 0;
column-count: 3;
column-gap: 0;
}
span

View File

@ -22,8 +22,8 @@
position: relative;
width: 19em;
-moz-column-count: 4;
-moz-column-gap: 1em;
column-count: 4;
column-gap: 1em;
}
span {color: red;}

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-count (basic)</title>
<title>CSS Multi-column Layout Test: column-count (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" />
<link rel="match" href="multicol-columns-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that setting '-moz-column-count' should accordingly create 6 column boxes. In this test, each column box should be exactly 100px wide." />
<meta name="assert" content="This test checks that setting 'column-count' should accordingly create 6 column boxes. In this test, each column box should be exactly 100px wide." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,8 +25,8 @@
orphans: 1;
widows: 1;
-moz-column-count: 6;
-moz-column-gap: 0;
column-count: 6;
column-gap: 0;
}
]]></style>
</head>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-count (basic)</title>
<title>CSS Multi-column Layout Test: column-count (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" />
<link rel="match" href="multicol-count-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that setting '-moz-column-count' should accordingly create 4 column boxes. In this test, each column box should be exactly 5em wide." />
<meta name="assert" content="This test checks that setting 'column-count' should accordingly create 4 column boxes. In this test, each column box should be exactly 5em wide." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -30,8 +30,8 @@
background-color: yellow;
color: black;
-moz-column-count: 4;
-moz-column-gap: 0;
column-count: 4;
column-gap: 0;
}
]]></style>
</head>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule and overflow inside (complex test)</title>
<title>CSS Multi-column Layout Test: column-rule and overflow inside (complex test)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-count-computed-003-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be clipped and should overlappe partially the 1st -moz-column-rule." />
<meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be clipped and should overlappe partially the 1st column-rule." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,22 +25,22 @@
widows: 1;
width: 13em;
-moz-column-count: 3;
-moz-column-gap: 5em;
-moz-column-rule-color: blue;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1.5em;
column-count: 3;
column-gap: 5em;
column-rule-color: blue;
column-rule-style: solid;
column-rule-width: 1.5em;
}
/*
(11) if (-moz-column-width = auto) and (-moz-column-count != auto) then
(12) N := -moz-column-count;
(13) W := max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
(11) if (column-width = auto) and (column-count != auto) then
(12) N := column-count;
(13) W := max(0, (available-width - ((N - 1) * column-gap)) / N);
(14) exit;
So, the used -moz-column-count in this test is 3.
So, the used column-count in this test is 3.
W := max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W := max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (13em - ((3 - 1) * 5em)) / 3);
W == max(0, (13em - (2 * 5em)) / 3);
W == max(0, (13em - (10em)) / 3);
@ -48,7 +48,7 @@
W == max(0, 1em);
W == 1em;
So, the used -moz-column-width in this test is 1em.
So, the used column-width in this test is 1em.
*/
#pink {color: pink;}
@ -63,14 +63,14 @@
"
https://drafts.csswg.org/css-multicol-1/#overflow-inside-multicol-elements
this causes the right-half (0.5em) of the 'K' glyph to
overlap the right-half (0.75em) of the 1st blue -moz-column-rule.
overlap the right-half (0.75em) of the 1st blue column-rule.
Same thing should happen to the 'N' glyph of 'ORAN'.
Because no inline content should be rendered into the
3rd column box, this causes the 2nd column rule not
been rendered because
"
Column rules are only drawn between two -moz-columns that
Column rules are only drawn between two columns that
both have content.
"
http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: both '-moz-column-width' and '-moz-column-count' are 'auto'</title>
<title>CSS Multi-column Layout Test: both 'column-width' and 'column-count' are 'auto'</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
<link rel="match" href="multicol-count-computed-004-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that if '-moz-column-width' is 'auto' and if '-moz-column-count' is 'auto', then such element will not behave like a multi-column element and -moz-column-gap and -moz-column-rule declarations will be ignored." />
<meta name="assert" content="This test checks that if 'column-width' is 'auto' and if 'column-count' is 'auto', then such element will not behave like a multi-column element and column-gap and column-rule declarations will be ignored." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,11 +25,11 @@
widows: 1;
width: 12em;
-moz-column-count: auto;
-moz-column-gap: 7em;
-moz-column-rule-color: red;
-moz-column-rule-width: 1.5em;
-moz-column-rule-style: solid;
column-count: auto;
column-gap: 7em;
column-rule-color: red;
column-rule-width: 1.5em;
column-rule-style: solid;
}
#pink {color: pink;}

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule and overflow inside (complex test)</title>
<title>CSS Multi-column Layout Test: column-rule and overflow inside (complex test)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-03 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-count-computed-003-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be partially clipped and should overlap partially with the 1st -moz-column-rule." />
<meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be partially clipped and should overlap partially with the 1st column-rule." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,34 +25,34 @@
widows: 1;
width: 13em;
-moz-column-gap: 5em;
-moz-column-rule-color: blue;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1.5em;
-moz-column-width: 1em;
column-gap: 5em;
column-rule-color: blue;
column-rule-style: solid;
column-rule-width: 1.5em;
column-width: 1em;
}
/*
(15) if (-moz-column-width != auto) and (-moz-column-count = auto) then
(16) N := max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
(17) W := ((available-width + -moz-column-gap) / N) - -moz-column-gap;
(15) if (column-width != auto) and (column-count = auto) then
(16) N := max(1, floor((available-width + column-gap) / (column-width + column-gap)));
(17) W := ((available-width + column-gap) / N) - column-gap;
(18) exit;
N := max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
N := max(1, floor((available-width + column-gap) / (column-width + column-gap)));
N == max(1, floor((13em + 5em) / (1em + 5em)));
N == max(1, floor(18em / 6em));
N == max(1, floor(3));
N == 3;
So, the used -moz-column-count in this test is 3.
So, the used column-count in this test is 3.
W := ((available-width + -moz-column-gap) / N) - -moz-column-gap;
W := ((available-width + column-gap) / N) - column-gap;
W == ((13em + 5em) / 3) - 5em;
W == ((18em) / 3) - 5em;
W == (6em) - 5em;
W == 1em;
So, the used -moz-column-width in this test is 1em.
So, the used column-width in this test is 1em.
*/
#pink {color: pink;}
@ -67,14 +67,14 @@
"
http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements
this causes the right-half (0.5em) of the 'K' glyph to
overlap with the right-half (0.75em) of the 1st blue -moz-column-rule.
overlap with the right-half (0.75em) of the 1st blue column-rule.
Same thing should happen to the 'N' glyph of 'ORAN'.
Because no inline content should be rendered into the
3rd column box, this causes the 2nd column rule not
been rendered because
"
Column rules are only drawn between two -moz-columns that
Column rules are only drawn between two columns that
both have content.
"
http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: negative '-moz-column-count' value</title>
<title>CSS Multi-column Layout Test: negative 'column-count' value</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
<meta name="flags" content="ahem invalid" />
<meta name="assert" content="This test checks that a specified negative '-moz-column-count' value is invalid and ignored." />
<meta name="assert" content="This test checks that a specified negative 'column-count' value is invalid and ignored." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,9 +25,9 @@
widows: 1;
width: 12em;
-moz-column-count: 4;
-moz-column-count: -1;
-moz-column-gap: 0;
column-count: 4;
column-count: -1;
column-gap: 0;
}
span {color: blue;}

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: zero '-moz-column-count' value</title>
<title>CSS Multi-column Layout Test: zero 'column-count' value</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
<meta name="flags" content="ahem invalid" />
<meta name="assert" content="This test checks that a specified 0 '-moz-column-count' value is invalid and ignored." />
<meta name="assert" content="This test checks that a specified 0 'column-count' value is invalid and ignored." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,9 +25,9 @@
widows: 1;
width: 12em;
-moz-column-count: 4;
-moz-column-count: 0; /* invalid; must be a greater-than-zero integer */
-moz-column-gap: 0;
column-count: 4;
column-count: 0; /* invalid; must be a greater-than-zero integer */
column-gap: 0;
}
span {color: blue;}

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: non-integer '-moz-column-count' value</title>
<title>CSS Multi-column Layout Test: non-integer 'column-count' value</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '&lt;integer&gt;' type" />
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
<meta name="flags" content="ahem invalid" />
<meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." />
<meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,9 +25,9 @@
widows: 1;
width: 12em;
-moz-column-count: 4;
-moz-column-count: 2.1; /* invalid; must be an integer */
-moz-column-gap: 0;
column-count: 4;
column-count: 2.1; /* invalid; must be an integer */
column-gap: 0;
}
span {color: blue;}

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: non-integer '-moz-column-count' value</title>
<title>CSS Multi-column Layout Test: non-integer 'column-count' value</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '&lt;integer&gt;' type" />
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
<meta name="flags" content="ahem invalid" />
<meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." />
<meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,9 +25,9 @@
widows: 1;
width: 12em;
-moz-column-count: 4;
-moz-column-count: 1.9; /* invalid; must be an integer */
-moz-column-gap: 0;
column-count: 4;
column-count: 1.9; /* invalid; must be an integer */
column-gap: 0;
}
span {color: blue;}

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: non-integer '-moz-column-count' value</title>
<title>CSS Multi-column Layout Test: non-integer 'column-count' value</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '&lt;integer&gt;' type" />
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
<meta name="flags" content="ahem invalid" />
<meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." />
<meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,9 +25,9 @@
widows: 1;
width: 12em;
-moz-column-count: 4;
-moz-column-count: 2.0; /* invalid; must be an integer */
-moz-column-gap: 0;
column-count: 4;
column-count: 2.0; /* invalid; must be an integer */
column-gap: 0;
}
span {color: blue;}

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-fill: balance (basic)</title>
<title>CSS Multi-column Layout Test: column-fill: balance (basic)</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" />
<link rel="match" href="multicol-fill-000-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that content is balanced into all -moz-columns thanks to '-moz-column-fill: balance'." />
<meta name="assert" content="This test checks that content is balanced into all columns thanks to 'column-fill: balance'." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -26,9 +26,9 @@
div.test
{
-moz-columns: 3;
-moz-column-fill: balance;
-moz-column-gap: 0em;
columns: 3;
column-fill: balance;
column-gap: 0em;
/*

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-fill: balance with set height (basic)</title>
<title>CSS Multi-column Layout Test: column-fill: balance with set height (basic)</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" />
<link rel="match" href="multicol-fill-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that content is balanced into all -moz-columns of a multi-column element with a set height thanks to '-moz-column-fill: balance'." />
<meta name="assert" content="This test checks that content is balanced into all columns of a multi-column element with a set height thanks to 'column-fill: balance'." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -27,9 +27,9 @@
div#test
{
-moz-columns: 2;
-moz-column-fill: balance;
-moz-column-gap: 0em;
columns: 2;
column-fill: balance;
column-gap: 0em;
/*

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-fill: auto' (basic)</title>
<title>CSS Multi-column Layout Test: 'column-fill: auto' (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" />
<link rel="match" href="multicol-fill-auto-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that '-moz-column-fill: auto' fills the column boxes of a multi-colum element sequentially with inline content and does not bother about balancing content of column boxes." />
<meta name="assert" content="This test checks that 'column-fill: auto' fills the column boxes of a multi-colum element sequentially with inline content and does not bother about balancing content of column boxes." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -24,9 +24,9 @@
widows: 1;
width: 32em;
-moz-column-count: 3;
-moz-column-fill: auto;
-moz-column-gap: 1em;
column-count: 3;
column-fill: auto;
column-gap: 1em;
}
]]></style>
</head>

View File

@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multicolumn | -moz-column-fill-auto</title>
<title>multicolumn | column-fill-auto</title>
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
<meta name="flags" content="ahem"/>
<style type="text/css"><![CDATA[
@ -25,9 +25,9 @@ body>div {
margin: 1em;
}
div.col {
-moz-column-count: 2;
-moz-column-fill: auto;
-moz-column-gap: 0;
column-count: 2;
column-fill: auto;
column-gap: 0;
}
div.red {
background: red; position: absolute; z-index: -1;

View File

@ -2,8 +2,8 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multicolumn | -moz-column-fill-auto</title>
<meta name="assert" content="This test checks that -moz-columns are not balanced when '-moz-column-fill: auto' is set"/>
<title>multicolumn | column-fill-auto</title>
<meta name="assert" content="This test checks that columns are not balanced when 'column-fill: auto' is set"/>
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
<link rel="match" href="multicol-fill-auto-002-ref.xht"/>
@ -28,9 +28,9 @@ body>div {
margin: 1em;
}
div.col {
-moz-column-count: 2;
-moz-column-fill: auto;
-moz-column-gap: 0;
column-count: 2;
column-fill: auto;
column-gap: 0;
}
div.red {
background: red; position: absolute; z-index: -1;

View File

@ -1,12 +1,12 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-fill: auto' (basic)</title>
<title>CSS Multi-column Layout Test: 'column-fill: auto' (basic)</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-01 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" />
<link rel="match" href="multicol-fill-auto-003-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks if inline content fills column boxes sequentially when '-moz-column-fill' is set to 'auto'." />
<meta name="assert" content="This test checks if inline content fills column boxes sequentially when 'column-fill' is set to 'auto'." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,10 +25,10 @@
height: 6em;
width: 21em;
-moz-column-count: 2;
-moz-column-fill: auto;
-moz-column-gap: 1em;
-moz-column-rule: yellow solid 1em;
column-count: 2;
column-fill: auto;
column-gap: 1em;
column-rule: yellow solid 1em;
}
]]></style>
</head>
@ -55,7 +55,7 @@
The digits are the green squares, the white squares
are the blank white spaces. The yellow vertical stripe
represent both the -moz-column-gap and the -moz-column-rule.
represent both the column-gap and the column-rule.
The "3" glyph at line 5 of 1st column box should be
overlapping the red square.

View File

@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multicol | -moz-column-span: all | -moz-column-fill: auto</title>
<title>multicol | column-span: all | column-fill: auto</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
<link rel="match" href="multicol-fill-auto-block-children-ref.xht"/>
@ -15,12 +15,12 @@ body {
background: blue;
width: 1200px;
height: 492px;
-moz-column-count: 3;
-moz-column-gap: 2em;
-moz-column-fill: auto;
column-count: 3;
column-gap: 2em;
column-fill: auto;
}
h1 {
-moz-column-span: all;
column-span: all;
font-size: 2em;
height: 70px;
}

View File

@ -1,15 +1,15 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-fill: auto' and '-moz-column-span: all' (complex)</title>
<title>CSS Multi-column Layout Test: 'column-fill: auto' and 'column-span: all' (complex)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" />
<link rel="match" href="multicol-fill-auto-block-children-002-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="This test checks that if '-moz-column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a '-moz-column-span: all' element will occupy more space in a multi-column element than a '-moz-column-span: none' element, therefore reducing available space for content in column boxes." />
<meta name="assert" content="This test checks that if 'column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a 'column-span: all' element will occupy more space in a multi-column element than a 'column-span: none' element, therefore reducing available space for content in column boxes." />
<style type="text/css"><![CDATA[
html {background-color: white;}
@ -20,15 +20,15 @@
margin: 8px;
width: 60%;
-moz-column-count: 3;
-moz-column-fill: auto;
-moz-column-gap: 10px;
column-count: 3;
column-fill: auto;
column-gap: 10px;
}
h1
{
color: white;
-moz-column-span: all;
column-span: all;
font-size: 2em;
line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
margin: 21px 0em;

View File

@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multicol | -moz-column-span: all | -moz-column-fill: auto</title>
<title>multicol | column-span: all | column-fill: auto</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
<style type="text/css"><![CDATA[
html {

View File

@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multicolumn | -moz-column-fill</title>
<title>multicolumn | column-fill</title>
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
<meta name="flags" content="ahem"/>
<style type="text/css"><![CDATA[
@ -25,9 +25,9 @@ body>div {
margin: 1em;
}
div.col {
-moz-column-count: 2;
-moz-column-fill: balance;
-moz-column-gap: 0;
column-count: 2;
column-fill: balance;
column-gap: 0;
}
div.red {
background: red; position: absolute; z-index: -1;

View File

@ -2,8 +2,8 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multicolumn | -moz-column-fill</title>
<meta name="assert" content="This test checks that -moz-columns are properly balanced when '-moz-column-fill: balance' is set"/>
<title>multicolumn | column-fill</title>
<meta name="assert" content="This test checks that columns are properly balanced when 'column-fill: balance' is set"/>
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
<link rel="match" href="multicol-fill-balance-001-ref.xht"/>
@ -28,9 +28,9 @@ body>div {
margin: 1em;
}
div.col {
-moz-column-count: 2;
-moz-column-fill: balance;
-moz-column-gap: 0;
column-count: 2;
column-fill: balance;
column-gap: 0;
}
div.red {
background: red; position: absolute; z-index: -1;

View File

@ -1,11 +1,11 @@
<!DOCTYPE html>
<title>CSS Multi-column Layout Test: Balancing with more forced breaks than -moz-columns</title>
<title>CSS Multi-column Layout Test: Balancing with more forced breaks than columns</title>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1. -moz-column-fill">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1. column-fill">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This multicol container will create overflowing -moz-columns, no matter what, due to forced break. Don't overstretch.">
<meta name="assert" content="This multicol container will create overflowing columns, no matter what, due to forced break. Don't overstretch.">
<p>Test passes if there is a filled green square.</p>
<div style="-moz-columns:2; -moz-column-gap:0; width:100px; background:green;">
<div style="columns:2; column-gap:0; width:100px; background:green;">
<div style="height:100px;"></div>
<div style="break-before:column; height:90px;"></div>
<div style="break-before:column; height:10px;"></div>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-gap (basic)</title>
<title>CSS Multi-column Layout Test: column-gap (basic)</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 'column-gap'" />
<link rel="match" href="multicol-gap-000-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that column gap appears between two -moz-columns." />
<meta name="assert" content="This test checks that column gap appears between two columns." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -28,8 +28,8 @@
orphans: 1;
widows: 1;
-moz-column-width: 10em;
-moz-column-gap: 10em;
column-width: 10em;
column-gap: 10em;
}
span {color: yellow;}

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-gap: normal'</title>
<title>CSS Multi-column Layout Test: 'column-gap: normal'</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
<link rel="match" href="multicol-gap-001-ref.xht" />
<meta name="flags" content="ahem may" />
<meta name="assert" content="This test checks that the 'normal' column gap is 1em, which is suggested -- and not prescribed -- by the specification." />
@ -28,8 +28,8 @@
div.multicol
{
-moz-column-gap: normal;
-moz-column-width: 1em;
column-gap: normal;
column-width: 1em;
}
span {padding-right: 1em;}

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-gap (basic)</title>
<title>CSS Multi-column Layout Test: column-gap (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
<link rel="match" href="multicol-gap-002-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -24,8 +24,8 @@
widows: 1;
width: 11em;
-moz-column-count: 4;
-moz-column-gap: 1em;
column-count: 4;
column-gap: 1em;
}
span {color: blue;}

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-gap: normal'</title>
<title>CSS Multi-column Layout Test: 'column-gap: normal'</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
<link rel="match" href="multicol-gap-002-ref.xht" />
<meta name="flags" content="ahem may" />
<style type="text/css"><![CDATA[
@ -24,8 +24,8 @@
widows: 1;
width: 11em;
-moz-column-count: 4;
-moz-column-gap: normal;
column-count: 4;
column-gap: normal;
}
span {color: blue;}

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-gap' with increasing values</title>
<title>CSS Multi-column Layout Test: 'column-gap' with increasing values</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
<link rel="match" href="multicol-gap-fraction-001-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -22,15 +22,15 @@
orphans: 1;
widows: 1;
-moz-column-count: 2;
-moz-column-gap: 0.5em;
column-count: 2;
column-gap: 0.5em;
}
#two {-moz-column-gap: 2.5em;}
#two {column-gap: 2.5em;}
#three {-moz-column-gap: 4.5em;}
#three {column-gap: 4.5em;}
#four {-moz-column-gap: 6.5em;}
#four {column-gap: 6.5em;}
span {color: blue;}
]]></style>

View File

@ -1,68 +1,68 @@
<!DOCTYPE html>
<title>CSS Multi-column Layout Test: '-moz-column-gap' with sub-pixel values</title>
<title>CSS Multi-column Layout Test: 'column-gap' with sub-pixel values</title>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'">
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'">
<link rel="match" href="../reference/nothing.html" />
<meta name="assert" content="Specified -moz-column-gap should never be rounded up to the nearest integer, or the second column in the tests might overflow the multicol container in the inline direction.">
<meta name="assert" content="Specified column-gap should never be rounded up to the nearest integer, or the second column in the tests might overflow the multicol container in the inline direction.">
<style>
.multicol { margin:10px; float:left; -moz-columns:2; width:50px; -moz-column-gap:10.9px; -moz-column-fill:auto; height:50px; background:white; }
.multicol { margin:10px; float:left; columns:2; width:50px; column-gap:10.9px; column-fill:auto; height:50px; background:white; }
.filler { height:50px; }
.below-everything { position:relative; z-index:-1; float:right; width:20px; height:20px; background:red; }
</style>
<p>There should be nothing below.</p>
<div class="multicol" style="-moz-column-gap:10px;">
<div class="multicol" style="column-gap:10px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:10.1px;">
<div class="multicol" style="column-gap:10.1px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:10.2px;">
<div class="multicol" style="column-gap:10.2px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:10.3px;">
<div class="multicol" style="column-gap:10.3px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:10.4px;">
<div class="multicol" style="column-gap:10.4px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:10.5px;">
<div class="multicol" style="column-gap:10.5px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:10.6px;">
<div class="multicol" style="column-gap:10.6px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:10.7px;">
<div class="multicol" style="column-gap:10.7px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:10.8px;">
<div class="multicol" style="column-gap:10.8px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:10.9px;">
<div class="multicol" style="column-gap:10.9px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>
<div class="multicol" style="-moz-column-gap:11px;">
<div class="multicol" style="column-gap:11px;">
<div class="filler"></div>
<div class="below-everything"></div>
</div>

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-gap' with large value</title>
<title>CSS Multi-column Layout Test: 'column-gap' with large value</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 'column-gap" />
<link rel="match" href="multicol-gap-large-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that when '-moz-column-gap' is large and when used '-moz-column-width' is narrow, then content extends into -moz-column-gap and content can extend, overflow outside the edges of the multi-colum element if 'overflow' is set to 'visible'." />
<meta name="assert" content="This test checks that when 'column-gap' is large and when used 'column-width' is narrow, then content extends into column-gap and content can extend, overflow outside the edges of the multi-colum element if 'overflow' is set to 'visible'." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,8 +25,8 @@
widows: 1;
width: 11em;
-moz-column-count: 4;
-moz-column-gap: 4em;
column-count: 4;
column-gap: 4em;
/*
N == 4;
@ -35,11 +35,11 @@
/*
In this test, the content of first 3 column
boxes extend into middle of -moz-column-gap and
boxes extend into middle of column-gap and
content of the 4th column box extend outside the
right edge of multi-column. The gray border-right of
multi-column elemen overlaps partially the 3rd
-moz-column-gap.
column-gap.
*/
}

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-gap' with large value</title>
<title>CSS Multi-column Layout Test: 'column-gap' with large value</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 'column-gap" />
<link rel="match" href="multicol-gap-large-002-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -24,8 +24,8 @@
widows: 1;
width: 11em;
-moz-column-count: 2;
-moz-column-gap: 4em;
column-count: 2;
column-gap: 4em;
/*
N == 2;

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-gap with negative value</title>
<title>CSS Multi-column Layout Test: column-gap with negative value</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
<link rel="match" href="multicol-gap-002-ref.xht" />
<meta name="flags" content="ahem invalid" />
<style type="text/css"><![CDATA[
@ -24,9 +24,9 @@
widows: 1;
width: 11em;
-moz-column-count: 4;
-moz-column-gap: 1em;
-moz-column-gap: -1em;
column-count: 4;
column-gap: 1em;
column-gap: -1em;
}
span {color: blue;}

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-count and height</title>
<title>CSS Multi-column Layout Test: column-count and height</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
<link rel="match" href="multicol-height-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that length of column rules is equal to the length of the -moz-columns and if a nth column box overflows outside the available width of a multi-column element, then an (n-1)th column rule should be drawn. In this test, a 3rd column box is created outside the content edge of the multi-column element: therefore, a 2nd blue column rule should be drawn accordingly." />
<meta name="assert" content="This test checks that length of column rules is equal to the length of the columns and if a nth column box overflows outside the available width of a multi-column element, then an (n-1)th column rule should be drawn. In this test, a 3rd column box is created outside the content edge of the multi-column element: therefore, a 2nd blue column rule should be drawn accordingly." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -22,10 +22,10 @@
height: 8em;
width: 14em;
-moz-column-count: 2;
-moz-column-fill: auto;
-moz-column-gap: 2em;
-moz-column-rule: blue solid 10px;
column-count: 2;
column-fill: auto;
column-gap: 2em;
column-rule: blue solid 10px;
}
]]></style>
</head>

View File

@ -23,8 +23,8 @@
height: 8em;
width: 14em;
-moz-column-count: 2;
-moz-column-gap: 2em;
column-count: 2;
column-gap: 2em;
/*
@ -40,13 +40,13 @@
div#outer
{
color: black;
-moz-column-fill: auto;
column-fill: auto;
}
div#inner
{
color: orange;
-moz-column-fill: balance;
column-fill: balance;
}
]]></style>
</head>

View File

@ -21,14 +21,14 @@
vertical-align: top;
}
img.-moz-column-gap {margin-right: 2em;}
img.column-gap {margin-right: 2em;}
img#last {padding-right: 0em;}
]]></style>
</head>
<body>
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div>
</body>

View File

@ -22,8 +22,8 @@
body > div
{
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
/*
N == 3;

View File

@ -17,7 +17,7 @@
img {vertical-align: top;}
img.-moz-column-gap
img.column-gap
{
margin-left: -2em;
margin-right: 3em;
@ -33,7 +33,7 @@
</head>
<body>
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /></div>
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /></div>
</body>
</html>

View File

@ -1,14 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-count' and inherit</title>
<title>CSS Multi-column Layout Test: 'column-count' and inherit</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" />
<link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" />
<link rel="match" href="multicol-inherit-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that '-moz-column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." />
<meta name="assert" content="This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -19,8 +19,8 @@
body > div
{
background-color: blue;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
font: 1.25em/1 Ahem;
width: 32em;
@ -54,8 +54,8 @@
div > div
{
background-color: yellow;
-moz-column-count: inherit;
-moz-column-gap: 1em;
column-count: inherit;
column-gap: 1em;
}
div > div:first-child {margin-top: 0;}

View File

@ -19,7 +19,7 @@ body {
}
body>div {
height: 2em;
-moz-column-width: 8em;
column-width: 8em;
}
div {
font-family: ahem;

View File

@ -23,8 +23,8 @@
padding: 0em;
width: 10em;
-moz-column-gap: 0em;
-moz-column-width: 5em;
column-gap: 0em;
column-width: 5em;
}
li, span {font-size: 1em;}

View File

@ -7,7 +7,7 @@
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that the margin-top of the first child of a multi-column element (with -moz-column-fill: auto) does not collapse with its parent." />
<meta name="assert" content="This test checks that the margin-top of the first child of a multi-column element (with column-fill: auto) does not collapse with its parent." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -24,9 +24,9 @@
margin-top: 0em;
width: 4em;
-moz-column-count: 2;
-moz-column-fill: auto;
-moz-column-gap: 0em;
column-count: 2;
column-fill: auto;
column-gap: 0em;
}
div#first-child {margin-top: 2em;}

View File

@ -7,7 +7,7 @@
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that the margin-top of the first child (an inline-block) of a multi-column element (with -moz-column-fill: balance) does not collapse with its parent." />
<meta name="assert" content="This test checks that the margin-top of the first child (an inline-block) of a multi-column element (with column-fill: balance) does not collapse with its parent." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -24,9 +24,9 @@
margin-top: 0em;
width: 4em;
-moz-column-count: 2;
-moz-column-fill: balance;
-moz-column-gap: 0em;
column-count: 2;
column-fill: balance;
column-gap: 0em;
}
span

View File

@ -23,9 +23,9 @@
font: 1.25em/1 Ahem;
width: 10em;
-moz-column-count: 2;
-moz-column-fill: balance;
-moz-column-gap: 0em;
column-count: 2;
column-fill: balance;
column-gap: 0em;
}
h4

View File

@ -22,20 +22,20 @@
font: 1.25em/1 Ahem;
width: 32em;
-moz-column-gap: 1em;
-moz-column-width: 8em;
column-gap: 1em;
column-width: 8em;
}
/*
N == max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
N == max(1, floor((available-width + column-gap) / (column-width + column-gap)));
N == max(1, floor((32em + 1em) / (8em + 1em)));
N == max(1, floor(33em / 9em));
N == max(1, floor(3.6));
N == max(1, 3);
N == 3;
W == ((available-width + -moz-column-gap) / N) - -moz-column-gap;
W == ((available-width + column-gap) / N) - column-gap;
W == ((32em + 1em) / 3) - 1em;
W == (33em / 3) - 1em;
W == (11em) - 1em;

View File

@ -21,14 +21,14 @@
vertical-align: top;
}
img.-moz-column-gap {margin-right: 2em;}
img.column-gap {margin-right: 2em;}
img#last {padding-right: 0em;}
]]></style>
</head>
<body>
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div>
</body>

View File

@ -23,7 +23,7 @@
<style type="text/css"><![CDATA[
body > div
{
-moz-column-gap: 1em;
column-gap: 1em;
font: 1.25em/1 Ahem;
width: 41em;
}
@ -32,7 +32,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (41em - ((3 - 1) * 1em)) / 3);
W == max(0, (41em - (2 * 1em)) / 3);
W == max(0, (41em - 2em) / 3);
@ -52,7 +52,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (11em - ((3 - 1) * 1em)) / 3);
W == max(0, (11em - (2 * 1em)) / 3);
W == max(0, (11em - 2em) / 3);
@ -78,7 +78,7 @@
orphans: 1;
widows: 1;
-moz-column-count: 3;
column-count: 3;
}
div > div:first-child {margin-top: 0;}

View File

@ -6,7 +6,7 @@
and it has been modified and is now
multicol-nested-column-rule-001.xht
-->
<title>CSS Multi-column Layout Test: nested multi-columns and -moz-column-rule position</title>
<title>CSS Multi-column Layout Test: nested multi-columns and column-rule position</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
@ -22,7 +22,7 @@
<style type="text/css"><![CDATA[
body > div
{
-moz-column-rule: blue solid 1em;
column-rule: blue solid 1em;
font: 1.25em/1 Ahem;
width: 26em;
}
@ -31,7 +31,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (26em - ((3 - 1) * 1em)) / 3);
W == max(0, (26em - (2 * 1em)) / 3);
W == max(0, (26em - 2em) / 3);
@ -39,21 +39,21 @@
W == max(0, 8em);
W == 8em;
So, the first -moz-column-rule should be at:
So, the first column-rule should be at:
1.0em : margin-left of outer div
8.0em : width of 1st column box
0.0em : (1.0em / 2) - (1.0em / 2) : left edge of 1st -moz-column-rule
0.0em : (1.0em / 2) - (1.0em / 2) : left edge of 1st column-rule
=========
9.0em
The 2nd -moz-column-rule should be at:
The 2nd column-rule should be at:
1.0em : margin-left of outer div
8.0em : width of 1st column box
1.0em : first -moz-column-gap
8.0em : width of 2nd column box
0.0em : (1.0em / 2) - (1.0em / 2) : left edge of 2nd -moz-column-rule
0.0em : (1.0em / 2) - (1.0em / 2) : left edge of 2nd column-rule
=========
18.0em
@ -95,8 +95,8 @@
orphans: 1;
widows: 1;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
]]></style>
</head>

View File

@ -22,15 +22,15 @@
font: 1.25em/1 Ahem;
width: 32em;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
/*
N == 3;
W == ((available-width + -moz-column-gap) / N) - -moz-column-gap;
W == ((available-width + column-gap) / N) - column-gap;
W == ((32em + 1em) / 3) - 1em;
W == (33em / 3) - 1em;
W == (11em) - 1em;

View File

@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: nested multi-moz-columns and vertical margin (complex)</title>
<title>CSS Multi-column Layout Test: nested multicolumns and vertical margin (complex)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
@ -41,8 +41,8 @@
orphans: 1;
widows: 1;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
div div {margin: 0em 1em;}
@ -57,7 +57,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (41em - ((3 - 1) * 1em)) / 3);
W == max(0, (41em - (2 * 1em)) / 3);
W == max(0, (41em - 2em) / 3);
@ -77,7 +77,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (11em - ((3 - 1) * 1em)) / 3);
W == max(0, (11em - (2 * 1em)) / 3);
W == max(0, (11em - 2em) / 3);

View File

@ -33,8 +33,8 @@
orphans: 1;
widows: 1;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
/*
@ -43,7 +43,7 @@
43em - 2em (horizontal margins) == available-width
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (41em - ((3 - 1) * 1em)) / 3);
W == max(0, (41em - (2 * 1em)) / 3);
W == max(0, (41em - 2em) / 3);
@ -59,7 +59,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (11em - ((3 - 1) * 1em)) / 3);
W == max(0, (11em - (2 * 1em)) / 3);
W == max(0, (11em - 2em) / 3);

View File

@ -33,8 +33,8 @@
orphans: 1;
widows: 1;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
div div {margin: 0 1em;}
@ -47,7 +47,7 @@
43em - 2em (horizontal margins) == available-width
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (41em - ((3 - 1) * 1em)) / 3);
W == max(0, (41em - (2 * 1em)) / 3);
W == max(0, (41em - 2em) / 3);
@ -63,7 +63,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (11em - ((3 - 1) * 1em)) / 3);
W == max(0, (11em - (2 * 1em)) / 3);
W == max(0, (11em - 2em) / 3);

View File

@ -33,8 +33,8 @@
orphans: 1;
widows: 1;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
div div {margin: 0 1em;}
@ -45,7 +45,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (41em - ((3 - 1) * 1em)) / 3);
W == max(0, (41em - (2 * 1em)) / 3);
W == max(0, (41em - 2em) / 3);
@ -61,7 +61,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (11em - ((3 - 1) * 1em)) / 3);
W == max(0, (11em - (2 * 1em)) / 3);
W == max(0, (11em - 2em) / 3);

View File

@ -7,7 +7,7 @@
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" />
<link rel="match" href="multicol-overflow-000-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that column gap appears between two -moz-columns." />
<meta name="assert" content="This test checks that column gap appears between two columns." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,9 +25,9 @@
div
{
-moz-columns: 2;
-moz-column-fill: balance;
-moz-column-gap: 0px;
columns: 2;
column-fill: balance;
column-gap: 0px;
height: 2em;
width: 20em;
}

View File

@ -26,20 +26,20 @@
height: 2em;
width: 32em;
-moz-column-gap: 1em;
-moz-column-width: 8em;
column-gap: 1em;
column-width: 8em;
}
/*
N == max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
N == max(1, floor((available-width + column-gap) / (column-width + column-gap)));
N == max(1, floor((32em + 1em) / (8em + 1em)));
N == max(1, floor(33em / 9em));
N == max(1, floor(3.6));
N == max(1, 3);
N == 3;
W == ((available-width + -moz-column-gap) / N) - -moz-column-gap;
W == ((available-width + column-gap) / N) - column-gap;
W == ((32em + 1em) / 3) - 1em;
W == (33em / 3) - 1em;
W == (11em) - 1em;

View File

@ -4,7 +4,7 @@
<title>CSS Multi-column Layout Test: column width becomes wider to fill available space</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1 '-moz-column-width'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1 'column-width'" />
<link rel="match" href="multicol-reduce-000-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that column width is increased to fill the available space: in this test, there are only 2 column boxes." />
@ -27,19 +27,19 @@
div#test
{
-moz-column-gap: 0;
-moz-column-width: 201px;
column-gap: 0;
column-width: 201px;
/*
N == max(1, floor((U + -moz-column-gap)/(-moz-column-width + -moz-column-gap)))
N == max(1, floor((U + column-gap)/(column-width + column-gap)))
N == max(1, floor((600px + 0px)/(201px + 0)))
N == max(1, floor(600px/201px))
N == max(1, floor(2.985))
N == max(1, 2)
N == 2;
W == max(0, ((U + -moz-column-gap)/N - -moz-column-gap))
W == max(0, ((U + column-gap)/N - column-gap))
W == max(0, ((600px + 0px)/2 - 0px))
W == max(0, ((600px)/2 - 0px))
W == max(0, (300px - 0px))

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule shorthand (basic)</title>
<title>CSS Multi-column Layout Test: column-rule shorthand (basic)</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" />
<link rel="match" href="multicol-rule-000-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -24,9 +24,9 @@
div#test
{
-moz-columns: 3;
-moz-column-gap: 1px;
-moz-column-rule: lime solid 1px;
columns: 3;
column-gap: 1px;
column-rule: lime solid 1px;
/*

View File

@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule exceeding -moz-column-gap</title>
<title>CSS Multi-column Layout Test: column-rule exceeding column-gap</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" />
@ -26,9 +26,9 @@
div#test
{
-moz-columns: 2;
-moz-column-gap: 0em;
-moz-column-rule: green solid 20em;
columns: 2;
column-gap: 0em;
column-rule: green solid 20em;
/*

View File

@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multicolumn | -moz-column-rule</title>
<title>multicolumn | column-rule</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/>
<link rel="match" href="multicol-rule-ref.xht"/>
@ -30,8 +30,8 @@ body>div {
orphans: 1;
widows: 1;
-moz-column-count: 4;
-moz-column-gap: 1em;
column-count: 4;
column-gap: 1em;
}
span {
background: blue;

View File

@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule (basic)</title>
<title>CSS Multi-column Layout Test: column-rule (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" />
@ -24,11 +24,11 @@
widows: 1;
width: 15em;
-moz-column-count: 4;
-moz-column-gap: 1em;
-moz-column-rule-color: blue;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1em;
column-count: 4;
column-gap: 1em;
column-rule-color: blue;
column-rule-style: solid;
column-rule-width: 1em;
}
]]></style>
</head>

View File

@ -1,12 +1,12 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-fill: balance' and -moz-column-rule</title>
<title>CSS Multi-column Layout Test: 'column-fill: balance' and column-rule</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-02 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" />
<link rel="match" href="multicol-rule-004-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that when '-moz-column-fill: balance' distributes equally inline content into column boxes in a way that does not completely fill column boxes, then -moz-column-rule must nevertheless still be painted entirely, that is for the whole length of column boxes, even though the whole inline content may not fill the whole length of the column boxes." />
<meta name="assert" content="This test checks that when 'column-fill: balance' distributes equally inline content into column boxes in a way that does not completely fill column boxes, then column-rule must nevertheless still be painted entirely, that is for the whole length of column boxes, even though the whole inline content may not fill the whole length of the column boxes." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -41,10 +41,10 @@
right: 80px;
width: 13em;
-moz-column-count: 2;
-moz-column-fill: balance;
-moz-column-gap: 5em;
-moz-column-rule: green solid 5em;
column-count: 2;
column-fill: balance;
column-gap: 5em;
column-rule: green solid 5em;
}
]]></style>
</head>

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule-color (basic)</title>
<title>CSS Multi-column Layout Test: column-rule-color (basic)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" />
<link rel="match" href="multicol-rule-color-001-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -23,18 +23,18 @@
widows: 1;
width: 14em;
-moz-column-count: 4;
-moz-column-gap: 1em;
-moz-column-rule-color: blue;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1em;
column-count: 4;
column-gap: 1em;
column-rule-color: blue;
column-rule-style: solid;
column-rule-width: 1em;
}
/*
N == 4;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (14em - ((4 - 1) * 1em)) / 4);
W == max(0, (14em - (3 * 1em)) / 4);
W == max(0, (14em - (3em)) / 4);

View File

@ -1,14 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule-color: inherit</title>
<title>CSS Multi-column Layout Test: column-rule-color: inherit</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-02 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. '-moz-column-rule-color'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. 'column-rule-color'" />
<link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" />
<link rel="match" href="multicol-rule-color-inherit-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that, by default, -moz-column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case -moz-column-rule-color will be inherited from the parent's -moz-column-rule-color value." />
<meta name="assert" content="This test checks that, by default, column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case column-rule-color will be inherited from the parent's column-rule-color value." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -18,8 +18,8 @@
<style type="text/css"><![CDATA[
div#parent
{
-moz-column-rule-color: green;
-moz-column-rule-style: none;
column-rule-color: green;
column-rule-style: none;
font: 1.25em/1 Ahem;
width: 17em;
}
@ -28,7 +28,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (17em - ((3 - 1) * 1em)) / 3);
W == max(0, (17em - (2 * 1em)) / 3);
W == max(0, (17em - 2em) / 3);
@ -42,7 +42,7 @@
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (5em - ((3 - 1) * 1em)) / 3);
W == max(0, (5em - (2 * 1em)) / 3);
W == max(0, (5em - 2em) / 3);
@ -58,15 +58,15 @@
orphans: 1;
widows: 1;
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule-width: 1em;
column-count: 3;
column-gap: 1em;
column-rule-width: 1em;
}
div.child
{
-moz-column-rule-color: inherit;
-moz-column-rule-style: solid;
column-rule-color: inherit;
column-rule-style: solid;
font-size: 1em;
}
]]></style>

View File

@ -1,14 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule-color: inherit (complex)</title>
<title>CSS Multi-column Layout Test: column-rule-color: inherit (complex)</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 and 2016-10-02 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. '-moz-column-rule-color'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. 'column-rule-color'" />
<link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" />
<link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color" title="5.2. The 'currentcolor' keyword" />
<link rel="match" href="multicol-rule-color-inherit-001-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="In this test, div#parent's computed '-moz-column-rule-color' is given by div#parent's 'currentcolor' (a reserved keyword) and not 'red'. Then div.child's '-moz-column-rule-color' take such specified value ('currentcolor') from its parent (due to 'inherit' keyword) and not 'red'. And then, it is applied to div.child's '-moz-column-rule-color'." />
<meta name="assert" content="In this test, div#parent's computed 'column-rule-color' is given by div#parent's 'currentcolor' (a reserved keyword) and not 'red'. Then div.child's 'column-rule-color' take such specified value ('currentcolor') from its parent (due to 'inherit' keyword) and not 'red'. And then, it is applied to div.child's 'column-rule-color'." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -29,18 +29,18 @@
font-size: 1em;
width: 5em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule-color: inherit;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1em;
column-count: 3;
column-gap: 1em;
column-rule-color: inherit;
column-rule-style: solid;
column-rule-width: 1em;
}
/*
N == 3;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (5em - ((3 - 1) * 1em)) / 3);
W == max(0, (5em - (2 * 1em)) / 3);
W == max(0, (5em - 2em) / 3);

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'dashed' border style</title>
<title>CSS Multi-column Layout Test: column-rule shorthand with 'dashed' border style</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" />
<link rel="match" href="multicol-rule-dashed-000-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -25,9 +25,9 @@
div#test
{
-moz-columns: 2;
-moz-column-gap: 0.2em;
-moz-column-rule: lime dashed 0.2em;
columns: 2;
column-gap: 0.2em;
column-rule: lime dashed 0.2em;
/*

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'dotted' border style</title>
<title>CSS Multi-column Layout Test: column-rule shorthand with 'dotted' border style</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" />
<link rel="match" href="multicol-rule-dotted-000-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -25,9 +25,9 @@
div#test
{
-moz-columns: 2;
-moz-column-gap: 0.2em;
-moz-column-rule: lime dotted 0.2em;
columns: 2;
column-gap: 0.2em;
column-rule: lime dotted 0.2em;
/*

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'double' border style</title>
<title>CSS Multi-column Layout Test: column-rule shorthand with 'double' border style</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" />
<link rel="match" href="multicol-rule-double-000-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -25,9 +25,9 @@
div#test
{
-moz-columns: 2;
-moz-column-gap: 0.2em;
-moz-column-rule: lime double 0.2em;
columns: 2;
column-gap: 0.2em;
column-rule: lime double 0.2em;
/*

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule-width</title>
<title>CSS Multi-column Layout Test: column-rule-width</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. 'column-rule-width'" />
<link rel="match" href="multicol-rule-fraction-001-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -24,18 +24,18 @@
widows: 1;
width: 14em;
-moz-column-count: 4;
-moz-column-gap: 1em;
-moz-column-rule-color: blue;
-moz-column-rule-style: solid;
-moz-column-rule-width: 0.9em;
column-count: 4;
column-gap: 1em;
column-rule-color: blue;
column-rule-style: solid;
column-rule-width: 0.9em;
}
/*
N == 4;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (14em - ((4 - 1) * 1em)) / 4);
W == max(0, (14em - (3 * 1em)) / 4);
W == max(0, (14em - (3em)) / 4);

View File

@ -1,13 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: wide -moz-column-rule-width painted above background-color</title>
<title>CSS Multi-column Layout Test: wide column-rule-width painted above background-color</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. 'column-rule-width'" />
<link rel="match" href="multicol-rule-fraction-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes above the background of the multi-column element but below the inline content inside the multicol element. In this test, the blue -moz-column-rule is painted above the yellow background-color but below (under) the black Ahem glyphs." />
<meta name="assert" content="This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes above the background of the multi-column element but below the inline content inside the multicol element. In this test, the blue column-rule is painted above the yellow background-color but below (under) the black Ahem glyphs." />
<style type="text/css"><![CDATA[
@font-face {
font-family: Ahem;
@ -25,18 +25,18 @@
widows: 1;
width: 14em;
-moz-column-count: 4;
-moz-column-gap: 1em;
-moz-column-rule-color: blue;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1.9em;
column-count: 4;
column-gap: 1em;
column-rule-color: blue;
column-rule-style: solid;
column-rule-width: 1.9em;
}
/*
N == 4;
W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
W == max(0, (14em - ((4 - 1) * 1em)) / 4);
W == max(0, (14em - (3 * 1em)) / 4);
W == max(0, (14em - (3em)) / 4);

View File

@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multicolumn | -moz-column-rule</title>
<title>multicolumn | column-rule</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/>
<link rel="match" href="multicol-rule-fraction-3-ref.xht"/>
@ -30,8 +30,8 @@ body>div {
orphans: 1;
widows: 1;
-moz-column-count: 4;
-moz-column-gap: 1em;
column-count: 4;
column-gap: 1em;
}
span {
background: blue;

View File

@ -2,7 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multicolumn | -moz-column-rule</title>
<title>multicolumn | column-rule</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
<style type="text/css"><![CDATA[
body {

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'groove' border style</title>
<title>CSS Multi-column Layout Test: column-rule shorthand with 'groove' border style</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" />
<link rel="match" href="multicol-rule-groove-000-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -25,9 +25,9 @@
div#test
{
-moz-columns: 2;
-moz-column-gap: 0.2em;
-moz-column-rule: lime groove 0.2em;
columns: 2;
column-gap: 0.2em;
column-rule: lime groove 0.2em;
/*

View File

@ -1,10 +1,10 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'hidden' border style</title>
<title>CSS Multi-column Layout Test: column-rule shorthand with 'hidden' border style</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" />
<link rel="match" href="multicol-rule-hidden-000-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
@ -25,9 +25,9 @@
div#test
{
-moz-columns: 2;
-moz-column-gap: 0.2em;
-moz-column-rule: red hidden 0.2em;
columns: 2;
column-gap: 0.2em;
column-rule: red hidden 0.2em;
/*

Some files were not shown because too many files have changed in this diff Show More