mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-08 19:04:45 +00:00
Bug 1594937 - Remove w3c-css/received/css-multicol reftests. r=dbaron
Bug 1594937 comment 2 provides an analysis on why it is OK to remove
css-multicol reftests.
The manual modifications in this patch are:
- Remove `os.path.join("css-multicol")` in import-tests.py.
- Remove css-multicol lines in failures.list
- Migrate geckoview only failures annotations (bug 1558509) in failures.list
to wpt ini files.
- Add fuzzy-if annotation to dom/tests/reftest/bug453105.html for Android.
(bug 1600534)
Others parts are generated by running import-tests.py on a wpt
repository with commit 15f199c91a72b0d51bf0a12b3b77827ecb5051ff.
Differential Revision: https://phabricator.services.mozilla.com/D52928
--HG--
extra : moz-landing-system : lando
This commit is contained in:
Ting-Yu Lin
parent
0070e7ec58
commit
373306dcc0
@ -1,4 +1,4 @@
|
||||
== bug453105.html bug453105-ref.html
|
||||
fuzzy-if(Android,0-4,0-1) == bug453105.html bug453105-ref.html # bug 1600534
|
||||
== optiontext.html optiontext-ref.html
|
||||
== bug456008.xhtml bug456008-ref.html
|
||||
fuzzy-if(skiaContent,0-2,0-3) == bug439965.html bug439965-ref.html
|
||||
|
||||
@ -174,135 +174,10 @@ css-writing-modes/text-combine-upright-layout-rules-001.html
|
||||
fails css-writing-modes/normal-flow-overconstrained-vlr-005.xht
|
||||
fails css-writing-modes/normal-flow-overconstrained-vrl-004.xht
|
||||
|
||||
#### CSS Multi-column 1 ##############################################
|
||||
|
||||
# Fuzzy annotations for multicol tests are due to AA differences.
|
||||
css-multicol/multicol-block-no-clip-001.xht
|
||||
css-multicol/multicol-block-no-clip-002.xht
|
||||
fails css-multicol/multicol-br-inside-avoidcolumn-001.xht
|
||||
fails css-multicol/multicol-break-000.xht
|
||||
fails css-multicol/multicol-break-001.xht
|
||||
fuzzy(0-135,0-1008) css-multicol/multicol-clip-001.xht
|
||||
fuzzy(0-135,0-770) css-multicol/multicol-clip-002.xht
|
||||
fuzzy(0-135,0-467) css-multicol/multicol-collapsing-001.xht
|
||||
fuzzy(0-87,0-180) css-multicol/multicol-columns-001.xht
|
||||
fuzzy(0-87,0-180) css-multicol/multicol-columns-002.xht
|
||||
fuzzy(0-87,0-180) css-multicol/multicol-columns-003.xht
|
||||
fuzzy(0-87,0-180) css-multicol/multicol-columns-004.xht
|
||||
fuzzy(0-87,0-180) css-multicol/multicol-columns-005.xht
|
||||
fuzzy(0-87,0-180) css-multicol/multicol-columns-006.xht
|
||||
fuzzy(0-87,0-180) css-multicol/multicol-columns-007.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-columns-invalid-001.xht
|
||||
css-multicol/multicol-columns-invalid-002.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-columns-toolong-001.xht
|
||||
fuzzy(0-135,0-530) css-multicol/multicol-containing-001.xht
|
||||
fuzzy(0-215,0-241) css-multicol/multicol-containing-002.xht
|
||||
fuzzy(0-87,0-180) css-multicol/multicol-count-001.xht
|
||||
fails-if(!OSX) random-if(OSX) css-multicol/multicol-count-002.xht
|
||||
fails-if(geckoview) css-multicol/multicol-count-computed-003.xht # Bug 1558509 for GV
|
||||
fuzzy-if(winWidget||OSX||gtkWidget,0-112,0-861) fails-if(geckoview) css-multicol/multicol-count-computed-004.xht # Bug 1558509 for GV
|
||||
fails-if(geckoview) css-multicol/multicol-count-computed-005.xht # Bug 1558509 for GV
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-count-negative-001.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-count-negative-002.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-count-non-integer-001.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-count-non-integer-002.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-count-non-integer-003.xht
|
||||
fuzzy(0-135,0-80) css-multicol/multicol-fill-auto-002.xht
|
||||
fuzzy(0-135,0-3270) css-multicol/multicol-fill-auto-003.xht
|
||||
fuzzy(0-135,0-80) css-multicol/multicol-fill-balance-001.xht
|
||||
fuzzy(0-135,0-821) css-multicol/multicol-gap-000.xht
|
||||
fuzzy(0-255,0-329) css-multicol/multicol-gap-001.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-gap-002.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-gap-003.xht
|
||||
fuzzy(0-107,0-1823) css-multicol/multicol-gap-fraction-001.xht
|
||||
fuzzy-if(winWidget||OSX||gtkWidget,0-204,0-1048) fuzzy-if(skiaContent,0-208,0-1048) fails-if(geckoview) css-multicol/multicol-gap-large-001.xht # Bug 1558509 for GV
|
||||
fuzzy(0-225,0-920) css-multicol/multicol-gap-large-002.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-gap-negative-001.xht
|
||||
pref(layout.css.column-span.enabled,true) css-multicol/multicol-height-block-child-001.xht
|
||||
fuzzy(0-255,0-3762) css-multicol/multicol-inherit-001.xht
|
||||
fuzzy(0-135,0-1893) css-multicol/multicol-inherit-002.xht
|
||||
fails-if(!OSX) random-if(OSX) css-multicol/multicol-inherit-003.xht
|
||||
fuzzy(0-97,0-264) css-multicol/multicol-list-item-001.xht
|
||||
fuzzy(0-73,0-1200) css-multicol/multicol-margin-001.xht
|
||||
fuzzy(0-73,0-1200) css-multicol/multicol-margin-002.xht
|
||||
fuzzy(0-243,0-3322) fuzzy-if(skiaContent,0-244,0-3322) css-multicol/multicol-margin-child-001.xht
|
||||
fuzzy(0-255,0-4008) css-multicol/multicol-nested-002.xht
|
||||
fuzzy(0-255,0-4109) css-multicol/multicol-nested-005.xht
|
||||
fuzzy(0-204,0-2463) fuzzy-if(skiaContent,0-208,0-2463) css-multicol/multicol-nested-margin-001.xht
|
||||
css-multicol/multicol-nested-margin-002.xht
|
||||
fuzzy(0-204,0-2371) fuzzy-if(skiaContent,0-208,0-2371) css-multicol/multicol-nested-margin-003.xht
|
||||
fuzzy(0-225,0-2529) css-multicol/multicol-nested-margin-004.xht
|
||||
fuzzy(0-225,0-2529) css-multicol/multicol-nested-margin-005.xht
|
||||
fuzzy(0-135,0-142) css-multicol/multicol-overflow-000.xht
|
||||
fuzzy(0-204,0-1844) fuzzy-if(skiaContent,0-208,0-1844) css-multicol/multicol-overflowing-001.xht
|
||||
fuzzy-if(skiaContent,0-64,0-2) css-multicol/multicol-reduce-000.xht
|
||||
css-multicol/multicol-rule-000.xht
|
||||
fuzzy-if(!OSX,0-135,0-1584) css-multicol/multicol-rule-001.xht
|
||||
fails-if(!OSX) random-if(OSX) css-multicol/multicol-rule-002.xht
|
||||
css-multicol/multicol-rule-003.xht
|
||||
pref(layout.css.column-span.enabled,true) css-multicol/multicol-rule-004.xht
|
||||
css-multicol/multicol-rule-color-001.xht
|
||||
fuzzy(0-106,0-354) css-multicol/multicol-rule-dashed-000.xht
|
||||
fuzzy(0-106,0-354) css-multicol/multicol-rule-dotted-000.xht
|
||||
fuzzy(0-106,0-354) css-multicol/multicol-rule-double-000.xht
|
||||
css-multicol/multicol-rule-fraction-001.xht
|
||||
css-multicol/multicol-rule-fraction-002.xht
|
||||
fuzzy-if(winWidget||Android,0-113,0-792) css-multicol/multicol-rule-fraction-003.xht
|
||||
fuzzy(0-127,0-500) css-multicol/multicol-rule-groove-000.xht
|
||||
fuzzy(0-94,0-256) css-multicol/multicol-rule-hidden-000.xht
|
||||
fuzzy(0-127,0-500) css-multicol/multicol-rule-inset-000.xht
|
||||
fuzzy(0-127,0-500) css-multicol/multicol-rule-outset-000.xht
|
||||
fails-if(!OSX) random-if(OSX) css-multicol/multicol-rule-px-001.xht
|
||||
fuzzy(0-127,0-500) css-multicol/multicol-rule-ridge-000.xht
|
||||
fuzzy(0-106,0-354) css-multicol/multicol-rule-solid-000.xht
|
||||
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
|
||||
|
||||
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
|
||||
pref(layout.css.column-span.enabled,true) fails-if(geckoview) css-multicol/multicol-span-all-margin-001.xht # Bug 1558509 for GV
|
||||
pref(layout.css.column-span.enabled,true) fails-if(geckoview) css-multicol/multicol-span-all-margin-002.xht # Bug 1558509 for GV
|
||||
pref(layout.css.column-span.enabled,true) fails css-multicol/multicol-span-all-margin-bottom-001.xht # Upstream version patched in bug 1496275. It should pass after importing wpt in bug 1584324.
|
||||
pref(layout.css.column-span.enabled,true) fails-if(geckoview) css-multicol/multicol-span-all-margin-nested-001.xht # Bug 1558509 for GV
|
||||
pref(layout.css.column-span.enabled,true) fails-if(geckoview) css-multicol/multicol-span-all-margin-nested-002.xht # Bug 1558509 for GV
|
||||
pref(layout.css.column-span.enabled,true) css-multicol/multicol-span-all-margin-nested-firstchild-001.xht
|
||||
pref(layout.css.column-span.enabled,true) css-multicol/multicol-span-float-001.xht
|
||||
pref(layout.css.column-span.enabled,true) fails css-multicol/multicol-span-none-001.xht # Upstream version patched in bug 1495875. It should pass after importing wpt in bug 1584324.
|
||||
|
||||
fails css-multicol/multicol-table-cell-001.xht
|
||||
fails css-multicol/multicol-table-cell-height-001.xht
|
||||
fails css-multicol/multicol-table-cell-height-002.xht
|
||||
fails css-multicol/multicol-table-cell-vertical-align-001.xht
|
||||
fuzzy(0-204,0-930) fuzzy-if(skiaContent,0-208,0-930) css-multicol/multicol-width-002.xht
|
||||
fails-if(!OSX) random-if(OSX) css-multicol/multicol-width-count-002.xht
|
||||
fails-if(!OSX) random-if(OSX) css-multicol/multicol-width-negative-001.xht
|
||||
fuzzy(0-225,0-1060) css-multicol/multicol-width-large-001.xht
|
||||
fails css-multicol/multicol-width-small-001.xht
|
||||
fuzzy(0-225,0-1060) css-multicol/multicol-width-invalid-001.xht
|
||||
fuzzy(0-225,0-1060) css-multicol/multicol-width-large-002.xht
|
||||
fuzzy(0-225,0-13600) css-multicol/multicol-nested-column-rule-001.xht
|
||||
fuzzy(0-94,0-256) css-multicol/multicol-rule-none-000.xht
|
||||
fuzzy-if(OSX&&!webrender,255-255,100-150) css-writing-modes/outline-inline-vlr-006.html
|
||||
|
||||
#This test seems to pass only on Linux-opt build, on everything else
|
||||
#Therefore using fuzzy annotation as a catch all
|
||||
fuzzy(0-255,0-2808) css-multicol/multicol-rule-large-001.xht
|
||||
|
||||
# multicol-fill-auto-block-children-ref.xht has been updated in wpt in
|
||||
# bug 1523595 Part 4. Updating to the upstream version should eliminate the
|
||||
# fuzzy-if on OSX for multicol-fill-auto-block-children-001.xht.
|
||||
pref(layout.css.column-span.enabled,true) fuzzy-if(OSX,255-255,2762-2762) css-multicol/multicol-fill-auto-block-children-001.xht
|
||||
pref(layout.css.column-span.enabled,true) css-multicol/multicol-fill-auto-block-children-002.xht
|
||||
pref(layout.css.column-span.enabled,true) fuzzy-if(winWidget,40-47,8-8) fuzzy-if(OSX,0-27,0-11) css-multicol/multicol-span-all-block-sibling-003.xht
|
||||
|
||||
# skip these tests since they haven't been triaged yet.
|
||||
# These tests were added to the tree as part of an update for Bug 1430939.
|
||||
skip css-multicol/multicol-fill-balance-002.html
|
||||
skip css-multicol/multicol-gap-fraction-002.html
|
||||
skip css-multicol/multicol-rule-shorthand-2.xht
|
||||
skip css-multicol/multicol-width-ch-001.xht
|
||||
skip css-values/ex-calc-expression-001.html
|
||||
skip css-values/ic-unit-001.html
|
||||
skip css-values/ic-unit-002.html
|
||||
|
||||
@ -33,7 +33,6 @@ gSubtrees = [
|
||||
os.path.join("css-namespaces"),
|
||||
os.path.join("css-conditional"),
|
||||
os.path.join("css-values"),
|
||||
os.path.join("css-multicol"),
|
||||
os.path.join("css-writing-modes"),
|
||||
os.path.join("selectors"),
|
||||
]
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
@frivoal
|
||||
@mstensho
|
||||
@rachelandrew
|
||||
@ -1,70 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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"/>
|
||||
<link rel="match" href="reference/multicol-basic-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
</style>
|
||||
<style type="text/css">
|
||||
.multicol-wrapper>*{
|
||||
font-family: Ahem;
|
||||
}
|
||||
|
||||
div.multicol-wrapper{
|
||||
border: thin solid black;
|
||||
display: inline-block;
|
||||
margin: 1em auto;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
columns: 3;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
|
||||
.multicol-basic-ref-item{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.item-1{
|
||||
background: purple;
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.item-2{
|
||||
background: orange;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.item-3{
|
||||
background: blue;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
|
||||
<div class="multicol-wrapper">
|
||||
<div class="multicol-basic-ref">
|
||||
<span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
<span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
<span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,70 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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"/>
|
||||
<link rel="match" href="reference/multicol-basic-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
</style>
|
||||
<style type="text/css">
|
||||
.multicol-wrapper>*{
|
||||
font-family: Ahem;
|
||||
}
|
||||
|
||||
div.multicol-wrapper{
|
||||
border: thin solid black;
|
||||
display: inline-block;
|
||||
margin: 1em auto;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
column-count: 3;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
|
||||
.multicol-basic-ref-item{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.item-1{
|
||||
background: purple;
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.item-2{
|
||||
background: orange;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.item-3{
|
||||
background: blue;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
|
||||
<div class="multicol-wrapper">
|
||||
<div class="multicol-basic-ref">
|
||||
<span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
<span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
<span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,70 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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"/>
|
||||
<link rel="match" href="reference/multicol-basic-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
</style>
|
||||
<style type="text/css">
|
||||
.multicol-wrapper>*{
|
||||
font-family: Ahem;
|
||||
}
|
||||
|
||||
div.multicol-wrapper{
|
||||
border: thin solid black;
|
||||
display: inline-block;
|
||||
margin: 1em auto;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
columns: 120px;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
|
||||
.multicol-basic-ref-item{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.item-1{
|
||||
background: purple;
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.item-2{
|
||||
background: orange;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.item-3{
|
||||
background: blue;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
|
||||
<div class="multicol-wrapper">
|
||||
<div class="multicol-basic-ref">
|
||||
<span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
<span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
<span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,70 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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"/>
|
||||
<link rel="match" href="reference/multicol-basic-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
</style>
|
||||
<style type="text/css">
|
||||
.multicol-wrapper>*{
|
||||
font-family: Ahem;
|
||||
}
|
||||
|
||||
div.multicol-wrapper{
|
||||
border: thin solid black;
|
||||
display: inline-block;
|
||||
margin: 1em auto;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
column-width: 120px;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
|
||||
.multicol-basic-ref-item{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.item-1{
|
||||
background: purple;
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.item-2{
|
||||
background: orange;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.item-3{
|
||||
background: blue;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
|
||||
<div class="multicol-wrapper">
|
||||
<div class="multicol-basic-ref">
|
||||
<span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
<span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
<span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,24 +0,0 @@
|
||||
<!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: 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"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-count"/>
|
||||
<style type="text/css">
|
||||
div {
|
||||
margin: 1em auto;
|
||||
background: yellow;
|
||||
border: thin solid black;
|
||||
width: 600px;
|
||||
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 columns with no gap or rule between them.</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,23 +0,0 @@
|
||||
<!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: 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"/>
|
||||
<style type="text/css">
|
||||
div {
|
||||
margin: 1em auto;
|
||||
background: yellow;
|
||||
border: thin solid black;
|
||||
width: 600px;
|
||||
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 columns with no gap or rule between them.</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,24 +0,0 @@
|
||||
<!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: 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"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-width"/>
|
||||
<style type="text/css">
|
||||
div {
|
||||
margin: 1em auto;
|
||||
background: yellow;
|
||||
border: thin solid black;
|
||||
width: 600px;
|
||||
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 columns with no gap or rule between them.</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,23 +0,0 @@
|
||||
<!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: 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"/>
|
||||
<style type="text/css">
|
||||
div {
|
||||
margin: 1em auto;
|
||||
background: yellow;
|
||||
border: thin solid black;
|
||||
width: 600px;
|
||||
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 columns with no gap or rule between them.</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,33 +0,0 @@
|
||||
<!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 Reftest Reference</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-24 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
table
|
||||
{
|
||||
border-spacing: 0px;
|
||||
border: gray solid 1em;
|
||||
font: 1.25em/1 serif;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
padding: 0;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
td + td {width: 8em;}
|
||||
|
||||
img, td {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="60" height="20" alt="Image download support must be enabled" /></td><td><img src="support/swatch-orange.png" width="40" height="80" alt="Image download support must be enabled" /></td>
|
||||
</tr></table>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,54 +0,0 @@
|
||||
<!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: Overflowed content inside multicol element</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-24 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" />
|
||||
<link rel="match" href="multicol-block-no-clip-001-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that content in the normal flow that extends into column gaps is not clipped in the middle of the column gap." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
border: gray solid 1em;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
background: black;
|
||||
color: black;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#first-column {color: blue;}
|
||||
|
||||
#second-column {color: orange;}
|
||||
|
||||
#third-column, #fourth-column {color: white;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<span id="first-column"> ab cd ef gh </span>
|
||||
<h4>123</h4>
|
||||
<span id="second-column"> ij kl mn oq </span>
|
||||
<span id="third-column"> ab cd ef gh </span>
|
||||
<span id="fourth-column"> rs tu vw xy </span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,54 +0,0 @@
|
||||
<!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 Reftest Reference</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-24 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
font: 1.25em/1 serif;
|
||||
border: 1em solid gray;
|
||||
width: 11em;
|
||||
height: 6em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {position: absolute;}
|
||||
|
||||
img#black {top: 4em;}
|
||||
|
||||
img#first-orange {top: 5em;}
|
||||
|
||||
img#second-orange {left: 4em;}
|
||||
|
||||
img#first-pink
|
||||
{
|
||||
left: 4em;
|
||||
top: 3em;
|
||||
}
|
||||
|
||||
img#second-pink {left: 8em;}
|
||||
|
||||
img#yellow
|
||||
{
|
||||
left: 8em;
|
||||
top: 1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<img id="blue" src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled" />
|
||||
<img id="black" src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" />
|
||||
<img id="first-orange" src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled" />
|
||||
<img id="second-orange" src="support/swatch-orange.png" width="40" height="60" alt="Image download support must be enabled" />
|
||||
<img id="first-pink" src="support/swatch-pink.png" width="40" height="60" alt="Image download support must be enabled" />
|
||||
<img id="second-pink" src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" />
|
||||
<img id="yellow" src="support/swatch-yellow.png" width="40" height="80" alt="Image download support must be enabled" />
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,56 +0,0 @@
|
||||
<!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: Overflowed content inside and outside multicol element</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-24 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" />
|
||||
<link rel="match" href="multicol-block-no-clip-002-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that content in the normal flow that extends into column gaps is not clipped in the middle of the column gap." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
border: gray solid 1em;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
background: black;
|
||||
color: black;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#first-column {color: blue;}
|
||||
|
||||
#second-column {color: orange;}
|
||||
|
||||
#third-column {color: pink;}
|
||||
|
||||
#fourth-column {color: yellow;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<span id="first-column"> ab cd ef gh </span>
|
||||
<h4>1234</h4>
|
||||
<span id="second-column"> ij kl mn oq </span>
|
||||
<span id="third-column"> ab cd ef gh </span>
|
||||
<span id="fourth-column"> rs tu vw xy </span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,37 +0,0 @@
|
||||
<!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>multicol | break-inside: avoid-column</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-breaks"/>
|
||||
<link rel="match" href="../reference/ref-filled-green-200px-square.html"/>
|
||||
<meta name="flags" content=""/>
|
||||
<style type="text/css"><![CDATA[
|
||||
.multicol {
|
||||
column-count: 2;
|
||||
column-gap: 0;
|
||||
column-fill: auto;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
.multicol > div {
|
||||
height: 200px;
|
||||
break-inside: avoid-column;
|
||||
background: green;
|
||||
}
|
||||
.multicol > div.red {
|
||||
background:red;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="multicol">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,36 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="ahem image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
margin-bottom: 0.5em;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 3em;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
|
||||
|
||||
<div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,60 +0,0 @@
|
||||
<!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: break-after: column (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/#break-before-break-after-break-inside" title="5.1. 'break-before', 'break-after', 'break-inside'" />
|
||||
<link rel="match" href="multicol-break-000-ref.xht" />
|
||||
<meta name="flags" content="ahem image" />
|
||||
<meta name="assert" content="This test checks that basic support of 'break-after: column'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div#test, div#reference
|
||||
{
|
||||
background-color: yellow;
|
||||
margin-bottom: 0.5em;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 3em;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
column-width: 2em;
|
||||
|
||||
/*
|
||||
|
||||
N == 5;
|
||||
|
||||
W == 2em;
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
div#test > div {break-after: column;}
|
||||
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
|
||||
|
||||
<div id="test">
|
||||
<div>A</div>
|
||||
<div>B</div>
|
||||
<div>C</div>
|
||||
</div>
|
||||
|
||||
<div id="reference"><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,35 +0,0 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-14 -->
|
||||
<meta name="flags" content="ahem image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
margin-bottom: 0.5em;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 3em;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
|
||||
|
||||
<div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,59 +0,0 @@
|
||||
<!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: break-before: column (basic)</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-14 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#break-before-break-after-break-inside" title="5.1. 'break-before', 'break-after', 'break-inside'" />
|
||||
<link rel="match" href="multicol-break-001-ref.xht" />
|
||||
<meta name="flags" content="ahem image" />
|
||||
<meta name="assert" content="This test checks that basic support of 'break-before: column'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div#test, div#reference
|
||||
{
|
||||
background-color: yellow;
|
||||
margin-bottom: 0.5em;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 3em;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
column-width: 2em;
|
||||
|
||||
/*
|
||||
|
||||
N == 5;
|
||||
|
||||
W == 2em;
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
div#test > div {break-before: column;}
|
||||
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
|
||||
|
||||
<div id="test">
|
||||
<div>A</div>
|
||||
<div>B</div>
|
||||
<div>C</div>
|
||||
</div>
|
||||
|
||||
<div id="reference"><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<!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 Reftest Reference</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-24 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
border: gray solid 1em;
|
||||
font: 1.25em/1 serif;
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img + img {left: 3em;}
|
||||
|
||||
img + img + img {left: 6em;}
|
||||
]]></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 src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,50 +0,0 @@
|
||||
<!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: overflowed content inside and outside multicol element</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-24 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" />
|
||||
<link rel="match" href="multicol-clip-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that content in the normal flow can extend into column gap. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edge of the multi-column and are therefore rendered thanks to the default 'overflow: visible' declaration." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: white;
|
||||
border: gray solid 1em;
|
||||
color: blue;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
column-count: 3;
|
||||
column-gap: 4em;
|
||||
}
|
||||
|
||||
span {color: black;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<span>
|
||||
bl ac
|
||||
bl ac
|
||||
</span>
|
||||
|
||||
<span>
|
||||
bl ac
|
||||
</span>
|
||||
bl ue
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
border: gray solid 1em;
|
||||
font: 1.25em/1 serif;
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img + img {left: 3em;}
|
||||
|
||||
img + img + img {left: 6em;}
|
||||
]]></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 src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,51 +0,0 @@
|
||||
<!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: overflowed content inside and outside multicol element</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/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" />
|
||||
<link rel="match" href="multicol-clip-002-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that content in the normal flow can extend into column gap before it reaches its middle. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edges of the multi-column and are therefore hidden thanks to the 'overflow: hidden' declaration." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: white;
|
||||
border: gray solid 1em;
|
||||
color: blue;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
overflow: hidden;
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
column-count: 3;
|
||||
column-gap: 4em;
|
||||
}
|
||||
|
||||
span {color: black;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<span>
|
||||
bl ac
|
||||
bl ac
|
||||
</span>
|
||||
|
||||
<span>
|
||||
bl ac
|
||||
</span>
|
||||
bl ue
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: black;
|
||||
border: black solid 1px;
|
||||
font: 1.25em/1 serif;
|
||||
padding: 1em;
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img + img + img {left: 2em;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div><img src="support/swatch-yellow.png" width="40" height="20" 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/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,56 +0,0 @@
|
||||
<!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: no margin collapsing with its first child block 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-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
|
||||
<link rel="match" href="multicol-collapsing-001-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that the top margin of the first child block box of a multicol element does not collapse with the margin top of such multicol element." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body > div
|
||||
{
|
||||
background-color: black;
|
||||
border: black solid 1px;
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
div > div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
font: inherit;
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div>
|
||||
<h4>ab cd</h4>
|
||||
ef gh
|
||||
ij kl
|
||||
mn oq
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,30 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {width: 600px;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>d da d da d da d da d da d da dam dam dam dam dam dam dame dame dame dame dame dame damerdamerdamerdamerdamerdamer<br />d da d da d da d da d da dam dam dam dam dam dame dame dame dame dame damerdamerdamerdamerdamer </div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!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: 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 columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {width: 600px;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
columns: 100px 6;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!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: 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 columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {width: 600px;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
columns: 6 100px;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!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: 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 columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {width: 600px;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
columns: 100px auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!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: 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 columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {width: 600px;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
columns: auto 100px;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!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: 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 columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {width: 600px;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
columns: 6;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!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: 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 columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {width: 600px;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
columns: 6 auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!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: 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 columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {width: 600px;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
columns: auto 6;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,32 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
table
|
||||
{
|
||||
background-color: yellow;
|
||||
border-spacing: 0px;
|
||||
border: gray solid 1em;
|
||||
font: 1.25em/1 serif;
|
||||
}
|
||||
|
||||
td {padding: 0 1em 0 0;}
|
||||
|
||||
img, td {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
|
||||
<td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td>
|
||||
<td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td>
|
||||
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!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 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 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 'columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: 0;
|
||||
columns: 8 normal;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,56 +0,0 @@
|
||||
<!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>
|
||||
|
||||
<!--
|
||||
Original, initial filename of this test was
|
||||
multicol-columns-toolong-002.xht
|
||||
and it should be filename-renamed
|
||||
multicol-columns-invalid-002.xht
|
||||
-->
|
||||
|
||||
<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 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 '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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: 0;
|
||||
columns: 8 auto 6em;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
<!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: 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 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." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
table
|
||||
{
|
||||
background-color: yellow;
|
||||
border-spacing: 0px;
|
||||
border: gray solid 1em;
|
||||
font: 1.25em/1 serif;
|
||||
}
|
||||
|
||||
td {padding: 0 2em 0 0;}
|
||||
|
||||
img, td {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
|
||||
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
|
||||
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,55 +0,0 @@
|
||||
<!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: a column box can not act as containing block for elements with 'position: absolute'</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/#the-multi-column-model" title="2. The multi-column model" />
|
||||
<link rel="match" href="multicol-containing-001-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that a column box does not establish containing block for elements with 'position: absolute'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 3;
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
color: red;
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
}
|
||||
|
||||
/*
|
||||
In this test, the initial containing block establishes containing block
|
||||
for such red span. Therefore, the 2 short red stripes should be
|
||||
positioned out of view, just outside the top edge of viewport.
|
||||
*/
|
||||
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
<span>re dd</span>
|
||||
bl ac
|
||||
bl ac
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,37 +0,0 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div#inline-block
|
||||
{
|
||||
color: green;
|
||||
display: inline-block;
|
||||
font: 1.25em/1 Ahem;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="inline-block">
|
||||
|
||||
<div>4444 4444 4444 4444</div>
|
||||
<div>1 1 1 1 1 1 </div>
|
||||
<div>1 1 1 1 1 1 </div>
|
||||
<div>4444 4444 4444 4444</div>
|
||||
<div>1 1 1 1 1</div>
|
||||
<div>1 1 1 1 1</div>
|
||||
<div>1 1 1 4444 4444</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,44 +0,0 @@
|
||||
<!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: a multi-column can act as containing block for elements with 'position: absolute'</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-multi-column-model" title="2. The multi-column model" />
|
||||
<link rel="match" href="multicol-containing-002-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that a multi-column element can establish containing block for elements with 'position: absolute'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: white;
|
||||
color: green;
|
||||
font: 1.25em/1 Ahem;
|
||||
position: relative;
|
||||
width: 19em;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
span {color: red;}
|
||||
|
||||
img#white-overlapping
|
||||
{
|
||||
left: 11em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>4444 1 1 1 1 4444 1 1 1 4444 1 1 1 1 4444 1 1 1 1 1 1 4444 1<span>RED</span> 1<span>RED</span> 4444 1 1 4444 4444 1 1 4444 1 1 4444 <img id="white-overlapping" src="support/swatch-white.png" width="60" height="40" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!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: 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 '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 '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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {width: 600px;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
column-count: 6;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
d da dam dame damer
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,40 +0,0 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 21em;
|
||||
}
|
||||
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled" />
|
||||
|
||||
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
|
||||
|
||||
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" />
|
||||
|
||||
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" />
|
||||
|
||||
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
|
||||
|
||||
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
|
||||
|
||||
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
|
||||
|
||||
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
|
||||
|
||||
<img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled" />
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!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: 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 '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 '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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
html {background-color: white;}
|
||||
|
||||
body
|
||||
{
|
||||
background-color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
padding-right: 1em;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>55555 1 1 22 1 22 1 1 333 1 333 1 333 55555 55555 1 1 22 1 22 1 1 22 1 22 1 22 55555 55555 1 1 333 1 333 1 4444 4444 1 55555 55555 1 1 333 1 333 1 4444 4444 1 55555
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,25 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="5" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled" /><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="5" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,91 +0,0 @@
|
||||
<!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: 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 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 column-rule." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 13em;
|
||||
|
||||
column-count: 3;
|
||||
column-gap: 5em;
|
||||
column-rule-color: blue;
|
||||
column-rule-style: solid;
|
||||
column-rule-width: 1.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
(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 column-count in this test is 3.
|
||||
|
||||
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);
|
||||
W == max(0, (3em) / 3);
|
||||
W == max(0, 1em);
|
||||
W == 1em;
|
||||
|
||||
So, the used column-width in this test is 1em.
|
||||
*/
|
||||
|
||||
#pink {color: pink;}
|
||||
#orange {color: orange;}
|
||||
#purple {color: purple;}
|
||||
#gray {color: gray;}
|
||||
|
||||
/*
|
||||
Since
|
||||
"
|
||||
content that extends outside column boxes visibly overflows and is not clipped to the column box.
|
||||
"
|
||||
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 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 columns that
|
||||
both have content.
|
||||
"
|
||||
http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules
|
||||
*/
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<span id="pink">PINK</span>
|
||||
<span id="orange">ORAN</span>
|
||||
<span id="purple">PURP</span>
|
||||
<span id="gray">GRAY</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,25 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,52 +0,0 @@
|
||||
<!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 '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 '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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: auto;
|
||||
column-gap: 7em;
|
||||
column-rule-color: red;
|
||||
column-rule-width: 1.5em;
|
||||
column-rule-style: solid;
|
||||
}
|
||||
|
||||
#pink {color: pink;}
|
||||
#orange {color: orange;}
|
||||
#purple {color: purple;}
|
||||
#gray {color: gray;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<span id="pink">Pink</span>
|
||||
<span id="orange">oran</span>
|
||||
<span id="purple">PurP</span>
|
||||
<span id="gray">gray</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,95 +0,0 @@
|
||||
<!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: 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 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 column-rule." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 13em;
|
||||
|
||||
column-gap: 5em;
|
||||
column-rule-color: blue;
|
||||
column-rule-style: solid;
|
||||
column-rule-width: 1.5em;
|
||||
column-width: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
(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 + 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 column-count in this test is 3.
|
||||
|
||||
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 column-width in this test is 1em.
|
||||
*/
|
||||
|
||||
#pink {color: pink;}
|
||||
#orange {color: orange;}
|
||||
#purple {color: purple;}
|
||||
#gray {color: gray;}
|
||||
|
||||
/*
|
||||
Since
|
||||
"
|
||||
content that extends outside column boxes visibly overflows and is not clipped to the column box
|
||||
"
|
||||
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 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 columns that
|
||||
both have content.
|
||||
"
|
||||
http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules
|
||||
*/
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<span id="pink">PINK</span>
|
||||
<span id="orange">ORAN</span>
|
||||
<span id="purple">PURP</span>
|
||||
<span id="gray">GRAY</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,51 +0,0 @@
|
||||
<!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 '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 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 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-count: -1;
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,51 +0,0 @@
|
||||
<!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 '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 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 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-count: 0; /* invalid; must be a greater-than-zero integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,51 +0,0 @@
|
||||
<!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 '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 columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' 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 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-count: 2.1; /* invalid; must be an integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,51 +0,0 @@
|
||||
<!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 '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 columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' 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 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-count: 1.9; /* invalid; must be an integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,51 +0,0 @@
|
||||
<!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 '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 columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' 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 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
column-count: 4;
|
||||
column-count: 2.0; /* invalid; must be an integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,58 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
table
|
||||
{
|
||||
background-color: yellow;
|
||||
border-spacing: 0em;
|
||||
color: lime;
|
||||
margin: 1em 0em;
|
||||
font: 1.25em/1 Ahem;
|
||||
table-layout: fixed;
|
||||
width: 18em;
|
||||
}
|
||||
|
||||
td {padding: 0em;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 3 horizontal bars are <strong>identical</strong>.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>G</td>
|
||||
<td>H</td>
|
||||
<td>I</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>G</td>
|
||||
<td>H</td>
|
||||
<td>I</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>G</td>
|
||||
<td>H</td>
|
||||
<td>I</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,77 +0,0 @@
|
||||
<!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: 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 '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 columns thanks to 'column-fill: balance'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div.test, table#reference
|
||||
{
|
||||
background-color: yellow;
|
||||
color: lime;
|
||||
margin: 1em 0em;
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 18em;
|
||||
}
|
||||
|
||||
div.test
|
||||
{
|
||||
columns: 3;
|
||||
column-fill: balance;
|
||||
column-gap: 0em;
|
||||
|
||||
/*
|
||||
|
||||
N == 3;
|
||||
|
||||
W == 6em;
|
||||
|
||||
*/
|
||||
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
|
||||
div.test > p {margin: 0em;}
|
||||
|
||||
table
|
||||
{
|
||||
border-spacing: 0em;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
td {padding: 0em;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 3 horizontal bars are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="test">
|
||||
<p>A</p>
|
||||
<p>B</p>
|
||||
<p>C</p>
|
||||
</div>
|
||||
|
||||
<div class="test">D<br />E<br />F</div>
|
||||
|
||||
<table id="reference">
|
||||
<tr>
|
||||
<td>G</td>
|
||||
<td>H</td>
|
||||
<td>I</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,53 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
table
|
||||
{
|
||||
background-color: yellow;
|
||||
border-spacing: 0em;
|
||||
color: lime;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 5em;
|
||||
margin: 1em 0em;
|
||||
table-layout: fixed;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
padding: 0em;
|
||||
vertical-align: top;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>G<br />H<br />I</td>
|
||||
<td>J<br />K<br />L</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>G<br />H<br />I</td>
|
||||
<td>J<br />K<br />L</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,70 +0,0 @@
|
||||
<!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: 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 '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 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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div#test, table#reference
|
||||
{
|
||||
background-color: yellow;
|
||||
color: lime;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 5em;
|
||||
margin: 1em 0em;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
columns: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0em;
|
||||
|
||||
/*
|
||||
|
||||
N == 2;
|
||||
|
||||
W == 10em;
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
table
|
||||
{
|
||||
border-spacing: 0em;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
padding: 0em;
|
||||
vertical-align: top;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div id="test">A<br />B<br />C<br />D<br />E<br />F</div>
|
||||
|
||||
<table id="reference">
|
||||
<tr>
|
||||
<td>G<br />H<br />I</td>
|
||||
<td>J<br />K<br />L</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,45 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
float: left;
|
||||
width: 10em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>1 22 333
|
||||
4444 55555
|
||||
666666
|
||||
7777777
|
||||
999999999
|
||||
1 22 333
|
||||
4444 55555
|
||||
666666
|
||||
7777777
|
||||
999999999</div>
|
||||
|
||||
<div>1 22 333
|
||||
4444 55555
|
||||
666666
|
||||
7777777
|
||||
999999999</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,39 +0,0 @@
|
||||
<!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: '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 '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 '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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 10em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 32em;
|
||||
|
||||
column-count: 3;
|
||||
column-fill: auto;
|
||||
column-gap: 1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>1 22 333 4444 55555 666666 7777777 999999999 1 22 333 4444 55555 666666 7777777 999999999 1 22 333 4444 55555 666666 7777777 999999999</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,49 +0,0 @@
|
||||
<!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>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[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body>div {
|
||||
font-family: ahem;
|
||||
font-size: 1.25em;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
height: 3em;
|
||||
width: 2em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
position: relative;
|
||||
margin: 1em;
|
||||
}
|
||||
div.col {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
background: red; position: absolute; z-index: -1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class='ref'>
|
||||
oo<br/>t<br/>o
|
||||
</div>
|
||||
|
||||
<div class='ref'>
|
||||
oo<br/>t<br/>o
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,55 +0,0 @@
|
||||
<!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>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"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body>div {
|
||||
font-family: ahem;
|
||||
font-size: 1.25em;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
height: 3em;
|
||||
width: 2em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
position: relative;
|
||||
margin: 1em;
|
||||
}
|
||||
div.col {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
background: red; position: absolute; z-index: -1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class='col'>
|
||||
<div class='red' style="top: 0; left: 0; height: 3em; width: 1em;"></div>
|
||||
<div class='red' style="top: 0; left: 0; height: 1em; width: 2em;"></div>
|
||||
o<br/>t<br/>
|
||||
o<br/>t<br/>
|
||||
</div>
|
||||
|
||||
<div class='ref'>
|
||||
oo<br/>t<br/>o
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,39 +0,0 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-01 -->
|
||||
<meta name="flags" content="ahem image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div {font: 1.25em/1 Ahem;}
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
|
||||
<div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-green.png" width="220" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,65 +0,0 @@
|
||||
<!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: '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 '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 'column-fill' is set to 'auto'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-image: url("support/red20x20.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2em 4em;
|
||||
border: green solid 1em;
|
||||
color: green;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 6em;
|
||||
width: 21em;
|
||||
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 1em;
|
||||
column-rule: yellow solid 1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
|
||||
<div>1234567890 12 4567 90 123 56 890 123 56789 1 34567 90 12 4567 90
|
||||
123 56 890 123 56</div>
|
||||
|
||||
<!--
|
||||
|
||||
Expected result:
|
||||
|
||||
************ ************
|
||||
|1234567890| |123 56 890|
|
||||
|12 4567 90| |123 56 |
|
||||
|123 56 890| | |
|
||||
|123 56789 | | |
|
||||
|1 34567 90| | |
|
||||
|12 4567 90| | |
|
||||
************ ************
|
||||
|
||||
The digits are the green squares, the white squares
|
||||
are the blank white spaces. The yellow vertical stripe
|
||||
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.
|
||||
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,94 +0,0 @@
|
||||
<!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>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"/>
|
||||
<meta name="flags" content=""/>
|
||||
<style type="text/css"><![CDATA[
|
||||
html {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: blue;
|
||||
width: 1200px;
|
||||
height: 492px;
|
||||
column-count: 3;
|
||||
column-gap: 2em;
|
||||
column-fill: auto;
|
||||
}
|
||||
h1 {
|
||||
column-span: all;
|
||||
font-size: 2em;
|
||||
height: 70px;
|
||||
}
|
||||
dl {
|
||||
font-size: 70%;
|
||||
color: blue;
|
||||
padding: 5px 10px 3px;
|
||||
margin: 0 0 15px;
|
||||
border: 2px solid blue;
|
||||
height: 72px;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
width: 47%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
dd {
|
||||
line-height: 120%;
|
||||
padding: 0;
|
||||
margin: 0 0 5px 47%;
|
||||
width: 50%;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>you should not see the word fail</h1>
|
||||
|
||||
<dl>
|
||||
<dt>block1</dt>
|
||||
<dd>block1 block1</dd>
|
||||
<dd>block1 block1</dd>
|
||||
<dd>block1 block1 block1</dd>
|
||||
<dd>damer block1 block1</dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>block2</dt>
|
||||
<dd>block2 block2</dd>
|
||||
<dd>block2 block2</dd>
|
||||
<dd>block2 block2 block2</dd>
|
||||
<dd>damer block2 block2</dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>block3</dt>
|
||||
<dd>block3 block3</dd>
|
||||
<dd>block3 block3</dd>
|
||||
<dd>block3 block3 block3</dd>
|
||||
<dd>damer block3 block3</dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>block4</dt>
|
||||
<dd>block4 block4</dd>
|
||||
<dd>block4 block4</dd>
|
||||
<dd>block4 block4 block4</dd>
|
||||
<dd>damer block4 block4</dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>fail</dt>
|
||||
<dd>fail fail</dd>
|
||||
<dd>fail fail</dd>
|
||||
<dd>fail fail fail</dd>
|
||||
<dd>fail fail fail</dd>
|
||||
</dl>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,49 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="" />
|
||||
<style type="text/css"><![CDATA[
|
||||
body {margin:0; margin-top:8px;}
|
||||
|
||||
div
|
||||
{
|
||||
float: left;
|
||||
background-color: blue;
|
||||
height: 200px;
|
||||
width: 60%;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
|
||||
margin: 21px 0em;
|
||||
}
|
||||
|
||||
span#pass
|
||||
{
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
color: blue;
|
||||
font-size: 1.5em;
|
||||
font-weight: bolder;
|
||||
|
||||
line-height: 1;
|
||||
margin-top: 122px;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Test passes if "PASS!" is<br />on the right ↘</h1>
|
||||
</div>
|
||||
<span id="pass">PASS!</span>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,74 +0,0 @@
|
||||
<!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: '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. '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 '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;}
|
||||
|
||||
body
|
||||
{
|
||||
background-color: blue;
|
||||
height: 200px;
|
||||
margin: 8px;
|
||||
width: 60%;
|
||||
|
||||
column-count: 3;
|
||||
column-fill: auto;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
color: white;
|
||||
column-span: all;
|
||||
font-size: 2em;
|
||||
line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
|
||||
margin: 21px 0em;
|
||||
/*
|
||||
21px : margin-top of h1 element which must not collapse with body's margin-top
|
||||
80px : content height: 2 line boxes required to render the "Test passes if ..." sentence
|
||||
21px : margin-bottom of h1 element
|
||||
====================================
|
||||
122px : margin box height of h1 element
|
||||
*/
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
color: blue;
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
margin: 0 0 2.25em;
|
||||
/*
|
||||
0px : margin-top of h2 element
|
||||
24px : content height: 1 line box required to render all the nbsp; and PASS! word
|
||||
54px : margin-bottom of h2 element
|
||||
====================================
|
||||
78px : margin box height of h2 element
|
||||
*/
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Test passes if "PASS!" is<br />on the right ↘</h1>
|
||||
|
||||
<h2> </h2>
|
||||
|
||||
<h2> </h2>
|
||||
|
||||
<h2> </h2>
|
||||
|
||||
<h2>PASS!</h2>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,28 +0,0 @@
|
||||
<!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>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 {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: blue;
|
||||
width: 1200px;
|
||||
height: 492px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
padding-top: 0.66em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>you should not see the word fail</h1>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,49 +0,0 @@
|
||||
<!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>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[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body>div {
|
||||
font-family: ahem;
|
||||
font-size: 1.25em;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
height: 3em;
|
||||
width: 2em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
position: relative;
|
||||
margin: 1em;
|
||||
}
|
||||
div.col {
|
||||
column-count: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
background: red; position: absolute; z-index: -1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class='ref'>
|
||||
oo<br/>tt
|
||||
</div>
|
||||
|
||||
<div class='ref'>
|
||||
oo<br/>tt
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,54 +0,0 @@
|
||||
<!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>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"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body>div {
|
||||
font-family: ahem;
|
||||
font-size: 1.25em;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
height: 3em;
|
||||
width: 2em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
position: relative;
|
||||
margin: 1em;
|
||||
}
|
||||
div.col {
|
||||
column-count: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
background: red; position: absolute; z-index: -1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class='col'>
|
||||
<div class='red' style="top: 0; left: 0; height: 2em; width: 2em;"></div>
|
||||
o<br/>t<br/>
|
||||
o<br/>t<br/>
|
||||
</div>
|
||||
|
||||
<div class='ref'>
|
||||
oo<br/>tt
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<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. column-fill">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<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="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>
|
||||
</div>
|
||||
@ -1,34 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
font: 1.25em/1 Ahem;
|
||||
margin: 1em 0;
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
span {color: yellow;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
|
||||
|
||||
<div>1234567890<span>1234567890</span>1234567890</div>
|
||||
|
||||
<div>1234567890<span>1234567890</span>1234567890</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
<!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: 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 '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 columns." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
font: 1.25em/1 Ahem;
|
||||
margin: 1em 0;
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
background-color: yellow;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
column-width: 10em;
|
||||
column-gap: 10em;
|
||||
}
|
||||
|
||||
span {color: yellow;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
|
||||
|
||||
<div id="test">1234567890<br />1234567890</div>
|
||||
|
||||
<div id="reference">1234567890<span>1234567890</span>1234567890</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,22 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div {margin: 1.25em; line-height: 1;}
|
||||
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the 2 stripes are <strong>identical</strong>.</p>
|
||||
|
||||
<div><img src="support/black20x20.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/black20x20.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,44 +0,0 @@
|
||||
<!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: '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. '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." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
margin: 1em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
div.multicol
|
||||
{
|
||||
column-gap: normal;
|
||||
column-width: 1em;
|
||||
}
|
||||
|
||||
span {padding-right: 1em;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the 2 stripes are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="multicol">x<br />x</div>
|
||||
<div><span>x</span>x</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
table
|
||||
{
|
||||
background-color: yellow;
|
||||
border-spacing: 0px;
|
||||
border: gray solid 1em;
|
||||
font: 1.25em/1 serif;
|
||||
}
|
||||
|
||||
td {padding: 0 1em 0 0;}
|
||||
|
||||
img, td {vertical-align: top;}
|
||||
|
||||
td#last-cell {padding-right: 0;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td><td id="last-cell"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,46 +0,0 @@
|
||||
<!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: 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. 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-002-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,46 +0,0 @@
|
||||
<!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: '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. 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-002-ref.xht" />
|
||||
<meta name="flags" content="ahem may" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: normal;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,73 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body > div
|
||||
{
|
||||
background-color: gray;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 4em;
|
||||
position: relative;
|
||||
width: 14.5em;
|
||||
}
|
||||
|
||||
p, div > div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 1em;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
div > div
|
||||
{
|
||||
background-color: black;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
p {left: 7.5em;}
|
||||
|
||||
p + p
|
||||
{
|
||||
left: 8.5em;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
p + p + p
|
||||
{
|
||||
left: 9.5em;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
p + p + p + p
|
||||
{
|
||||
left: 10.5em;
|
||||
top: 3em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div></div>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,61 +0,0 @@
|
||||
<!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: '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. 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-fraction-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: gray;
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 14.5em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
column-count: 2;
|
||||
column-gap: 0.5em;
|
||||
}
|
||||
|
||||
#two {column-gap: 2.5em;}
|
||||
|
||||
#three {column-gap: 4.5em;}
|
||||
|
||||
#four {column-gap: 6.5em;}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="one">
|
||||
blac
|
||||
<span>blue</span>
|
||||
</div>
|
||||
|
||||
<div id="two">
|
||||
blac
|
||||
<span>blue</span>
|
||||
</div>
|
||||
|
||||
<div id="three">
|
||||
blac
|
||||
<span>blue</span>
|
||||
</div>
|
||||
|
||||
<div id="four">
|
||||
blac
|
||||
<span>blue</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,68 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<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. 'column-gap'">
|
||||
<link rel="match" href="../reference/nothing.html" />
|
||||
<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; 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="column-gap:10px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:10.1px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:10.2px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:10.3px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:10.4px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:10.5px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:10.6px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:10.7px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:10.8px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:10.9px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="column-gap:11px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
@ -1,21 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40"
|
||||
alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,61 +0,0 @@
|
||||
<!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: '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 '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 '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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: 4em;
|
||||
|
||||
/*
|
||||
N == 4;
|
||||
W == 0em;
|
||||
*/
|
||||
|
||||
/*
|
||||
In this test, the content of first 3 column
|
||||
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
|
||||
column-gap.
|
||||
*/
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,24 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div {font: 1.25em/1 serif;}
|
||||
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,51 +0,0 @@
|
||||
<!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: '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 'column-gap" />
|
||||
<link rel="match" href="multicol-gap-large-002-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
column-count: 2;
|
||||
column-gap: 4em;
|
||||
|
||||
/*
|
||||
N == 2;
|
||||
W == 3.5em;
|
||||
*/
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
<!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: 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. 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-002-ref.xht" />
|
||||
<meta name="flags" content="ahem invalid" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
border: gray solid 1em;
|
||||
color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
column-gap: -1em;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
bl ac
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,28 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
img
|
||||
{
|
||||
left: 135px;
|
||||
/* 6em + (2em/2) - (10px/2) == 135px */
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img + img {left: 285px;}
|
||||
/* 6em + 2em + 6em + (2em/2) - (10px/2) - 10px == 285px */
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are 2 blue vertical stripes of equal height.</p>
|
||||
|
||||
<div><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!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: 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. '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 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;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
color: white;
|
||||
font: 1.25em/1 Ahem;
|
||||
height: 8em;
|
||||
width: 14em;
|
||||
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 2em;
|
||||
column-rule: blue solid 10px;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are 2 blue vertical stripes of equal height.</p>
|
||||
|
||||
<div>
|
||||
1st col 1st col 1st col
|
||||
1st col 2nd col 2nd col
|
||||
2nd col 2nd col 3rd col
|
||||
3rd col 3rd col 3rd col
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,38 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
</head>
|
||||
<body>
|
||||
<div style="font:20px/1 Ahem; width:22em; height:5em; background:blue;">
|
||||
<div style="width:3em; height:5em; background:black;"></div>
|
||||
</div>
|
||||
<div style="font:20px/1 Ahem; width:14em; height:3em; background:blue;">
|
||||
<div style="float:left; width:3em; height:3em; margin-right:5em; background:orange;"></div>
|
||||
<div style="float:left; width:3em; height:3em; background:orange;"></div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
|
||||
Expected results:
|
||||
|
||||
0em 7em 14em 22em
|
||||
v v v v
|
||||
0 *********************************************
|
||||
* bla | | *
|
||||
* bla | | *
|
||||
* bla | | *
|
||||
* bla | | *
|
||||
5 * bla | | *
|
||||
6 * orn | zzz |****************
|
||||
7 * orn | zzz |
|
||||
8 * orn | zzz |
|
||||
*****************************
|
||||
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,97 +0,0 @@
|
||||
<!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: multi-column element with child block (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-08 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0091.html" title="[css3-multicol] Nested multicolumn elements rendering" />
|
||||
<link rel="match" href="multicol-height-block-child-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that a nested multi-column element's inline content could be clipped horizontally." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
font: 20px/1 Ahem;
|
||||
height: 8em;
|
||||
width: 14em;
|
||||
|
||||
column-count: 2;
|
||||
column-gap: 2em;
|
||||
|
||||
/*
|
||||
|
||||
N == 2;
|
||||
|
||||
W == 6em;
|
||||
|
||||
H == 8em;
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
div#outer
|
||||
{
|
||||
color: black;
|
||||
column-fill: auto;
|
||||
}
|
||||
|
||||
div#inner
|
||||
{
|
||||
color: orange;
|
||||
column-fill: balance;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer">
|
||||
bla bla bla bla bla
|
||||
|
||||
<div id="inner">orn orn orn zzz zzz zzz</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Both column boxes of div#inner start in the 1st column box of
|
||||
div#outer multi-column element. All the 6 lines of div#inner will
|
||||
be rendered inside the 1st column box of div#outer. The first three
|
||||
lines in the first inner column, and the last three in the second
|
||||
inner column, which will overflow the first outer column, and
|
||||
actually appear as if they were part of the second outer column. No
|
||||
clipping should occur, unless explicitly requested.
|
||||
|
||||
All the 6 lines of #inner fit in a column row that resides in the
|
||||
first outer column. #inner has a fixed height, and is taller than
|
||||
what can fit in the first outer column, so it needs to continue in
|
||||
the second outer column, with no inner column content left to
|
||||
fragment. #inner is a 14em wide block that is put into a 6em wide
|
||||
outer column, so it will overflow the outer column all the way to
|
||||
22em, relatively to the left edge of the outer multicol container.
|
||||
|
||||
Expected results:
|
||||
|
||||
0em 7em 14em 22em
|
||||
v v v v
|
||||
0 *********************************************
|
||||
* bla | | *
|
||||
* bla | | *
|
||||
* bla | | *
|
||||
* bla | | *
|
||||
5 * bla | | *
|
||||
6 * orn | zzz |****************
|
||||
7 * orn | zzz |
|
||||
8 * orn | zzz |
|
||||
*****************************
|
||||
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,35 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
font: 1.25em/1 serif;
|
||||
margin: 0em 1em;
|
||||
padding: 0em 1em 1em;
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
padding-right: 1em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
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="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>
|
||||
</html>
|
||||
@ -1,81 +0,0 @@
|
||||
<!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: multicolumn and inheritance</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/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
|
||||
<link rel="match" href="multicol-inherit-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body
|
||||
{
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 34em;
|
||||
}
|
||||
|
||||
body > div
|
||||
{
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
|
||||
/*
|
||||
N == 3;
|
||||
|
||||
34em : available width
|
||||
- 2em : horizontal margin of external div
|
||||
- 2em : 2 column gaps
|
||||
==========
|
||||
30em
|
||||
|
||||
So, W == 10em;
|
||||
|
||||
30em
|
||||
- 6em : 3 mult by 2em: horizontal margin of 3 internal divs
|
||||
==========
|
||||
24em : 8em for each of the 3 column boxes without their horizontal margins
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
margin: 0 1em 1em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
aa aa
|
||||
aa aa
|
||||
aa aa
|
||||
aa aa
|
||||
</div>
|
||||
<div>
|
||||
mm mm
|
||||
mm mm
|
||||
mm mm
|
||||
mm mm
|
||||
</div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,39 +0,0 @@
|
||||
<!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 Reftest Reference</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 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
font: 1.25em/1 serif;
|
||||
margin: 1em;
|
||||
padding: 0em 1em 1em;
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
img {vertical-align: top;}
|
||||
|
||||
img.column-gap
|
||||
{
|
||||
margin-left: -2em;
|
||||
margin-right: 3em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
img#last
|
||||
{
|
||||
margin-left: -2em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
]]></style>
|
||||
</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="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>
|
||||
@ -1,88 +0,0 @@
|
||||
<!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: '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 '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 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body > div
|
||||
{
|
||||
background-color: blue;
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 32em;
|
||||
|
||||
/*
|
||||
N == 3;
|
||||
|
||||
32em
|
||||
- 2em : 2 column gaps
|
||||
==========
|
||||
30em : available width of the 3 inner multi-column elements
|
||||
|
||||
So, W == 10em;
|
||||
|
||||
30em
|
||||
- 6em : 3 mult by 2em: horizontal margin of 3 inner multi-column elements
|
||||
- 6em : 3 mult by 2em: horizontal column-gaps of all 3 inner multi-column elements
|
||||
==========
|
||||
18em : 6em for each of the 3 column boxes without their own horizontal margins
|
||||
So, each column boxes of inner multi-column elements is 2em wide.
|
||||
*/
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
color: black;
|
||||
margin: 1em;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
|
||||
div > div
|
||||
{
|
||||
background-color: yellow;
|
||||
column-count: inherit;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
div > div:first-child {margin-top: 0;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
aa aa
|
||||
aa aa
|
||||
aa aa
|
||||
aa aa
|
||||
</div>
|
||||
<div>
|
||||
mm mm
|
||||
mm mm
|
||||
mm mm
|
||||
mm mm
|
||||
</div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,69 +0,0 @@
|
||||
<!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>multicolumn | inheritance</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/>
|
||||
<link rel="match" href="multicol-inherit-3-ref.xht"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {
|
||||
width: 75em;
|
||||
}
|
||||
body>div {
|
||||
height: 2em;
|
||||
column-width: 8em;
|
||||
}
|
||||
div {
|
||||
font-family: ahem;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
color: black;
|
||||
background: yellow;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
div>div {
|
||||
margin: 0 1em 1em;
|
||||
}
|
||||
div+div {
|
||||
color: blue;
|
||||
}
|
||||
div+div+div {
|
||||
color: pink;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,66 +0,0 @@
|
||||
<!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>multicolumn | inheritance</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
|
||||
<style type="text/css"><![CDATA[
|
||||
body {
|
||||
width: 75em;
|
||||
}
|
||||
body>div {
|
||||
color: black;
|
||||
background: yellow;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
}
|
||||
div div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#two {left: 19em;}
|
||||
#three {left: 38em;}
|
||||
div div div {
|
||||
font-family: ahem;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
color: black;
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
}
|
||||
.a2 {left: 4em;}
|
||||
.a3 {left: 10.5em;}
|
||||
.a4 {left: 13.5em;}
|
||||
#two div {color: blue;}
|
||||
#three div {color: pink;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div>xx xx</div>
|
||||
<div class="a2">xx xx</div>
|
||||
<div class="a3">xx xx</div>
|
||||
<div class="a4">xx xx</div>
|
||||
</div>
|
||||
<div id="two">
|
||||
<div>xx xx</div>
|
||||
<div class="a2">xx xx</div>
|
||||
<div class="a3">xx xx</div>
|
||||
<div class="a4">xx xx</div>
|
||||
</div>
|
||||
<div id="three">
|
||||
<div>xx xx</div>
|
||||
<div class="a2">xx xx</div>
|
||||
<div class="a3">xx xx</div>
|
||||
<div class="a4">xx xx</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,22 +0,0 @@
|
||||
<!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 Reftest Reference</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-10 -->
|
||||
<meta name="flags" content="" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: black;
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,58 +0,0 @@
|
||||
<!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: multi-column and list-item</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-10 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
|
||||
<link rel="match" href="multicol-list-item-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that an unordered list of list items can be set to display its list-items in column boxes." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url("../../../fonts/Ahem.ttf");
|
||||
}
|
||||
]]></style>
|
||||
<style type="text/css"><![CDATA[
|
||||
ul
|
||||
{
|
||||
background-color: black;
|
||||
font: 1.25em/1 Ahem;
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
width: 10em;
|
||||
|
||||
column-gap: 0em;
|
||||
column-width: 5em;
|
||||
}
|
||||
|
||||
li, span {font-size: 1em;}
|
||||
|
||||
li
|
||||
{
|
||||
margin-left: 1em;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
span {display: block;}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li>1sli</li>
|
||||
<li>2nli</li>
|
||||
<li>3rli</li>
|
||||
<li>4tli</li>
|
||||
<li>5tli</li>
|
||||
<li><span>6tli</span></li>
|
||||
<li>7tli</li>
|
||||
<li>8tli</li>
|
||||
<li>9tli</li>
|
||||
<li>10tl</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user