getBoundingClientRect-svg.html (2875B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect"> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-range-getboundingclientrect"> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 text { 9 font-family: Ahem; 10 font-size: 10px; 11 line-height: 1; 12 width: 10ch; 13 } 14 </style> 15 <body> 16 17 <svg width="800" height="100"> 18 <text x="20" y="20" id="text-1">An SVG text element with no "transform" attribute</text> 19 <text x="20" y="50" id="text-2" transform="matrix(2,0,0,2,0,0)">An SVG with a "transform" attribute</text> 20 <text x="20" y="80" id="text-3" rotate="45">An SVG with a "rotate" attribute</text> 21 </svg> 22 23 <script> 24 function getBoundingClientRect(node, start, end) { 25 const range = document.createRange(); 26 range.setStart(node, start); 27 range.setEnd(node, end); 28 const rect = range.getBoundingClientRect(); 29 return rect; 30 } 31 32 setup({ explicit_done: true }); 33 34 document.fonts.ready.then(() => { 35 test(() => { 36 const element = document.querySelector('#text-1'); 37 const elementRect = element.getBoundingClientRect(); 38 const rangeRect = getBoundingClientRect(element.firstChild, 0, element.firstChild.length); 39 assert_approx_equals(elementRect.x, rangeRect.x, 1); 40 assert_approx_equals(elementRect.y, rangeRect.y, 1); 41 assert_approx_equals(elementRect.width, rangeRect.width, 1); 42 assert_approx_equals(elementRect.height, rangeRect.height, 1); 43 }, 'Element.getBoundingClientRect() and Range.getBoudingClientRect() should match for an SVG <text>'); 44 45 test(() => { 46 const element = document.querySelector('#text-2'); 47 const elementRect = element.getBoundingClientRect(); 48 const rangeRect = getBoundingClientRect(element.firstChild, 0, element.firstChild.length); 49 assert_approx_equals(elementRect.x, rangeRect.x, 1); 50 assert_approx_equals(elementRect.y, rangeRect.y, 1); 51 assert_approx_equals(elementRect.width, rangeRect.width, 1); 52 assert_approx_equals(elementRect.height, rangeRect.height, 1); 53 }, 'Element.getBoundingClientRect() and Range.getBoudingClientRect() should match for an SVG <text> with a transform'); 54 55 test(() => { 56 const element = document.querySelector('#text-3'); 57 const elementRect = element.getBoundingClientRect(); 58 const rangeRect = getBoundingClientRect(element.firstChild, 0, element.firstChild.length); 59 assert_approx_equals(elementRect.x, rangeRect.x, 1); 60 assert_approx_equals(elementRect.y, rangeRect.y, 1); 61 assert_approx_equals(elementRect.width, rangeRect.width, 1); 62 assert_approx_equals(elementRect.height, rangeRect.height, 1); 63 }, 'Element.getBoundingClientRect() and Range.getBoudingClientRect() should match for an SVG <text> with a rotate'); 64 65 done(); 66 }); 67 </script> 68 </body>