testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003-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   > .container > * { margin-left: 8px; }
  38     .small > .container > * { margin-left: -4px; }
  39
  40     .big   .alignStart  { /* nothing special */ }
  41     .big   .alignCenter { margin-top: 2px }
  42     .big   .alignEnd    { margin-top: 4px }
  43     .small .alignStart  { /* nothing special */ }
  44     .small .alignCenter { margin-top: -2px }
  45     .small .alignEnd    { margin-top: -4px }
  46   </style>
  47 </head>
  48 <body>
  49   <div class="big">
  50     <!-- The various align-content values, from
  51          https://www.w3.org/TR/css-align-3/#propdef-align-content -->
  52     <!-- normal -->
  53     <div class="container"><div class="alignCenter"><!--normal--></div></div>
  54     <br>
  55     <!-- <baseline-position> -->
  56     <div class="container"><div class="alignStart"><!--baseline--></div></div>
  57     <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
  58     <br>
  59     <!-- <content-distribution> -->
  60     <div class="container"><div class="alignStart"><!--space-between--></div></div>
  61     <div class="container"><div class="alignCenter"><!--space-around--></div></div>
  62     <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
  63     <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
  64     <br>
  65     <!-- <content-position>, part 1: -->
  66     <div class="container"><div class="alignCenter"><!--center--></div></div>
  67     <div class="container"><div class="alignStart"><!--start--></div></div>
  68     <div class="container"><div class="alignEnd"><!--end--></div></div>
  69     <br>
  70     <!-- <content-position>, part 2: -->
  71     <div class="container"><div class="alignStart"><!--flex-start--></div></div>
  72     <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
  73     <br>
  74   </div>
  75   <div class="small">
  76     <!-- The various align-content values, from
  77          https://www.w3.org/TR/css-align-3/#propdef-align-content -->
  78     <!-- normal -->
  79     <div class="container"><div class="alignCenter"><!--normal--></div></div>
  80     <br>
  81     <!-- <baseline-position> -->
  82     <div class="container"><div class="alignStart"><!--baseline--></div></div>
  83     <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
  84     <br>
  85     <!-- <content-distribution> -->
  86     <div class="container"><div class="alignStart"><!--space-between--></div></div>
  87     <div class="container"><div class="alignCenter"><!--space-around--></div></div>
  88     <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
  89     <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
  90     <br>
  91     <!-- <content-position>, part 1: -->
  92     <div class="container"><div class="alignCenter"><!--center--></div></div>
  93     <div class="container"><div class="alignStart"><!--start--></div></div>
  94     <div class="container"><div class="alignEnd"><!--end--></div></div>
  95     <br>
  96     <!-- <content-position>, part 2: -->
  97     <div class="container"><div class="alignStart"><!--flex-start--></div></div>
  98     <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
  99     <br>
 100   </div>
 101 </body>
 102 </html>