getclientrects-003.html (1809B)
1 <!DOCTYPE html> 2 <title>out-of-flow in relpos in multicol in multicol</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getclientrects"> 5 <link rel="help" href="https://drafts.csswg.org/css-multicol/"> 6 <style> 7 body { 8 margin: 0; 9 } 10 </style> 11 <div style="columns:3; gap:50px; column-fill:auto; inline-size:400px; block-size:100px; background:yellow;"> 12 <div style="block-size:50px;"></div> 13 <div style="columns:2; column-fill:auto; gap:0; background:cyan;"> 14 <div style="position:relative; block-size:350px;"> 15 <div style="block-size:160px;"></div> 16 <div id="elm" style="position:absolute; inline-size:10px; border:10px solid; block-size:150px;"></div> 17 </div> 18 </div> 19 </div> 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 <script> 23 let rects = elm.getClientRects(); 24 test(()=> { assert_equals(rects.length, 3); }, "Rectangle count"); 25 test(()=> { assert_equals(rects[0].left, 150); }, "#0 left"); 26 test(()=> { assert_equals(rects[0].top, 60); }, "#0 top"); 27 test(()=> { assert_equals(rects[0].width, 30); }, "#0 width"); 28 test(()=> { assert_equals(rects[0].height, 40); }, "#0 height"); 29 test(()=> { assert_equals(rects[1].left, 200); }, "#1 left"); 30 test(()=> { assert_equals(rects[1].top, 0); }, "#1 top"); 31 test(()=> { assert_equals(rects[1].width, 30); }, "#1 width"); 32 test(()=> { assert_equals(rects[1].height, 100); }, "#1 height"); 33 test(()=> { assert_equals(rects[2].left, 300); }, "#2 left"); 34 test(()=> { assert_equals(rects[2].top, 0); }, "#2 top"); 35 test(()=> { assert_equals(rects[2].width, 30); }, "#2 width"); 36 test(()=> { assert_equals(rects[2].height, 30); }, "#2 height"); 37 </script>