| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Tests getBoundingClientRect for collapsed ranges</title> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| </head> |
| <style> |
| p {visibility: hidden;} |
| </style> |
| <body> |
| <p> |
| Tests that Range::getBoundingClientRect returns top and left |
| coordinates for collapsed ranges as mandated by the spec. |
| </p> |
| <script> |
| function topLeftPosition(rect) |
| { |
| return rect.top + ', ' + rect.left; |
| } |
| |
| function topRightPosition(rect) |
| { |
| return rect.top + ', ' + rect.right; |
| } |
| |
| var textNode = document.getElementsByTagName('p')[0].firstChild; |
| var stringToMeasure = 'Range::getBoundingClientRect'; |
| var startIndex = textNode.textContent.indexOf(stringToMeasure); |
| var endIndex = startIndex + stringToMeasure.length; |
| |
| test(function() { |
| var range = document.createRange(); |
| range.setStart(textNode, startIndex); |
| range.setEnd(textNode, endIndex); |
| |
| assert_equals( |
| topLeftPosition(range.getBoundingClientRect()), |
| topLeftPosition(range.getClientRects()[0]), |
| 'Position of bounding rect should match first rect.'); |
| }, 'Check position for non-collapsed range.'); |
| |
| test(function() { |
| var range = document.createRange(); |
| range.setStart(textNode, startIndex); |
| range.setEnd(textNode, endIndex); |
| |
| var collapsed = document.createRange(); |
| collapsed.setStart(textNode, startIndex); |
| collapsed.setEnd(textNode, endIndex); |
| collapsed.collapse(); |
| |
| assert_equals( |
| topLeftPosition(collapsed.getBoundingClientRect()), |
| topLeftPosition(collapsed.getClientRects()[0]), |
| 'Position of bounding rect should match first rect.'); |
| |
| assert_equals( |
| topLeftPosition(collapsed.getBoundingClientRect()), |
| topRightPosition(range.getBoundingClientRect()), |
| 'Position of collapsed rect should match right edge of ' + |
| 'non-collapsed range.'); |
| }, 'Check position for collapsed range.'); |
| </script> |
| </body> |
| </html> |
