<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a
flex container, specifically when they've got display:table-row or
table-cell.
Note that we *don't* treat the table row or cell frames themselves as flex
items, because they get wrapped in an anonymous table box, and *that* is
the flex item. So, "align-self" and "order" have no effect on the
row/cell. --><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-items" rel="help" />
<link href="reference/flexbox-with-pseudo-elements-003-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 50px;
width: 300px;
margin-bottom: 2px;
background: lightgray;
}
div.withBefore::before {
display: table-row;
content: 'b';
background: yellow;
align-self: center; /* should have no effect */
order: 1; /* should have no effect */
}
div.withAfter::after {
display: table-cell;
content: 'a';
background: lightblue;
align-self: center; /* should have no effect */
order: -1; /* should have no effect */
}
</style>
</head>
<body>
<div class="flexContainer withBefore">
x
<div>y</div>
z
</div>
<div class="flexContainer withAfter">
x
<div>y</div>
z
</div>
<div class="flexContainer withBefore withAfter">
x
<div>y</div>
z
</div>
</body></html>