layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-3.html@7540298fafa1
layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-3.html
Thu, 15 Jan 2015 21:13:52 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:13:52 +0100
- branch
- TOR_BUG_9701
- changeset 12
- 7540298fafa1
- permissions
- -rw-r--r--
Remove forgotten relic of ABI crash risk averse overloaded method change.
1 <!DOCTYPE html>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a
7 flex container, specifically when they've got display:table-row or
8 table-cell.
10 Note that we *don't* treat the table row or cell frames themselves as flex
11 items, because they get wrapped in an anonymous table box, and *that* is
12 the flex item. So, "align-self" and "order" have no effect on the
13 row/cell. -->
14 <html>
15 <head>
16 <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>
17 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
18 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-items">
19 <link rel="match" href="flexbox-with-pseudo-elements-3-ref.html">
20 <meta charset="utf-8">
21 <style>
22 .flexContainer {
23 display: flex;
24 align-items: flex-end;
25 justify-content: space-between;
26 height: 50px;
27 width: 300px;
28 margin-bottom: 2px;
29 background: lightgray;
30 }
31 div.withBefore::before {
32 display: table-row;
33 content: 'b';
34 background: yellow;
35 align-self: center; /* should have no effect */
36 order: 1; /* should have no effect */
37 }
38 div.withAfter::after {
39 display: table-cell;
40 content: 'a';
41 background: lightblue;
42 align-self: center; /* should have no effect */
43 order: -1; /* should have no effect */
44 }
45 </style>
46 </head>
47 <body>
48 <div class="flexContainer withBefore">
49 x
50 <div>y</div>
51 z
52 </div>
53 <div class="flexContainer withAfter">
54 x
55 <div>y</div>
56 z
57 </div>
58 <div class="flexContainer withBefore withAfter">
59 x
60 <div>y</div>
61 z
62 </div>
63 </body>
64 </html>
