position-absolute-in-inline-001.html (1064B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Absolute inside inline container location should be correct</title> 5 <link rel="author" href="mailto:atotic@chromium.org"> 6 <link rel="help" href="https://www.w3.org/TR/css-position-3/#def-cb"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <!-- There should be a green square below --> 11 <body style="margin:0"> 12 <span id="container" style="position:relative;"> 13 <div style="width:100px; height:100px; background:red;"></div> 14 <div id="target" style="position:absolute; left:0; top:0; width:100px; height:100px; background:green;"></div> 15 </span> 16 <script> 17 test(_ => { 18 let bounds = document.querySelector("#target").getBoundingClientRect(); 19 let container_bounds = document.querySelector("#container").getBoundingClientRect(); 20 assert_equals(bounds.x, container_bounds.x); 21 assert_equals(bounds.y, container_bounds.y); 22 }, "absolute inside inline container location should be correct."); 23 </script> 24 </body> 25 </html>