layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.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>CSS Flexbox Test: 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   <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
  10   <link rel="match" href="flexbox-item-align-self-dynamic-pos-002-ref.html">
  11   <style type="text/css">
  12 html,body {
  13   color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
  14 }
  15
  16 .flexbox {
  17   display: flex;
  18   height: 100px;
  19 }
  20
  21 #item {
  22   background: grey;
  23   position: absolute;
  24   align-self: end;
  25   left: 10px;
  26 }
  27
  28 </style>
  29 </head>
  30 <body>
  31
  32 <div class="flexbox">
  33   <div id="item">X</div>
  34 </div>
  35
  36 <script>
  37   document.body.offsetLeft;
  38   var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
  39   items.map(item =>  item.style.left = "20px");
  40   document.body.offsetLeft;
  41 </script>
  42
  43 </body>
  44 </html>