position-absolute-chrome-bug-001.html (1456B)
1 <!doctype html> 2 <html> 3 <head> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#def-cb"> 5 <link rel="help" href="https://crbug.com/970171"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #container { 10 position: relative; 11 border: 1px solid black; 12 } 13 .narrow { 14 width: 200px; 15 height: 300px; 16 } 17 .wide { 18 width: 300px; 19 height: 200px; 20 } 21 #target { 22 background: green; 23 position: absolute; 24 width: 50px; 25 height: 30px; 26 left: 50%; 27 top: 50%; 28 margin-left: -25px; 29 margin-top: -15px; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="container" class="narrow"> 35 <button id="target"></button> 36 </div> 37 <script> 38 test( t => { 39 let container = document.querySelector("#container"); 40 let target = document.querySelector("#target"); 41 document.body.offsetTop; 42 // start off narrow 43 let narrow_left = target.offsetLeft; 44 let narrow_top = target.offsetTop; 45 // make it wide 46 container.classList.toggle("narrow"); 47 container.classList.toggle("wide"); 48 document.body.offsetTop; 49 // make it narrow again 50 container.classList.toggle("narrow"); 51 container.classList.toggle("wide"); 52 document.body.offsetTop; 53 assert_equals(target.offsetLeft, narrow_left); 54 assert_equals(target.offsetTop, narrow_top); 55 }, "absolute positioned button with percentage top gets positioned"); 56 </script> 57 </body> 58 </html>