flex-content-alignment-with-abspos-001.html (1622B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flex Layout Test: dynamic content alignment with abspos elements.</title> 5 <link rel="author" title="Alison Maher" href="mailto:almaher@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 <meta name="assert" content="Test that dynamically changing alignment for abspos flex items works as expected." /> 11 12 <style> 13 body { 14 margin: 0px; 15 width: 800px; 16 } 17 18 .flex { 19 display: flex; 20 width: 100%; 21 height: 600px; 22 background: gray; 23 position: relative; 24 } 25 26 #item { 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 let container = document.getElementById("container"); 42 container.style.justifyContent = "center"; 43 checkLayout('.flex'); 44 } 45 </script> 46 </head> 47 48 <body onload="updateAlignmentAndCheckLayout()"> 49 50 <div class="flex" id="container" data-expected-width="800" data-expected-height="600"> 51 <div id="item" data-offset-x="329" data-offset-y="269" data-expected-width="142" data-expected-height="62"></div> 52 </div> 53 54 </body> 55 </html>