layout/reftests/css-grid/grid-item-align-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 .grid {
  15   display: inline-grid;
  16   position: relative;
  17   background: lightgrey;
  18   grid: 50px 50px / 50px 50px;
  19 }
  20
  21 #item {
  22   background: grey;
  23   position: absolute;
  24   align-self: end;
  25   left: 20px;
  26 }
  27
  28   </style>
  29 </head>
  30 <body>
  31
  32 <div class="grid">
  33   <div id="item">X</div>
  34 </div>
  35
  36 </body>
  37 </html>