Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 08:55:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

Browse source
This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

53
tests/wpt/css-tests/css-regions-1_dev/html/animations-001.htm Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: animating content flowed into a region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-transforms-1/#transform-functions" rel="help">
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
<meta content="Test checks that content that has an animated 3D transform renders and animates when flowed in a region." name="assert">
<meta content="ahem animated" name="flags">
<!-- TODO Determine if it's OK for this test to be a ref-test or it should only be a manual one. -->
<link href="reference/animations-001-ref.htm" rel="match">
<link href="support/animations.css" rel="stylesheet">
<style>
.transformed {
transform: rotateZ(45deg);
}
.flow {
flow-into: f;
color: green;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: f;
width: 100px;
height: 100px;
background-color: lightblue;
}
.region p {
background-color: red;
height: 50%;
}
</style>
</head>
<body>
<p>Test passes if you see a green square rotating once on top of a static blue square and no red.</p>
<div class="region">
<p>&nbsp;</p>
</div>
<div class="transformed flow rotate once">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
</div>
</body></html>

45
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-flexbox-001.htm Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: fixed height flexbox inside auto height region</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<meta content="Test that flowing a flex container inside a region with auto-height will enlarge
the region to fit the content." name="assert">
<link href="reference/autoheight-flexbox-001-ref.htm" rel="match">
<style>
.flex {
display: flex;
height: 100px;
width: 100px;
background-color: green;
flow-into: flow;
}
.region {
width: 100px;
background-color: gray;
padding: 10px;
flow-from: flow;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see a green square inside a gray square.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="flex">
</div>
<div class="region">
<p class="red">&nbsp;</p>
</div>
</body></html>

50
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-flexbox-002.htm Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: flowing auto-height flexbox elements in region</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<meta content="ahem" name="flags">
<meta content="Test that a flex container with auto height is flowed correctly inside a region
with auto height. The region should fit the flexbox." name="assert">
<link href="reference/regions-flexbox-002-ref.htm" rel="match">
<style>
.flex {
display: flex;
flow-into: flow;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
}
.region {
width: 100px;
padding: 10px;
background-color: gray;
flow-from: flow;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see a green square inside a gray rectangle.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="flex">
XXXXX<br>
XXXXX<br>
XXXXX<br>
XXXXX<br>
XXXXX
</div>
<div class="region">
<p class="red">&nbsp;</p>
</div>
</body></html>

54
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-flexbox-003.htm Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: auto height region inside a fixed sized flexbox</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<meta content="ahem" name="flags">
<meta content="Test that an auto-height region inside a flexbox is stretched to match the flexbox
container's cross size." name="assert">
<link href="reference/autoheight-flexbox-003-ref.htm" rel="match">
<style>
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
flow-into: flow;
}
.region {
flow-from: flow;
}
.flex {
display: flex;
height: 100px;
width: 100px;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see a green square.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content">
XXXXX<br>
XXXXX<br>
XXXXX<br>
XXXXX<br>
XXXXX
</div>
<div class="flex">
<div class="region">
<p class="red">&nbsp;</p>
</div>
</div>
</body></html>

53
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-flexbox-004.htm Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: auto height region inside an auto height flexbox</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<meta content="ahem" name="flags">
<meta content="Test that an auto height region inside a flex container with auto height is
displayed properly. The flexbox should have the same height as the region." name="assert">
<link href="reference/autoheight-flexbox-003-ref.htm" rel="match">
<style>
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
flow-into: flow;
}
.region {
flow-from: flow;
}
.flex {
display: flex;
width: 100px;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see a green square.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content">
XXXXX<br>
XXXXX<br>
XXXXX<br>
XXXXX<br>
XXXXX
</div>
<div class="flex">
<div class="region">
<p class="red">&nbsp;</p>
</div>
</div>
</body></html>

93
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-autoheight-flexbox-001.htm Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: Auto-height regions in auto-height flex container</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property" rel="help">
<meta content="ahem" name="flags">
<meta content="Test that auto-height regions placed in a flex container with auto-height and
row wrap reverse flow are sized correctly. The content from the second flow should flow through the region on
the second row and into the region from the first row, making the left blue rectangle taller than the green
rectangle on the right." name="assert">
<link href="reference/autoheight-regions-in-autoheight-flexbox-001-ref.htm" rel="match">
<style>
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
#c1 {
color: green;
flow-into: flow1;
}
#c2 {
color: blue;
flow-into: flow2;
}
.flex {
display: flex;
max-width: 300px;
flex-flow: row-reverse wrap-reverse;
}
.fromFlow1 {
flow-from: flow1;
}
.fromFlow2 {
flow-from: flow2;
}
#r1 {
max-width: 100px;
max-height: 40px;
flex: 1 1 auto;
}
#r2 {
width: 200px;
flex: 1 1 auto;
}
#r3 {
flex: 1 1 auto;
}
.blue {
color: blue;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see a blue rectangle and a green rectangle, from left to right in this order.</li>
<li>The blue rectangle one the left should be taller than the green rectangle on the right.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content" id="c1">
XXXXX<br>
XXXXX<br>
<span class="blue">XXXXX</span>
</div>
<div class="content" id="c2">
XXXXX<br>
XXXXX
</div>
<div class="flex">
<div class="fromFlow1" id="r1"><p class="red">&nbsp;</p></div>
<div class="fromFlow2" id="r2"><p class="red">&nbsp;</p></div>
<div class="fromFlow1" id="r3"><p class="red">&nbsp;</p></div>
</div>
</body></html>

58
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-autoheight-flexbox-002.htm Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: Auto-height regions with vertical writing mode in auto-height flexbox</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" rel="help">
<link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that auto-height regions having content with vertical writing mode are
sized correctly when placed inside a flex container. The flowed content should be displayed as a horizontal
green stripe." name="assert">
<link href="reference/autoheight-regions-in-autoheight-flexbox-002-ref.htm" rel="match">
<style>
.content {
font-size: 20px;
line-height: 1em;
color: green;
font-family: Ahem;
flow-into: flow;
writing-mode: vertical-rl;
}
.flexbox {
display: flex;
flex-flow: row;
}
.region {
background-color: green;
flow-from: flow;
}
.region > p {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see a horizontal green stripe.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content">
XX<br>
XX<br>
XX<br>
XX<br>
XX
</div>
<div class="flexbox">
<div class="region">
<p>&nbsp;</p>
</div>
</div>
</body></html>

64
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-autoheight-flexbox-003.htm Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: auto-height regions in auto-height flexbox with flex basis</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#break-after" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-basis" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that the computed height of auto-height regions placed in a flex
container takes into the account the flex basis property. The space available inside the flex container should
be distributed according to the flex basis property. In this particular case, each of the three regions must
have a height equal to one third of the flex container's height." name="assert">
<link href="reference/autoheight-regions-in-autoheight-flexbox-003-ref.htm" rel="match">
<style>
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
flow-into: flow;
}
.flex {
display: flex;
min-height: 120px;
flex-direction: column;
}
.region {
flex: 1 1 33%;
flow-from: flow;
}
.break {
/* Current (Jul 2013) standard way of region breaking */
break-after: region;
/* Old, non-standard but implemented way of region breaking */
region-break-after: always;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see three horizontal green stripes.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content">
XXXX<br><div class="break"></div>
XXXX<br><div class="break"></div>
XXXX<br>
</div>
<div class="flex">
<div class="region"><p class="red">&nbsp;</p></div>
<div class="region"> </div>
<div class="region"> </div>
</div>
</body></html>

71
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-autoheight-flexbox-004.htm Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: nested regions in flexbox</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that nested regions placed in flex containers
are laid out properly. The first flow (blue content) is nested inside the second flow (green content). The user
should see three horizontal stripes with the following colors: green, blue, green." name="assert">
<link href="reference/autoheight-regions-in-autoheight-flexbox-004-ref.htm" rel="match">
<style>
.c1, .c2 {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.c1 {
color: blue;
flow-into: f1;
margin-top: 20px;
margin-bottom: 20px;
}
.c2 {
color: green;
flow-into: f2;
}
.flex {
display: flex;
flex-direction: column;
}
.r1 {
flow-from: f1;
}
.r2 {
flow-from: f2;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see a column of three horizontal stripes with colors in the following order:
green, blue, green.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="c1">
XXX
</div>
<div class="c2">
<div class="flex">
XXX
<div class="r1"></div>
</div>
XXX
</div>
<div class="flex">
<div class="r2"><p class="red">&nbsp;</p></div>
</div>
</body></html>

89
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-fixed-sized-flexbox-001.htm Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: Auto-height regions inside fixed sized flexbox</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that auto-height regions respect the flex grow property when placed
inside a fixed sized flexbox with a single row." name="assert">
<link href="reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.htm" rel="match">
<style>
.content1, .content2 {
font-family: Ahem;
line-height: 1em;
font-size: 20px;
}
.content1 {
color: green;
flow-into: flow1;
}
.content2 {
color: blue;
flow-into: flow2;
}
#fixed {
height: 200px;
width: 100px;
background-color: blue;
}
.flex {
display: flex;
height: 200px;
width: 500px;
}
.fromFlow1 {
flow-from: flow1;
flex-grow: 0;
}
.fromFlow2 {
flow-from: flow2;
flex-grow: 1;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you can see two squares placed on the same horizontal line. Each square consists of two
vertical halves. The left square has the left half colored green and the right half colored blue.
The right square has left half colored blue and the right half colored green.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content1">
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
</div>
<div class="content2">
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>
</div>
<div class="flex">
<div class="fromFlow1">
</div>
<div class="fromFlow2">
</div>
<div id="fixed">
</div>
<div class="fromFlow1">
<p class="red">&nbsp;</p>
</div>
</div>
</body></html>

94
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-fixed-sized-flexbox-002.htm Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: Auto-height regions inside fixed sized flexbox with column flow</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that auto-height regions placed inside a fixed sized flexbox with
column flow have the correct computed height. There are two regions placed inside the same flex container
having the same 'grow' value. The space should be distributed evenly between the two." name="assert">
<link href="reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.htm" rel="match">
<style>
.content1, .content2 {
font-family: Ahem;
line-height: 1em;
font-size: 20px;
}
.content1 {
color: green;
flow-into: flow1;
}
.content2 {
color: blue;
flow-into: flow2;
}
#fixed {
height: 100px;
width: 200px;
background-color: blue;
flex-grow: 0;
}
.flex {
display: flex;
height: 400px;
width: 200px;
flex-direction: column;
}
.fromFlow1 {
flow-from: flow1;
flex-grow: 1;
}
.fromFlow2 {
flow-from: flow2;
flex-grow: 1;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you can see two squares: a green square at the top and a blue square at the bottom.</li>
<li>The two squares should be of the same size.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content1">
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX
</div>
<div class="content2">
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>
</div>
<div class="flex">
<div class="fromFlow1">
</div>
<div class="fromFlow2">
</div>
<div id="fixed">
</div>
<!-- This shouldn't get any content if the flex container distributes space evenly between the first two
regions. -->
<div class="fromFlow1">
<p class="red">&nbsp;</p>
</div>
</div>
</body></html>

107
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-fixed-sized-flexbox-003.htm Normal file
View file

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: Auto-height regions inside a fixed sized flexbox with column wrap flow</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks the layout of auto-height regions placed inside a flexbox with a fixed
size and column wrap flow. The flex container should have two columns with three regions each." name="assert">
<link href="reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.htm" rel="match">
<style>
.content {
font-family: Ahem;
line-height: 1em;
font-size: 20px;
}
#c1 {
flow-into: f1;
color: green;
}
#c2 {
flow-into: f2;
color: blue;
}
.flex {
height: 120px;
width: 200px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.region1 {
flow-from: f1;
width: 100px;
margin-right: 20px;
}
.region2 {
flow-from: f2;
break-after: always;
width: 100px;
margin-right: 20px;
}
.break {
/* Current (Jul 2013) standard way of region breaking */
break-after: region;
/* Old, non-standard but implemented way of region breaking */
region-break-after: always;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see two columns with a total of 6 alternating horizontal green and blue stripes.</li>
<li>You shouldn't see any red.</li>
</ul>
<div id="c1" class="content">
XXXXX<br>
XXXXX
<div class="break"></div>
XXXXX<br>
XXXXX
<div class="break"></div>
XXXXX<br>
XXXXX
</div>
<div id="c2" class="content">
XXXXX<br>
XXXXX
<div class="break"></div>
XXXXX<br>
XXXXX
<div class="break"></div>
XXXXX<br>
XXXXX
</div>
<div class="flex">
<div class="region1">
</div>
<div class="region2">
</div>
<div class="region1">
</div>
<div class="region2">
</div>
<div class="region1">
</div>
<div class="region2">
<p class="red">&nbsp;</p>
</div>
</div>
</body></html>

71
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-fixed-sized-flexbox-004.htm Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: Auto-height region in fixed sized flexbox using flex basis</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks the layout of regions placed inside a fixed sized flexbox using flex
basis and column flow. The flex container should force the first region to break by constraining its height." name="assert">
<link href="reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.htm" rel="match">
<style>
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
flow-into: flow;
}
.flex {
display: flex;
height: 100px;
width: 100px;
flex-direction: column;
margin-bottom: 20px;
}
.fixed {
flex-basis: 60%;
}
.region {
flow-from: flow;
}
#first {
flex-basis: 40%;
}
#second {
height: 100px;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see two green stripes.</li>
<li>You should not see any red.</li>
</ul>
<div class="content">
XXXXX<br>
XXXXX<br>
XXXXX<br>
XXXXX<br>
</div>
<div class="flex">
<div class="fixed"></div>
<div id="first" class="region"></div>
</div>
<div id="second" class="region">
<p class="red">&nbsp;</p>
</div>
</body></html>

61
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-fixed-sized-flexbox-005.htm Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: Auto-height regions in fixed sized flexboxes with align-items and justify-content</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<meta content="Test checks auto-height regions' layout when placed inside a flexbox with using
align-items and justify-content properties. The flowed content should be fragmented between the three regions
and the flex container should distribute the remaining horizontal space evenly around the regions." name="assert">
<link href="reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.htm" rel="match">
<style>
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
flow-into: flow;
}
.flex {
display: flex;
align-items: center;
justify-content: space-around;
height: 100px;
width: 420px;
}
.region {
flow-from: flow;
}
.break {
/* Current (Jul 2013) standard way of region breaking */
break-after: region;
/* Old, non-standard but implemented way of region breaking */
region-break-after: always;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see three horizontal green stripes.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content">
<div class="break">XXXX</div>
<div class="break">XXXX</div>
<div class="break">XXXX</div>
</div>
<div class="flex">
<div class="region"></div>
<div class="region"></div>
<div class="region"><p class="red">&nbsp;</p></div>
</div>
</body></html>

70
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-fixed-sized-flexbox-006.htm Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: auto-height regions inside a flex container with fixed size</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap" rel="help">
<meta content="Test that the flex container stretches a region flex item with a height smaller than
the flex container's inner cross size." name="assert">
<link href="reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.htm" rel="match">
<style>
#c1, #c2 {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
#c1 {
color: green;
flow-into: flow1;
}
#c2 {
color: blue;
flow-into: flow2;
}
.flex {
display: flex;
flex-direction: row wrap;
flex: auto;
height: 80px;
width: 200px;
}
.region1 {
flow-from: flow1;
background-color: green;
}
.region2 {
flow-from: flow2;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see a rectangle having the left half colored green and the right half colored
blue.</li>
<li>You shouldn't see any red.</li>
</ul>
<div id="c1">
XXXX<br>
XXXX
</div>
<div id="c2">
XXXX<br>
XXXX<br>
XXXX<br>
XXXX
</div>
<div class="flex">
<div class="region1"></div>
<div class="region2"><p class="red">&nbsp;</p></div>
</div>
</body></html>

61
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-fixed-sized-flexbox-007.htm Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: auto-height regions inside fixed sized flexbox</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<meta content="ahem" name="flags">
<meta content="Test that using the flex-basis property sizes the flex items to a percentage of
the flex container's height when said items are auto-height regions. The last region, the outside the flex
container should not be visible." name="assert">
<link href="reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.htm" rel="match">
<style>
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
flow-into: flow;
}
.flex {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 200px;
width: 80px;
}
.region {
flex-basis: 10%;
flow-from: flow;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see you three identical green stripes.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content">
XXXX<br>
XXXX<br>
XXXX<br>
XXXX
</div>
<div class="flex">
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
</div>
<div class="region"><p class="red">&nbsp;</p></div>
</body></html>

59
tests/wpt/css-tests/css-regions-1_dev/html/autoheight-regions-in-fixed-sized-flexbox-008.htm Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: auto-height regions with max height in fixed sized flexbox</title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<meta content="ahem" name="flags">
<meta content="Test that the max-height property is applied to regions placed inside a fixed
sized flexbox with a column flow. The flex container should not flex the region flex items beyond their
max height value." name="assert">
<link href="reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.htm" rel="match">
<style>
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
flow-into: flow;
}
.flex {
display: flex;
flex-direction: column;
height: 200px;
width: 100px;
}
.region {
max-height: 20px;
flex: auto;
flow-from: flow;
margin-bottom: 20px;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see three horizontal green stripes.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content">
XXXX<br>
XXXX<br>
XXXX
</div>
<div class="flex">
<div class="region"></div>
<div class="region"></div>
<div class="region"><p class="red">&nbsp;</p></div>
</div>
</body></html>

42
tests/wpt/css-tests/css-regions-1_dev/html/canvas3d-001.htm Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: rendering 3D canvas elements inside regions</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-transforms-1/#transform-functions" rel="help">
<meta content="Test checks that when a 3D (webGL) canvas element is flowed in a region it renders as it would render if it wouldn't be flowed in the region." name="assert">
<meta content="dom" name="flags">
<link href="reference/canvas3d-001-ref.htm" rel="match">
<script src="support/Three.js" type="text/javascript"></script>
<script src="support/static-cube.js" type="text/javascript"></script>
<style>
.flow {
flow-into: f;
width: 400px;
height: 300px;
}
.region {
flow-from: f;
width: 400px;
height: 300px;
border: 2px solid black;
}
.region p {
background-color: red;
height: 50%;
}
</style>
</head>
<body>
<p>Test passes if you see a cube (with blue, teal and purple sides) inside a black-bordered rectangle and no red.</p>
<div class="flow" id="container">
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
</div>
<div class="region">
<p>&nbsp;</p>
</div>
</body></html>

46
tests/wpt/css-tests/css-regions-1_dev/html/canvas3d-002.htm Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: rendering text flowed in a region on top of 3D content</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-transforms-1/#transform-functions" rel="help">
<meta content="Test checks that text flowed in a region renders without artifacts when the region overlaps a 3D (webGL) canvas element. This can be problematic in browsers that don't handle layers and/or 3D acceleration correctly." name="assert">
<meta content="dom" name="flags">
<link href="reference/canvas3d-002-ref.htm" rel="match">
<script src="support/Three.js" type="text/javascript"></script>
<script src="support/static-cube.js" type="text/javascript"></script>
<style>
.flow {
flow-into: f;
}
#container {
width: 400px;
height: 300px;
}
.region {
flow-from: f;
width: 200px;
height: 300px;
margin: -250px 100px 0px 100px;
}
.region p {
background-color: red;
height: 50%;
}
</style>
</head>
<body>
<p>Test passes if you see a continuous run of text over a cube (with blue, teal and purple sides) and no red.</p>
<div class="flow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, veniam, dolorum earum molestias iusto corrupti quaerat unde. Nihil, ex, architecto enim doloremque amet ipsa distinctio quibusdam iste eveniet minima quisquam.</div>
<div id="container">
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
</div>
<div class="region">
<p>&nbsp;</p>
</div>
</body></html>

39
tests/wpt/css-tests/css-regions-1_dev/html/chapter-1.htm Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Introduction - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>Introduction (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#introduction">1 Introduction</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

39
tests/wpt/css-tests/css-regions-1_dev/html/chapter-10.htm Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Use Cases - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>Use Cases (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s10">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10">+</a>
<a href="http://www.w3.org/TR/css3-regions/#usecases">10 Use Cases</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

174
tests/wpt/css-tests/css-regions-1_dev/html/chapter-11.htm Normal file
View file

@ -0,0 +1,174 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Changes - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>Changes (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s11">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11">+</a>
<a href="http://www.w3.org/TR/css3-regions/#changes">11 Changes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#changes_from_Feb_18_2014">11.1 Changes from February 18th 2014 version</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.2">+</a>
<a href="http://www.w3.org/TR/css3-regions/#changes_from_May_28_2013">11.2 Changes from May 28th 2013 version</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.3">+</a>
<a href="http://www.w3.org/TR/css3-regions/#changes_from_Aug_28_2012">11.3 Changes from August 28th 2012 version</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.4">+</a>
<a href="http://www.w3.org/TR/css3-regions/#changes_from_May_03_2012">11.4 Changes from May 3rd 2012 version</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.5">+</a>
<a href="http://www.w3.org/TR/css3-regions/#older_changes">11.5 Older Changes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css21">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-break">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-exclusions">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-flexbox">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-line-grid">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-page-template">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3col">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3page">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3ui">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-cssom">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-cssom-view">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-dom">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-dom-level-3-events">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-html40">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-rfc2119">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-select">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance-classes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#contents">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conventions">
<!-- 0 tests -->
</tbody>
<tbody id="s.#experimental">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#normative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#partial">
<!-- 0 tests -->
</tbody>
<tbody id="s.#property-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#status">
<!-- 0 tests -->
</tbody>
<tbody id="s.#subtitle">
<!-- 0 tests -->
</tbody>
<tbody id="s.#testing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#title">
<!-- 0 tests -->
</tbody>
<tbody id="s.#w3c_process_revision">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

72
tests/wpt/css-tests/css-regions-1_dev/html/chapter-2.htm Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Regions concepts - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>CSS Regions concepts (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="http://www.w3.org/TR/css3-regions/#css-regions-concepts">2 CSS Regions concepts</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#regions">2.1 Regions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.1.#css-region">
<!-- 0 tests -->
</tbody>
<tbody id="s2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.2">+</a>
<a href="http://www.w3.org/TR/css3-regions/#region-chain-section">2.2 Region chain</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.2.#region-chain">
<!-- 0 tests -->
</tbody>
<tbody id="s2.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.3">+</a>
<a href="http://www.w3.org/TR/css3-regions/#named-flow-section">2.3 Named flows</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.3.#named-flow">
<!-- 0 tests -->
</tbody>
<tbody id="s2.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.4">+</a>
<a href="http://www.w3.org/TR/css3-regions/#regions-flow-breaking-rules">2.4 Regions flow breaking rules</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

3507
tests/wpt/css-tests/css-regions-1_dev/html/chapter-3.htm Normal file
View file

File diff suppressed because it is too large Load diff

155
tests/wpt/css-tests/css-regions-1_dev/html/chapter-4.htm Normal file
View file

@ -0,0 +1,155 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSSOM - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>CSSOM (1 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="http://www.w3.org/TR/css3-regions/#cssom_view_and_css_regions">4 CSSOM</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#the-namedflow-interface">4.1 The NamedFlow interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#document-namedflows">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-document-namedflows">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflow">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflow-firstemptyregionindex">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflow-getcontent">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflow-getregions">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflow-getregionsbycontent">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflow-getregionsbycontent-node">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflow-name">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflow-overset">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap-delete">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap-delete-flowname">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap-get">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap-get-flowname">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap-has">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap-has-flowname">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap-set">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap-set-flowname">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#dom-namedflowmap-set-flowvalue">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="http://www.w3.org/TR/css3-regions/#the-region-interface">4.2 The Region interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#dom-region">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#dom-region-getregionflowranges">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#dom-region-regionoverset">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="http://www.w3.org/TR/css3-regions/#named-flow-events">4.3 Named flow events</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="http://www.w3.org/TR/css3-regions/#cssomview-and-regions">4.4 Clarifications on pre-existing APIs</a></th></tr>
<!-- 1 tests -->
<tr id="cssomview-apis-no-region-chain-001-4.4" class="primary dom script">
<td><strong>
<a href="cssomview-apis-no-region-chain-001.htm">cssomview-apis-no-region-chain-001</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: CSSOM pre-existing APIs with no region chain
<ul class="assert">
<li>CSSOM View attributes give 'no layout box' result for named flows with no region chain</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4.1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#cssomview-getclientrects-and-getboundingclientrect">4.4.1 getClientRects() and getBoundingClientRect()</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4.2">+</a>
<a href="http://www.w3.org/TR/css3-regions/#cssomview-offset-attributes">4.4.2 offsetTop, offsetLeft, offsetWidth, offsetHeight and offsetParent</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

182
tests/wpt/css-tests/css-regions-1_dev/html/chapter-5.htm Normal file
View file

@ -0,0 +1,182 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Multi-column regions - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>Multi-column regions (13 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a>
<a href="http://www.w3.org/TR/css3-regions/#multi-column-regions">5 Multi-column regions</a></th></tr>
<!-- 13 tests -->
<tr id="regions-multicol-004-5" class="ahem">
<td>
<a href="regions-multicol-004.htm">regions-multicol-004</a></td>
<td><a href="reference/regions-multicol-003-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow, text content flowing into one multi-column region
<ul class="assert">
<li>This test checks that text content in a named flow is laid out using columns when flowed in a multi-column region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-006-5" class="ahem">
<td>
<a href="regions-multicol-006.htm">regions-multicol-006</a></td>
<td><a href="reference/regions-multicol-006-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow, text content - fragmented between multicol region and non-multicol region
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-008-5" class="">
<td>
<a href="regions-multicol-008.htm">regions-multicol-008</a></td>
<td><a href="reference/regions-multicol-008-ref.htm">=</a> </td>
<td></td>
<td>One named flow, non-text fragmentable content flowing into multi-column region then into non-multicol region
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-009-5" class="">
<td>
<a href="regions-multicol-009.htm">regions-multicol-009</a></td>
<td><a href="reference/regions-multicol-009-ref.htm">=</a> </td>
<td></td>
<td>One named flow, text content flowing into a simple region then into a multi-column region
<ul class="assert">
<li>This test checks that text named flow content is fragmented first through a simple region, then through a multi-column region</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-011-5" class="">
<td>
<a href="regions-multicol-011.htm">regions-multicol-011</a></td>
<td><a href="reference/regions-multicol-009-ref.htm">=</a> </td>
<td></td>
<td>One named flow, non-text fragmentable content flowing into non-mulicol region then into a multi-column region
<ul class="assert">
<li>This test checks that non-text fragmentable named flow content is fragmented through a simple region, then through a multi-column region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-022-5" class="primary ahem">
<td><strong>
<a href="regions-multicol-022.htm">regions-multicol-022</a></strong></td>
<td><a href="reference/regions-multicol-003-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow multi-column container, text content flowing into one autosized region with overflowing column
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-023-5" class="primary">
<td><strong>
<a href="regions-multicol-023.htm">regions-multicol-023</a></strong></td>
<td><a href="reference/regions-multicol-003-ref.htm">=</a> </td>
<td></td>
<td>One named flow multi-column container, monolithic content flowing into an autosized region, overflowing column
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-024-5" class="primary ahem">
<td><strong>
<a href="regions-multicol-024.htm">regions-multicol-024</a></strong></td>
<td><a href="reference/regions-multicol-024-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow multi-column container with text content flowing into region of smaller width/height than the second region
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-025-5" class="primary">
<td><strong>
<a href="regions-multicol-025.htm">regions-multicol-025</a></strong></td>
<td><a href="reference/regions-multicol-024-ref.htm">=</a> </td>
<td></td>
<td>One named flow multi-column container with monolithic content flowing into region of smaller width/height than the second region
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-026-5" class="primary ahem">
<td><strong>
<a href="regions-multicol-026.htm">regions-multicol-026</a></strong></td>
<td><a href="reference/regions-multicol-024-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow multi-column container with text content flowing into region of smaller height than the second region
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-027-5" class="primary">
<td><strong>
<a href="regions-multicol-027.htm">regions-multicol-027</a></strong></td>
<td><a href="reference/regions-multicol-024-ref.htm">=</a> </td>
<td></td>
<td>One named flow multi-column container with monolithic content + flowing into region of smaller height than the second region
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-028-5" class="primary ahem">
<td><strong>
<a href="regions-multicol-028.htm">regions-multicol-028</a></strong></td>
<td><a href="reference/regions-multicol-028-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow multi-column container with text content flowing into first region of smaller width than the second region
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-029-5" class="primary">
<td><strong>
<a href="regions-multicol-029.htm">regions-multicol-029</a></strong></td>
<td><a href="reference/regions-multicol-028-ref.htm">=</a> </td>
<td></td>
<td>One named flow multi-column container with monolithic content flowing into first region of smaller width than the second region
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>

39
tests/wpt/css-tests/css-regions-1_dev/html/chapter-6.htm Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Pseudo-elements - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>Pseudo-elements (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a>
<a href="http://www.w3.org/TR/css3-regions/#pseudo_elements">6 Pseudo-elements</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

391
tests/wpt/css-tests/css-regions-1_dev/html/chapter-7.htm Normal file
View file

@ -0,0 +1,391 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Regions visual formatting details - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>Regions visual formatting details (23 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7">+</a>
<a href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details">7 Regions visual formatting details</a></th></tr>
<!-- 7 tests -->
<tr id="floated-regions-001-7" class="">
<td>
<a href="floated-regions-001.htm">floated-regions-001</a></td>
<td><a href="reference/floated-regions-001-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: multiple auto-sized floated regions
<ul class="assert">
<li>Test checks that multiple regions that are auto-sized and floated are sized according to the auto-size algorithm but also respect the floats sizing model. They should also be properly floated relative to their corresponding block formatting context.</li>
</ul>
</td>
</tr>
<tr id="floated-regions-004-7" class="">
<td>
<a href="floated-regions-004.htm">floated-regions-004</a></td>
<td><a href="reference/floated-regions-004-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: named flow contains a nested floated region
<ul class="assert">
<li>Test checks that a named flow that contains a nested floated auto-sized region is formatted according to the visual formatting model.</li>
</ul>
</td>
</tr>
<tr id="floated-regions-005-7" class="">
<td>
<a href="floated-regions-005.htm">floated-regions-005</a></td>
<td><a href="reference/floated-regions-005-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: floated and normal flow auto-sized regions
<ul class="assert">
<li>Test checks that layout is correct when mixing floated and normal flow auto-sized regions.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-004-7" class="">
<td>
<a href="floats-in-named-flow-004.htm">floats-in-named-flow-004</a></td>
<td><a href="reference/floats-in-named-flow-004-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: separate floats flowed in autosized region
<ul class="assert">
<li>Test checks that floats added to a named flow from different containers are stacked relative to the region container (not their initial container) and the region is correctly sized.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-005-7" class="ahem dom http">
<td>
<a href="regions-resizing-005.htm">regions-resizing-005</a></td>
<td><a href="reference/regions-resizing-005-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td>
<td>CSS Regions: resizing floated region with percentage size relative to the body
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has a percentage size relative to the body and is floated, correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-009-7" class="ahem dom http">
<td>
<a href="regions-resizing-009.htm">regions-resizing-009</a></td>
<td><a href="reference/regions-resizing-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td>
<td>CSS Regions: resizing autosized region when content flowed in it is sized with viewport units
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing an autosized region when the content flowed in it is sized with viewport units correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-012-7" class="ahem dom http">
<td>
<a href="regions-resizing-012.htm">regions-resizing-012</a></td>
<td><a href="reference/regions-resizing-011-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td>
<td>CSS Regions: resizing percent sized region and auto-sized region
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing two regions and a single named flow where one region has percentage size and the other is auto-sized correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#processing-model">7.1 Processing model</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2">+</a>
<a href="http://www.w3.org/TR/css3-regions/#regions-flow-content-box">7.2 The Region Flow Content Box (RFCB)</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#region-flow-content-box">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#rfcb">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2.1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#rfcb-width-resolution">7.2.1 RFCB width resolution</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3">+</a>
<a href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-steps">7.3 Regions visual formatting steps</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.#flow-fragment-height">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">7.3.1 Step 1: RFCB flow fragment height resolution</a></th></tr>
<!-- 16 tests -->
<tr id="autoheight-flexbox-001-7.3.1" class="">
<td>
<a href="autoheight-flexbox-001.htm">autoheight-flexbox-001</a></td>
<td><a href="reference/autoheight-flexbox-001-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: fixed height flexbox inside auto height region
<ul class="assert">
<li>Test that flowing a flex container inside a region with auto-height will enlarge the region to fit the content.</li>
</ul>
</td>
</tr>
<tr id="autoheight-flexbox-002-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-flexbox-002.htm">autoheight-flexbox-002</a></strong></td>
<td><a href="reference/regions-flexbox-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: flowing auto-height flexbox elements in region
<ul class="assert">
<li>Test that a flex container with auto height is flowed correctly inside a region with auto height. The region should fit the flexbox.</li>
</ul>
</td>
</tr>
<tr id="autoheight-flexbox-003-7.3.1" class="ahem">
<td>
<a href="autoheight-flexbox-003.htm">autoheight-flexbox-003</a></td>
<td><a href="reference/autoheight-flexbox-003-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto height region inside a fixed sized flexbox
<ul class="assert">
<li>Test that an auto-height region inside a flexbox is stretched to match the flexbox container's cross size.</li>
</ul>
</td>
</tr>
<tr id="autoheight-flexbox-004-7.3.1" class="ahem">
<td>
<a href="autoheight-flexbox-004.htm">autoheight-flexbox-004</a></td>
<td><a href="reference/autoheight-flexbox-003-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto height region inside an auto height flexbox
<ul class="assert">
<li>Test that an auto height region inside a flex container with auto height is displayed properly. The flexbox should have the same height as the region.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-autoheight-flexbox-001-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-regions-in-autoheight-flexbox-001.htm">autoheight-regions-in-autoheight-flexbox-001</a></strong></td>
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions in auto-height flex container
<ul class="assert">
<li>Test that auto-height regions placed in a flex container with auto-height and row wrap reverse flow are sized correctly. The content from the second flow should flow through the region on the second row and into the region from the first row, making the left blue rectangle taller than the green rectangle on the right.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-autoheight-flexbox-002-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-regions-in-autoheight-flexbox-002.htm">autoheight-regions-in-autoheight-flexbox-002</a></strong></td>
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions with vertical writing mode in auto-height flexbox
<ul class="assert">
<li>Test checks that auto-height regions having content with vertical writing mode are sized correctly when placed inside a flex container. The flowed content should be displayed as a horizontal green stripe.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-autoheight-flexbox-003-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-regions-in-autoheight-flexbox-003.htm">autoheight-regions-in-autoheight-flexbox-003</a></strong></td>
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-003-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto-height regions in auto-height flexbox with flex basis
<ul class="assert">
<li>Test checks that the computed height of auto-height regions placed in a flex container takes into the account the flex basis property. The space available inside the flex container should be distributed according to the flex basis property. In this particular case, each of the three regions must have a height equal to one third of the flex container's height.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-autoheight-flexbox-004-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-autoheight-flexbox-004.htm">autoheight-regions-in-autoheight-flexbox-004</a></td>
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-004-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: nested regions in flexbox
<ul class="assert">
<li>Test checks that nested regions placed in flex containers are laid out properly. The first flow (blue content) is nested inside the second flow (green content). The user should see three horizontal stripes with the following colors: green, blue, green.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-001-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-regions-in-fixed-sized-flexbox-001.htm">autoheight-regions-in-fixed-sized-flexbox-001</a></strong></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions inside fixed sized flexbox
<ul class="assert">
<li>Test checks that auto-height regions respect the flex grow property when placed inside a fixed sized flexbox with a single row.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-002-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-regions-in-fixed-sized-flexbox-002.htm">autoheight-regions-in-fixed-sized-flexbox-002</a></strong></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions inside fixed sized flexbox with column flow
<ul class="assert">
<li>Test checks that auto-height regions placed inside a fixed sized flexbox with column flow have the correct computed height. There are two regions placed inside the same flex container having the same 'grow' value. The space should be distributed evenly between the two.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-003-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-regions-in-fixed-sized-flexbox-003.htm">autoheight-regions-in-fixed-sized-flexbox-003</a></strong></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions inside a fixed sized flexbox with column wrap flow
<ul class="assert">
<li>Test checks the layout of auto-height regions placed inside a flexbox with a fixed size and column wrap flow. The flex container should have two columns with three regions each.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-004-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-regions-in-fixed-sized-flexbox-004.htm">autoheight-regions-in-fixed-sized-flexbox-004</a></strong></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height region in fixed sized flexbox using flex basis
<ul class="assert">
<li>Test checks the layout of regions placed inside a fixed sized flexbox using flex basis and column flow. The flex container should force the first region to break by constraining its height.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-005-7.3.1" class="primary">
<td><strong>
<a href="autoheight-regions-in-fixed-sized-flexbox-005.htm">autoheight-regions-in-fixed-sized-flexbox-005</a></strong></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: Auto-height regions in fixed sized flexboxes with align-items and justify-content
<ul class="assert">
<li>Test checks auto-height regions' layout when placed inside a flexbox with using align-items and justify-content properties. The flowed content should be fragmented between the three regions and the flex container should distribute the remaining horizontal space evenly around the regions.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-006-7.3.1" class="primary">
<td><strong>
<a href="autoheight-regions-in-fixed-sized-flexbox-006.htm">autoheight-regions-in-fixed-sized-flexbox-006</a></strong></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: auto-height regions inside a flex container with fixed size
<ul class="assert">
<li>Test that the flex container stretches a region flex item with a height smaller than the flex container's inner cross size.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-007-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-regions-in-fixed-sized-flexbox-007.htm">autoheight-regions-in-fixed-sized-flexbox-007</a></strong></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto-height regions inside fixed sized flexbox
<ul class="assert">
<li>Test that using the flex-basis property sizes the flex items to a percentage of the flex container's height when said items are auto-height regions. The last region, the outside the flex container should not be visible.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-008-7.3.1" class="primary ahem">
<td><strong>
<a href="autoheight-regions-in-fixed-sized-flexbox-008.htm">autoheight-regions-in-fixed-sized-flexbox-008</a></strong></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto-height regions with max height in fixed sized flexbox
<ul class="assert">
<li>Test that the max-height property is applied to regions placed inside a fixed sized flexbox with a column flow. The flex container should not flex the region flex items beyond their max height value.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.3.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1.1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution-phase-1">7.3.1.1 RFCB flow fragment height resolution, Phase 1</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1.2">+</a>
<a href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution-phase-2">7.3.1.2 RFCB flow fragment height resolution, Phase 2</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.2">+</a>
<a href="http://www.w3.org/TR/css3-regions/#regions-boxes-layout">7.3.2 Step 2: region boxes layout</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.3">+</a>
<a href="http://www.w3.org/TR/css3-regions/#named-flows-layout">7.3.3 Step 3: named flows layout</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.4">+</a>
<a href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-implementation-note">7.4 Regions visual formatting: implementation note</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5">+</a>
<a href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-examples">7.5 Regions visual formatting example</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5.1">+</a>
<a href="http://www.w3.org/TR/css3-regions/#step1-phase1-example">7.5.1 Step 1 - Phase 1: Laying out RFCBs with used height of zero</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5.2">+</a>
<a href="http://www.w3.org/TR/css3-regions/#step1-phase2-example">7.5.2 Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments heights</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5.3">+</a>
<a href="http://www.w3.org/TR/css3-regions/#step2-example">7.5.3 Step 2: Layout document and regions without named flows</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5.4">+</a>
<a href="http://www.w3.org/TR/css3-regions/#step3-example">7.5.4 Step 3: named flows layout</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

523
tests/wpt/css-tests/css-regions-1_dev/html/chapter-8.htm Normal file
View file

@ -0,0 +1,523 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Relation to document events - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>Relation to document events (44 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s8">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8">+</a>
<a href="http://www.w3.org/TR/css3-regions/#relation-to-document-events">8 Relation to document events</a></th></tr>
<!-- 44 tests -->
<tr id="regions-keyboard-events-001-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-001.htm">regions-keyboard-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown events inside a named flow should be raised when any key is pressed.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-002-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-002.htm">regions-keyboard-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown events outside a named flow should be raised when any key is pressed.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-003-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-003.htm">regions-keyboard-events-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeypress events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeypress events inside and outside a named flow should be raised when any key is pressed.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-004-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-004.htm">regions-keyboard-events-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when a specific key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-005-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-005.htm">regions-keyboard-events-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events outside region using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events outside a named flow should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-006-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-006.htm">regions-keyboard-events-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events using Delete key inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when the Delete key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-007-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-007.htm">regions-keyboard-events-007</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside multiple regions using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside multiple named flows should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-008-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-008.htm">regions-keyboard-events-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region and outside region using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-009-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-009.htm">regions-keyboard-events-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region using Tab key on page where normal document flow is reordered
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow on a page where the normal document flow is reordered should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-010-8" class="dom interact script">
<td>
<a href="regions-keyboard-events-010.htm">regions-keyboard-events-010</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside a named flow should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-001-8" class="dom interact script">
<td>
<a href="regions-mouse-events-001.htm">regions-mouse-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onclick events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse onclick events inside and outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-002-8" class="dom interact script">
<td>
<a href="regions-mouse-events-002.htm">regions-mouse-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmousedown events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmousedown events inside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-003-8" class="dom interact script">
<td>
<a href="regions-mouse-events-003.htm">regions-mouse-events-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmousedown events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmousedown events outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-004-8" class="dom interact script">
<td>
<a href="regions-mouse-events-004.htm">regions-mouse-events-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseup events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseup events inside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-005-8" class="dom interact script">
<td>
<a href="regions-mouse-events-005.htm">regions-mouse-events-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseup events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseup events outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-006-8" class="dom interact script">
<td>
<a href="regions-mouse-events-006.htm">regions-mouse-events-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: ondblclick events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse ondblclick events inside and outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-007-8" class="dom interact script">
<td>
<a href="regions-mouse-events-007.htm">regions-mouse-events-007</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmousemove events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmousemove events inside and outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-008-8" class="dom interact script">
<td>
<a href="regions-mouse-events-008.htm">regions-mouse-events-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseover and onmouseout events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseover and onmouseout events inside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-009-8" class="dom interact script">
<td>
<a href="regions-mouse-events-009.htm">regions-mouse-events-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseover and onmouseout events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseover and onmouseout events outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-001-8" class="dom interact script">
<td>
<a href="regions-selection-001.htm">regions-selection-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the top of the region and ends at the bottom of the region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse the movement.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-002-8" class="dom interact script">
<td>
<a href="regions-selection-002.htm">regions-selection-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the bottom of the region and ends at the top of the region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-003-8" class="dom interact script">
<td>
<a href="regions-selection-003.htm">regions-selection-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the top of the region and ends in the middle of region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-004-8" class="dom interact script">
<td>
<a href="regions-selection-004.htm">regions-selection-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the bottom of the region and ends in the middle of region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-005-8" class="dom interact script">
<td>
<a href="regions-selection-005.htm">regions-selection-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: Selection begins in the middle of the region and ends in the middle of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-006-8" class="dom interact script">
<td>
<a href="regions-selection-006.htm">regions-selection-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins in the middle of the region and ends in the middle of the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-007-8" class="dom interact script">
<td>
<a href="regions-selection-007.htm">regions-selection-007</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the top of the region and ends outside the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-008-8" class="dom interact script">
<td>
<a href="regions-selection-008.htm">regions-selection-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the bottom of the region and ends outside the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-009-8" class="dom interact script">
<td>
<a href="regions-selection-009.htm">regions-selection-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins in the middle of the region and ends outside the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-010-8" class="dom interact script">
<td>
<a href="regions-selection-010.htm">regions-selection-010</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins in the middle of the region and ends outside the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-011-8" class="dom interact script">
<td>
<a href="regions-selection-011.htm">regions-selection-011</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends at the bottom of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-012-8" class="dom interact script">
<td>
<a href="regions-selection-012.htm">regions-selection-012</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends at the top the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-013-8" class="dom interact script">
<td>
<a href="regions-selection-013.htm">regions-selection-013</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends in the middle of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-014-8" class="dom interact script">
<td>
<a href="regions-selection-014.htm">regions-selection-014</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends in the middle of the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-015-8" class="dom interact script">
<td>
<a href="regions-selection-015.htm">regions-selection-015</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins and ends outside of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-016-8" class="dom interact script">
<td>
<a href="regions-selection-016.htm">regions-selection-016</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins and ends outside of the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-017-8" class="dom interact script">
<td>
<a href="regions-selection-017.htm">regions-selection-017</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins and ends inside a region containing one other element - div
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-018-8" class="dom interact script">
<td>
<a href="regions-selection-018.htm">regions-selection-018</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins and ends inside a region containing one other element - img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-019-8" class="dom interact script">
<td>
<a href="regions-selection-019.htm">regions-selection-019</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is upward, begins and ends inside a region containing one other element - div
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-020-8" class="dom interact script">
<td>
<a href="regions-selection-020.htm">regions-selection-020</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is upward, begins and ends inside a region containing one other element - img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-021-8" class="dom interact script">
<td>
<a href="regions-selection-021.htm">regions-selection-021</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins and ends inside a region containing two other elements - div + img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-022-8" class="dom interact script">
<td>
<a href="regions-selection-022.htm">regions-selection-022</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: Selection is upward, begins and ends inside a region containing two other elements - div + img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-023-8" class="dom interact script">
<td>
<a href="regions-selection-023.htm">regions-selection-023</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins inside a region and ends outside of it - both the region and the content after it have child elements
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-024-8" class="dom interact script">
<td>
<a href="regions-selection-024.htm">regions-selection-024</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: Selection is upward, begins inside and ends outside a region - both the region and the before after it have child elements
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mousemovement, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-025-8" class="dom interact script">
<td>
<a href="regions-selection-025.htm">regions-selection-025</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>DOM order is different than the linear selection
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection should capture content in DOM order as it would without a named flow.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>

39
tests/wpt/css-tests/css-regions-1_dev/html/chapter-9.htm Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Relation to other specifications - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>Relation to other specifications (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s9">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9">+</a>
<a href="http://www.w3.org/TR/css3-regions/#relation-to-other-specifications">9 Relation to other specifications</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

50
tests/wpt/css-tests/css-regions-1_dev/html/column-flexbox-break.htm Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: fragmenting a flex container with column flow </title>
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that a flex container with column flow is fragmented between regions." name="assert">
<link href="reference/column-flexbox-break-ref.htm" rel="match">
<style>
.flex {
display: flex;
flex-direction: column;
flow-into: flow;
}
.region {
flow-from: flow;
height: 45px;
margin-bottom: 20px;
}
.item {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see two horizontal green stripes.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="flex">
<div class="item">XXXX<br>XXXX</div>
<div class="item">XXXX<br>XXXX</div>
</div>
<div class="region"></div>
<div class="region"><p class="red">&nbsp;</p></div>
</body></html>

36
tests/wpt/css-tests/css-regions-1_dev/html/content-node-layers-001.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flowing content with opacity &lt; 1 in region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that content with opacity < 1 is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing." name="assert">
<link href="reference/content-node-layers-001-ref.htm" rel="match">
<style>
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: #5555FF;
/*a light-ish blue, to give us a nice purple when alpha-blended with red*/
opacity: 0.5;
flow-into: f;
}
#region {
width: 100px;
height: 100px;
background-color: red;
flow-from: f;
}
</style>
</head>
<body>
<ol>
<li>You should see no red.</li>
<li>Test passes if you see a purple square below.</li>
</ol>
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
<div id="region"></div>
</body></html>

39
tests/wpt/css-tests/css-regions-1_dev/html/content-node-layers-002.htm Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flowing content with scrollbars in region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that content with scrollbars is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing." name="assert">
<link href="reference/content-node-layers-002-ref.htm" rel="match">
<style>
#content {
width: 100px;
height: 100px;
overflow-y: scroll;
overflow-x: none;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: lime;
flow-into: f;
}
#region {
width: 100px;
height: 100px;
background-color: red;
flow-from: f;
}
</style>
</head>
<body>
<ol>
<li>You should see no red.</li>
<li>Test passes if you see a green square below with a vertical scrollbar.</li>
<li>You should be able to drag the scrollbars</li>
</ol>
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
<div id="region"></div>
</body></html>

36
tests/wpt/css-tests/css-regions-1_dev/html/content-node-layers-003.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flowing content that's relatively positioned and get fragmented</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that content that's relatively positioned gets properly fragmented between regions." name="assert">
<link href="reference/content-node-layers-003-ref.htm" rel="match">
<style>
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: lime;
flow-into: f;
}
.region {
margin: .5em;
width: 100px;
height: 100px;
background-color: red;
flow-from: f;
}
</style>
</head>
<body>
<ol>
<li>You should see no red.</li>
<li>Test passes if you see two green squares below.</li>
</ol>
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
<div class="region"></div>
<div class="region"></div>
</body></html>

57
tests/wpt/css-tests/css-regions-1_dev/html/content-node-layers-004.htm Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flowing content with opacity &lt; 1 and opacity = 1 in region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that content nodes with mixed opacity < 1 and opacity = 1
is correctly flowed into regions. This might fail on implementations that use layers for
compositing but don't properly handle content flowing." name="assert">
<link href="reference/content-node-layers-004-ref.htm" rel="match">
<style>
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.translucent {
color: #5555FF;
opacity: 0.5;
}
.opaque {
color: blue;
/*a light-ish blue, to give us a nice purple when alpha-blended with red*/
opacity: 1;
}
#region {
width: 100px;
height: 180px;
background-color: red;
flow-from: f;
}
</style>
</head>
<body>
<ol>
<li>You should see no red.</li>
<li>Test passes if you see four alternating purple and blue rectangles below.</li>
</ol>
<div id="content">
<div class="translucent">
xxxxx<br>xxxxx<br>xxxxx
</div>
<div class="opaque">
xxxxx<br>xxxxx<br>xxxxx
</div>
<div class="translucent">
xxxxx<br>xxxxx<br>xxxxx
</div>
<div class="opaque">
xxxxx<br>xxxxx<br>xxxxx
</div>
</div>
<div id="region"></div>
</body></html>

55
tests/wpt/css-tests/css-regions-1_dev/html/content-node-layers-005.htm Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flowing content with position: absolute and clip</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that absolutely positioned content that has the clip property applied is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing or the clipping shapes." name="assert">
<link href="reference/content-node-layers-005-ref.htm" rel="match">
<style>
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
position: relative;
width: 125px;
height: 125px;
background-color: lightgreen;
flow-into: f;
}
#content-child {
position: absolute;
color: green;
top: 20px;
left: 0;
width: 180px;
clip: rect(0px, 100px, 80px, 20px);
}
.outside {
color: red;
}
#region {
width: 125px;
height: 125px;
background-color: red;
flow-from: f;
}
</style>
</head>
<body>
<ol>
<li>You should see no red.</li>
<li>Test passes if you see a dark green square in the middle of a light green square.</li>
</ol>
<div id="content">
<div id="content-child">
<span class="outside">x</span>xxxx<span class="outside">xxxx</span><br>
<span class="outside">x</span>xxxx<span class="outside">xxxx</span><br>
<span class="outside">x</span>xxxx<span class="outside">xxxx</span><br>
<span class="outside">x</span>xxxx<span class="outside">xxxx</span>
</div>
</div>
<div id="region"></div>
</body></html>

56
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-001.htm Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: named flow content has contentEditable attribute set</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on
elements that get flowed in a region does not affect their rendering in the regions. Also,
such elements should be editable just as they are outside of the region." name="assert">
<link href="reference/contentEditable-001-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.content {
flow-into: flow;
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: flow;
width: 300px;
height: 300px;
border: 2px solid black;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a square with a black border with some text inside it. No red
should be visible at any time during this test.</li>
<li>Click between the two colored markers (green and blue) and type “<strong>foobar
bazquux</strong>”</li>
<li>Test passes if the text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the black border.</li>
</ol>
<p contenteditable="true" class="content">This is some text content. It contains two colored
markers: <span class="inline-marker green"></span> <span id="marked">and</span> <span class="inline-marker blue"></span>.<br>
Follow the instructions above to test CSS Regions and <code>contentEditable</code></p>
<div class="region">
<p>&nbsp;</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked", "foobar bazquux");
</script>
</body></html>

71
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-002.htm Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: named flow content has a child with contentEditable attribute set</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on
elements that get flowed in a region does not affect their rendering in the regions. Also,
such elements should be editable just as they are outside of the region, even if they are
not the only elements in the named flow." name="assert">
<link href="reference/contentEditable-002-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.content {
flow-into: flow;
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: flow;
width: 300px;
height: 300px;
border: 2px solid black;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a square with a black border with some text inside it. No red
should be visible at any time during this test.</li>
<li>Click between the two gray markers and type “<strong>foobar bazquux</strong>”
<ul>
<li>No (new) text should appear between the gray markers</li>
</ul>
</li>
<li>Click between the two colored markers (green and blue) and type “<strong>foobar
bazquux</strong>”
<ul>
<li>The text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the black border</li>
</ul>
</li>
</ol>
<div class="content">This is some text that must not be editable. Not even the text between
<em><span class="inline-marker gray"></span> <span id="marked-inactive">these two markers</span>
<span class="inline-marker gray"></span>.</em>
<div contenteditable="true">
However, this text <em><span class="inline-marker green"></span> <span id="marked-active">
between these colored markers</span> <span class="inline-marker blue"></span></em>
should be editable.
</div>
And another non-editable text.
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked-inactive", "foobar bazquux");
insertText("#marked-active", "foobar bazquux");
</script>
</body></html>

84
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-003.htm Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: named flow content is child of an element that has contentEditable attribute set</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on the
parent of an element that gets flowed in a region does not affect its rendering in the regions.
Also, the element should be editable outside and inside the region without differences." name="assert">
<link href="reference/contentEditable-003-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.flowed {
flow-into: flow;
}
.content {
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.container {
width: 300px;
height: 200px;
border: 2px solid blue;
}
.region {
flow-from: flow;
width: 300px;
height: 200px;
border: 2px solid black;
margin: 0.5em 0 0.5em 0;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a rectangle with a blue border with some text inside it and below
it a rectangle with a black border with some text inside it. No red should be visible
at any time during this test.</li>
<li>Click between the two colored markers (green and blue) inside the blue rectangle and
type “<strong>foobar bazquux</strong>”
<ul>
<li>The text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the blue border</li>
</ul>
</li>
<li>Click between the two colored markers (green and blue) inside the black rectangle and
type “<strong>foobar bazquux</strong>”
<ul>
<li>The text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the black border</li>
</ul>
</li>
</ol>
<div class="container">
<div contenteditable="true" class="content">
<!-- On a single line since new lines in contentEditable elements are messy :( -->
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-out">these two markers</span> <span class="inline-marker blue"></span></em>.
<div class="flowed">
<!-- On a single line since new lines in contentEditable elements are messy :( -->
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-in">between these colored markers</span> <span class="inline-marker blue"></span></em> should be editable.
</div>
</div>
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked-out", "foobar bazquux");
insertText("#marked-in", "foobar bazquux");
</script>
</body></html>

78
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-004.htm Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: element has contentEditable attribute set and both it and a child of it are
flowed in a the same region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that flowing both and element and one of its
children in a region, when said element has the contentEditable attribute set does not
affect their rendering in the regions and the ability to edit it." name="assert">
<link href="reference/contentEditable-004-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.flowed {
flow-into: flow;
}
.content {
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: flow;
width: 300px;
height: 200px;
border: 2px solid black;
margin: 0.5em 0 0.5em 0;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a rectangle with a black border with some text inside it. No
red should be visible at any time during this test.</li>
<li>Click between the first pair of green and blue colored markers and type
“<strong>foobar bazquux</strong>”
<ul>
<li>The text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the black border</li>
</ul>
</li>
<li>Click between the second pair of green and blue colored markers and type
“<strong>foobar bazquux</strong>”
<ul>
<li>The text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the black border</li>
</ul>
</li>
</ol>
<div contenteditable="true" class="content flowed">
First line of editable content.<br>
<div class="flowed">
<!-- On a single line since new lines in contentEditable elements are messy :( -->
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-child">between these colored markers</span> <span class="inline-marker blue"></span></em> should be editable.
</div>
<!-- On a single line since new lines in contentEditable elements are messy :( -->
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-parent">these two markers</span> <span class="inline-marker blue"></span></em>.
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked-parent", "foobar bazquux");
insertText("#marked-child", "foobar bazquux");
</script>
</body></html>

76
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-005.htm Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: named flow content has contentEditable attribute set and is fragmented</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on
elements that get flowed in a region does not affect their rendering and the ability to edit
them even when they get fragmented in multiple regions." name="assert">
<link href="reference/contentEditable-005-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.flowed {
flow-into: flow;
}
.content {
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: flow;
width: 300px;
height: 75px;
border: 2px solid black;
margin: 0.5em 0 0.5em 0;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a rectangle with a black border with some text inside it. No
red should be visible at any time during this test.</li>
<li>Click between the first pair of green and blue colored markers and type
“<strong>foobar bazquux</strong>”
<ul>
<li>The text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the black border</li>
</ul>
</li>
<li>Click between the second pair of green and blue colored markers and type
“<strong>foobar bazquux</strong>”
<ul>
<li>The text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the black border</li>
</ul>
</li>
</ol>
<div contenteditable="true" class="content flowed">
<!-- On a single line since new lines in contentEditable elements are messy :( -->
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.<br>
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-two">between these colored markers</span> <span class="inline-marker blue"></span></em> should be editable.
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked-one", "foobar bazquux");
insertText("#marked-two", "foobar bazquux");
</script>
</body></html>

76
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-006.htm Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: named flow content has contentEditable attribute set and is flowed in an
auto-height region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on
elements that get flowed in a region does not affect their rendering in the regions. Also,
if the region uses height:auto, the size of the region should change as the content flowed
in it is edited." name="assert">
<link href="reference/contentEditable-006-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.flowed {
flow-into: flow;
}
.content {
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: flow;
width: 300px;
height: auto;
max-height: 150px;
border: 2px solid black;
margin: 0.5em 0 0.5em 0;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a rectangle with a black border with some text inside it. No
red should be visible at any time during this test.</li>
<li>Click between the first pair of green and blue colored markers and type
“<strong>foobar bazquux</strong>”
<ul>
<li>The text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the black border</li>
</ul>
</li>
<li>Click between the second pair of green and blue colored markers and type
“<strong>foobar bazquux</strong>”
<ul>
<li>The text you typed is displayed at the cursor position between the
two markers and the lines of text wrap inside the black border</li>
</ul>
</li>
</ol>
<div contenteditable="true" class="content flowed">
<!-- On a single line since new lines in contentEditable elements are messy :( -->
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span>.</em>
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-two">between these colored markers</span> <span class="inline-marker blue"></span></em> should be editable.
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked-one", "foobar bazquux");
insertText("#marked-two", "foobar bazquux");
</script>
</body></html>

86
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-007.htm Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: named flow content has contentEditable attribute set and children of it get
flowed in a region dynamically</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on
an element does not interfere with its children being dinamically flowed into a region." name="assert">
<link href="reference/contentEditable-007-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
#editable {
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
width: 300px;
border: 2px solid blue;
}
.content {
flow-into: flow;
}
.region {
flow-from: flow;
width: 300px;
height: 200px;
border: 2px solid black;
margin: .5em 0 .5em 0;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a rectangle with a blue border and a rectangle with a black border.
The blue rectangle should have one block of text inside it and the black rectangle
should have two blocks of text inside it. No red should be visible at any time during
this test.</li>
<li>Double click on the word “editable” in the blue rectangle and type
“foobar bazquux”.
<ul>
<li>The word “editable” should be replaced with “foobar bazquux”.</li>
</ul>
</li>
<li>Repeat the steps above, but for the two occurrences of the word “editable”
in the black rectangle. The expected results are the same as for the previous step.
</li>
</ol>
<div contenteditable="true" id="editable">
<p>
This text should be displayed outside of the black border and <span id="marked-outside">editable</span>.
</p>
<p class="content">
This text should be displayed inside the black border and it should also be <span id="marked-inside">editable</span>.
</p>
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var newElem = document.createElement("p");
newElem.classList.add("content");
newElem.innerHTML = "This text should also be displayed inside the black border and <span id='marked-inside-new'>editable</span>.";
document.querySelector("#editable").appendChild(newElem);
document.body.offsetTop;
insertText("#marked-outside", "foobar bazquux");
insertText("#marked-inside", "foobar bazquux");
insertText("#marked-inside-new", "foobar bazquux");
})
</script>
</body></html>

64
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-008.htm Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: region element has contentEditable attribute set</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on
a region (an element that has flow-from set) does not prevent the element to becoming a region,
nor does attempting to interactively edit it produces unexpected results." name="assert">
<link href="reference/contentEditable-008-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.flowed {
flow-into: flow;
}
.content {
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: flow;
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0.5em 0 0.5em 0;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a square with a black border with some text inside it. No
red should be visible at any time during this test.</li>
<li>Click between the green and blue colored markers and type “<strong>foobar
bazquux</strong>”
<ul>
<li>The text should not be editable.</li>
</ul>
</li>
</ol>
<div class="content flowed">
This is some text that should not be editable. Not even the text between
<em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
</div>
<div contenteditable="true" class="region">
This is some editable text that you should not be able to see, with <span class="inline-marker green"></span> <span id="marked-two">colored markers</span> <span class="inline-marker blue"></span>.
<p>&nbsp;</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked-one", "foobar bazquux");
insertText("#marked-two", "foobar bazquux");
</script>
</body></html>

65
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-009.htm Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: region element has child with contentEditable attribute set</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on a
child of a region (an element that has flow-from set) does not prevent the parent element to
becoming a region, nor does attempting to interactively edit it produces unexpected results." name="assert">
<link href="reference/contentEditable-008-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.flowed {
flow-into: flow;
}
.content {
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: flow;
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0.5em 0 0.5em 0;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a square with a black border with some text inside it. No
red should be visible at any time during this test.</li>
<li>Click between the green and blue colored markers and type “<strong>foobar
bazquux</strong>”
<ul>
<li>The text should not be editable.</li>
</ul>
</li>
</ol>
<div class="content flowed">
This is some text that should not be editable. Not even the text between
<em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
</div>
<div class="region">
<p contenteditable="true">
This is some editable text that you should not be able to see, with <span class="inline-marker green"></span> <span id="marked-two">colored markers</span> <span class="inline-marker blue"></span>.
</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked-one", "foobar bazquux");
insertText("#marked-two", "foobar bazquux");
</script>
</body></html>

63
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-010.htm Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: auto-size region with contentEditable attribute set</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on an
auto-sized region (an element that has flow-from set) does not prevent it to becoming a region,
nor does attempting to interactively edit it produces unexpected results." name="assert">
<link href="reference/contentEditable-010-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.flowed {
flow-into: flow;
}
.content {
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: flow;
border: 2px solid black;
margin: 0.5em 0 0.5em 0;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a rectangle with a black border with some text inside it. No
red should be visible at any time during this test.</li>
<li>Click between the green and blue colored markers and type “<strong>foobar
bazquux</strong>”
<ul>
<li>The text should not be editable.</li>
</ul>
</li>
</ol>
<div class="content flowed">
This is some text that should not be editable.<br>
Not even the text between <em><span class="inline-marker green"></span>
<span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
</div>
<div contenteditable="true" class="region">
This is some editable text that you should not be able to see, with <span class="inline-marker green"></span> <span id="marked-two">colored markers</span> <span class="inline-marker blue"></span>.
<p>&nbsp;</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked-one", "foobar bazquux");
insertText("#marked-two", "foobar bazquux");
</script>
</body></html>

65
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-011.htm Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: both named flow content and region element have contentEditable attribute set</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="dom interact" name="flags">
<meta content="Test checks that setting the contentEditable attribute on both
named flow content (an element that has flow-into set) and the region (an element that has
flow-from set) does not prevent the region to properly flowing the content, while the content
stays editable and no unexpected interactions happen." name="assert">
<link href="reference/contentEditable-011-ref.htm" rel="match">
<link href="support/common.css" rel="stylesheet">
<style>
.flowed {
flow-into: flow;
}
.content {
font-family: Times, serif;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: flow;
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0.5em 0 0.5em 0;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>Below you should see a square with a black border with some text inside it. No
red should be visible at any time during this test.</li>
<li>Double click the “<strong>editable</strong>” word between the green and
blue colored markers and type “<strong>foobar bazquux</strong>”
<ul>
<li>The word “editable” should be replaced with “foobar bazquux”.</li>
</ul>
</li>
</ol>
<div contenteditable="true" class="content flowed">
This is some text that should be editable. Just like the <em><span class="inline-marker green"></span> <span id="marked-one">editable</span> <span class="inline-marker blue"></span></em> text between these markers.
</div>
<div contenteditable="true" class="region">
<p>
This is some editable text that you should not be able to see, with <span class="inline-marker green"></span> <span id="marked-two">colored markers</span> <span class="inline-marker blue"></span>.
</p>
</div>
<script src="support/helpers.js" type="text/javascript"></script>
<script type="text/javascript">
insertText("#marked-one", "foobar bazquux");
insertText("#marked-two", "foobar bazquux");
</script>
</body></html>

80
tests/wpt/css-tests/css-regions-1_dev/html/contentEditable-012.htm Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: regions are children of an element with the contentEditable attribute set</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
<meta content="ahem dom interact" name="flags">
<meta content="Test checks that children of an element that has the contentEditable
attribute can be used for flowing content into and interactively duplicating the regions (via
user-initiated copy/paste) properly flows the content in the newly created regions. Properly
executing this test requires an user agent that supports copy/paste operations." name="assert">
<link href="support/common.css" rel="stylesheet">
<style>
.content {
flow-into: flow;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
margin: 0;
}
.container {
width: 200px;
height: 400px;
padding: 10px;
border: 2px solid blue;
}
.region {
flow-from: flow;
region-fragment: break;
display: inline-block;
width: 100px;
height: 100px;
border: 2px solid black;
}
.region > p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>No red should be visible at any time during this test.</li>
<li>Below you should see a rectangle with a black border.</li>
<li>Inside the rectangle you should see a green square with a black border, between two
“+” signs on blue background.</li>
<li>Click and drag from one “+” to the other and copy the selection either
via keyboard shortcut (usually <code>Ctrl+C</code> on Windows and Linux
and <code>Cmd+C</code> on Mac OS) or menu/context menu.</li>
<li>
Click after the last “+” sign and paste the previously selected content
either via keyboard shortcut (usually <code>Ctrl+V</code> on Windows and Linux and
<code>Cmd+V</code> on Mac OS) or menu/context menu.
<ul>
<li>You should see another green square appearing</li>
</ul>
</li>
</ol>
<p contenteditable="true" class="content">
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
</p>
<div contenteditable="true" class="container">
<span class="inline-marker blue">+</span>
<div class="region">
<p>&nbsp;</p>
</div>
<span class="inline-marker blue">+</span>&nbsp;
</div>
<script src="support/helpers.js"></script>
</body></html>

51
tests/wpt/css-tests/css-regions-1_dev/html/css-cursor-001.htm Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: CSS cursor on content node</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS cursors are properly displayed for content flowed into regions." name="assert">
<meta content="interact ahem" name="flags">
<style>
p {
margin: 0;
}
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: lightblue;
}
#content p {
flow-into: f;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAT0lEQVR42u2WMQoAIAwD+/9Px9VFoUJNhjvoKDmKhVQBQA9tYw3/LiGngJwChBN+CtfjWMOvEp0HIwL2DUT8gYgrQAKJyD4Q0YgiOiHACAvTEtAwKdXD6AAAAABJRU5ErkJggg==") 1 17, w-resize;
}
#region {
width: 100px;
height: 100px;
flow-from: f;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<p>The test fails if you see any red or if any of the expected results below don't happen.</p>
<ol>
<li>You should see a blue square below.</li>
<li>
Move the mouse over the blue square. <strong>Expected: </strong>The mouse cursor should change to a large, left pointing, black arrow.</li>
</ol>
<div id="content">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region">
<p></p>
</div>
</body></html>

52
tests/wpt/css-tests/css-regions-1_dev/html/css-cursor-002.htm Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: CSS cursor on region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS cursors are properly displayed even when an element is turned into a region" name="assert">
<meta content="interact ahem" name="flags">
<style>
p {
margin: 0;
}
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: lightgreen;
}
#content p {
flow-into: f;
}
#region {
width: 100px;
height: 100px;
flow-from: f;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAT0lEQVR42u2WMQoAIAwD+/9Px9VFoUJNhjvoKDmKhVQBQA9tYw3/LiGngJwChBN+CtfjWMOvEp0HIwL2DUT8gYgrQAKJyD4Q0YgiOiHACAvTEtAwKdXD6AAAAABJRU5ErkJggg==") 1 17, w-resize;
border-left: 100px solid lightblue;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<p>The test fails if you see any red or if any of the expected results below don't happen.</p>
<ol>
<li>You should see a green and a blue square below.</li>
<li>
Move the mouse over the blue square. <strong>Expected: </strong>The mouse cursor should change to a large, left pointing, black arrow.</li>
</ol>
<div id="content">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region">
<p></p>
</div>
</body></html>

48
tests/wpt/css-tests/css-regions-1_dev/html/css-hover-on-content-001.htm Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on content nodes</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS rules using the :hover pseudo class are applied to content nodes" name="assert">
<meta content="interact" name="flags">
<style>
#source {
background-color: blue;
width: 100px;
height: 100px;
flow-into: f;
}
#source:hover {
background-color: lime;
}
#region {
flow-from: f;
}
.region {
width: 200px;
height: 200px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a blue square below</li>
<li>Move the mouse over the blue square</li>
<li>The blue square should turn green</li>
</ol>
<div id="source">
</div>
<div id="region" class="region">
<p></p>
</div>
</body></html>

56
tests/wpt/css-tests/css-regions-1_dev/html/css-hover-on-content-002.htm Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on content node parent when the parent is in the named flow and rendered as a sibling of its child</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS properties set through rules that use the :hover pseudo-class on an element are properly propagated to children that are flowed into regions even when they're visually rendered as siblings" name="assert">
<meta content="interact ahem" name="flags">
<style>
#source {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#parent {
color: blue;
width: 100px;
height: 100px;
background-color: yellow;
flow-into: f;
}
#parent:hover {
color: lime;
}
#region {
flow-from: f;
}
.region {
width: 100px;
height: 200px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>Move the mouse over the yellow square</li>
<li>The blue square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div id="region" class="region">
<p></p>
</div>
</body></html>

56
tests/wpt/css-tests/css-regions-1_dev/html/css-hover-on-content-003.htm Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on content node parent when the parent is not in the named flow</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS properties set through rules that use the :hover pseudo-class on an element are properly propagated to children that are flowed into regions" name="assert">
<meta content="interact" name="flags">
<style>
#source {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#parent {
color: blue;
width: 100px;
height: 100px;
background-color: yellow;
}
#parent:hover {
color: lime;
}
#region {
flow-from: f;
}
.region {
width: 100px;
height: 100px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square below</li>
<li>Move the mouse over the yellow square</li>
<li>The blue square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div id="region" class="region">
<p></p>
</div>
</body></html>

59
tests/wpt/css-tests/css-regions-1_dev/html/css-hover-on-content-004.htm Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on content node when the content node has position:fixed</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS rules using the :hover pseudo class are applied to content nodes that have position:fixed." name="assert">
<meta content="interact" name="flags">
<style>
#source {
position: fixed;
right: 0;
top: 0;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#parent {
color: blue;
width: 100px;
height: 100px;
background-color: yellow;
}
#source:hover {
color: lime;
}
#region {
flow-from: f;
}
.region {
width: 100px;
height: 100px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square below</li>
<li>Move the mouse over the blue square</li>
<li>The blue square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div id="region" class="region">
<p></p>
</div>
</body></html>

55
tests/wpt/css-tests/css-regions-1_dev/html/css-hover-on-content-005.htm Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS :hover on content node when the content node has position:relative</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS rules using the :hover pseudo class are applied to content nodes that are relatively positioned" name="assert">
<meta content="interact" name="flags">
<style>
#source {
position: relative;
left: 5em;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#parent {
color: blue;
background-color: yellow;
}
#source:hover {
color: lime;
}
#region {
flow-from: f;
}
.region {
width: 200px;
height: 100px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a blue square below</li>
<li>Move the mouse over the blue square <strong>Expected:</strong> The blue square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div id="region" class="region">
<p></p>
</div>
</body></html>

53
tests/wpt/css-tests/css-regions-1_dev/html/css-hover-on-region-001.htm Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on region that has borders</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region border" name="assert">
<meta content="interact" name="flags">
<style>
#source {
color: blue;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#region {
flow-from: f;
}
.region {
border-left: 100px solid yellow;
width: 100px;
height: 100px;
}
.region:hover {
border-left: 100px solid lime;
color: red;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square below</li>
<li>Move the mouse over the yellow square</li>
<li>The yellow square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div id="region" class="region">
<p></p>
</div>
</body></html>

54
tests/wpt/css-tests/css-regions-1_dev/html/css-hover-on-region-002.htm Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on regions that have padding</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region padding" name="assert">
<meta content="interact" name="flags">
<style>
#source {
color: blue;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#region {
flow-from: f;
}
.region {
background-color: yellow;
padding-left: 100px;
width: 100px;
height: 100px;
}
.region:hover {
background-color: lime;
color: red;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square</li>
<li>Move the mouse over the yellow square</li>
<li>The yellow square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div id="region" class="region">
<p></p>
</div>
</body></html>

58
tests/wpt/css-tests/css-regions-1_dev/html/css-hover-on-region-003.htm Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on region when content nodes are relatively positioned</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS rules using the :hover pseudo class are applied to regions when
moving the mouse over the region and the content flowed in it is relatively positioned. Also, the :hover
rules for the content do not apply when moving the mouse over the box placeholder." name="assert">
<meta content="interact" name="flags">
<style>
#source {
position: relative;
left: 5em;
color: blue;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#source:hover {
color: red;
}
#region {
background-color: yellow;
width: 200px;
height: 100px;
flow-from: f;
}
#region:hover {
color: red;
background-color: lime;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square</li>
<li>Move the mouse over the yellow square</li>
<li>The yellow square should turn green and the blue square should remain blue</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div id="region">
<p></p>
</div>
</body></html>

74
tests/wpt/css-tests/css-regions-1_dev/html/css-hover-on-region-004.htm Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on regions that have rounded corners</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="CSS rules using the :hover pseudo class are applied to regions that have rounded borders." name="assert">
<meta content="interact" name="flags">
<style>
p {
margin: 0;
}
#content p{
font-family: Ahem;
font-size: 20px;
line-height: 1em;
flow-into: f;
color: yellow;
}
#parent {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QMWCgYsObOZcQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAkUlEQVRYw+2Wuw6AMAhFL8T//2LlOjjooAnQKoOcyURpT3i0Ak3T/B3Jh652Pi/6kcBqgMp9GAEYozIBAaPvc+KQnCrg3Twuob60S6Ky1x4ZEtBko07LgLza3+oftdFRTWfgXcoFHIUiB5aXCRnI7s9ZJbCkgS+u/CQsvwsCU6ACbHyuLXG8j52c5f8DTdOUswNDYysBxD+bOgAAAABJRU5ErkJggg==") no-repeat 0px 0px, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QMWCgYsObOZcQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAkUlEQVRYw+2Wuw6AMAhFL8T//2LlOjjooAnQKoOcyURpT3i0Ak3T/B3Jh652Pi/6kcBqgMp9GAEYozIBAaPvc+KQnCrg3Twuob60S6Ky1x4ZEtBko07LgLza3+oftdFRTWfgXcoFHIUiB5aXCRnI7s9ZJbCkgS+u/CQsvwsCU6ACbHyuLXG8j52c5f8DTdOUswNDYysBxD+bOgAAAABJRU5ErkJggg==") no-repeat 140px 140px, lightblue;
position: relative;
font-family: monospace;
margin: 1em;
width: 170px;
height: 170px;
}
#region {
width: 150px;
height: 150px;
border-radius: 50%;
border: 10px solid black;
background-color: yellow;
flow-from: f;
overflow: hidden; /*So that the content flowed does not go outside the rounded corners*/
}
#region:hover {
background-color: red;
border-color: red;
}
#parent:hover {
background-color: lime;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should see a blue square, with a yellow circle inside it.</li>
<li>There should be two blue dots in side the square, near the top left and bottom right corners</li>
<li>Move the mouse over the top-left blue dot <strong>Expected:</strong> The color of the square turns green. No red.</li>
<li>Move the mouse over the bottom-right blue dot <strong>Expected:</strong> The color of the square turns green. No red.</li>
</ol>
<div id="content">
<p>xxxx<br>xxxx<br>xxxx<br>xxxx</p>
</div>
<div id="parent">
<div id="region">
<p></p>
</div>
</div>
</body></html>

96
tests/wpt/css-tests/css-regions-1_dev/html/cssomview-apis-no-region-chain-001.htm Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: CSSOM pre-existing APIs with no region chain</title>
<link href="http://html.adobe.com/" rel="author" title="Adobe">
<link href="mailto:stearns@adobe.com" rel="author" title="Alan Stearns">
<link href="" rel="reviewer" title="">
<link href="http://www.w3.org/TR/css3-regions/#cssomview-and-regions" rel="help">
<meta content="CSSOM View attributes give 'no layout box' result for named flows with no region chain" name="assert">
<meta content="dom" name="flags">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
function testZeroAttribute(tag_name, attribute_name) {
var element = document.createElement(tag_name);
document.body.appendChild(element);
element.style.setProperty("position", "relative");
element.style.setProperty("left", "10px");
element.style.setProperty("top", "10px");
element.style.setProperty("width", "100px");
element.style.setProperty("height", "100px");
element.style.setProperty("flow-into", "named-flow");
var valueInNamedFlow = element[attribute_name];
document.body.removeChild(element);
return valueInNamedFlow;
}
var zeroAttributes = [
["div", "offsetTop"],
["div", "offsetLeft"],
["div", "offsetWidth"],
["div", "offsetHeight"],
["img", "offsetTop"],
["img", "offsetLeft"],
["img", "offsetWidth"],
["img", "offsetHeight"],
["img", "x"],
["img", "y"],
];
function testOffsetParent() {
var element = document.createElement("div");
document.body.appendChild(element);
element.style.setProperty("flow-into", "named-flow");
var offsetParentInNamedFlow = element.offsetParent;
document.body.removeChild(element);
return offsetParentInNamedFlow;
}
function testGetClientRects() {
var element = document.createElement("div");
document.body.appendChild(element);
element.style.setProperty("flow-into", "named-flow");
var clientRectList = element.getClientRects();
document.body.removeChild(element);
return clientRectList;
}
function testGetBoundingClientRect() {
var element = document.createElement("div");
document.body.appendChild(element);
element.style.setProperty("flow-into", "named-flow");
element.style.setProperty("width", "100px");
element.style.setProperty("height", "100px");
var domRect = element.getBoundingClientRect();
document.body.removeChild(element);
return [
domRect.x,
domRect.y,
domRect.width,
domRect.height
];
}
zeroAttributes.forEach(function(name) {
test (function() { assert_equals(testZeroAttribute(name[0], name[1]), 0)},
"test " + name[1] + " for " + name[0])
}
);
test (function() { assert_equals(testOffsetParent(), null)},
"test that offsetParent is null");
test (function() { assert_equals(testGetClientRects().length, 0)},
"test that getClientRects() returns an empty list");
test (function() { assert_equals(testGetBoundingClientRect(), [0,0,0,0])},
"test that getBoundingClientRect() returns a zeroed-out DOMRect");
</script>
</body></html>

117
tests/wpt/css-tests/css-regions-1_dev/html/elementFromPoint-001.htm Normal file
View file

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: document.elementFromPoint() on for elements that get split between regions</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="document.elementFromPoint() should return the correct element when provided with coordinates of points inside content fragments" name="assert">
<meta content="dom interact" name="flags">
<style>
body {
font-size: 16px;
}
p {
margin: 0;
}
ol {
padding-left: 0;
}
#content {
flow-into: f;
}
.region {
flow-from: f;
margin: .25em;
margin-left: 40px;
width: 200px;
height: 150px;
background-color: lightgray;
}
.region p {
font-weight: bold;
color: red;
}
.narrow {
width: 75px;
height: 20px;
}
</style>
<link href="/resources/testharness.css" rel="stylesheet">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="content">
</div>
<div class="region narrow">
<p>FAIL</p>
</div>
<div id="target" class="region">
<p>FAIL</p>
</div>
<div id="log"></div>
<script type="text/javascript">
var testElements = [
{ tag: "p", content: "Some text here", description: "Block content" },
{ tag: "span", content: "Some text here", description: "Inline content", around: " mmm " },
{ tag: "img", description: "Replaced content", src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAT0lEQVR42u2WMQoAIAwD+/9Px9VFoUJNhjvoKDmKhVQBQA9tYw3/LiGngJwChBN+CtfjWMOvEp0HIwL2DUT8gYgrQAKJyD4Q0YgiOiHACAvTEtAwKdXD6AAAAABJRU5ErkJggg==", style: { width: "32px", height: "32px"} },
{ tag: "li", content: "Some text here", description: "Elements with parents", parent: "ol"},
{ tag: "foobar", content: "Some text here", description: "Unknown element type" },
{ tag: "div", content: "Floating<br>content", description: "Floating content", style: { float: "left" } },
],
regionBox = document.querySelector("#target").getBoundingClientRect();
function insertElement(elem) {
var node, parent, content;
node = document.createElement(elem.tag);
node.innerHTML = elem.content;
if (elem.parent) {
parent = document.createElement(elem.parent);
parent.appendChild(node);
}
if (elem.src) {
node.src = elem.src;
}
for (var prop in elem.style) {
node.style[prop] = elem.style[prop];
}
if (elem.around) {
content = elem.around + (parent ? parent.outerHTML : node.outerHTML) + elem.around;
} else {
content = (parent ? parent.outerHTML : node.outerHTML);
}
document.querySelector("#content").innerHTML = content;
}
function pointForElement(elem) {
// We just assume that (10px, 10px) relative to the second region should fall inside the
// second block of the flowed content. Currently getBoundingClientRects() is not
// implemented and there isn't a more reliable way of computing it.
result = {
top : regionBox.top + 10,
left : regionBox.left + 10
}
return result;
}
testElements.forEach(function(elem) {
test(function() {
var point, fromSelector;
insertElement(elem);
point = pointForElement(elem);
fromSelector = document.querySelector("#content " + elem.tag);
assert_equals(fromSelector, document.elementFromPoint(point.left, point.top));
}, elem.description)
});
</script>
</body></html>

125
tests/wpt/css-tests/css-regions-1_dev/html/elementFromPoint-002.htm Normal file
View file

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS Regions: document.elementFromPoint() for elements flowed into regions</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
<meta content="document.elementFromPoint() should return the correct element when provided with coordinates of points corresponding to elements flowed into regions" name="assert">
<meta content="dom interact" name="flags">
<style>
p {
margin: 0;
}
ol {
padding: 0;
margin: 0;
}
#content {
flow-into: f;
}
#region {
flow-from: f;
margin-left: 40px;
width: 200px;
height: 150px;
background-color: lightgray;
}
#region p {
font-weight: bold;
color: red;
}
</style>
<link href="/resources/testharness.css" rel="stylesheet">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="content">
</div>
<div id="region">
<p>FAIL</p>
</div>
<div id="log"></div>
<script type="text/javascript">
var testElements = [
{ tag: "p", content: "Some text here", description: "Block content" },
{ tag: "span", content: "Some text here", description: "Inline content", around: "mmm" },
{ tag: "img", description: "Replaced content", src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAT0lEQVR42u2WMQoAIAwD+/9Px9VFoUJNhjvoKDmKhVQBQA9tYw3/LiGngJwChBN+CtfjWMOvEp0HIwL2DUT8gYgrQAKJyD4Q0YgiOiHACAvTEtAwKdXD6AAAAABJRU5ErkJggg==", style: { width: "32px", height: "32px"} },
{ tag: "li", content: "Some text here", description: "Elements with parents", parent: "ol"},
{ tag: "foobar", content: "Some text here", description: "Unknown element type" },
{ tag: "div", content: "Floating content", description: "Floating content", style: { float: "right" } },
],
regionBox = document.querySelector("#region").getBoundingClientRect();
function insertElement(elem) {
var node, parent, content;
node = document.createElement(elem.tag);
node.appendChild(document.createTextNode(elem.content));
if (elem.parent) {
parent = document.createElement(elem.parent);
parent.appendChild(node);
}
if (elem.src) {
node.src = elem.src;
}
for (var prop in elem.style) {
node.style[prop] = elem.style[prop];
}
if (elem.around) {
content = elem.around + (parent ? parent.outerHTML : node.outerHTML) + elem.around;
} else {
content = (parent ? parent.outerHTML : node.outerHTML);
}
document.querySelector("#content").innerHTML = content;
}
function pointForElement(elem) {
var elemBox, result, aroundElem, aroundBox;
elemBox = document.querySelector("#content " + elem.tag).getBoundingClientRect();
result = {
top : regionBox.top + elemBox.height/2,
left : regionBox.left + elemBox.width/2
};
if (elem.around) {
aroundElem = document.createElement("span");
aroundElem.innerHTML = elem.around;
aroundElem.style.visibility = "hidden";
document.body.insertBefore(aroundElem, null);
document.body.offsetTop;
aroundBox = aroundElem.getBoundingClientRect();
document.body.removeChild(aroundElem);
result.left += aroundBox.width;
}
if (elem.style && elem.style.float == "right") {
result.left = regionBox.right - (aroundBox ? aroundBox.width : 0) - elemBox.width/2;
}
return result;
}
testElements.forEach(function(elem) {
test(function() {
var point, fromSelector;
insertElement(elem);
point = pointForElement(elem);
fromSelector = document.querySelector("#content " + elem.tag);
assert_equals(fromSelector, document.elementFromPoint(point.left, point.top));
}, elem.description)
});
</script>
</body></html>

50
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-001.htm Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on ordered and unordered list items</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers and numbering." name="assert">
<link href="reference/extract-list-items-001-ref.htm" rel="match">
<style>
ul > li {
flow-into: uflow;
}
#r1 {
flow-from: uflow;
}
ol > li {
flow-into: oflow;
}
#r2 {
flow-from: oflow;
}
.region {
width: 200px;
background-color: lightgray;
margin: 1em 2em;
}
</style>
</head>
<body>
<p>This test passes if there are two gray rectangles, each with a 4 items list in it.<br>
The first list should not be numbered and the second should be numbered, starting at 1.<br>
Both the list markers for the first list and the numbers for the second list should be outside of the gray rectangles.
</p>
<ul>
<li>Unordered list, item 1</li>
<li>Unordered list, item 2</li>
<li>Unordered list, item 3</li>
<li>Unordered list, item 4</li>
</ul>
<ol>
<li>Ordered list, item 1</li>
<li>Ordered list, item 2</li>
<li>Ordered list, item 3</li>
<li>Ordered list, item 4</li>
</ol>
<div class="region" id="r1"></div>
<div class="region" id="r2"></div>
</body></html>

68
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-002.htm Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on ordered and unordered list items from multiple lists</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers and numbering, even when extracting items from multiple lists in the same named flow." name="assert">
<link href="reference/extract-list-items-002-ref.htm" rel="match">
<style>
ul:first-of-type, ol:first-of-type {
color: blue;
}
ul:nth-of-type(3) {
color: green;
}
ol > li {
flow-into: f1;
}
#r1 {
flow-from: f1;
}
ul > li {
flow-into: f2;
}
#r2 {
flow-from: f2;
}
.region {
margin: 2em;
background-color: lightgray;
width: 200px;
}
</style>
</head>
<body>
<p>This test passes if there are two gray rectangles: the first with two numbered lists (3 items each), the second with three un-numbered lists (2 items each).<br>
First list of each type should be blue, second list of each type should be black and the third un-ordered list should be green.
</p>
<p>Each numbered list should start at 1.<br>
Both the numbers and the list markers should be outside of the gray rectangles.</p>
<ol>
<li>Ordered list 1, item 1</li>
<li>Ordered list 1, item 2</li>
<li>Ordered list 1, item 3</li>
</ol>
<ol>
<li>Ordered list 2, item 1</li>
<li>Ordered list 2, item 2</li>
<li>Ordered list 2, item 3</li>
</ol>
<div id="r1" class="region"></div>
<ul>
<li>Unordered list 1, item 1</li>
<li>Unordered list 1, item 2</li>
</ul>
<ul>
<li>Unordered list 2, item 1</li>
<li>Unordered list 2, item 2</li>
</ul>
<ul>
<li>Unordered list 3, item 1</li>
<li>Unordered list 3, item 2</li>
</ul>
<div id="r2" class="region"></div>
</body></html>

81
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-003.htm Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on ordered list items from multiple lists, including nested lists</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their numbering, even when extracting items from multiple and nested lists into the same named flow." name="assert">
<link href="reference/extract-list-items-003-ref.htm" rel="match">
<style>
#outer-ordered-1 ol,
#outer-ordered-2 ol {
color: blue;
}
#outer-ordered-2 ol ol {
color: green;
}
#outer-ordered-1 > li {
flow-into: f1;
}
#r1 {
flow-from: f1;
}
#outer-ordered-2 li {
flow-into: f2;
}
#r2 {
flow-from: f2;
}
.region {
margin: 2em;
background-color: lightgray;
width: 20em;
}
</style>
</head>
<body>
<p>This test passes if there are two gray rectangles: each with a list with another lists nested in it. The numbers for the black list in the first rectangle, and the numbers for all the lists in the second rectangle should be rendered outside of the gray boxes</p>
<p>The list in the first rectangle should be black, with two blue nested lists in it. The nested lists should appear after the first and the second items, they should be indented and numbered starting at 1.</p>
<p>The list in the second rectangle should be black, with a blue nested list in it that has in turn a nested green list in it. The numbers in the list items text should coincide with the list item numbers.</p>
<ol id="outer-ordered-1">
<li>First ordered list, item 1
<ol>
<li>First inner ordered list, item 1</li>
<li>First inner ordered list, item 2</li>
<li>First inner ordered list, item 3</li>
</ol>
</li>
<li>First ordered list, item 2
<ol>
<li>Second inner ordered list, item 1</li>
<li>Second inner ordered list, item 2</li>
</ol>
</li>
<li>First ordered list, item 3</li>
</ol>
<div id="r1" class="region"></div>
<ol id="outer-ordered-2">
<li>Second ordered list, item 1</li>
<li>Second ordered list, item 2
<ol>
<li>Last inner ordered list, item 1</li>
<li>Last inner ordered list, item 2
<ol>
<li>Innermost ordered list, item 1</li>
<li>Innermost ordered list, item 2</li>
</ol>
</li>
<li>Last inner ordered list, item 3</li>
<li>Last inner ordered list, item 4</li>
</ol>
</li>
<li>Second ordered list, item 3</li>
</ol>
<div id="r2" class="region"></div>
</body></html>

82
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-004.htm Normal file
View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on unordered list items, when items contain other unordered lists</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers, even when extracting items from multiple and nested lists into the same named flow." name="assert">
<link href="reference/extract-list-items-004-ref.htm" rel="match">
<style>
#outer-unordered-1 ul,
#outer-unordered-2 ul {
color: blue;
}
#outer-unordered-2 ul ul {
color: green;
}
#outer-unordered-1 > li {
flow-into: f1;
}
#r1 {
flow-from: f1;
}
#outer-unordered-2 li {
flow-into: f2;
}
#r2 {
flow-from: f2;
}
.region {
margin: 2em;
background-color: lightgray;
width: 20em;
}
</style>
</head>
<body>
<p>This test passes if there are two gray rectangles: each with a list with another lists nested in it. The list markers for the black list in the first rectangle, and for all the lists in the second rectangle should be rendered outside of the gray boxes</p>
<p>The list in the first rectangle should be black, with two blue nested lists in it. The nested lists should appear after the first and the second items, they should be indented and use a different kind of bullet.</p>
<p>The list in the second rectangle should be black, with a blue nested list in it that has in turn a nested green list in it. Each of the black, blue and green list should use different kinds of bullets and list items of the same color should have the same kind of bullet.</p>
<ul id="outer-unordered-1">
<li>First unordered list, item 1
<ul>
<li>First inner unordered list, item 1</li>
<li>First inner unordered list, item 2</li>
<li>First inner unordered list, item 3</li>
</ul>
</li>
<li>First unordered list, item 2
<ul>
<li>Second inner unordered list, item 1</li>
<li>Second inner unordered list, item 2</li>
</ul>
</li>
<li>First unordered list, item 3</li>
</ul>
<div id="r1" class="region"></div>
<ul id="outer-unordered-2">
<li>Second unordered list, item 1</li>
<li>Second unordered list, item 2
<ul>
<li>Last inner unordered list, item 1</li>
<li>Last inner unordered list, item 2
<ul>
<li>Innermost unordered list, item 1</li>
<li>Innermost unordered list, item 2</li>
</ul>
</li>
<li>Last inner unordered list, item 3</li>
<li>Last inner unordered list, item 4</li>
</ul>
</li>
<li>Second unordered list, item 3</li>
</ul>
<div id="r2" class="region"></div>
</body></html>

63
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-005.htm Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on list items from multiple lists, when items contain other lists</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers or numbering (type, value), even when extracting items from multiple and nested lists into the same named flow." name="assert">
<link href="reference/extract-list-items-005-ref.htm" rel="match">
<style>
.outer-mixed-1 ul,
.outer-mixed-1 ol {
color: blue;
}
.outer-mixed-1 > li {
flow-into: f1;
}
#r1 {
flow-from: f1;
}
.region {
margin: 2em;
background-color: lightgray;
width: 20em;
}
</style>
</head>
<body>
<p>This test passes if there is a gray rectangle with two black lists in it, as described below.<br>
The first black list is a bulleted list that has a blue numbered list in it.<br>
The second black list is a numbered list that has two blue nested lists in it: the first nested list is a bulleted list with three items, and the second list is a numbered list with two items.</p>
<p>The numbers and bullets for the black lists should be rendered outside the gray rectangle, while the blue list items should be indented. Also, the blue bulleted list should have a different type of bullets than the black bulleted list.</p>
<ul class="outer-mixed-1">
<li>Unordered list, item 1
<ol>
<li>Inner ordered list, item 1</li>
<li>Inner ordered list, item 2</li>
<li>Inner ordered list, item 3</li>
</ol>
</li>
<li>Unordered list, item 2</li>
</ul>
<ol class="outer-mixed-1">
<li>Ordered list, item 1
<ul>
<li>Unordered inner list, item 1</li>
<li>Unordered inner list, item 2</li>
<li>Unordered inner list, item 3</li>
</ul>
</li>
<li>Ordered list, item 2
<ol>
<li>Second inner ordered list, item 1</li>
<li>Second inner ordered list, item 2</li>
</ol>
</li>
</ol>
<div id="r1" class="region"></div>
</body></html>

67
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-006.htm Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on all list items from a nested list</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers or numbering (type, value), even when extracting items from multiple and nested lists into the same named flow." name="assert">
<link href="reference/extract-list-items-006-ref.htm" rel="match">
<style>
.outer-mixed-2 ul,
.outer-mixed-2 ol {
color: blue;
}
.outer-mixed-2 ol ul {
color: green;
}
.outer-mixed-2 ol ul ol {
color: red;
}
.outer-mixed-2 li{
flow-into: f2;
}
#r2 {
flow-from: f2;
}
.region {
margin: 2em;
background-color: lightgray;
width: 20em;
}
</style>
</head>
<body>
<p>This test passes if there is a gray rectangle with a list in it, as described below. The list markers and numbers for the lists should be rendered outside of the gray rectangle.</p>
<p>The rectangle should contain a black, bulleted list. This list should contain a blue numbered list after the second item. The numbering on the blue list should start at 1. The blue list should contain a green, bulleted list after its second item. The green bulleted list should contain a red, numbered list after its second item. The numbering on the red list should start at 1, too.<br>
The green list should use different bullets than the black list.<br>
None of the list items should be indented – as such, they should render as a plain list, with varying types of bullets and numberings. The sequence of the colors should be, from top to bottom: black, blue, green, red, blue, black.</p>
<ul class="outer-mixed-2">
<li>Outer unordered list, item 1</li>
<li>Outer unordered list, item 2
<ol>
<li>Inner ordered list, item 1</li>
<li>Inner ordered list, item 2
<ul>
<li>Inner unordered list, item 1</li>
<li>Inner unordered list, item 2
<ol>
<li>Innermost ordered list, item 1</li>
<li>Innermost ordered list, item 2</li>
<li>Innermost ordered list, item 3</li>
</ol>
</li>
</ul>
</li>
<li>Inner ordered list, item 3</li>
<li>Inner ordered list, item 4</li>
</ol>
</li>
<li>Outer unordered list, item 3</li>
</ul>
<div id="r2" class="region"></div>
</body></html>

53
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-007.htm Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on list items from multiple lists that have the "reversed" or "start" HTML attributes set</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their numbering, even when extracting items from multiple and nested lists into the same named flow. The numbering should also honor the HTML 'reversed' and 'start' attribute." name="assert">
<link href="reference/extract-list-items-007-ref.htm" rel="match">
<style>
ol ol {
color: blue;
list-style-type: upper-roman;
}
li {
flow-into: f1;
}
#r1 {
flow-from: f1;
}
.region {
margin: 2em;
background-color: lightgray;
width: 20em;
}
</style>
</head>
<body>
<p>This test passes if there is a gray rectangle with a numbered list, as described below.<br>
The numbers for the list should be outside the rectangle and all items should render at the same indentation level.<br>
The second and third items in the list should be blue and numbered using roman numerals, CI and C, respectively. All the other items in the list should be black and numbered with decimal numbers corresponding to the item text.<br>
The final numbering of this list should be: 3, CI, C, 2, 1, 10, 11, 12, 13.</p>
<ol reversed="true">
<li>List item no. 3
<ol start="101" reversed="">
<li>Roman-numbered list item CI</li>
<li>Roman-numbered list item C</li>
</ol>
</li>
<li>List item no. 2</li>
<li>List item no. 1</li>
</ol>
<ol start="10">
<li>List item no. 10</li>
<li>List item no. 11</li>
<li>List item no. 12</li>
<li>List item no. 13</li>
</ol>
<div id="r1" class="region"></div>
</body></html>

77
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-008.htm Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into only on specific list items from multiple lists</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that extracting only certain list items from a list into a named flow preseves their numbering and markings both in the region and outside the region." name="assert">
<link href="reference/extract-list-items-008-ref.htm" rel="match">
<style>
ul {
list-style-type: disc;
}
ul ul {
list-style-type: circle;
}
ol {
list-style-type: decimal;
}
ul ol {
list-style-type: upper-roman;
}
.extract {
flow-into: f1;
color: blue;
}
.container {
color: #006400;
background-color: lightgreen;
margin: 2em;
}
.region {
margin: 2em;
background-color: lightblue;
}
#r1 {
flow-from: f1;
}
</style>
</head>
<body>
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
in the normal document flow while others are rendered in a region. Both the items that remain
in the normal flow and items in the named flow should preserve their number/marks just as regions
were not applied at all. -->
<p>Test passes if you see two rectangles, one green and one blue, as described below:<br>
The green rectangle should contain two lists, separated by a small vertical space. The <strong>first list</strong> should be a numbered list starting with 2 that has 2 items; the <strong>second list</strong> should be a bullet list with 3 items, the last one being indented and with a different type of bullet.<br>
The blue rectangle should contain a list with items numbered/marked in different ways, as follows. Except where noted, the numbers/markers should be <em>outside</em> the the blue rectangle. The <strong>first item</strong> should be numbered with the number 1, in decimal. The <strong>second item</strong> should be bulleted. The <strong>third and fourth items</strong> should be numbered with 2 and 1 respectively, with roman numerals. Also, the <strong>third item</strong> should be indented (with the number inside the blue rectangle). The <strong>fourth and fifth items</strong> should be bulleted, with the <strong>fourth item</strong> having a different kind of bullet than the second and fifth item.
</p>
<div class="container">
<ol>
<li class="extract">Numbered list, item 1</li>
<li>Numbered list, item 2</li>
<li>Numbered list, item 3</li>
</ol>
<ul>
<li>Bullet list, item 1</li>
<li class="extract">Bullet list, item 2
<ol>
<li class="extract">Numbered sub-list, item I</li>
<li>Numbered sub-list, item II</li>
</ol>
</li>
<li>Bullet list, item 3
<ul>
<li class="extract">Bullet sub-list, item 1</li>
<li>Bullet sub-list, item 2</li>
</ul>
</li>
<li class="extract">Bullet list, item 4</li>
</ul>
</div>
<div id="r1" class="region"></div>
</body></html>

75
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-009.htm Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into only on specific list items from multiple lists + list item formatting via :nth-child, :nth-of-type</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that extracting only certain list items from a list into a named flow does not affect styling via pseudo-classes such as :first-child or :nth-child" name="assert">
<link href="reference/extract-list-items-009-ref.htm" rel="match">
<style>
.container {
background-color: lightgreen;
color: #006400;
margin: 2em;
}
.extract ,
#theItem {
flow-into: f1;
}
#first li:first-child,
li:nth-child(even),
li:nth-of-type(4n) {
color: blue;
}
#first {
list-style-type: decimal;
}
#second {
list-style-type: disc;
}
#third {
list-style-type: upper-latin;
}
.region {
margin: 2em;
background-color: lightblue;
}
#r1 {
flow-from: f1;
}
</style>
</head>
<body>
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
in the normal document flow while others are rendered in a region. Pseudo-elements are used
to format the extracted list items. Things like children counting should not be affected by
the items being extracted in the named flow. -->
<p>Test passes if you see two rectangles, one green and one blue, as described below:<br>
The green rectangle should contain three lists, separated by a small vertical space. The <strong>first list</strong> should be a numbered list starting at 3, with only one item. The <strong>second list</strong> should be a bulleted list with three items. The <strong>third list</strong> should be a numbered list with two items, numbered A and C respectively.<br>
The blue rectangle should contain a list with items numbered/marked in a different ways, as follows. As opposed to the green rectangle, the numbers/markings for the list items in the blue rectangle should be outside the rectangle. The <strong>first and second items</strong> should be numbered with 1 and 2 (decimal). The <strong>third and fourth items</strong> should be bulleted. The <strong>fifth and sixth items</strong> should be numbered with B and D respectively.</p>
<div class="container">
<ol id="first">
<li id="theItem">First numbered list, item 1</li>
<li class="extract">First numbered list, item 2</li>
<li>First numbered list, item 3</li>
</ol>
<ul id="second">
<li>Bullet list, item 1</li>
<li class="extract">Bullet list, item 2</li>
<li>Bullet list, item 3</li>
<li class="extract">Bullet list, item 4</li>
<li>Bullet list, item 5</li>
</ul>
<ol id="third">
<li>Second numbered list, item A</li>
<li class="extract">Second numbered list, item B</li>
<li>Second numbered list, item C</li>
<li class="extract">Second numbered list, item D</li>
</ol>
</div>
<div id="r1" class="region"></div>
</body></html>

70
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-010.htm Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: applying flow-into and other formatting on specific list items via :nth-child, :nth-of-type pseudo-classes</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that pseudo-classes like :first-child or :nth-of-type can be used both for styling and extracting only certain list items from a list into a named flow." name="assert">
<link href="reference/extract-list-items-009-ref.htm" rel="match">
<style>
.container {
background-color: lightgreen;
color: #006400;
margin: 2em;
}
#first li:first-child,
li:nth-child(even),
li:nth-of-type(4n) {
color: blue;
flow-into: f1;
}
#first {
list-style-type: decimal;
}
#second {
list-style-type: disc;
}
#third {
list-style-type: upper-latin;
}
.region {
margin: 2em;
background-color: lightblue;
}
#r1 {
flow-from: f1;
}
</style>
</head>
<body>
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
in the normal document flow while others are rendered in a region. Pseudo-elements are used
to extract the list items and format them. -->
<p>Test passes if you see two rectangles, one green and one blue, as described below:<br>
The green rectangle should contain three lists, separated by a small vertical space. The <strong>first list</strong> should be a numbered list starting at 3, with only one item. The <strong>second list</strong> should be a bulleted list with three items. The <strong>third list</strong> should be a numbered list with two items, numbered A and C respectively.<br>
The blue rectangle should contain a list with items numbered/marked in a different ways, as follows. As opposed to the green rectangle, the numbers/markings for the list items in the blue rectangle should be outside the rectangle. The <strong>first and second items</strong> should be numbered with 1 and 2 (decimal). The <strong>third and fourth items</strong> should be bulleted. The <strong>fifth and sixth items</strong> should be numbered with B and D respectively.</p>
<div class="container">
<ol id="first">
<li>First numbered list, item 1</li>
<li>First numbered list, item 2</li>
<li>First numbered list, item 3</li>
</ol>
<ul id="second">
<li>Bullet list, item 1</li>
<li>Bullet list, item 2</li>
<li>Bullet list, item 3</li>
<li>Bullet list, item 4</li>
<li>Bullet list, item 5</li>
</ul>
<ol id="third">
<li>Second numbered list, item A</li>
<li>Second numbered list, item B</li>
<li>Second numbered list, item C</li>
<li>Second numbered list, item D</li>
</ol>
</div>
<div id="r1" class="region"></div>
</body></html>

78
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-011.htm Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: applying flow-into and other formatting on specific list items via different pseudo-classes</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that pseudo-classes like :first-child or :nth-of-type can be used both for styling and extracting only certain list items from a list into a named flow." name="assert">
<link href="reference/extract-list-items-009-ref.htm" rel="match">
<style>
.container {
background-color: lightgreen;
color: #006400;
margin: 2em;
}
#first li:first-child,
li:nth-child(even),
li:nth-of-type(4n) {
flow-into: f1;
}
ol:first-of-type li:first-of-type,
ol:first-child li:nth-child(2),
#second :nth-of-type(2),
#second li:nth-of-type(4),
#third :last-child,
#third :nth-child(2) {
color: blue;
}
#first {
list-style-type: decimal;
}
#second {
list-style-type: disc;
}
#third {
list-style-type: upper-latin;
}
.region {
margin: 2em;
background-color: lightblue;
}
#r1 {
flow-from: f1;
}
</style>
</head>
<body>
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
in the normal document flow while others are rendered in a region.
Pseudo-elements are used to extract the list items and then, other, equivalent
pseudo-elements are used to format them. -->
<p>Test passes if you see two rectangles, one green and one blue, as described below:<br>
The green rectangle should contain three lists, separated by a small vertical space. The <strong>first list</strong> should be a numbered list starting at 3, with only one item. The <strong>second list</strong> should be a bulleted list with three items. The <strong>third list</strong> should be a numbered list with two items, numbered A and C respectively.<br>
The blue rectangle should contain a list with items numbered/marked in a different ways, as follows. As opposed to the green rectangle, the numbers/markings for the list items in the blue rectangle should be outside the rectangle. The <strong>first and second items</strong> should be numbered with 1 and 2 (decimal). The <strong>third and fourth items</strong> should be bulleted. The <strong>fifth and sixth items</strong> should be numbered with B and D respectively.</p>
<div class="container">
<ol id="first">
<li>First numbered list, item 1</li>
<li>First numbered list, item 2</li>
<li>First numbered list, item 3</li>
</ol>
<ul id="second">
<li>Bullet list, item 1</li>
<li>Bullet list, item 2</li>
<li>Bullet list, item 3</li>
<li>Bullet list, item 4</li>
<li>Bullet list, item 5</li>
</ul>
<ol id="third">
<li>Second numbered list, item A</li>
<li>Second numbered list, item B</li>
<li>Second numbered list, item C</li>
<li>Second numbered list, item D</li>
</ol>
</div>
<div id="r1" class="region"></div>
</body></html>

88
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-012.htm Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on individual list items preserves other list styling properties (list-style-*)</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that list styling properties are honored even for list items extracted in named flows and rendered in regions." name="assert">
<link href="reference/extract-list-items-012-ref.htm" rel="match">
<style>
#first {
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGRDAzNDVGOTNCMEQxMUUyQkVGOEU1OTA4MTYyRjA0RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRDAzNDVGQTNCMEQxMUUyQkVGOEU1OTA4MTYyRjA0RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZEMDM0NUY3M0IwRDExRTJCRUY4RTU5MDgxNjJGMDRGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZEMDM0NUY4M0IwRDExRTJCRUY4RTU5MDgxNjJGMDRGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+rpZ8YAAAAGlJREFUeNpi/P//PwMlgImBQoDVAEZGxv9ATLELiDKEkBcIGkJMGOA1hNhAxGkIKbHwn37RiAM0UmIASPMB7B4DJmV0DPUvDDcAsQM2dWC1BAzAq5mQAQ34NBIyoAFKOxAygJHS7AwQYAAt068AjhXk+gAAAABJRU5ErkJggg==);
list-style-position: inside;
}
#second {
list-style-type: square;
list-style-position: outside;
}
#third {
list-style-type: upper-roman;
list-style-position: inside;
}
#third li {
font-weight: bold;
}
#third li span {
font-weight: normal;
}
#inner {
list-style-type: upper-alpha;
}
.container {
color: #006400;
background-color: lightgreen;
margin: 2em;
float: left;
width: 20em;
height: 20em;
}
li:last-child {
flow-into: f1;
color: blue;
}
.region {
margin: 2em;
background-color: lightblue;
float: left;
width: 20em;
height: 20em;
}
#r1 {
flow-from: f1;
}
</style>
</head>
<body>
<!-- Setting different values for list-style-position, list-style-type, list-style-image and
then extracting individual list items into named flows. Numbering shouldn't be affected, as
shouldn't indenting and marker boxes positioning. -->
<p>Test passes if you see two rectangles, one green and one blue, as described below. Except where noted, all list items should be rendered on two lines.<br>
The green rectangle should contain three lists, separated by a small vertical space, each with two items. The <strong>first list</strong> should use a triangle-shaped bullet and the text on the second line should start below the bullet. The <strong>second list</strong> should use a square-shaped bullet and the text on the second line should not come under the bullet. The <strong>third list</strong> should be numbered with roman numerals starting with 20 (XX) and the text on the second line should start below the number.<br>
The blue rectangle should contain a list with items numbered/marked in different ways, as follows. The <strong>first item</strong> should use a triangle-shaped bullet and the text on the second line should start below the bullet. The <strong>second item</strong> should use a square-shaped bullet and the bullet should be outside of the blue rectangle. The <strong>third and fourth items</strong> should be one-line and numbered with letters A and B respectively. The third item should be indented while the fourth item should have the number outside the blue rectangle. The <strong>fifth item</strong> should be numbered with the roman numeral 22 (XXII) and the text on the second line should start below the number.</p>
<div class="container">
<ul id="first">
<li>Custom bullet list, item 1<br><em>Another line of text here</em></li>
<li>Custom bullet list, item 2<br><em>Another line of text here</em></li>
<li>Custom bullet list, item 3<br><em>Another line of text here</em></li>
</ul>
<ul id="second">
<li>Square bullet list, item 1<br><em>Another line of text here</em></li>
<li>Square bullet list, item 2<br><em>Another line of text here</em></li>
<li>Square bullet list, item 3<br><em>Another line of text here</em>
<ol id="inner">
<li>Inner ordered list, item A</li>
<li>Inner ordered list, item B</li>
</ol>
</li>
</ul>
<ol start="20" id="third">
<li><span>Roman numbered list, item XX<br><em>Another line of text here</em></span></li>
<li><span>Roman numbered list, item XXI<br><em>Another line of text here</em></span></li>
<li><span>Roman numbered list, item XXII<br><em>Another line of text here</em></span></li>
</ol>
</div>
<div id="r1" class="region"></div>
</body></html>

65
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-013.htm Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on individual list items preserves other list styling properties (list-style-*) even when CSS styling contradicts default CSS styling for those HTML elements</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that list styling properties are honored even for list items extracted in named flows when the CSS-specified list type is in opposition with the list type from the markup (ol/ul)." name="assert">
<link href="reference/extract-list-items-009-ref.htm" rel="match">
<style>
ul, ol {
margin: 0;
}
.ordered {
list-style-type: lower-latin;
}
.unordered {
list-style-type: circle;
}
.extract {
color: blue;
flow-into: f1;
}
.container {
color: #006400;
background-color: lightgreen;
margin: 2em;
float: left;
width: 15em;
}
.region {
margin: 2em;
background-color: lightblue;
float: left;
width: 15em;
}
#r1 {
flow-from: f1;
}
</style>
</head>
<body>
<p>Test passes if you see two rectangles, one green and one blue, as described below.</p>
<p>The green rectangle should contain a list with items numbered/marked as such: the <strong>first two items</strong> should be numbered with small latin letters, starting with d. The <strong>next three items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>inside</em> the green rectangle.</p>
<p>The blue rectangle should contain a list with items numbered/marked as such: the <strong>first three items</strong> should be numbered with small latin letters, starting with a. The <strong>next two items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>outside</em> the blue rectangle.</p>
<div class="container">
<ul class="ordered">
<li class="extract">Ordered list, item a</li>
<li class="extract">Ordered list, item b</li>
<li class="extract">Ordered list, item c</li>
<li>Ordered list, item d</li>
<li>Ordered list, item e</li>
</ul>
<ol class="unordered">
<li>Unordered list, item 1</li>
<li>Unordered list, item 2</li>
<li>Unordered list, item 3</li>
<li class="extract">Unordered list, item 4</li>
<li class="extract">Unordered list, item 5</li>
</ol>
</div>
<div id="r1" class="region"></div>
</body></html>

48
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-014.htm Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into with different flows on list items from the same list</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test flow-into property can be applied to individual list items. This test checks that list items from the same list extracted in different named flows preserve their numbering." name="assert">
<link href="reference/extract-list-items-014-ref.htm" rel="match">
<style>
.extract1 {
flow-into: f1;
color: #006400;
}
.extract2 {
flow-into: f2;
color: blue;
}
.region {
margin-left: 2em;
float: left;
width: 15em;
height: 10em;
}
#r1 {
flow-from: f1;
background-color: lightgreen;
}
#r2 {
flow-from: f2;
background-color: lightblue;
}
</style>
</head>
<body>
<p>Test passes if you see two rectangles, one green and one blue, as follows. Each rectangle should contain a numbered list; the numbers should be rendered outside the rectangle. The items in the first list should be numbered 1, 2 and 5 respectively, while the items in the second list should be numbered 3, 4 and 6 respectively.</p>
<ol>
<li class="extract1">List item 1</li>
<li class="extract1">List item 2</li>
<li class="extract2">List item 3</li>
<li class="extract2">List item 4</li>
<li class="extract1">List item 5</li>
<li class="extract2">List item 6</li>
</ol>
<div id="r1" class="region"></div>
<div id="r2" class="region"></div>
</body></html>

53
tests/wpt/css-tests/css-regions-1_dev/html/extract-list-items-015.htm Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on list items that have the "value" HTML attribute set</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<!-- See also http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#attr-li-value -->
<meta content="" name="flags">
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their correct numbering when some of the items have the value attribute set but others don't." name="assert">
<link href="reference/extract-list-items-015-ref.htm" rel="match">
<style>
ol, li {
margin: 0;
padding: 0;
}
.extract {
flow-into: f;
}
.box {
float: left;
width: 20em;
height: 10em;
margin: 0 2em;
}
#container {
background-color: lightgray;
}
#region {
flow-from: f;
background-color: lightgreen;
}
</style>
</head>
<body>
<p>This test passes if you see two rectangles, each with a numbered list inside, as described below. The numbers for both of the lists should be rendered outside (to the left) of the respective rectangles.</p>
<p>The first rectangle should be lightgray and contain a numbered list with 5 items. The items should be numbered with 2, 3, 8, 10 and 11 respectively.</p>
<p>The second rectangle should be lightgreen and contain a numbered list with 4 items. The items should be numbered with 1, 6, 7 and 9 respectively.</p>
<div id="container" class="box">
<ol>
<li class="extract">List item 1</li>
<li>List item 2</li>
<li value="3">List item 3</li>
<li class="extract" value="6">List item 6</li>
<li class="extract">List item 7</li>
<li>List item 8</li>
<li class="extract">List item 9</li>
<li value="10">List item 10</li>
<li>List item 11</li>
</ol>
</div>
<div id="region" class="box"></div>
</body></html>

48
tests/wpt/css-tests/css-regions-1_dev/html/extract-numbered-paragraphs-divs-001.htm Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on p's and div's that use a single CSS counter as content in ::before</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that extracting paragraphs and divs with content that use counters behaves as without regions." name="assert">
<link href="reference/extract-numbered-paragraphs-divs-001-ref.htm" rel="match">
<style>
#container {
counter-reset: c 0;
}
#container p,
#container div {
flow-into: f1;
counter-increment: c;
margin: 1em 0;
}
#container p::before,
#container div::before {
content: "(" counter(c) ") ";
background: darkblue;
color: white;
}
#region {
background-color: lightblue;
border: 1px solid lightblue;
flow-from: f1;
}
</style>
</head>
<body>
<!-- Numbered <p>-s and <div>-s using the same counter, displayed inline via ::before -->
<p>Test passes if you see a light blue rectangle below, with eight lines of text in it. The text on each line should be black and preceded by the line number between parantheses. The line numbers should be white on a dark blue background.</p>
<div id="container">
<p>This is numbered line of text no. 1</p>
<p>This is numbered line of text no. 2</p>
<div>This is numbered line of text no. 3</div>
<p>This is numbered line of text no. 4</p>
<div>This is numbered line of text no. 5</div>
<p>This is numbered line of text no. 6</p>
<div>This is numbered line of text no. 7</div>
<div>This is numbered line of text no. 8</div>
</div>
<div id="region"></div>
</body></html>

64
tests/wpt/css-tests/css-regions-1_dev/html/extract-numbered-paragraphs-divs-002.htm Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on p's and div's that use different CSS counters as content in ::after</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that extracting paragraphs and divs with content that use counters behaves as without regions." name="assert">
<link href="reference/extract-numbered-paragraphs-divs-002-ref.htm" rel="match">
<style>
#container {
counter-reset: p 0 d 0;
}
#container p,
#container div {
flow-into: f1;
margin: 0;
}
#container p,
#container div {
counter-increment: p d;
}
#container p::after,
#container div::after {
display: block;
text-align: right;
border-top: medium solid black;
font-size: 200%;
}
#container p::after {
color: red;
content: counter(p);
}
#container div::after {
color: green;
content: counter(d);
}
#region {
width: 20em;
background-color: lightblue;
border: 1px solid lightblue;
flow-from: f1;
}
</style>
</head>
<body>
<!-- Numbered <p>-s and <div>-s using different counters, displayed as blocks via ::after -->
<p>Test passes if you see a light blue rectangle below, with eight lines of text in it. Each line of text should be black and with a thick underline. Below and to the right of each line of text you should see the number of that line, colored alternatingly red and green.</p>
<div id="container">
<p>This is numbered line of text no. 1</p>
<div>This is numbered line of text no. 2</div>
<p>This is numbered line of text no. 3</p>
<div>This is numbered line of text no. 4</div>
<p>This is numbered line of text no. 5</p>
<div>This is numbered line of text no. 6</div>
<p>This is numbered line of text no. 7</p>
<div>This is numbered line of text no. 8</div>
</div>
<div id="region"></div>
</body></html>

43
tests/wpt/css-tests/css-regions-1_dev/html/extract-numbered-paragraphs.htm Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on p's that use a CSS counter as content in ::before</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that extracting paragraphs with content that use counters behaves as without regions." name="assert">
<link href="reference/extract-numbered-paragraphs-ref.htm" rel="match">
<style>
#container {
counter-reset: para 0;
}
#container p {
flow-into: f1;
counter-increment: para;
margin: 1em 0;
}
#container p::before {
content: "(" counter(para) ") ";
background: darkblue;
color: white;
}
#region {
background-color: lightblue;
border: 1px solid lightblue;
flow-from: f1;
}
</style>
</head>
<body>
<!-- Numbered <p>-s using a single counter, displayed inline via ::before -->
<p>Test passes if you see a light blue rectangle below, with five lines of text in it. Each line of text should be black and preceded by the line number between parantheses. The line numbers should be white on a dark blue background.</p>
<div id="container">
<p>This is numbered paragraph no. 1</p>
<p>This is numbered paragraph no. 2</p>
<p>This is numbered paragraph no. 3</p>
<p>This is numbered paragraph no. 4</p>
<p>This is numbered paragraph no. 5</p>
</div>
<div id="region"></div>
</body></html>

52
tests/wpt/css-tests/css-regions-1_dev/html/extract-numbered-spans-display-only-some.htm Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on inline elements (span's) that use a CSS counter as content for ::before</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that extracting multiple elements into named flows but flowing only some of them into regions still preserves proper numbering via counters." name="assert">
<link href="reference/extract-numbered-spans-display-only-some-ref.htm" rel="match">
<style>
span:nth-of-type(odd) {
flow-into: odd;
}
span:nth-of-type(even) {
flow-into: even;
}
#container {
counter-reset: spans 0;
}
span {
counter-increment: spans;
}
span::before {
display: inline-block;
content: counter(spans) ".";
width: 2em;
margin: 0 .5em;
background: green;
color: white;
text-align: center;
}
#region {
background-color: lightblue;
flow-from: even;
}
</style>
</head>
<body>
<!-- Numbered <p>-s and <div>-s using different counters, displayed as blocks via ::after -->
<p>Test passes if you see a light blue rectangle below, with three blocks of black text on a single line. Each block of text should be numbered from 1 to 3 and contain the text “Visible text <em>n</em>” with <em>n</em> ranging from 1 to 3. The numbering should be white on a green background.</p>
<div id="container">
<span>Hidden bit of text 1</span>
<span>Visible text 1</span>
<span>Hidden bit of text 2</span>
<span>Visible text 2</span>
<span>Hidden bit of text 3</span>
<span>Visible text 3</span>
</div>
<div id="region"></div>
</body></html>

85
tests/wpt/css-tests/css-regions-1_dev/html/extract-ordered-list-direction-and-writing-modes.htm Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on list items that use different text directions or writing modes</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css-writing-modes-3/#direction" rel="help">
<link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to elements that have different text directions and writing modes. This tests that the rendering for lists that use different text directions/writing modes are not affected when they are extracted in a named flow and rendered in a region." name="assert">
<link href="reference/extract-ordered-list-direction-and-writing-modes-ref.htm" rel="match">
<style>
/*TODO: Include unprefixed and standard properties for writing modes and region breaking. */
body>ol {
flow-into: f;
region-break-after: always;
break-after: region;
margin: 0;
}
.direction-rtl {
direction: rtl;
background-color: lightgray;
}
.writing-mode-vrl {
writing-mode: vertical-rl;
background-color: lightblue;
}
.writing-mode-vlr {
writing-mode: vertical-lr;
background-color: lightgreen;
}
.region {
flow-from: f;
border: thick solid black;
width: 15em;
height: 15em;
float: left;
margin: 0 1em;
}
</style>
</head>
<body>
<!-- Extracting lists with different directions and writing modes. -->
<p>Test pases if you see three rectangles with black borders containing a numbered list as described below. Each of the lists has a total of six items, three being in a nested list after the second item.</p>
<p>The first rectangle should display the numbered list on a light gray background. The list items should be right-aligned, with the numbers on the right side of the list item text. Also, the list item numbering should have a period prepended to the actual number (<em>e.g.</em> <strong>.1</strong>) instead of appended to the actual number (<em>e.g.</em> <strong>1.</strong>).</p>
<p>The second rectangle should display the numbered list on a light blue background. The text should be rotated 90 degrees clockwise with the list items progressing right to left (or top-to-bottom relative to the rotated list) – this means the right-most list item should have the number 1.</p>
<p>The third rectangle should display the numbered list on a light green background. The text should be rotated 90 degrees clockwise, with the list items progressing left to right (or bottom-to-top relative to the rotated list) – this means the right-most list item should have the number 3.</p>
<ol class="direction-rtl">
<li>Top-level list, item 1</li>
<li>Top-level list, item 2
<ol>
<li>First inner list, item 1</li>
<li>First inner list, item 2</li>
<li>First inner list, item 3</li>
</ol>
</li>
<li>Top-level list, item 3</li>
</ol>
<ol class="writing-mode-vrl">
<li>Top-level list, item 1</li>
<li>Top-level list, item 2
<ol>
<li>First inner list, item 1</li>
<li>First inner list, item 2</li>
<li>First inner list, item 3</li>
</ol>
</li>
<li>Top-level list, item 3</li>
</ol>
<ol class="writing-mode-vlr">
<li>Top-level list, item 1</li>
<li>Top-level list, item 2
<ol>
<li>First inner list, item 1</li>
<li>First inner list, item 2</li>
<li>First inner list, item 3</li>
</ol>
</li>
<li>Top-level list, item 3</li>
</ol>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
</body></html>

90
tests/wpt/css-tests/css-regions-1_dev/html/extract-ordered-lists-in-regions-001.htm Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on ordered lists - single list in named flow, multiple lists in a named flow, multiple lists with nested lists in a named flow</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to ordered lists. Multiple lists extracted in a named flow should render in regions just as without regions." name="assert">
<link href="reference/extract-ordered-lists-in-regions-001-ref.htm" rel="match">
<style>
ol {
margin-top: 0;
margin-bottom: 0;
}
ol ol {
color: blue;
list-style-type: lower-roman;
}
#list1 {
flow-into: flow1;
}
#list21, #list22 {
flow-into: flow2;
}
#list31, #list32 {
flow-into: flow3;
}
#list21, #list31 {
margin-bottom: 1em;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 17em;
height: 15em;
}
#region1 {
flow-from: flow1;
}
#region2 {
flow-from: flow2;
}
#region3 {
flow-from: flow3;
}
</style>
</head>
<body>
<p>The test passes if there are three gray rectangles: the left one with a 4 items list, the middle one with two 2 items lists, the right one with two 5 items lists. <br> The blue items in the right rectangle should be indented and numbered using roman numerals.</p>
<ol id="list1">
<li>First list, item 1</li>
<li>First list, item 2</li>
<li>First list, item 3</li>
<li>First list, item 4</li>
</ol>
<ol id="list21">
<li>List 2-1, item 1</li>
<li>List 2-1, item 2</li>
</ol>
<ol id="list22">
<li>List 2-2, item 1</li>
<li>List 2-2, item 2</li>
</ol>
<ol id="list31">
<li>List 3-1, item 1</li>
<li>List 3-1, item 2
<ol>
<li>First inner list, item i</li>
<li>First inner list, item ii</li>
</ol>
</li>
<li>List 3-1, item 3</li>
</ol>
<ol id="list32">
<li>List 3-2, item 1</li>
<li>List 3-2, item 2</li>
<li>List 3-2, item 3
<ol>
<li>Second inner list, item i</li>
<li>Second inner list, item ii</li>
</ol>
</li>
</ol>
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="region3" class="region"></div>
</body></html>

88
tests/wpt/css-tests/css-regions-1_dev/html/extract-ordered-lists-in-regions-002.htm Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on ordered lists that have the "reversed" HTML attribute set</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to ordered lists. Lists extracted in a named flow should still honor the HTML5 'reversed' list attribute." name="assert">
<link href="reference/extract-ordered-lists-in-regions-002-ref.htm" rel="match">
<style>
ol {
margin: 0;
}
ol ol {
color: blue;
}
#ordered-1 {
flow-into: f1;
}
#r1 {
flow-from: f1;
}
#ordered-2,
#ordered-2 ol {
flow-into: f2;
}
#r2 {
flow-from: f2;
}
.ordered-3 {
flow-into: f3;
}
#r3 {
flow-from: f3;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 15em;
height: 15em;
}
</style>
</head>
<body>
<p>This test passes if you see three gray rectangles with a number of lists inside each, as follows.</p>
<p>The first rectangle should contain a black numbered list, with the numbers in reverse order. After the first item there should a be a blue numbered list, indented and numbered in normal order.</p>
<p>The second rectangle should contain two numbered list. The first one should be black and numbered in reverse order while the second should be blue and numbered in normal order. They should both have the same indentation level.</p>
<p>The third rectangle should contain two black, numbered lists, the first with three items, the second with two items. Both lists should be numbered in reverse.</p>
<ol reversed="reversed" id="ordered-1">
<li>First reversed list, item 3
<ol>
<li>First inner list, item 1</li>
<li>First inner list, item 2</li>
</ol>
</li>
<li>First reversed list, item 2</li>
<li>First reversed list, item 1</li>
</ol>
<div id="r1" class="region"></div>
<ol reversed="" id="ordered-2">
<li>Second reversed list, item 3</li>
<li>Second reversed list, item 2
<ol>
<li>Second inner list, item 1</li>
<li>Second inner list, item 2</li>
<li>Second inner list, item 3</li>
</ol>
</li>
<li>Second reversed list, item 1</li>
</ol>
<div id="r2" class="region"></div>
<ol reversed="true" class="ordered-3">
<li>Third reversed list, item 3</li>
<li>Third reversed list, item 2</li>
<li>Third reversed list, item 1</li>
</ol>
<ol reversed="true" class="ordered-3">
<li>Final reversed list, item 2</li>
<li>Final reversed list, item 1</li>
</ol>
<div id="r3" class="region"></div>
</body></html>

88
tests/wpt/css-tests/css-regions-1_dev/html/extract-ordered-lists-in-regions-003.htm Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on ordered lists that have the "reversed" and/or "start" HTML attribute set</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to ordered lists. Lists extracted in a named flow should still honor the HTML5 'start' and 'reversed' list attributes." name="assert">
<link href="reference/extract-ordered-lists-in-regions-002-ref.htm" rel="match">
<style>
ol {
margin: 0;
}
ol ol {
color: blue;
}
#ordered-1 {
flow-into: f1;
}
#r1 {
flow-from: f1;
}
#ordered-2,
#ordered-2 ol {
flow-into: f2;
}
#r2 {
flow-from: f2;
}
.ordered-3 {
flow-into: f3;
}
#r3 {
flow-from: f3;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 17em;
height: 15em;
}
</style>
</head>
<body>
<p>This test passes if you see three gray rectangles with a number of lists inside each, as follows.</p>
<p>The first rectangle should contain a black numbered list, with the numbering starting at 3. After the first item there should a be a blue numbered list, indented, with numbering starting at 10.</p>
<p>The second rectangle should contain two numbered list. The first one should be black with numbering starting at 10, while the second should be blue and with the numbering starting at 0. They should both have the same indentation level.</p>
<p>The third rectangle should contain a single numbered list, that's reversed, with the first item being numbered 5.</p>
<ol start="3" id="ordered-1">
<li>First ordered list, item 3
<ol start="10">
<li>Inner ordered list, item 10</li>
<li>Inner ordered list, item 11</li>
</ol>
</li>
<li>First ordered list, item 4</li>
<li>First ordered list, item 5</li>
</ol>
<div id="r1" class="region"></div>
<ol start="10" id="ordered-2">
<li>Second ordered list, item 10</li>
<li>Second ordered list, item 11
<ol start="0">
<li>Inner ordered list, item 0</li>
<li>Inner ordered list, item 1</li>
<li>Inner ordered list, item 2</li>
</ol>
</li>
<li>Second ordered list, item 12</li>
</ol>
<div id="r2" class="region"></div>
<ol start="5" reversed="true" class="ordered-3">
<li>Reversed ordered list, item 5</li>
<li>Reversed ordered list, item 4</li>
<li>Reversed ordered list, item 3</li>
</ol>
<ol reversed="true" class="ordered-3">
<li>Reversed ordered list, item 2</li>
<li>Reversed ordered list, item 1</li>
</ol>
<div id="r3" class="region"></div>
</body></html>

115
tests/wpt/css-tests/css-regions-1_dev/html/extract-ordered-lists-in-regions-explicit-counters-001.htm Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on ordered lists that use a single CSS counter and ::before for list numbering</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to ordered lists. Multiple lists using a single counter displayed in generated content and extracted in a named flow should render in regions just as without regions." name="assert">
<link href="reference/extract-ordered-lists-in-regions-explicit-counters-001-ref.htm" rel="match">
<style>
ol {
list-style-type: none;
counter-reset: items 0;
}
ol>li {
counter-increment: items;
}
li::before {
content: counter(items) ". ";
display: inline-block;
width: 1.5em;
margin-right: .3em;
text-align: right;
}
ol.double>li {
counter-increment: items 2;
}
ol.double>li::before {
content: counter(items, upper-latin) ". ";
}
ol.down-ten {
counter-reset: items 11;
}
ol.down-ten>li {
counter-increment: items -1;
}
ol.down-ten>li::before {
content: counter(items, upper-roman) ". ";
width: 2em;
}
#list1 {
flow-into: flow1;
}
#list21, #list22 {
flow-into: flow2;
}
#list31 {
flow-into: flow3;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 18em;
height: 15em;
}
#region1 {
flow-from: flow1;
}
#region2 {
flow-from: flow2;
}
#region3 {
flow-from: flow3;
}
</style>
</head>
<body>
<p>The test passes if there are three gray rectangles as follows:<br>
1. the first one contains a numbered, 4 items list<br>
2. the second contains two numbered, 3 items lists – each list uses letters for numbering, starting with 'B.' and skipping every other letter (<em>e.g.</em> B, D, F)<br>
3. the last rectangle contains a descending numbered list: it's numbered using roman numerals, starting at X (10), in decreasing order; after the second item there's an inner numbered list with 2 items, again descendingly numbered with roman numerals, starting at 10; finally, before the last item there's another inner numbered list with 2 items, labeled with letters, more precisely, the letters B and D</p>
<ol id="list1">
<li>First list, item 1</li>
<li>First list, item 2</li>
<li>First list, item 3</li>
<li>First list, item 4</li>
</ol>
<ol class="double" id="list21">
<li>List 2-1, item B</li>
<li>List 2-1, item D</li>
<li>List 2-1, item F</li>
</ol>
<ol start="4" class="double" id="list22">
<li>List 2-2, item B</li>
<li>List 2-2, item D</li>
<li>List 2-2, item F</li>
</ol>
<ol class="down-ten" id="list31">
<li>Outer list, item X</li>
<li>Outer list, item IX
<ol class="down-ten">
<li>Inner list 1, item X</li>
<li>Inner list 1, item IX</li>
</ol>
</li>
<li>Outer list, item VIII</li>
<li>Outer list, item VII</li>
<li>Outer list, item VI
<ol class="double">
<li>Inner list 2, item B</li>
<li>Inner list 2, item D</li>
</ol>
</li>
<li>Outer list, item V</li>
</ol>
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="region3" class="region"></div>
</body></html>

79
tests/wpt/css-tests/css-regions-1_dev/html/extract-ordered-lists-in-regions-explicit-counters-002.htm Normal file
View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on ordered lists that use multiple CSS counters and ::before for list numbering</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset" rel="help">
<link href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to ordered lists. List items numbered using a single counter in nested scopes and extracted in a named flow should render in regions just as without regions." name="assert">
<link href="reference/extract-ordered-lists-in-regions-explicit-counters-002-ref.htm" rel="match">
<style>
#list1 ol, ul {
counter-reset: items 0;
padding-left: 2em;
}
li {
counter-increment: items 1;
list-style-type: none;
}
.twice>li {
counter-increment: items 2;
}
li::before {
content: counters(items, ".") ". ";
display: inline-block;
margin-right: .3em;
text-align: right;
}
.roman>li::before {
content: counters(items, ".", upper-roman) ". ";
}
.disc>li::before {
content: counter(items, disc) " ";
}
#list1 {
flow-into: f1;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 17em;
height: 15em;
}
#r1 {
flow-from: f1;
}
</style>
</head>
<body>
<p>This test passes if you see a gray rectangle with a list containing sublists as follows: the outermost list items should be numbered using roman numerals; the second-level list should be a bullet list with two items; the innermost list should be numbered using three levels of decimal numbers (<em>e.g.</em> 2.1.1).</p>
<ol id="list1" class="roman">
<li>Roman list, item I</li>
<li>Roman list, item II
<ul class="disc">
<li>Bullet 1
<ol>
<li>Sub-point 2.1.1</li>
<li>Sub-point 2.1.2</li>
</ol>
</li>
<li>Bullet 2
<ol>
<li>Sub-point 2.2.1</li>
<li>Sub-point 2.2.2</li>
<li>Sub-point 2.2.3</li>
<li>Sub-point 2.2.4</li>
</ol>
</li>
</ul>
</li>
<li>Roman list, item III</li>
<li>Roman list, item IV</li>
</ol>
<div id="r1" class="region"></div>
</body></html>

103
tests/wpt/css-tests/css-regions-1_dev/html/extract-ordered-lists-in-regions-explicit-counters-003.htm Normal file
View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on list items from lists that use a single CSS counter with nested scopes and ::before for list numbering</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset" rel="help">
<link href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to ordered lists. Extracting parts of a list numbered using a single counter in nested scopes should render in regions just as without regions." name="assert">
<link href="reference/extract-ordered-lists-in-regions-explicit-counters-003-ref.htm" rel="match">
<style>
ol, ul {
counter-reset: items 0;
padding-left: 2em;
}
li {
counter-increment: items 1;
list-style-type: none;
}
.twice>li {
counter-increment: items 2;
}
li::before {
content: counters(items, ".") ". ";
display: inline-block;
margin-right: .3em;
text-align: right;
}
.roman>li::before {
content: counters(items, ".", upper-roman) ". ";
}
.latin>li::before {
content: counters(items, ".", upper-latin) ". ";
}
.disc>li::before {
content: counter(items, disc) " ";
}
.extract1 {
flow-into: f1;
color: #006400;
}
.extract2 {
flow-into: f2;
color: blue;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 17em;
height: 20em;
}
#r1 {
flow-from: f1;
background-color: lightgreen;
}
#r2 {
flow-from: f2;
background-color: lightblue;
}
</style>
</head>
<body>
<p>This test passes if you see two rectangles, one green and one blue, as described below.</p>
<p>The green rectangle should contain two lists, <em>one numbered</em> and <em>one bulleted</em>. The <strong>numbered list</strong> should be numbered with roman numerals. Inside it, after the second item there should be a two items bulleted list that's indented. After the first bullet there should a three items numbered list. The numbering for this list should use three levels of period separated decimal numbers (<em>e.g.</em> 2.1.1). The <strong>bulleted list</strong> should have 4 items and the same indentation as the roman-numbered list above it.</p>
<p>The blue rectangle should contain a four items numbered list. The numbering for this list should use three levels of period separated decimal numbers, starting at 2.2.1.</p>
<ol class="roman extract1">
<li>Roman list, item I</li>
<li>Roman list, item II
<ul class="disc">
<li>Bullet 1
<ol>
<li>Sub-point 2.1.1</li>
<li>Sub-point 2.1.2</li>
</ol>
</li>
<li>Bullet 2
<ol class="extract2">
<li>Sub-point 2.2.1</li>
<li>Sub-point 2.2.2</li>
<li>Sub-point 2.2.3</li>
<li>Sub-point 2.2.4</li>
</ol>
</li>
</ul>
</li>
<li>Roman list, item III</li>
<li>Roman list, item IV
<ul class="disc extract1">
<li>Another bullet 1</li>
<li>Another bullet 2</li>
<li>Another bullet 3</li>
<li>Another bullet 4</li>
</ul>
</li>
</ol>
<div id="r1" class="region"></div>
<div id="r2" class="region"></div>
</body></html>

111
tests/wpt/css-tests/css-regions-1_dev/html/extract-ordered-lists-in-regions-explicit-counters-004.htm Normal file
View file

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on list items from lists that use multiple CSS counters with nested scopes and ::before for list numbering</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset" rel="help">
<link href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to ordered lists. List items numbered using multiple counters and extracted in a named flow should render in regions just as without regions." name="assert">
<link href="reference/extract-ordered-lists-in-regions-explicit-counters-004-ref.htm" rel="match">
<style>
/*Lists setup*/
ol {
padding-left: 1em;
}
ol>li {
list-style-type: none;
}
ol.part {
counter-reset: part 0;
}
ol.part>li {
counter-increment: part;
}
ol.part>li::before {
content: counter(part, upper-roman) " ";
font-weight: bold;
}
ol.chapter {
counter-reset: chapter 0;
}
ol.chapter>li {
counter-increment: chapter;
}
ol.chapter>li::before {
content: counter(chapter, decimal) ". ";
}
ol.section {
counter-reset: section 0;
}
ol.section>li {
counter-increment: section;
}
ol.section>li::before {
content: counter(part, upper-roman) "." counter(chapter, decimal) "-" counter(section, lower-latin) " ";
color: blue;
}
/*Regions setup*/
.extract1 {
flow-into: f1;
}
.extract2 {
flow-into: f2;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 20em;
height: 20em;
}
#r1 {
flow-from: f1;
}
#r2 {
flow-from: f2;
}
</style>
</head>
<body>
<p>This test passes if you see two gray rectangles, as described below.</p>
<p>The first rectangle contains two numbered lists. The <strong>first list</strong> has three items and is numbered using bold roman numerals, starting at 1 (I). After the first item there's a numbered sublist; it is indented and has four items, numbered using decimal numbers, starting at 1. After the last item in this sublist there's a single item numbered list; the numbering is blue and uses three levels of numbering: roman, decimal and with latin letters, respectively; numbering starts with I.4-a. The <strong>second list</strong> has two items and uses the same blue, three-level numbering, that starts at I.3-a this time.</p>
<p>The second rectangle contains a two-items numbered list, numbered using decimal numbers. After the first item there's a sublist. The sublist is indented and has blue, three level-numbering: roman, decimal and with latin letters, respectively. Numbering starts with <em>III.1-a</em>.</p>
<ol class="part extract1">
<li>Part I
<ol class="chapter">
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3
<ol class="section extract1">
<li>Section I.3-a</li>
<li>Section I.3-b</li>
</ol>
</li>
<li>Chapter 4
<ol class="section">
<li>Section I.4-a</li>
</ol>
</li>
</ol>
</li>
<li>Part II</li>
<li>Part III
<ol class="chapter extract2">
<li>Chapter 1
<ol class="section">
<li>Section III.1-a</li>
<li>Section III.1-b</li>
<li>Section III.1-c</li>
<li>Section III.1-d</li>
</ol>
</li>
<li>Chapter 2</li>
</ol>
</li>
</ol>
<div id="r1" class="region"></div>
<div id="r2" class="region"></div>
</body></html>

120
tests/wpt/css-tests/css-regions-1_dev/html/extract-ordered-lists-in-regions-explicit-counters-005.htm Normal file
View file

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on list items from lists that use multiple CSS counters with nested scopes and ::after for list numbering</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset" rel="help">
<link href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to ordered lists. List items numbered using multiple counters displayed in the ::after pseudo-element and extracted in a named flow should render in regions just as without regions." name="assert">
<link href="reference/extract-ordered-lists-in-regions-explicit-counters-005-ref.htm" rel="match">
<style>
/*Lists setup*/
ol {
padding-left: 1em;
}
ol>li {
display: block;
position: relative;
}
li::after {
position: absolute;
top: 0;
right: 0;
margin-right: .5em;
}
ol.part {
counter-reset: part 0;
}
ol.part>li {
counter-increment: part;
}
ol.part>li::after {
content: counter(part, upper-roman) " ";
font-weight: bold;
}
ol.chapter {
counter-reset: chapter 0;
}
ol.chapter>li {
counter-increment: chapter;
}
ol.chapter>li::after {
content: "\2026\ " counter(chapter, decimal);
}
ol.section {
counter-reset: section 0;
}
ol.section>li {
counter-increment: section;
}
ol.section>li::after {
content: counter(part, upper-roman) "." counter(chapter, decimal) "-" counter(section, lower-latin) " ";
color: blue;
}
/*Regions setup*/
.extract1 {
flow-into: f1;
}
.extract2 {
flow-into: f2;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 20em;
height: 20em;
}
#r1 {
flow-from: f1;
}
#r2 {
flow-from: f2;
}
</style>
</head>
<body>
<p>This test passes if you see two gray rectangles, as described below. All numbering should be aligned to the right margin of the rectangles.</p>
<p>The first rectangle contains two numbered lists. The <strong>first list</strong> has three items and is numbered using bold roman numerals, starting at 1 (I). After the first item there's a numbered sublist; it is indented and has four items, numbered using decimal numbers preceded by an ellipsis (…), starting at 1. After the last item in this sublist there's a single item numbered list; the numbering is blue and uses three levels of numbering: roman, decimal and with latin letters, respectively; numbering starts with I.4-a. The <strong>second list</strong> has two items and uses the same blue, three-level numbering, that starts at I.3-a this time.</p>
<p>The second rectangle contains a two-items numbered list, numbered using decimal numbers preceded by an ellipsis. After the first item there's a sublist. The sublist is indented and has blue, three level-numbering: roman, decimal and with latin letters, respectively. Numbering starts with <em>III.1-a</em>.</p>
<ol class="part extract1">
<li>Part I
<ol class="chapter">
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3
<ol class="section extract1">
<li>Section I.3-a</li>
<li>Section I.3-b</li>
</ol>
</li>
<li>Chapter 4
<ol class="section">
<li>Section I.4-a</li>
</ol>
</li>
</ol>
</li>
<li>Part II</li>
<li>Part III
<ol class="chapter extract2">
<li>Chapter 1
<ol class="section">
<li>Section III.1-a</li>
<li>Section III.1-b</li>
<li>Section III.1-c</li>
<li>Section III.1-d</li>
</ol>
</li>
<li>Chapter 2</li>
</ol>
</li>
</ol>
<div id="r1" class="region"></div>
<div id="r2" class="region"></div>
</body></html>

89
tests/wpt/css-tests/css-regions-1_dev/html/extract-unordered-lists-in-regions.htm Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flow-into on unordered lists - single list in named flow, multiple lists in a named flow, multiple lists with nested lists in a named flow</title>
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="The flow-into property can be applied to unordered lists. Multiple lists extracted in a named flow should render in regions just as without regions." name="assert">
<link href="reference/extract-unordered-lists-in-regions-ref.htm" rel="match">
<style>
ul {
margin-top: 0;
margin-bottom: 0;
}
ul ul {
color: blue;
}
#list1 {
flow-into: flow1;
}
#list21, #list22 {
flow-into: flow2;
}
#list31, #list32 {
flow-into: flow3;
}
#list21, #list31 {
margin-bottom: 1em;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 20em;
height: 15em;
}
#region1 {
flow-from: flow1;
}
#region2 {
flow-from: flow2;
}
#region3 {
flow-from: flow3;
}
</style>
</head>
<body>
<p>The test passes if there are three gray rectangles: the left one with a 4 items list, the middle one with two 2 items lists, the right one with two 5 items lists. <br> The blue items in the right rectangle should be indented and have a different marker.</p>
<ul id="list1">
<li>Unordered list, item 1</li>
<li>Unordered list, item 2</li>
<li>Unordered list, item 3</li>
<li>Unordered list, item 4</li>
</ul>
<ul id="list21">
<li>Unordered list 2-1, item 1</li>
<li>Unordered list 2-1, item 2</li>
</ul>
<ul id="list22">
<li>Unordered list 2-2, item 1</li>
<li>Unordered list 2-2, item 2</li>
</ul>
<ul id="list31">
<li>Unordered list 3-1, item 1</li>
<li>Unordered list 3-1, item 2
<ul>
<li>First unordered inner list, item 1</li>
<li>First unordered inner list, item 2</li>
</ul>
</li>
<li>Unordered list 3-1, item 3</li>
</ul>
<ul id="list32">
<li>Unordered list 3-2, item 1</li>
<li>Unordered list 3-2, item 2</li>
<li>Unordered list 3-2, item 3
<ul>
<li>Second unordered inner list, item 1</li>
<li>Second unordered inner list, item 2</li>
</ul>
</li>
</ul>
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="region3" class="region"></div>
</body></html>

89
tests/wpt/css-tests/css-regions-1_dev/html/floated-regions-001.htm Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: multiple auto-sized floated regions</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details" rel="help">
<meta content="" name="flags">
<meta content="Test checks that multiple regions that are auto-sized and floated
are sized according to the auto-size algorithm but also respect the floats sizing model.
They should also be properly floated relative to their corresponding block formatting
context." name="assert">
<link href="reference/floated-regions-001-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
}
.blue {
color: blue;
border-color: blue;
}
.green {
color: green;
border-color: green;
}
.break {
break-before: region;
}
#region-container {
border: 10px solid black;
overflow: hidden;
}
.region {
flow-from: f;
}
.region p {
background: red;
}
.right {
border-left-width: 20px;
border-left-style: solid;
float: right;
}
.left {
border-right-width: 20px;
border-right-style: solid;
float: left;
}
</style>
</head>
<body>
<p>
Test passes if you see a horizontal, black-bordered rectangle with a green square at its
left end and a blue square at its right end. The rectangle should be approximately as
wide as the page.<br>
You should see no red.
</p>
<div id="region-container">
<div class="region right blue">
<p>&nbsp;</p>
</div>
<div class="region left green">
<p>&nbsp;</p>
</div>
</div>
<article class="flow">
<div class="blue">
xxxx<br>
xxxx<br>
xxxx<br>
xxxx<br>
xxxx
</div>
<div class="green break">
xxxx<br>
xxxx<br>
xxxx<br>
xxxx<br>
xxxx
</div>
</article>
</body></html>

60
tests/wpt/css-tests/css-regions-1_dev/html/floated-regions-002.htm Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: floated region with multiple floated siblings</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that a floated region behaves as a regular float
when it has multiple floated siblings, before and after it." name="assert">
<link href="reference/floated-regions-002-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
}
.flow {
flow-into: f;
}
.region {
flow-from: f;
background: red;
}
.region p {
background: red;
}
.float {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
}
.green {
background: green;
}
</style>
</head>
<body>
<p>
Test passes if you see four regularly spaced green squares.<br>
You should see no red.
</p>
<div class="float green"></div>
<div class="float green"></div>
<div class="region float"></div>
<div class="float green"></div>
<article class="flow">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</article>
</body></html>

50
tests/wpt/css-tests/css-regions-1_dev/html/floated-regions-003.htm Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: single auto-sized floated region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that a single auto-sized region is properly sized,
according both to the regions processing model and the specifics of floats sizing." name="assert">
<link href="reference/floated-regions-003-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
}
.flow {
flow-into: f;
}
.region {
flow-from: f;
}
.region p {
background: red;
}
.float {
float: left;
border: 10px solid black;
}
</style>
</head>
<body>
<p>
Test passes if you see a green square with a thick black outline.<br>
You should see no red.
</p>
<div class="region float"></div>
<article class="flow">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</article>
</body></html>

71
tests/wpt/css-tests/css-regions-1_dev/html/floated-regions-004.htm Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: named flow contains a nested floated region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details" rel="help">
<meta content="" name="flags">
<meta content="Test checks that a named flow that contains a nested floated
auto-sized region is formatted according to the visual formatting model." name="assert">
<link href="reference/floated-regions-004-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
color: green;
}
.inner-flow {
flow-into: g;
color: blue;
}
.region {
flow-from: f;
border: 10px solid black;
}
.inner-region {
flow-from: g;
}
.region p,
.inner-region p {
background: red;
}
.float {
float: right;
}
</style>
</head>
<body>
<p>
Test passes if you see a horizontal, black-bordered rectangle with a green square at its
left end and a blue square at its right end. The rectangle should be approximately as
wide as the page.<br>
You should see no red.
</p>
<div class="region"></div>
<article class="flow">
<div class="float inner-region">
<p>&nbsp;</p>
</div>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</article>
<article class="inner-flow">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</article>
</body></html>

75
tests/wpt/css-tests/css-regions-1_dev/html/floated-regions-005.htm Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: floated and normal flow auto-sized regions</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details" rel="help">
<meta content="" name="flags">
<meta content="Test checks that layout is correct when mixing floated and normal
flow auto-sized regions." name="assert">
<link href="reference/floated-regions-005-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
}
.blue {
color: blue;
}
.green {
color: green;
}
.region {
flow-from: f;
}
.region p {
background: red;
}
.left {
float: left;
}
.sized {
max-height: 100px;
}
.inline-block {
display: inline-block;
}
</style>
</head>
<body>
<p>
Test passes if you two squares side by side. The left one should be green, the right one
should be blue and they should be flush to one another.<br>
You should see no red.
</p>
<div class="sized left region">
<p>&nbsp;</p>
</div>
<div class="inline-block region">
<p>&nbsp;</p>
</div>
<article class="flow">
<div class="green">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
<div class="blue">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</article>
</body></html>

86
tests/wpt/css-tests/css-regions-1_dev/html/floats-clear-breaks-001.htm Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: cleared floats in named flow contents</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that floats in named flow contents are floated relative
to the region container and not their initial container, even when multiple regions
are involved." name="assert">
<link href="reference/floats-clear-breaks-001-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
}
.float {
float: left;
color: blue;
margin: 2px 4px 6px 8px;
}
.break {
break-before: region;
}
.green {
color: green;
}
.bordered {
border: 10px solid black;
}
.region {
flow-from: f;
display: inline-block;
margin-bottom: 10px;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see two squares separated by a small vertical space. The squares should
have a black outline, the top square should be blue and the bottom one should be green.<br>
You should see no red.
</p>
<div class="bordered region">
<p>&nbsp;</p>
</div>
<div class="bordered region">
<p>&nbsp;</p>
</div>
<!-- In case the forced break leads to an empty region, the content will flow in this
third region ending up without a border. -->
<div class="region">
<p>&nbsp;</p>
</div>
<article class="flow">
<div class="float">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
<div class="break green">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</article>
</body></html>

86
tests/wpt/css-tests/css-regions-1_dev/html/floats-clear-breaks-002.htm Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: forced region breaks and clear on floats inside named flow contents</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-break/#parallel-flows" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that no regions are left empty when setting
a forced region break on a cleared float." name="assert">
<link href="reference/floats-clear-breaks-002-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
}
.float {
float: left;
color: blue;
}
.break {
break-before: region;
}
.clear {
clear: left;
color: green;
}
.bordered {
border: 10px solid black;
}
.region {
flow-from: f;
max-width: 100px;
margin-bottom: 10px;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see two squares separated by a small vertical space. The squares should
have a black outline, the top square should be blue and the bottom one should be green.<br>
You should see no red.
</p>
<div class="bordered region">
<p>&nbsp;</p>
</div>
<div class="bordered region">
<p>&nbsp;</p>
</div>
<!-- In case the clear + forced break lead to an empty region, the content will flow in this
third region ending up without a border. -->
<div class="region">
<p>&nbsp;</p>
</div>
<article class="flow">
<div class="float">
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
</div>
<div class="break clear">
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
</div>
</article>
</body></html>

48
tests/wpt/css-tests/css-regions-1_dev/html/floats-in-named-flow-001.htm Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: float in a named flow</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that a float in named flow contents is floated relative
to the region container and not its initial container." name="assert">
<link href="reference/floats-in-named-flow-001-ref.htm" rel="match">
<style>
.flow {
flow-into: f;
text-align: right;
color: gray;
}
.float {
width: 50px;
height: 50px;
background-color: lightblue;
float: left;
}
.region {
flow-from: f;
max-width: 150px;
margin: 5px;
border: 2px solid black;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see some filler gray text and a light blue square in the top left
corner of black-bordered rectangle.<br>
Test fails is you see any red.
</p>
<div class="flow">
<div class="float"></div>
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
</div>
<div class="region">
<p>&nbsp;</p>
</div>
</body></html>

54
tests/wpt/css-tests/css-regions-1_dev/html/floats-in-named-flow-002.htm Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: named flow contains multiple floats</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<meta content="" name="flags">
<meta content="Test checks that when a named flow contains multiple floats they
are floated relative to the region container and not their initial container." name="assert">
<link href="reference/floats-in-named-flow-002-ref.htm" rel="match">
<style>
.flow {
flow-into: f;
color: gray;
}
.float {
width: 50px;
height: 50px;
}
.right {
float: right;
background: lightgreen;
}
.left {
float: left;
background: lightblue;
}
.region {
flow-from: f;
width: 200px;
border: 2px solid black;
margin: 5px;
}
.region p {
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see a black-bordered rectangle with the following contents: a light blue
square in the top left corner, a light green square in the top right with some filler gray
text in between the squares and under them.<br>
Test fails is you see any red.
</p>
<div class="flow">
<div class="float right"></div>
<div class="float left"></div>
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
</div>
<div class="region">
<p>&nbsp;</p>
</div>
</body></html>

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