flexbox-with-pseudo-elements-001-ref.html (1318B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) 7 for the testcase's ::before and ::after generated content. 8 9 fakeBefore div is always the first child; fakeAfter is always the last. 10 --> 11 <html> 12 <head> 13 <title>CSS Reftest Reference</title> 14 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 15 <meta charset="utf-8"> 16 <style> 17 .flexContainer { 18 display: flex; 19 align-items: flex-end; 20 justify-content: space-between; 21 height: 50px; 22 width: 300px; 23 margin-bottom: 2px; 24 background: lightgray; 25 } 26 .fakeBefore { 27 align-self: center; 28 content: 'b'; 29 background: yellow; 30 } 31 .fakeAfter { 32 align-self: center; 33 content: 'a'; 34 background: lightblue; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="flexContainer"> 40 <div class="fakeBefore">b</div> 41 x 42 <div>y</div> 43 z 44 </div> 45 <div class="flexContainer"> 46 x 47 <div>y</div> 48 z 49 <div class="fakeAfter">a</div> 50 </div> 51 <div class="flexContainer"> 52 <div class="fakeBefore">b</div> 53 x 54 <div>y</div> 55 z 56 <div class="fakeAfter">a</div> 57 </div> 58 </body> 59 </html>