mirror of
https://github.com/servo/servo.git
synced 2025-08-21 21:35:32 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<style type="text/css">
|
||||
.green {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
}
|
||||
#rect-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#rect-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#rect-3 {
|
||||
left: 280px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are three vertical green rectangles and no red.</p>
|
||||
<div class="green" id="rect-1"></div>
|
||||
<div class="green" id="rect-2"></div>
|
||||
<div class="green" id="rect-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<style type="text/css">
|
||||
.green {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
}
|
||||
#rect-1, #rect-2 {
|
||||
top: 70px;
|
||||
height: 200px;
|
||||
}
|
||||
#rect-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#rect-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#square {
|
||||
top: 170px;
|
||||
left: 280px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two vertical green rectangles with one green
|
||||
square to the right of them and no red.</p>
|
||||
<div class="green" id="rect-1"></div>
|
||||
<div class="green" id="rect-2"></div>
|
||||
<div class="green" id="square"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<style type="text/css">
|
||||
.green {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
}
|
||||
#rect-1, #rect-2 {
|
||||
top: 70px;
|
||||
height: 200px;
|
||||
}
|
||||
#rect-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#rect-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#lightgreen-square {
|
||||
position: absolute;
|
||||
background-color: lightgreen;
|
||||
top: 170px;
|
||||
left: 280px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two vertical green rectangles with one light
|
||||
green square to the bottom right of them and no red.</p>
|
||||
<div class="green" id="rect-1"></div>
|
||||
<div class="green" id="rect-2"></div>
|
||||
<div id="lightgreen-square"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<style type="text/css">
|
||||
.green {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
}
|
||||
#square {
|
||||
top: 170px;
|
||||
left: 20px;
|
||||
height: 100px;
|
||||
}
|
||||
#rect-1, #rect-2 {
|
||||
top: 70px;
|
||||
height: 200px;
|
||||
}
|
||||
#rect-1 {
|
||||
left: 150px;
|
||||
}
|
||||
#rect-2 {
|
||||
left: 280px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is one green square and two vertical
|
||||
green rectangles to the right of it and no red.</p>
|
||||
<div class="green" id="square"></div>
|
||||
<div class="green" id="rect-1"></div>
|
||||
<div class="green" id="rect-2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<style type="text/css">
|
||||
|
||||
.bar {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
}
|
||||
.full {
|
||||
height: 200px;
|
||||
}
|
||||
.half {
|
||||
height: 100px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
top: 150px;
|
||||
}
|
||||
.lightgreen {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
#rect-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#rect-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#rect-3 {
|
||||
top: 250px;
|
||||
left: 150px;
|
||||
}
|
||||
#rect-4 {
|
||||
top: 150px;
|
||||
left: 280px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if:
|
||||
<ul>
|
||||
<li>There is a dark green vertical rectangle on the left</li>
|
||||
<li>There is a dark green square in the middle with a light green
|
||||
square below it</li>
|
||||
<li>There is a light green vertical rectangle on the right</li>
|
||||
<li>There is no red
|
||||
</ul>
|
||||
</p>
|
||||
<div class="green bar full" id="rect-1"></div>
|
||||
<div class="green bar half" id="rect-2"></div>
|
||||
<div class="lightgreen bar half" id="rect-3"></div>
|
||||
<div class="lightgreen bar full" id="rect-4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<style type="text/css">
|
||||
|
||||
.green {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
#bar-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#bar-2 {
|
||||
left: 80px;
|
||||
}
|
||||
#bar-3 {
|
||||
left: 140px;
|
||||
}
|
||||
#bar-4 {
|
||||
left: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are four green vertical bars and no red.</p>
|
||||
<div class="green" id="bar-1"></div>
|
||||
<div class="green" id="bar-2"></div>
|
||||
<div class="green" id="bar-3"></div>
|
||||
<div class="green" id="bar-4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<style type="text/css">
|
||||
|
||||
.green {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
width: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bar-1, #bar-2, #bar-3, #bar-4 {
|
||||
height: 200px;
|
||||
}
|
||||
#bar-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#bar-2 {
|
||||
left: 80px;
|
||||
}
|
||||
#bar-3 {
|
||||
left: 140px;
|
||||
}
|
||||
#bar-4 {
|
||||
left: 200px;
|
||||
}
|
||||
.square {
|
||||
height: 50px;
|
||||
left: 260px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are four green vertical bars, plus one
|
||||
small green square to their right and no red.</p>
|
||||
<div class="green" id="bar-1"></div>
|
||||
<div class="green" id="bar-2"></div>
|
||||
<div class="green" id="bar-3"></div>
|
||||
<div class="green" id="bar-4"></div>
|
||||
<div class="green" id="square"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<style type="text/css">
|
||||
#box {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 2px solid black;
|
||||
background-color: gray;
|
||||
}
|
||||
.black {
|
||||
position: absolute;
|
||||
background-color: black;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
#r1c3 {
|
||||
left: 100px;
|
||||
}
|
||||
#r2c2 {
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
}
|
||||
#r2c4 {
|
||||
left: 150px;
|
||||
top: 50px;
|
||||
}
|
||||
#r3c1 {
|
||||
top: 100px;
|
||||
}
|
||||
#r3c3 {
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
}
|
||||
#r4c2 {
|
||||
left: 50px;
|
||||
top: 150px;
|
||||
}
|
||||
#r4c4 {
|
||||
left: 150px;
|
||||
top: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a 4x4 black and gray checkerboard and no red.</p>
|
||||
<div id="box">
|
||||
<div class="black"></div>
|
||||
<div class="black" id="r1c3"></div>
|
||||
<div class="black" id="r2c2"></div>
|
||||
<div class="black" id="r2c4"></div>
|
||||
<div class="black" id="r3c1"></div>
|
||||
<div class="black" id="r3c3"></div>
|
||||
<div class="black" id="r4c2"></div>
|
||||
<div class="black" id="r4c4"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<style type="text/css">
|
||||
.bar {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
#bar-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#bar-2 {
|
||||
left: 70px;
|
||||
}
|
||||
#bar-3 {
|
||||
left: 120px;
|
||||
}
|
||||
#bar-4 {
|
||||
left: 170px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a square with four vertical
|
||||
stripes alternating green and blue, and no red.</p>
|
||||
<div class="green bar" id="bar-1"></div>
|
||||
<div class="blue bar" id="bar-2"></div>
|
||||
<div class="green bar" id="bar-3"></div>
|
||||
<div class="blue bar" id="bar-4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<style type="text/css">
|
||||
.block {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 60px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
height: 60px;
|
||||
}
|
||||
#square-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#square-2 {
|
||||
left: 90px;
|
||||
}
|
||||
#blue-rect {
|
||||
background-color: blue;
|
||||
height: 120px;
|
||||
left: 190px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle.
|
||||
There should be no red.</p>
|
||||
<div class="green block" id="square-1"></div>
|
||||
<div class="green block" id="square-2"></div>
|
||||
<div class="block" id="blue-rect"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test reference</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<style type="text/css">
|
||||
.block {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
#rect-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#rect-2 {
|
||||
left: 90px;
|
||||
}
|
||||
#rect-3 {
|
||||
left: 190px;
|
||||
}
|
||||
#rect-4 {
|
||||
left: 260px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green vertical rectangles on the left of two blue vertical rectangles.
|
||||
There should be no red.</p>
|
||||
<div class="green block" id="rect-1"></div>
|
||||
<div class="green block" id="rect-2"></div>
|
||||
<div class="blue block" id="rect-3"></div>
|
||||
<div class="blue block" id="rect-4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container, text content
|
||||
overflowing one region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-003-ref.html"/>
|
||||
<meta name="assert" content="This test checks that text content flows through a region
|
||||
maintaining the named flow multi-column container and that
|
||||
it overflows visibly into a third column."/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
columns: 2;
|
||||
column-gap: 30px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
#region {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 280px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are three vertical green rectangles and no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
</div>
|
||||
<div id="region"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow, text content flowing into one multi-column region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-003-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test checks that text content in a named flow is
|
||||
laid out using columns when flowed in a multi-column
|
||||
region."/>
|
||||
<style type="text/css">
|
||||
#named-flow {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: multicol;
|
||||
}
|
||||
#multicol-region {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
width: 360px;
|
||||
height: 200px;
|
||||
columns: 3;
|
||||
column-gap: 30px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 280px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are three vertical green rectangles and no red.</p>
|
||||
<div id="named-flow">
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
</div>
|
||||
<div id="multicol-region"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow, text content - fragmented between
|
||||
multicol region and non-multicol region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-006-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test checks that the named flow text
|
||||
content flows through the multi-column region
|
||||
in the region chain then through the second
|
||||
non-multicol region in the chain."/>
|
||||
<style type="text/css">
|
||||
#named-flow {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: multicol;
|
||||
}
|
||||
#multicol-region {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
columns: 2;
|
||||
column-gap: 30px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#remainder-region {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 280px;
|
||||
width: 100px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
#block-1, #block-2 {
|
||||
top: 70px;
|
||||
height: 200px;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#block-3 {
|
||||
top: 170px;
|
||||
left: 280px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two vertical green rectangles with one green
|
||||
square to the right of them and no red.</p>
|
||||
<div id="named-flow">
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
</div>
|
||||
<div id="multicol-region"></div>
|
||||
<div id="remainder-region"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow, non-text fragmentable content flowing into multi-column
|
||||
region then into non-multicol region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-008-ref.html"/>
|
||||
<meta name="assert" content="This test checks that non-text named flow contentmulti-column is
|
||||
fragmented first through the columns in a region multi-column
|
||||
container, then through a second non-multi-column region."/>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
#named-flow {
|
||||
flow-into: multicol;
|
||||
}
|
||||
#named-flow-child-1, #named-flow-child-2 {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
#named-flow-child-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: lightgreen;
|
||||
}
|
||||
#multicol-region {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
columns: 2;
|
||||
column-gap: 30px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#remainder-region {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 280px;
|
||||
width: 100px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
#block-1, #block-2 {
|
||||
top: 70px;
|
||||
height: 200px;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#block-3 {
|
||||
top: 170px;
|
||||
left: 280px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two vertical green rectangles with one light
|
||||
green square to the bottom right of them and no red.</p>
|
||||
<div id="named-flow">
|
||||
<div id="named-flow-child-1"></div>
|
||||
<div id="named-flow-child-2"></div>
|
||||
<div id="named-flow-child-3"></div>
|
||||
</div>
|
||||
<div id="multicol-region"></div>
|
||||
<div id="remainder-region"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow, text content flowing into a simple region
|
||||
then into a multi-column region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-009-ref.html"/>
|
||||
<meta name="assert" content="This test checks that text named flow
|
||||
content is fragmented first through a simple region,
|
||||
then through a multi-column region"/>
|
||||
<style type="text/css">
|
||||
#named-flow {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: multicol;
|
||||
}
|
||||
#first-region {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 20px;
|
||||
width: 100px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#multicol-region {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 150px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
columns: 2;
|
||||
column-gap: 30px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
#block-1, #block-2 {
|
||||
top: 70px;
|
||||
height: 200px;
|
||||
}
|
||||
#block-1 {
|
||||
left: 150px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 280px;
|
||||
}
|
||||
#block-3 {
|
||||
top: 170px;
|
||||
left: 20px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is one green square and two vertical
|
||||
green rectangles to the right of it and no red.</p>
|
||||
<div id="named-flow">
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
</div>
|
||||
<div id="first-region"></div>
|
||||
<div id="multicol-region"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow, non-text fragmentable content flowing into non-mulicol
|
||||
region then into a multi-column region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-009-ref.html"/>
|
||||
<meta name="assert" content="This test checks that non-text fragmentable named
|
||||
flow content is fragmented through a simple region, then
|
||||
through a multi-column region."/>
|
||||
<style type="text/css">
|
||||
#named-flow {
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
#named-flow-child-1 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
#named-flow-child-2, #named-flow-child-3 {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
#first-region {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 20px;
|
||||
width: 100px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#multicol-region {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 150px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
columns: 2;
|
||||
column-gap: 30px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
#block-1, #block-2 {
|
||||
top: 70px;
|
||||
height: 200px;
|
||||
}
|
||||
#block-1 {
|
||||
left: 150px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 280px;
|
||||
}
|
||||
#block-3 {
|
||||
top: 170px;
|
||||
left: 20px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is one green square on the left and two vertical
|
||||
green rectangles to the right of it and no red.</p>
|
||||
<div id="named-flow">
|
||||
<div id="named-flow-child-1"></div>
|
||||
<div id="named-flow-child-2"></div>
|
||||
<div id="named-flow-child-3"></div>
|
||||
</div>
|
||||
<div id="first-region"></div>
|
||||
<div id="multicol-region"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container, monolithic content
|
||||
flowing into one region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-012-ref.html"/>
|
||||
<meta name="assert" content="This test checks that monolithic content in a named flow
|
||||
multi-column container flows through the region."/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
width: 360px;
|
||||
height: 200px;
|
||||
columns: 3;
|
||||
column-gap: 30px;
|
||||
column-rule: none;
|
||||
flow-into: multicol;
|
||||
}
|
||||
.named-flow-block {
|
||||
width: 100px;
|
||||
height: 300px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
.lightgreen {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
#region {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 20px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 20px;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 280px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if:
|
||||
<ul>
|
||||
<li>There is a dark green vertical rectangle on the left</li>
|
||||
<li>There is a dark green square in the middle with a light green
|
||||
square below it</li>
|
||||
<li>There is a light green vertical rectangle on the right</li>
|
||||
<li>There is no red
|
||||
</ul>
|
||||
</p>
|
||||
<div id="named-flow-multicol">
|
||||
<div class="named-flow-block green"></div>
|
||||
<div class="named-flow-block lightgreen"></div>
|
||||
</div>
|
||||
<div id="region"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow, text content flowing into multiple regions
|
||||
fragmented across multiple columns and overflowing the last region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-013-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test checks that the named flow text
|
||||
content flows through the regions in the
|
||||
multi-column container and that it overflows
|
||||
visibly into a fourth column."/>
|
||||
<style type="text/css">
|
||||
#named-flow {
|
||||
font-family: Ahem;
|
||||
font-size: 25px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: multicol;
|
||||
}
|
||||
#multicol-container {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
width: 170px;
|
||||
height: 200px;
|
||||
columns: 3;
|
||||
column-gap: 10px;
|
||||
}
|
||||
#region-1 , #region-2, #region-3 {
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
top: 50px;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
}
|
||||
#bar-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#bar-2 {
|
||||
left: 80px;
|
||||
}
|
||||
#bar-3 {
|
||||
left: 140px;
|
||||
}
|
||||
#bar-4 {
|
||||
left: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are four green vertical bars and no red.</p>
|
||||
<div id="named-flow">
|
||||
XX XX XX XX XX XX XX XX
|
||||
XX XX XX XX XX XX XX XX
|
||||
XX XX XX XX XX XX XX XX
|
||||
XX XX XX XX XX XX XX XX
|
||||
</div>
|
||||
<div id="multicol-container">
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div id="region-3"></div>
|
||||
</div>
|
||||
<div class="failure" id="bar-1"></div>
|
||||
<div class="failure" id="bar-2"></div>
|
||||
<div class="failure" id="bar-3"></div>
|
||||
<div class="failure" id="bar-4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow muticolumn container, text content flowing into
|
||||
multiple regions with content overflowing last region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-013-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test checks that text content flows through multiple
|
||||
regions from the named flow multi-column container and that
|
||||
it overflows the last region in the region chain visibly."/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
font-family: Ahem;
|
||||
font-size: 25px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
columns: 2;
|
||||
column-gap: 10px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
#region-1 , #region-2 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 110px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#region-1 {
|
||||
left: 20px;
|
||||
height: 200px;
|
||||
}
|
||||
#region-2 {
|
||||
left: 140px;
|
||||
height: 100px;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
top: 50px;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
}
|
||||
#bar-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#bar-2 {
|
||||
left: 80px;
|
||||
}
|
||||
#bar-3 {
|
||||
left: 140px;
|
||||
}
|
||||
#bar-4 {
|
||||
left: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are four green vertical bars and no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
XX XX XX XX XX XX XX XX
|
||||
XX XX XX XX XX XX XX XX
|
||||
XX XX XX XX XX XX XX XX
|
||||
XX XX XX XX XX XX XX XX
|
||||
</div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div class="failure" id="bar-1"></div>
|
||||
<div class="failure" id="bar-2"></div>
|
||||
<div class="failure" id="bar-3"></div>
|
||||
<div class="failure" id="bar-4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container, monolithic
|
||||
content flowing into multiple regions</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-016-ref.html"/>
|
||||
<meta name="assert" content="This test checks that monolithic content
|
||||
flows through multiple regions from the named flow
|
||||
multi-column container and that it overflows the last
|
||||
region in the region chain visibly into
|
||||
a fifth column."/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
background-color: green;
|
||||
width: 50px;
|
||||
height: 900px;
|
||||
columns: 2;
|
||||
column-gap: 10px;
|
||||
flow-into: multicol;
|
||||
|
||||
}
|
||||
#region-1 , #region-2 {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
width: 110px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#region-1 {
|
||||
left: 20px;
|
||||
height: 200px;
|
||||
}
|
||||
#region-2 {
|
||||
left: 140px;
|
||||
height: 200px;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
top: 75px;
|
||||
width: 50px;
|
||||
z-index: -1;
|
||||
}
|
||||
#bar-1, #bar-2, #bar-3, #bar-4 {
|
||||
height: 200px;
|
||||
}
|
||||
#bar-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#bar-2 {
|
||||
left: 80px;
|
||||
}
|
||||
#bar-3 {
|
||||
left: 140px;
|
||||
}
|
||||
#bar-4 {
|
||||
left: 200px;
|
||||
}
|
||||
#square {
|
||||
left: 260px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are four green vertical bars, plus one
|
||||
small green square to their right and no red.</p>
|
||||
<div id="named-flow-multicol"></div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div class="failure" id="bar-1"></div>
|
||||
<div class="failure" id="bar-2"></div>
|
||||
<div class="failure" id="bar-3"></div>
|
||||
<div class="failure" id="bar-4"></div>
|
||||
<div class="failure" id="square"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Multiple named flows, text content flowing into multiple
|
||||
regions in a multi-column container</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-017-ref.html"/>
|
||||
<meta name="assert" content="This test checks multiple named flows with text
|
||||
content flow into multiple regions in the multi-column
|
||||
container."/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css">
|
||||
#multicol-container {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 2px solid black;
|
||||
columns: 4;
|
||||
column-gap: 0;
|
||||
}
|
||||
.named-flow {
|
||||
font-family: Ahem;
|
||||
font-size: 25px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
height: 50px;
|
||||
}
|
||||
.black {
|
||||
color: black;
|
||||
}
|
||||
.gray {
|
||||
color: gray;
|
||||
}
|
||||
.region.black {
|
||||
flow-from: multicol-1;
|
||||
}
|
||||
.named-flow.black {
|
||||
flow-into: multicol-1;
|
||||
}
|
||||
.region.gray{
|
||||
flow-from: multicol-2;
|
||||
}
|
||||
.named-flow.gray {
|
||||
flow-into: multicol-2;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
background-color: red;
|
||||
width: 204px;
|
||||
height: 204px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a 4x4 black and gray checkerboard and no red.</p>
|
||||
<div class="named-flow black">
|
||||
XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX
|
||||
</div>
|
||||
<div class="named-flow gray">
|
||||
XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX
|
||||
</div>
|
||||
<div id="multicol-container">
|
||||
<div class="region black"></div>
|
||||
<div class="region gray"></div>
|
||||
<div class="region black"></div>
|
||||
<div class="region gray"></div>
|
||||
<div class="region gray"></div>
|
||||
<div class="region black"></div>
|
||||
<div class="region gray"></div>
|
||||
<div class="region black"></div>
|
||||
<div class="region black"></div>
|
||||
<div class="region gray"></div>
|
||||
<div class="region black"></div>
|
||||
<div class="region gray"></div>
|
||||
<div class="region gray"></div>
|
||||
<div class="region black"></div>
|
||||
<div class="region gray"></div>
|
||||
<div class="region black"></div>
|
||||
</div>
|
||||
<div id="failure"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Multiple named flows multi-column containers, text content flowing
|
||||
into multiple visually overlapping regions</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-019-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test checks multiple named flow multi-column containers
|
||||
with text content flow into multiple overlapping regions."/>
|
||||
<style type="text/css">
|
||||
.named-flow-multicol {
|
||||
width: 150px;
|
||||
font-family: Ahem;
|
||||
font-size: 25px;
|
||||
line-height: 1em;
|
||||
columns: 2;
|
||||
column-gap: 50px;
|
||||
}
|
||||
.green {
|
||||
color: green;
|
||||
flow-into: multicol-1;
|
||||
}
|
||||
.blue {
|
||||
color: blue;
|
||||
flow-into: multicol-2;
|
||||
}
|
||||
#region-1, #region-2 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
}
|
||||
#region-1 {
|
||||
left: 20px;
|
||||
flow-from: multicol-1;
|
||||
}
|
||||
#region-2 {
|
||||
left: 70px;
|
||||
flow-from: multicol-2;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
background-color: red;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a square with four vertical
|
||||
stripes alternating green and blue, and no red.</p>
|
||||
<div class="green named-flow-multicol">
|
||||
XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX
|
||||
</div>
|
||||
<div class="blue named-flow-multicol">
|
||||
XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX
|
||||
</div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div id="failure"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Multiple named flows multi-column containers with
|
||||
unspecified width, non-text content flowing into multiple
|
||||
overlapping regions</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-019-ref.html"/>
|
||||
<meta name="assert" content="This test checks multiple named flow multi-column
|
||||
containers with unspecified width and non-text content flow
|
||||
into multiple overlapping regions."/>
|
||||
<style type="text/css">
|
||||
.named-flow-multicol {
|
||||
columns: 2;
|
||||
column-gap: 50px;
|
||||
}
|
||||
.bar {
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
#named-flow-1 {
|
||||
flow-into: multicol-1;
|
||||
}
|
||||
#named-flow-2 {
|
||||
flow-into: multicol-2;
|
||||
}
|
||||
#region-1, #region-2 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
}
|
||||
#region-1 {
|
||||
left: 20px;
|
||||
color: green;
|
||||
flow-from: multicol-1;
|
||||
}
|
||||
#region-2 {
|
||||
left: 70px;
|
||||
flow-from: multicol-2;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
background-color: red;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a square with four vertical
|
||||
stripes alternating green and blue, and no red.</p>
|
||||
<div class="named-flow-multicol" id="named-flow-1">
|
||||
<div class="green bar"></div>
|
||||
<div class="green bar"></div>
|
||||
</div>
|
||||
<div class="named-flow-multicol" id="named-flow-2">
|
||||
<div class="blue bar"></div>
|
||||
<div class="blue bar"></div>
|
||||
</div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div id="failure"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container, text content
|
||||
flowing into one autosized region with overflowing column</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-003-ref.html"/>
|
||||
<meta name="assert" content="This test checks that text content flows
|
||||
through an autosized region from a multi-column named
|
||||
flow and that it overflows visibly into a third column."/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
columns: 2;
|
||||
column-gap: 30px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
#region {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 280px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are three vertical green rectangles and no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
XXXXX XXXXX XXXXX XXXXX XXXXX
|
||||
</div>
|
||||
<div id="region"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container, monolithic content
|
||||
flowing into an autosized region, overflowing column</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-003-ref.html"/>
|
||||
<meta name="assert" content="This test checks that text content flows
|
||||
through an autosized region from the multi-column
|
||||
named flow and that it overflows visibly into a
|
||||
third column."/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
columns: 2;
|
||||
column-gap: 30px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
#named-flow-block {
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 600px;
|
||||
}
|
||||
#region {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 150px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 280px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are three vertical green rectangles and no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
<div id="named-flow-block"></div>
|
||||
</div>
|
||||
<div id="region"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container with text content flowing
|
||||
into region of smaller width/height than the second region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-024-ref.html"/>
|
||||
<meta name="assert" content="This test checks that text content flows through a region
|
||||
with a smaller width + height than the multi-column named flow
|
||||
and than the second region and that it overflows the first region visibly
|
||||
as a multi-column container before flowing into the second region."/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
width: 130px;
|
||||
height: 120px;
|
||||
columns: 2;
|
||||
column-gap: 10px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
.blue {
|
||||
color: blue;
|
||||
}
|
||||
#region-1, #region-2 {
|
||||
position: absolute;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#region-1 {
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
#region-2 {
|
||||
top: 70px;
|
||||
left: 190px;
|
||||
width: 130px;
|
||||
height: 120px;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
background-color: red;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
z-index: -10;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
height: 60px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 90px;
|
||||
height: 60px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 190px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle.
|
||||
There should be no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
<span class="green">XXX XXX XXX XXX XXX XXX</span>
|
||||
<span class="blue">XXX XXX XXX XXX XXX XXX</span>
|
||||
</div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container with monolithic content
|
||||
flowing into region of smaller width/height than the second region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-024-ref.html"/>
|
||||
<meta name="assert" content="This test checks that text content flows
|
||||
through a region with a smaller width + height than the multi-column named flow
|
||||
and the second region and that it overflows the first region visibly as a
|
||||
multi-column container before flowing into the second region."/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
width: 130px;
|
||||
height: 120px;
|
||||
columns: 2;
|
||||
column-gap: 10px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
.green, .blue {
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
#region-1, #region-2 {
|
||||
position: absolute;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#region-1 {
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
#region-2 {
|
||||
top: 70px;
|
||||
left: 190px;
|
||||
width: 130px;
|
||||
height: 120px;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 60px;
|
||||
background-color: red;
|
||||
z-index: -10;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
height: 60px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 90px;
|
||||
height: 60px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 190px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle.
|
||||
There should be no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
<div class="green named-flow-block"></div>
|
||||
<div class="blue named-flow-block"></div>
|
||||
</div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container with text content
|
||||
flowing into region of smaller height than the second region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-024-ref.html"/>
|
||||
<meta name="assert" content="This test checks that text content flows
|
||||
through a region with a height smaller than the second region and
|
||||
that it overflows the first region as a multi-column container
|
||||
before flowing into the second region."/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
width: 130px;
|
||||
height: 120px;
|
||||
columns: 2;
|
||||
column-gap: 10px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
.blue {
|
||||
color: blue;
|
||||
}
|
||||
#region-1, #region-2 {
|
||||
position: absolute;
|
||||
width: 130px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#region-1 {
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
height: 60px;
|
||||
}
|
||||
#region-2 {
|
||||
top: 70px;
|
||||
left: 190px;
|
||||
height: 120px;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
background-color: red;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
z-index: -10;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 90px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 190px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle.
|
||||
There should be no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
<span class="green">XXX XXX XXX XXX XXX XXX</span>
|
||||
<span class="blue">XXX XXX XXX XXX XXX XXX</span>
|
||||
</div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container with monolithic content +
|
||||
flowing into region of smaller height than the second region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-024-ref.html"/>
|
||||
<meta name="assert" content="This test checks that monolithic content flows
|
||||
through a region with a height smaller than the second region and
|
||||
that it overflows the first region as a multi-column container
|
||||
before flowing into the second region."/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
width: 130px;
|
||||
height: 120px;
|
||||
columns: 2;
|
||||
column-gap: 10px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
.green, .blue {
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
#region-1, #region-2 {
|
||||
position: absolute;
|
||||
width: 130px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#region-1 {
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
height: 60px;
|
||||
}
|
||||
#region-2 {
|
||||
top: 70px;
|
||||
left: 190px;
|
||||
height: 120px;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 60px;
|
||||
background-color: red;
|
||||
z-index: -10;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
height: 60px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 90px;
|
||||
height: 60px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 190px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle.
|
||||
There should be no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
<div class="green named-flow-block"></div>
|
||||
<div class="blue named-flow-block"></div>
|
||||
</div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container with text content
|
||||
flowing into first region of smaller width than the second region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-028-ref.html"/>
|
||||
<meta name="assert" content="This test checks that text content flows
|
||||
through a region with a smaller width than the multi-column named flow and the
|
||||
second region and that it overflows the first region visibly as a multi-column
|
||||
container before flowing into the second region."/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
width: 130px;
|
||||
height: 120px;
|
||||
columns: 2;
|
||||
column-gap: 10px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
.blue {
|
||||
color: blue;
|
||||
}
|
||||
#region-1, #region-2 {
|
||||
position: absolute;
|
||||
height: 120px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#region-1 {
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
}
|
||||
#region-2 {
|
||||
top: 70px;
|
||||
left: 190px;
|
||||
width: 130px;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
background-color: red;
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
z-index: -10;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 90px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 190px;
|
||||
}
|
||||
#block-4 {
|
||||
left: 260px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green vertical rectangles on the left of two blue vertical rectangles.
|
||||
There should be no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
<span class="green">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</span>
|
||||
<span class="blue">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</span>
|
||||
</div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
<div class="failure" id="block-4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: One named flow multi-column container with monolithic content
|
||||
flowing into first region of smaller width than the second region</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
<link rel="match" href="reference/regions-multicol-028-ref.html"/>
|
||||
<meta name="assert" content="This test checks that monolithic content flows
|
||||
through a region with a smaller width than the multi-column named flow and the
|
||||
second region and that it overflows the first region visibly as a
|
||||
multi-column container before flowing into the second region."/>
|
||||
<style type="text/css">
|
||||
#named-flow-multicol {
|
||||
width: 130px;
|
||||
height: 120px;
|
||||
columns: 2;
|
||||
column-gap: 10px;
|
||||
flow-into: multicol;
|
||||
}
|
||||
.green, .blue {
|
||||
width: 60px;
|
||||
height: 240px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
#region-1, #region-2 {
|
||||
position: absolute;
|
||||
height: 120px;
|
||||
flow-from: multicol;
|
||||
}
|
||||
#region-1 {
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
}
|
||||
#region-2 {
|
||||
top: 70px;
|
||||
left: 160px;
|
||||
width: 130px;
|
||||
}
|
||||
.failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
background-color: red;
|
||||
z-index: -10;
|
||||
}
|
||||
#block-1 {
|
||||
left: 20px;
|
||||
}
|
||||
#block-2 {
|
||||
left: 90px;
|
||||
}
|
||||
#block-3 {
|
||||
left: 190px;
|
||||
}
|
||||
#block-4 {
|
||||
left: 260px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green vertical rectangles on the left of two blue vertical rectangles.
|
||||
There should be no red.</p>
|
||||
<div id="named-flow-multicol">
|
||||
<div class="green named-flow-block"></div>
|
||||
<div class="blue named-flow-block"></div>
|
||||
</div>
|
||||
<div id="region-1"></div>
|
||||
<div id="region-2"></div>
|
||||
<div class="failure" id="block-1"></div>
|
||||
<div class="failure" id="block-2"></div>
|
||||
<div class="failure" id="block-3"></div>
|
||||
<div class="failure" id="block-4"></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue