зеркало из https://github.com/mozilla/gecko-dev.git
Bug 666041: Reftests for css3-flexbox. (tests-only)
--HG-- rename : layout/reftests/bugs/solidblue.png => layout/reftests/flexbox/solidblue.png
This commit is contained in:
Daniel Holbert
Родитель
8d95ac617b
Коммит
a3cb31110c
|
|
@ -0,0 +1,4 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "Ahem";
|
||||||
|
src: url(../fonts/Ahem.ttf);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<?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>
|
||||||
|
<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; }
|
||||||
|
.violet { background: violet; }
|
||||||
|
.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="violet" border="1">
|
||||||
|
<tr><td>tr1</td></tr>
|
||||||
|
<tr><td>tr2</td></tr></table
|
||||||
|
><table class="tan" cellspacing="0" cellpadding="0">
|
||||||
|
<i>ital<br/>ic</i>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-align-items: baseline;
|
||||||
|
border: 1px dashed blue;
|
||||||
|
font: 14px sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
/* XXXdholbert HACK - REMOVEME after bug 783415 lands (which will
|
||||||
|
make this display:block conversion happen automatically). */
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
.violet { background: violet; }
|
||||||
|
.tan { background: tan; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<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>
|
||||||
|
<table class="violet" border="1">
|
||||||
|
<tr><td>tr1</td></tr>
|
||||||
|
<tr><td>tr2</td></tr></table>
|
||||||
|
<i class="tan">ital<br/>ic</i>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<?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.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
display: block;
|
||||||
|
border: 1px dashed blue;
|
||||||
|
font: 14px sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
input { height: 30px; }
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 30px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.multilinebutton {
|
||||||
|
/* For comparison vs. "button.multilinebutton" in the testcase: */
|
||||||
|
-moz-appearance: button;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font: 20px sans-serif;
|
||||||
|
padding-top: 1px;
|
||||||
|
height: 49px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div { display: inline-block; }
|
||||||
|
table { display: inline-table; }
|
||||||
|
|
||||||
|
.lime { background: lime; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="lime">text</div
|
||||||
|
><input type="text" style="width: 20px; min-width: 0;" value="input"
|
||||||
|
/><textarea style="width: 30px">t e x t a r e a </textarea
|
||||||
|
><table cellspacing="0" cellpadding="0">
|
||||||
|
<div class="multilinebutton">b<br/>t<br/>n</div>
|
||||||
|
</table>
|
||||||
|
</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). 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 checks baseline-alignment for a text <input> field, a
|
||||||
|
<textarea>, and a <button> with a multi-line label.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-align-items: baseline;
|
||||||
|
border: 1px dashed blue;
|
||||||
|
font: 14px sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
input { height: 30px; }
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 30px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.multilinebutton {
|
||||||
|
font: 20px sans-serif;
|
||||||
|
color: black;
|
||||||
|
padding: 0;
|
||||||
|
height: 50px;
|
||||||
|
width: 20px;
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lime { background: lime; }
|
||||||
|
.orange { background: orange; }
|
||||||
|
.pink { background: pink; }
|
||||||
|
.aqua { background: aqua; }
|
||||||
|
.violet { background: violet; }
|
||||||
|
.tan { background: tan; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="lime">text</div>
|
||||||
|
<input type="text" style="width: 20px; min-width: 0;" value="input"/>
|
||||||
|
<textarea style="width: 30px">t e x t a r e a </textarea>
|
||||||
|
<button class="multilinebutton">b<br/>t<br/>n</button>
|
||||||
|
</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.
|
||||||
|
|
||||||
|
NOTE: For multi-line 'display: block' flex items in the testcase, we use
|
||||||
|
an inline-table here in the reference case, so that we get first-line
|
||||||
|
baseline alignment. (If we used an inline-block instead, that would give
|
||||||
|
us *last-line* baseline alignment.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lime { background: lime; }
|
||||||
|
.pink { background: pink; }
|
||||||
|
.aqua { background: aqua; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="lime">text</div
|
||||||
|
><button>btn</button
|
||||||
|
><input type="radio"
|
||||||
|
/><input type="checkbox"
|
||||||
|
/><label class="pink">label</label
|
||||||
|
><table cellspacing="0" cellpadding="0" class="aqua">
|
||||||
|
<label>lab<br/>el</label>
|
||||||
|
</table
|
||||||
|
><table cellspacing="0" cellpadding="0">
|
||||||
|
<fieldset>field<br/>set</fieldset>
|
||||||
|
</table
|
||||||
|
><table cellspacing="0" cellpadding="0">
|
||||||
|
<fieldset><legend>leg</legend>field<br/>set</fieldset>
|
||||||
|
</table
|
||||||
|
><table cellspacing="0" cellpadding="0">
|
||||||
|
<fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
|
||||||
|
</table>
|
||||||
|
</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 has various types of baseline-aligned
|
||||||
|
content, and the flexbox's vertical size depends on the aggregate
|
||||||
|
post-alignment height of its children.
|
||||||
|
|
||||||
|
This test checks baseline-alignment for text <button>, for
|
||||||
|
various <input> fields, for <label>, and for <fieldset>.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-align-items: baseline;
|
||||||
|
border: 1px dashed blue;
|
||||||
|
font: 14px sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, label {
|
||||||
|
/* XXXdholbert HACK - REMOVEME after bug 783415 lands (which will
|
||||||
|
make this display:block conversion happen automatically). */
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big {
|
||||||
|
height: 100px;
|
||||||
|
font: 24px sans-serif;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lime { background: lime; }
|
||||||
|
.pink { background: pink; }
|
||||||
|
.aqua { background: aqua; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="lime">text</div>
|
||||||
|
<button>btn</button>
|
||||||
|
<input type="radio"/>
|
||||||
|
<input type="checkbox"/>
|
||||||
|
<label class="pink">label</label>
|
||||||
|
<label class="aqua">lab<br/>el</label>
|
||||||
|
<fieldset>field<br/>set</fieldset>
|
||||||
|
<fieldset><legend>leg</legend>field<br/>set</fieldset>
|
||||||
|
<fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
|
||||||
|
</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 margin-top in place of the align-items /
|
||||||
|
align-self properties. -->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<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,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. -->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
height: 200px;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
display: -moz-flex;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
|
||||||
|
/* Any children whose align-self is 'auto' (or unspecified, or
|
||||||
|
-moz-initial) will end up taking this value from us: */
|
||||||
|
-moz-align-items: center;
|
||||||
|
|
||||||
|
/* Any children whose align-self is 'inherit' will end up
|
||||||
|
inheriting this value from us: */
|
||||||
|
-moz-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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-align-self: stretch;
|
||||||
|
}
|
||||||
|
.auto {
|
||||||
|
background: yellow;
|
||||||
|
-moz-align-self: auto;
|
||||||
|
}
|
||||||
|
.unspecified {
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
.initial {
|
||||||
|
background: aqua;
|
||||||
|
-moz-align-self: -moz-initial;
|
||||||
|
}
|
||||||
|
.inherit {
|
||||||
|
background: violet;
|
||||||
|
-moz-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,81 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
height: 200px;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 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>
|
||||||
|
<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 style="width: -moz-fit-content;">
|
||||||
|
<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>
|
||||||
|
</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 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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
height: 200px;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
display: -moz-flex;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-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,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 relative positioning in place of the
|
||||||
|
align-items / align-self properties. -->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
padding: 3px;
|
||||||
|
width: 560px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<!-- 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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
padding: 3px;
|
||||||
|
height: 4px;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
display: -moz-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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-align-self: stretch;
|
||||||
|
}
|
||||||
|
.auto {
|
||||||
|
background: yellow;
|
||||||
|
-moz-align-self: auto;
|
||||||
|
}
|
||||||
|
.unspecified {
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
.initial {
|
||||||
|
background: aqua;
|
||||||
|
-moz-align-self: -moz-initial;
|
||||||
|
}
|
||||||
|
.inherit {
|
||||||
|
background: violet;
|
||||||
|
-moz-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,85 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
padding: 3px;
|
||||||
|
height: 4px;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
<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 style="width: -moz-fit-content;">
|
||||||
|
<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,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 the
|
||||||
|
flex container being shorter than its items. -->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
padding: 3px;
|
||||||
|
height: 4px;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
display: -moz-flex;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
min-height: 2px;
|
||||||
|
-moz-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,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 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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
height: 140px;
|
||||||
|
width: 400px;
|
||||||
|
display: -moz-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,100 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
height: 140px;
|
||||||
|
width: 400px;
|
||||||
|
display: -moz-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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-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,94 @@
|
||||||
|
<?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>
|
||||||
|
<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;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
float: right;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.auto {
|
||||||
|
background: yellow;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.unspecified {
|
||||||
|
background: lightgreen;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.initial {
|
||||||
|
background: aqua;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.inherit {
|
||||||
|
background: violet;
|
||||||
|
float: right;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
<!-- Since that last div is floated right, 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,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. -->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 200px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
font-size: 10px;
|
||||||
|
|
||||||
|
/* Any children whose align-self is 'auto' (or unspecified, or
|
||||||
|
-moz-initial) will end up taking this value from us: */
|
||||||
|
-moz-align-items: center;
|
||||||
|
|
||||||
|
/* Any children whose align-self is 'inherit' will end up
|
||||||
|
inheriting this value from us: */
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big {
|
||||||
|
font-size: 20px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Classes for each of the various align-self values */
|
||||||
|
.flex-start {
|
||||||
|
background: lime;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-align-self: stretch;
|
||||||
|
}
|
||||||
|
.auto {
|
||||||
|
background: yellow;
|
||||||
|
-moz-align-self: auto;
|
||||||
|
}
|
||||||
|
.unspecified {
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
.initial {
|
||||||
|
background: aqua;
|
||||||
|
-moz-align-self: -moz-initial;
|
||||||
|
}
|
||||||
|
.inherit {
|
||||||
|
background: violet;
|
||||||
|
-moz-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,92 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 200px;
|
||||||
|
float: left;
|
||||||
|
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;
|
||||||
|
width: -moz-max-content;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
width: -moz-max-content;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
width: -moz-max-content;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
</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 style="margin: auto; width: -moz-max-content">
|
||||||
|
<div class="center">center</div>
|
||||||
|
</div>
|
||||||
|
<div style="margin: auto; width: -moz-max-content">
|
||||||
|
<div class="center big">a b c d e f</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- NOTE: I'm not using floats in this flex container, since floating
|
||||||
|
makes it harder to emulate the "stretch" behavior.
|
||||||
|
(We need to use width: auto - not width:100% - because we need to
|
||||||
|
allow space for our margins/borders/padding. And width:auto doesn't do
|
||||||
|
what we want if we're floated.)
|
||||||
|
|
||||||
|
However, since our children aren't floated, their adjacent vertical
|
||||||
|
margins will collapse by default (which doesn't match what happens in
|
||||||
|
the testcase, since margins don't collapse in a flexbox). So, we
|
||||||
|
compensate for that by bumping up the margin-top value on every
|
||||||
|
collapsed top-margin to "4px", which is the total amount of vertical
|
||||||
|
margin we're expecting between consecutive flex items in the testcase.
|
||||||
|
(4px = 3px margin-bottom + 1px margin-top)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="baseline">base</div>
|
||||||
|
<div class="baseline big" style="margin-top: 4px">abc</div>
|
||||||
|
<div class="stretch" style="margin-top: 4px">stretch</div>
|
||||||
|
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||||
|
</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 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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 200px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-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,76 @@
|
||||||
|
<?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>
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexbox > * {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Classes for each of the various align-self values */
|
||||||
|
.flex-start {
|
||||||
|
background: lime;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
float: right;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
<!-- We're using auto margins as references for "align-self:center", but
|
||||||
|
auto margins only work if we've got extra space available, and we
|
||||||
|
don't have extra space available in this case. So, we create a
|
||||||
|
wide wrapper-div that _will_ have space available. We position
|
||||||
|
that wrapper-div using a negative margin, so that centering in it
|
||||||
|
is equivalent to centering in our reference for the flex container.
|
||||||
|
-->
|
||||||
|
<div style="width: 100px; margin-left: -48px">
|
||||||
|
<div class="center">center</div>
|
||||||
|
<div class="center big">a b</div>
|
||||||
|
</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,64 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 4px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-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,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 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>
|
||||||
|
<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;
|
||||||
|
width: -moz-max-content;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
width: -moz-max-content;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
</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" style="margin-bottom: 4px">a b</div>
|
||||||
|
<!-- We're using auto margins as references for "align-self:center", but
|
||||||
|
auto margins only work if we've got extra space available, and we
|
||||||
|
don't have extra space available in this case. So, we create a
|
||||||
|
wide wrapper-div that _will_ have space available. We position
|
||||||
|
that wrapper-div using a negative margin, so that centering in it
|
||||||
|
is equivalent to centering in our reference for the flex container.
|
||||||
|
-->
|
||||||
|
<div style="width: 100px; margin-left: -48px">
|
||||||
|
<div style="margin: auto; width: -moz-max-content">
|
||||||
|
<div class="center">center</div>
|
||||||
|
</div>
|
||||||
|
<div style="margin: auto; width: -moz-max-content">
|
||||||
|
<div class="center big" style="margin-top: 4px">a b</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- NOTE: I'm not using floats in this flex container, since floating
|
||||||
|
makes it harder to emulate the "stretch" behavior.
|
||||||
|
(We need to use width: auto - not width:100% - because we need to
|
||||||
|
allow space for our margins/borders/padding. And width:auto doesn't do
|
||||||
|
what we want if we're floated.)
|
||||||
|
|
||||||
|
However, since our children aren't floated, their adjacent vertical
|
||||||
|
margins will collapse by default (which doesn't match what happens in
|
||||||
|
the testcase, since margins don't collapse in a flexbox). So, we
|
||||||
|
compensate for that by bumping up the margin-top value on every
|
||||||
|
collapsed top-margin to "4px", which is the total amount of vertical
|
||||||
|
margin we're expecting between consecutive flex items in the testcase.
|
||||||
|
(4px = 3px margin-bottom + 1px margin-top)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="baseline">base</div>
|
||||||
|
<div class="baseline big" style="margin-top: 4px">abc</div>
|
||||||
|
<div class="stretch" style="margin-top: 4px">stretch</div>
|
||||||
|
<div class="stretch big" style="margin-top: 4px">a b</div>
|
||||||
|
</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 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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 4px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-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,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 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>
|
||||||
|
<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;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
float: left;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.auto {
|
||||||
|
background: yellow;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.unspecified {
|
||||||
|
background: lightgreen;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.initial {
|
||||||
|
background: aqua;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.inherit {
|
||||||
|
background: violet;
|
||||||
|
float: left;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
<!-- Since that last div is floated right, 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,91 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 200px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
direction: rtl;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
|
||||||
|
/* Any children whose align-self is 'auto' (or unspecified, or
|
||||||
|
-moz-initial) will end up taking this value from us: */
|
||||||
|
-moz-align-items: center;
|
||||||
|
|
||||||
|
/* Any children whose align-self is 'inherit' will end up
|
||||||
|
inheriting this value from us: */
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big {
|
||||||
|
font-size: 20px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Classes for each of the various align-self values */
|
||||||
|
.flex-start {
|
||||||
|
background: lime;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-align-self: stretch;
|
||||||
|
}
|
||||||
|
.auto {
|
||||||
|
background: yellow;
|
||||||
|
-moz-align-self: auto;
|
||||||
|
}
|
||||||
|
.unspecified {
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
.initial {
|
||||||
|
background: aqua;
|
||||||
|
-moz-align-self: -moz-initial;
|
||||||
|
}
|
||||||
|
.inherit {
|
||||||
|
background: violet;
|
||||||
|
-moz-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,95 @@
|
||||||
|
<?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>
|
||||||
|
<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;
|
||||||
|
width: -moz-max-content;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
width: -moz-max-content;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
width: -moz-max-content;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
</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 style="margin: auto; width: -moz-max-content">
|
||||||
|
<div class="center">center</div>
|
||||||
|
</div>
|
||||||
|
<div style="margin: auto; width: -moz-max-content">
|
||||||
|
<div class="center big">a b c d e f</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- NOTE: I'm not using floats in this flex container, since floating
|
||||||
|
makes it harder to emulate the "stretch" behavior.
|
||||||
|
(We need to use width: auto - not width:100% - because we need to
|
||||||
|
allow space for our margins/borders/padding. And width:auto doesn't do
|
||||||
|
what we want if we're floated.)
|
||||||
|
|
||||||
|
However, since our children aren't floated, their adjacent vertical
|
||||||
|
margins will collapse by default (which doesn't match what happens in
|
||||||
|
the testcase, since margins don't collapse in a flexbox). So, we
|
||||||
|
compensate for that by bumping up the margin-top value on every
|
||||||
|
collapsed top-margin to "4px", which is the total amount of vertical
|
||||||
|
margin we're expecting between consecutive flex items in the testcase.
|
||||||
|
(4px = 3px margin-bottom + 1px margin-top)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="baseline">base</div>
|
||||||
|
<div class="baseline big" style="margin-top: 4px">abc</div>
|
||||||
|
<div class="stretch" style="margin-top: 4px">stretch</div>
|
||||||
|
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 200px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-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,78 @@
|
||||||
|
<?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>
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexbox > * {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Classes for each of the various align-self values */
|
||||||
|
.flex-start {
|
||||||
|
background: lime;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
float: left;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
margin: auto;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
<!-- We're using auto margins as references for "align-self:center", but
|
||||||
|
auto margins only work if we've got extra space available, and we
|
||||||
|
don't have extra space available in this case. So, we create a
|
||||||
|
wide wrapper-div that _will_ have space available. We position
|
||||||
|
that wrapper-div using a negative margin, so that centering in it
|
||||||
|
is equivalent to centering in our reference for the flex container.
|
||||||
|
-->
|
||||||
|
<div style="width: 100px; margin-right: -48px">
|
||||||
|
<div class="center">center</div>
|
||||||
|
<div class="center big">a b</div>
|
||||||
|
</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,66 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 4px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-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,103 @@
|
||||||
|
<?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>
|
||||||
|
<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;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
width: -moz-max-content;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
width: -moz-max-content;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- NOTE: I'm not using floats in this flex container, since floating
|
||||||
|
makes it harder to emulate the "stretch" behavior.
|
||||||
|
(We need to use width: auto - not width:100% - because we need to
|
||||||
|
allow space for our margins/borders/padding. And width:auto doesn't do
|
||||||
|
what we want if we're floated.)
|
||||||
|
|
||||||
|
However, since our children aren't floated, their adjacent vertical
|
||||||
|
margins will collapse by default (which doesn't match what happens in
|
||||||
|
the testcase, since margins don't collapse in a flexbox). So, we
|
||||||
|
compensate for that by bumping up the margin-top value on every
|
||||||
|
collapsed top-margin to "4px", which is the total amount of vertical
|
||||||
|
margin we're expecting between consecutive flex items in the testcase.
|
||||||
|
(4px = 3px margin-bottom + 1px margin-top)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flex-start">start</div>
|
||||||
|
<div class="flex-start big" style="margin-top: 4px">a b</div>
|
||||||
|
<div class="stretch" style="margin-top: 4px">stretch</div>
|
||||||
|
<div class="stretch big" style="margin-top: 4px">a b</div>
|
||||||
|
<!-- We're using auto margins as references for "align-self:center", but
|
||||||
|
auto margins only work if we've got extra space available, and we
|
||||||
|
don't have extra space available in this case. So, we create a
|
||||||
|
wide wrapper-div that _will_ have space available. We position
|
||||||
|
that wrapper-div using a negative margin, so that centering in it
|
||||||
|
is equivalent to centering in our reference for the flex container.
|
||||||
|
-->
|
||||||
|
<div style="width: 100px; margin-right: -48px">
|
||||||
|
<div style="margin: auto; width: -moz-max-content">
|
||||||
|
<div class="center" style="margin-top: 4px">center</div>
|
||||||
|
</div>
|
||||||
|
<div style="margin: auto; width: -moz-max-content">
|
||||||
|
<div class="center big" style="margin-top: 4px">a b</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="baseline">base</div>
|
||||||
|
<div class="baseline big" style="margin-top: 4px">abc</div>
|
||||||
|
<div class="flex-end">end</div>
|
||||||
|
<div class="flex-end big">a b</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 skinnier than its items, and with "direction: rtl" to
|
||||||
|
swap the horizontal (cross) axis. -->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 4px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-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;
|
||||||
|
-moz-align-self: flex-start;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
background: orange;
|
||||||
|
-moz-align-self: flex-end;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
background: lightblue;
|
||||||
|
-moz-align-self: center;
|
||||||
|
}
|
||||||
|
.baseline {
|
||||||
|
background: teal;
|
||||||
|
-moz-align-self: baseline;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
background: pink;
|
||||||
|
-moz-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,63 @@
|
||||||
|
<?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>
|
||||||
|
<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,61 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div { height: 100px; }
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 200px;
|
||||||
|
font-size: 10px;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
div.a {
|
||||||
|
-moz-flex: 1 0 30px;
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
div.b {
|
||||||
|
-moz-flex: 2 0 20px;
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
div.c {
|
||||||
|
-moz-flex: 3 0 40px;
|
||||||
|
background: orange;
|
||||||
|
}
|
||||||
|
div.flexNone {
|
||||||
|
-moz-flex: none;
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
div.flexBasis {
|
||||||
|
-moz-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,58 @@
|
||||||
|
<?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>
|
||||||
|
<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,62 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div { width: 50px; }
|
||||||
|
div.flexbox {
|
||||||
|
float: left;
|
||||||
|
border: 1px dashed blue;
|
||||||
|
height: 200px;
|
||||||
|
font-size: 10px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
div.a {
|
||||||
|
-moz-flex: 1 0 30px;
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
div.b {
|
||||||
|
-moz-flex: 2 0 20px;
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
div.c {
|
||||||
|
-moz-flex: 3 0 40px;
|
||||||
|
background: orange;
|
||||||
|
}
|
||||||
|
div.flexNone {
|
||||||
|
-moz-flex: none;
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
div.flexBasis {
|
||||||
|
-moz-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,58 @@
|
||||||
|
<?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>
|
||||||
|
<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,97 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-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="-moz-flex: 5"/>
|
||||||
|
<canvas style="-moz-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; -moz-flex: 2 auto"/>
|
||||||
|
<canvas style="width: 13px; -moz-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; -moz-flex: 1 4 auto"/>
|
||||||
|
<canvas style="width: 100px; -moz-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; -moz-flex: 2 auto"/>
|
||||||
|
<canvas style="width: 13px; max-width: 90px; -moz-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; -moz-flex: 2 auto"/>
|
||||||
|
<canvas style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<canvas/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<?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' default "min-width: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "width" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 1000px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<canvas/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
width: -moz-min-content;
|
||||||
|
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,99 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
-moz-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="-moz-flex: 5"/>
|
||||||
|
<canvas style="-moz-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; -moz-flex: 2 auto"/>
|
||||||
|
<canvas style="height: 13px; -moz-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; -moz-flex: 1 4 auto"/>
|
||||||
|
<canvas style="height: 100px; -moz-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; -moz-flex: 2 auto"/>
|
||||||
|
<canvas style="height: 13px; max-height: 90px; -moz-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; -moz-flex: 2 auto"/>
|
||||||
|
<canvas style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<canvas/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?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' default "min-height: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "height" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 50px;
|
||||||
|
height: 1000px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<canvas/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<?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>
|
||||||
|
<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>
|
||||||
|
|
@ -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 fieldset elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and a fieldset (ensure they aren't merged into one flex item)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
some words <fieldset/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two fieldset 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">
|
||||||
|
<fieldset style="-moz-flex: 5"/>
|
||||||
|
<fieldset style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two fieldset 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">
|
||||||
|
<fieldset style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<fieldset style="width: 13px; -moz-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">
|
||||||
|
<fieldset style="width: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<fieldset style="width: 100px; -moz-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">
|
||||||
|
<fieldset style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<fieldset style="width: 13px; max-width: 90px; -moz-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">
|
||||||
|
<fieldset style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<fieldset style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<?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 fieldset elements' default "min-width: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "width" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
width: 1000px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset/>
|
||||||
|
</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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
width: -moz-min-content;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: lightgreen;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<div style="font: 8px monospace; height: 188px">
|
||||||
|
a b
|
||||||
|
</div>
|
||||||
|
<fieldset/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset style="height: 122.5px"
|
||||||
|
/><fieldset style="height: 73.5px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset style="height: 93px"
|
||||||
|
/><fieldset style="height: 103px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset style="height: 114px"
|
||||||
|
/><fieldset style="height: 82px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset style="height: 106px"
|
||||||
|
/><fieldset style="height: 90px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset style="height: 46px"
|
||||||
|
/><fieldset 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 fieldset elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
font: 8px monospace;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
min-height: 0;
|
||||||
|
border: 1px dotted green;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and a fieldset (ensure they aren't merged into one flex item)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
a b <fieldset/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two fieldset 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">
|
||||||
|
<fieldset style="-moz-flex: 5"/>
|
||||||
|
<fieldset style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two fieldset 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">
|
||||||
|
<fieldset style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<fieldset style="height: 13px; -moz-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">
|
||||||
|
<fieldset style="height: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<fieldset style="height: 100px; -moz-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">
|
||||||
|
<fieldset style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<fieldset style="height: 13px; max-height: 90px; -moz-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">
|
||||||
|
<fieldset style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<fieldset style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?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 fieldset elements' default "min-height: auto"
|
||||||
|
property is handled correctly (i.e. isn't influenced by the "height"
|
||||||
|
property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
width: 50px;
|
||||||
|
height: 1000px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<fieldset/>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox" style="height: 22px">
|
||||||
|
some words
|
||||||
|
<iframe style="float:right"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="width: 122.5px"
|
||||||
|
/><iframe style="width: 73.5px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="width: 93px"
|
||||||
|
/><iframe style="width: 103px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="width: 114px"
|
||||||
|
/><iframe style="width: 82px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="width: 106px"
|
||||||
|
/><iframe style="width: 90px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="width: 46px"
|
||||||
|
/><iframe style="width: 150px"/>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test checks that iframe elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
min-width: 0;
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and an iframe (ensure they aren't merged into one flex item)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
some words <iframe/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two iframe 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">
|
||||||
|
<iframe style="-moz-flex: 5"/>
|
||||||
|
<iframe style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two iframe 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">
|
||||||
|
<iframe style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<iframe style="width: 13px; -moz-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">
|
||||||
|
<iframe style="width: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<iframe style="width: 100px; -moz-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">
|
||||||
|
<iframe style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<iframe style="width: 13px; max-width: 90px; -moz-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">
|
||||||
|
<iframe style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<iframe style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<?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 iframe elements' default "min-width: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "width" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 1000px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
width: -moz-min-content;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: lightgreen;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<div style="font: 8px monospace; height: 188px">
|
||||||
|
a b
|
||||||
|
</div>
|
||||||
|
<iframe/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="height: 122.5px"
|
||||||
|
/><iframe style="height: 73.5px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="height: 93px"
|
||||||
|
/><iframe style="height: 103px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="height: 114px"
|
||||||
|
/><iframe style="height: 82px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="height: 106px"
|
||||||
|
/><iframe style="height: 90px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe style="height: 46px"
|
||||||
|
/><iframe style="height: 150px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<?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 iframe elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
font: 8px monospace;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
min-height: 0;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and an iframe (ensure they aren't merged into one flex item)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
a b <iframe/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two iframe 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">
|
||||||
|
<iframe style="-moz-flex: 5"/>
|
||||||
|
<iframe style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two iframe 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">
|
||||||
|
<iframe style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<iframe style="height: 13px; -moz-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">
|
||||||
|
<iframe style="height: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<iframe style="height: 100px; -moz-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">
|
||||||
|
<iframe style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<iframe style="height: 13px; max-height: 90px; -moz-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">
|
||||||
|
<iframe style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<iframe style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?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 iframe elements' default "min-height: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "height" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 50px;
|
||||||
|
height: 1000px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<iframe/>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox" style="height: 22px">
|
||||||
|
some words
|
||||||
|
<img src="solidblue.png" style="float:right"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="width: 122.5px"
|
||||||
|
/><img src="solidblue.png" style="width: 73.5px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="width: 93px"
|
||||||
|
/><img src="solidblue.png" style="width: 103px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="width: 114px"
|
||||||
|
/><img src="solidblue.png" style="width: 82px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="width: 106px"
|
||||||
|
/><img src="solidblue.png" style="width: 90px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="width: 46px"
|
||||||
|
/><img src="solidblue.png" style="width: 150px"/>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test checks that img elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
min-width: 0;
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and an img (ensure they aren't merged into one flex item) -->
|
||||||
|
<div class="flexbox">
|
||||||
|
some words <img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two img 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">
|
||||||
|
<img src="solidblue.png" style="-moz-flex: 5"/>
|
||||||
|
<img src="solidblue.png" style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two img 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">
|
||||||
|
<img src="solidblue.png" style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<img src="solidblue.png" style="width: 13px; -moz-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">
|
||||||
|
<img src="solidblue.png" style="width: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<img src="solidblue.png" style="width: 100px; -moz-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">
|
||||||
|
<img src="solidblue.png" style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<img src="solidblue.png"
|
||||||
|
style="width: 13px; max-width: 90px; -moz-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">
|
||||||
|
<img src="solidblue.png" style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<img src="solidblue.png"
|
||||||
|
style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<?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 img elements' default "min-width: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "width" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 1000px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
width: -moz-min-content;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: lightgreen;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<div style="font: 8px monospace; height: 188px">
|
||||||
|
a b
|
||||||
|
</div>
|
||||||
|
<img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="height: 122.5px"
|
||||||
|
/><img src="solidblue.png" style="height: 73.5px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="height: 93px"
|
||||||
|
/><img src="solidblue.png" style="height: 103px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="height: 114px"
|
||||||
|
/><img src="solidblue.png" style="height: 82px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="height: 106px"
|
||||||
|
/><img src="solidblue.png" style="height: 90px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png" style="height: 46px"
|
||||||
|
/><img src="solidblue.png" style="height: 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 img elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
font: 8px monospace;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
min-height: 0;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and an img (ensure they aren't merged into one flex item) -->
|
||||||
|
<div class="flexbox">
|
||||||
|
a b <img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two img 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">
|
||||||
|
<img src="solidblue.png" style="-moz-flex: 5"/>
|
||||||
|
<img src="solidblue.png" style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two img 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">
|
||||||
|
<img src="solidblue.png" style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<img src="solidblue.png" style="height: 13px; -moz-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">
|
||||||
|
<img src="solidblue.png" style="height: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<img src="solidblue.png" style="height: 100px; -moz-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">
|
||||||
|
<img src="solidblue.png" style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<img src="solidblue.png"
|
||||||
|
style="height: 13px; max-height: 90px; -moz-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">
|
||||||
|
<img src="solidblue.png" style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<img src="solidblue.png"
|
||||||
|
style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?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 img elements' default "min-height: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "height" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 50px;
|
||||||
|
height: 1000px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<img src="solidblue.png"/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 1px dotted green;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox" style="height: 24px">
|
||||||
|
some words
|
||||||
|
<textarea style="float:right"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="width: 122.5px"
|
||||||
|
/><textarea style="width: 73.5px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="width: 93px"
|
||||||
|
/><textarea style="width: 103px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="width: 114px"
|
||||||
|
/><textarea style="width: 82px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="width: 106px"
|
||||||
|
/><textarea style="width: 90px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="width: 46px"
|
||||||
|
/><textarea style="width: 150px"/>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test checks that textarea elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
min-width: 0;
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 1px dotted green;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and a textarea (ensure they aren't merged into one flex item)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
some words <textarea/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two textarea 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">
|
||||||
|
<textarea style="-moz-flex: 5"/>
|
||||||
|
<textarea style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two textarea 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">
|
||||||
|
<textarea style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<textarea style="width: 13px; -moz-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">
|
||||||
|
<textarea style="width: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<textarea style="width: 100px; -moz-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">
|
||||||
|
<textarea style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<textarea
|
||||||
|
style="width: 13px; max-width: 90px; -moz-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">
|
||||||
|
<textarea style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<textarea
|
||||||
|
style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<?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 textarea elements' default "min-width: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "width" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 1000px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea/>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
width: -moz-min-content;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: lightgreen;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 1px dotted green;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<div style="font: 8px monospace; height: 188px">
|
||||||
|
a b
|
||||||
|
</div>
|
||||||
|
<textarea/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="height: 122.5px"
|
||||||
|
/><textarea style="height: 73.5px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="height: 93px"
|
||||||
|
/><textarea style="height: 103px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="height: 114px"
|
||||||
|
/><textarea style="height: 82px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="height: 106px"
|
||||||
|
/><textarea style="height: 90px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea style="height: 46px"
|
||||||
|
/><textarea style="height: 150px"/>
|
||||||
|
</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 textarea elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
font: 8px monospace;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
min-height: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 1px dotted green;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and a textarea (ensure they aren't merged into one flex item)
|
||||||
|
-->
|
||||||
|
<div class="flexbox">
|
||||||
|
a b <textarea/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two textarea 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">
|
||||||
|
<textarea style="-moz-flex: 5"/>
|
||||||
|
<textarea style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two textarea 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">
|
||||||
|
<textarea style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<textarea style="height: 13px; -moz-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">
|
||||||
|
<textarea style="height: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<textarea style="height: 100px; -moz-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">
|
||||||
|
<textarea style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<textarea
|
||||||
|
style="height: 13px; max-height: 90px; -moz-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">
|
||||||
|
<textarea style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<textarea
|
||||||
|
style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?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 textarea elements' default "min-height: auto"
|
||||||
|
property is handled correctly (i.e. isn't influenced by the "height"
|
||||||
|
property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 50px;
|
||||||
|
height: 1000px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<textarea/>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<video/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox" style="height: 22px">
|
||||||
|
some words
|
||||||
|
<video style="float:right"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="width: 122.5px"
|
||||||
|
/><video style="width: 73.5px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="width: 93px"
|
||||||
|
/><video style="width: 103px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="width: 114px"
|
||||||
|
/><video style="width: 82px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="width: 106px"
|
||||||
|
/><video style="width: 90px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="width: 46px"
|
||||||
|
/><video style="width: 150px"/>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test checks that video elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
width: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
min-width: 0;
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<video/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and a video (ensure they aren't merged into one flex item) -->
|
||||||
|
<div class="flexbox">
|
||||||
|
some words <video/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two video 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">
|
||||||
|
<video style="-moz-flex: 5"/>
|
||||||
|
<video style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two video 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">
|
||||||
|
<video style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<video style="width: 13px; -moz-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">
|
||||||
|
<video style="width: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<video style="width: 100px; -moz-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">
|
||||||
|
<video style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<video style="width: 13px; max-width: 90px; -moz-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">
|
||||||
|
<video style="width: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<video style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<video/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<?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 video elements' default "min-width: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "width" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
width: 1000px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<video/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
width: -moz-min-content;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: lightgreen;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<video/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<div style="font: 8px monospace; height: 188px">
|
||||||
|
a b
|
||||||
|
</div>
|
||||||
|
<video/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="height: 122.5px"
|
||||||
|
/><video style="height: 73.5px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="height: 93px"
|
||||||
|
/><video style="height: 103px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="height: 114px"
|
||||||
|
/><video style="height: 82px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="height: 106px"
|
||||||
|
/><video style="height: 90px"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexbox">
|
||||||
|
<video style="height: 46px"
|
||||||
|
/><video style="height: 150px"/>
|
||||||
|
</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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test checks that video elements behave correctly as flex items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 200px;
|
||||||
|
background: lightgreen;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-between;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
font: 8px monospace;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
min-height: 0;
|
||||||
|
border: 1px dotted green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- A) One flex item -->
|
||||||
|
<div class="flexbox">
|
||||||
|
<video/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B) Text and a video (ensure they aren't merged into one flex item) -->
|
||||||
|
<div class="flexbox">
|
||||||
|
a b <video/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- C) Two video 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">
|
||||||
|
<video style="-moz-flex: 5"/>
|
||||||
|
<video style="-moz-flex: 3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- D) Two video 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">
|
||||||
|
<video style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<video style="height: 13px; -moz-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">
|
||||||
|
<video style="height: 150px; -moz-flex: 1 4 auto"/>
|
||||||
|
<video style="height: 100px; -moz-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">
|
||||||
|
<video style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<video style="height: 13px; max-height: 90px; -moz-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">
|
||||||
|
<video style="height: 33px; -moz-flex: 2 auto"/>
|
||||||
|
<video style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<?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>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<video/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?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 video elements' default "min-height: auto" property
|
||||||
|
is handled correctly (i.e. isn't influenced by the "height" property).
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
div.flexbox {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border: 2px dotted black;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-flex-direction: column;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
width: 50px;
|
||||||
|
height: 1000px;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox">
|
||||||
|
<video/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This reference case is like its textcase, but with the testcase's dynamic
|
||||||
|
modifications already performed.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-size: 10px; }
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"> <div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f1"><div>[OldText]</div> </div>
|
||||||
|
<div class="flexbox" id="f2">[NewText]<div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f3">[NewText] <div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f4"> [NewText]<div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f5"><div>[OldText]</div>[NewText]</div>
|
||||||
|
<div class="flexbox" id="f6"><div>[OldText]</div>[NewText] </div>
|
||||||
|
<div class="flexbox" id="f7"><div>[OldText]</div> [NewText]</div>
|
||||||
|
<div class="flexbox" id="f8">[NewText] <div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f9"> [NewText]<div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f10"><div>[OldText]</div>[NewText] </div>
|
||||||
|
<div class="flexbox" id="f11"><div>[OldText]</div> [NewText]</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test verifies that we reconstruct frames as necessary, after content
|
||||||
|
(including whitespace & text) is dynamically inserted as a child of a
|
||||||
|
flexbox. (Note that in cases where we know the whitespace is going to be
|
||||||
|
dropped, we don't bother reconstructing frames. This test is to be sure we
|
||||||
|
aren't overzealous with that optimization.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
class="reftest-wait">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-size: 10px; }
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
|
||||||
|
var parent = document.getElementById(aParentId);
|
||||||
|
var insertBeforeTarget = parent.firstChild;
|
||||||
|
for (var i = 0; i < aPosn; i++) {
|
||||||
|
insertBeforeTarget = insertBeforeTarget.nextSibling;
|
||||||
|
}
|
||||||
|
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweak() {
|
||||||
|
// Just inserting whitespace
|
||||||
|
// -------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1");
|
||||||
|
|
||||||
|
// Inserting text or text with whitespace
|
||||||
|
// --------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7");
|
||||||
|
|
||||||
|
// Same as the whitespace cases immediately above, but now with separate
|
||||||
|
// text nodes for the whitespace vs. the text
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11");
|
||||||
|
|
||||||
|
document.documentElement.removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("MozReftestInvalidate", tweak, false);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f1"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f2"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f3"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f4"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f5"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f6"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f7"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f8"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f9"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f10"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f11"><div>[OldText]</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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This reference case is like its textcase, but with the testcase's dynamic
|
||||||
|
modifications already performed.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-size: 10px; }
|
||||||
|
|
||||||
|
<!-- to make inserted div elements stand out -->
|
||||||
|
div.inserted { background: teal; }
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f9"><div>[OldText]</div><div class="inserted">[NewDiv]</div></div>
|
||||||
|
<div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div> <div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f11"> <div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f12"><div>[OldText]</div><div class="inserted">[NewDiv]</div> </div>
|
||||||
|
<div class="flexbox" id="f13"><div>[OldText]</div> <div class="inserted">[NewDiv]</div></div>
|
||||||
|
<div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText]<div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f16"><div>[OldText]</div><div class="inserted">[NewDiv]</div>[NewText]</div>
|
||||||
|
<div class="flexbox" id="f17"><div>[OldText]</div>[NewText]<div class="inserted">[NewDiv]</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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test verifies that we reconstruct frames as necessary, after content
|
||||||
|
(including whitespace & divs) is dynamically inserted as a child of a
|
||||||
|
flexbox. (Note that in cases where we know the whitespace is going to be
|
||||||
|
dropped, we don't bother reconstructing frames. This test is to be sure we
|
||||||
|
aren't overzealous with that optimization.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
class="reftest-wait">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-size: 10px; }
|
||||||
|
|
||||||
|
<!-- to make inserted div elements stand out -->
|
||||||
|
div.inserted { background: teal; }
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
|
||||||
|
var parent = document.getElementById(aParentId);
|
||||||
|
var insertBeforeTarget = parent.firstChild;
|
||||||
|
for (var i = 0; i < aPosn; i++) {
|
||||||
|
insertBeforeTarget = insertBeforeTarget.nextSibling;
|
||||||
|
}
|
||||||
|
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDivElem() {
|
||||||
|
var div = document.createElement("div");
|
||||||
|
div.setAttribute("class", "inserted");
|
||||||
|
div.appendChild(document.createTextNode("[NewDiv]"));
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweak() {
|
||||||
|
// Inserting div, adjacent to inline content
|
||||||
|
// -----------------------------------------
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f0");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f1");
|
||||||
|
|
||||||
|
// Inserting div and whitespace, before inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f2");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f3");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
|
||||||
|
|
||||||
|
// Inserting div and whitespace, after inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f4");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f5");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
|
||||||
|
|
||||||
|
// Inserting div and text, before inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f6");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f7");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
|
||||||
|
|
||||||
|
// Inserting div and text, after inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f8");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f9");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
|
||||||
|
|
||||||
|
document.documentElement.removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("MozReftestInvalidate", tweak, false);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f1"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f2"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f3"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f4"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f5"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f6"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f7"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f8"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f9"><div>[OldText]</div></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This reference case is like its textcase, but with the testcase's dynamic
|
||||||
|
modifications already performed.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-size: 10px; }
|
||||||
|
|
||||||
|
<!-- to make inserted span elements stand out -->
|
||||||
|
span.inserted { background: teal; }
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f1"><div>[OldText]</div><span class="inserted">[NewSpan]</span></div>
|
||||||
|
<div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span> <div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f3"> <span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f4"><div>[OldText]</div><span class="inserted">[NewSpan]</span> </div>
|
||||||
|
<div class="flexbox" id="f5"><div>[OldText]</div> <span class="inserted">[NewSpan]</span></div>
|
||||||
|
<div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText]<div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f8"><div>[OldText]</div><span class="inserted">[NewSpan]</span>[NewText]</div>
|
||||||
|
<div class="flexbox" id="f9"><div>[OldText]</div>[NewText]<span class="inserted">[NewSpan]</span></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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test verifies that we reconstruct frames as necessary, after content
|
||||||
|
(including whitespace & spans) is dynamically inserted as a child of a
|
||||||
|
flexbox. (Note that in cases where we know the whitespace is going to be
|
||||||
|
dropped, we don't bother reconstructing frames. This test is to be sure we
|
||||||
|
aren't overzealous with that optimization.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
class="reftest-wait">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-size: 10px; }
|
||||||
|
|
||||||
|
<!-- to make inserted span elements stand out -->
|
||||||
|
span.inserted { background: teal; }
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
|
||||||
|
var parent = document.getElementById(aParentId);
|
||||||
|
var insertBeforeTarget = parent.firstChild;
|
||||||
|
for (var i = 0; i < aPosn; i++) {
|
||||||
|
insertBeforeTarget = insertBeforeTarget.nextSibling;
|
||||||
|
}
|
||||||
|
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createSpanElem() {
|
||||||
|
var span = document.createElement("span");
|
||||||
|
span.setAttribute("class", "inserted");
|
||||||
|
span.appendChild(document.createTextNode("[NewSpan]"));
|
||||||
|
return span;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweak() {
|
||||||
|
// Inserting span, on either side of existing content
|
||||||
|
// --------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
|
||||||
|
|
||||||
|
// Inserting span and whitespace, before existing content
|
||||||
|
// ------------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
|
||||||
|
|
||||||
|
// Inserting span and whitespace, after existing content
|
||||||
|
// -----------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
|
||||||
|
|
||||||
|
// Inserting span and text, before existing content
|
||||||
|
// ------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
|
||||||
|
|
||||||
|
// Inserting span and text, after existing content
|
||||||
|
// -----------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
|
||||||
|
|
||||||
|
document.documentElement.removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("MozReftestInvalidate", tweak, false);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f1"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f2"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f3"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f4"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f5"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f6"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f7"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f8"><div>[OldText]</div></div>
|
||||||
|
<div class="flexbox" id="f9"><div>[OldText]</div></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test verifies that we reconstruct frames as necessary, after content
|
||||||
|
(including whitespace & text) is dynamically inserted as a child of a
|
||||||
|
flexbox. (Note that in cases where we know the whitespace is going to be
|
||||||
|
dropped, we don't bother reconstructing frames. This test is to be sure we
|
||||||
|
aren't overzealous with that optimization.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
class="reftest-wait">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-size: 10px; }
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
|
||||||
|
var parent = document.getElementById(aParentId);
|
||||||
|
var insertBeforeTarget = parent.firstChild;
|
||||||
|
for (var i = 0; i < aPosn; i++) {
|
||||||
|
insertBeforeTarget = insertBeforeTarget.nextSibling;
|
||||||
|
}
|
||||||
|
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweak() {
|
||||||
|
// Just inserting whitespace
|
||||||
|
// -------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1");
|
||||||
|
|
||||||
|
// Inserting text or text with whitespace
|
||||||
|
// --------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7");
|
||||||
|
|
||||||
|
// Same as the whitespace cases immediately above, but now with separate
|
||||||
|
// text nodes for the whitespace vs. the text
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11");
|
||||||
|
|
||||||
|
document.documentElement.removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("MozReftestInvalidate", tweak, false);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f1"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f2"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f3"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f4"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f5"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f6"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f7"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f8"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f9"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f10"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f11"><span>[OldText]</span></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 verifies that we reconstruct frames as necessary, after content
|
||||||
|
(including whitespace & divs) is dynamically inserted as a child of a
|
||||||
|
flexbox. (Note that in cases where we know the whitespace is going to be
|
||||||
|
dropped, we don't bother reconstructing frames. This test is to be sure we
|
||||||
|
aren't overzealous with that optimization.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
class="reftest-wait">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.inserted {
|
||||||
|
background: teal; /* To make inserted div elements stand out. */
|
||||||
|
}
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
|
||||||
|
var parent = document.getElementById(aParentId);
|
||||||
|
var insertBeforeTarget = parent.firstChild;
|
||||||
|
for (var i = 0; i < aPosn; i++) {
|
||||||
|
insertBeforeTarget = insertBeforeTarget.nextSibling;
|
||||||
|
}
|
||||||
|
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDivElem() {
|
||||||
|
var div = document.createElement("div");
|
||||||
|
div.setAttribute("class", "inserted");
|
||||||
|
div.appendChild(document.createTextNode("[NewDiv]"));
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweak() {
|
||||||
|
// Inserting div, adjacent to inline content
|
||||||
|
// -----------------------------------------
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f0");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f1");
|
||||||
|
|
||||||
|
// Inserting div and whitespace, before inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f2");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f3");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
|
||||||
|
|
||||||
|
// Inserting div and whitespace, after inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f4");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f5");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
|
||||||
|
|
||||||
|
// Inserting div and text, before inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f6");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f7");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
|
||||||
|
|
||||||
|
// Inserting div and text, after inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f8");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f9");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
|
||||||
|
|
||||||
|
document.documentElement.removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("MozReftestInvalidate", tweak, false);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f1"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f2"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f3"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f4"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f5"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f6"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f7"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f8"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f9"><span>[OldText]</span></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 verifies that we reconstruct frames as necessary, after content
|
||||||
|
(including whitespace & spans) is dynamically inserted as a child of a
|
||||||
|
flexbox. (Note that in cases where we know the whitespace is going to be
|
||||||
|
dropped, we don't bother reconstructing frames. This test is to be sure we
|
||||||
|
aren't overzealous with that optimization.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
class="reftest-wait">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.inserted {
|
||||||
|
background: teal; /* To make inserted span elements stand out. */
|
||||||
|
}
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
|
||||||
|
var parent = document.getElementById(aParentId);
|
||||||
|
var insertBeforeTarget = parent.firstChild;
|
||||||
|
for (var i = 0; i < aPosn; i++) {
|
||||||
|
insertBeforeTarget = insertBeforeTarget.nextSibling;
|
||||||
|
}
|
||||||
|
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createSpanElem() {
|
||||||
|
var span = document.createElement("span");
|
||||||
|
span.setAttribute("class", "inserted");
|
||||||
|
span.appendChild(document.createTextNode("[NewSpan]"));
|
||||||
|
return span;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweak() {
|
||||||
|
// Inserting span, on either side of existing content
|
||||||
|
// --------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
|
||||||
|
|
||||||
|
// Inserting span and whitespace, before existing content
|
||||||
|
// ------------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
|
||||||
|
|
||||||
|
// Inserting span and whitespace, after existing content
|
||||||
|
// -----------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
|
||||||
|
|
||||||
|
// Inserting span and text, before existing content
|
||||||
|
// ------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
|
||||||
|
|
||||||
|
// Inserting span and text, after existing content
|
||||||
|
// -----------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
|
||||||
|
|
||||||
|
document.documentElement.removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("MozReftestInvalidate", tweak, false);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f1"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f2"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f3"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f4"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f5"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f6"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f7"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f8"><span>[OldText]</span></div>
|
||||||
|
<div class="flexbox" id="f9"><span>[OldText]</span></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This reference case is like its textcase, but with the testcase's dynamic
|
||||||
|
modifications already performed.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-size: 10px; }
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"> [OldText]</div>
|
||||||
|
<div class="flexbox" id="f1">[OldText] </div>
|
||||||
|
<div class="flexbox" id="f2">[NewText][OldText]</div>
|
||||||
|
<div class="flexbox" id="f3">[NewText] [OldText]</div>
|
||||||
|
<div class="flexbox" id="f4"> [NewText][OldText]</div>
|
||||||
|
<div class="flexbox" id="f5">[OldText][NewText]</div>
|
||||||
|
<div class="flexbox" id="f6">[OldText][NewText] </div>
|
||||||
|
<div class="flexbox" id="f7">[OldText] [NewText]</div>
|
||||||
|
<div class="flexbox" id="f8">[NewText] [OldText]</div>
|
||||||
|
<div class="flexbox" id="f9"> [NewText][OldText]</div>
|
||||||
|
<div class="flexbox" id="f10">[OldText][NewText] </div>
|
||||||
|
<div class="flexbox" id="f11">[OldText] [NewText]</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test verifies that we reconstruct frames as necessary, after content
|
||||||
|
(including whitespace & text) is dynamically inserted as a child of a
|
||||||
|
flexbox. (Note that in cases where we know the whitespace is going to be
|
||||||
|
dropped, we don't bother reconstructing frames. This test is to be sure we
|
||||||
|
aren't overzealous with that optimization.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
class="reftest-wait">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-size: 10px; }
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
|
||||||
|
var parent = document.getElementById(aParentId);
|
||||||
|
var insertBeforeTarget = parent.firstChild;
|
||||||
|
for (var i = 0; i < aPosn; i++) {
|
||||||
|
insertBeforeTarget = insertBeforeTarget.nextSibling;
|
||||||
|
}
|
||||||
|
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweak() {
|
||||||
|
// Just inserting whitespace
|
||||||
|
// -------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1");
|
||||||
|
|
||||||
|
// Inserting text or text with whitespace
|
||||||
|
// --------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7");
|
||||||
|
|
||||||
|
// Same as the whitespace cases immediately above, but now with separate
|
||||||
|
// text nodes for the whitespace vs. the text
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11");
|
||||||
|
|
||||||
|
document.documentElement.removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("MozReftestInvalidate", tweak, false);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f1">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f2">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f3">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f4">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f5">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f6">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f7">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f8">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f9">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f10">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f11">[OldText]</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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This reference case is like its textcase, but with the testcase's dynamic
|
||||||
|
modifications already performed.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.inserted {
|
||||||
|
background: teal; /* To make inserted div elements stand out. */
|
||||||
|
}
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div>[OldText]</div>
|
||||||
|
<div class="flexbox" id="f9">[OldText]<div class="inserted">[NewDiv]</div></div>
|
||||||
|
<div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div> [OldText]</div>
|
||||||
|
<div class="flexbox" id="f11"> <div class="inserted">[NewDiv]</div>[OldText]</div>
|
||||||
|
<div class="flexbox" id="f12">[OldText]<div class="inserted">[NewDiv]</div> </div>
|
||||||
|
<div class="flexbox" id="f13">[OldText] <div class="inserted">[NewDiv]</div></div>
|
||||||
|
<div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText][OldText]</div>
|
||||||
|
<div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div>[OldText]</div>
|
||||||
|
<div class="flexbox" id="f16">[OldText]<div class="inserted">[NewDiv]</div>[NewText]</div>
|
||||||
|
<div class="flexbox" id="f17">[OldText][NewText]<div class="inserted">[NewDiv]</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/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This test verifies that we reconstruct frames as necessary, after content
|
||||||
|
(including whitespace & divs) is dynamically inserted as a child of a
|
||||||
|
flexbox. (Note that in cases where we know the whitespace is going to be
|
||||||
|
dropped, we don't bother reconstructing frames. This test is to be sure we
|
||||||
|
aren't overzealous with that optimization.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
class="reftest-wait">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.inserted {
|
||||||
|
background: teal; /* To make inserted div elements stand out. */
|
||||||
|
}
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
|
||||||
|
var parent = document.getElementById(aParentId);
|
||||||
|
var insertBeforeTarget = parent.firstChild;
|
||||||
|
for (var i = 0; i < aPosn; i++) {
|
||||||
|
insertBeforeTarget = insertBeforeTarget.nextSibling;
|
||||||
|
}
|
||||||
|
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDivElem() {
|
||||||
|
var div = document.createElement("div");
|
||||||
|
div.setAttribute("class", "inserted");
|
||||||
|
div.appendChild(document.createTextNode("[NewDiv]"));
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweak() {
|
||||||
|
// Inserting div, adjacent to inline content
|
||||||
|
// -----------------------------------------
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f0");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f1");
|
||||||
|
|
||||||
|
// Inserting div and whitespace, before inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f2");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f3");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
|
||||||
|
|
||||||
|
// Inserting div and whitespace, after inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f4");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f5");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
|
||||||
|
|
||||||
|
// Inserting div and text, before inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f6");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 0, "f7");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
|
||||||
|
|
||||||
|
// Inserting div and text, after inline content
|
||||||
|
// ---------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f8");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createDivElem(), 1, "f9");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
|
||||||
|
|
||||||
|
document.documentElement.removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("MozReftestInvalidate", tweak, false);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f1">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f2">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f3">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f4">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f5">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f6">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f7">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f8">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f9">[OldText]</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
This reference case is like its textcase, but with the testcase's dynamic
|
||||||
|
modifications already performed.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.inserted {
|
||||||
|
background: teal; /* To make inserted span elements stand out. */
|
||||||
|
}
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span>[OldText]</div>
|
||||||
|
<div class="flexbox" id="f1">[OldText]<span class="inserted">[NewSpan]</span></div>
|
||||||
|
<div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span> [OldText]</div>
|
||||||
|
<div class="flexbox" id="f3"> <span class="inserted">[NewSpan]</span>[OldText]</div>
|
||||||
|
<div class="flexbox" id="f4">[OldText]<span class="inserted">[NewSpan]</span> </div>
|
||||||
|
<div class="flexbox" id="f5">[OldText] <span class="inserted">[NewSpan]</span></div>
|
||||||
|
<div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText][OldText]</div>
|
||||||
|
<div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span>[OldText]</div>
|
||||||
|
<div class="flexbox" id="f8">[OldText]<span class="inserted">[NewSpan]</span>[NewText]</div>
|
||||||
|
<div class="flexbox" id="f9">[OldText][NewText]<span class="inserted">[NewSpan]</span></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 verifies that we reconstruct frames as necessary, after content
|
||||||
|
(including whitespace & spans) is dynamically inserted as a child of a
|
||||||
|
flexbox. (Note that in cases where we know the whitespace is going to be
|
||||||
|
dropped, we don't bother reconstructing frames. This test is to be sure we
|
||||||
|
aren't overzealous with that optimization.)
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
class="reftest-wait">
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.inserted {
|
||||||
|
background: teal; /* To make inserted span elements stand out. */
|
||||||
|
}
|
||||||
|
|
||||||
|
div.flexbox {
|
||||||
|
border: 1px dashed blue;
|
||||||
|
width: 300px;
|
||||||
|
display: -moz-flex;
|
||||||
|
-moz-justify-content: space-around;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
|
||||||
|
var parent = document.getElementById(aParentId);
|
||||||
|
var insertBeforeTarget = parent.firstChild;
|
||||||
|
for (var i = 0; i < aPosn; i++) {
|
||||||
|
insertBeforeTarget = insertBeforeTarget.nextSibling;
|
||||||
|
}
|
||||||
|
parent.insertBefore(aNodeToInsert, insertBeforeTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createSpanElem() {
|
||||||
|
var span = document.createElement("span");
|
||||||
|
span.setAttribute("class", "inserted");
|
||||||
|
span.appendChild(document.createTextNode("[NewSpan]"));
|
||||||
|
return span;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweak() {
|
||||||
|
// Inserting span, on either side of existing content
|
||||||
|
// --------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
|
||||||
|
|
||||||
|
// Inserting span and whitespace, before existing content
|
||||||
|
// ------------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
|
||||||
|
|
||||||
|
// Inserting span and whitespace, after existing content
|
||||||
|
// -----------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
|
||||||
|
|
||||||
|
// Inserting span and text, before existing content
|
||||||
|
// ------------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
|
||||||
|
|
||||||
|
// Inserting span and text, after existing content
|
||||||
|
// -----------------------------------------------
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
|
||||||
|
|
||||||
|
insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
|
||||||
|
insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
|
||||||
|
|
||||||
|
document.documentElement.removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("MozReftestInvalidate", tweak, false);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flexbox" id="f0">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f1">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f2">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f3">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f4">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f5">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f6">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f7">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f8">[OldText]</div>
|
||||||
|
<div class="flexbox" id="f9">[OldText]</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче