flexbox-with-pseudo-elements-003-ref.html (1351B)
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 content: 'b'; 28 background: yellow; 29 align-self: center; 30 order: 1; 31 } 32 .fakeAfter { 33 content: 'a'; 34 background: lightblue; 35 align-self: center; 36 order: -1; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="flexContainer"> 42 <div class="fakeBefore">b</div> 43 x 44 <div>y</div> 45 z 46 </div> 47 <div class="flexContainer"> 48 x 49 <div>y</div> 50 z 51 <div class="fakeAfter">a</div> 52 </div> 53 <div class="flexContainer"> 54 <div class="fakeBefore">b</div> 55 x 56 <div>y</div> 57 z 58 <div class="fakeAfter">a</div> 59 </div> 60 </body> 61 </html>