getboundingclientrect.html (1146B)
1 <!doctype html> 2 <title>foreignObject: Element.prototype.getBoundingClientRect()</title> 3 <link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #descendant { 9 width: 100px; 10 height: 60px; 11 margin: 6px 12px; 12 background-color: blue; 13 } 14 </style> 15 <svg> 16 <foreignObject x="20" y="10" width="200" height="100"> 17 <div id="descendant"></div> 18 </foreignObject> 19 </svg> 20 <script> 21 function checkBoundingRect(element, bounds) { 22 let boundingRect = element.getBoundingClientRect(); 23 for (let prop of ['left', 'top', 'width', 'height']) 24 assert_equals(boundingRect[prop], bounds[prop], prop); 25 } 26 27 test(function() { 28 checkBoundingRect(document.querySelector('foreignObject'), 29 { left: 28, top: 18, width: 200, height: 100 }); 30 checkBoundingRect(document.querySelector('foreignObject > div'), 31 { left: 40, top: 24, width: 100, height: 60 }); 32 }); 33 </script>