grid-item-align-dynamic-pos-003.html (1195B)
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 Grid Test: dynamic change .left on abs.pos. item w. align-self:start</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="grid-item-align-dynamic-pos-003-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 .grid { 17 display: inline-grid; 18 position: relative; 19 background: lightgrey; 20 grid: 50px 50px / 50px 50px; 21 } 22 23 #item { 24 background: grey; 25 position: absolute; 26 align-self: start; 27 left: 10px; 28 } 29 30 </style> 31 </head> 32 <body> 33 34 <div class="grid"> 35 <div style="align-self: start; font-size:32pt">X</div> 36 <div id="item" style="grid-area:2/2">X</div> 37 </div> 38 39 <script> 40 document.body.offsetLeft; 41 var items = Array.prototype.slice.call(document.querySelectorAll('#item')); 42 items.map(item => item.style.left = "20px"); 43 document.body.offsetLeft; 44 </script> 45 46 </body> 47 </html>