align-self-014.html (1081B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: align-self: center content with flex-direction: column.</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 5 <link rel="help" href="https://drafts.csswg.org/css-align/#align-self-property"> 6 <link rel="help" href="https://crbug.com/750553"/> 7 <meta name="assert" content="This test ensures that no unnecessary horizontal offset is applied to inline content in a 'align-self: center' box, inside of a flexbox with 'flex-direction: column'."/> 8 9 <style> 10 html, body { 11 margin: 0; 12 } 13 14 body { 15 display: flex; 16 flex-direction: column; 17 } 18 19 .content { 20 align-self: center; 21 } 22 23 .content > div { 24 width: 400px; 25 display: inline-block; 26 } 27 </style> 28 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script src="/resources/check-layout-th.js"></script> 32 33 <body onload="checkLayout('.content')"> 34 35 <div class="content" data-offset-x="0"> 36 <div data-offset-x="0">X</div> 37 <div>X</div> 38 <div>X</div> 39 <div>X</div> 40 <div>X</div> 41 </div> 42 43 </body> 44 </html>