cssom-getBoundingClientRect-003.html (1313B)
1 <!doctype html> 2 <title>{Element,Range}.prototype.getBoundingClientRect on SVG <tspan></title> 3 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect"> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-range-getboundingclientrect"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <svg> 9 <text y="180" font-size="100" font-family="Ahem" 10 fill="lightblue">X<tspan fill="blue">XX</tspan></text> 11 </svg> 12 <script> 13 function check(object) { 14 let rect = object.getBoundingClientRect(); 15 assert_equals(rect.left, 108, 'left'); 16 assert_equals(rect.top, 108, 'top'); 17 assert_equals(rect.width, 200, 'width'); 18 assert_equals(rect.height, 100, 'height'); 19 } 20 async_test(t => { 21 window.addEventListener("load", t.step_func_done(() => { 22 let tspan = document.querySelector('tspan'); 23 check(tspan); 24 })); 25 }, document.title + ', Element'); 26 async_test(t => { 27 window.addEventListener("load", t.step_func_done(() => { 28 let tspan = document.querySelector('tspan'); 29 let range = new Range(); 30 range.selectNode(tspan); 31 check(range); 32 })); 33 }, document.title + ', Range'); 34 </script>