dynamic-align-self-001.html (978B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="help" href="https://crbug.com/1306037"> 4 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 5 <meta name="assert" 6 content="Abspos child of a flexbox moves after script changes its alignment."> 7 <style> 8 #reference-overlapped-red { 9 position: absolute; 10 background-color: red; 11 width: 100px; 12 height: 100px; 13 z-index: -1; 14 } 15 16 #parent { 17 position: relative; 18 display: flex; 19 width: 200px; 20 height: 200px; 21 } 22 23 #child { 24 display: flex; 25 position: absolute; 26 width: 100px; 27 height: 100px; 28 background-color: green; 29 align-self: end; 30 } 31 32 </style> 33 34 <p>Test passes if there is a filled green square and <strong>no red</strong>. 35 </p> 36 37 <div id=reference-overlapped-red></div> 38 39 <div id="parent"> 40 <div id="child"></div> 41 </div> 42 43 <script> 44 document.body.offsetTop; 45 child.style.alignSelf = 'start'; 46 </script>