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