range-bounding-client-rect-with-nested-text.html (1509B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>All the rectangles for the text nodes must included in getClientRects</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-range-getclientrects"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .nullDims { 9 width: 0; 10 height: 0; 11 } 12 13 .nullDims > div { 14 position: absolute; 15 left: 10px; 16 } 17 </style> 18 <div id="container"> 19 <div class="nullDims"> 20 <div id="first" style="top: 10px">Hello</div> 21 </div> 22 <div class="nullDims"> 23 <div style="top: 40px">Firefox</div> 24 </div> 25 <div class="nullDims"> 26 <div style="top: 70px">Firefox again</div> 27 </div> 28 <div class="nullDims"> 29 <div id="last" style="top: 100px">World</div> 30 </div> 31 </div> 32 <script> 33 test(function () { 34 const first = document.getElementById("first"); 35 const last = document.getElementById("last"); 36 const range = document.createRange(); 37 range.setStart(first.firstChild, 0); 38 range.setEnd(last.firstChild, 5); 39 40 const selection = window.getSelection(); 41 selection.removeAllRanges(); 42 selection.addRange(range); 43 let rects = Array.from(range.getClientRects()); 44 assert_equals(rects.length, 6, "Number of rectangles"); 45 rects = rects.filter(({ width, height }) => width > 0 && height > 0); 46 assert_equals(rects.length, 4, "Number of non-empty rectangles"); 47 }, "getClientRects should return non-empty rectangles for nested text nodes") 48 </script>