grid-item-rel-pos-002.html (1233B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Rel.pos. centered grid item with style change.</title> 4 <link rel="author" title="James0x57" href="mailto:James0x57@gmail.com"> 5 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="Grid Items"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1576355"> 8 <link rel="match" href="grid-item-rel-pos-002-ref.html"> 9 <meta name="assert" content="Checks that the rel.pos. grid items are positioned correctly after a 'left' style change."> 10 <style> 11 .grid { 12 margin: 40px; 13 display: grid; 14 grid: auto / repeat(3,100px); 15 grid-gap: 20px; 16 } 17 span, even { 18 position: relative; 19 min-height: 20px; 20 background: grey; 21 left: 0px; 22 width: 30px; 23 justify-self: center; 24 } 25 .offset even { 26 left: 20%; 27 } 28 29 </style> 30 31 <div class="grid offset"> 32 <span></span><span></span><span></span> 33 <even></even><even></even><even></even> 34 <span></span><span></span><span></span> 35 </div> 36 37 <script> 38 document.body.offsetHeight; 39 let grid = document.querySelector('.grid'); 40 grid.classList.remove('offset') 41 document.body.offsetHeight; 42 grid.classList.add('offset') 43 </script>