flex-inline.html (1060B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexible Box Test: display proprety - inline-flex</title> 5 <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-display-inline-flex"> 7 <link rel="match" href="reference/flex-inline-ref.html"> 8 <meta name="assert" content="Statement describing what the test case is asserting"> 9 <style type="text/css"> 10 /* Positioned container allows for the self-describing statement to still 11 be visible in the case of failure */ 12 .container { 13 position: relative; 14 } 15 .greenSquare { 16 display: inline-flex; 17 margin-top: -200px; 18 background: green; 19 } 20 </style> 21 </head> 22 <body> 23 <p>The test passed if you see a green block which its text is 'Success!'.</p> 24 <div class="container"> 25 <!-- This is the square that should not be visible if the test passes --> 26 <div class="greenSquare">Success!</div> 27 </div> 28 </body> 29 </html>