tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

auto-margins-003.html (1286B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>CSS Flexbox: Change to auto-margin items in column flexbox</title>
      5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-column">
      6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-self">
      7 <link rel="match" href="reference/auto-margins-003-ref.html">
      8 <meta name="assert" content="This test ensures that auto margins for column flows are correctly calculated"/>
      9 <link href="support/flexbox.css" rel="stylesheet">
     10 <style>
     11    .flexbox {
     12      border: 1px solid black;
     13      width: 400px;
     14      height: 200px;
     15    }
     16    .item1 {
     17      margin: 0 auto;
     18      background: lightblue;
     19    }
     20    .item1v {
     21      margin: auto 0;
     22      background: lightblue;
     23    }
     24    .item2 {
     25      background: lime;
     26    }
     27  </style>
     28 </head>
     29 <body>
     30  <p>The test passes if the flex items are properly centered in each column</p>
     31  <div class="flexbox column">
     32    <div class="item1">centeredWithMargins</div>
     33    <div class="item2 align-self-center">centeredWithAlignSelf</div>
     34  </div>
     35  <div style="writing-mode: vertical-lr;">
     36    <div class="flexbox column">
     37      <div class="item1v">centeredWithMargins</div>
     38      <div class="item2 align-self-center">centeredWithAlignSelf</div>
     39    </div>
     40  </div>
     41 </body>
     42 </html>