position-absolute-004.html (1023B)
1 <!DOCTYPE html> 2 <title>CSS Test: Absolutely positioned children of flexboxes</title> 3 <link rel="author" title="Google Inc." href="http://www.google.com/"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> 5 <meta name="flags" content="dom"> 6 <meta name="assert" content="Checks that we correctly handle when a flex item 7 becomes absolutely positioned"> 8 <style> 9 #flex { 10 display: flex; 11 position: relative; 12 background: red; 13 width: 500px; 14 height: 200px; 15 } 16 17 #item { 18 background: green; 19 left: 0; 20 right: 0; 21 top: 0; 22 bottom: 0; 23 } 24 </style> 25 26 <script src="/resources/testharness.js"></script> 27 <script src="/resources/testharnessreport.js"></script> 28 <script src="/resources/check-layout-th.js"></script> 29 30 <script> 31 function update() { 32 var item = document.getElementById("item"); 33 item.offsetHeight; 34 item.style.position = "absolute"; 35 item.offsetHeight; 36 checkLayout("#flex"); 37 } 38 </script> 39 40 <body onload="update();"> 41 42 <div id="flex"> 43 <div id="item" data-expected-width="500"></div> 44 </div>