testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.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 Test: Static position of abspos children in a row flex container, with various "align-content" values</title>
   9   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
  10   <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
  11   <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
  12   <meta charset="utf-8">
  13   <style>
  14     .container {
  15       display: flex;
  16       position: relative;
  17       flex-flow: row wrap;
  18       padding: 1px 2px;
  19       border: 1px solid black;
  20       background: yellow;
  21       margin-bottom: 5px;
  22       margin-right: 5px;
  23       float: left; /* For testing in "rows" of containers */
  24     }
  25     br { clear: both }
  26
  27     .big > .container {
  28       height: 10px;
  29       width: 16px;
  30     }
  31     .small > .container {
  32       height: 2px;
  33       width: 4px;
  34     }
  35
  36     .container > * {
  37       position: absolute;
  38       background: teal;
  39       height: 6px;
  40       width: 8px;
  41       /* This "align-self" only gets a chance to take effect when our container
  42          has "align-content: stretch". In that case, it helps us verify that
  43          the container's "align-content: stretch" is actually taking effect
  44          and stretching the flex line (and giving us space to center in). */
  45       align-self: center;
  46     }
  47   </style>
  48   <script src="/resources/testharness.js"></script>
  49   <script src="/resources/testharnessreport.js"></script>
  50   <script src="/resources/check-layout-th.js"></script>
  51 </head>
  52 <body onload="checkLayout('.container > div')">
  53   <div class="big">
  54     <!-- The various align-content values, from
  55          https://www.w3.org/TR/css-align-3/#propdef-align-content -->
  56     <!-- normal -->
  57     <div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="3"></div></div>
  58     <br>
  59     <!-- <baseline-position> -->
  60     <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
  61     <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
  62     <br>
  63     <!-- <content-distribution> -->
  64     <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
  65     <div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
  66     <div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
  67     <div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="3"></div></div>
  68     <br>
  69     <!-- <content-position>, part 1 -->
  70     <div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
  71     <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
  72     <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
  73     <br>
  74     <!-- <content-position>, part 2 -->
  75     <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
  76     <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
  77     <br>
  78   </div>
  79   <div class="small">
  80     <!-- The various align-content values, from
  81          https://www.w3.org/TR/css-align-3/#propdef-align-content -->
  82     <!-- normal -->
  83     <div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="-1"></div></div>
  84     <br>
  85     <!-- <baseline-position> -->
  86     <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
  87     <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
  88     <br>
  89     <!-- <content-distribution> -->
  90     <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
  91     <div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
  92     <div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
  93     <div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="-1"></div></div>
  94     <br>
  95     <!-- <content-position>, part 1 -->
  96     <div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
  97     <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
  98     <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
  99     <br>
 100     <!-- <content-position>, part 2 -->
 101     <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
 102     <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
 103     <br>
 104   </div>
 105 </body>
 106 </html>