testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.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 vertical-rl column flex container, with various "align-self" 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: column;
  18       writing-mode: vertical-rl;
  19       padding: 1px 2px;
  20       border: 1px solid black;
  21       background: yellow;
  22       margin-bottom: 5px;
  23       margin-right: 5px;
  24       float: left; /* For testing in "rows" of containers */
  25     }
  26     br { clear: both }
  27
  28     .big > .container {
  29       height: 10px;
  30       width: 16px;
  31     }
  32     .small > .container {
  33       height: 2px;
  34       width: 4px;
  35     }
  36
  37     .container > * {
  38       position: absolute;
  39       background: teal;
  40       height: 6px;
  41       width: 8px;
  42     }
  43   </style>
  44   <script src="/resources/testharness.js"></script>
  45   <script src="/resources/testharnessreport.js"></script>
  46   <script src="/resources/check-layout-th.js"></script>
  47 </head>
  48 <body onload="checkLayout('.container > div')">
  49   <div class="big">
  50     <!-- The various align-self values, from
  51          https://www.w3.org/TR/css-align-3/#propdef-align-self -->
  52     <!-- auto | normal | stretch -->
  53     <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div>
  54     <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
  55     <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
  56     <br>
  57     <!-- <baseline-position> -->
  58     <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
  59     <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
  60     <br>
  61     <!-- <self-position>, part 1 -->
  62     <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
  63     <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
  64     <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
  65     <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
  66     <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
  67     <br>
  68     <!-- <self-position>, part 2 -->
  69     <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
  70     <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div>
  71     <br>
  72   </div>
  73   <div class="small">
  74     <!-- The various align-self values, from
  75          https://www.w3.org/TR/css-align-3/#propdef-align-self -->
  76     <!-- auto | normal | stretch -->
  77     <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div>
  78     <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
  79     <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
  80     <br>
  81     <!-- <baseline-position> -->
  82     <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
  83     <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
  84     <br>
  85     <!-- <self-position>, part 1 -->
  86     <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
  87     <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
  88     <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
  89     <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
  90     <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
  91     <br>
  92     <!-- <self-position>, part 2 -->
  93     <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
  94     <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
  95     <br>
  96   </div>
  97 </body>
  98 </html>