getClientRects.html | Explore in Territory

<!DOCTYPE HTML>
<title>Element.getClientRects() on an SVGElement</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
body {
  margin-left:0px;
  margin-top:0px;
}
</style>
<body>
<svg width="100px" height="100px">
  <rect x="20" y="30" width="40" height="50" />
</svg>
<svg width="100px" height="100px">
  <g>
    <text x="10" y="10">svg text</text>
    <foreignObject x="10" y="30" width="50" height="50"> foreign object text </foreignObject>
  </g>
</svg>
<script>
test(function() {
  var list1 = document.querySelector("rect").getClientRects();
  assert_equals(list1.length, 1);
  var r = list1[0];
  assert_equals(r.left, 20);
  assert_equals(r.top, 30);
  assert_equals(r.width, 40);
  assert_equals(r.height, 50);
  assert_equals(r.right, 60);
  assert_equals(r.bottom, 80);

  var gElem = document.querySelector("g");
  var list2 = gElem.getClientRects();
  assert_equals(list2.length, 1);
  var r1 = list2[0];
  var r2 = gElem.getBoundingClientRect();
  assert_equals(r1.left, r2.left);
  assert_equals(r1.top, r2.top);
  assert_equals(r1.width, r2.width);
  assert_equals(r1.height, r2.height);
  assert_equals(r1.right, r2.right);
  assert_equals(r1.bottom, r2.bottom);
});
</script>
</body>
chromium/third_party/blink/web_tests/svg/custom/getClientRects.html
