position-absolute-dynamic-static-position-table-cell.html (818B)
1 <!DOCTYPE html> 2 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/" /> 4 <meta name="assert" content="This test checks that a dynamic change in constraints calculates the static position correctly for table-cells."/> 5 <style> 6 #table-cell { 7 position: relative; 8 display: table-cell; 9 vertical-align: middle; 10 11 width: 100px; 12 height: 100px; 13 background: red; 14 } 15 16 #target { 17 position: absolute; 18 translate: 0 -50px; 19 20 width: 100px; 21 height: 100px; 22 background: green; 23 } 24 </style> 25 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 26 <div id="table-cell"> 27 <div id="target" style="top: 0;"></div> 28 </div> 29 <script> 30 document.body.offsetTop; 31 document.getElementById('target').style.top = 'auto'; 32 </script>