testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002-ref.html

   1 <!DOCTYPE html>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html>
   7 <head>
   8   <title>CSS Reference</title>
   9   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
  10   <meta charset="utf-8">
  11   <style>
  12     .container {
  13       display: block;
  14       padding: 1px 2px;
  15       border: 1px solid black;
  16       background: yellow;
  17       margin-bottom: 5px;
  18       margin-right: 5px;
  19       float: left; /* For testing in "rows" of containers */
  20     }
  21     br { clear: both }
  22
  23     .big > .container {
  24       height: 10px;
  25       width: 16px;
  26     }
  27     .small > .container {
  28       height: 2px;
  29       width: 4px;
  30     }
  31
  32     .container > * {
  33       background: teal;
  34       height: 6px;
  35       width: 8px;
  36     }
  37     .big   .alignStart  { /* nothing special */ }
  38     .big   .alignCenter { margin-top: 2px }
  39     .big   .alignEnd    { margin-top: 4px }
  40     .small .alignStart  { /* nothing special */ }
  41     .small .alignCenter { margin-top: -2px }
  42     .small .alignEnd    { margin-top: -4px }
  43   </style>
  44 </head>
  45 <body>
  46   <div class="big">
  47     <!-- The various align-content values, from
  48          https://www.w3.org/TR/css-align-3/#propdef-align-content -->
  49     <!-- normal -->
  50     <div class="container"><div class="alignCenter"><!--normal--></div></div>
  51     <br>
  52     <!-- <baseline-position> -->
  53     <div class="container"><div class="alignStart"><!--baseline--></div></div>
  54     <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
  55     <br>
  56     <!-- <content-distribution> -->
  57     <div class="container"><div class="alignStart"><!--space-between--></div></div>
  58     <div class="container"><div class="alignCenter"><!--space-around--></div></div>
  59     <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
  60     <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
  61     <br>
  62     <!-- <content-position>, part 1: -->
  63     <div class="container"><div class="alignCenter"><!--center--></div></div>
  64     <div class="container"><div class="alignStart"><!--start--></div></div>
  65     <div class="container"><div class="alignEnd"><!--end--></div></div>
  66     <br>
  67     <!-- <content-position>, part 2: -->
  68     <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
  69     <div class="container"><div class="alignStart"><!--flex-end--></div></div>
  70     <br>
  71   </div>
  72   <div class="small">
  73     <!-- The various align-content values, from
  74          https://www.w3.org/TR/css-align-3/#propdef-align-content -->
  75     <!-- normal -->
  76     <div class="container"><div class="alignCenter"><!--normal--></div></div>
  77     <br>
  78     <!-- <baseline-position> -->
  79     <div class="container"><div class="alignStart"><!--baseline--></div></div>
  80     <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
  81     <br>
  82     <!-- <content-distribution> -->
  83     <div class="container"><div class="alignStart"><!--space-between--></div></div>
  84     <div class="container"><div class="alignCenter"><!--space-around--></div></div>
  85     <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
  86     <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
  87     <br>
  88     <!-- <content-position>, part 1: -->
  89     <div class="container"><div class="alignCenter"><!--center--></div></div>
  90     <div class="container"><div class="alignStart"><!--start--></div></div>
  91     <div class="container"><div class="alignEnd"><!--end--></div></div>
  92     <br>
  93     <!-- <content-position>, part 2: -->
  94     <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
  95     <div class="container"><div class="alignStart"><!--flex-end--></div></div>
  96     <br>
  97   </div>
  98 </body>
  99 </html>