mirror of
https://github.com/servo/servo.git
synced 2025-08-05 05:30:08 +01:00
Update CSS tests to revision 0698c2aa9ead844b6d7d10eafb096cb1118e13ef
This commit is contained in:
Ms2ger
parent
9aa1b1e408
commit
35c74aecc2
11290 changed files with 92400 additions and 49214 deletions
|
|
@ -21,7 +21,7 @@
|
|||
width: 360px;
|
||||
}
|
||||
|
||||
.multicol-basic-ref{
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
columns: 3;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
width: 360px;
|
||||
}
|
||||
|
||||
.multicol-basic-ref{
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
column-count: 3;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
width: 360px;
|
||||
}
|
||||
|
||||
.multicol-basic-ref{
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
columns: 120px;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
width: 360px;
|
||||
}
|
||||
|
||||
.multicol-basic-ref{
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
column-width: 120px;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
#first-column {color: blue;}
|
||||
|
||||
#second-column {color: orange;}
|
||||
|
||||
|
||||
#third-column, #fourth-column {color: white;}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@
|
|||
#first-column {color: blue;}
|
||||
|
||||
#second-column {color: orange;}
|
||||
|
||||
#third-column {color: pink;}
|
||||
|
||||
|
||||
#third-column {color: pink;}
|
||||
|
||||
#fourth-column {color: yellow;}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -26,17 +26,17 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -26,17 +26,17 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -26,17 +26,17 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -26,17 +26,17 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -26,17 +26,17 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -26,17 +26,17 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -26,17 +26,17 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<!--
|
||||
Original, initial filename of this test was
|
||||
multicol-columns-toolong-002.xht
|
||||
and it should be filename-renamed
|
||||
and it should be filename-renamed
|
||||
multicol-columns-invalid-002.xht
|
||||
-->
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div>
|
||||
bl ac
|
||||
bl ac
|
||||
<span>
|
||||
bl ue
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
}
|
||||
|
||||
/*
|
||||
In this test, the initial containing block establishes containing block
|
||||
for such red span. Therefore, the 2 short red stripes should be
|
||||
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.
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -19,14 +19,14 @@
|
|||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
span {color: red;}
|
||||
|
||||
|
||||
span {color: red;}
|
||||
|
||||
img#white-overlapping
|
||||
{
|
||||
left: 11em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
top: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -26,17 +26,17 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
W == max(0, (3em) / 3);
|
||||
W == max(0, 1em);
|
||||
W == 1em;
|
||||
|
||||
|
||||
So, the used column-width in this test is 1em.
|
||||
*/
|
||||
|
||||
|
|
@ -53,20 +53,20 @@
|
|||
/*
|
||||
Since
|
||||
"
|
||||
Content in the normal flow that extends into
|
||||
column gaps (e.g., long words or images) is
|
||||
clipped in the middle of the column gap.
|
||||
Content in the normal flow that extends into
|
||||
column gaps (e.g., long words or images) is
|
||||
clipped in the middle of the column gap.
|
||||
"
|
||||
http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements
|
||||
this causes the right-half (0.5em) of the 'K' glyph to
|
||||
be overlapped by the right-half (0.75em) of the 1st blue column-rule.
|
||||
this causes the right-half (0.5em) of the 'K' glyph to
|
||||
be overlapped by 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
|
||||
|
||||
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
|
||||
Column rules are only drawn between two columns that
|
||||
both have content.
|
||||
"
|
||||
http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
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;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
W == ((18em) / 3) - 5em;
|
||||
W == (6em) - 5em;
|
||||
W == 1em;
|
||||
|
||||
|
||||
So, the used column-width in this test is 1em.
|
||||
*/
|
||||
|
||||
|
|
@ -57,20 +57,20 @@
|
|||
/*
|
||||
Since
|
||||
"
|
||||
Content in the normal flow that extends into
|
||||
column gaps (e.g., long words or images) is
|
||||
clipped in the middle of the column gap.
|
||||
Content in the normal flow that extends into
|
||||
column gaps (e.g., long words or images) is
|
||||
clipped in the middle of the column gap.
|
||||
"
|
||||
http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements
|
||||
this causes the right-half (0.5em) of the 'K' glyph to
|
||||
be overlapped by the right-half (0.75em) of the 1st blue column-rule.
|
||||
this causes the right-half (0.5em) of the 'K' glyph to
|
||||
be overlapped by 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
|
||||
|
||||
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
|
||||
Column rules are only drawn between two columns that
|
||||
both have content.
|
||||
"
|
||||
http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ span {
|
|||
<body>
|
||||
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
<span>xx xx</span>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ span {
|
|||
<body>
|
||||
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
<span>xx xx</span>
|
||||
xx xx
|
||||
<span>xx xx</span>
|
||||
|
|
|
|||
|
|
@ -23,15 +23,15 @@
|
|||
columns: 3;
|
||||
column-fill: balance;
|
||||
column-gap: 0em;
|
||||
|
||||
|
||||
/*
|
||||
|
||||
N == 3;
|
||||
|
||||
W == 6em;
|
||||
|
||||
|
||||
W == 6em;
|
||||
|
||||
*/
|
||||
|
||||
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
|
|
@ -66,6 +66,6 @@
|
|||
<td>I</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -24,13 +24,13 @@
|
|||
columns: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0em;
|
||||
|
||||
|
||||
/*
|
||||
|
||||
N == 2;
|
||||
|
||||
W == 10em;
|
||||
|
||||
|
||||
W == 10em;
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@
|
|||
<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>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
body>div {
|
||||
font-family: ahem;
|
||||
font-family: ahem;
|
||||
font-size: 1.25em;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
|
|
@ -22,7 +22,7 @@ body>div {
|
|||
}
|
||||
div.col {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
|12 4567 90| | |
|
||||
************ ************
|
||||
|
||||
The digits are the green squares, the white squares
|
||||
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
|
||||
|
|
|
|||
|
|
@ -18,14 +18,14 @@
|
|||
background-color: blue;
|
||||
height: 200px;
|
||||
margin: 8px;
|
||||
width: 680px;
|
||||
width: 680px;
|
||||
|
||||
column-count: 3;
|
||||
column-fill: auto;
|
||||
column-gap: 10px;
|
||||
|
||||
/*
|
||||
So, each column box should be
|
||||
/*
|
||||
So, each column box should be
|
||||
[680px minus (2 mult 10px)] divided by 3 == 220px wide
|
||||
*/
|
||||
}
|
||||
|
|
@ -76,9 +76,9 @@
|
|||
<h2>PASS!</h2>
|
||||
|
||||
<!--
|
||||
|
||||
|
||||
Expected result:
|
||||
|
||||
|
||||
8px 688px
|
||||
v v
|
||||
************************************************
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
* <h2>nbsp;<h2> <h2>nbsp;<h2> <h2>nbsp;<h2> * <h2>PASS!</h2>
|
||||
* *
|
||||
************************************************
|
||||
^ ^
|
||||
^ ^
|
||||
228px 458px
|
||||
-->
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
body>div {
|
||||
font-family: ahem;
|
||||
font-family: ahem;
|
||||
font-size: 1.25em;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
|
|
@ -22,7 +22,7 @@ body>div {
|
|||
}
|
||||
div.col {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
body>div {
|
||||
font-family: ahem;
|
||||
font-family: ahem;
|
||||
font-size: 1.25em;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
|
|
@ -22,7 +22,7 @@ body>div {
|
|||
}
|
||||
div.col {
|
||||
column-count: 2;
|
||||
column-fill: balance;
|
||||
column-fill: balance;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
background-color: yellow;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
|
|
|||
|
|
@ -21,18 +21,18 @@
|
|||
|
||||
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
|
||||
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.
|
||||
*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,22 +54,22 @@
|
|||
</div>
|
||||
|
||||
<!--
|
||||
Both column boxes of div#inner start in the 1st
|
||||
column box of div#outer multi-column element.
|
||||
Both column boxes of div#inner start in the 1st
|
||||
column box of div#outer multi-column element.
|
||||
The first 3 lines boxes of 1st
|
||||
column box of div#inner will be rendered inside the
|
||||
1st column box of div#outer but not its 2nd.
|
||||
Because 1st column box of div#outer is
|
||||
6em wide while the div#inner multi-column element
|
||||
is 14em wide, this makes the first 3 line boxes
|
||||
(with the 'z' trios) of 2nd column box of div#inner
|
||||
is 14em wide, this makes the first 3 line boxes
|
||||
(with the 'z' trios) of 2nd column box of div#inner
|
||||
clipped.
|
||||
|
||||
Then, at this point, the div#inner multi-column
|
||||
element should be fragmented in order to continue to
|
||||
|
||||
Then, at this point, the div#inner multi-column
|
||||
element should be fragmented in order to continue to
|
||||
render the 5 empty line boxes it has into the
|
||||
2nd column box of div#outer. Since those 5 line
|
||||
boxes are empty, we only see the extension it
|
||||
boxes are empty, we only see the extension it
|
||||
creates horizontally, which is
|
||||
14em - 6em == 8em horizontally and
|
||||
5 lines boxes == 5em tall
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@
|
|||
- 2em : horizontal margin of external div
|
||||
- 2em : 2 column gaps
|
||||
==========
|
||||
30em
|
||||
30em
|
||||
|
||||
So, W == 10em;
|
||||
|
||||
30em
|
||||
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
|
||||
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@
|
|||
column-gap: 1em;
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 32em;
|
||||
|
||||
|
||||
/*
|
||||
N == 3;
|
||||
|
||||
32em
|
||||
32em
|
||||
- 2em : 2 column gaps
|
||||
==========
|
||||
30em : available width of the 3 inner multi-column elements
|
||||
|
|
|
|||
|
|
@ -41,19 +41,19 @@ div+div+div {
|
|||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,19 +33,19 @@ div {
|
|||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="test-multi-column-red">
|
||||
|
|
@ -65,6 +65,6 @@
|
|||
*********************
|
||||
|
||||
-->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="test-multi-column-red">
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
<div>
|
||||
1scol 1scol
|
||||
1scol
|
||||
1scol
|
||||
<h4> h4h41 </h4>
|
||||
<h4> h4h42 </h4>
|
||||
2ncol 2ncol
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm">
|
||||
<link rel="match" href="reference/multicol-nested-005-ref.htm">
|
||||
<!--
|
||||
The original filename of this test was
|
||||
The original filename of this test was
|
||||
multicol-inherit-005.xht
|
||||
This test also serves as a conversion of
|
||||
This test also serves as a conversion of
|
||||
multicol-nested-001.xht
|
||||
-->
|
||||
<meta name="flags" content="ahem">
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
in each inner column box. So:
|
||||
|
||||
13em : width of each outer column box
|
||||
-
|
||||
-
|
||||
2em : horizontal margin of each div inside
|
||||
=======
|
||||
11em : width of each inner multi-column elements
|
||||
|
|
@ -54,8 +54,8 @@
|
|||
W == max(0, 3em);
|
||||
W == 3em;
|
||||
|
||||
So, each duo of 'a', 'm' and 'x' should fill one and only 1 line
|
||||
box. There are 8 duos; therefore, the first 2 inner
|
||||
So, each duo of 'a', 'm' and 'x' should fill one and only 1 line
|
||||
box. There are 8 duos; therefore, the first 2 inner
|
||||
column boxes should use 3 line boxes and the 3rd inner
|
||||
column box should be using 2 line boxes.
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
in each inner column box. So:
|
||||
|
||||
12em : width of each outer column box
|
||||
-
|
||||
-
|
||||
2em : horizontal margin of each div inside
|
||||
=======
|
||||
10em : width of each inner multi-column elements
|
||||
|
|
@ -71,8 +71,8 @@
|
|||
W == max(0, 1.33333em);
|
||||
W == 1.33333em;
|
||||
|
||||
So, each duo of 'a', 'm' and 'x' should fill one and only 1 line
|
||||
box. There are 8 duos; therefore, the first 2 inner
|
||||
So, each duo of 'a', 'm' and 'x' should fill one and only 1 line
|
||||
box. There are 8 duos; therefore, the first 2 inner
|
||||
column boxes should use 3 line boxes and the 3rd inner
|
||||
column box should be using 2 line boxes.
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
13em : width of each outer column box
|
||||
-
|
||||
2em : horizontal margin of each div inside
|
||||
2em : horizontal margin of each div inside
|
||||
=======
|
||||
11em : width of each inner multi-column elements
|
||||
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
'x2' and 'x3' duos filling 3 line boxes.
|
||||
|
||||
The 2nd column box of last inner multi-column should
|
||||
have 'x4', 'x5' and 'x6' duos filling 3 line boxes.
|
||||
have 'x4', 'x5' and 'x6' duos filling 3 line boxes.
|
||||
|
||||
The 3rd column box of the last inner multi-column should
|
||||
have 'x7' and 'x8' duos filling 2 line boxes.
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
W == 13em;
|
||||
|
||||
13em : width of each outer column box
|
||||
-
|
||||
-
|
||||
2em : horizontal margin of each div inside
|
||||
=======
|
||||
11em : width of each inner multi-column elements
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
W == 13em;
|
||||
|
||||
13em : width of each outer column box
|
||||
-
|
||||
-
|
||||
2em : horizontal margin of each div inside
|
||||
=======
|
||||
11em : width of each inner multi-column elements
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
W == 13em;
|
||||
|
||||
13em : width of each outer column box
|
||||
-
|
||||
2em : horizontal margin of each div inside
|
||||
-
|
||||
2em : horizontal margin of each div inside
|
||||
=======
|
||||
11em : width of each inner multi-column elements
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
div
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0px;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
{
|
||||
column-gap: 0;
|
||||
column-width: 201px;
|
||||
|
||||
|
||||
/*
|
||||
|
||||
N == max(1, floor((U + column-gap)/(column-width + column-gap)))
|
||||
|
|
@ -32,14 +32,14 @@
|
|||
N == max(1, floor(2.985))
|
||||
N == max(1, 2)
|
||||
N == 2;
|
||||
|
||||
|
||||
W == max(0, ((U + column-gap)/N - column-gap))
|
||||
W == max(0, ((600px + 0px)/2 - 0px))
|
||||
W == max(0, ((600px)/2 - 0px))
|
||||
W == max(0, (300px - 0px))
|
||||
W == max(0, 300px)
|
||||
W == 300px;
|
||||
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
|
|
@ -58,6 +58,6 @@
|
|||
1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br>
|
||||
9 0 1 2 3 4 5 6<span>I J K L M N O P </span>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
|
||||
span
|
||||
{
|
||||
{
|
||||
border-left: lime solid 1px;
|
||||
border-right: lime solid 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0em;
|
||||
column-rule: green solid 20em;
|
||||
|
||||
|
||||
/*
|
||||
|
||||
|
||||
N == 2;
|
||||
|
||||
W == 200px;
|
||||
|
|
|
|||
|
|
@ -46,13 +46,13 @@ span+span+span {
|
|||
<body>
|
||||
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
<span>
|
||||
</span>
|
||||
xx xx
|
||||
<span>
|
||||
</span>
|
||||
xx xx
|
||||
xx xx
|
||||
<span>
|
||||
</span>
|
||||
xx xx
|
||||
|
|
|
|||
|
|
@ -35,6 +35,6 @@
|
|||
3r cl
|
||||
4t cl
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
/*
|
||||
|
||||
N == 4;
|
||||
|
||||
|
||||
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
|
||||
W == max(0, (14em - ((4 - 1) * 1em)) / 4);
|
||||
W == max(0, (14em - (3 * 1em)) / 4);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0.2em;
|
||||
column-rule: lime dashed 0.2em;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0.2em;
|
||||
column-rule: lime double 0.2em;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
/*
|
||||
|
||||
N == 4;
|
||||
|
||||
|
||||
W == max(0, (available-width - ((N - 1) * column-gap)) / N);
|
||||
W == max(0, (14em - ((4 - 1) * 1em)) / 4);
|
||||
W == max(0, (14em - (3 * 1em)) / 4);
|
||||
|
|
@ -50,6 +50,6 @@
|
|||
3r cl
|
||||
4t cl
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -46,13 +46,13 @@ span+span+span {
|
|||
<body>
|
||||
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
<span>
|
||||
</span>
|
||||
xx xx
|
||||
<span>
|
||||
</span>
|
||||
xx xx
|
||||
xx xx
|
||||
<span>
|
||||
</span>
|
||||
xx xx
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0.2em;
|
||||
column-rule: lime groove 0.2em;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0.2em;
|
||||
column-rule: red hidden 0.2em;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0.2em;
|
||||
column-rule: lime inset 0.2em;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
|
||||
|
||||
span {border-left: lime ridge 0.2em;}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
font: 1.25em/1 Ahem;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
|
||||
div
|
||||
{
|
||||
background-color: red;
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
*/
|
||||
|
||||
/*
|
||||
Since column rules do not take up space, then the test
|
||||
Since column rules do not take up space, then the test
|
||||
should not generate an horizontal scrollbar.
|
||||
*/
|
||||
</style>
|
||||
|
|
@ -62,6 +62,6 @@
|
|||
3r cl
|
||||
4t cl
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0.2em;
|
||||
column-rule: red none 0.2em;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0.2em;
|
||||
column-rule: lime outset 0.2em;
|
||||
|
|
|
|||
|
|
@ -48,9 +48,9 @@ span+span+span {
|
|||
<body>
|
||||
|
||||
<div id="one">
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0.2em;
|
||||
column-rule: lime ridge 0.2em;
|
||||
|
||||
|
||||
/*
|
||||
|
||||
N == 2;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-gap: 0.2em;
|
||||
column-rule: lime solid 0.2em;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ span {
|
|||
<body>
|
||||
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
<span>xx xx</span>
|
||||
xx xx
|
||||
|
|
|
|||
|
|
@ -48,9 +48,9 @@ span+span+span {
|
|||
<body>
|
||||
|
||||
<div>
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
xx xx
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
div#test, div.test2
|
||||
{
|
||||
{
|
||||
columns: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0em;
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@
|
|||
column-gap: 1em;
|
||||
|
||||
/*
|
||||
|
||||
|
||||
N == 4;
|
||||
|
||||
|
||||
W == 2em;
|
||||
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
| | |
|
||||
************************
|
||||
|
||||
The test presumes, postulates that
|
||||
The test presumes, postulates that
|
||||
"abc deg" occupies not more than 5em.
|
||||
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'">
|
||||
<link rel="match" href="reference/multicol-span-all-margin-001-ref.htm">
|
||||
<meta name="flags" content="ahem may">
|
||||
<meta name="assert" content="This test checks that when 'overflow' is set to 'hidden' on a multi-column element, then any spanning ('column-span: all') element exceeding the available width of the multi-column should be clipped accordingly.">
|
||||
<meta name="assert" content="This test checks that when 'overflow' is set to 'hidden' on a multi-column element, then any spanning ('column-span: all') element exceeding the available width of the multi-column should be clipped accordingly.">
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
|
|
@ -42,10 +42,10 @@
|
|||
|
||||
column-span: all;
|
||||
|
||||
/*
|
||||
This is the target of the test: the spanning element's
|
||||
width (11em) exceeds the available width of the
|
||||
multi-column element. The 3em exceeding such
|
||||
/*
|
||||
This is the target of the test: the spanning element's
|
||||
width (11em) exceeds the available width of the
|
||||
multi-column element. The 3em exceeding such
|
||||
width is first clipped at column box boundary.
|
||||
*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@
|
|||
color: orange;
|
||||
/*
|
||||
In this test, the glyphs "or" are painted into 1st column box.
|
||||
"Content in the normal flow that extends into column
|
||||
gaps (e.g., long words or images) is clipped in the
|
||||
"Content in the normal flow that extends into column
|
||||
gaps (e.g., long words or images) is clipped in the
|
||||
middle of the column gap."
|
||||
Therefore, the glyphs "ang" are clipped and not painted.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ h6~h6>span {
|
|||
<div>
|
||||
xx xx xx xx
|
||||
xx xx xx xx
|
||||
|
||||
|
||||
<h6><span>xxxxx</span></h6>
|
||||
<h6><span>xxxxx</span></h6>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ div {
|
|||
width: 6em;
|
||||
height: 400px;
|
||||
display: table-cell;
|
||||
|
||||
|
||||
column-count: 2;
|
||||
column-gap: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,15 +28,15 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -29,15 +29,15 @@
|
|||
</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
|
||||
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>
|
||||
|
|
@ -34,7 +34,7 @@ div {
|
|||
thirtn fourtnfiftn sixtn
|
||||
seventn eightn ninetn twenty
|
||||
hundred thousand million billion
|
||||
trillion
|
||||
trillion
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -44,10 +44,10 @@
|
|||
Expected results
|
||||
|
||||
*************************
|
||||
*B|a|b|u|b|u|B|a| | | | *
|
||||
*B|a|b|u|b|u|B|a| | | | *
|
||||
*************************
|
||||
|
||||
Every "l", "c" and "e" glyphs are clipped.
|
||||
Every "l", "c" and "e" glyphs are clipped.
|
||||
|
||||
-->
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
width: 360px;
|
||||
}
|
||||
|
||||
.multicol-basic-ref{
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
border-spacing: 0;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
display: inline;
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.item-1{
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
|
||||
<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">
|
||||
<table class="multicol-basic-ref">
|
||||
<tbody><tr>
|
||||
|
|
@ -66,4 +66,5 @@
|
|||
</tbody></table>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -12,15 +12,15 @@
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
height: 3em;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
|
||||
img {vertical-align: top;}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,6 @@
|
|||
</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>
|
||||
<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>
|
||||
|
|
@ -17,10 +17,10 @@
|
|||
</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">
|
||||
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div>1 22 333
|
||||
4444 55555
|
||||
666666
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
body>div {
|
||||
font-family: ahem;
|
||||
font-family: ahem;
|
||||
font-size: 1.25em;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
|
|
@ -19,7 +19,7 @@ body>div {
|
|||
}
|
||||
div.col {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
h1
|
||||
{
|
||||
color: white;
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
|
||||
margin-top: 8px; /* The margin-top of body and h1 will collapse into an 8px gap */
|
||||
|
|
@ -31,11 +31,11 @@
|
|||
font-size: 1.5em;
|
||||
font-weight: bolder;
|
||||
left: 698px;
|
||||
|
||||
|
||||
/*
|
||||
|
||||
Expected result:
|
||||
|
||||
|
||||
8px 688px
|
||||
v v
|
||||
************************************************
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
* <h2>nbsp;<h2> <h2>nbsp;<h2> <h2>nbsp;<h2> * <h2>PASS!</h2>
|
||||
* *
|
||||
************************************************
|
||||
^ ^
|
||||
^ ^
|
||||
228px 458px
|
||||
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
body>div {
|
||||
font-family: ahem;
|
||||
font-family: ahem;
|
||||
font-size: 1.25em;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
|
|
@ -19,7 +19,7 @@ body>div {
|
|||
}
|
||||
div.col {
|
||||
column-count: 2;
|
||||
column-fill: balance;
|
||||
column-fill: balance;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div {font: 1.25em/1 serif;}
|
||||
|
||||
|
||||
img {vertical-align: top;}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -102,14 +102,14 @@
|
|||
background-color: blue;
|
||||
height: 2em;
|
||||
left: 33em;
|
||||
}
|
||||
}
|
||||
|
||||
div#blue3
|
||||
{
|
||||
background-color: blue;
|
||||
height: 1em;
|
||||
left: 37em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
margin-bottom: 0.5em;
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
|
||||
span {color: blue;}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
span
|
||||
{
|
||||
{
|
||||
border-left: lime solid 1px;
|
||||
border-right: lime solid 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ div div {
|
|||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div></div>
|
||||
<div id="a1" class="a"></div>
|
||||
<div id="a2"></div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled"></div>
|
||||
|
||||
<div><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-lime.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-lime.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-lime.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-lime.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="120" height="40" alt="Image download support must be enabled"></div>
|
||||
|
||||
|
||||
<div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled"></div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ div+div+div {
|
|||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div>xx xx</div>
|
||||
<div class="a">x x</div>
|
||||
<div>xx xx</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
div + div {line-height: 1;}
|
||||
|
||||
img {vertical-align: top;}
|
||||
|
||||
|
||||
img.padding-left {padding-left: 1em;}
|
||||
|
||||
img.padding-left-right {padding: 0em 1em;}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
div > div {position: absolute;}
|
||||
|
||||
|
||||
div#first-black
|
||||
{
|
||||
background-color: black;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<body>
|
||||
|
||||
<div id="multi-column"></div>
|
||||
|
||||
|
||||
<div id="overflow">abc deg<br>ghk mno</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div>
|
||||
<img src="support/swatch-gray.png" width="200" height="20" alt="Image download support must be enabled"><br>
|
||||
|
||||
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-orange.png" width="100" 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"><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-orange.png" width="100" 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"><img src="support/swatch-blue.png" width="40" 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="40" 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"><br>
|
||||
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="160" 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"><br>
|
||||
|
||||
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" width="160" 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"><br>
|
||||
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" width="160" 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"><br>
|
||||
|
||||
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="160" 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"><br>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@
|
|||
<div>
|
||||
<img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled">
|
||||
<img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled">
|
||||
<img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled">
|
||||
<img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled">
|
||||
<img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled">
|
||||
<img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled">
|
||||
<img src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" 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="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled">
|
||||
<img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled">
|
||||
<img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<div>d da d da d da d da d da <br>
|
||||
|
||||
dam dam dam dam dam <br>
|
||||
|
||||
|
||||
dame dame dame dame dame <br>
|
||||
|
||||
damer damer damer damer damer <br>
|
||||
|
|
@ -34,11 +34,11 @@
|
|||
d da d da d da d da <br>
|
||||
|
||||
dam dam dam dam <br>
|
||||
|
||||
|
||||
dame dame dame dame <br>
|
||||
|
||||
damer damer damer damer
|
||||
</div>
|
||||
damer damer damer damer
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue