gecko/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1-ref.xhtml
Daniel Holbert 96708c6027 Bug 666041: Reftests for css3-flexbox. (tests-only)
--HG--
rename : layout/reftests/bugs/solidblue.png => layout/reftests/flexbox/solidblue.png
2012-09-29 23:42:29 -07:00

98 lines
2.6 KiB
HTML

<?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>