position-absolute-in-inline-002.html (1639B)
1 <!doctype html> 2 3 <link rel="author" href="mailto:atotic@chromium.org"> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#def-cb"> 5 <meta name="assert" content="split inline containing blocks are handled correctly."> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 body { 10 margin: 0; 11 } 12 #container-span { 13 position: relative; 14 outline: solid 1px gray; 15 } 16 #split { 17 width: 10px; 18 height: 10px; 19 } 20 #target { 21 position: absolute; 22 top: 0; 23 left: 0; 24 right: 0; 25 bottom: 0; 26 background: rgba(0,255,0,0.3); 27 } 28 </style> 29 <!-- There should be a green rectangle spanning two "container span" lines below --> 30 <span id="outer-span"> 31 outer span 32 <span id="container-span"> 33 container span start 34 <div id="split"></div> 35 <div id="target"></div> 36 container span end 37 </span> 38 outer span end 39 </span> 40 <script> 41 test(_ => { 42 let abs_bounds = document.querySelector("#target").getClientRects(); 43 let container_bounds = document.querySelector("#container-span").getClientRects(); 44 assert_equals(abs_bounds.length, 1); 45 assert_equals(container_bounds.length, 3); 46 assert_equals(abs_bounds[0].left, container_bounds[0].left, "left matches container"); 47 assert_equals(abs_bounds[0].top, container_bounds[0].top, "top matches container"); 48 assert_equals(abs_bounds[0].right, container_bounds[2].right, "right matches container"); 49 assert_equals(abs_bounds[0].bottom, container_bounds[2].bottom, "bottom matches container"); 50 }, "absolute inside inline container location should be correct."); 51 </script>