OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Any copyright is dedicated to the Public Domain. | 3 Any copyright is dedicated to the Public Domain. |
4 http://creativecommons.org/publicdomain/zero/1.0/ | 4 http://creativecommons.org/publicdomain/zero/1.0/ |
5 --> | 5 --> |
6 <!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a | 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 | 7 flex container, specifically when they've got display:table-row or |
8 table-cell. | 8 table-cell. |
9 | 9 |
10 Note that we *don't* treat the table row or cell frames themselves as flex | 10 The table-row / table-cell 'display' values should be blockified, and the |
11 items, because they get wrapped in an anonymous table box, and *that* is | 11 pseudo-elements should be treated as flex items. (They should not get |
12 the flex item. So, "align-self" and "order" have no effect on the | 12 wrapped in an anonymous table box.) --> |
13 row/cell. --> | |
14 <html> | 13 <html> |
15 <head> | 14 <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> | 15 <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"> | 16 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> |
18 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> | 17 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> |
19 <link rel="match" href="flexbox-with-pseudo-elements-003-ref.html"> | 18 <link rel="match" href="flexbox-with-pseudo-elements-003-ref.html"> |
20 <meta charset="utf-8"> | 19 <meta charset="utf-8"> |
21 <style> | 20 <style> |
22 .flexContainer { | 21 .flexContainer { |
23 display: flex; | 22 display: flex; |
24 align-items: flex-end; | 23 align-items: flex-end; |
25 justify-content: space-between; | 24 justify-content: space-between; |
26 height: 50px; | 25 height: 50px; |
27 width: 300px; | 26 width: 300px; |
28 margin-bottom: 2px; | 27 margin-bottom: 2px; |
29 background: lightgray; | 28 background: lightgray; |
30 } | 29 } |
31 div.withBefore::before { | 30 div.withBefore::before { |
32 display: table-row; | 31 display: table-row; |
33 content: 'b'; | 32 content: 'b'; |
34 background: yellow; | 33 background: yellow; |
35 align-self: center; /* should have no effect */ | 34 /* If these "align-self" & "order" properties impact the rendering (as |
36 order: 1; /* should have no effect */ | 35 they should), that verifies we're being treated as a flex item. */ |
| 36 align-self: center; |
| 37 order: 1; |
37 } | 38 } |
38 div.withAfter::after { | 39 div.withAfter::after { |
39 display: table-cell; | 40 display: table-cell; |
40 content: 'a'; | 41 content: 'a'; |
41 background: lightblue; | 42 background: lightblue; |
42 align-self: center; /* should have no effect */ | 43 /* If these "align-self" & "order" properties impact the rendering (as |
43 order: -1; /* should have no effect */ | 44 they should), that verifies we're being treated as a flex item. */ |
| 45 align-self: center; |
| 46 order: -1; |
44 } | 47 } |
45 </style> | 48 </style> |
46 </head> | 49 </head> |
47 <body> | 50 <body> |
48 <div class="flexContainer withBefore"> | 51 <div class="flexContainer withBefore"> |
49 x | 52 x |
50 <div>y</div> | 53 <div>y</div> |
51 z | 54 z |
52 </div> | 55 </div> |
53 <div class="flexContainer withAfter"> | 56 <div class="flexContainer withAfter"> |
54 x | 57 x |
55 <div>y</div> | 58 <div>y</div> |
56 z | 59 z |
57 </div> | 60 </div> |
58 <div class="flexContainer withBefore withAfter"> | 61 <div class="flexContainer withBefore withAfter"> |
59 x | 62 x |
60 <div>y</div> | 63 <div>y</div> |
61 z | 64 z |
62 </div> | 65 </div> |
63 </body> | 66 </body> |
64 </html> | 67 </html> |
OLD | NEW |