grid-content-alignment-with-abspos-001.html (1700B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Grid Layout Test: dynamic content alignment with abspos elements.</title> 5 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> 7 <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> 8 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> 9 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> 10 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1248940"> 11 <link rel="stylesheet" href="/css/support/grid.css"> 12 <link rel="stylesheet" href="/css/support/alignment.css"> 13 <meta name="assert" content="Test that dynamically changing alignment for abspos grid items works as expected." /> 14 15 <style> 16 body { 17 margin: 0px; 18 width: 800px; 19 } 20 21 .grid { 22 width: 100%; 23 height: 600px; 24 } 25 26 .a { 27 width: 140px; 28 height: 60px; 29 border: 1px solid purple; 30 position: absolute; 31 } 32 </style> 33 34 <script src="/resources/testharness.js"></script> 35 <script src="/resources/testharnessreport.js"></script> 36 <script src="/resources/check-layout-th.js"></script> 37 <script> 38 function updateAlignmentAndCheckLayout() { 39 let item = document.getElementById("item"); 40 item.style.alignSelf = "center"; 41 item.style.justifySelf = "center"; 42 checkLayout('.grid'); 43 } 44 </script> 45 </head> 46 47 <body onload="updateAlignmentAndCheckLayout()"> 48 49 <div class="grid" data-expected-width="800" data-expected-height="600"> 50 <div class="a" id="item" data-offset-x="329" data-offset-y="269" data-expected-width="142" data-expected-height="62"></div> 51 </div> 52 53 </body> 54 </html>