third_party/WebKit/LayoutTests/css3/flexbox/imported/flexbox-flex-direction-column.htm

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <title>CSS Flexbox Test: Flex-direction = column</title>
   5                 <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com">
   6                 <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
   7                 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
   8                 <link rel="match" href="reference/flexbox-flex-direction-ref.htm" />
   9                 <meta name="flags" content="">
  10                 <meta name="assert" content="Test checks that flex container's main axis has the same orientation as the block axis of the current writing mode, when flex-direction = column. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.">
  11                 <style>
  12
  13                 /* Test specific Styles */
  14
  15                         .flex-wrapper {
  16                                 display: flex;
  17                                 flex-direction: column;
  18                                 flex-wrap: wrap;
  19                         }
  20
  21                 /* Test-series styles */
  22
  23                         .flex-wrapper {
  24                                 width:  120px;
  25                                 height: 120px;
  26
  27                                 /* should only display on error */
  28                                 background: red;
  29
  30                                 /* Enforce writing mode */
  31                                 direction: ltr;
  32                                 writing-mode: horizontal-tb;
  33                         }
  34
  35                         .flex-wrapper div {
  36                                 width:  38px;
  37                                 height: 38px;
  38
  39                                 background: green;
  40                                 border: 1px solid limegreen;
  41
  42                                 color: white;
  43                                 line-height: 40px;
  44                                 text-align: center;
  45                                 vertical-align: middle;
  46                         }
  47                 </style>
  48         </head>
  49         <body>
  50                 <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p>
  51                 <div class="flex-wrapper">
  52                         <div>1</div><div>4</div><div>7</div>
  53                         <div>2</div><div>5</div><div>8</div>
  54                         <div>3</div><div>6</div><div>9</div>
  55                 </div>
  56         </body>
  57 </html>