layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-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><head>
   7   <title>Reference: dynamic change .left on abs.pos. item w. align-self:end</title>
   8   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
   9   <style type="text/css">
  10 html,body {
  11   color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
  12 }
  13
  14 .flexbox {
  15   display: flex;
  16   position: relative;
  17   height: 100px;
  18 }
  19
  20 #item {
  21   background: grey;
  22   position: relative;
  23   align-self: end;
  24   left: 20px;
  25 }
  26
  27 </style>
  28 </head>
  29 <body>
  30
  31 <div class="flexbox">
  32   <div id="item">X</div>
  33 </div>
  34
  35 </body>
  36 </html>