mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision 90a1381e3736eca4700c1b08fee8f313fea20593
This commit is contained in:
WPT Sync Bot
parent
b4f48c67f8
commit
c5424d579d
937 changed files with 4440 additions and 6240 deletions
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.tealBlock {
|
||||
background: teal;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items">
|
||||
<link rel="match" href="flexbox-abspos-child-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: purple;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.absPos {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
}
|
||||
.testMinWidth {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
}
|
||||
.testMaxWidth {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
max-width: 20px;
|
||||
}
|
||||
.testMinHeight {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
min-height: 20px;
|
||||
}
|
||||
.testMaxHeight {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
max-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><div class="absPos testMinWidth"></div></div>
|
||||
<div class="flexContainer"><div class="absPos testMaxWidth"></div></div>
|
||||
<div class="flexContainer"><div class="absPos testMinHeight"></div></div>
|
||||
<div class="flexContainer"><div class="absPos testMaxHeight"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items">
|
||||
<link rel="match" href="flexbox-abspos-child-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: purple;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.absPos {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
}
|
||||
.testMinWidth {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
}
|
||||
.testMaxWidth {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
max-width: 20px;
|
||||
}
|
||||
.testMinHeight {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
min-height: 20px;
|
||||
}
|
||||
.testMaxHeight {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
max-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer"><div class="absPos testMinWidth"></div></div>
|
||||
<div class="flexContainer"><div class="absPos testMaxWidth"></div></div>
|
||||
<div class="flexContainer"><div class="absPos testMinHeight"></div></div>
|
||||
<div class="flexContainer"><div class="absPos testMaxHeight"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.tealBlock {
|
||||
background: teal;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.purpleBlock {
|
||||
background: purple;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="purpleBlock"></div>
|
||||
<div class="purpleBlock"></div>
|
||||
<div class="purpleBlock"></div>
|
||||
<div class="purpleBlock"></div>
|
||||
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Test: Test that "flex-basis" doesn't affect layout of abspos flex child
|
||||
</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items">
|
||||
<link rel="match" href="flexbox-abspos-child-002-ref.html">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: purple;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.flex > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 10px;
|
||||
}
|
||||
.sized {
|
||||
width: 10px;
|
||||
}
|
||||
.implied {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- In all cases below, flex-basis should have no effect on layout (because
|
||||
it's on an element that is abspos and hence not a flex item). -->
|
||||
|
||||
<!-- Abspos child has auto width (which should end up 0): -->
|
||||
<div class="flex"><div style="flex-basis: 2px"></div></div>
|
||||
<div class="flex"><div style="flex-basis: 100px"></div></div>
|
||||
<div class="flex"><div style="flex-basis: 80%"></div></div>
|
||||
<div class="flex"><div style="flex-basis: content"></div></div>
|
||||
|
||||
<!-- Abspos child has explicit 10px width: -->
|
||||
<div class="flex"><div class="sized" style="flex-basis: 2px"></div></div>
|
||||
<div class="flex"><div class="sized" style="flex-basis: 100px"></div></div>
|
||||
<div class="flex"><div class="sized" style="flex-basis: 80%"></div></div>
|
||||
<div class="flex"><div class="sized" style="flex-basis: content"></div></div>
|
||||
|
||||
<!-- Abspos child has implicit 10px width (implied by auto width and
|
||||
constrained left/right properties): -->
|
||||
<div class="flex"><div class="implied" style="flex-basis: 2px"></div></div>
|
||||
<div class="flex"><div class="implied" style="flex-basis: 100px"></div></div>
|
||||
<div class="flex"><div class="implied" style="flex-basis: 80%"></div></div>
|
||||
<div class="flex"><div class="implied" style="flex-basis: content"></div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
|
||||
.content {
|
||||
margin-top: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="content"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Flexbox nested containers with align-items: center and flexible items</title>
|
||||
<link rel="match" href="flexbox-align-items-center-nested-001-ref.html">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container-0 {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-1 {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container-2 {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="container-0">
|
||||
<div class="container-1">
|
||||
<div class="container-2">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for behavior of the 'baseline' value for align-items and
|
||||
align-self.
|
||||
|
||||
NOTE: For multi-line 'display: block' elements in the testcase (and inline
|
||||
content that gets wrapped in an anonymous block), we add an inline-table
|
||||
wrapper here in the reference case, so that we get first-line baseline
|
||||
alignment instead of the last-line baseline-alignment that an inline-block
|
||||
would give us.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: block;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
}
|
||||
|
||||
div { display: inline-block; }
|
||||
table { display: inline-table; }
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font: 24px sans-serif;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.super {
|
||||
vertical-align: super;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sub {
|
||||
vertical-align: sub;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
.aqua { background: aqua; }
|
||||
.tan { background: tan; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="lime">blk_1line</div
|
||||
><table cellspacing="0" cellpadding="0"
|
||||
class="yellow">blk<br/>2lines</table
|
||||
><div class="orange"><span class="super">super</span></div
|
||||
><div class="pink"><span class="sub">sub</span></div
|
||||
><table cellspacing="0" cellpadding="0"
|
||||
class="aqua big">big<br/>text<br/>3lines</table
|
||||
><table class="tan" cellspacing="0" cellpadding="0">
|
||||
<i>ital<br/>ic</i>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="lime">blk_1line</div
|
||||
><div class="yellow">blk<br/>2lines</div
|
||||
><div class="orange"><span class="super">super</span></div
|
||||
><div class="pink"><span class="sub">sub</span></div
|
||||
><div class="aqua big">big<br/>text<br/>3lines</div
|
||||
><div class="tan"><i>ital<br/>ic</i></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for behavior of the 'baseline' value for align-items (and
|
||||
align-self, implicitly). This test baseline-aligns various types of
|
||||
content, and the flexbox's vertical size depends on the aggregate
|
||||
post-alignment height of its children.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self'</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||
<link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
}
|
||||
.base {
|
||||
align-items: baseline;
|
||||
}
|
||||
.lastbase {
|
||||
align-items: last baseline;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font: 24px sans-serif;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.super {
|
||||
vertical-align: super;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sub {
|
||||
vertical-align: sub;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
.aqua { background: aqua; }
|
||||
.tan { background: tan; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox base">
|
||||
<div class="lime">blk_1line</div>
|
||||
<div class="yellow">blk<br/>2lines</div>
|
||||
<div class="orange"><span class="super">super</span></div>
|
||||
<div class="pink"><span class="sub">sub</span></div>
|
||||
<div class="aqua big">big<br/>text<br/>3lines</div>
|
||||
<i class="tan">ital<br/>ic</i>
|
||||
</div>
|
||||
<div class="flexbox lastbase">
|
||||
<div class="lime">blk_1line</div>
|
||||
<div class="yellow">blk<br/>2lines</div>
|
||||
<div class="orange"><span class="super">super</span></div>
|
||||
<div class="pink"><span class="sub">sub</span></div>
|
||||
<div class="aqua big">big<br/>text<br/>3lines</div>
|
||||
<i class="tan">ital<br/>ic</i>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for behavior of the 'baseline' value for align-items (and
|
||||
align-self, implicitly). This test baseline-aligns various types of
|
||||
content, and the flexbox's vertical size depends on the aggregate
|
||||
post-alignment height of its children. This test also uses
|
||||
"flex-wrap: wrap-reverse" to make the cross-axis bottom-to-top instead
|
||||
of top-to-bottom.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||
<link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
}
|
||||
.base {
|
||||
align-items: baseline;
|
||||
}
|
||||
.lastbase {
|
||||
align-items: last baseline;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font: 24px sans-serif;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.super {
|
||||
vertical-align: super;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sub {
|
||||
vertical-align: sub;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
.aqua { background: aqua; }
|
||||
.tan { background: tan; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox base">
|
||||
<div class="lime">blk_1line</div>
|
||||
<div class="yellow">blk<br/>2lines</div>
|
||||
<div class="orange"><span class="super">super</span></div>
|
||||
<div class="pink"><span class="sub">sub</span></div>
|
||||
<div class="aqua big">big<br/>text<br/>3lines</div>
|
||||
<i class="tan">ital<br/>ic</i>
|
||||
</div>
|
||||
<div class="flexbox lastbase">
|
||||
<div class="lime">blk_1line</div>
|
||||
<div class="yellow">blk<br/>2lines</div>
|
||||
<div class="orange"><span class="super">super</span></div>
|
||||
<div class="pink"><span class="sub">sub</span></div>
|
||||
<div class="aqua big">big<br/>text<br/>3lines</div>
|
||||
<i class="tan">ital<br/>ic</i>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid gray;
|
||||
margin: 5px; /* just for visual separation */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ZEROTH ROW: NO MARGINS -->
|
||||
<!-- No margins on flex item: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
|
||||
<br style="clear: both"/>
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: -4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large (pushing us out of container): -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 25px">a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
|
||||
<br style="clear: both"/>
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how a baseline-aligned flex item's position is impacted by
|
||||
cross-axis margins, in a fixed-size flex container.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||
<link rel="match" href="flexbox-align-self-baseline-horiz-002-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid gray;
|
||||
margin: 5px; /* just for visual separation */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
height: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ZEROTH ROW: NO MARGINS -->
|
||||
<!-- No margins on flex item: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
|
||||
<br style="clear: both"/>
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: auto">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: -4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large (pushing us out of container): -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 25px">a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
|
||||
<br style="clear: both"/>
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-bottom: auto">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-bottom: -4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-bottom: 4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-bottom: 25px">a</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid gray;
|
||||
margin: 5px; /* just for visual separation */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ZEROTH ROW: NO MARGINS -->
|
||||
<!-- No margins on flex item: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
|
||||
<br style="clear: both"/>
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large (pushing us out of container): -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
|
||||
<br style="clear: both"/>
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 22px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 14px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: -7px">a</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how a baseline-aligned flex item's position is impacted by
|
||||
cross-axis margins, in a fixed-size flex container with the cross axis
|
||||
reversed via "flex-wrap: wrap-reverse".
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||
<link rel="match" href="flexbox-align-self-baseline-horiz-003-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap-reverse; /* Just to flip cross-axis */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid gray;
|
||||
margin: 5px; /* just for visual separation */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
height: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ZEROTH ROW: NO MARGINS -->
|
||||
<!-- No margins on flex item: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
|
||||
<br style="clear: both"/>
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: auto">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: -4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large (pushing us out of container): -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 25px">a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
|
||||
<br style="clear: both"/>
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-bottom: auto">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-bottom: -4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-bottom: 4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-bottom: 25px">a</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for behavior of the 'baseline' value for align-items and
|
||||
align-self, in a multi-line flex container.
|
||||
|
||||
This reference case just consists of three single-line flex containers,
|
||||
to match the testcase's one flex container with three flex lines.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
width: 28px;
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.big { font: 24px sans-serif; }
|
||||
.medium { font: 14px sans-serif; }
|
||||
.small { font: 8px sans-serif; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<!-- First flex line: Just 3 different sizes of text -->
|
||||
<div class="big">a</div>
|
||||
<div class="small">b</div>
|
||||
<div class="medium">c</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<!-- Second flex line: different margin/padding amounts on each item,
|
||||
and one non-baseline-aligned item.-->
|
||||
<div class="medium" style="padding-top: 10px">d</div>
|
||||
<div class="medium" style="margin-bottom: 8px">e</div>
|
||||
<div class="medium" style="align-self: stretch">f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<!-- Third flex line: other margin/padding amounts on each item -->
|
||||
<div class="small" style="margin-top: 20px">g</div>
|
||||
<div class="big">h</div>
|
||||
<div class="medium" style="padding-bottom: 6px">i</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for behavior of the 'baseline' value for align-items (and
|
||||
align-self, implicitly), in a multi-line flex container.
|
||||
This test baseline-aligns variously-sized flex items, and the container's
|
||||
vertical size depends on the aggregate post-alignment height of its items.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||
<link rel="match" href="flexbox-align-self-baseline-horiz-004-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
width: 28px; /* 3 items per Flex Line */
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.big { font: 24px sans-serif; }
|
||||
.medium { font: 14px sans-serif; }
|
||||
.small { font: 8px sans-serif; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<!-- First flex line: Just 3 different sizes of text -->
|
||||
<div class="big">a</div>
|
||||
<div class="small">b</div>
|
||||
<div class="medium">c</div>
|
||||
|
||||
<!-- Second flex line: different margin/padding amounts on each item,
|
||||
and one non-baseline-aligned item.-->
|
||||
<div class="medium" style="padding-top: 10px">d</div>
|
||||
<div class="medium" style="margin-bottom: 8px">e</div>
|
||||
<div class="medium" style="align-self: stretch">f</div>
|
||||
|
||||
<!-- Third flex line: other margin/padding amounts on each item -->
|
||||
<div class="small" style="margin-top: 20px">g</div>
|
||||
<div class="big">h</div>
|
||||
<div class="medium" style="padding-bottom: 6px">i</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for behavior of the 'baseline' value for align-items and
|
||||
align-self, in a multi-line flex container.
|
||||
|
||||
This reference case just consists of three single-line flex containers,
|
||||
to match the testcase's one flex container with three flex lines.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
width: 28px;
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.big { font: 24px sans-serif; }
|
||||
.medium { font: 14px sans-serif; }
|
||||
.small { font: 8px sans-serif; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Note: The lines are reversed here with respect to the testcase,
|
||||
due to the testcase's "wrap-reverse". -->
|
||||
<div class="flexbox">
|
||||
<!-- Third flex line: other margin/padding amounts on each item -->
|
||||
<div class="small" style="margin-top: 20px">g</div>
|
||||
<div class="big">h</div>
|
||||
<div class="medium" style="padding-bottom: 6px">i</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<!-- Second flex line: different margin/padding amounts on each item,
|
||||
and one non-baseline-aligned item.-->
|
||||
<div class="medium" style="padding-top: 10px">d</div>
|
||||
<div class="medium" style="margin-bottom: 8px">e</div>
|
||||
<div class="medium" style="align-self: stretch">f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<!-- First flex line: Just 3 different sizes of text -->
|
||||
<div class="big">a</div>
|
||||
<div class="small">b</div>
|
||||
<div class="medium">c</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for behavior of the 'baseline' value for align-items (and
|
||||
align-self, implicitly), in a wrap-reverse multi-line flex container.
|
||||
This test baseline-aligns variously-sized flex items, and the container's
|
||||
vertical size depends on the aggregate post-alignment height of its items.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||
<link rel="match" href="flexbox-align-self-baseline-horiz-005-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
align-items: baseline;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
width: 28px; /* 3 items per Flex Line */
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.big { font: 24px sans-serif; }
|
||||
.medium { font: 14px sans-serif; }
|
||||
.small { font: 8px sans-serif; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<!-- First flex line: Just 3 different sizes of text -->
|
||||
<div class="big">a</div>
|
||||
<div class="small">b</div>
|
||||
<div class="medium">c</div>
|
||||
|
||||
<!-- Second flex line: different margin/padding amounts on each item,
|
||||
and one non-baseline-aligned item.-->
|
||||
<div class="medium" style="padding-top: 10px">d</div>
|
||||
<div class="medium" style="margin-bottom: 8px">e</div>
|
||||
<div class="medium" style="align-self: stretch">f</div>
|
||||
|
||||
<!-- Third flex line: other margin/padding amounts on each item -->
|
||||
<div class="small" style="margin-top: 20px">g</div>
|
||||
<div class="big">h</div>
|
||||
<div class="medium" style="padding-bottom: 6px">i</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for behavior of the 'baseline' value for align-items and
|
||||
align-self when tested against content with an orthogonal writing-mode.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.ortho { writing-mode: vertical-rl;
|
||||
width: 17px;
|
||||
height: 40px;
|
||||
float: left; }
|
||||
.offset { margin-top: 10px;
|
||||
margin-bottom: 3px; }
|
||||
|
||||
.start { align-self: flex-start; }
|
||||
.end { align-self: flex-end; }
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="lime ortho start">ortho</div
|
||||
><div class="yellow offset start">one line</div
|
||||
><div class="orange offset start">two<br/>lines</div
|
||||
><div class="pink offset start">offset</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="lime ortho end">ortho</div
|
||||
><div class="yellow offset end">one line</div
|
||||
><div class="orange offset end">two<br/>lines</div
|
||||
><div class="pink offset end">offset</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for behavior of the 'baseline' value for align-items (and
|
||||
align-self, implicitly). This test baseline-aligns various types of
|
||||
content against content that is exempt from alignment due to an
|
||||
orthognal writing-mode.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||
<link rel="match" href="flexbox-align-self-baseline-horiz-006-ref.xhtml"/>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.base { align-items: baseline; }
|
||||
.lastbase { align-items: last baseline; }
|
||||
|
||||
.ortho { writing-mode: vertical-rl;
|
||||
width: 17px;
|
||||
height: 40px; }
|
||||
.offset { margin-top: 10px;
|
||||
margin-bottom: 3px; }
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container base">
|
||||
<div class="lime ortho">ortho</div>
|
||||
<div class="yellow">one line</div>
|
||||
<div class="orange">two<br/>lines</div>
|
||||
<div class="pink offset">offset</div>
|
||||
</div>
|
||||
<div class="container lastbase">
|
||||
<div class="lime ortho">ortho</div>
|
||||
<div class="yellow">one line</div>
|
||||
<div class="orange">two<br/>lines</div>
|
||||
<div class="pink offset">offset</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for behavior of 'baseline' and 'last baseline' values
|
||||
for align-items and align-self.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.start { align-self: flex-start; }
|
||||
.end { align-self: flex-end; }
|
||||
|
||||
.offset { margin-top: 10px;
|
||||
margin-bottom: 3px; }
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="lime offset start">one line (first)</div
|
||||
><div class="yellow offset end">one line (last)</div
|
||||
><div class="orange offset end">two<br/>lines and offset (last)</div
|
||||
><div class="pink offset start">offset (first)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for behavior of 'baseline' and 'last baseline' values
|
||||
for align-items (and align-self, implicitly). This test confirms
|
||||
non-interference between the 'baseline' and 'last baseline' items.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||
<link rel="match" href="flexbox-align-self-baseline-horiz-007-ref.xhtml"/>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.base { align-self: baseline; }
|
||||
.lastbase { align-self: last baseline; }
|
||||
|
||||
.offset { margin-top: 10px;
|
||||
margin-bottom: 3px; }
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="lime base">one line (first)</div>
|
||||
<div class="yellow lastbase">one line (last)</div>
|
||||
<div class="orange offset lastbase">two<br/>lines and offset (last)</div>
|
||||
<div class="pink offset base">offset (first)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for behavior of 'baseline' and 'last baseline' values
|
||||
for align-items and align-self for sideways writing modes.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<style>
|
||||
.container {
|
||||
float: left;
|
||||
display: flex;
|
||||
writing-mode: sideways-rl;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.reverse { flex-flow: row wrap-reverse; }
|
||||
|
||||
.start { align-self: start; }
|
||||
.end { align-self: end; }
|
||||
|
||||
.offset { margin-right: 10px;
|
||||
margin-left: 3px; }
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
|
||||
.ib { display: inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="lime offset start">one line (first)</div
|
||||
><div class="yellow offset end">one line (last)</div
|
||||
><div class="orange offset end">two<br/>lines and offset (last)</div
|
||||
><div class="pink offset start">offset (first)</div>
|
||||
</div>
|
||||
<div class="container reverse">
|
||||
<div class="lime offset end">one line (first)</div
|
||||
><div class="offset start"><div class="yellow ib">one line (last)</div
|
||||
><div class="orange ib">two<br/>lines and offset (last)</div></div
|
||||
><div class="pink offset end">offset (first)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for behavior of 'baseline' and 'last baseline' values
|
||||
for align-items (and align-self, implicitly) for sideways
|
||||
writing modes. This test confirms non-interference between the
|
||||
'baseline' and 'last baseline' items.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||
<link rel="match" href="flexbox-align-self-baseline-horiz-008-ref.xhtml"/>
|
||||
<style>
|
||||
.container {
|
||||
float: left;
|
||||
display: flex;
|
||||
writing-mode: sideways-rl;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.reverse { flex-flow: row wrap-reverse; }
|
||||
|
||||
.base { align-self: baseline; }
|
||||
.lastbase { align-self: last baseline; }
|
||||
|
||||
.offset { margin-right: 10px;
|
||||
margin-left: 3px; }
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="lime base">one line (first)</div>
|
||||
<div class="yellow lastbase">one line (last)</div>
|
||||
<div class="orange offset lastbase">two<br/>lines and offset (last)</div>
|
||||
<div class="pink offset base">offset (first)</div>
|
||||
</div>
|
||||
<div class="container reverse">
|
||||
<div class="lime base">one line (first)</div>
|
||||
<div class="yellow lastbase">one line (last)</div>
|
||||
<div class="orange offset lastbase">two<br/>lines and offset (last)</div>
|
||||
<div class="pink offset base">offset (first)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
display: inline-flex;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
|
||||
/* Any children whose align-self is 'auto' (or unspecified, or
|
||||
initial) will end up taking this value from us: */
|
||||
align-items: center;
|
||||
|
||||
/* Any children whose align-self is 'inherit' will end up
|
||||
inheriting this value from us: */
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
align-self: auto;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
align-self: initial;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
align-self: inherit;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="auto">auto</div>
|
||||
<div class="unspecified">unspec</div>
|
||||
<div class="initial">initial</div>
|
||||
<div class="inherit">inherit</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using floated divs
|
||||
in place of flex items and using margin-top in place of the align-items /
|
||||
align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
width: 560px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end" style="margin-top: 190px">end</div>
|
||||
<div class="flex-end big" style="margin-top: 100px">a b c d e f</div>
|
||||
<div class="center" style="margin-top: 95px">center</div>
|
||||
<div class="center big" style="margin-top: 50px">a b c d e f</div>
|
||||
<!-- We use inline-blocks inside of a wrapper-block as references for the
|
||||
baseline-aligned flex items, since inline-blocks get
|
||||
baseline-aligned in block layout. We also need to specify the widths
|
||||
manually here since the "flexbox > div" child-selector doesn't
|
||||
handle these guys (since they're grandchildren).
|
||||
-->
|
||||
<div style="width: 80px">
|
||||
<div class="baseline"
|
||||
style="width: 40px; display: inline-block">base</div
|
||||
><div class="baseline big"
|
||||
style="width: 40px; display: inline-block">abc</div>
|
||||
</div>
|
||||
<div class="stretch" style="height: 100%">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="auto" style="margin-top: 95px">auto</div>
|
||||
<div class="unspecified" style="margin-top: 95px">unspec</div>
|
||||
<div class="initial" style="margin-top: 95px">initial</div>
|
||||
<div class="inherit" style="margin-top: 190px">inherit</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the various 'align-self' property values on flex items that are tables</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
display: inline-flex;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
|
||||
/* Any children whose align-self is 'auto' (or unspecified, or
|
||||
initial) will end up taking this value from us: */
|
||||
align-items: center;
|
||||
|
||||
/* Any children whose align-self is 'inherit' will end up
|
||||
inheriting this value from us: */
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
display: table;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
display: block; /* XXXdholbert Hackaround for bug 799725 */
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
align-self: auto;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
align-self: initial;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
align-self: inherit;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="auto">auto</div>
|
||||
<div class="unspecified">unspec</div>
|
||||
<div class="initial">initial</div>
|
||||
<div class="inherit">inherit</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using floated divs
|
||||
in place of flex items and using relative positioning in place of the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flexbox > div { float: left }
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch,
|
||||
.auto, .unspecified, .initial, .inherit, .self-start, .self-end {
|
||||
width: 40px;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
position: relative;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
}
|
||||
.wmvertrev {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end" style="top: 172px">end</div>
|
||||
<div class="flex-end big" style="top: 82px">a b c d e f</div>
|
||||
<div class="center" style="top: 86px">center</div>
|
||||
<div class="center big" style="top: 41px">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<!-- We use inline-blocks inside of a wrapper-block as references for the
|
||||
baseline-aligned flex items, since inline-blocks get
|
||||
baseline-aligned in block layout. We also need to specify the widths
|
||||
manually here since the "flexbox > div" child-selector doesn't
|
||||
handle these guys (since they're grandchildren).
|
||||
-->
|
||||
<div>
|
||||
<div class="baseline"
|
||||
style="display: inline-block">base</div
|
||||
><div class="baseline big"
|
||||
style="display: inline-block">abc</div>
|
||||
</div>
|
||||
<div class="stretch" style="height: 182px">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end wmvertrev">self-end</div>
|
||||
<div class="self-end wmvertrev big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with
|
||||
margin/border/padding values on each item. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container, with margin/padding/border on the items</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-horiz-002-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
display: inline-flex;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
align-self: self-start;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
align-self: self-end;
|
||||
}
|
||||
.wmvertrev {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end wmvertrev">self-end</div>
|
||||
<div class="self-end wmvertrev big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using floated divs
|
||||
in place of flex items and using relative positioning in place of the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
padding: 3px;
|
||||
width: 600px;
|
||||
height: 4px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
}
|
||||
.normal {
|
||||
background: tan;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end" style="position: relative; top: -6px">end</div>
|
||||
<div class="flex-end big" style="position: relative; top: -96px">a b c d e f</div>
|
||||
<div class="center" style="position: relative; top: -3px">center</div>
|
||||
<div class="center big" style="position: relative; top: -48px">a b c d e f</div>
|
||||
<!-- We use inline-blocks inside of a wrapper-block as references for the
|
||||
baseline-aligned flex items, since inline-blocks get
|
||||
baseline-aligned in block layout. We also need to specify the widths
|
||||
manually here since the "flexbox > div" child-selector doesn't
|
||||
handle these guys (since they're grandchildren).
|
||||
-->
|
||||
<div style="width: 80px">
|
||||
<div class="baseline"
|
||||
style="width: 40px; display: inline-block">base</div
|
||||
><div class="baseline big"
|
||||
style="width: 40px; display: inline-block">abc</div>
|
||||
</div>
|
||||
<div class="stretch" style="height: 100%">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="auto" style="height: 100%">auto</div>
|
||||
<div class="unspecified" style="height: 100%">unspec</div>
|
||||
<div class="initial" style="height: 100%">initial</div>
|
||||
<div class="inherit" style="height: 100%">inherit</div>
|
||||
<div class="normal" style="height: 100%">normal</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with the
|
||||
flex container being shorter than its items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-horiz-003-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
padding: 3px;
|
||||
height: 4px;
|
||||
display: inline-flex;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
align-self: auto;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
align-self: initial;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
align-self: inherit;
|
||||
}
|
||||
.normal {
|
||||
background: tan;
|
||||
align-self: normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="auto">auto</div>
|
||||
<div class="unspecified">unspec</div>
|
||||
<div class="initial">initial</div>
|
||||
<div class="inherit">inherit</div>
|
||||
<div class="normal">normal</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using floated divs
|
||||
in place of flex items and using relative positioning in place of the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
padding: 3px;
|
||||
height: 4px;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
font-family: sans-serif;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 120px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flexbox > div { float: left }
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch,
|
||||
.auto, .unspecified, .initial, .inherit {
|
||||
width: 40px;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
position: relative;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end" style="top: -24px">end</div>
|
||||
<div class="flex-end big" style="top: -114px">a b c d e f</div>
|
||||
<div class="center" style="top: -12px">center</div>
|
||||
<div class="center big" style="top: -57px">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<!-- We use inline-blocks inside of a wrapper-block as references for the
|
||||
baseline-aligned flex items, since inline-blocks get
|
||||
baseline-aligned in block layout. We also need to specify the widths
|
||||
manually here since the "flexbox > div" child-selector doesn't
|
||||
handle these guys (since they're grandchildren).
|
||||
-->
|
||||
<div>
|
||||
<div class="baseline"
|
||||
style="display: inline-block">base</div
|
||||
><div class="baseline big"
|
||||
style="display: inline-block">abc</div>
|
||||
</div>
|
||||
<div class="stretch" style="height: 2px">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with the
|
||||
flex container being shorter than its items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items, with margin/padding/border on the items</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-horiz-004-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
padding: 3px;
|
||||
height: 4px;
|
||||
display: inline-flex;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
font-family: sans-serif;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 120px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
min-height: 2px;
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior with auto
|
||||
margins in play. This reference case uses fixed margin-top values
|
||||
in place of the testcase's auto margins. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 140px;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.kidsAutoTop > div { margin-top: 130px; }
|
||||
.kidsAutoTop > div.big { margin-top: 60px; }
|
||||
.kidsAutoBoth > div { margin-top: 65px; }
|
||||
.kidsAutoBoth > div.big { margin-top: 30px; }
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.flexbox > div.big {
|
||||
height: 80px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox kidsAutoTop">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">a b c d e f</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox kidsAutoBottom">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">a b c d e f</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox kidsAutoBoth">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">a b c d e f</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior with auto margins in
|
||||
play (which should negate the effects of align-items / align-self,
|
||||
because there won't be any available space in which to align the item
|
||||
after the auto margins are resolved). -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with auto margins in play, in a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/>
|
||||
<link rel="match" href="flexbox-align-self-horiz-005-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 140px;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.kidsAutoTop > div { margin-top: auto; }
|
||||
.kidsAutoBottom > div { margin-bottom: auto; }
|
||||
.kidsAutoBoth > div { margin: auto 0; }
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.flexbox > div.big {
|
||||
height: 80px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox kidsAutoTop">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">a b c d e f</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox kidsAutoBottom">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">a b c d e f</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox kidsAutoBoth">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">a b c d e f</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- In this reference case, we just have the testcases's text placed directly
|
||||
in the outermost wrapper-block, with a lime background on that wrapper
|
||||
instead of on a flex item.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.fixedWidthWrapper {
|
||||
width: 200px;
|
||||
/* Small enough that 3 characters can _easily_ fit in our width */
|
||||
font-size: 12px;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixedWidthWrapper">
|
||||
A B C
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the sizing of a stretched horizontal flex container in a vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="match" href="flexbox-align-self-stretch-vert-001-ref.html">
|
||||
<meta name="assert" content="If a stretched flex item's main size is influenced by its cross size, and the flex container has a definite cross size, then the item's cross size should be resolved early so that it can be used when determining the item's main size">
|
||||
<meta name="assert" content="https://drafts.csswg.org/css-flexbox/issues-cr-2012#issue-23">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.fixedWidthWrapper {
|
||||
width: 200px;
|
||||
/* Small enough that 3 characters can _easily_ fit in our width */
|
||||
font-size: 12px;
|
||||
}
|
||||
div.vertContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
div.vertItem {
|
||||
background: red;
|
||||
}
|
||||
div.horizContainer {
|
||||
display: flex;
|
||||
}
|
||||
div.horizItem {
|
||||
flex: 1;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixedWidthWrapper">
|
||||
<div class="vertContainer">
|
||||
<div class="vertItem">
|
||||
<div class="horizContainer">
|
||||
<div class="horizItem">A B C</div>
|
||||
<div class="horizItem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- In this reference case, we use floated fixed-sized divs to mimic the
|
||||
testcases's flex items.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.container {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
div.item {
|
||||
width: 48px;
|
||||
height: 15px;
|
||||
float: left;
|
||||
border: 1px dotted blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the sizing of stretched flex items in a vertical multi-line flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="match" href="flexbox-align-self-stretch-vert-002-ref.html">
|
||||
<meta name="assert" content="In a multi-line flex container, flex items should not be stretched (in the cross axis) until after wrapping has been performed.">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.container {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
div.item {
|
||||
/* Tall enough to force wrapping (since parent height is 20px): */
|
||||
min-height: 15px;
|
||||
border: 1px dotted blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: right;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
margin: auto;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: left;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
width: 100%;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
margin: auto;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
margin: auto;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
margin: auto;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
float: right;
|
||||
}
|
||||
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.centerParent > * {
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="centerParent">
|
||||
<div class="auto">auto</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="unspecified">unspec</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="initial">initial</div>
|
||||
</div>
|
||||
<div class="inherit">inherit</div>
|
||||
<!-- Since the last div is floated, the container doesn't include
|
||||
its height by default. So we add some invisible hacky text (of the
|
||||
same font) to make sure our container is tall enough. -->
|
||||
<span style="visibility:hidden">hacky text</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-001-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 10px;
|
||||
|
||||
/* Any children whose align-self is 'auto' (or unspecified, or
|
||||
initial) will end up taking this value from us: */
|
||||
align-items: center;
|
||||
|
||||
/* Any children whose align-self is 'inherit' will end up
|
||||
inheriting this value from us: */
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
align-self: auto;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
align-self: initial;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
align-self: inherit;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="auto">auto</div>
|
||||
<div class="unspecified">unspec</div>
|
||||
<div class="initial">initial</div>
|
||||
<div class="inherit">inherit</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch,
|
||||
.self-start, .self-end {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: right;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: left;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
float: left;
|
||||
text-align: right;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end">self-end</div>
|
||||
<div class="self-end big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with
|
||||
margin/border/padding values on each item. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-002-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
align-self: self-start;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
align-self: self-end;
|
||||
}
|
||||
.dirrtl {
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start dirrtl">self-start</div>
|
||||
<div class="self-start dirrtl big">a b c d e f</div>
|
||||
<div class="self-end dirrtl">self-end</div>
|
||||
<div class="self-end dirrtl big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: right;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. For this to work, the parent has to be at
|
||||
least as wide as the centered content inside of it, so we make it
|
||||
large with a negative margin such that its center aligns with the
|
||||
4px-wide container's center. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin-left: -48px;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: left;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
<div class="centerParent clearFloats">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch clearFloats">stretch</div>
|
||||
<div class="stretch big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with the
|
||||
flex container being skinnier than its items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-003-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
float: left;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: right;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. For this to work, the parent has to be at
|
||||
least as wide as the centered content inside of it, so we make it
|
||||
large with a negative margin such that its center aligns with the
|
||||
4px-wide container's center. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin-left: -48px;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: left;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with the
|
||||
flex container being skinnier than its items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-004-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior in a vertical
|
||||
"direction: rtl" flex container, using blocks in place of flex items and
|
||||
using float and width keywords to emulate the align-items / align-self
|
||||
properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
direction: rtl;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
margin: auto;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
width: 100%;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
margin: auto;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
margin: auto;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
margin: auto;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
float: left;
|
||||
}
|
||||
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.centerParent > * {
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="centerParent">
|
||||
<div class="auto">auto</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="unspecified">unspec</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="initial">initial</div>
|
||||
</div>
|
||||
<div class="inherit">inherit</div>
|
||||
<!-- Since the last div is floated, the container doesn't include
|
||||
its height by default. So we add some invisible hacky text (of the
|
||||
same font) to make sure our container is tall enough. -->
|
||||
<span style="visibility:hidden">hacky text</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with
|
||||
"direction: rtl" to swap the horizontal (cross) axis. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container with 'direction: rtl'</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-rtl-001-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
direction: rtl;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
|
||||
/* Any children whose align-self is 'auto' (or unspecified, or
|
||||
initial) will end up taking this value from us: */
|
||||
align-items: center;
|
||||
|
||||
/* Any children whose align-self is 'inherit' will end up
|
||||
inheriting this value from us: */
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
align-self: auto;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
align-self: initial;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
align-self: inherit;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="auto">auto</div>
|
||||
<div class="unspecified">unspec</div>
|
||||
<div class="initial">initial</div>
|
||||
<div class="inherit">inherit</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior in a vertical
|
||||
"direction: rtl" flex container, using blocks in place of flex items and
|
||||
using float and width keywords to emulate the align-items / align-self
|
||||
properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
float: left;
|
||||
direction: rtl;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: right; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with
|
||||
margin/border/padding values on each, and with "direction: rtl" to swap
|
||||
the horizontal (cross) axis item. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction: rtl'</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-rtl-002-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
direction: rtl;
|
||||
float: left;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior in a vertical
|
||||
"direction: rtl" flex container, using blocks in place of flex items and
|
||||
using float and width keywords to emulate the align-items / align-self
|
||||
properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
font-family: sans-serif;
|
||||
direction: rtl;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. For this to work, the parent has to be at
|
||||
least as wide as the centered content inside of it, so we make it
|
||||
large with a negative margin such that its center aligns with the
|
||||
4px-wide container's center. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin-right: -48px;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: right; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
<div class="centerParent clearFloats">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch clearFloats">stretch</div>
|
||||
<div class="stretch big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with the
|
||||
flex container being skinnier than its items, and with "direction: rtl" to
|
||||
swap the horizontal (cross) axis. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items and with 'direction: rtl'</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-rtl-003-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
direction: rtl;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior in a vertical
|
||||
"direction: rtl" flex container, using blocks in place of flex items and
|
||||
using float and width keywords to emulate the align-items / align-self
|
||||
properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
float: left;
|
||||
direction: rtl;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. For this to work, the parent has to be at
|
||||
least as wide as the centered content inside of it, so we make it
|
||||
large with a negative margin such that its center aligns with the
|
||||
4px-wide container's center. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin-right: -48px;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: right; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b</div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with the
|
||||
flex container being skinnier than its items, and with "direction: rtl" to
|
||||
swap the horizontal (cross) axis. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl'</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-rtl-004-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
direction: rtl;
|
||||
float: left;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- (NOTE: this test has the "stretch" divs and the "flex-end" divs
|
||||
swapped in the ordering, with respect to the other
|
||||
flexbox-align-self-* testcases. That's because "stretch" and
|
||||
"flex-end" overflow in opposite directions, and in RTL mode (with 2
|
||||
flex containers side by side), they overflow *at* each other and
|
||||
overlap. If we swap them, they float away from each other and we can
|
||||
still see them.) -->
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch, .self-start, .self-end {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: right; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
float: right;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
float: left;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end">self-end</div>
|
||||
<div class="self-end big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with
|
||||
margin/border/padding values on each item. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction:rtl'</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-rtl-005-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
align-self: self-start;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
align-self: self-end;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start dirrtl">self-start</div>
|
||||
<div class="self-start dirrtl big">a b c d e f</div>
|
||||
<div class="self-end dirrtl">self-end</div>
|
||||
<div class="self-end dirrtl big nowidth">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
a a<div style="display:inline-block">b b</div>x x
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
|
||||
<link rel="match" href="flexbox-anonymous-items-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer">
|
||||
a a
|
||||
<div style="order: 1">x x</div>
|
||||
b b
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
unaligned children taken out of baseline-alignment with
|
||||
"vertical-align:top".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
background: lightblue;
|
||||
vertical-align: top;
|
||||
}
|
||||
.hugeAndUnaligned {
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.flexContainer > * { display: inline; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">b</div
|
||||
><div>c</div
|
||||
><div class="hugeAndUnaligned">d</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">e</div
|
||||
><div>f</div
|
||||
><div class="smallFont">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">h</div
|
||||
><div class="smallFont">i</div
|
||||
><div>j</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a horizontal flex container
|
||||
with several flex items, some of which have "align-self:baseline". The
|
||||
spec says this about this case:
|
||||
If any of the flex items on the flex container's first line
|
||||
participate in baseline alignment, the flex container's
|
||||
main-axis baseline is the baseline of those flex items.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal flex container with baseline-aligned flex items</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-align-self-baseline-horiz-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
background: lightblue;
|
||||
align-items: baseline;
|
||||
}
|
||||
.hugeAndUnaligned {
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
/* This one flex item won't be baseline-aligned, so it won't impact
|
||||
the flex container's positioning */
|
||||
align-self: stretch;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">b</div>
|
||||
<div>c</div>
|
||||
<div class="hugeAndUnaligned">d</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">e</div>
|
||||
<div>f</div>
|
||||
<div class="smallFont">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">h</div>
|
||||
<div class="smallFont">i</div>
|
||||
<div>j</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
unaligned children taken out of baseline-alignment with
|
||||
"vertical-align:top".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font: 20px Ahem;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
background: lightblue;
|
||||
}
|
||||
.hugeAndUnaligned {
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
/* Baseline is 0.8em = 8px from top */
|
||||
}
|
||||
* { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: inline-block; margin-top: 12px">a</div>
|
||||
<div class="flexContainer" style="margin-top: 20px">
|
||||
<div class="smallFont">b</div
|
||||
><div>c</div
|
||||
><div class="hugeAndUnaligned">d</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">e</div
|
||||
><div>f</div
|
||||
><div class="smallFont">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">h</div
|
||||
><div class="smallFont">i</div
|
||||
><div>j</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a vertical flex container with
|
||||
several flex items, some of which have "align-self:baseline". Since we're
|
||||
vertical and the items' baselines are horizontal, they do not end up
|
||||
participating in baseline alignment, so their "align-self:baseline"
|
||||
computed style doesn't have any special effect on the container's
|
||||
baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a vertical flex container with baseline-aligned flex items</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-align-self-baseline-vert-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font: 20px Ahem;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
background: lightblue;
|
||||
align-items: baseline;
|
||||
}
|
||||
.hugeAndUnaligned {
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
/* This one flex item won't be baseline-aligned, so it won't impact
|
||||
the flex container's positioning */
|
||||
align-self: stretch;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
/* Baseline is 0.8em = 8px from top */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">b</div>
|
||||
<div>c</div>
|
||||
<div class="hugeAndUnaligned">d</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">e</div>
|
||||
<div>f</div>
|
||||
<div class="smallFont">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">h</div>
|
||||
<div class="smallFont">i</div>
|
||||
<div>j</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- In this reference case, we have inline-blocks instead of inline
|
||||
flex containers. Otherwise it's the same. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
body {
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: purple;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
A
|
||||
<div class="flexContainer"></div>
|
||||
<div class="flexContainer" style="padding-bottom: 20px"></div>
|
||||
<div class="flexContainer" style="padding: 10px"></div>
|
||||
<div class="flexContainer" style="border-width: 3px"></div>
|
||||
<div class="flexContainer" style="border-bottom-width: 4px"></div>
|
||||
<div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a horizontal flex container
|
||||
with no flex items. This is the main-axis baseline. The spec says this
|
||||
about this case:
|
||||
https://drafts.csswg.org/css-flexbox/#flex-baselines
|
||||
"Otherwise, the flex container has no first/last main-axis baseline set,
|
||||
and one is synthesized if needed according to the rules of its alignment context."
|
||||
|
||||
The alignment context in this case is inline-level so the margin-box
|
||||
should be used to synthesize the baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of an empty horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-empty-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
body {
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: purple;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
A
|
||||
<div class="flexContainer"></div>
|
||||
<div class="flexContainer" style="padding-bottom: 20px"></div>
|
||||
<div class="flexContainer" style="padding: 10px"></div>
|
||||
<div class="flexContainer" style="border-width: 3px"></div>
|
||||
<div class="flexContainer" style="border-bottom-width: 4px"></div>
|
||||
<div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a vertical flex container
|
||||
with no flex items. This is the cross-axis baseline. The spec says this
|
||||
about this case:
|
||||
https://drafts.csswg.org/css-flexbox/#flex-baselines
|
||||
"Otherwise, the flex container has no first/last main-axis baseline set,
|
||||
and one is synthesized if needed according to the rules of its alignment context."
|
||||
|
||||
The alignment context in this case is inline-level so the margin-box
|
||||
should be used to synthesize the baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of an empty vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-empty-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
body {
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: purple;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
A
|
||||
<div class="flexContainer"></div>
|
||||
<div class="flexContainer" style="padding-bottom: 20px"></div>
|
||||
<div class="flexContainer" style="padding: 10px"></div>
|
||||
<div class="flexContainer" style="border-width: 3px"></div>
|
||||
<div class="flexContainer" style="border-bottom-width: 4px"></div>
|
||||
<div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
baseline-aligned items aligned using specific font-size / line-heights,
|
||||
and with unaligned children taken out of baseline-alignment using
|
||||
"vertical-align:top".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * { display: inline; }
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.unaligned { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer smallFont">
|
||||
<div class="smallFont">b</div
|
||||
><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">d</div
|
||||
><div class="smallFont unaligned">e</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a horizontal flex container
|
||||
with several flex items, none of which have "align-self:baseline". The
|
||||
spec says this about this case:
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-item-horiz-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
background: lightblue;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">b</div
|
||||
><div class="bigFont">c</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">d</div
|
||||
><div class="smallFont">e</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a horizontal flex container
|
||||
with several "order"-reordered flex items, none of which have
|
||||
"align-self:baseline". The spec says this about this case:
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-item-horiz-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
background: lightblue;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.smallOrder { order: -1 }
|
||||
.bigOrder { order: 30 }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">c</div
|
||||
><div class="smallFont smallOrder">b</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont bigOrder">e</div
|
||||
><div class="bigFont">d</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
inline-blocks manually positioned with "vertical-align:top" and
|
||||
margin-top.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font: 20px Ahem;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
background: lightblue;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
/* Baseline is 0.8em = 8px from top */
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
* { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer" style="margin-top: 8px">
|
||||
<div class="smallFont">b</div
|
||||
><div class="bigFont">c</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">d</div
|
||||
><div class="smallFont">e</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a vertical flex container
|
||||
with several flex items, none of which have "align-self:baseline". The
|
||||
spec says this about this case:
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-item-vert-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font: 20px Ahem;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
background: lightblue;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
/* Baseline is 0.8em = 8px from top */
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">b</div
|
||||
><div class="bigFont">c</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">d</div
|
||||
><div class="smallFont">e</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a vertical flex container
|
||||
with several "order"-reordered flex items, none of which have
|
||||
"align-self:baseline". The spec says this about this case:
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-item-vert-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font: 20px Ahem;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
background: lightblue;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
/* Baseline is 0.8em = 8px from top */
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
.smallOrder { order: -1 }
|
||||
.bigOrder { order: 30 }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">c</div
|
||||
><div class="smallFont smallOrder">b</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont bigOrder">e</div
|
||||
><div class="bigFont">d</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
baseline-aligned items aligned using specific font-size / line-heights,
|
||||
and with unaligned children taken out of baseline-alignment using
|
||||
"vertical-align:top".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.unaligned { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer medFont">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont unaligned">g</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer smallFont">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont unaligned">k</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a horizontal flex container
|
||||
with several flex lines.
|
||||
The spec says this about this case:
|
||||
[Given that the first line has no baseline-aligned items:]
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-horiz-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* We'll make the second flex line not paint anything, so that the
|
||||
reference case doesn't need to bother matching it. */
|
||||
.flexContainer > *:nth-child(3),
|
||||
.flexContainer > *:nth-child(4) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont">c</div
|
||||
><div class="bigFont">d</div
|
||||
><div class="medFont">e</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont">g</div
|
||||
><div class="medFont">h</div
|
||||
><div class="bigFont">i</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont">k</div
|
||||
><div class="bigFont" style="align-self: baseline">l</div
|
||||
><div class="medFont" style="align-self: baseline">m</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
baseline-aligned items aligned using specific font-size / line-heights,
|
||||
and with unaligned children taken out of baseline-alignment using
|
||||
"vertical-align:top".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
/* Split testcase's 40px height into 20px of padding-top and 20px of
|
||||
height, to set aside space for the testcase's (invisible) second line
|
||||
(which is above the first line, since this is wrap-reverse) */
|
||||
height: 20px;
|
||||
padding-top: 20px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.unaligned { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer medFont">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont unaligned">g</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer smallFont">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont unaligned">k</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a horizontal flex container
|
||||
with several flex lines (wrapping in the reverse direction).
|
||||
The spec says this about this case:
|
||||
[Given that the first line has no baseline-aligned items:]
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-horiz-002-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* We'll make the second flex line not paint anything, so that the
|
||||
reference case doesn't need to bother matching it. */
|
||||
.flexContainer > *:nth-child(3),
|
||||
.flexContainer > *:nth-child(4) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont">c</div
|
||||
><div class="bigFont">d</div
|
||||
><div class="medFont">e</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont">g</div
|
||||
><div class="medFont">h</div
|
||||
><div class="bigFont">i</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont">k</div
|
||||
><div class="bigFont" style="align-self: baseline">l</div
|
||||
><div class="medFont" style="align-self: baseline">m</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* We use an outer vertical flex container, wrapping two single-line
|
||||
flex containers, to match the testcase's multi-line flex container. */
|
||||
.outerFlexContainer {
|
||||
height: 100px;
|
||||
background: lightgray;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* to mimic testcase's "align-content:center" */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex container with second item in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div>
|
||||
<div class="bigFont" style="align-self: baseline">c</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">d</div>
|
||||
<div class="smallFont">e</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with both items in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont" style="align-self: baseline">f</div>
|
||||
<div class="medFont" style="align-self: baseline">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">h</div>
|
||||
<div class="smallFont">i</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with all items baseline-aligned
|
||||
(only those on first line should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer" style="align-items: baseline">
|
||||
<div class="bigFont">j</div>
|
||||
<div class="smallFont" style="padding-bottom: 20px">k</div>
|
||||
</div>
|
||||
<div class="flexContainer" style="align-items: baseline">
|
||||
<div class="smallFont">l</div>
|
||||
<div class="medFont">m</div>
|
||||
</div>
|
||||
</div>
|
||||
n
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal multi-line (wrap) flex container with baseline-aligned items on first line</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-horiz-003-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
background: lightgray;
|
||||
|
||||
/* Use "align-content", to test that packing space is considered when
|
||||
getting container's baseline from its first FlexLine:*/
|
||||
align-content: center;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex container with second item in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div>
|
||||
<div class="bigFont" style="align-self: baseline">c</div>
|
||||
<div class="medFont">d</div>
|
||||
<div class="smallFont">e</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with both items in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont" style="align-self: baseline">f</div>
|
||||
<div class="medFont" style="align-self: baseline">g</div>
|
||||
<div class="bigFont">h</div>
|
||||
<div class="smallFont">i</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with all items baseline-aligned, and with some padding
|
||||
(only those on first line should set the container's baseline) -->
|
||||
<div class="flexContainer" style="align-items: baseline">
|
||||
<div class="bigFont">j</div>
|
||||
<div class="smallFont" style="padding-bottom: 20px">k</div>
|
||||
<div class="smallFont">l</div>
|
||||
<div class="medFont">m</div>
|
||||
</div>
|
||||
n
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* We use an outer vertical flex container, wrapping two single-line
|
||||
flex containers, to match the testcase's multi-line flex container. */
|
||||
.outerFlexContainer {
|
||||
height: 100px;
|
||||
background: lightgray;
|
||||
display: inline-flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center; /* to mimic testcase's "align-content:center" */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex container with second item in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div>
|
||||
<div class="bigFont" style="align-self: baseline">c</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">d</div>
|
||||
<div class="smallFont">e</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with both items in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont" style="align-self: baseline">f</div>
|
||||
<div class="medFont" style="align-self: baseline">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">h</div>
|
||||
<div class="smallFont">i</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with all items baseline-aligned
|
||||
(only those on first line should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer" style="align-items: baseline">
|
||||
<div class="bigFont">j</div>
|
||||
<div class="smallFont" style="padding-bottom: 20px">k</div>
|
||||
</div>
|
||||
<div class="flexContainer" style="align-items: baseline">
|
||||
<div class="smallFont">l</div>
|
||||
<div class="medFont">m</div>
|
||||
</div>
|
||||
</div>
|
||||
n
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal multi-line (wrap-reverse) flex container with baseline-aligned items on first line</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-horiz-004-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
background: lightgray;
|
||||
|
||||
/* Use "align-content", to test that packing space is considered when
|
||||
getting container's baseline from its first FlexLine:*/
|
||||
align-content: center;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex container with second item in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div>
|
||||
<div class="bigFont" style="align-self: baseline">c</div>
|
||||
<div class="medFont">d</div>
|
||||
<div class="smallFont">e</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with both items in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont" style="align-self: baseline">f</div>
|
||||
<div class="medFont" style="align-self: baseline">g</div>
|
||||
<div class="bigFont">h</div>
|
||||
<div class="smallFont">i</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with all items baseline-aligned, and with some padding
|
||||
(only those on first line should set the container's baseline) -->
|
||||
<div class="flexContainer" style="align-items: baseline">
|
||||
<div class="bigFont">j</div>
|
||||
<div class="smallFont" style="padding-bottom: 20px">k</div>
|
||||
<div class="smallFont">l</div>
|
||||
<div class="medFont">m</div>
|
||||
</div>
|
||||
n
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
baseline-aligned items aligned using specific font-size / line-heights,
|
||||
and with unaligned children taken out of baseline-alignment using
|
||||
"float: left".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.unaligned { float: left }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer medFont">
|
||||
<div class="medFont">b</div
|
||||
><br><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">f</div
|
||||
><br><div class="smallFont unaligned">g</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer smallFont">
|
||||
<div class="smallFont">j</div
|
||||
><br><div class="bigFont unaligned">k</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a vertical flex container
|
||||
with several flex lines.
|
||||
The spec says this about this case:
|
||||
[Given that the first line has no baseline-aligned items:]
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-vert-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* We'll make the second flex line not paint anything, so that the
|
||||
reference case doesn't need to bother matching it. */
|
||||
.flexContainer > *:nth-child(3),
|
||||
.flexContainer > *:nth-child(4) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont">c</div
|
||||
><div class="bigFont">d</div
|
||||
><div class="medFont">e</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont">g</div
|
||||
><div class="medFont">h</div
|
||||
><div class="bigFont">i</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont">k</div
|
||||
><div class="bigFont" style="align-self: baseline">l</div
|
||||
><div class="medFont" style="align-self: baseline">m</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
baseline-aligned items aligned using specific font-size / line-heights,
|
||||
and with unaligned children taken out of baseline-alignment using
|
||||
"float: left".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
/* Split testcase's 40px width into 20px of padding-left and 20px of
|
||||
width, to set aside space for the testcase's (invisible) second line
|
||||
(which is to the left of the first line, since this is wrap-reverse)
|
||||
*/
|
||||
width: 20px;
|
||||
padding-left: 20px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.unaligned { float: left }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer medFont">
|
||||
<div class="medFont">b</div
|
||||
><br><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">f</div
|
||||
><br><div class="smallFont unaligned">g</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer smallFont">
|
||||
<div class="smallFont">j</div
|
||||
><br><div class="bigFont unaligned">k</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a vertical flex container
|
||||
with several flex lines (wrapping in the reverse direction).
|
||||
The spec says this about this case:
|
||||
[Given that the first line has no baseline-aligned items:]
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-vert-002-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap-reverse;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* We'll make the second flex line not paint anything, so that the
|
||||
reference case doesn't need to bother matching it. */
|
||||
.flexContainer > *:nth-child(3),
|
||||
.flexContainer > *:nth-child(4) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont">c</div
|
||||
><div class="bigFont">d</div
|
||||
><div class="medFont">e</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont">g</div
|
||||
><div class="medFont">h</div
|
||||
><div class="bigFont">i</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont">k</div
|
||||
><div class="bigFont" style="align-self: baseline">l</div
|
||||
><div class="medFont" style="align-self: baseline">m</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px serif;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: pink;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
A
|
||||
<div class="flexContainer">a</div>
|
||||
<div class="flexContainer" style="padding-bottom: 20px">a</div>
|
||||
<div class="flexContainer" style="padding: 10px">a</div>
|
||||
<div class="flexContainer" style="border-width: 3px">a</div>
|
||||
<div class="flexContainer" style="border-bottom-width: 4px">a</div>
|
||||
<div class="flexContainer" style="padding: 4px">
|
||||
<!-- (An abspos child shouldn't prevent us from getting our baseline from
|
||||
the first flex item, which happens to be the second child.) -->
|
||||
<div class="abs">abs</div>
|
||||
<div style="font: 26px serif">a</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a horizontal flex container
|
||||
with one flex item. This is the main-axis baseline. The spec says this
|
||||
about this case:
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal flex container with one flex item</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-single-item-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px serif;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: pink;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
A
|
||||
<div class="flexContainer">a</div>
|
||||
<div class="flexContainer" style="padding-bottom: 20px">a</div>
|
||||
<div class="flexContainer" style="padding: 10px">a</div>
|
||||
<div class="flexContainer" style="border-width: 3px">a</div>
|
||||
<div class="flexContainer" style="border-bottom-width: 4px">a</div>
|
||||
<div class="flexContainer" style="padding: 4px">
|
||||
<!-- (An abspos child shouldn't prevent us from getting our baseline from
|
||||
the first flex item, which happens to be the second child.) -->
|
||||
<div class="abs">abs</div>
|
||||
<div style="font: 26px serif">a</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a vertical flex container
|
||||
with one flex item. This is the cross-axis baseline. The spec says this
|
||||
about this case:
|
||||
If the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's cross axis, the flex container's cross-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a vertical flex container with one flex item</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-single-item-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px serif;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: pink;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
A
|
||||
<div class="flexContainer">a</div>
|
||||
<div class="flexContainer" style="padding-bottom: 20px">a</div>
|
||||
<div class="flexContainer" style="padding: 10px">a</div>
|
||||
<div class="flexContainer" style="border-width: 3px">a</div>
|
||||
<div class="flexContainer" style="border-bottom-width: 4px">a</div>
|
||||
<div class="flexContainer" style="padding: 4px">
|
||||
<!-- (An abspos child shouldn't prevent us from getting our baseline from
|
||||
the first flex item, which happens to be the second child.) -->
|
||||
<div class="abs">abs</div>
|
||||
<div style="font: 26px serif">a</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
div { height: 100px; }
|
||||
div.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
}
|
||||
div.a {
|
||||
display: inline-block;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
display: inline-block;
|
||||
background: yellow;
|
||||
}
|
||||
div.c {
|
||||
display: inline-block;
|
||||
background: orange;
|
||||
}
|
||||
div.auto {
|
||||
display: inline-block;
|
||||
background: pink;
|
||||
}
|
||||
div.inflex {
|
||||
display: inline-block;
|
||||
background: gray;
|
||||
}
|
||||
div.spacer {
|
||||
height: 15px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="width: 80px"/><div class="b" style="width: 120px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="width: 62.5px"/><div class="c" style="width: 137.5px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="width: 185px"/><div class="auto">
|
||||
<div class="spacer" style="width: 15px"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="width: 76px"/><div class="c" style="width: 124px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="width: 170px"/><div class="auto">
|
||||
<div class="spacer" style="width: 30px"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="width: 45px"/><div class="b" style="width: 50px"
|
||||
/><div class="inflex" style="width: 20px"/><div class="c" style="width: 85px"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with blocks as flex items in a horizontal flex container, with
|
||||
various "flex" values and various combinations of the items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
|
||||
<link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/>
|
||||
<style>
|
||||
div { height: 100px; }
|
||||
div.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
}
|
||||
div.a {
|
||||
flex: 1 0 30px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
flex: 2 0 20px;
|
||||
background: yellow;
|
||||
}
|
||||
div.c {
|
||||
flex: 3 0 40px;
|
||||
background: orange;
|
||||
}
|
||||
div.flexNone {
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.flexBasis {
|
||||
flex: 0 0 20px;
|
||||
background: gray;
|
||||
}
|
||||
div.spacer {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox"><div class="a"></div><div class="b"/></div>
|
||||
<div class="flexbox"><div class="a"/><div class="c"/></div>
|
||||
<div class="flexbox"><div class="a"/>
|
||||
<div class="flexNone"><div class="spacer"/></div>
|
||||
</div>
|
||||
<div class="flexbox"><div class="b"/><div class="c"/></div>
|
||||
<div class="flexbox"><div class="b"/>
|
||||
<div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with blocks as flex items in a horizontal flex container, with
|
||||
various "flex" values and various combinations of the items
|
||||
and with various writing-modes on the items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container
|
||||
(with various writing-modes on the flex items).
|
||||
</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
|
||||
<link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/>
|
||||
<style>
|
||||
div { height: 100px; }
|
||||
div.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
}
|
||||
div.a {
|
||||
flex: 1 0 30px;
|
||||
background: lightgreen;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.b {
|
||||
flex: 2 0 20px;
|
||||
background: yellow;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
div.c {
|
||||
flex: 3 0 40px;
|
||||
background: orange;
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
div.flexNone {
|
||||
flex: none;
|
||||
background: pink;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.flexBasis {
|
||||
flex: 0 0 20px;
|
||||
background: gray;
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
div.spacer {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox"><div class="a"></div><div class="b"/></div>
|
||||
<div class="flexbox"><div class="a"/><div class="c"/></div>
|
||||
<div class="flexbox"><div class="a"/>
|
||||
<div class="flexNone"><div class="spacer"/></div>
|
||||
</div>
|
||||
<div class="flexbox"><div class="b"/><div class="c"/></div>
|
||||
<div class="flexbox"><div class="b"/>
|
||||
<div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
div { width: 50px; }
|
||||
div.flexbox {
|
||||
border: 1px dashed blue;
|
||||
float: left;
|
||||
}
|
||||
div.a {
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
background: yellow;
|
||||
}
|
||||
div.c {
|
||||
background: orange;
|
||||
}
|
||||
div.auto {
|
||||
background: pink;
|
||||
}
|
||||
div.inflex {
|
||||
background: gray;
|
||||
}
|
||||
div.spacer {
|
||||
width: 15px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="height: 80px"/><div class="b" style="height: 120px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="height: 62.5px"/><div class="c" style="height: 137.5px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="height: 185px"/><div class="auto">
|
||||
<div class="spacer" style="height: 15px"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="height: 76px"/><div class="c" style="height: 124px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="height: 170px"/><div class="auto">
|
||||
<div class="spacer" style="height: 30px"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="height: 45px"/><div class="b" style="height: 50px"
|
||||
/><div class="inflex" style="height: 20px"/><div class="c" style="height: 85px"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with blocks as flex items in a vertical flex container, with
|
||||
various "flex" values and various combinations of the items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
|
||||
<link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/>
|
||||
<style>
|
||||
div { width: 50px; }
|
||||
div.flexbox {
|
||||
float: left;
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
div.a {
|
||||
flex: 1 0 30px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
flex: 2 0 20px;
|
||||
background: yellow;
|
||||
}
|
||||
div.c {
|
||||
flex: 3 0 40px;
|
||||
background: orange;
|
||||
}
|
||||
div.flexNone {
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.flexBasis {
|
||||
flex: 0 0 20px;
|
||||
background: gray;
|
||||
}
|
||||
div.spacer {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox"><div class="a"></div><div class="b"/></div>
|
||||
<div class="flexbox"><div class="a"/><div class="c"/></div>
|
||||
<div class="flexbox"><div class="a"/>
|
||||
<div class="flexNone"><div class="spacer"/></div>
|
||||
</div>
|
||||
<div class="flexbox"><div class="b"/><div class="c"/></div>
|
||||
<div class="flexbox"><div class="b"/>
|
||||
<div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with blocks as flex items in a vertical flex container, with
|
||||
various "flex" values and various combinations of the items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container
|
||||
(with various writing-modes on the flex items).
|
||||
</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
|
||||
<link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/>
|
||||
<style>
|
||||
div { width: 50px; }
|
||||
div.flexbox {
|
||||
float: left;
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
div.a {
|
||||
flex: 1 0 30px;
|
||||
background: lightgreen;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.b {
|
||||
flex: 2 0 20px;
|
||||
background: yellow;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
div.c {
|
||||
flex: 3 0 40px;
|
||||
background: orange;
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
div.flexNone {
|
||||
flex: none;
|
||||
background: pink;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.flexBasis {
|
||||
flex: 0 0 20px;
|
||||
background: gray;
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
div.spacer {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox"><div class="a"></div><div class="b"/></div>
|
||||
<div class="flexbox"><div class="a"/><div class="c"/></div>
|
||||
<div class="flexbox"><div class="a"/>
|
||||
<div class="flexNone"><div class="spacer"/></div>
|
||||
</div>
|
||||
<div class="flexbox"><div class="b"/><div class="c"/></div>
|
||||
<div class="flexbox"><div class="b"/>
|
||||
<div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
}
|
||||
canvas {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="height: 22px">
|
||||
some words
|
||||
<canvas style="float:right"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 122.5px"
|
||||
/><canvas style="width: 73.5px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 93px"
|
||||
/><canvas style="width: 103px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 114px"
|
||||
/><canvas style="width: 82px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 106px"
|
||||
/><canvas style="width: 90px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 46px"
|
||||
/><canvas style="width: 150px"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!--
|
||||
This test checks that canvas elements behave correctly as flex items.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
|
||||
<link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
}
|
||||
canvas {
|
||||
min-width: 0;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- A) One flex item -->
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
|
||||
<!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
|
||||
<div class="flexbox">
|
||||
some words <canvas/>
|
||||
</div>
|
||||
|
||||
<!-- C) Two canvas elements, getting stretched by different ratios, from 0.
|
||||
|
||||
Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
|
||||
= 196px
|
||||
|
||||
1st element gets 5/8 of space: 5/8 * 196px = 122.5px
|
||||
1st element gets 3/8 of space: 3/8 * 196px = 73.5px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="flex: 5"/>
|
||||
<canvas style="flex: 3"/>
|
||||
</div>
|
||||
|
||||
<!-- D) Two canvas elements, getting stretched by different ratios, from
|
||||
different flex bases.
|
||||
|
||||
Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
|
||||
1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
|
||||
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 33px; flex: 2 auto"/>
|
||||
<canvas style="width: 13px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- E) Two flex items, getting shrunk by different amounts.
|
||||
|
||||
Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
|
||||
First element scaled flex ratio = 4 * 150 = 600
|
||||
Second element scaled flex ratio = 3 * 100 = 300
|
||||
* So, total flexibility is 600 + 300 = 900
|
||||
|
||||
1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
|
||||
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 150px; flex: 1 4 auto"/>
|
||||
<canvas style="width: 100px; flex: 1 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- F) Making sure we don't grow past max-width -->
|
||||
<!-- Same as (D), except we've added a max-width on the second element.
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 33px; flex: 2 auto"/>
|
||||
<canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- G) Making sure we grow at least as large as min-width -->
|
||||
<!-- Same as (C), except we've added a min-width on the second element.
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 33px; flex: 2 auto"/>
|
||||
<canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!--
|
||||
This test checks that canvas elements behave correctly as flex items.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container
|
||||
(with a vertical writing-mode on the canvas flex items).
|
||||
</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
|
||||
<link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
}
|
||||
canvas {
|
||||
min-width: 0;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: 1px dotted green;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- A) One flex item -->
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
|
||||
<!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
|
||||
<div class="flexbox">
|
||||
some words <canvas/>
|
||||
</div>
|
||||
|
||||
<!-- C) Two canvas elements, getting stretched by different ratios, from 0.
|
||||
|
||||
Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
|
||||
= 196px
|
||||
|
||||
1st element gets 5/8 of space: 5/8 * 196px = 122.5px
|
||||
1st element gets 3/8 of space: 3/8 * 196px = 73.5px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="flex: 5"/>
|
||||
<canvas style="flex: 3"/>
|
||||
</div>
|
||||
|
||||
<!-- D) Two canvas elements, getting stretched by different ratios, from
|
||||
different flex bases.
|
||||
|
||||
Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
|
||||
1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
|
||||
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 33px; flex: 2 auto"/>
|
||||
<canvas style="width: 13px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- E) Two flex items, getting shrunk by different amounts.
|
||||
|
||||
Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
|
||||
First element scaled flex ratio = 4 * 150 = 600
|
||||
Second element scaled flex ratio = 3 * 100 = 300
|
||||
* So, total flexibility is 600 + 300 = 900
|
||||
|
||||
1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
|
||||
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 150px; flex: 1 4 auto"/>
|
||||
<canvas style="width: 100px; flex: 1 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- F) Making sure we don't grow past max-width -->
|
||||
<!-- Same as (D), except we've added a max-width on the second element.
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 33px; flex: 2 auto"/>
|
||||
<canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- G) Making sure we grow at least as large as min-width -->
|
||||
<!-- Same as (C), except we've added a min-width on the second element.
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 33px; flex: 2 auto"/>
|
||||
<canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
width: 22px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
background: lightgreen;
|
||||
line-height: 0;
|
||||
}
|
||||
canvas {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="font: 8px monospace; height: 188px">
|
||||
a b
|
||||
</div>
|
||||
<canvas/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 122.5px"
|
||||
/><canvas style="height: 73.5px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 93px"
|
||||
/><canvas style="height: 103px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 114px"
|
||||
/><canvas style="height: 82px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 106px"
|
||||
/><canvas style="height: 90px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 46px"
|
||||
/><canvas style="height: 150px"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!--
|
||||
This test checks that canvas elements behave correctly as flex items.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
|
||||
<link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
background: lightgreen;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
font: 8px monospace;
|
||||
}
|
||||
canvas {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
min-height: 0;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- A) One flex item -->
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
|
||||
<!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
|
||||
<div class="flexbox">
|
||||
a b <canvas/>
|
||||
</div>
|
||||
|
||||
<!-- C) Two canvas elements, getting stretched by different ratios, from 0.
|
||||
|
||||
Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
|
||||
= 196px
|
||||
|
||||
1st element gets 5/8 of space: 5/8 * 196px = 122.5px
|
||||
1st element gets 3/8 of space: 3/8 * 196px = 73.5px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="flex: 5"/>
|
||||
<canvas style="flex: 3"/>
|
||||
</div>
|
||||
|
||||
<!-- D) Two canvas elements, getting stretched by different ratios, from
|
||||
different flex bases.
|
||||
|
||||
Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
|
||||
1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
|
||||
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 33px; flex: 2 auto"/>
|
||||
<canvas style="height: 13px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- E) Two flex items, getting shrunk by different amounts.
|
||||
|
||||
Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
|
||||
First element scaled flex ratio = 4 * 150 = 600
|
||||
Second element scaled flex ratio = 3 * 100 = 300
|
||||
* So, total flexibility is 600 + 300 = 900
|
||||
|
||||
1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
|
||||
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 150px; flex: 1 4 auto"/>
|
||||
<canvas style="height: 100px; flex: 1 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- F) Making sure we don't grow past max-height -->
|
||||
<!-- Same as (D), except we've added a max-height on the second element.
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 33px; flex: 2 auto"/>
|
||||
<canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- G) Making sure we grow at least as large as min-height -->
|
||||
<!-- Same as (C), except we've added a min-height on the second element.
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 33px; flex: 2 auto"/>
|
||||
<canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!--
|
||||
This test checks that canvas elements behave correctly as flex items.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container
|
||||
(with a vertical writing-mode on the canvas flex items).
|
||||
</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
|
||||
<link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
background: lightgreen;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
font: 8px monospace;
|
||||
}
|
||||
canvas {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
min-height: 0;
|
||||
border: 1px dotted green;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- A) One flex item -->
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
|
||||
<!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
|
||||
<div class="flexbox">
|
||||
a b <canvas/>
|
||||
</div>
|
||||
|
||||
<!-- C) Two canvas elements, getting stretched by different ratios, from 0.
|
||||
|
||||
Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
|
||||
= 196px
|
||||
|
||||
1st element gets 5/8 of space: 5/8 * 196px = 122.5px
|
||||
1st element gets 3/8 of space: 3/8 * 196px = 73.5px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="flex: 5"/>
|
||||
<canvas style="flex: 3"/>
|
||||
</div>
|
||||
|
||||
<!-- D) Two canvas elements, getting stretched by different ratios, from
|
||||
different flex bases.
|
||||
|
||||
Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
|
||||
1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
|
||||
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 33px; flex: 2 auto"/>
|
||||
<canvas style="height: 13px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- E) Two flex items, getting shrunk by different amounts.
|
||||
|
||||
Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
|
||||
First element scaled flex ratio = 4 * 150 = 600
|
||||
Second element scaled flex ratio = 3 * 100 = 300
|
||||
* So, total flexibility is 600 + 300 = 900
|
||||
|
||||
1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
|
||||
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 150px; flex: 1 4 auto"/>
|
||||
<canvas style="height: 100px; flex: 1 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- F) Making sure we don't grow past max-height -->
|
||||
<!-- Same as (D), except we've added a max-height on the second element.
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 33px; flex: 2 auto"/>
|
||||
<canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
<!-- G) Making sure we grow at least as large as min-height -->
|
||||
<!-- Same as (C), except we've added a min-height on the second element.
|
||||
-->
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 33px; flex: 2 auto"/>
|
||||
<canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
clear: all;
|
||||
height: 22px;
|
||||
}
|
||||
fieldset {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: 1px dotted green;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<fieldset/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="height: 22px">
|
||||
some words
|
||||
<fieldset style="float:right"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 122.5px"
|
||||
/><fieldset style="width: 73.5px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 93px"
|
||||
/><fieldset style="width: 103px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 114px"
|
||||
/><fieldset style="width: 82px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 106px"
|
||||
/><fieldset style="width: 90px"/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 46px"
|
||||
/><fieldset style="width: 150px"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue