range-bounding-client-rect-with-display-contents.html (1516B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Include display:contents elements recursively when calculating bounding rect for a ranges</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-range-getboundingclientrect"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="container"> 8 <div id="spacerBefore">spacer before</div> 9 <div style="display:contents"> 10 <div style="height:30px; background:lightblue"> 11 HEIGHT: 30px 12 </div> 13 <div style="display:contents"> 14 <div style="display:contents"> 15 <div style="height:30px; background:lightblue"> 16 HEIGHT: 30px 17 </div> 18 </div> 19 </div> 20 </div> 21 <div id="spacerAfter">spacer after</div> 22 </div> 23 <script> 24 test(function () { 25 const spacerBefore = document.getElementById("spacerBefore"); 26 const spacerAfter = document.getElementById("spacerAfter"); 27 28 const expected = spacerAfter.getBoundingClientRect().top - spacerBefore.getBoundingClientRect().bottom; 29 30 const rangeBetweenSpacers = document.createRange(); 31 rangeBetweenSpacers.setStartAfter(spacerBefore); 32 rangeBetweenSpacers.setEndBefore(spacerAfter); 33 34 const actual = rangeBetweenSpacers.getBoundingClientRect().height; 35 36 assert_true(actual > 0, "range has vertical height"); 37 assert_equals(expected, actual, "range.getBoundingClientRect().height"); 38 }, "the space between elements using a range should be the same as using another method") 39 </script>