svg-get-bounding-client-rect-in-non-rendered-elements.html (2458B)
1 <!DOCTYPE html> 2 <title>Get Bounding Client Rect in Non-Rendered SVG elements</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel="author" title="Divyansh Mangal" href="mailto:dmangal@microsoft.com"> 6 <svg width="100" height="20"> 7 <g display="none"> 8 <rect id="rect1" width="10" height="10" /> 9 </g> 10 <symbol id="symbol" width="10" height="10"> 11 <rect id="rect2" display="none" width="10" height="10" /> 12 </symbol> 13 <g> 14 <rect id="rect3" display="none" width="10" height="10" /> 15 </g> 16 <defs> 17 <rect id="rect4" width="10" height="10" /> 18 </defs> 19 <pattern> 20 <rect id="rect5" width="10" height="10" /> 21 </pattern> 22 <g> 23 <rect id="rect6" width="10" height="10" /> 24 </g> 25 <g id="g1"> 26 <rect x="5" y="5" width="10" height="10"/> 27 <g> 28 <rect x="20" y="20" width="30" height="30" fill="none"/> 29 </g> 30 </g> 31 </svg> 32 <script> 33 let rect1 = document.getElementById("rect1"), 34 rect2 = document.getElementById("rect2"), 35 rect3 = document.getElementById("rect3"), 36 rect4 = document.getElementById("rect4"); 37 rect5 = document.getElementById("rect5"), 38 rect6 = document.getElementById("rect6"), 39 symbol = document.getElementById("symbol"), 40 g1 = document.getElementById("g1"); 41 42 test(function () { 43 assert_equals(rect1.getBoundingClientRect().width, 0, "rect1"); 44 assert_equals(rect2.getBoundingClientRect().width, 0, "rect2"); 45 assert_equals(rect3.getBoundingClientRect().width, 0, "rect3"); 46 assert_equals(rect4.getBoundingClientRect().width, 0, "rect4"); 47 assert_equals(rect5.getBoundingClientRect().width, 0, "rect5"); 48 assert_equals(rect6.getBoundingClientRect().width, 10, "rect6"); 49 assert_equals(symbol.getBoundingClientRect().width, 0, "symbol"); 50 assert_equals(g1.getBoundingClientRect().width, 45, "g1"); 51 52 assert_equals(rect1.getBoundingClientRect().height, 0, "rect1"); 53 assert_equals(rect2.getBoundingClientRect().height, 0, "rect2"); 54 assert_equals(rect3.getBoundingClientRect().height, 0, "rect3"); 55 assert_equals(rect4.getBoundingClientRect().height, 0, "rect4"); 56 assert_equals(rect5.getBoundingClientRect().height, 0, "rect5"); 57 assert_equals(rect6.getBoundingClientRect().height, 10, "rect6"); 58 assert_equals(symbol.getBoundingClientRect().height, 0, "symbol"); 59 assert_equals(g1.getBoundingClientRect().height, 45, "g1"); 60 }, "Get Bounding Client Rect"); 61 </script>