mirror of
https://github.com/servo/servo.git
synced 2025-08-18 11:55:39 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: fixed height flexbox inside auto height region</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<meta name="assert" content="Test that flowing a flex container inside a region with auto-height will enlarge
|
||||
the region to fit the content.">
|
||||
<link rel="match" href="reference/autoheight-flexbox-001-ref.html">
|
||||
<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"> </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: flowing auto-height flexbox elements in region</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test that a flex container with auto height is flowed correctly inside a region
|
||||
with auto height. The region should fit the flexbox.">
|
||||
<link rel="match" href="reference/regions-flexbox-002-ref.html">
|
||||
<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"> </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: auto height region inside a fixed sized flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test that an auto-height region inside a flexbox is stretched to match the flexbox
|
||||
container's cross size.">
|
||||
<link rel="match" href="reference/autoheight-flexbox-003-ref.html">
|
||||
<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"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: auto height region inside an auto height flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-flexbox-003-ref.html">
|
||||
<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"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: Auto-height regions in auto-height flex container</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-autoheight-flexbox-001-ref.html">
|
||||
<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 id="c1" class="content">
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
<span class="blue">XXXXX</span>
|
||||
</div>
|
||||
<div id="c2" class="content">
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div id="r1" class="fromFlow1"><p class="red"> </p></div>
|
||||
<div id="r2" class="fromFlow2"><p class="red"> </p></div>
|
||||
<div id="r3" class="fromFlow1"><p class="red"> </p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: Auto-height regions with vertical writing mode in auto-height flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-autoheight-flexbox-002-ref.html">
|
||||
<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> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: auto-height regions in auto-height flexbox with flex basis</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#propdef-break-after">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-autoheight-flexbox-003-ref.html">
|
||||
<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"> </p></div>
|
||||
<div class="region"> </div>
|
||||
<div class="region"> </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: nested regions in flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-autoheight-flexbox-004-ref.html">
|
||||
<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"> </p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: Auto-height regions inside fixed sized flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that auto-height regions respect the flex grow property when placed
|
||||
inside a fixed sized flexbox with a single row.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.html">
|
||||
<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"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: Auto-height regions inside fixed sized flexbox with column flow</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.html">
|
||||
<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"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.html">
|
||||
<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 class="content" id="c1">
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
<div class="break"></div>
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
<div class="break"></div>
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" id="c2">
|
||||
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"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: Auto-height region in fixed sized flexbox using flex basis</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.html">
|
||||
<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 class="region" id="first"></div>
|
||||
</div>
|
||||
<div class="region" id="second">
|
||||
<p class="red"> </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.html">
|
||||
<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"> </p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: auto-height regions inside a flex container with fixed size</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap">
|
||||
<meta name="assert" content="Test that the flex container stretches a region flex item with a height smaller than
|
||||
the flex container's inner cross size.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.html">
|
||||
<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"> </p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: auto-height regions inside fixed sized flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.html">
|
||||
<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"> </p></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: auto-height regions with max height in fixed sized flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" 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.">
|
||||
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.html">
|
||||
<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"> </p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: fragmenting a flex container with column flow </title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that a flex container with column flow is fragmented between regions.">
|
||||
<link rel="match" href="reference/column-flexbox-break-ref.html">
|
||||
<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"> </p></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.flex {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.region {
|
||||
width: 100px;
|
||||
background-color: gray;
|
||||
padding: 10px;
|
||||
}
|
||||
</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="region">
|
||||
<div class="flex">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.flex {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.region {
|
||||
width: 100px;
|
||||
padding: 10px;
|
||||
background-color: gray;
|
||||
}
|
||||
</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="region">
|
||||
<div class="flex">
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.blue {
|
||||
height: 60px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
position: relative;
|
||||
bottom: 40px;
|
||||
left: 200px;
|
||||
}
|
||||
</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="blue"> </div>
|
||||
<div class="green"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
line-height: 1em;
|
||||
font-size: 20px;
|
||||
color: green;
|
||||
}
|
||||
</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">
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</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</div>
|
||||
<div class="content">XXXX</div>
|
||||
<div class="content">XXXX</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.c1, .c2 {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: blue;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: green;
|
||||
}
|
||||
</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="c2">XXX</div>
|
||||
<div class="c1">XXX</div>
|
||||
<div class="c2">XXX</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.white {
|
||||
background-color: white;
|
||||
}
|
||||
</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="block green"></div><div class="block blue"></div><div class="block white"></div><div class="block blue"></div><div class="block green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.block {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
</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="block green"></div>
|
||||
<div class="block blue"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.column {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.green {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>The green and blue rectangles are regions placed inside a flexbox with column wrap flow.</li>
|
||||
<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 class="column">
|
||||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
<div class="green"></div>
|
||||
</div><div class="column">
|
||||
<div class="blue"></div>
|
||||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.fixed {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
margin-bottom: 20px;
|
||||
background-color: green;
|
||||
position: relative;
|
||||
top: 60px;
|
||||
}
|
||||
</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="fixed"></div>
|
||||
<div class="fixed"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.stripe {
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
margin-right: 26px;
|
||||
margin-top: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</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="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.block {
|
||||
display: inline-block;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
</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 class="block green"></div><div class="block blue"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.stripe {
|
||||
background-color: green;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
margin-top: 39px;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
</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="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.stripe {
|
||||
background-color: green;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</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="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.first, .second {
|
||||
width: 80px;
|
||||
background-color: green;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.second {
|
||||
height: 35px;
|
||||
}
|
||||
</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="first"></div>
|
||||
<div class="second"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.flex {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.region {
|
||||
height: 150px;
|
||||
width: 200px;
|
||||
background-color: gray;
|
||||
}
|
||||
</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="region">
|
||||
<div class="flex">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: fixed sized region inside an auto height flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
.region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
background-color: gray;
|
||||
}
|
||||
</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">
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.stripe {
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
margin-bottom: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see two horizontal green stripes on the same horizontal line.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a single green stripe.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="content">
|
||||
XXXXXXXXXX
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: flowing flexbox elements in region</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<meta name="assert" content="Test that flex containers are flowed inside a namedflow.">
|
||||
<link rel="match" href="reference/regions-flexbox-001-ref.html">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
flow-into: flow;
|
||||
}
|
||||
|
||||
.region {
|
||||
height: 150px;
|
||||
width: 200px;
|
||||
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">
|
||||
</div>
|
||||
<div class="region">
|
||||
<p class="red"> </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: flowing auto-height flexbox elements in region</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test that flex containers with auto height are flowed inside a namedflow.">
|
||||
<link rel="match" href="reference/regions-flexbox-001-ref.html">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: flow;
|
||||
}
|
||||
|
||||
.region {
|
||||
height: 150px;
|
||||
width: 200px;
|
||||
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"> </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: fixed sized region inside a fixed sized flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test that content is flowed in a region placed inside a flexbox.">
|
||||
<link rel="match" href="reference/regions-flexbox-001-ref.html">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: flow;
|
||||
}
|
||||
.region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flow-from: flow;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a green square inside a gray square positioned at its top left corner.</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"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: fixed sized region inside an auto height flexbox</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test that content is flowed in a region placed inside a flexbox with auto-height.">
|
||||
<link rel="match" href="reference/regions-flexbox-002-ref.html">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: flow;
|
||||
}
|
||||
.region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
flow-from: flow;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.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="content">
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="region">
|
||||
<p class="red"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: row flex container fragmentation</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that a flex container with row flow is split between regions.">
|
||||
<link rel="match" href="reference/row-flexbox-break-ref.html">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flow-into: flow;
|
||||
}
|
||||
|
||||
.region {
|
||||
flow-from: flow;
|
||||
height: 40px;
|
||||
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 on the same horizontal line.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="flex">
|
||||
<div class="item">XX<br>XX<br>XX<br>XX<br></div>
|
||||
<div class="item">XX<br>XX<br>XX<br>XX<br></div>
|
||||
</div>
|
||||
<div class="region"><p class="red"> </p></div>
|
||||
<div class="region"><p class="red"> </p></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions: collapsed region flex items</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#visibility-collapse">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that the flexbox collapsed property works on flex items that are
|
||||
regions. The collapsed region item should not contribute to the flex container's width.">
|
||||
<link rel="match" href="reference/visibility-regions-in-flexbox-ref.html">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: flow;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#r2 {
|
||||
visibility: collapse;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a single green stripe.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="content">
|
||||
XXXXX<br><div class="break"></div>
|
||||
XXXXX<div class="break"></div>
|
||||
XXXXX<br>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="region"><p class="red"> </p></div>
|
||||
<div class="region" id="r2"></div>
|
||||
<div class="region"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue